/* ============================================================================
   TWB v3 — kickers.css
   Visual Identity Evolution System (May 22 2026)

   This file establishes the SYSTEM LAYER for premium editorial restraint:
     1. Canonical kicker system (Bloomberg Weekend / Apple editorial / Semafor)
     2. Soft horizontal rule system (magazine, not dashboard)
     3. FX directional indicators (FT + luxury terminal, no crypto)
     4. Palette deployment refinement (70/20/10 charcoal/neutral/accent)
     5. Mobile audit refinements (Apple News spacing rhythm)

   Loaded AFTER base.css / typography.css / layout.css.
   Existing component-level kickers (.home-section__kicker, .tile__label,
   .back-home-featured__kicker etc.) continue to work; they will be
   incrementally migrated to .tw-kicker over time.

   Reference feel: Bloomberg Weekend + Apple editorial + Semafor restraint.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   PALETTE EXTENSION — additive only, no overrides
   ---------------------------------------------------------------------------- */
:root {
  /* Kicker category accents — subdued, never neon.
     All are derived from existing palette (spine-a, spine-b, accent, link). */
  --tw-kicker-signal:        var(--tw-spine-a);   /* navy   #1f3a5f */
  --tw-kicker-money:         var(--tw-accent);    /* gold   #c89a47 */
  --tw-kicker-returning:     var(--tw-spine-b);   /* brown  #6b3410 */
  --tw-kicker-opportunity:   #4a6b3a;             /* muted forest (additive) */
  --tw-kicker-africa:        #8a4a2c;             /* warm terracotta (additive) */
  --tw-kicker-diaspora:      var(--tw-ink-soft);  /* charcoal #333 */

  /* FX directional — muted, never trading-terminal green/red */
  --tw-fx-up:     #4a7a3a;   /* muted green */
  --tw-fx-down:   #9a3a2a;   /* muted red (warmer than warning) */
  --tw-fx-flat:   var(--tw-muted);

  /* Soft rule variations */
  --tw-rule-glow: rgba(200, 154, 71, 0.18);  /* gold glow at 18% for dark surfaces */
}


/* ----------------------------------------------------------------------------
   1. KICKER SYSTEM — canonical .tw-kicker
       Small uppercase, high tracking, subtle category color, thin weight,
       left-aligned, generous spacing above the headline it sits above.

       Usage:
         <p class="tw-kicker tw-kicker--signal">Signal</p>
         <h2 class="card__title">Headline goes here</h2>

       Category modifiers:
         tw-kicker--signal
         tw-kicker--money            (Money Movement)
         tw-kicker--returning        (Returning Home)
         tw-kicker--opportunity
         tw-kicker--africa
         tw-kicker--diaspora
   ---------------------------------------------------------------------------- */
.tw-kicker {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 500;            /* thin, not bold — restraint */
  letter-spacing: .16em;       /* high tracking */
  text-transform: uppercase;
  color: var(--tw-muted);
  margin: 0 0 .55rem;
  padding: 0;
  line-height: 1.2;
}

/* Inline kicker variant — for use when paired with byline / meta */
.tw-kicker--inline {
  display: inline-block;
  margin: 0 .5rem 0 0;
}

/* Category modifiers — color only, never background, never border by default */
.tw-kicker--signal      { color: var(--tw-kicker-signal); }
.tw-kicker--money       { color: var(--tw-kicker-money); }
.tw-kicker--returning   { color: var(--tw-kicker-returning); }
.tw-kicker--opportunity { color: var(--tw-kicker-opportunity); }
.tw-kicker--africa      { color: var(--tw-kicker-africa); }
.tw-kicker--diaspora    { color: var(--tw-kicker-diaspora); }

/* Separator variant — country · category style (HAITI · POLITICS) */
.tw-kicker__sep {
  margin: 0 .4em;
  opacity: .5;
  font-weight: 400;
}

/* Slightly larger kicker for hero placements (homepage above-fold) */
.tw-kicker--hero {
  font-size: .75rem;
  letter-spacing: .18em;
}

/* Smaller kicker for list items (archive, country hub rows) */
.tw-kicker--list {
  font-size: .62rem;
  letter-spacing: .14em;
  margin-bottom: .35rem;
}

@media (min-width: 720px) {
  .tw-kicker         { font-size: .72rem; }
  .tw-kicker--hero   { font-size: .8rem; }
  .tw-kicker--list   { font-size: .65rem; }
}


/* ----------------------------------------------------------------------------
   2. SOFT HORIZONTAL RULE SYSTEM
       1px low-opacity warm gray; slightly inset; magazine feel not dashboard.

       Usage:
         <hr class="tw-rule">                    standard rhythm divider
         <hr class="tw-rule tw-rule--section">   between major homepage modules
         <hr class="tw-rule tw-rule--soft">      lightest, between list items
         <hr class="tw-rule tw-rule--dark">      for dark surfaces (with glow)
   ---------------------------------------------------------------------------- */
.tw-rule {
  border: 0;
  height: 1px;
  background: var(--tw-rule);
  margin: 1.5rem auto;
  max-width: calc(100% - 1.5rem);  /* slightly inset */
  opacity: .7;
}

.tw-rule--section {
  /* Between major homepage modules — more breathing room */
  margin: 3rem auto;
  max-width: calc(100% - 0.5rem);
  opacity: .85;
}

.tw-rule--soft {
  /* Lightest divider — between adjacent list items */
  background: var(--tw-rule-soft);
  margin: .75rem auto;
  opacity: .6;
}

.tw-rule--dark {
  /* For dark surfaces — subtle glow */
  background: var(--tw-rule);
  box-shadow: 0 0 12px var(--tw-rule-glow);
  opacity: .5;
}

@media (min-width: 720px) {
  .tw-rule           { margin: 2rem auto; }
  .tw-rule--section  { margin: 4rem auto; }
}


/* ----------------------------------------------------------------------------
   3. FX DIRECTIONAL INDICATORS
       Micro-arrows for currency, remittance, commodity, migration flows.
       Muted, FT-style. No bright trading-terminal aesthetics.

       Usage:
         <span class="tw-fx tw-fx--up">▲ 2.3%</span>
         <span class="tw-fx tw-fx--down">▼ 1.1%</span>
         <span class="tw-fx tw-fx--flat">— flat</span>

       Or with semantic helpers:
         <span class="tw-fx-arrow tw-fx-arrow--up"></span> 2.3%
   ---------------------------------------------------------------------------- */
.tw-fx {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.tw-fx--up   { color: var(--tw-fx-up); }
.tw-fx--down { color: var(--tw-fx-down); }
.tw-fx--flat { color: var(--tw-fx-flat); }

/* Pure arrow indicators — for use within data tables */
.tw-fx-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: .2em;
  vertical-align: middle;
  opacity: .85;
}
.tw-fx-arrow--up {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--tw-fx-up);
}
.tw-fx-arrow--down {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--tw-fx-down);
}
.tw-fx-arrow--flat {
  width: 8px;
  height: 1.5px;
  background: var(--tw-fx-flat);
  border-radius: 1px;
}

/* FX data row — for FX tables and remittance widgets */
.tw-fx-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid var(--tw-rule-soft);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
}
.tw-fx-row:last-child { border-bottom: 0; }
.tw-fx-row__pair {
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tw-ink);
}
.tw-fx-row__rate {
  font-variant-numeric: tabular-nums;
  color: var(--tw-ink-soft);
}
.tw-fx-row__delta {
  font-variant-numeric: tabular-nums;
  margin-left: .5rem;
}


/* ----------------------------------------------------------------------------
   4. PALETTE DEPLOYMENT REFINEMENT
       70% charcoal / black / neutral
       20% warm white / muted gray
       10% accent

       Helper classes for ENFORCING accent restraint. Use sparingly — accent
       color should appear ONLY in: kicker, hover, chart emphasis, active nav,
       numeric highlights, image glow integration.

       Anti-pattern: no full-page color flooding.
   ---------------------------------------------------------------------------- */

/* Numeric highlight — for $values, percentages, dates of consequence */
.tw-num-emphasis {
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--tw-accent);
}

/* Accent text — sparingly applied */
.tw-accent {
  color: var(--tw-accent);
}

/* Accent rule beneath a number block */
.tw-accent-underline {
  display: inline-block;
  border-bottom: 2px solid var(--tw-accent);
  padding-bottom: .15rem;
}

/* Active nav indicator — for current section/spine */
.tw-active-marker {
  position: relative;
}
.tw-active-marker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4rem;
  height: 2px;
  background: var(--tw-accent);
  opacity: .85;
}

/* Hover state — for cards/links where accent should ONLY appear on hover */
.tw-accent-on-hover { color: inherit; transition: color .15s ease; }
.tw-accent-on-hover:hover { color: var(--tw-accent); }

/* Image glow integration — subtle accent halo behind face-paint / hero images */
.tw-image-glow {
  position: relative;
  display: inline-block;
}
.tw-image-glow::before {
  content: "";
  position: absolute;
  inset: -.25rem;
  background: radial-gradient(circle, var(--tw-rule-glow) 0%, transparent 70%);
  z-index: -1;
  border-radius: var(--tw-radius);
  opacity: .6;
}


/* ----------------------------------------------------------------------------
   5. MOBILE AUDIT REFINEMENTS — Apple News premium spacing
       Targets: homepage stacking rhythm, hero compression, headline wrapping,
       image-text balance, card density, thumb reach, footer breathing room.

       These rules ADD spacing/refinement at narrow widths without altering
       desktop. They apply broadly (.site-main descendants) so all existing
       components inherit the better mobile rhythm.
   ---------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Site-main spacing rhythm — slightly more breathing room than 1rem default */
  .site-main {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    padding-bottom: 5rem;       /* footer breathing room — thumb reach */
  }

  /* Hero headlines — never compressed; preserve hierarchy */
  .single__title,
  .list__title,
  .back-home-featured__hed {
    font-size: 1.75rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
  }

  /* Body dek — keep readable on small screens */
  .single__dek,
  .list__dek {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  /* Card density — reduce vertical compression */
  .card {
    padding: .25rem 0 .5rem;
  }
  .card__title {
    font-size: 1.15rem;
    line-height: 1.28;
    margin-bottom: .35rem;
  }

  /* Tile spacing — Apple News-style breathing room */
  .tile {
    padding: 1.25rem 1.1rem 1.35rem;
  }
  .tile__hed {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  /* Back-home featured — preserve hierarchy at narrow widths */
  .back-home-featured {
    padding: 1.25rem 0 1.5rem;
  }
  .back-home-featured__hed {
    font-size: 1.25rem;
  }

  /* Section titles — reduce visual weight at small sizes */
  .home-section__title {
    font-size: 1.35rem;
    border-bottom-width: 1.5px;
  }

  /* Homepage stacking rhythm — section spacing */
  .home-section {
    margin-bottom: 2.75rem;
  }
  .home-dual-spine {
    gap: 2.25rem;
    margin-bottom: 2.5rem;
  }

  /* Image-to-text balance — prevent images from dominating */
  .home-section img,
  .single img,
  .list__item img {
    margin: .75rem 0;
  }

  /* Footer breathing room */
  .site-footer {
    margin-top: 3rem;
    padding: 2rem 1.15rem 2rem;
  }
  .site-footer__inner {
    gap: 1.5rem;
  }

  /* Thumb-reach: ensure tap targets are 44px minimum */
  .nav-primary__item,
  .nav-secondary__item,
  .masthead-cta {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Kicker refinement on mobile — slightly tighter to headline */
  .tw-kicker {
    margin-bottom: .4rem;
  }
}

/* Narrow phones (iPhone SE, etc) — additional compression of horizontal pad */
@media (max-width: 380px) {
  .site-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tile {
    padding: 1.1rem 1rem 1.2rem;
  }
}

/* Reduce motion — accessibility */
@media (prefers-reduced-motion: reduce) {
  .tile,
  .card,
  .masthead-cta,
  .tw-accent-on-hover {
    transition: none;
  }
}