/*
 * ═══════════════════════════════════════════════════════════════════════
 *  homepage_features.css
 *  Page-specific stylesheet — Consumer Landing / Coming-Soon Page
 *  DAB-VIS-CSS-HP-001  ·  v1.1  ·  May 2026
 *
 *  Linked AFTER darx_style_master.css on the homepage only:
 *      <link rel="stylesheet" href="/css/darx_style_master.css">
 *      <link rel="stylesheet" href="/css/homepage_features.css">
 *
 *  Inherits these tokens from master:
 *      --f-display, --f-landing       fonts
 *      --lp-gold, --lp-dark, --lp-bg  consumer-landing colors
 *
 *  Page: index.html (daralbeida.com root)
 * ═══════════════════════════════════════════════════════════════════════
 *
 *  HOW TO CUSTOMIZE — read this first
 *  ───────────────────────────────────
 *  Most tweakable values are CSS variables in the :root block below.
 *  Change one number, save, refresh. No need to hunt through the rules.
 *
 *  Common tweaks:
 *    • Change hero background image    →  --hero-image
 *    • Adjust hero overlay darkness     →  --hero-overlay-top, --hero-overlay-bottom
 *    • Section padding                  →  --section-padding-v, --section-padding-h
 *    • Card style                       →  --card-radius, --card-padding, --card-shadow
 *    • Language switcher position       →  --switcher-top, --switcher-right
 *
 *  Colors come from master (--lp-gold, --lp-dark, --lp-bg). To change them
 *  GLOBALLY across all consumer pages, edit those in master. To override
 *  for this page only, redeclare them in :root below.
 *
 *  SECTIONS
 *      0.  Page-local variables       ← edit here for quick tweaks
 *      1.  Brand link utility
 *      2.  Language switcher (fixed top-right)
 *      3.  MA submenu + Tifinagh font
 *      4.  Flag row (regional indicator)
 *      5.  Hero — full-bleed background
 *      6.  Overlay panel & brand wordmark
 *      7.  Sections & cards
 *      8.  Story section (dark)
 *      9.  Consumer footer
 *     10.  Newsletter form + honeypot
 *     11.  Responsive (mobile)
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════
   0. PAGE-LOCAL VARIABLES  ← QUICK-TWEAK PANEL
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ─── HERO BACKGROUND ──────────────────────────────────────────────
     Change image URL or overlay darkness to retune the hero. */
  --hero-image:           url('https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?q=80&w=1800&auto=format&fit=crop');
  --hero-overlay-top:     rgba(32,22,12,0.48);  /* darker at top    */
  --hero-overlay-bottom:  rgba(32,22,12,0.38);  /* lighter at bottom */
  --hero-padding:         80px 30px;

  /* ─── OVERLAY PANEL (the glass card on the hero) ───────────────────  */
  --overlay-max-w:        900px;
  --overlay-padding:      60px 70px;
  --overlay-bg:           rgba(25, 18, 10, 0.22);
  --overlay-blur:         4px;
  --overlay-radius:       32px;

  /* ─── SECTION SPACING (the white blocks below the hero) ────────────  */
  --section-padding-v:    120px;   /* vertical: top/bottom              */
  --section-padding-h:    10%;     /* horizontal: percent of viewport   */

  /* ─── CARD STYLE (the three feature blocks) ────────────────────────  */
  --card-bg:              white;
  --card-padding:         40px;
  --card-radius:          24px;
  --card-shadow:          0 15px 40px rgba(0,0,0,0.05);
  --card-gap:             40px;

  /* ─── STORY SECTION (dark band) ────────────────────────────────────  */
  --story-bg:             #1f261f;

  /* ─── FOOTER ───────────────────────────────────────────────────────  */
  --footer-bg:            #111;
  --footer-padding:       80px 10%;

  /* ─── LANGUAGE SWITCHER (top-right corner) ─────────────────────────  */
  --switcher-top:         22px;
  --switcher-right:       24px;
  --switcher-bg:          rgba(25, 18, 10, 0.45);
  --switcher-blur:        8px;

  /* ─── FLAG ROW (appears below switcher on MA hover) ────────────────  */
  --flag-row-top:         70px;
  --flag-w:               86px;
  --flag-h:               58px;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. BRAND LINK UTILITY
   ─────────────────────────────────────────────────────────────────────
   Used to wrap the brand wordmark in an anchor without underline.
   ═══════════════════════════════════════════════════════════════════════ */
.brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. LANGUAGE SWITCHER — fixed top-right pill
   ═══════════════════════════════════════════════════════════════════════ */
.lang-switcher {
  position: fixed;
  top: var(--switcher-top);
  right: var(--switcher-right);
  z-index: 1000;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--switcher-bg);
  backdrop-filter: blur(var(--switcher-blur));
  -webkit-backdrop-filter: blur(var(--switcher-blur));
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.18);
}

/* RTL languages keep the switcher in the same physical position */
html[dir="rtl"] .lang-switcher { direction: ltr; right: var(--switcher-right); left: auto; }

.lang-switcher button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.78);
  font-family: var(--f-landing);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.lang-switcher button:hover   { color: white; }
.lang-switcher button.active  {
  background: var(--lp-gold);
  color: var(--lp-dark);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. MA SUBMENU + TIFINAGH FONT
   ─────────────────────────────────────────────────────────────────────
   Dropdown that appears when the MA (Morocco) language is selected, to
   offer Arabic / French / Tifinagh / Tamazight variants.
   ═══════════════════════════════════════════════════════════════════════ */
.ma-wrapper { position: relative; display: flex; }

.ma-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  background: rgba(20, 14, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1010;
}
.ma-submenu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ma-submenu button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-family: var(--f-landing);
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  width: 100%;
}
.ma-submenu button:hover  { background: rgba(212, 178, 106, 0.18); color: white; }
.ma-submenu button.active { background: var(--lp-gold); color: var(--lp-dark); font-weight: 600; }

/* Tifinagh script needs its own font — applied wherever it's shown */
.ma-submenu button[data-lang="zgh"],
[lang="zgh-Tfng"],
[lang="zgh-Tfng-MA"] {
  font-family: 'Noto Sans Tifinagh', var(--f-landing), sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. FLAG ROW
   ─────────────────────────────────────────────────────────────────────
   Shown below the switcher when relevant; visualizes regional context.
   Hidden by default; .show class toggled by JS.
   ═══════════════════════════════════════════════════════════════════════ */
.flag-row {
  position: fixed;
  top: var(--flag-row-top);
  right: var(--switcher-right);
  z-index: 999;
  display: flex;
  gap: 8px;
  padding: 10px;
  background: rgba(25, 18, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
html[dir="rtl"] .flag-row { direction: ltr; right: var(--switcher-right); left: auto; }
.flag-row.show { opacity: 1; transform: translateY(0); }

.flag-row img {
  display: block;
  width:  var(--flag-w);
  height: var(--flag-h);
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.25;
  transition: opacity 0.22s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.flag-row img.highlighted { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   5. HERO — full-bleed background
   ─────────────────────────────────────────────────────────────────────
   First section visible on page load. Image + dark overlay + centered
   content. Edit --hero-image and --hero-overlay-* in section 0 to retune.
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--hero-padding);
  background:
    linear-gradient(var(--hero-overlay-top), var(--hero-overlay-bottom)),
    var(--hero-image);
  background-size: cover;
  background-position: center center;
  color: white;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. OVERLAY PANEL & BRAND WORDMARK
   ─────────────────────────────────────────────────────────────────────
   The frosted-glass card centered in the hero.
   ═══════════════════════════════════════════════════════════════════════ */
.overlay {
  max-width: var(--overlay-max-w);
  padding: var(--overlay-padding);
  background: var(--overlay-bg);
  backdrop-filter: blur(var(--overlay-blur));
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  border-radius: var(--overlay-radius);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Brand wordmark above the title */
.brand {
  letter-spacing: 12px;
  font-size: 14px;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.brand-sub {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: 2px;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Main headline — scoped to .hero so it doesn't conflict with other h1s */
.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(4rem, 10vw, 7rem);   /* responsive: 4rem mobile → 7rem desktop */
  font-weight: 400;
  line-height: 0.95;
  margin-bottom: 30px;
}

.tagline {
  font-size: 1.1rem;
  line-height: 1.9;
  max-width: 700px;
  margin: 0 auto 40px auto;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* "Coming soon" pill below the tagline */
.coming-soon {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  font-size: 0.95rem;
  letter-spacing: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. SECTIONS & CARDS
   ─────────────────────────────────────────────────────────────────────
   The light-background blocks below the hero. Used for feature cards.
   ═══════════════════════════════════════════════════════════════════════ */
.section {
  padding: var(--section-padding-v) var(--section-padding-h);
  background: var(--lp-bg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--card-gap);
}

.card {
  background: var(--card-bg);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card h3 {
  font-family: var(--f-display);
  font-size: 2rem;
  margin-bottom: 18px;
  font-weight: 500;
}
.card p {
  line-height: 1.8;
  color: #4b4a46;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. STORY SECTION (dark band)
   ═══════════════════════════════════════════════════════════════════════ */
.story {
  background: var(--story-bg);
  color: white;
  text-align: center;
}
.story h2 {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  margin-bottom: 30px;
}
.story p {
  max-width: 850px;
  margin: 0 auto;
  line-height: 2;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. CONSUMER FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.footer {
  padding: var(--footer-padding);
  background: var(--footer-bg);
  color: rgba(255,255,255,0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
.footer h4 {
  font-family: var(--f-display);
  font-size: 2rem;
  margin-bottom: 15px;
  color: white;
}
.footer p,
.footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  line-height: 1.8;
}
.signature {
  margin-top: 40px;
  font-size: 0.9rem;
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   10. NEWSLETTER FORM + HONEYPOT
   ─────────────────────────────────────────────────────────────────────
   Email signup with a hidden honeypot field to catch bots.
   ═══════════════════════════════════════════════════════════════════════ */
.email-box {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.email-box input {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 100px;
  border: none;
  outline: none;
}
.email-box button {
  padding: 14px 22px;
  border-radius: 100px;
  border: none;
  background: var(--lp-gold);
  color: black;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.email-box button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Honeypot — visible to bots, invisible to humans. Don't make it display:none
   or screen-readers / smart bots may skip it. Position it offscreen instead. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form status messages (success / error / info) */
.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 1.4em;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.form-status.show    { opacity: 1; }
.form-status.success { color: var(--lp-gold); }
.form-status.error   { color: #e8a597; }
.form-status.info    { color: rgba(255,255,255,0.75); }


/* ═══════════════════════════════════════════════════════════════════════
   11. RESPONSIVE (mobile)
   ─────────────────────────────────────────────────────────────────────
   Tweaks for narrow viewports (< 768px). Mostly tightens spacing and
   shrinks the language switcher / flag row.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .overlay     { padding: 40px 28px; }
  .section     { padding: 80px 8%; }
  .hero h1     { line-height: 1.05; }

  .lang-switcher        { top: 14px; right: 14px; }
  .lang-switcher button { padding: 7px 11px; font-size: 11px; }

  .flag-row     { top: 58px; right: 14px; gap: 6px; padding: 8px; }
  .flag-row img { width: 56px; height: 38px; }
}