/* ============================================================
   Nestiy — "Nestiy Glow" fairy theme (loaded last on every page)
   Our character Nestiy, a glowing house-roofed fairy, lives in a cosy, magical world:
     dark  = deep twilight navy-to-violet night with fairy lights and stars
     light = soft blue fairy sky with peach sunlight, lavender and coral
   Warm gold and peach glow, Nestiy coral and soft teal accents, small mint highlights,
   frosted-glass cards with a faint glow and bold rounded headings.
   The fairy lights themselves are drawn by assets/js/fx.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;0,800;0,900;1,800&display=swap');

:root{
  --font-head:'Nunito','Inter',system-ui,sans-serif;
  --nf-peach:#FFCB8E; --nf-gold:#FFD9A8; --nf-coral:#F29E94; --nf-coral-deep:#C2504A;
  --nf-teal:#6CC4D8; --nf-lavender:#C8BDF2; --nf-pink:#F2C9E4; --nf-mint:#7EE0B5;
}
h1, h2, h3, h4, .brand span{ font-family:var(--font-head); }
h1, h2{ font-weight:900; letter-spacing:-0.02em; }
h3, h4{ font-weight:800; letter-spacing:-0.01em; }

/* ---------- dark: twilight night ---------- */
html:not([data-theme="light"]){
  --nf-ink-on-glow:#2A1734;
  background-color:#0B1029;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,246,230,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 9%, rgba(255,246,230,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 34%, rgba(220,212,255,0.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 32% 62%, rgba(255,240,214,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 78%, rgba(255,246,230,0.6), transparent 60%),
    radial-gradient(1px 1px at 48% 88%, rgba(220,212,255,0.6), transparent 60%),
    radial-gradient(900px 620px at 88% -6%, rgba(255,190,130,0.20), transparent 62%),
    radial-gradient(1000px 700px at -6% 30%, rgba(160,140,255,0.20), transparent 60%),
    radial-gradient(900px 640px at 60% 112%, rgba(100,190,220,0.16), transparent 60%),
    linear-gradient(170deg, #0B1029 0%, #141A44 42%, #241A4A 78%, #2C1C4E 100%);
  background-size:auto; background-repeat:no-repeat;
  background-attachment:fixed;
}
html:not([data-theme="light"]) body{ color:#ECE9F7; }
html:not([data-theme="light"]) em.accent, html:not([data-theme="light"]) .accent{
  font-family:var(--font-head); font-style:normal; font-weight:900;
  background:linear-gradient(100deg, #FFE2B8 0%, #FFCB8E 30%, #F29E94 62%, #C8BDF2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,203,142,0.25));
}
html:not([data-theme="light"]) .btn-primary{
  background:linear-gradient(135deg, #FFE0B3 0%, #FFCB8E 45%, #F7A98C 100%) !important;
  color:#2A1734 !important; border-color:transparent !important;
  box-shadow:0 10px 30px -10px rgba(255,190,130,0.55), 0 0 0 1px rgba(255,226,190,0.35) inset !important;
}
html:not([data-theme="light"]) .btn-primary:hover{ box-shadow:0 14px 38px -10px rgba(255,190,130,0.75), 0 0 0 1px rgba(255,226,190,0.5) inset !important; }
html:not([data-theme="light"]) .site-header{
  background:rgba(14,18,48,0.62) !important; border-bottom:1px solid rgba(200,189,242,0.14) !important;
}
/* frosted-glass cards with a faint fairy glow on the rim */
html:not([data-theme="light"]) :is(.feature-card, .wp-action-card, .ai-card, .step, .sh-card, .sh-item, .adm-card, .hm-card, .flow-panel, .na-box, .modal){
  box-shadow:0 30px 60px -34px rgba(4,6,24,0.9), 0 0 0 1px rgba(200,189,242,0.10), 0 0 40px -22px rgba(255,203,142,0.35);
}

/* ---------- light: fairy sky ---------- */
html[data-theme="light"]{
  --nf-ink-on-glow:#fff;
  background-color:#EAF2FF;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, rgba(120,150,230,0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 12%, rgba(176,160,236,0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 52%, rgba(120,150,230,0.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 70%, rgba(242,158,148,0.5), transparent 60%),
    radial-gradient(800px 520px at 86% -4%, rgba(255,214,170,0.75), transparent 62%),
    radial-gradient(900px 600px at -8% 24%, rgba(200,189,242,0.55), transparent 60%),
    radial-gradient(1000px 640px at 50% 110%, rgba(255,226,214,0.75), transparent 62%),
    radial-gradient(700px 360px at 30% 40%, rgba(255,255,255,0.65), transparent 70%),
    linear-gradient(180deg, #D9E9FF 0%, #E9EEFF 40%, #F6F0FF 75%, #FFF3EC 100%);
  background-size:auto; background-repeat:no-repeat;
  background-attachment:fixed;
}
html[data-theme="light"] em.accent, html[data-theme="light"] .accent{
  font-family:var(--font-head); font-style:normal; font-weight:900;
  background:linear-gradient(100deg, #E07B6F 0%, #C2504A 40%, #8A63D6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg, #EE8E80 0%, #D6635A 50%, #C2504A 100%) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 12px 28px -12px rgba(194,80,74,0.55) !important;
}
html[data-theme="light"] .site-header{ background:rgba(255,255,255,0.6) !important; border-bottom:1px solid rgba(138,99,214,0.12) !important; }
html[data-theme="light"] :is(.feature-card, .wp-action-card, .ai-card, .step, .sh-card, .sh-item, .adm-card, .hm-card, .flow-panel){
  box-shadow:0 24px 50px -30px rgba(35,40,90,0.28), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
html[data-theme="light"] .section-forest{ background:linear-gradient(135deg, rgba(35,40,90,0.95), rgba(90,70,160,0.9)) !important; }
/* the home page keeps a mint highlight for "saved" / "fits budget" */
html[data-theme="light"] .hm{ --c-mint:#1E9E78; --c-lime:#C2504A; }
/* success states stay mint (a calm "all good"), not coral */
html[data-theme="light"] :is(.sh-status.within, .sh-seen){ color:#1E8A6A; }
html:not([data-theme="light"]) :is(.sh-status.within){ color:var(--nf-mint); }

/* ---------- Nestiy floating in page heroes ---------- */
@keyframes nfFloat{ 0%, 100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(2deg); } }
@keyframes nfTwinkle{ 0%, 100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }
@keyframes nfAura{ 0%, 100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
.page-hero .container.has-nestiy{ position:relative; }
.nestiy-hero{ position:absolute; right:0; top:50%; width:250px; height:250px; margin-top:-125px; pointer-events:none; z-index:1; }
.nestiy-hero::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,165,0.55), rgba(255,190,140,0.18) 45%, transparent 70%);
  filter:blur(6px); animation:nfAura 5s ease-in-out infinite;
}
.nestiy-hero-img{ position:relative; width:100%; height:100%; animation:nfFloat 6s ease-in-out infinite; filter:drop-shadow(0 18px 24px rgba(20,16,60,0.25)); }
.nf-spark{ position:absolute; width:16px; height:16px; z-index:2; animation:nfTwinkle 3.2s ease-in-out infinite; }
.nf-spark::before{
  content:""; position:absolute; inset:0; background:#FFE6B8;
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter:drop-shadow(0 0 6px rgba(255,214,160,0.9));
}
.nf-spark.s1{ left:6%; top:16%; animation-delay:.2s; }
.nf-spark.s2{ right:6%; top:8%; width:11px; height:11px; animation-delay:1.3s; }
.nf-spark.s3{ right:14%; bottom:14%; width:13px; height:13px; animation-delay:2.1s; }
html[data-theme="light"] .nf-spark::before{ background:#F7A64F; filter:drop-shadow(0 0 4px rgba(247,166,79,0.6)); }
@media (min-width: 981px){
  .page-hero .container.has-nestiy > h1, .page-hero .container.has-nestiy > .lede{ max-width:min(640px, calc(100% - 290px)); }
}
@media (max-width: 980px){
  .nestiy-hero{ position:relative; top:auto; right:auto; margin:6px 0 -10px auto; width:150px; height:150px; float:none; }
  .page-hero .container.has-nestiy{ display:flex; flex-direction:column; }
  .page-hero .container.has-nestiy > .nestiy-hero{ order:-1; align-self:flex-end; margin:-6px 0 -40px; }
}
@media (prefers-reduced-motion: reduce){ .nestiy-hero-img, .nf-spark, .nestiy-hero::before{ animation:none !important; } .nf-spark{ opacity:.8; } }

/* ---------- Nestiy beside the home orbit (the official logo stays in the centre) ---------- */
.hm-nestiy{ position:absolute; right:-7%; bottom:-11%; width:180px; height:180px; z-index:3; pointer-events:none; }
.hm-nestiy::before{
  content:""; position:absolute; inset:12%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,165,0.5), rgba(255,190,140,0.15) 48%, transparent 70%);
  filter:blur(6px); animation:nfAura 5s ease-in-out infinite;
}
.hm-nestiy img{ position:relative; width:100%; height:100%; animation:nfFloat 6s ease-in-out infinite; filter:drop-shadow(0 16px 22px rgba(10,10,40,0.3)); }
@media (max-width: 980px){ .hm-nestiy{ right:2%; bottom:-2%; width:150px; height:150px; } }
@media (max-width: 560px){ .hm-nestiy{ right:0; bottom:2%; width:118px; height:118px; } }
.hm-bubble{
  position:absolute; right:68%; top:4%; white-space:nowrap; padding:8px 14px; border-radius:16px 16px 4px 16px;
  font:800 0.86rem/1.2 var(--font-head); color:#2A1734; background:linear-gradient(135deg, #FFF3E0, #FFE0C4);
  box-shadow:0 10px 24px -10px rgba(40,20,60,0.45); animation:nfFloat 6s ease-in-out infinite reverse;
}
html[data-theme="light"] .hm-bubble{ background:#fff; color:#23285A; box-shadow:0 10px 24px -12px rgba(35,40,90,0.35); }
@media (max-width: 560px){ .hm-bubble{ right:62%; top:-6%; font-size:0.74rem; padding:6px 10px; } }

/* ---------- Nestiy in the footer ---------- */
.nestiy-footer{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:0.84rem; opacity:.92; }
.nestiy-footer img{ width:58px; height:58px; flex:0 0 auto; animation:nfFloat 7s ease-in-out infinite; }

/* ---------- Nestiy in states (sign-in, loading, empty, error) ---------- */
.nestiy-state{ display:block; margin:0 auto 8px; width:120px; height:120px; animation:nfFloat 6s ease-in-out infinite; }
.nestiy-state.sm{ width:84px; height:84px; }
.sh-progress .nestiy-state + .sh-spinner{ display:none; }
.sh-progress .nestiy-state{ width:140px; height:140px; }
.nestiy-err{ float:left; width:44px; height:44px; margin:-6px 10px -6px -4px; }
.sh-error.show::after{ content:""; display:block; clear:both; }
.sh-empty .nestiy-state{ margin-bottom:4px; }
.sh-empty{ text-align:center; }