/* ============ Wadicos - Components (Core) ============ *
 * Icons · eyebrow · section · icon-button ·
 * buttons · pills · filter-pills · footer · skip-link.
 *
 * Header + language-switcher rules moved to components/
 * header.css when the header was extracted into its own
 * partial (markup + styles + behaviour split across
 * /assets/partials/header.{fr,en}.html, this file's
 * sibling components/header.css, and features/shared/
 * header.js). Generic widgets the header still uses
 * (.icon-button, .theme-toggle) stayed here because they
 * are reusable patterns by name.
 *
 * Companion: components/product.css holds cards and
 * content widgets (carousel, tab-strip, feature-row,
 * mosaic, testimonial, subscribe-card).
 * ====================================================== */

@layer components {
  /* ---- Icon helper ------------------------------- */
  .icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .icon--sm { inline-size: 1rem; block-size: 1rem; }

  /* ---- Eyebrow ----------------------------------- */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-accent-peach);
    margin-block-end: var(--space-3);
  }

  /* V2 additive: editorial eyebrow variant — composes on top of
     .eyebrow when the page opts in (V3+ per-page passes). Switches
     the peach for the V1 champagne accent and prepends a leading
     em-dash so the label reads as a magazine section opener ("—
     Notre engagement") rather than a CMS field label. The base
     .eyebrow class stays unchanged so any existing usage is
     untouched until per-page passes upgrade selectors explicitly. */
  .eyebrow--editorial {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-champagne);
  }
  .eyebrow--editorial::before {
    content: "—";
    display: inline-block;
    color: var(--color-accent-champagne);
  }

  /* ---- Section structure ------------------------- */
  .section { padding-block: var(--space-8); position: relative; }

  /* ---- V2: data-surface alternation + data-rhythm ---- *
   * Prep rules so V3+ HTML can switch section grounds via
   * <section data-surface="ink|wine|vellum|cream"> without
   * touching CSS again. The cream interlude is the only band
   * that flips text color on its descendants — the rest pick
   * up the page's --color-ink unchanged. */
  section[data-surface="ink"]    { background-color: var(--color-surface-ink); }
  section[data-surface="wine"]   { background-color: var(--color-surface-wine); }
  section[data-surface="vellum"] { background-color: var(--color-surface-vellum); }
  section[data-surface="cream"] {
    background-color: var(--color-surface-cream);
    color: var(--color-ink);
  }
  /* Inside the cream interlude every text descendant inherits
     a contrast-safe ink unless a child explicitly opts out via
     data-keep-color (used for accent runs that stay champagne /
     burgundy by design). */
  section[data-surface="cream"] *:not([data-keep-color]) {
    color: inherit;
  }

  /* Rhythm modifiers — pair with data-surface to vary section
     vertical air. */
  section[data-rhythm="hero"]       { padding-block: var(--space-10) var(--space-9); }
  section[data-rhythm="interlude"]  { padding-block: var(--space-11); }
  section[data-rhythm="tight"]      { padding-block: var(--space-6); }

  .section__header {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-3); margin-block-end: var(--space-7);
  }
  .section__header--centered { align-items: center; text-align: center; }

  /* V2: .section__heading is the primary section opener across
     home / catalogue / brand / pdp / maison / contact / guide /
     legal. Opting explicitly into --font-display (Fraunces) +
     font-weight 600 per V2 C9. Font-size moves from a hard-coded
     40 px to the --fs-display clamp so the heading scales with
     the viewport. Pre-V1 clamp peak is 60 px; at 768 it resolves
     to ~35 px which is BELOW the previous 40 px — net §1.5 safer
     on the .essence / .signature / .maisons-callout headings
     that already use this class. */
  .section__heading {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-section);
  }
  .section__heading--centered { max-width: 40ch; }
  .section__heading--sentence {
    text-transform: none;
    letter-spacing: var(--tracking-display);
  }
  .section__heading-accent-red { color: var(--color-red); }
  .section__heading-accent-peach { color: var(--color-accent-peach); }

  .section__sub {
    font-size: var(--fs-body);
    color: var(--color-ink-muted);
    max-inline-size: 56ch;
  }
  .section__sub--centered { text-align: center; }

  /* ---- Header + language switcher ---------------- *
   * Moved to components/header.css when the header was
   * extracted into a partial. The post-injection markup
   * is byte-identical to the legacy inline form, so the
   * cascade is preserved one-for-one.
   * ----------------------------------------------- */

  /* ---- Icon button (circle outline) -------------- */
  .icon-button {
    --size: 2.75rem;
    inline-size: var(--size);
    block-size: var(--size);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .icon-button:hover {  border-color: var(--color-red); color: var(--color-red);  }
  }
  .icon-button--menu { display: inline-flex; }
  @media (min-width: 48em) { .icon-button--menu { display: none; } }
  .icon-button__badge {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-red);
    color: var(--color-ink);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .icon-button__badge[hidden] { display: none; }

  /* ---- Buttons ----------------------------------- */
  .btn {
    --pad-block: 0.875rem;
    --pad-inline: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--pad-block);
    padding-inline: var(--pad-inline);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    min-block-size: 2.75rem;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }
  .btn:active { transform: translateY(1px); }
  .btn--red {
    background-color: var(--color-red);
    color: var(--color-cta-ink);
    box-shadow: var(--shadow-cta);
    /* WCAG large-text qualifier requires weight ≥ 700 at 14 px so
       the 4.25:1 red-on-cream ratio passes the 3:1 large-text bar
       (instead of failing the 4.5:1 normal-text bar). V2 spec
       suggested weight 500 max; rejected here — the WCAG rationale
       locks 700. Documented in V2 report. */
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  @media (hover: hover) {
    .btn--red:hover { 
    background-color: var(--color-red-hover);
    box-shadow: var(--shadow-cta-hover);
   }
  }
  .btn--cream {
    background-color: var(--color-cream);
    color: var(--color-cta-soft-ink);
    letter-spacing: 0.04em;
  }
  @media (hover: hover) {
    .btn--cream:hover {  background-color: var(--color-cream-hover);  }
  }
  .btn--cream:has(.btn__arrow) { padding-inline-end: 0.375rem; }
  /* The arrow chip rides inside cream / red pill buttons.
     Its bg pairs with --color-cta-soft-ink (the ink color
     authored for the cream pill) and its icon stays in
     --color-cream so the chip reads as a high-contrast
     coin against the parent button on both themes:
       dark:   deep wine-black coin, cream icon
       light:  burgundy coin, soft-white icon
     Anchoring on --color-cta-soft-ink instead of
     --color-bg fixes the prior cream-on-cream
     invisibility in light mode. */
  .btn__arrow {
    --size: 2rem;
    inline-size: var(--size); block-size: var(--size);
    border-radius: var(--radius-pill);
    background-color: var(--color-cta-soft-ink); color: var(--color-cream);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
  }
  /* Ghost — V2 refinement (audit §2 C8): the prior hover state
     swapped border-color + text-color to red, which read as
     a generic link-state on hover. The new behaviour fills the
     background with ink and inverts the text to bg — a more
     deliberate maison gesture that matches how cream/red pills
     fill on press. */
  .btn--ghost {
    background-color: transparent;
    border: 1px solid var(--color-line-cream);
    color: var(--color-ink);
  }
  @media (hover: hover) {
    .btn--ghost:hover { 
    background-color: var(--color-ink);
    color: var(--color-bg);
    border-color: var(--color-ink);
   }
  }
  /* ---- Pills ------------------------------------- */
  /* V2 typography refinement: weight 600 → 500 (less shouty),
     tracking eyebrow → 0.16em (refined from 0.18em). The pill
     stays the same shape; only the type voice softens to match
     the editorial register the references establish. */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
  }
  .pill--cream { background-color: var(--color-cream); color: var(--color-cta-soft-ink); }
  .pill--red { background-color: var(--color-red); color: var(--color-cta-ink); }
  .pill--success {
    background-color: var(--color-success);
    color: var(--color-ink);
    border: 1px solid var(--color-success);
  }

  /* ---- Filter pill --------------------------- */
  /* V2 refinement (audit §1.3 /boutique/): the pre-V1 border
     resolved to --color-line which was #2a141a — near-invisible
     on bg-elev. V1 lifted --color-line to #3a1b22; V2 explicitly
     opts the resting state into --color-line-cream (a cream-tinted
     hairline at 12% opacity) so the pill outline reads against the
     dark ground, then champagne on hover for a maison-grade
     pointer-receive state. Active state stays cream-on-cta-soft-ink. */
  .filter-pill {
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    background-color: transparent;
    border: 1px solid var(--color-line-cream);
    color: var(--color-ink-soft);
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
    /* WCAG 2.5.5: 2.75rem = 44px minimum touch target. */
    min-block-size: 2.75rem;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .filter-pill:hover:not([aria-pressed="true"]):not(.filter-pill--active) { 
    color: var(--color-accent-champagne);
    border-color: var(--color-accent-champagne);
   }
  }
  /* Active state matches hover state visually so the pressed pill
     remains readable after the cursor leaves it (per
     feedback_hover_active_collision.md). The hover-only selectors are
     gated by @media (hover: hover) so touch-tap doesn't trigger
     sticky-hover; the active selectors apply universally. */
  .filter-pill[aria-pressed="true"],
  .filter-pill--active {
    background-color: var(--color-cream);
    color: var(--color-cta-soft-ink);
    border-color: var(--color-cream);
  }
  @media (hover: hover) {
    .filter-pill[aria-pressed="true"]:hover,
    .filter-pill--active:hover {
      background-color: var(--color-cream);
      color: var(--color-cta-soft-ink);
      border-color: var(--color-cream);
    }
  }

  /* ---- Theme toggle ------------------------------ *
   * Two-state pill switch that sits in .header__actions
   * alongside the bag / contact icon-buttons. The thumb
   * is the only animated layer - it slides horizontally
   * to mark the active scheme; the sun + moon glyphs
   * stay anchored in their halves and recolor based on
   * which side the thumb is parked over.
   *
   * Sizing tied to --size = 2.75rem so the toggle's
   * block-size matches the neighbouring icon-button
   * pills - the action group reads as one visual row.
   * Width = 1.7 * --size keeps the proportion in the
   * reference mark (a slim horizontal pill, not a
   * square chip).
   *
   * role="switch" + aria-checked carry the on/off
   * semantics; the JS in /assets/js/features/shared/theme.js
   * flips aria-checked + [data-theme] in lockstep.
   * ----------------------------------------------- */
  .theme-toggle {
    --size: 2.75rem;
    --pad: 0.375rem;
    --thumb-size: calc(var(--size) - var(--pad) * 2);
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    inline-size: calc(var(--size) * 1.7);
    block-size: var(--size);
    padding: var(--pad);
    background-color: var(--color-bg-elev);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .theme-toggle:hover {  border-color: var(--color-red);  }
  }

  .theme-toggle__thumb {
    position: absolute;
    inset-block-start: var(--pad);
    inset-inline-start: var(--pad);
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-red);
    box-shadow: var(--shadow-cta);
    /* Default position - moon side (matches the :root
       dark default). The boot snippet sets [data-theme]
       before paint, so this default only matters in the
       no-JS / boot-failed path; in that path the page
       renders dark and the thumb should reflect that. */
    transform: translateX(calc(var(--size) * 0.7));
    transition: transform var(--dur-base) var(--ease-out);
  }

  .theme-toggle__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    color: var(--color-ink-muted);
    transition: color var(--dur-fast) var(--ease-out);
    pointer-events: none;
  }

  /* Light theme parks the thumb on the sun side. The
     default (above) sits on the moon side for the dark
     scheme so the no-JS fallback reads coherently. */
  [data-theme="light"] .theme-toggle__thumb {
    transform: translateX(0);
  }
  /* Active-side glyph reads in cream against the red
     thumb - matches the contrast pair used by .btn--red. */
  [data-theme="dark"] .theme-toggle__icon--moon { color: var(--color-cream); }
  [data-theme="light"] .theme-toggle__icon--sun  { color: var(--color-cream); }

}

/* ============ Overrides layer ============ *
 * The home-wordmark lift override moved to components/header.css
 * with the rest of the header rules. This file does not write
 * into @layer overrides — components own their per-viewport
 * overrides inline as @media queries on each rule.
 * ===================================================== */