/* theme.css — brings every page except the home page and admin into the
   October 2026 look: a night-forest ground, cream text, gold actions, and the
   six active colours (plus the four preservative colours) carrying the colour.
   Loaded after styles.css and pages.css. Admin does NOT load this file
   (it shares pages.css and stays light on purpose). */

:root {
  --night: #121A16; --night-2: #1B2620; --night-3: #24332B; --night-4: #2E4036;
  --cream: #F4EEDF; --mist: #BDB9A8; --line: rgba(244,238,223,.16);
  --gold: #EFCB74; --gold-2: #E2B24E; --dark-ink: #1A140A;
  --ha-b: #E9BC55; --nia-b: #EE6F78; --pan-b: #D27BB9; --pro-b: #9D92EE; --tre-b: #F09A55; --all-b: #6EA6E3;
  --rainbow: linear-gradient(90deg, #C9962F, #A3343C, #7A3466, #4A3F8C, #C46A26, #2F5A8A);

  /* the old paper colours, flipped to night so everything built on them follows */
  --vellum: var(--night);
  --vellum-deep: var(--night-3);
  --paper: var(--night-2);
  --ink: var(--cream);
  --ink-soft: var(--mist);
  --moss: var(--gold);
  --moss-dark: #0B100D;
  --gilt: var(--gold);
  --rule: rgba(244,238,223,.2);
  --tre: #B5581C;
}
html { scrollbar-color: var(--gold-2) var(--night-2); color-scheme: dark; }
body { background: var(--night); color: var(--cream); }
::selection { background: rgba(157,146,238,.45); color: #fff; }
a { color: var(--gold); }
a:hover { color: #fff; }
h1, h2, h3 { color: #FBF6EA; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { background: var(--gold); color: var(--dark-ink); }
strong, b { color: inherit; }

/* ---------- the forest at the top of every page ---------- */
.page {
  background:
    linear-gradient(180deg, rgba(18,26,22,.3) 0, rgba(18,26,22,.62) 240px, rgba(18,26,22,.9) 420px, var(--night) 600px) no-repeat,
    url('../images/ShopBackground.webp') 30% 38% / 100% auto no-repeat,
    var(--night);
}
@media (max-width: 700px) {
  .page { background:
    linear-gradient(180deg, rgba(18,26,22,.35) 0, rgba(18,26,22,.7) 200px, var(--night) 400px) no-repeat,
    url('../images/ShopBackground.webp') 30% 30% / auto 420px no-repeat,
    var(--night); }
}

/* ---------- header ---------- */
.site-header { background: rgba(18,26,22,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rainbow); opacity: .85; }
.brand-logo { filter: brightness(1.35) saturate(1.1); height: clamp(44px, 5vw, 56px); }
.sub-header .header-inner { min-height: 60px; }
.sub-nav a, .main-nav a { color: var(--cream); }
.sub-nav a:hover, .main-nav a:hover { color: var(--gold); }
.cart-btn, .nav-toggle, .account-btn { color: var(--cream); }
.main-nav.is-open { background: rgba(18,26,22,.98); border-bottom-color: var(--line); }
.main-nav.is-open a { border-top-color: var(--line); }

/* ---------- footer: big logo on the left, rainbow rule on top ---------- */
.site-footer { position: relative; background: #0B100D; color: #CFC9B6; padding: 3rem var(--gutter) 3rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rainbow); }
.site-footer .footer-inner::before {
  content: ""; display: block; width: min(100%, 340px); aspect-ratio: 300 / 94;
  background: url('../images/draiocht-logo.webp') left center / contain no-repeat;
  filter: brightness(1.35) saturate(1.1);
}
.site-footer .footer-inner { gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .site-footer .footer-inner { grid-template-columns: 340px 1fr; column-gap: 3rem; align-items: start; }
  .site-footer .footer-inner > * { grid-column: 2; }
  .site-footer .footer-inner::before { grid-column: 1; grid-row: 1 / span 6; }
}
.site-footer a { color: #EBDDB8; }
.site-footer a:hover { color: #fff; }
.site-footer .fine { color: #A9A492; }

/* ---------- buttons ---------- */
.btn-primary, .guide-cta .btn-primary {
  color: var(--dark-ink); border-color: transparent;
  background: linear-gradient(180deg, #F6D98C, #E7BE5E);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.6), inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn-primary:hover, .guide-cta .btn-primary:hover { background: linear-gradient(180deg, #F9E2A4, #EBC66C); color: var(--dark-ink); }
.btn-primary:disabled { background: #4A5249; color: #BDB9A8; box-shadow: none; }
.btn { border-radius: 10px; }
.btn-outline { color: var(--gold); border-color: var(--gold); background: transparent; }
.btn-outline:hover { background: rgba(239,203,116,.14); color: #fff; }
.btn-ghost-dark { color: var(--cream); border-color: var(--rule); }
.btn-ghost-dark:hover { color: var(--gold); border-color: var(--gold); }
.btn-danger { background: transparent; color: var(--nia-b); border-color: var(--nia-b); }
.btn-danger:hover { background: #A3343C; color: #fff; border-color: #A3343C; }
.count-gold { color: var(--dark-ink); }

/* ---------- cards, forms, notes ---------- */
.card { background: rgba(27,38,32,.92); border-color: var(--line); box-shadow: 0 18px 40px -30px rgba(0,0,0,.9); }
.field input, .field select, .field textarea,
.code-row input, .refer-link input, .waitlist-row input, .plan-every select, .qty,
.contact-form input, .contact-form textarea, .list-search input, .pager select {
  background: #101713; color: var(--cream); border-color: rgba(244,238,223,.26);
}
.field input::placeholder, .field textarea::placeholder, input::placeholder { color: #8F8B7E; }
.field input:focus, .field select:focus, .field textarea:focus, .code-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(239,203,116,.22); }
.check input, .plan input { accent-color: var(--gold); }
.note { color: var(--cream); }
.note-info { background: rgba(47,90,138,.28); border-color: var(--all-b); }
.note-ok { background: rgba(46,125,50,.25); border-color: #7CC77F; }
.note-warn, .note-test { background: rgba(178,106,0,.22); border-color: var(--tre-b); }
.note-err { background: rgba(163,52,60,.26); border-color: var(--nia-b); }
.err-text, .code-msg.err { color: #FF9AA2; }
.code-msg.ok { color: #9BE59F; }
.code-box, .inline-panel { background: rgba(16,23,19,.7); border-color: var(--rule); }
.sum-creator, .done-share, .credit-note { background: rgba(239,203,116,.1); color: var(--cream); }
.chip-via { background: rgba(239,203,116,.16); color: var(--cream); }
.pay-element:not(:empty) { background: #101713; border-color: var(--rule); }

/* tables (guides and the account page use them) */
.admin-table-wrap { background: var(--night-2); border-color: var(--line); }
.admin-table th { background: var(--night-3); color: var(--mist); border-bottom-color: var(--line); }
.admin-table td { border-bottom-color: var(--line); color: var(--cream); }
.admin-table tr:hover td { background: rgba(244,238,223,.03); }
.mini-table th { color: var(--mist); border-bottom-color: var(--rule); }
.mini-table td { border-bottom-color: var(--line); }
.vs-table td:nth-child(2) { background: rgba(239,203,116,.1); }
.cmp-table tr.us td { background: rgba(239,203,116,.14); color: #fff; }
.cmp-table td.y { color: #9BE59F; }
.cmp-table td.n { color: #6F7A72; }
.sources li:target { background: rgba(239,203,116,.18); }

/* ---------- checkout ---------- */
.steps-bar span { background: var(--night-3); color: var(--mist); }
.steps-bar span.on { background: var(--gold); color: var(--dark-ink); }
.summary-line .save { color: #9BE59F; }
.done-hero .tick { color: #fff; background: linear-gradient(135deg, #2E7D32, #2F5A8A); }
.plan { background: rgba(16,23,19,.7); border-color: rgba(244,238,223,.26); color: var(--cream); }
.plan:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: rgba(239,203,116,.08); }
.plan-sub .plan-price { color: var(--gold); }
.plan-every { color: var(--cream); }
.qty input, .qty-step { color: var(--cream); }
.line-plan.is-sub { color: var(--pan-b); }

/* ---------- account ---------- */
.tab { background: var(--night-2); border-color: var(--rule); color: var(--cream); }
.tab:hover { border-color: var(--gold); }
.tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--dark-ink); }
.tab .count { background: rgba(244,238,223,.16); }
.tab[aria-selected="true"] .count { background: rgba(0,0,0,.14); }
.progress span { background: var(--night-3); }
.star-input label { color: #4A5249; }
.ref-code { color: var(--gold); }

/* ---------- reviews page ---------- */
.big-score b { color: #fff; }
.dist-bar { background: var(--night-3); }
.review-full { background: var(--night-2); border-color: var(--line); }
.verified { background: rgba(239,203,116,.16); color: var(--gold); }

/* ---------- skin guides ---------- */
.guide-kicker { color: var(--gold); }
.guide-answer { background: rgba(201,150,47,.12); border-color: rgba(233,188,85,.35); border-left-color: var(--ha-b); }
.spot b { color: var(--b, var(--c)); }
.spot-ha { --b: var(--ha-b); } .spot-nia { --b: var(--nia-b); } .spot-pan { --b: var(--pan-b); } .spot-pro { --b: var(--pro-b); } .spot-tre { --b: var(--tre-b); } .spot-all { --b: var(--all-b); }
.hub-card { color: var(--cream); }
.hub-card b { color: var(--b, var(--c)); }
.hub-ha { --b: var(--ha-b); } .hub-nia { --b: var(--nia-b); } .hub-pan { --b: var(--pan-b); } .hub-pro { --b: var(--pro-b); } .hub-tre { --b: var(--tre-b); } .hub-all { --b: var(--all-b); }
.hub-card:hover { box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); border-color: rgba(244,238,223,.3); }
.guide-cta { background: linear-gradient(135deg, #2A2356, #1E2A52); color: #fff; border: 1px solid rgba(157,146,238,.3); }
.guide-steps li::before { background: var(--pro); }
.act-list li { background: var(--night-2); }
.faq-list details, .faq details { border-color: var(--line); }
.faq-list summary, .faq summary { color: var(--cream); }

/* ---------- creators ---------- */
.ref-bar { background: linear-gradient(90deg, #4A3F8C, #7A3466); color: #fff; }
.cr-perk b, .cs-acts b { color: var(--b, var(--c)); filter: brightness(1.45) saturate(1.1); }
.cr-stats div, .cr-bars { background: rgba(16,23,19,.7); border-color: var(--rule); }
.cr-stats b { color: var(--gold); }
.cr-steps li span { background: var(--night-3); border-color: var(--rule); color: var(--mist); }
.cs-mini-btn { background: var(--gold); color: var(--dark-ink); }
.cs-photo img { border-color: var(--night-2); box-shadow: 0 0 0 2px var(--c), 0 16px 34px -14px rgba(0,0,0,.8); }
.cs-kicker, .cs-mini small { filter: brightness(1.5); }
.swatches span { border-color: var(--night-2); }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--cream); }

/* ---------- small things ---------- */
.muted, .fine { color: var(--mist); }
hr { border: 0; height: 1px; background: var(--line); }
.thumb { background: var(--night-2); }

/* headings and intro text stay readable over the forest */
.page h1, .page > * > .lede, .page .back-link, .guide-kicker, .cs-kicker { text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.5); }
.sub-nav a { white-space: nowrap; }
@media (max-width: 480px) { .sub-nav { gap: .75rem; } .sub-nav a { font-size: .9rem; } .brand-logo { height: 40px; } }