/* Homepage new design — Base styles: fonts, container, color tokens, resets */

@font-face { font-family: 'HndHeading'; src: url('../fonts/Doran-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HndHeading'; src: url('../fonts/Doran-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HndHeading'; src: url('../fonts/Doran-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'HndBody'; src: url('../fonts/yekan-bakh/YekanBakhFaNum-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HndBody'; src: url('../fonts/yekan-bakh/YekanBakhFaNum-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HndBody'; src: url('../fonts/yekan-bakh/YekanBakhFaNum-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'HndBody'; src: url('../fonts/yekan-bakh/YekanBakhFaNum-Heavy.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Brand palette, replaces the earlier gold/ivory scheme (2026-08-01) — the site's actual
     brand colors: a wine/eggplant family for the logo (#840a2b / #9c0f48 / #911a56, hue ~348
     in oklch) as the accent, and a warm cream (#fcf4e9) for backgrounds. The exact 3 hexes
     given are all dark/saturated, so the lighter/paler shades below are built to harmonize
     with them (same hue family) rather than being literal copies. */
  /* پس‌زمینه‌ی سفید خواسته شد به‌جای کرمِ قبلی (oklch(...75) که هم‌خانواده‌ی طلافروشی‌های
     رایج بود، نه برندِ این سایت). c-bg-soft و c-line هم به همان هیوی برند (۳۵۰/۳۴۸)
     منتقل شدند تا با پس‌زمینه‌ی سفید هماهنگ بمانند، نه رنگِ طلاییِ قبلی. */
  --c-bg:        #ffffff;
  --c-bg-soft:   oklch(97% 0.012 350);
  --c-surface:   #ffffff;
  --c-line:      oklch(89% 0.015 350);
  --c-ink:       oklch(23% 0.012 350);
  --c-ink-soft:  oklch(41% 0.012 350);
  --c-ink-mute:  oklch(58% 0.010 350);

  /* Wine/eggplant accent family — one hue (348), varying lightness/chroma like the old gold set */
  --c-gold:        oklch(58% 0.17 348);
  --c-gold-deep:   oklch(36% 0.16 345);
  --c-gold-soft:   oklch(90% 0.035 345);

  --font-heading: 'HndHeading', 'Georgia', serif;
  --font-body: 'HndBody', 'Tahoma', sans-serif;

  --container-w: 1440px;
  --container-pad: 32px;
}

#hnd-header,
#hnd-header *,
#hnd-footer,
#hnd-footer *,
main:has(> .hnd-hero),
main:has(> .hnd-hero) * {
  box-sizing: border-box;
}
body.hnd-front-page {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
body.hnd-front-page img { max-width: 100%; display: block; }
body.hnd-front-page a { color: var(--c-gold-deep); text-decoration: none; }
body.hnd-front-page a:hover { color: var(--c-gold); }
body.hnd-front-page button { font-family: inherit; }

body.hnd-front-page .container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* Right-edge auto-hide scrollbar — this stylesheet only loads on this page, so this is
   already page-scoped without needing an extra selector. Thumb is transparent (bulges
   slightly out past the viewport edge as a small "nub") until hovered or actively
   scrolling (`.hnd-scrolling`, toggled in homepage-new-design-front.js). WebKit-only:
   the track still reserves a small fixed width (no true zero-width overlay scrollbar
   exists cross-browser without replacing native scroll — not worth that risk here). */
/* This document renders dir="rtl" (see language_attributes() in the template), so the browser
   already puts the scrollbar on the LEFT edge by default — the reserved-but-transparent 10px
   track read as an unexplained empty gap on the left of the page. Thinner track + Firefox's
   own thin-scrollbar hint reduce that gap without giving up the custom hover/scroll treatment. */
html { scrollbar-width: thin; }
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-image: none;
  border-radius: 999px 0 0 999px;
  border: none;
  min-height: 36px;
  transition: background-color .25s ease;
}
html::-webkit-scrollbar-thumb:hover,
html.hnd-scrolling::-webkit-scrollbar-thumb {
  background-color: var(--c-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 1 L8 5 L2 5 Z M5 15 L2 11 L8 11 Z' fill='%23131327'/%3E%3C/svg%3E");
}

/* This template dequeues the theme's Bootstrap CSS/JS entirely (see inc/enqueues.php) since
   its own design never uses Bootstrap components. But several theme-wide features (burger
   mega-menu, size-guide, mini-cart, main-menu) unconditionally hook `wp_footer` and print a
   Bootstrap `.modal` — normally invisible only because bootstrap.rtl.css sets
   `.modal:not(.show){display:none}`. With that stylesheet gone on this page, those orphaned
   modals render as plain visible blocks stacked after the footer. Nothing on this page ever
   opens them (this design has its own header/cart/menu), so keep them permanently hidden here. */
body.hnd-front-page .modal { display: none !important; }
body.hnd-front-page .modal.show { display: flex !important; }