/*
 * Theme Name:  Astra Child — Domaine Porta
 * Theme URI:   https://www.vins-porta.ch
 * Description: Child theme for the Domaine Porta website, built on the Astra parent theme.
 * Author:      Domaine Porta
 * Author URI:  https://www.vins-porta.ch
 * Template:    astra
 * Version:     1.20.5
 * Text Domain: astra-child
 * Domain Path: /languages
 * License:     GPL-2.0-or-later
 */

/**
 * style.css
 * WordPress child theme declaration and global design tokens.
 * All colours, fonts, type-scale and spacing values are defined here as
 * :root custom properties and consumed everywhere else via var(...).
 * Never hardcode these values in component or page stylesheets — referencing
 * the token is the only way a single edit here can reach the whole site.
 *
 * The Version field above is the theme's release label only. Browser caches
 * are busted per file by its modification time (porta_asset_ver() in
 * inc/enqueue.php, audit 02-007) — no bump needed for CSS/JS changes.
 *
 * @package astra-child
 */

:root {
  /* ─── Colors ─────────────────────────────────────────── */
  --color-bg:           #fafaf8;   /* warm white, main background */
  --color-bg-alt:       #f0ece4;   /* slightly warmer, alternate sections */
  --color-text:         #1a1a1a;   /* near-black body text */
  --color-text-light:   #5a5a5a;   /* secondary/caption text */
  --color-text-muted:   #b0aca8;   /* disabled / unavailable UI states */
  --color-accent:       #6b1a2a;   /* deep burgundy — primary brand color */
  --color-accent-dark:  #4f1320;   /* hover of burgundy buttons (white text 14.5:1) — audit 09-006 */
  --color-accent-pressed: #3f0f19; /* pressed (:active) burgundy buttons — button state set, audit 09-DR-3 */
  --color-gold:         #c9a84c;   /* warm gold — rules, dashes, large or dark-ground uses only */
  --color-gold-text:    #7d6420;   /* gold for text under 18px on light grounds: dates, footer labels (5.4:1 on --color-bg, 4.8:1 on --color-bg-alt — audit 00-043) */
  --color-white:        #ffffff;
  --color-earth:        #3d2b1f;   /* dark earth brown — domaine CTA band background */

  /* ─── Typography ─────────────────────────────────────── */
  --font-heading:       'Marcellus', Georgia, serif;
  --font-body:          'Inter', system-ui, sans-serif;

  /* ─── Type scale ─────────────────────────────────────── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.5rem;

  /*
   * Text inside form fields. NEVER below 16px: iOS Safari zooms the whole
   * page in when a field with smaller text is focused. It cannot simply be
   * --text-base: Astra sets the root font size to 91.2% on phones, so 1rem
   * is 14.6px there (measured 2026-10-04 — the checkout fields zoomed).
   */
  --text-field: max(16px, 1rem);

  /* ─── Spacing & layout ───────────────────────────────── */
  --space-section:      5rem;      /* vertical padding between page sections */
  --space-section-sm:   3rem;      /* same, mobile */
  --max-width:          1200px;    /* content container max width */
  --max-width-text:     720px;     /* readable text column max width */
  --border-radius:      4px;
  --radius-pill:        999px;     /* pills and rounded tags — fully round ends at any height */
  /* Height of the sticky header (audit 09-018): 80px with the menu button
     (up to 1240px, inc/header.php), 92px with the full menu. Heroes subtract
     it from the screen height. header.css pins the mobile bar to it. */
  --header-height:      80px;
  --tap-size:           44px;      /* smallest tap target of a control (design.md § 8.4, audit 09-011) */
  --tap-size-link:      24px;      /* smallest tap target of a text link outside a sentence */

  /* ─── Primary button (audit 02-021) ──────────────────────
     The one primary look, shared by .porta-btn, the CF7 submit, WooCommerce
     buttons and the product add-to-cart — written once instead of four times.
     The mini-cart's buttons keep their own, tighter values until audit S9
     settles them (finding 02-022). */
  --btn-padding:        0.75rem 1.75rem;
  --btn-font-size:      var(--text-sm);
  --btn-font-weight:    500;
  --btn-tracking:       var(--tracking-tight);
  --btn-border-width:   2px;

  /* ─── Motion (audit 02-019) ──────────────────────────────
     The two durations of the interface: hover, focus and colour changes.
     Bespoke motion (hero reveal, crossfade, drift, entrance fades, the
     timeline draw) keeps its own tuned values beside its rule. */
  --duration-fast:      0.2s;      /* small controls: links, pills, icons */
  --duration:           0.3s;      /* buttons, cards, fields — design.md § 6.1 */

  /* ─── Letter spacing (audit 02-019) ──────────────────── */
  --tracking-tight:     0.04em;    /* buttons, compact labels */
  --tracking:           0.06em;    /* small caps body labels */
  --tracking-wide:      0.08em;    /* eyebrows, nav */
  --tracking-wider:     0.1em;     /* uppercase section labels */
  --tracking-widest:    0.12em;    /* hero tagline */

  /* ─── Eyebrow (audit 09-025, owner S9-Q2) ─────────────────
     ONE style for every small uppercase label: section kickers, card badges
     and dates, footer and newsletter labels, /domaine eyebrows. Only the
     colour changes with the role: --color-accent for kickers, --color-gold-text
     for dates and footer labels, light on photographs. */
  --eyebrow-size:       var(--text-xs);
  --eyebrow-weight:     500;
  --eyebrow-tracking:   var(--tracking-wider);

  /* ─── Stacking order (audit 02-019) ──────────────────────
     One scale for the whole site. The anchor navs sit under the sticky
     header (DOM order paints their background over its shadow); dialogs
     above everything; the add-to-cart toast above dialogs. The WP admin
     bar (99999) stays above all of it. */
  --z-raised:           1;         /* content over its own background/overlay */
  --z-raised-2:         2;
  --z-raised-3:         3;
  --z-anchor-nav:       99;        /* .porta-anchor-nav (/domaine, /degustation) */
  --z-header:           100;       /* #masthead */
  --z-modal:            500;       /* /domaine detail dialog */
  --z-lightbox:         9999;      /* photo lightbox */
  --z-toast:            10000;     /* add-to-cart toast */

  /* ─── Astra palette rebrand ──────────────────────────────
     Astra's own CSS (theme file + customizer inline styles) falls back to
     these palette slots for every state the child theme doesn't explicitly
     style: generic button hover/focus borders, link focus color, tag clouds,
     assorted WooCommerce odds and ends. Astra ships them as blues
     (#046bd2 / #045cb4) — leaving them unbranded is why stray blue kept
     surfacing across the site. Slot 0 = theme accent, slot 1 = hover state.
     This block loads after Astra's inline CSS, so it wins the cascade.
     Slots 2–8 (audit 09-004): Astra paints the page background (slot 4 —
     pure white, beating body's --color-bg), headings and labels on its own
     screens (2, 3 — slate), the mobile-menu highlight (5 — blue-grey),
     borders (7) with them. Mapped to the brand tokens, every Astra-painted
     surface follows the palette; no Customizer change needed. */
  --ast-global-color-0: var(--color-accent);
  --ast-global-color-1: var(--color-accent-dark);   /* was gold: Astra paints focused/pressed buttons with it — the « stuck gold » after a click (audit 09-DR-3) */
  --ast-global-color-2: var(--color-text);
  --ast-global-color-3: var(--color-text-light);
  --ast-global-color-4: var(--color-bg);
  --ast-global-color-5: var(--color-bg-alt);
  --ast-global-color-6: var(--color-text);
  --ast-global-color-7: rgba(26, 26, 26, 0.12);
  --ast-global-color-8: var(--color-text);
}

/* The full desktop menu is 92px tall (audit 09-018). Keep 1241px in step with
   the menu-button breakpoint (inc/header.php, header.css). */
@media (min-width: 1241px) {
  :root {
    --header-height: 92px;
  }
}