/* ==========================================================================
   Forexheights — Halloween theme
   Loaded only while the admin switch is on (Settings → Seasonal theme). The build
   adds <link rel="stylesheet" href="/halloween.css"> to every page's <head> and a
   small greeting strip above the header; switching it off removes both, byte for
   byte. Nothing in here changes words, prices or links — only the look:
   a night-sky header, hero and footer, pumpkin-orange accents, a moon with bats.
   ========================================================================== */

:root {
  --hw-night: #140C22;
  --hw-night-2: #1E1233;
  --hw-plum: #2B1846;
  --hw-pumpkin: #F97316;
  --hw-ember: #FB923C;
  --hw-ink-1: #F7F0FF;
  --hw-ink-2: #DDD0EE;
  --hw-ink-3: #B7A6CE;

  /* Light content areas: warm paper, aubergine ink, pumpkin accent (5.2:1 on white) */
  --bg: #FFFCF8;
  --bg-2: #FFF5EA;
  --surface: #FFFFFF;
  --surface-2: #FFF0E0;
  --text: #1E1430;
  --text-2: #463A59;
  --text-3: #685B7C;
  --line: rgba(30, 20, 48, 0.10);
  --line-2: rgba(30, 20, 48, 0.20);
  --accent: #C2410C;
  --accent-deep: #9A3412;
  --accent-dark: #7C2D12;
  --accent-soft: rgba(234, 88, 12, 0.08);
  --sky: #FB923C;
  --gold: #B45309;
  --pill-grad: linear-gradient(100deg, #7C2D12 0%, #C2410C 58%, #EA580C 130%);
  --card-grad: linear-gradient(175deg, #FFFFFF, #FFFAF3);
  --shadow-sm: 0 2px 10px -4px rgba(30, 20, 48, 0.12);
  --shadow-md: 0 18px 40px -28px rgba(30, 20, 48, 0.34);
}
body { background: var(--bg); }

/* --- Greeting strip ------------------------------------------------------- */
.hw-ribbon {
  position: relative; z-index: 101;
  background: linear-gradient(90deg, #3E1808, #7C2D12 28%, #9A3412 50%, #7C2D12 72%, #3E1808);
  color: #FFEFD9; text-align: center;
  font-family: var(--f-ui); font-size: 0.82rem; line-height: 1.45;
  padding: 8px var(--pad);
}
.hw-ribbon .hw-pumpkin { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; }
.hw-ribbon a { color: #FFFFFF; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.hw-ribbon a:hover { color: #FFE2BF; text-decoration-color: currentColor; }
@media (max-width: 680px) { .hw-ribbon .hw-long { display: none; } .hw-ribbon { font-size: 0.78rem; } }
html.embed .hw-ribbon { display: none; }

/* --- Sessions strip and header: night ------------------------------------- */
.sessions-strip { background: var(--hw-night); color: var(--hw-ink-3); border-bottom-color: rgba(255, 255, 255, 0.08); }
.sessions-strip .dot { background: rgba(255, 255, 255, 0.28); }
.sessions-strip .dot.open { background: var(--hw-pumpkin); }
.sessions-strip .dot.open::after { border-color: rgba(249, 115, 22, 0.7); }
.sessions-strip .utc { color: var(--hw-ink-3); }

.site-header { background: rgba(20, 12, 34, 0.93); border-bottom-color: rgba(255, 255, 255, 0.08); }
.brand b { color: var(--accent); }
.site-header .brand, .site-footer .brand { color: var(--hw-ink-1); }
.site-header .brand b, .site-footer .brand b { color: var(--hw-ember); }
.site-header .brand svg path, .site-footer .brand svg path { stroke: var(--hw-ember); }

.site-header .site-nav > a:not(.btn) { color: var(--hw-ink-2); }
.site-header .site-nav > a:not(.btn):hover, .site-header .site-nav > a[aria-current="page"]:not(.btn) { color: #FFFFFF; }
.site-header .site-nav > a:not(.btn)::after, .site-header .nav-group-btn::after { background: var(--hw-ember); }
.site-header .nav-group-btn { color: var(--hw-ink-2); }
.site-header .nav-group-btn:hover, .site-header .nav-group.open .nav-group-btn, .site-header .nav-group.is-here .nav-group-btn { color: #FFFFFF; }
.site-header .nav-group-btn .chev { color: var(--hw-ink-3); }
.site-header .nav-group.open .nav-group-btn .chev { color: var(--hw-ember); }

.site-header .btn.ghost { background: rgba(255, 255, 255, 0.06); color: var(--hw-ember); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }
.site-header .btn.ghost:hover { color: #FFFFFF; border-color: var(--hw-ember); box-shadow: 0 0 22px -8px rgba(249, 115, 22, 0.7); }
.book-badge { background: #C2410C; border-color: var(--hw-night); }

@media (max-width: 880px) {
  .site-header .nav-toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); }
  .site-header .site-nav { background: var(--hw-night-2); border-bottom-color: rgba(255, 255, 255, 0.08); }
  .site-header .site-nav > a { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .site-header .nav-group { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .site-header .nav-group-btn { color: #FFFFFF; }
  .site-header .nav-menu { background: transparent; }
  .site-header .nav-menu a, .site-header .nav-menu .m-plain { color: var(--hw-ink-2); }
  .site-header .nav-menu .m-d { color: var(--hw-ink-3); }
  .site-header .nav-menu a:hover, .site-header .nav-menu a:focus-visible { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
  .site-header .nav-menu a[aria-current="page"] .m-t { color: var(--hw-ember); }
  .book-badge { border-color: transparent; }
}

/* --- Dropdown menus stay light, with pumpkin accents ----------------------- */
.nav-menu { box-shadow: 0 30px 60px -24px rgba(20, 12, 34, 0.55), 0 2px 6px rgba(20, 12, 34, 0.12); }

/* --- Hero: night sky, moon and bats --------------------------------------- */
.hero {
  --text: var(--hw-ink-1); --text-2: var(--hw-ink-2); --text-3: var(--hw-ink-3);
  --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.24);
  --accent: var(--hw-ember); --accent-soft: rgba(251, 146, 60, 0.12);
  --bg: #150D24;                       /* the ticker's edge fades blend into this */
  color: var(--text);
  background-color: #150D24;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cg fill='%23FFF6E0' fill-opacity='.55'%3E%3Ccircle cx='12' cy='18' r='1'/%3E%3Ccircle cx='70' cy='44' r='.8'/%3E%3Ccircle cx='130' cy='12' r='1.2'/%3E%3Ccircle cx='190' cy='60' r='.7'/%3E%3Ccircle cx='226' cy='22' r='1'/%3E%3Ccircle cx='40' cy='96' r='.7'/%3E%3Ccircle cx='104' cy='122' r='1'/%3E%3Ccircle cx='160' cy='100' r='.8'/%3E%3Ccircle cx='214' cy='140' r='1.1'/%3E%3Ccircle cx='22' cy='146' r='.8'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 50% -12%, #3A1F5C 0%, rgba(58, 31, 92, 0) 70%),
    linear-gradient(180deg, #1E1035 0%, #150D24 72%);
}
.hero::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.16) 0%, rgba(124, 58, 237, 0.08) 42%, transparent 68%);
}
.hero::after {                           /* the ring becomes the moon with bats */
  left: auto; right: 4%; top: 26px; transform: none;
  width: 230px; height: 170px; border: 0; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='.45' stop-color='%23FFE6A8' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23FFE6A8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='78' r='76' fill='url(%23g)'/%3E%3Ccircle cx='150' cy='78' r='42' fill='%23FFF1CF'/%3E%3Cg fill='%23EBD49E' fill-opacity='.75'%3E%3Ccircle cx='136' cy='66' r='7'/%3E%3Ccircle cx='162' cy='92' r='9'/%3E%3Ccircle cx='160' cy='62' r='4'/%3E%3Ccircle cx='138' cy='96' r='3.5'/%3E%3C/g%3E%3Cg fill='%230B0614'%3E%3Cpath d='M150 70c-2-4-6-4-8-1-3-5-10-6-14-2 4 0 7 3 8 6 2-2 5-2 7 0 1-2 4-2 5 0l2-1 2 1c1-2 4-2 5 0 2-2 5-2 7 0 1-3 4-6 8-6-4-4-11-3-14 2-2-3-6-3-8 1z'/%3E%3Cpath d='M64 34c-1.5-3-4.5-3-6-.8-2.3-3.7-7.5-4.5-10.5-1.5 3 0 5.3 2.3 6 4.5 1.5-1.5 3.8-1.5 5.3 0 .7-1.5 3-1.5 3.7 0l1.5-.7 1.5.7c.7-1.5 3-1.5 3.7 0 1.5-1.5 3.8-1.5 5.3 0 .7-2.2 3-4.5 6-4.5-3-3-8.2-2.2-10.5 1.5-1.5-2.2-4.5-2.2-6 .8z'/%3E%3Cpath d='M214 136c-1-2-3-2-4-.5-1.5-2.5-5-3-7-1 2 0 3.5 1.5 4 3 1-1 2.5-1 3.5 0 .5-1 2-1 2.5 0l1-.5 1 .5c.5-1 2-1 2.5 0 1-1 2.5-1 3.5 0 .5-1.5 2-3 4-3-2-2-5.5-1.5-7 1-1-1.5-3-1.5-4 .5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  z-index: 0;
}
.hero .shell { z-index: 1; }
.hero:has(.hero-center)::after { right: auto; left: 4%; }          /* homepage: the book sits on the right */
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: hw-float 7s ease-in-out infinite alternate; }
  @keyframes hw-float { from { translate: 0 0; } to { translate: 0 -8px; } }
}
@media (max-width: 1180px) {
  .hero::after, .hero:has(.hero-center)::after { left: auto; right: 2%; top: 12px; width: 150px; height: 112px; opacity: 0.8; }
}
@media (max-width: 720px) {
  .hero::after, .hero:has(.hero-center)::after { right: 8px; top: 6px; width: 104px; height: 78px; opacity: 0.6; }
}

.hero h1 em, .hero h2 em {
  background: linear-gradient(90deg, #FDBA74, #F97316 60%, #EA580C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .hero-plain { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--hw-ink-2); }
.hero .btn.ghost { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.hero .btn.ghost:hover { color: #FFFFFF; border-color: var(--hw-ember); box-shadow: 0 0 24px -8px rgba(249, 115, 22, 0.75); }
.hero .hero-book-timer { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--hw-ink-2); box-shadow: none; }
.hero-book:hover .hero-book-3d, .hero-book:focus-visible .hero-book-3d { box-shadow: 0 40px 60px -22px rgba(249, 115, 22, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); }

/* White cards inside the night hero keep the light palette */
.hero .desk-board, .hero .card, .hero .callout {
  --text: #1E1430; --text-2: #463A59; --text-3: #685B7C;
  --line: rgba(30, 20, 48, 0.10); --line-2: rgba(30, 20, 48, 0.20);
  --accent: #C2410C; --accent-soft: rgba(234, 88, 12, 0.08); --bg: #FFFCF8;
  color: var(--text);
}
.hero .desk-board { box-shadow: 0 30px 70px -38px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.2); }
.desk-board .board-head, .desk-board .board-foot { background: #FFF8F0; }
.desk-board .b-mono { background: linear-gradient(165deg, #FFF1E3, #FFE2C6); border-color: rgba(194, 65, 12, 0.22); }

/* --- Content accents ------------------------------------------------------- */
.btn:hover { border-color: rgba(251, 146, 60, 0.6); box-shadow: 0 0 28px -6px rgba(234, 88, 12, 0.55); }
.btn.ghost:hover { box-shadow: 0 0 22px -8px rgba(234, 88, 12, 0.45); }
.stat::before { background: radial-gradient(closest-side at 50% 38%, rgba(234, 88, 12, 0.12), transparent); }
.bento .cell.dark {
  background: radial-gradient(420px 260px at 85% 0%, rgba(124, 58, 237, 0.13), transparent 70%), var(--card-grad);
  border-color: rgba(124, 58, 237, 0.26);
}
.bento .cell.tint {
  background: radial-gradient(420px 260px at 15% 100%, rgba(249, 115, 22, 0.14), transparent 70%), var(--card-grad);
  border-color: rgba(249, 115, 22, 0.32);
}
.card.accent { border-color: rgba(194, 65, 12, 0.32); box-shadow: 0 20px 44px -30px rgba(194, 65, 12, 0.5); }
.ask-band {
  background: radial-gradient(900px 420px at 15% 0%, rgba(234, 88, 12, 0.08), transparent 70%), linear-gradient(175deg, #FFFAF4, #FFF1E3);
}
.modal-backdrop { background: rgba(20, 12, 34, 0.6); }

/* --- Calculators ----------------------------------------------------------- */
.calc-out {
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(249, 115, 22, 0.32), transparent 70%),
    linear-gradient(155deg, #2B1846 0%, #21123A 45%, #140C22 100%);
}
.calc-label { color: #E6DAF3; }
.calc-field input:focus, .calc-field select:focus, .acct-row input:focus { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }
.tool-tag.lvl-all { border-color: rgba(194, 65, 12, 0.35); }
.tool-tag.lvl-experienced { border-color: rgba(154, 52, 18, 0.35); }

/* --- Remaining blue details, warmed ------------------------------------------ */
.ledger::before { background: linear-gradient(180deg, var(--accent), rgba(249, 115, 22, 0.55), transparent); }
th { background: #FFF6EC; }
.key-facts { border-color: rgba(194, 65, 12, 0.28); border-left-color: var(--accent); }
.pull-panel { background: radial-gradient(900px 500px at 50% 0%, rgba(234, 88, 12, 0.10), transparent 70%), var(--bg-2); }
.cta-band {
  background:
    radial-gradient(900px 520px at 50% 115%, rgba(249, 115, 22, 0.42), transparent 70%),
    linear-gradient(155deg, #2B1846 0%, #21123A 45%, #140C22 100%);
}
.cta-band .eyebrow { color: #FDBA74; }
.bento .cell:hover, .card:hover, .steps .step:hover { border-color: rgba(194, 65, 12, 0.38); box-shadow: 0 22px 46px -26px rgba(30, 20, 48, 0.3), 0 0 0 1px rgba(194, 65, 12, 0.06); }
.series-card:hover { border-color: rgba(194, 65, 12, 0.4); }
.ask-field input:focus, .ask-field textarea:focus, .book-field input:focus { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }
.modal-book { background: linear-gradient(160deg, #FFF1E3, #FFFAF4); }

/* --- Footer: night, with a graveyard skyline along its top edge ------------ */
.site-footer {
  position: relative;
  --text: var(--hw-ink-1); --text-2: var(--hw-ink-2); --text-3: var(--hw-ink-3);
  --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.22); --accent: var(--hw-ember);
  background: linear-gradient(180deg, #1A1030 0%, #120A1F 100%);
  color: var(--hw-ink-2);
  border-top: 0;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -39px; height: 40px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='40' viewBox='0 0 480 40'%3E%3Cg fill='%231A1030'%3E%3Cpath d='M0 40V28c30-4 60-8 96-6 44 3 74 9 118 8 48-1 74-12 120-12s78 9 114 10c14 .5 24 .5 32 0v12z'/%3E%3Cpath d='M90 24v-9a6 6 0 0 1 12 0v9zM332 19V6h4v13zM327 9h14v3.5h-14zM405 28v-7a5 5 0 0 1 10 0v7z'/%3E%3C/g%3E%3Cellipse cx='165' cy='27' rx='5' ry='4.2' fill='%23C2410C'/%3E%3Cellipse cx='175' cy='27' rx='5' ry='4.2' fill='%23C2410C'/%3E%3Cellipse cx='170' cy='27' rx='5.6' ry='4.7' fill='%23F97316'/%3E%3Crect x='169.2' y='20.4' width='1.6' height='2.8' rx='.6' fill='%233F6212'/%3E%3Cellipse cx='259' cy='27' rx='3.4' ry='2.9' fill='%23C2410C'/%3E%3Cellipse cx='266' cy='27' rx='3.4' ry='2.9' fill='%23C2410C'/%3E%3Cellipse cx='262.5' cy='27' rx='3.9' ry='3.2' fill='%23F97316'/%3E%3Crect x='261.9' y='22.4' width='1.2' height='2' rx='.5' fill='%233F6212'/%3E%3C/svg%3E") repeat-x left bottom / 480px 40px;
}
.footer-grid h2 { color: var(--hw-ink-3); }
.footer-grid a { color: var(--hw-ink-2); }
.footer-grid a:hover { color: var(--hw-ember); }
.site-footer a { text-decoration-color: rgba(255, 255, 255, 0.3); }
.site-footer a:hover { color: var(--hw-ember); text-decoration-color: var(--hw-ember); }
html.embed .site-footer::before { display: none; }

@media print {
  .hw-ribbon, .hero::after, .site-footer::before { display: none; }
  .hero, .site-footer { background: none; color: #000; }
}

/* --- Halloween extras on the homepage ------------------------------------------------- */
span.hw-only { display: inline-flex !important; }
svg.hw-only { display: block !important; }
.hw-tag { margin-left: 10px; padding: 3px 9px; border-radius: 999px; font-size: 0.62rem; letter-spacing: 0.12em; color: #FFFFFF; background: linear-gradient(90deg, #9A3412, #EA580C); }
.book-bat { position: absolute; top: -10px; right: -18px; width: 44px; height: 22px; fill: #1E1430; transform: rotate(14deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.book-start { background: radial-gradient(600px 220px at 12% 50%, rgba(249, 115, 22, 0.14), transparent 70%), var(--bg-2); }
.hero .icon-chips li { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: var(--hw-ink-1); box-shadow: none; }
.hero .icon-chips svg { stroke: var(--hw-ember); }
@media (prefers-reduced-motion: no-preference) { .book-bat { animation: hw-bat 3.2s ease-in-out infinite alternate; } @keyframes hw-bat { to { translate: 0 -4px; rotate: 6deg; } } }
@media (max-width: 860px) { .hw-tag { margin-left: 0; } }
/* One moon is enough: hide the hero's own moon while the animated Halloween banner is on the page */
body:has(.slide[data-anim="halloween"]) .hero-home::after { display: none; }