/*
 * ═══════════════════════════════════════════════════════════════════════
 *  webpage_home.css  —  Homepage Page Master
 *  Daralbeida.com  ·  DAB-VIS-CSS-HP-001  ·  v4.0  ·  May 2026
 *
 *  LOAD ORDER (mandatory — do not reorder)
 *      1. css/darx_tokens.css                              site foundation
 *      2. css/modules/module_lang_switcher.css             lang switcher module
 *      3. css/webpage_home.css                             ← this file
 *      4. css/elements/element_webpage_home_header.css     header element
 *      5. css/elements/element_webpage_home_hero.css       hero element
 *      6. css/elements/element_webpage_home_cards.css      cards element
 *      7. css/elements/element_webpage_home_footer.css     footer element
 *      css/modules/module_forms_sign_up.css is self-loaded
 *      by api/modules/module_forms_sign_up.php
 *
 *  CHANGELOG
 *  ─────────
 *  v4.0  May 2026  — Premium editorial redesign.
 *                    · Hero uses moroccan_table.png (absolute path)
 *                    · Cards section → editorial three-pillar layout
 *                    · Signup card → full-width dark band
 *                    · Added --pillar-*, --signup-* variables
 *                    · Increased section padding for luxury breathing room
 *  v3.0  May 2026  — Initial modular split from monolithic stylesheet
 *
 *  TOKENS USED FROM darx_tokens.css
 *  ─────────────────────────────────
 *  --gold       #B8832A   brand gold
 *  --ivory      #F6F1E7   page background
 *  --ink        #1C1C1E   primary text
 *  --ink-muted  #4A4A4C   secondary text
 *  --f-mono               DM Mono
 *
 *  SECTIONS
 *  ────────
 *  0.  Quick-Tweak Panel   ← edit here for page-wide changes
 *  1.  Font overrides
 *  2.  Page utilities
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════
   0. QUICK-TWEAK PANEL
   ═══════════════════════════════════════════════════════════════════════ */
:root {

  /* ─── HERO ──────────────────────────────────────────────────────────
     --hero-image is injected per-mirror by element_webpage_home_hero.php as an
     inline style using SITE_BASE (e.g. url('/darmaster/img/…') or '/_prod/img/…').
     It is intentionally NOT set here so no mirror folder is hardcoded in CSS,
     and so a relative url() inside a custom property can't mis-resolve against
     the consuming stylesheet's folder.                                        */
  --hero-padding:         80px 30px;

  /* ─── HEADER HEIGHT ─────────────────────────────────────────────────
     Shared by header element and hero element.                         */
  --consumer-header-h:    140px;

  /* ─── OVERLAY ───────────────────────────────────────────────────────
     Glass text box centred on top of the hero image.
     Adjust --overlay-padding to increase/decrease internal whitespace. */
  --overlay-max-w:        480px;
  --overlay-padding:      34px 43px;

  /* ─── PILLAR SECTION ────────────────────────────────────────────────
     Three editorial columns (Origin / Philosophy / Vision).
     --pillar-gap is the horizontal padding INSIDE each column.
     --pillar-sep controls the gold separator opacity between pillars.   */
  --section-padding-v:    108px;
  --section-padding-h:    9%;
  --pillar-gap:           56px;
  --pillar-sep-color:     rgba(184, 131, 42, 0.18);

  /* ─── SIGNUP BAND ───────────────────────────────────────────────────
     Full-width dark band below the pillars. Houses the newsletter form. */
  /* --signup-bg removed: signup now sits on ivory (no dark band)         */
  --signup-padding-v:     60px;
  --signup-padding-h:     9%;

  /* ─── DARK AREAS ────────────────────────────────────────────────────
     story-bg still referenced by the hero story block if used.         */
  --story-bg:             var(--brand-dark);

  /* ─── FIXED FOOTER HEIGHT ────────────────────────────────────────────
     Sync with element_webpage_home_footer.css and body padding-bottom. */
  --consumer-footer-h:    80px;

}


/* ═══════════════════════════════════════════════════════════════════════
   1. FONT OVERRIDES
      Bebas Neue (from darx_tokens.css) replaces Cormorant Garamond for --f-display.
      Noto Serif replaces Inter for all consumer body copy on this page,
      giving visual consistency with the 6-script language switcher.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
   --f-display:  'Bebas Neue', 'Wide Sans', sans-serif;
   --f-landing:  'Noto Serif', 'Noto Serif Arabic', 'Noto Sans Tifinagh', serif;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. PAGE UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* No reserved scrollbar gutter — the homepage is single-screen (no scroll),
   so a stable gutter would just waste ~15px and offset fixed elements. */
html {
  scrollbar-gutter: auto;
}

/* Unstyled link — used on brand wordmark. */
.brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Body padding: top gap for the hero (contained here rather than as a hero
   margin, which would leak into scroll height), bottom space for the fixed footer. */
body {
  padding-top: 60px;
  padding-bottom: var(--consumer-footer-h);
}