/*
Theme Name: Mentioned
Theme URI: https://mentioned.ca
Author: Culturis
Author URI: https://culturis.ca
Description: Custom WordPress theme for Mentioned.ca — Canada's relationship-aware business directory. Standalone theme built from the locked Phase 1 mockup. Oswald + Source Serif 4, asymmetric corner system, forest + teal + cream palette. A Culturis platform.
Version: 1.10.6
Requires at least: 6.0
Requires PHP: 8.2
License: Proprietary
Text Domain: mentioned
*/

/* ============================================================
   TOKENS — DO NOT HARD-CODE COLORS, FONTS, OR RADIUS ELSEWHERE
   Source: locked Phase 1 brief §4 (2026-05-25).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Mentioned palette ──────────────────────────────── */
  --mn-forest:        #04342C;   /* Primary dark — nav, dark sections, footer, CTA banner */
  --mn-forest-soft:   #085041;   /* Hover variant */
  --mn-teal-mid:      #1D9E75;   /* PRIMARY ACCENT — italic accent on light bg */
  --mn-teal-light:    #5DCAA5;   /* Italic accent on dark bg, decorative dots */
  --mn-teal-lighter:  #9FE1CB;   /* Stat number italic emphasis */
  --mn-mint:          #E1F5EE;   /* Soft mint fills */
  --mn-coral:         #D85A30;   /* CTA buttons ONLY + logo accent dot */
  --mn-coral-dark:    #712B13;
  --mn-coral-light:   #FAECE7;
  --mn-cream:         #F4F1EC;   /* Default light bg, alternating sections */
  --mn-cream-warm:    #EAE5DC;
  --mn-paper:         #FFFFFF;   /* Cards, search bar */
  --mn-ink:           #1C2B3A;   /* Body text on light */
  --mn-ink-mid:       #718096;   /* Lede, captions, metadata */
  --mn-ink-soft:      #A0AEC0;
  --mn-hairline:      #EAE5DC;   /* 0.5px borders on light */

  /* ── Culturis asymmetric corner system ──────────────── */
  /* LARGE elements: sharp at BOTTOM-RIGHT */
  --mn-r-section: 32px 32px 0 32px;
  --mn-r-card:    24px 24px 0 24px;
  --mn-r-btn:     999px 999px 0 999px;
  /* SMALL elements: sharp at TOP-RIGHT */
  --mn-r-input:   14px 0 14px 14px;
  --mn-r-badge:   10px 0 10px 10px;
  --mn-r-chip:    999px 0 999px 999px;
  /* Stays circular */
  --mn-r-avatar:  50%;

  /* ── Typography ─────────────────────────────────────── */
  --mn-font-display: 'Oswald', sans-serif;
  --mn-font-body:    'Inter', sans-serif;

  /* Type scale (rem) */
  --mn-fs-eyebrow:  0.8125rem;   /* 13px — v3 */
  --mn-fs-meta:     0.875rem;    /* 14px — v3 */
  --mn-fs-body:     1.0625rem;   /* 17px — v3 */
  --mn-fs-lead:     1.25rem;     /* 20px — v3 */
  --mn-fs-h4:       1.5rem;      /* 24px */
  --mn-fs-h3:       1.875rem;    /* 30px */
  --mn-fs-h2:       4.5rem;      /* 72px — section H2 default */
  --mn-fs-h1:       7.5rem;      /* 120px — hero H1 */
  --mn-fs-display:  5.5rem;      /* 88px — stats numerals, CTA H2 */

  /* Spacing */
  --mn-space-1:  4px;
  --mn-space-2:  8px;
  --mn-space-3:  12px;
  --mn-space-4:  16px;
  --mn-space-5:  24px;
  --mn-space-6:  32px;
  --mn-space-7:  48px;
  --mn-space-8:  64px;
  --mn-space-9:  96px;
  --mn-space-10: 112px;
  --mn-space-11: 128px;

  /* Container */
  --mn-container-max: 1200px;
  --mn-container-pad: clamp(24px, 4vw, 56px);

  /* ── Animation ──────────────────────────────────────── */
  --mn-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ──────────────────────────────────────────────────────
     CULTURIS PLATFORM FOUNDATION KIT — TOKEN ALIASES
     Bridge so the shared kit CSS (mobile-foundation.css, future kit
     drop-ins) resolves to Mentioned's locked palette + typography.
     Kit defaults are deliberately overridden — Mentioned has its own
     locked identity per brief §4 + §8.2. Update these aliases if the
     kit adds new tokens.
     ────────────────────────────────────────────────────── */

  /* Surfaces */
  --cream:        var(--mn-cream);
  --cream-deep:   var(--mn-cream-warm);
  --line:         var(--mn-hairline);

  /* Dark + text */
  --navy:         var(--mn-forest);
  --navy-soft:    var(--mn-forest-soft);
  --muted:        var(--mn-ink-mid);
  --ink-soft:     var(--mn-ink-soft);
  --warm:         var(--mn-ink-mid);

  /* Brand accent (Mentioned: teal-mid + coral instead of kit's teal#4AACA3) */
  --teal:         var(--mn-teal-mid);
  --teal-deep:    var(--mn-forest-soft);
  --coral:        var(--mn-coral);
  --coral-soft:   var(--mn-coral-light);

  /* Fonts — Mentioned uses Oswald (display) + Source Serif 4 (body/accent),
     NOT the kit's Inter + Fraunces. Kit's components.css IS NOT loaded;
     these aliases exist only for any future drop-in that references them. */
  --font-sans:    var(--mn-font-display);
  --font-serif:   var(--mn-font-body);

  /* Asymmetric corner — kit has 1 token, Mentioned brief §4 has 7.
     The kit's --corner-v35 aliases to Mentioned's --r-card (large
     element default). Use Mentioned-specific tokens for inputs/badges/chips. */
  --corner-v35:   var(--mn-r-card);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-pill:  999px;
}

/* ============================================================
   ELEMENT RESETS — scoped narrow so we don't fight other themes
   if Mentioned ever shares a WP install with another site.
   ============================================================ */

.mn-body *, .mn-body *::before, .mn-body *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.mn-body {
  margin: 0;
  font-family: var(--mn-font-body);
  font-weight: 400;
  font-size: var(--mn-fs-body);
  line-height: 1.6;            /* v3 body */
  color: var(--mn-ink);
  background: var(--mn-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mn-body h1, .mn-body h2, .mn-body h3, .mn-body h4 {
  font-family: var(--mn-font-display);
  font-weight: 700;            /* v3: display/header weight 700 */
  line-height: 1.1;            /* v3: tight heading default (display 1.04 / header 1.12); per-section rules override */
  letter-spacing: -0.005em;
  color: var(--mn-forest);
  margin: 0 0 var(--mn-space-4);
  text-transform: uppercase;
}
.mn-body p { margin: 0 0 var(--mn-space-4); }

.mn-body a {
  color: var(--mn-forest);
  text-decoration: none;
  transition: color 0.3s var(--mn-ease);
}
.mn-body a:hover { color: var(--mn-teal-mid); }

.mn-body img, .mn-body svg { display: block; max-width: 100%; height: auto; }

.mn-body button { font-family: inherit; cursor: pointer; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

.mn-container {
  width: 100%;
  max-width: var(--mn-container-max);
  margin: 0 auto;
  padding-left: var(--mn-container-pad);
  padding-right: var(--mn-container-pad);
}

.mn-section { padding: var(--mn-space-10) 0; }

/* ============================================================
   BRAND WORDMARK — header + footer
   Oswald uppercase MENTIONED + Source Serif 4 italic coral dot.
   ============================================================ */

.mn-wordmark {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--mn-forest);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  display: inline-flex;
  align-items: baseline;
}
.mn-wordmark__dot {
  font-family: var(--mn-font-body);
  font-style:normal;
  font-weight: 400;
  color: var(--mn-coral);
  font-size: 30px;
  line-height: 0;
  margin-left: -2px;
  text-transform: none;
}

/* ============================================================
   ACCENT — italic Source Serif 4 inside Oswald uppercase headlines.
   The platform's typographic signature. Exactly one per H2.
   ============================================================ */

.mn-accent,
.mn-accent-dark {
  font-family: var(--mn-font-body);
  font-style:normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}
.mn-accent      { color: var(--mn-teal-mid); }
.mn-accent-dark { color: var(--mn-teal-light); }

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */

.mn-screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.mn-screen-reader-text:focus {
  position: static;
  width: auto; height: auto;
  margin: var(--mn-space-2); padding: var(--mn-space-3);
  clip: auto;
  background: var(--mn-forest);
  color: var(--mn-cream);
}

/* ============================================================
   GLOBAL TRANSITION — every interactive element uses the same easing.
   Locked rule: cubic-bezier(0.16, 1, 0.3, 1) only.
   ============================================================ */

.mn-body * {
  transition: transform 0.4s var(--mn-ease),
              background 0.4s var(--mn-ease),
              border-color 0.4s var(--mn-ease),
              gap 0.3s var(--mn-ease),
              color 0.3s var(--mn-ease);
}