/* Cinzel, self-hosted (SIL Open Font License, fonts/Cinzel-LICENSE.txt): one variable file
   per subset covers weights 400-900. layout-head.php preloads the Latin file. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/Cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/Cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'RunyTunes';
  src: url('/fonts/RunyTunesRevisitedNF.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
/* Colour tokens. Every colour on the public pages comes from here.
   A colour used with transparency has an "-rgb" twin ("r,g,b") so pages can write
   rgba(var(--gold-rgb),.3); a theme that changes a colour changes both. */
:root{
  /* core palette */
  --midnight:#0B1220;      --midnight-rgb:11,18,32;
  --midnight-2:#101A2E;    --midnight-2-rgb:16,26,46;
  --frost:#B8D4E3;         --frost-rgb:184,212,227;
  --bone:#E8E2D4;          --bone-rgb:232,226,212;
  --rune-red:#8B2E2E;      --rune-red-rgb:139,46,46;
  --aurora:#4A9B7F;        --aurora-rgb:74,155,127;
  --gold:#C9A961;          --gold-rgb:201,169,97;
  --line:rgba(var(--frost-rgb),0.18);

  /* gold shades: highlights, the gilded title gradient (light > mid > dark), hero glow */
  --gold-light:#E8C97A;    --gold-light-rgb:232,201,122;
  --gold-mid:#C9A040;
  --gold-dark:#8B6211;
  --gold-glow-rgb:180,130,40;
  --sheen-rgb:255,244,214;          /* hero title shine sweep */
  --bone-dim:#D4C9B0;               /* hero tagline */
  --white:#FFFFFF;         --white-rgb:255,255,255;
  --shadow-rgb:0,0,0;               /* box/text/drop shadows, darkening overlays */

  /* states */
  --aurora-soft-rgb:127,176,166;    /* "upright" badge border */
  --red-soft:#D98A8A;      --red-soft-rgb:217,138,138;   /* "reversed" badge, retrograde mark */
  --error:#E08C8C;                  /* form and comment errors */

  /* overlays */
  --backdrop-rgb:6,10,20;           /* behind dialogs and lightboxes */
  --nav-menu-rgb:13,20,36;          /* open navbar dropdown */
  --vignette-rgb:4,8,18;            /* runes table */

  /* card face without artwork */
  --cardface-hi:#16233D;
  --cardface-lo:#0D1628;

  /* rune stones: drawn glyph face; home page rune of the day (back and front) */
  --stone-face:#1D2129;
  --stone-glyph:#ECE4D0;
  --stone-back-hi:#4A4F57;  --stone-back-mid:#2A2E35;  --stone-back-lo:#1B1E23;
  --stone-front-hi:#5A5F68; --stone-front-mid:#33373F; --stone-front-lo:#202329;

  /* Zodiac Wheel */
  --zw-sky-1:#16274A;      --zw-sky-2:#0F1B33;      --zw-sky-3:#0B1426;
  --zw-sun-disc:#0E1930;
  --sc-moon-lit:#E8E2D4;   --sc-moon-dark:#1B2438;   --sc-moon-rim:#8A7646;   /* Sky Calendar: Moon picture */
  --zw-sun-light:#F3DC9C;  --zw-sun-dark:#C9A24C;
  --zw-planet:#F3E3B5;
  --zw-retro:#E8A3A3;
  --zw-asp-flow:#6FCBA9;   --zw-asp-tense:#E8837B;   /* natal aspect lines: trine and sextile / square and opposition */

  /* Daily Horoscope: a blue glass reading panel over the planet picture */
  --hs-panel-1:#102C4D;    --hs-panel-1-rgb:16,44,77;
  --hs-panel-2:#07162B;    --hs-panel-2-rgb:7,22,43;
  --hs-edge:#8DBBE6;       --hs-edge-rgb:141,187,230;
  --hs-head-1:#1B4C7E;     --hs-head-2:#0A2140;

  /* runes cloth */
  --rw-cloth-1:#1A2744;    --rw-cloth-2:#111B33;    --rw-cloth-3:#0B1325;
  --rw-cloth-base:#0C1528;


  /* home page starfield (canvas: read as "r,g,b" by index.php) */
  --star-rgb:200,222,235;
  --meteor-rgb:255,240,210;

  /* placeholder avatars (with --aurora) */
  --avatar-brown:#8B6B4A;  --avatar-blue:#4A6B9B;   --avatar-plum:#9B4A7F;   --avatar-moss:#7F9B4A;

  /* Font tokens. Cinzel and RunyTunes are self-hosted (@font-face above); a theme that
     brings its own fonts adds @font-face rules in its file. --font-display-alt differs
     from --font-display only in its fallback. Stacks that only exist to find
     astrology/runic symbol glyphs stay written out where they're used. */
  --font-heading:'Cinzel',Georgia,serif;
  --font-heading-alt:var(--font-heading);   /* older parts of the site; same as --font-heading now that Cinzel loads */
  --font-body:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --font-display:'RunyTunes',Georgia,serif;          /* hero title, decorative captions */
  --font-display-alt:'RunyTunes','Cinzel',Georgia,serif;
  --font-rune:'Segoe UI Symbol','Noto Sans Runic',serif;   /* runic glyphs */
  --font-emoji:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;   /* the forum editor's emoji panel */
  --font-ui:'Inter','Segoe UI',system-ui,sans-serif;  /* navbar dropdown descriptions */
  --font-serif:Georgia,'Times New Roman',Times,serif;   /* plain system serif (the TV test-screen words on the Tangle of Wyrd) */

  /* The panel beside every reading board (and My Account's reading view). */
  --panel-bg:linear-gradient(160deg, rgba(var(--midnight-2-rgb),.94), rgba(var(--midnight-rgb),.94));
  --panel-border:1px solid var(--line);
  --panel-radius:12px;

  /* Boxes. Content cards (home, blog, pricing, About, My Account, forum, recorded reading)
     come in three corner sizes; a theme can set all three the same. */
  --card-bg:var(--midnight-2);
  --card-border:1px solid var(--line);
  --card-radius:8px;
  --card-radius-lg:10px;      /* pricing plans, About */
  --card-radius-sm:6px;       /* forum */
  /* the sign-in / notice popup */
  --dialog-bg:var(--midnight-2);
  --dialog-border:1px solid var(--line);
  --dialog-radius:8px;
  --dialog-shadow:0 20px 60px rgba(var(--shadow-rgb),0.5);
  /* big popups: zoomed card, chart dialog, About lightbox; and the dim layer behind them */
  --popup-radius:12px;
  --popup-shadow:0 24px 70px rgba(var(--shadow-rgb),.6);
  --backdrop:rgba(var(--backdrop-rgb),.72);
  /* navbar dropdown menus */
  --menu-bg:rgba(var(--nav-menu-rgb),0.97);
  --menu-border:1px solid rgba(var(--gold-rgb),0.22);
  --menu-radius:6px;
  --menu-shadow:0 12px 40px rgba(var(--shadow-rgb),0.55);

  /* Buttons. Filled (gold) buttons: sign in, save, send, post, cast. Outline buttons
     draw their border and text from --gold; they share the corner sizes below. */
  --btn-bg:var(--gold);
  --btn-text:var(--midnight);
  --btn-hover-bg:var(--gold-light);
  --btn-radius:4px;
  --btn-radius-sm:3px;        /* navbar, forum, comments, rune of the day */
  /* Form fields */
  --field-bg:rgba(var(--frost-rgb),0.05);
  --field-border:1px solid var(--line);
  --field-text:var(--bone);
  --field-radius:4px;
  --field-radius-lg:6px;      /* textareas */
  --field-focus:var(--gold);                  /* border colour while typing */
  --field-focus-soft:rgba(var(--gold-rgb),0.5);
  --focus-ring:2px solid var(--gold);         /* keyboard focus outline */

  /* Text size: every fixed font size is calc(<size> * var(--text-scale)), so 1.1 makes all
     text 10% larger. Text drawn inside SVG (wheel, runes cloth), on card faces and on
     rune stones keeps its size, so the drawings don't break. */
  --text-scale:1;

  /* Card back image (card pulls, Celtic Cross). A CSS string, read by card-render.js. */
  --card-back-url:"/card_back.png?v=2";
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--midnight);
  color:var(--bone);
  font-family:var(--font-body);
  overflow-x:hidden;
  min-height:100%;
}
html{ height:100%; }
body{ min-height:100vh; }
/* Links with no colour of their own: never the browser's blue/purple. They follow --gold of the section they are in
   (themes redefine it for light and dark bands, so contrast holds); visited looks the same; hover goes to the text colour.
   A theme or page can set --link / --link-hover instead. :where() gives these rules no weight, so any rule that already
   colours a link (a class, a theme) still wins, :visited and :hover included. */
:where(a, a:visited){ color:var(--link, var(--gold)); text-decoration-color:rgba(var(--gold-rgb),.55); text-underline-offset:2px; }
:where(a:hover){ color:var(--link-hover, var(--bone)); }
body{
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--aurora-rgb),0.13), transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 100%, rgba(var(--rune-red-rgb),0.09), transparent 60%),
    radial-gradient(ellipse 70% 45% at 15% 30%, rgba(var(--aurora-rgb),0.07), transparent 55%);
  background-size:140% 140%, 150% 150%, 160% 160%;
  background-position:50% 0%, 80% 100%, 15% 30%;
  animation:driftGlow 36s ease-in-out infinite;
}
@keyframes driftGlow{
  0%{ background-position:50% 0%, 80% 100%, 15% 30%; }
  33%{ background-position:60% 8%, 70% 92%, 25% 40%; }
  66%{ background-position:40% 4%, 88% 96%, 10% 22%; }
  100%{ background-position:50% 0%, 80% 100%, 15% 30%; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
}
.runic{
  font-family:var(--font-heading);
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* header */
header{
  position:relative; z-index:2;
  text-align:center;
  padding:64px 24px 20px;
}

h1{
  font-size:clamp(34px,6vw,58px);
  font-weight:400;
  font-family:var(--font-heading);
  letter-spacing:0.04em;
  color:var(--bone);
  text-shadow:0 0 30px rgba(var(--frost-rgb),0.15);
}

/* sections */
section{position:relative; z-index:2; max-width:980px; margin:0 auto; padding:0 24px;}

/* the well / circle */
.well{
  position:relative;
  width:min(560px, 90vw);
  height:min(560px, 90vw);
}
.well svg{width:100%; height:100%;}

@keyframes spin{ to{ transform:rotate(360deg); } }

.draw-btn{
  position:relative;
  top:auto; left:auto;
  transform:none;
  width:auto; height:auto;
  border-radius:var(--btn-radius);
  border:1px solid var(--gold);
  background:rgba(var(--gold-rgb),0.08);
  color:var(--gold);
  font-family:var(--font-heading-alt);
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:calc(0.75rem * var(--text-scale));
  padding:13px 36px;
  cursor:pointer;
  transition:background 0.2s, box-shadow 0.2s;
  z-index:5;
  display:inline-block;
}
.draw-btn:hover{
  background:rgba(var(--gold-rgb),0.16);
  box-shadow:0 0 20px rgba(var(--gold-rgb),0.15);
}
.draw-btn:disabled{ opacity:0.3; cursor:default; }

/* readings */
.readings{
  max-width:680px;
  margin:0 auto;
  text-align: left;
}

@media (max-width: 600px) {
.readings{
  max-width:680px;
  text-align: left;
  padding: 16px 16px 10px;
}
}

.rb-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.rb-keywords .kw{
  font-size:calc(0.6875rem * var(--text-scale));
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),0.35);
  border-radius:20px;
  padding:4px 11px;
  opacity:0.85;
}

footer{
  text-align:center;
  padding:30px 24px 50px;
  font-size:calc(0.75rem * var(--text-scale));
  color:var(--frost);
  opacity:0.35;
  letter-spacing:0.05em;
}
.site-footer{ position:relative; z-index:2; max-width:980px; margin:0 auto; line-height:1.6; }
.site-footer p{ margin:0; }
.site-footer-note{ font-style:italic; }   /* one line on desktop: the footer is 980px wide (was 640px) */
.site-footer .site-footer-copy{ margin-top:6px; }
.site-footer-links{ margin-top:8px; font-style:normal; }
.site-footer-links a{ color:var(--gold); text-decoration:none; }
.site-footer-links a:hover, .site-footer-links a:focus-visible{ text-decoration:underline; }

/* ---- celtic cross ---- */

/* board — absolute positioned canvas */
.celtic-board{
  position:relative;
  width:818px;
  height:519px;
  margin:0 auto;
  flex-shrink:0;
}

@media (max-width:980px){
  .celtic-board{
    transform:scale(0.72);
    transform-origin:top center;
    margin-bottom:-145px;
  }
}

/* Portrait phones — scale Celtic Cross board to fit and center it */
@media (max-width: 600px) and (orientation: portrait) {
  .celtic-board {
    /* scale(0.42): 818px → ~344px visual width, 519px → ~218px visual height */
    transform: scale(0.42);
    transform-origin: top left;
    margin-bottom: -300px;
    /* Center: shift right by (50vw - half the visual width)
       visual width = 818 * 0.42 = 344px, half = 172px */
    position: relative;
    left: calc(50vw - 197px);
  }
}

/* ---------------------------------------------------------- */
/* MODALS (sign-in, notices)                                   */
/* ---------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(var(--midnight-rgb),0.78);
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  width:100%; max-width:380px;
  background:var(--dialog-bg);
  border:var(--dialog-border);
  border-radius:var(--dialog-radius);
  padding:32px 28px;
  position:relative;
  box-shadow:var(--dialog-shadow);
}
.modal-close{
  position:absolute; top:14px; right:14px;
  background:none; border:none;
  color:var(--frost); opacity:0.6;
  font-size:calc(1.25rem * var(--text-scale)); line-height:1; cursor:pointer;
  padding:4px;
}
.modal-close:hover{ opacity:1; }
.modal-title{
  font-family:var(--font-heading-alt);
  font-size:calc(1.25rem * var(--text-scale));
  letter-spacing:0.04em;
  color:var(--gold);
  text-align:center;
  margin-bottom:6px;
}
.modal-subtitle{
  font-size:calc(0.8125rem * var(--text-scale));
  color:var(--frost);
  opacity:0.7;
  text-align:center;
  margin-bottom:24px;
}
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form label{
  font-size:calc(0.75rem * var(--text-scale));
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--frost);
  opacity:0.75;
  margin-bottom:5px;
  display:block;
}
.auth-form input{
  width:100%;
  background:var(--field-bg);
  border:var(--field-border);
  border-radius:var(--field-radius);
  padding:10px 12px;
  color:var(--field-text);
  font-family:var(--font-body);
  font-size:calc(0.875rem * var(--text-scale));
}
.auth-form input:focus{ outline:none; border-color:var(--field-focus); }
.auth-form .auth-remember{ display:flex; align-items:center; gap:8px; margin:0; opacity:1; text-transform:none; letter-spacing:0; font-size:calc(0.8125rem * var(--text-scale)); cursor:pointer; }
.auth-form .auth-remember input{ width:auto; margin:0; accent-color:var(--gold); }
.auth-form .auth-agree{ align-items:flex-start; line-height:1.45; font-size:calc(0.78125rem * var(--text-scale)); }
.auth-form .auth-agree input{ flex:none; margin-top:3px; }
.auth-form .auth-agree a, .auth-legal a{ color:var(--gold); }
.auth-legal{ margin:10px 0 0; font-size:calc(0.71875rem * var(--text-scale)); line-height:1.5; opacity:.8; text-align:center; }
/* Show/hide eye on password fields (password-toggle.js) */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input.pw-input{ padding-right:44px; }
.pw-wrap .pw-eye{
  position:absolute; top:0; right:0; bottom:0; width:42px; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; box-shadow:none; border-radius:0 var(--field-radius) var(--field-radius) 0;
  color:var(--frost); opacity:.7; cursor:pointer;
}
.pw-wrap .pw-eye:hover, .pw-wrap .pw-eye:focus-visible{ opacity:1; color:var(--gold); }
.pw-wrap .pw-eye:focus-visible{ outline:var(--focus-ring); outline-offset:-2px; }
.auth-submit{
  margin-top:6px;
  background:var(--btn-bg);
  border:none;
  color:var(--btn-text);
  font-family:var(--font-heading-alt);
  font-size:calc(0.8125rem * var(--text-scale));
  letter-spacing:0.08em;
  padding:11px;
  border-radius:var(--btn-radius);
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.auth-submit:hover{ opacity:0.88; }
.auth-submit:disabled{ opacity:0.5; cursor:default; }

/* Rune Credit purchase dialog (creditQuoteBlock() in tarot-core.js): the price, then balance now / this reading / left */
.cr-quote{ margin:-8px 0 22px; text-align:left; }
.cr-quote-price{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--card-radius, 10px);
  background:rgba(var(--gold-rgb),.12); border:1px solid rgba(var(--gold-rgb),.45); }
.cr-quote-price img{ width:44px; height:44px; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(var(--shadow-rgb),.4)); }
.cr-quote-amount{ font-family:var(--font-heading); font-size:calc(1.75rem * var(--text-scale)); line-height:1.1; color:var(--gold); font-weight:700; }
.cr-quote-amount span{ font-size:calc(0.875rem * var(--text-scale)); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.cr-quote-usd{ font-size:calc(0.78125rem * var(--text-scale)); color:var(--frost); opacity:.75; margin-top:3px; }
.cr-quote-sum{ margin:12px 2px 0; font-size:calc(0.875rem * var(--text-scale)); color:var(--frost); }
.cr-quote-sum div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.cr-quote-sum dt{ margin:0; }
.cr-quote-sum dd{ margin:0; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:6px; }
.cr-quote-sum dd.minus{ color:var(--rune-red); }
.cr-quote-sum .total{ border-top:1px solid rgba(var(--gold-rgb),.35); margin-top:4px; padding-top:9px; font-weight:700; color:var(--bone); }
.cr-quote-sum .total dd{ color:var(--gold); }
.cr-quote-sum .total.short dd{ color:var(--rune-red); }
.notice-coin{ width:18px; height:18px; vertical-align:-4px; margin-left:7px; }
.auth-submit.notice-primary{ font-weight:700; }
/* the notice dialog's buttons fill the width at equal sizes: two share a row, three or more stack
   (the action button is hidden when there is none, so it doesn't count) */
#noticeModalOverlay .modal-box{ text-align:center; }
.notice-actions{ display:flex; gap:10px; }
.notice-actions > *{ flex:1 1 0; min-width:0; margin:0; box-sizing:border-box; text-align:center;
  display:inline-flex !important; align-items:center; justify-content:center; }
.notice-actions > [style*="display: none"], .notice-actions > [style*="display:none"]{ display:none !important; }
.notice-actions:has(> :nth-child(3)){ flex-direction:column; }
#noticeModalOverlay:has(.notice-primary) #noticeModalOkBtn{ background:none; color:var(--gold); border:1px solid rgba(var(--gold-rgb),.6); }
.auth-error{
  color:var(--rune-red);
  font-size:calc(0.8125rem * var(--text-scale));
  text-align:center;
  min-height:18px;
}
.auth-switch{
  text-align:center;
  font-size:calc(0.8125rem * var(--text-scale));
  color:var(--frost);
  opacity:0.75;
  margin-top:18px;
}
.auth-switch a, .auth-link{ color:var(--gold); cursor:pointer; text-decoration:underline; }
/* "Forgot your password?", "Create an account"...: buttons (reachable by keyboard) that look like links */
.auth-link{ background:none; border:0; padding:0; font:inherit; }

/* ---------------------------------------------------------- */
/* INLINE QUESTION FORM (static, in-page replacement for the   */
/* question modal) — reuses the .qmodal/.qmodal-* classes from  */
/* tarot-core.js verbatim; this just centers the box on the     */
/* page now that it isn't inside the overlay's flex centering.  */
/* ---------------------------------------------------------- */
#questionFormSection.qmodal {
  margin: 0 auto 40px;
  transform: none;
}

/* ---------------------------------------------------------- */
/* STARS CANVAS (decorative background)                        */
/* ---------------------------------------------------------- */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------- */
/* QUESTION FORM (.qmodal): markup from tarot-core.js          */
/* ---------------------------------------------------------- */
.qmodal {
  max-width:480px;width:100%;
  background:rgba(var(--midnight-2-rgb),0.97);
  border:1px solid rgba(var(--gold-rgb),0.28);border-radius:8px;
  padding:40px 36px 32px;text-align:center;
  transform:translateY(10px);transition:transform 0.3s ease;
}
.qmodal-eyebrow { font-family:var(--font-heading);font-size:calc(0.625rem * var(--text-scale));letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);opacity:0.55;margin-bottom:16px; }
.qmodal-title { font-family:var(--font-heading);font-size:clamp(18px,3vw,24px);font-weight:400;letter-spacing:0.04em;color:var(--bone);margin-bottom:12px; }
.qmodal-sub { font-size:calc(0.8125rem * var(--text-scale));color:var(--frost);opacity:0.6;line-height:1.7;font-style:italic;margin-bottom:24px; }
.qmodal-input { width:100%;padding:12px 16px;background:rgba(var(--midnight-rgb),0.6);border:1px solid rgba(var(--frost-rgb),0.2);border-radius:var(--field-radius);color:var(--field-text);font-family:var(--font-body);font-size:calc(0.875rem * var(--text-scale));outline:none;margin-bottom:16px;transition:border-color 0.2s;box-sizing:border-box; }
.qmodal-input:focus { border-color:var(--field-focus-soft); }
.qmodal-input::placeholder { color:var(--frost);opacity:0.35;font-style:italic; }
@media(max-width:480px){ .qmodal{padding:28px 20px 24px;} }
  

/* ---------------------------------------------------------- */
/* NAVBAR (navbar.php)                                         */
/* ---------------------------------------------------------- */
/* ══ NAVBAR ══════════════════════════════════════════════════ */
.site-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: rgba(var(--midnight-rgb),0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--frost-rgb),0.10);
}

/* logo */
.nav-logo {
  font-family: var(--font-display-alt);
  font-size: calc(0.9375rem * var(--text-scale));
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.8; }

/* centre links */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: calc(0.71875rem * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frost);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-link:hover { opacity: 1; color: var(--gold); }

.nav-caret {
  font-size: calc(0.5625rem * var(--text-scale));
  opacity: 0.6;
  transition: transform 0.2s;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

/* ── DROPDOWN WRAPPER ─────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-drop-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;   /* the Astrology menu with both groups open is tall */
  background: var(--menu-bg);
  backdrop-filter: blur(16px);
  border: var(--menu-border);
  border-radius: var(--menu-radius);
  padding: 6px 0;
  box-shadow: var(--menu-shadow);
  opacity: 0;
  visibility: hidden;   /* a closed menu is out of the Tab order too, not only invisible */
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-dropdown.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── EACH ROW ─────────────────────────────────────────────── */
.drop-row {
  display: flex;
  align-items: center;          /* icon vertically centered to the whole row */
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--frost-rgb),0.06);
  transition: background 0.15s;
}
.drop-row:last-child { border-bottom: none; }
.nav-drop-menu li:last-child .drop-row { border-bottom: none; }

.drop-row:hover {
  background: rgba(var(--gold-rgb),0.07);
}

/* a group inside a dropdown (Readings: Basic / Premium): a row that opens its own list */
.drop-group-btn { width: 100%; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid rgba(var(--frost-rgb),0.06); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.drop-chev { flex: none; font-size: calc(0.8125rem * var(--text-scale)); color: var(--gold); opacity: 1; transition: transform 0.2s; }
.drop-group.open > .drop-group-btn .drop-chev { transform: rotate(180deg); }
.drop-group-btn .drop-label { color: var(--gold); }
.drop-sub { list-style: none; margin: 0; padding: 0; display: none; background: rgba(var(--gold-rgb),0.04); }
.drop-group.open > .drop-sub { display: block; }
.drop-sub .drop-row { padding-left: 30px; }
.drop-sub li:last-child .drop-row { border-bottom: none; }

/* an item in a dropdown that opens its own menu beside the list (Readings: Basic / Premium) */
.nav-drop-menu--fly { overflow: visible; max-height: none; }   /* the side menu must not be clipped */
.drop-fly { position: relative; }
.drop-fly-btn { width: 100%; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid rgba(var(--frost-rgb),0.06); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.drop-fly-btn .drop-label { color: var(--gold); }
.drop-fly.open > .drop-fly-btn { background: rgba(var(--gold-rgb),0.07); }
.drop-fly-menu {
  list-style: none; margin: 0; padding: 6px 0; display: none;
  position: absolute; top: -6px; left: calc(100% - 2px); min-width: 300px;
  background: var(--menu-bg); backdrop-filter: blur(16px);
  border: var(--menu-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
}
.drop-fly.open > .drop-fly-menu { display: block; }
.drop-fly-menu.flip { left: auto; right: calc(100% - 2px); }
.drop-fly-menu li:last-child .drop-row { border-bottom: none; }

/* text block: name on top, desc below */
.drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.drop-label {
  font-family: var(--font-heading);
  font-size: calc(0.78125rem * var(--text-scale));
  letter-spacing: 0.07em;
  color: var(--bone);
  white-space: nowrap;
  line-height: 1.2;
}

.drop-desc {
  font-family: var(--font-ui);
  font-size: calc(0.6875rem * var(--text-scale));
  color: var(--frost);
  opacity: 0.55;
  white-space: nowrap;
  line-height: 1.3;
}

/* icon: fixed size, never shrinks, vertically centered by flex parent */
.tier-icon {
  width: 51px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ── AUTH BUTTONS ─────────────────────────────────────────── */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-auth-btn {
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb),0.5);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: calc(0.6875rem * var(--text-scale));
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--btn-radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-auth-btn:hover {
  background: rgba(var(--gold-rgb),0.12);
  border-color: var(--gold);
}
.nav-auth-btn--gold {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--gold);
}
.nav-auth-btn--gold:hover {
  background: var(--btn-hover-bg);
  border-color: var(--gold-light);
  color: var(--btn-text);
}
.nav-auth-btn--readings {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb),0.45);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-auth-btn--readings:hover {
  background: rgba(var(--gold-rgb),0.12);
  border-color: var(--gold);
}

/* unread private messages (navbar.php): a count beside the name and on Messages in the account menu */
.nav-msg-badge {
  position: absolute; top: -7px; right: -8px; min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--rune-red); color: var(--white); font-family: var(--font-ui); font-size: calc(0.625rem * var(--text-scale));
  font-weight: 700; letter-spacing: 0; line-height: 1.5; text-align: center;
}
.nav-msg-badge--inline { position: static; display: inline-block; margin-left: 8px; vertical-align: 1px; }
.nav-msg-badge[hidden] { display: none; }
/* signed in, just above the drawer (1240px) the word "Welcome," gives way and the links close up a little; the name stays (it opens the account menu) */
@media (min-width: 77.5625em) and (max-width: 82.5em) {
  .nav-welcome { display: none; }
  .site-nav:has(.nav-user) .nav-links { padding: 0 12px; }
  .site-nav:has(.nav-user) .nav-links .nav-link { padding-left: 10px; padding-right: 10px; }
}

/* the account menu (navbar.php #userDropdown): the name is its button; My Profile, My Journal, Messages, Sign Out */
.nav-user { display: flex; align-items: center; }
.nav-user-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--gold); }
.nav-user-btn:hover .nav-caret, .nav-user.open .nav-caret { opacity: 1; }
.nav-user-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-msg-badge--name { position: static; margin-left: 2px; }
.nav-user .nav-user-menu { left: auto; right: 0; min-width: 210px; transform: translateY(-6px); }
.nav-user.open .nav-user-menu { transform: translateY(0); }
.nav-user-menu .drop-row { justify-content: space-between; }
.nav-user-signout { width: 100%; box-sizing: border-box; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }

.nav-greeting {
  font-size: calc(0.8125rem * var(--text-scale));
  color: var(--frost);
}
.nav-greeting .name { color: var(--gold); }
.nav-greeting a.name { text-decoration: none; }
.nav-greeting a.name:hover, .nav-greeting a.name:focus-visible { text-decoration: underline; }
/* the Rune Credit balance after the name (navbar.php): coin icon + amount, a link to the wallet */
.nav-credits { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: -4px;
  color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-credits img { width: 18px; height: 18px; display: block; }
.nav-credits:hover span, .nav-credits:focus-visible span { text-decoration: underline; }

/* ── BURGER BUTTON ────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--frost);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE ───────────────────────────────────────────────── */
/* The full bar needs about 1240px (nine links and the sign-in buttons); below that the menu button takes over. */
/* The navbar breakpoints are in em (1240px = 77.5em at the usual 16px), so they follow the visitor's browser text
   size: with larger text the menu button takes over sooner instead of the sign-in buttons being pushed off the edge. */
@media (max-width: 77.5em) {
  .nav-links { display: none; }
  .nav-auth  { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 768px) {
  .nav-logo  { font-size: calc(0.8125rem * var(--text-scale)); }
}

/* ── MOBILE DRAWER ────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 56px; right: 0;
  width: min(300px, 85vw);
  height: calc(100vh - 56px);
  background: rgba(var(--midnight-rgb),0.97);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(var(--gold-rgb),0.15);
  z-index: 9;
  overflow-y: auto;
  padding: 12px 0 32px;
  transform: translateX(100%);
  visibility: hidden;   /* closed, its links are out of the Tab order and hidden from screen readers */
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.28s;
}
.nav-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s; }

.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(var(--shadow-rgb),0.45);
  z-index: 8;
}
.nav-drawer-overlay.open { display: block; }

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  font-family: var(--font-heading);
  font-size: calc(0.78125rem * var(--text-scale));
  letter-spacing: 0.07em;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--frost-rgb),0.06);
  transition: background 0.15s;
}
.drawer-link:hover { background: rgba(var(--gold-rgb),0.07); }
.drawer-indent { padding-left: 32px; font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); }

.drawer-section-label {
  padding: 16px 22px 6px;
  font-family: var(--font-heading);
  font-size: calc(0.625rem * var(--text-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
}

.drawer-tier {
  font-size: calc(0.625rem * var(--text-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  font-family: var(--font-body);
}

.drawer-auth {
  padding: 20px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Theme preview bar (layout-foot.php): only shown while previewing a theme from /themes/. */
.theme-preview-bar{
  position:fixed; left:12px; right:12px; bottom:12px; margin:0 auto; width:max-content; z-index:40;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:calc(100vw - 24px); padding:8px 14px;
  background:rgba(var(--midnight-2-rgb),.96); border:1px solid rgba(var(--gold-rgb),.45); border-radius:14px;
  box-shadow:0 8px 24px rgba(var(--shadow-rgb),.5);
  font-family:var(--font-body); font-size:calc(0.8125rem * var(--text-scale)); color:var(--bone);
}
.theme-preview-bar label{ color:var(--frost); }
.theme-preview-bar select{
  background:var(--midnight); color:var(--bone); border:1px solid var(--line); border-radius:6px;
  padding:4px 8px; font:inherit; min-height:32px;
}
.theme-preview-bar a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:480px){ .theme-preview-bar label{ display:none; } }

/* Choices from the admin's rich text editor (Pages tab): the site's own fonts, three sizes and alignment, as classes so a theme can restyle them. */
.ft-heading { font-family: var(--font-heading); }
.ft-body    { font-family: var(--font-body); }
.ft-display { font-family: var(--font-display); }
.ft-rune    { font-family: var(--font-rune); }
.fs-sm { font-size: .85em; }
.fs-lg { font-size: 1.25em; }
.fs-xl { font-size: 1.55em; }
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

/* ---------------------------------------------------------- */
/* ACCESSIBILITY (shared)                                      */
/* ---------------------------------------------------------- */
/* "Skip to content": the first thing a keyboard reaches; off screen until focused */
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100;
  padding:10px 16px; border-radius:var(--btn-radius);
  background:var(--btn-bg); color:var(--btn-text) !important;
  font-family:var(--font-ui); font-size:calc(0.875rem * var(--text-scale)); font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:12px; outline:var(--focus-ring); outline-offset:2px; }
/* Fields everywhere: many set outline:none and only tint the border, too faint to see where the cursor is. A ring
   in the field's own text colour reads on dark and on cream alike. */
:is(input, textarea, select, [contenteditable="true"]):focus-visible{ outline:2px solid currentColor !important; outline-offset:2px; }
/* text for screen readers only */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Dialog titles take the focus when the box opens (no field to start in): no ring for that */
.modal-title:focus{ outline:none; }

/* ---------------------------------------------------------- */
/* COOKIE NOTICE (layout-foot.php)                             */
/* ---------------------------------------------------------- */
/* Bottom right, clear of the page-edit bar (bottom left) and the theme preview bar (bottom centre) */
.cookie-notice{
  position:fixed; right:18px; bottom:18px; z-index:1800;
  display:flex; align-items:center; gap:16px;
  max-width:min(560px, calc(100vw - 36px)); padding:14px 16px 14px 18px;
  background:var(--dialog-bg); border:var(--dialog-border); border-radius:var(--dialog-radius); box-shadow:var(--dialog-shadow);
  font-family:var(--font-body); font-size:calc(0.875rem * var(--text-scale)); line-height:1.5; color:var(--bone);
}
.cookie-notice[hidden]{ display:none; }
.cookie-notice-text{ margin:0; }
.cookie-notice-text a{ color:var(--gold); }
.cookie-notice-text a:hover{ color:var(--bone); }
.cookie-notice-btn{
  flex:none; min-height:44px; padding:8px 20px; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-text); border:1px solid transparent; border-radius:var(--btn-radius);
  font-family:var(--font-ui); font-size:calc(0.875rem * var(--text-scale)); font-weight:700;
}
.cookie-notice-btn:hover{ background:var(--btn-hover-bg); }
.cookie-notice-btn:focus-visible{ outline:var(--focus-ring); outline-offset:2px; }
@media (max-width:37.5em){
  .cookie-notice{ left:16px; right:16px; bottom:16px; max-width:none; flex-direction:column; align-items:stretch; gap:10px; }
}