/* Site-header style presets (registry: inc/header-style.php). Loaded site-wide, LAST (after dark.css), and only when the
   chosen style is not "original" — the original header is main.css and stays untouched.

   Switch: <html data-header-style="float|glass|forest|capsule|line">. Each style also restyles the two header
   buttons: «ورود» (.account-nav-link) and «شروع تست» (.site-header .btn--ghost).
   Colours are the brand greens (#4d7c62 / #2a4335) and the peach accent (#FBE1D1 / #e8966c); dark mode has its own twins. */

/* ---------- shared bits ---------- */
html[data-header-style] .site-header .btn--ghost,
html[data-header-style] .account-nav-link { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
html[data-header-style] .account-nav-link { border-radius: 999px; }

/* ==========================================================================
   1) float — «شناور»: the header is a floating glass pill detached from the page edges (desktop only;
      below 900px the normal bar is kept because the mobile menu hangs off the bar's edge)
   ========================================================================== */
@media (min-width: 901px) {
  html[data-header-style="float"] { --header-h: 88px; }
  html[data-header-style="float"] .site-header {
    background: transparent; border-bottom: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-top: 10px; pointer-events: none;
  }
  html[data-header-style="float"] .site-header > * { pointer-events: auto; }
  html[data-header-style="float"] .site-header__inner {
    max-width: min(var(--container, 1200px), calc(100% - 32px));
    padding: 9px 24px; border-radius: 999px;
    background: rgba(255,255,255,.80);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 14px 36px -14px rgba(42,67,53,.32), 0 2px 6px rgba(42,67,53,.06);
  }
  html[data-header-style="float"] .site-nav__list { gap: 4px; }
  html[data-header-style="float"] .site-nav__list a { padding: 8px 15px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
  html[data-header-style="float"] .site-nav__list a:hover { background: rgba(77,124,98,.12); color: var(--ink); }
  html[data-header-style="float"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a { background: rgba(77,124,98,.17); color: var(--color-accent-700); }
  html[data-header-style="float"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { display: none; }
  html[data-header-style="float"] .account-nav-link { padding: 8px 16px; }
  html[data-header-style="float"] .account-nav-link:hover { background: rgba(77,124,98,.12); color: var(--ink); }
  html[data-header-style="float"] .site-header .btn--ghost { background: linear-gradient(135deg, var(--lc-4d7c62, #4d7c62), var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(42,67,53,.55); }
  html[data-header-style="float"] .site-header .btn--ghost:hover { background: linear-gradient(135deg, var(--lc-5a8e70, #5a8e70), var(--lc-34533f, #34533f)); color: var(--lt-ffffff, #fff); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(42,67,53,.6); }
  html[data-theme="dark"][data-header-style="float"] .site-header__inner { background: rgba(24,31,27,.74); border-color: rgba(255,255,255,.09); box-shadow: 0 14px 36px -14px rgba(0,0,0,.6); }
  html[data-theme="dark"][data-header-style="float"] .site-nav__list a:hover { background: rgba(255,255,255,.08); color: var(--ink); }
  html[data-theme="dark"][data-header-style="float"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a { background: rgba(134,195,163,.16); color: var(--ink); }
  html[data-theme="dark"][data-header-style="float"] .account-nav-link:hover { background: rgba(255,255,255,.08); color: var(--ink); }
}

/* ==========================================================================
   2) glass — «شیشه‌ای»: frosted translucent bar. On the HOME page the hero slides under it, so the green
      gradient shows through the glass; elsewhere content blurs beneath it while scrolling.
   ========================================================================== */
html[data-header-style="glass"] .site-header {
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  border-bottom: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 0 rgba(42,67,53,.05), 0 16px 36px -22px rgba(42,67,53,.40);
}
html[data-header-style="glass"] body.home .site-header { margin-bottom: -66px; }
html[data-header-style="glass"] body.home .hero--home { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--space-lg) + 66px); }
html[data-header-style="glass"] .site-nav__list a:hover { color: var(--color-accent-700); }
html[data-header-style="glass"] .account-nav-link { padding: 7px 16px; }
html[data-header-style="glass"] .account-nav-link:hover { background: rgba(255,255,255,.55); color: var(--color-accent-700); }
html[data-header-style="glass"] .site-header .btn--ghost { background: rgba(255,255,255,.55); border: 1px solid rgba(42,67,53,.30); color: var(--color-accent-700); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-header-style="glass"] .site-header .btn--ghost:hover { background: var(--color-accent-700); color: var(--lt-ffffff, #fff); border-color: var(--color-accent-700); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(42,67,53,.55); }
html[data-theme="dark"][data-header-style="glass"] .site-header { background: rgba(15,18,17,.46); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 16px 36px -22px rgba(0,0,0,.7); }
html[data-theme="dark"][data-header-style="glass"] .site-nav__list a:hover { color: var(--ink); }
html[data-theme="dark"][data-header-style="glass"] .account-nav-link:hover { background: rgba(255,255,255,.08); color: var(--ink); }
html[data-theme="dark"][data-header-style="glass"] .site-header .btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(190,225,205,.35); color: var(--ink); }
html[data-theme="dark"][data-header-style="glass"] .site-header .btn--ghost:hover { background: var(--fill-500); border-color: var(--fill-500); color: var(--lt-ffffff, #fff); }

/* ==========================================================================
   3) forest — «سبز عمیق»: a solid deep-green bar with light text; the strongest separation from the page
   ========================================================================== */
html[data-header-style="forest"] .site-header {
  background: linear-gradient(120deg, var(--lc-22382b, #22382b) 0%, var(--lc-2a4335, #2a4335) 46%, var(--lc-3b604c, #3b604c) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px -14px rgba(20,40,28,.55);
}
html[data-header-style="forest"] .site-logo { color: var(--lt-ffffff, #fff); }
html[data-header-style="forest"] .site-header .site-logo__icon { filter: invert(1) brightness(1.7); }
html[data-header-style="forest"] .site-nav__list a { color: rgba(255,255,255,.84); }
html[data-header-style="forest"] .site-nav__list a:hover { color: var(--lt-ffffff, #fff); }
html[data-header-style="forest"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a { color: var(--lt-ffffff, #fff); }
html[data-header-style="forest"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { background: var(--lc-fbe1d1, #FBE1D1); }
html[data-header-style="forest"] .site-phone { color: rgba(255,255,255,.75); }
html[data-header-style="forest"] .account-nav-link { color: var(--lt-ffffff, #fff); border: 1px solid rgba(255,255,255,.35); padding: 7px 18px; }
html[data-header-style="forest"] .account-nav-link:hover { background: rgba(255,255,255,.14); color: var(--lt-ffffff, #fff); border-color: rgba(255,255,255,.6); }
html[data-header-style="forest"] .site-header .btn--ghost { background: var(--lc-fbe1d1, #FBE1D1); color: var(--lt-2a4335, #2a4335); border-color: var(--lc-fbe1d1, #FBE1D1); font-weight: 600; }
html[data-header-style="forest"] .site-header .btn--ghost:hover { background: var(--lc-ffffff, #fff); color: var(--lt-2a4335, #2a4335); border-color: var(--lc-ffffff, #fff); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
html[data-header-style="forest"] .site-header .user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
html[data-header-style="forest"] .nav-toggle { background: rgba(255,255,255,.14); }
html[data-header-style="forest"] .nav-toggle span { background: var(--lc-ffffff, #fff); }
html[data-header-style="forest"] .nav-toggle[aria-expanded="true"] { background: var(--lc-fbe1d1, #FBE1D1); }
html[data-header-style="forest"] .nav-toggle[aria-expanded="true"] span { background: var(--lc-2a4335, #2a4335); }
html[data-theme="dark"][data-header-style="forest"] .site-header { background: linear-gradient(120deg, var(--lc-101a14, #101a14) 0%, var(--lc-17261d, #17261d) 50%, var(--lc-22382b, #22382b) 100%); border-bottom-color: rgba(255,255,255,.07); }
html[data-theme="dark"][data-header-style="forest"] .site-nav__list a:hover { color: var(--lt-ffffff, #fff); }

/* ==========================================================================
   4) capsule — «کپسول منو»: the menu items live in a segmented capsule; the active page is a solid green pill
   ========================================================================== */
html[data-header-style="capsule"] .site-header { background: rgba(255,255,255,.88); border-bottom: 0; box-shadow: 0 12px 30px -22px rgba(42,67,53,.35); }
html[data-header-style="capsule"] .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77,124,98,.38) 25%, rgba(232,150,108,.40) 50%, rgba(77,124,98,.38) 75%, transparent);
}
html[data-header-style="capsule"] .site-nav { display: flex; justify-content: center; }
html[data-header-style="capsule"] .site-nav__list {
  gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(77,124,98,.09); border: 1px solid rgba(77,124,98,.16);
}
html[data-header-style="capsule"] .site-nav__list a { padding: 7px 17px; border-radius: 999px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
html[data-header-style="capsule"] .site-nav__list a:hover { background: var(--lc-ffffff, #fff); color: var(--color-accent-700); box-shadow: 0 1px 6px rgba(42,67,53,.14); }
html[data-header-style="capsule"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a { background: linear-gradient(135deg, var(--lc-4d7c62, #4d7c62), var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff); box-shadow: 0 4px 12px -4px rgba(42,67,53,.5); }
html[data-header-style="capsule"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { display: none; }
html[data-header-style="capsule"] .account-nav-link { padding: 7px 16px; }
html[data-header-style="capsule"] .account-nav-link:hover { background: rgba(77,124,98,.12); color: var(--color-accent-700); }
html[data-header-style="capsule"] .site-header .btn--ghost { background: linear-gradient(135deg, var(--lc-4d7c62, #4d7c62), var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff); border-color: transparent; }
html[data-header-style="capsule"] .site-header .btn--ghost:hover { background: linear-gradient(135deg, var(--lc-5a8e70, #5a8e70), var(--lc-34533f, #34533f)); color: var(--lt-ffffff, #fff); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(42,67,53,.6); }
html[data-theme="dark"][data-header-style="capsule"] .site-header { background: rgba(15,18,17,.86); }
html[data-theme="dark"][data-header-style="capsule"] .site-nav__list { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"][data-header-style="capsule"] .site-nav__list a:hover { background: rgba(255,255,255,.10); color: var(--ink); box-shadow: none; }
html[data-theme="dark"][data-header-style="capsule"] .account-nav-link:hover { background: rgba(255,255,255,.08); color: var(--ink); }

/* ==========================================================================
   5) line — «خط نوری»: minimal; a thin brand-gradient line replaces the border, links get a growing underline
      and an active dot, «شروع تست» is a solid dark pill
   ========================================================================== */
html[data-header-style="line"] .site-header { border-bottom: 0; box-shadow: 0 14px 30px -22px rgba(42,67,53,.40); }
html[data-header-style="line"] .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--lc-4d7c62, #4d7c62), var(--lc-98bfaa, #98bfaa) 38%, var(--lc-fbe1d1, #FBE1D1) 68%, var(--lc-e8966c, #e8966c));
}
html[data-header-style="line"] .site-nav__list a { padding-bottom: 6px; transition: color .2s ease; }
html[data-header-style="line"] .site-nav__list a::before {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-accent-500); transition: left .25s ease, right .25s ease;
}
html[data-header-style="line"] .site-nav__list a:hover { color: var(--color-accent-700); }
html[data-header-style="line"] .site-nav__list a:hover::before { left: 0; right: 0; }
html[data-header-style="line"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after {
  left: 50%; right: auto; bottom: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--color-accent-500);
}
html[data-header-style="line"] .account-nav-link { padding: 6px 16px; border: 1px solid var(--border); font-size: 14px; }
html[data-header-style="line"] .account-nav-link:hover { border-color: var(--ink); color: var(--ink); }
html[data-header-style="line"] .site-header .btn--ghost { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-header-style="line"] .site-header .btn--ghost:hover { background: var(--color-accent-500); border-color: var(--color-accent-500); color: var(--lt-ffffff, #fff); transform: translateY(-2px); }
html[data-theme="dark"][data-header-style="line"] .site-nav__list a:hover { color: var(--color-accent-100); }
html[data-theme="dark"][data-header-style="line"] .site-header .btn--ghost:hover { background: var(--fill-500); border-color: var(--fill-500); color: var(--lt-ffffff, #fff); }

/* ##########################################################################
   ROUND 2 (2026-09-22) — quieter, editorial, instrument-like. Round 1 above (float/glass/forest/capsule/line)
   was rejected as "SaaS", kept only for history. No pills-on-pills, no gradients on the chrome.
   ########################################################################## */

/* ==========================================================================
   6) masthead — «سرصفحه‌ی نشریه»: logo centred like a journal's nameplate, menu on the right, actions on the left,
      a double rule underneath. Wide screens only (≥1101px); below that the normal bar is kept.
   ========================================================================== */
@media (min-width: 1101px) {
  html[data-header-style="masthead"] .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ink); box-shadow: none; }
  html[data-header-style="masthead"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--ink); pointer-events: none; }
  html[data-header-style="masthead"] .site-header__inner { position: relative; padding-block: 19px; }
  html[data-header-style="masthead"] .site-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 27px; gap: 10px; }
  html[data-header-style="masthead"] .site-logo__icon { width: 32px; height: 32px; }
  html[data-header-style="masthead"] .site-nav__list { gap: 26px; font-size: 14.5px; }
  html[data-header-style="masthead"] .site-nav__list a:hover { color: var(--ink); }
  html[data-header-style="masthead"] .site-nav__list a::after { content: ""; position: absolute; right: 0; left: 0; bottom: -4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; border-radius: 0; }
  html[data-header-style="masthead"] .site-nav__list a:hover::after,
  html[data-header-style="masthead"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { transform: scaleX(1); background: var(--ink); height: 1px; }
  html[data-header-style="masthead"] .site-header__inner { gap: 22px; }
  html[data-header-style="masthead"] .account-nav-link { padding: 6px 0; border-radius: 0; font-size: 14px; border-bottom: 1px solid transparent; }
  html[data-header-style="masthead"] .account-nav-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
  html[data-header-style="masthead"] .site-header .btn--ghost { background: var(--ink); color: var(--on-ink); border-color: var(--ink); border-radius: 6px; padding: 9px 20px; }
  html[data-header-style="masthead"] .site-header .btn--ghost::after { content: "\2190"; margin-inline-start: 4px; transition: transform .2s ease; }
  html[data-header-style="masthead"] .site-header .btn--ghost:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--lt-ffffff, #fff); transform: none; }
  html[data-header-style="masthead"] .site-header .btn--ghost:hover::after { transform: translateX(-3px); }
}

/* ==========================================================================
   7) trace — «رد موج مغزی»: the header's bottom border is a fine EEG trace that drifts very slowly; echoes the hero's brain wave
   ========================================================================== */
html[data-header-style="trace"] .site-header { border-bottom: 0; box-shadow: none; background: var(--header-bg); }
html[data-header-style="trace"] .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 20px; pointer-events: none;
  background: var(--color-accent-500); opacity: .6;
  -webkit-mask-image: url("header-trace.svg"), linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent);
          mask-image: url("header-trace.svg"), linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent);
  -webkit-mask-size: 480px 20px, 100% 100%; mask-size: 480px 20px, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: hdr-trace-flow 34s linear infinite;
}
@keyframes hdr-trace-flow { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: 480px 0, 0 0; mask-position: 480px 0, 0 0; } }
/* Desktop (>900px): the tile grows with the screen (2 pulses per tile) so there are always ~4-5 pulses across, not 6+ on wide monitors.
   Phones/tablets (<=900px) keep the 480px tile above, unchanged. */
@media (min-width: 901px) {
  html[data-header-style="trace"] { --hdr-trace-tile: clamp(560px, calc(100vw / 3), 1000px); }
  html[data-header-style="trace"] .site-header::after {
    -webkit-mask-image: url("header-trace-wide.svg"), linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent);
            mask-image: url("header-trace-wide.svg"), linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent);
    -webkit-mask-size: var(--hdr-trace-tile) 20px, 100% 100%; mask-size: var(--hdr-trace-tile) 20px, 100% 100%;
    animation-name: hdr-trace-flow-wide; animation-duration: 52s;
  }
}
@keyframes hdr-trace-flow-wide { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: var(--hdr-trace-tile) 0, 0 0; mask-position: var(--hdr-trace-tile) 0, 0 0; } }
html[data-header-style="trace"] .site-nav__list a:hover { color: var(--ink); }
html[data-header-style="trace"] .account-nav-link { padding: 6px 4px; border-radius: 0; font-size: 14px; }
html[data-header-style="trace"] .account-nav-link:hover { color: var(--color-accent-500); }
html[data-header-style="trace"] .site-header .btn--ghost { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-header-style="trace"] .site-header .btn--ghost:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--lt-ffffff, #fff); }
html[data-theme="dark"][data-header-style="trace"] .site-header::after { background: var(--color-accent-100); opacity: .5; }

/* ==========================================================================
   8) adaptive — «تطبیقی»: at the top of the page the bar is transparent (the hero shows behind it on the home page);
      after a little scrolling it condenses into a solid bar. Needs assets/header-fx.js (sets html[data-header-scrolled]).
   ========================================================================== */
html[data-header-style="adaptive"] .site-header {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
html[data-header-style="adaptive"] .site-header__inner { transition: padding .3s ease; }
html[data-header-style="adaptive"] .site-logo__icon { transition: width .3s ease, height .3s ease; }
html[data-header-style="adaptive"][data-header-scrolled] .site-header {
  background: var(--header-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--header-line); box-shadow: 0 8px 24px -18px rgba(4,23,43,.28);
}
html[data-header-style="adaptive"][data-header-scrolled] .site-header__inner { padding-block: 7px; }
html[data-header-style="adaptive"][data-header-scrolled] .site-logo__icon { width: 26px; height: 26px; }
html[data-header-style="adaptive"] body.home .site-header { margin-bottom: -66px; }
html[data-header-style="adaptive"] body.home .hero--home { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--space-lg) + 66px); }
html[data-header-style="adaptive"] .site-nav__list a:hover { color: var(--ink); }
html[data-header-style="adaptive"] .account-nav-link { padding: 6px 4px; border-radius: 0; font-size: 14px; }
html[data-header-style="adaptive"] .site-header .btn--ghost { transition: background .3s ease, color .3s ease, border-color .3s ease; }
html[data-header-style="adaptive"][data-header-scrolled] .site-header .btn--ghost { background: var(--ink); color: var(--on-ink); }
html[data-header-style="adaptive"][data-header-scrolled] .site-header .btn--ghost:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--lt-ffffff, #fff); }

/* ==========================================================================
   9) slab — «تخته‌ی تمام‌قد»: the bar is a full-bleed rail; menu items are full-height tabs, the current one carries a
      bar sitting on the bottom rule, and «شروع تست» is a solid green slab flush against the screen edge (≥1101px)
   ========================================================================== */
@media (min-width: 1101px) {
  html[data-header-style="slab"] .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ink); box-shadow: none; }
  html[data-header-style="slab"] .site-header__inner { max-width: none; width: 100%; padding: 0; gap: 0; align-items: stretch; min-height: 66px; }
  html[data-header-style="slab"] .site-logo { align-self: center; margin-inline: max(24px, calc((100vw - var(--container, 1200px)) / 2 + 20px)) 28px; }
  html[data-header-style="slab"] .site-nav { display: flex; align-items: stretch; }
  html[data-header-style="slab"] .site-nav ul, html[data-header-style="slab"] .site-nav__list { align-items: stretch; gap: 0; }
  html[data-header-style="slab"] .site-nav__list li { display: flex; }
  html[data-header-style="slab"] .site-nav__list a { display: flex; align-items: center; padding: 0 22px; transition: background .2s ease; }
  html[data-header-style="slab"] .site-nav__list a:hover { background: var(--surface); color: var(--ink); }
  html[data-header-style="slab"] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0; background: var(--ink); }
  html[data-header-style="slab"] .account-nav { align-items: center; padding-inline: 22px; }
  html[data-header-style="slab"] .account-nav-link { align-self: stretch; padding: 0 24px; border-radius: 0; border-inline-start: 1px solid var(--border); font-size: 14px; }
  html[data-header-style="slab"] .account-nav-link:hover { background: var(--surface); color: var(--ink); }
  html[data-header-style="slab"] .site-header .btn--ghost { align-self: stretch; margin-bottom: -1px; border: 0; border-radius: 0; min-height: 0; padding: 0 34px; background: var(--color-accent-700); color: var(--lt-ffffff, #fff); font-weight: 600; }
  html[data-header-style="slab"] .site-header .btn--ghost::after { content: "\2190"; margin-inline-start: 6px; transition: transform .2s ease; }
  html[data-header-style="slab"] .site-header .btn--ghost:hover { background: var(--ink); color: var(--on-ink); transform: none; }
  html[data-header-style="slab"] .site-header .btn--ghost:hover::after { transform: translateX(-4px); }
  html[data-theme="dark"][data-header-style="slab"] .site-header .btn--ghost { background: var(--fill-600); }
  html[data-theme="dark"][data-header-style="slab"] .site-header .btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
}

/* ==========================================================================
   10) glide — «خط لغزان»: a thin indicator slides between menu items and rests under the current page;
       the brand slogan sits next to the logo. Needs assets/header-fx.js (adds .site-nav__glide and data-glide).
   ========================================================================== */
html[data-header-style="glide"] .site-nav__list { position: relative; }
html[data-header-style="glide"] .site-nav__list a:hover { color: var(--ink); }
html[data-header-style="glide"] .site-nav__glide { position: absolute; bottom: -2px; left: 0; height: 2px; width: 0; background: var(--color-accent-500); border-radius: 2px; opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
html[data-header-style="glide"][data-glide] .site-nav__list :is(li.current-menu-item, li.current_page_item, li.current-menu-ancestor, li.current_page_ancestor, li.current_page_parent) > a::after { display: none; }
@media (min-width: 1101px) {
  html[data-header-style="glide"] .site-logo::after { content: "مغزت رو قوی کن!"; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--muted); margin-inline-start: 12px; padding-inline-start: 12px; border-inline-start: 1px solid var(--border); white-space: nowrap; }
}
html[data-header-style="glide"] .account-nav-link { padding: 6px 4px; border-radius: 0; font-size: 14px; }
html[data-header-style="glide"] .account-nav-link:hover { color: var(--color-accent-500); }
html[data-header-style="glide"] .site-header .btn--ghost { background: var(--color-accent-700); color: var(--lt-ffffff, #fff); border-color: var(--color-accent-700); }
html[data-header-style="glide"] .site-header .btn--ghost::after { content: "\2190"; margin-inline-start: 4px; transition: transform .2s ease; }
html[data-header-style="glide"] .site-header .btn--ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); transform: none; }
html[data-header-style="glide"] .site-header .btn--ghost:hover::after { transform: translateX(-3px); }
html[data-theme="dark"][data-header-style="glide"] .site-header .btn--ghost { background: var(--fill-600); border-color: var(--fill-600); }
html[data-theme="dark"][data-header-style="glide"] .site-header .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
  html[data-header-style="trace"] .site-header::after { animation: none; }
  html[data-header-style="adaptive"] .site-header, html[data-header-style="adaptive"] .site-header__inner, html[data-header-style="glide"] .site-nav__glide { transition: none; }
}

/* keep motion polite */
@media (prefers-reduced-motion: reduce) {
  html[data-header-style] .site-header .btn--ghost, html[data-header-style] .account-nav-link, html[data-header-style] .site-nav__list a, html[data-header-style] .site-nav__list a::before { transition: none; }
}

/* ##########################################################################
   «شروع تست» BUTTON COLOUR (2026-09-22) — registry: inc/header-style.php (maghzeto_start_btn_styles()).
   Independent of the header layout style above; switch: <html data-start-btn="…">. Only the header's
   .btn--ghost is touched (.hero__actions / per-card buttons use their own classes, untouched). Same
   specificity as the trace header's own black rule above (html[attr] .site-header .btn--ghost) — this
   block sits LATER in the file, so it wins on source order whenever both attributes are present.
   ########################################################################## */
html[data-start-btn="green"] .site-header .btn--ghost { background: linear-gradient(135deg, var(--lc-4d7c62, #4d7c62), var(--lc-2a4335, #2a4335)); color: var(--lt-ffffff, #fff); border-color: transparent; }
html[data-start-btn="green"] .site-header .btn--ghost:hover { background: linear-gradient(135deg, var(--lc-5a8e70, #5a8e70), var(--lc-34533f, #34533f)); color: var(--lt-ffffff, #fff); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(42,67,53,.55); }

html[data-start-btn="solid"] .site-header .btn--ghost { background: var(--color-accent-700); color: var(--lt-ffffff, #fff); border-color: var(--color-accent-700); }
html[data-start-btn="solid"] .site-header .btn--ghost:hover { background: var(--color-accent-500); border-color: var(--color-accent-500); color: var(--lt-ffffff, #fff); }

html[data-start-btn="outline"] .site-header .btn--ghost { background: transparent; color: var(--color-accent-700); border-color: var(--color-accent-500); }
html[data-start-btn="outline"] .site-header .btn--ghost:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--lt-ffffff, #fff); }
/* 2026-09-22: owner asked for plain white (not the green-tinted version) in dark mode. */
html[data-theme="dark"][data-start-btn="outline"] .site-header .btn--ghost { color: var(--lt-ffffff, #fff); border-color: var(--lc-ffffff, #fff); }
/* --ink flips to near-white in dark mode (it's a dark-mode TEXT token, not "always dark") — pairing a
   white fill with var(--ink) here made hover text invisible (white-on-white). --on-ink is the token for
   "text sitting on a light fill" and flips the other way (near-black in dark mode), which is what we want. */
html[data-theme="dark"][data-start-btn="outline"] .site-header .btn--ghost:hover { background: var(--lc-ffffff, #fff); border-color: var(--lc-ffffff, #fff); color: var(--on-ink); }

html[data-start-btn="charcoal"] .site-header .btn--ghost { background: var(--lc-223028, #223028); color: var(--lt-ffffff, #fff); border-color: var(--lc-223028, #223028); }
html[data-start-btn="charcoal"] .site-header .btn--ghost:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--lt-ffffff, #fff); }

html[data-start-btn="light"] .site-header .btn--ghost { background: var(--card); color: var(--color-accent-700); border-color: var(--color-accent-500); }
html[data-start-btn="light"] .site-header .btn--ghost:hover { background: rgba(77,124,98,.10); border-color: var(--color-accent-700); color: var(--color-accent-700); }
html[data-theme="dark"][data-start-btn="light"] .site-header .btn--ghost { color: var(--color-accent-100); border-color: var(--color-accent-100); }
html[data-theme="dark"][data-start-btn="light"] .site-header .btn--ghost:hover { background: rgba(134,195,163,.12); border-color: var(--color-accent-100); color: var(--color-accent-100); }

@media (prefers-reduced-motion: reduce) { html[data-start-btn] .site-header .btn--ghost { transition: none; } }