/* ============================================================
   Nestiy — light "glass" theme
   Fresh light green and white, frosted-glass panels, soft green light ribbons drifting
   behind the page (assets/js/fx.js), scroll reveals and a word-by-word hero headline.
   Every rule is scoped to html[data-theme="light"]; the dark theme is theme-glass.css.
   The second half (editors in glass) applies to both themes.
   ============================================================ */

html[data-theme="light"]{
  /* translucent surfaces: every card and panel built on these turns into frosted glass */
  --white:rgba(255,255,255,0.64);
  --mint-50:rgba(240,250,244,0.6);
  --mint-100:rgba(222,244,231,0.75);
  --line:rgba(30,142,90,0.16);
  --glass:rgba(255,255,255,0.58);
  --glass-strong:rgba(255,255,255,0.86);
  --shadow-soft:0 26px 60px -32px rgba(12,58,43,0.38);
  --shadow-tight:0 10px 24px -14px rgba(12,58,43,0.3);
  background-color:#F3FBF6;
  background-image:
    radial-gradient(1100px 680px at 8% -8%, rgba(178,236,200,0.75), transparent 62%),
    radial-gradient(900px 620px at 100% 8%, rgba(214,246,176,0.65), transparent 58%),
    radial-gradient(1000px 700px at 50% 112%, rgba(186,236,214,0.6), transparent 60%),
    radial-gradient(rgba(30,142,90,0.10) 1px, transparent 1.3px);
  background-size:auto, auto, auto, 28px 28px;
  background-attachment:fixed;
}
html[data-theme="light"] body{ background:transparent; }
html[data-theme="light"] #nestiyFx{ display:block; position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }

/* text that used --white as a colour stays solid white */
html[data-theme="light"] .section-forest h2, html[data-theme="light"] .section-forest h3,
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-ghost-invert, html[data-theme="light"] .store-badge,
html[data-theme="light"] .cta-band h2, html[data-theme="light"] .footer-brand .brand span, html[data-theme="light"] .footer-col h4,
html[data-theme="light"] .footer-col a:hover, html[data-theme="light"] .footer-contact-box a.email, html[data-theme="light"] .footer-bottom a:hover,
html[data-theme="light"] .tool-btn.active, html[data-theme="light"] .ai-intro strong, html[data-theme="light"] .ai-step > span,
html[data-theme="light"] .ai-step strong{ color:#fff; }
html[data-theme="light"] .btn-light{ background:#fff; }

/* ---------- sections ---------- */
html[data-theme="light"] .hero, html[data-theme="light"] .page-hero{ background:transparent; }
html[data-theme="light"] .section-mint{ background:linear-gradient(180deg, transparent, rgba(234,248,240,0.55) 18%, rgba(234,248,240,0.55) 82%, transparent); }
html[data-theme="light"] .section-forest{ background:linear-gradient(135deg, rgba(12,58,43,0.94), rgba(20,107,68,0.9)); }

/* ---------- header ---------- */
html[data-theme="light"] .site-header{
  background:rgba(255,255,255,0.58); border-bottom:1px solid rgba(30,142,90,0.12);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
}
html[data-theme="light"] .nav-drop-menu, html[data-theme="light"] .na-menu, html[data-theme="light"] .wp-account-menu,
html[data-theme="light"] .wp-icon-panel, html[data-theme="light"] .wp-cell-pick{
  background:rgba(255,255,255,0.95); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(30,142,90,0.14);
}
@media (max-width: 980px){
  html[data-theme="light"] .main-nav{ background:rgba(255,255,255,0.9) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
}
html[data-theme="light"] .theme-btn, html[data-theme="light"] .na-acct-btn, html[data-theme="light"] .nav-toggle{
  background:rgba(255,255,255,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ---------- glass surfaces ---------- */
html[data-theme="light"] :is(.feature-card, .step, .stat-row, .adm-card, .adm-stat, .wp-action-card, .wp-item-row, .tool-shell,
  .ai-card, .hero-browser, .hero-float-card, .wp-demo-frame, .soon-card, .wp-plan-strip, .floating-tip, .wp-hero-link,
  .wp-dashboard, .wp-topbar, .wp-app, .sh-card, .sh-item, .sh-opt, .sh-day, .sh-chart, .sh-table, .sh-mapcard, .mini-tag){
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(30,142,90,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 50px -32px rgba(12,58,43,0.35);
}
html[data-theme="light"] .stat-cell{ background:rgba(255,255,255,0.7); }
html[data-theme="light"] :is(.feature-card, .wp-action-card, .ai-card, .step){ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
html[data-theme="light"] .fx-glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(30,142,90,0.12), transparent 45%);
}
html[data-theme="light"] .fx-glow:hover::after{ opacity:1; }
html[data-theme="light"] :is(.feature-card, .wp-action-card):hover{
  transform:translateY(-4px); border-color:rgba(30,142,90,0.35);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 30px 60px -30px rgba(30,142,90,0.45);
}

/* ---------- popups ---------- */
html[data-theme="light"] .modal-overlay, html[data-theme="light"] .sh-modal, html[data-theme="light"] .na-modal{
  background:rgba(12,58,43,0.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
html[data-theme="light"] :is(.modal-box, .sh-modal .box, .na-box){
  background:rgba(255,255,255,0.82); border:1px solid rgba(255,255,255,0.9);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 1px 0 #fff inset, 0 50px 110px -40px rgba(12,58,43,0.55);
}
html[data-theme="light"] :is(.na-field input, .modal-field input, .modal-field select, .modal-field textarea){ background:rgba(255,255,255,0.85); }

/* ---------- footer: deep green glass ---------- */
html[data-theme="light"] .site-footer{ background:rgba(12,58,43,0.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ---------- motion ---------- */
html[data-theme="light"] .reveal{ opacity:0; transform:translateY(22px); filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
html[data-theme="light"] .reveal.in{ opacity:1; transform:none; filter:none; }
html[data-theme="light"] :is(.hero, .page-hero) h1 .w{ display:inline-block; opacity:0; transform:translateY(0.35em); filter:blur(8px); animation:lightWordIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes lightWordIn{ to{ opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] .reveal, html[data-theme="light"] :is(.hero, .page-hero) h1 .w{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; transition:none !important; }
}

/* ============================================================
   Editors in glass (both themes): Smart Office notes, designs and meeting minutes,
   and the PDF editor. The white paper stays solid; everything around it is frosted.
   ============================================================ */
:is(.tool-shell, #wpApp .wp-app, .wp-app){ border-radius:var(--radius-lg); }
.tool-canvas-wrap, #wpEditorView .tool-canvas-wrap{
  background:
    radial-gradient(circle at 50% 0%, rgba(196,242,74,0.06), transparent 60%),
    rgba(8,12,10,0.42);
  backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.tool-side, #wpEditorView .tool-side{ background:rgba(12,17,14,0.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.tool-toolbar, .wp-sub-bar, .wp-page-nav, .wp-table-bar{ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }

html[data-theme="light"] .tool-canvas-wrap, html[data-theme="light"] #wpEditorView .tool-canvas-wrap{
  background:
    radial-gradient(circle at 50% 0%, rgba(95,190,139,0.16), transparent 60%),
    rgba(226,244,233,0.45);
}
html[data-theme="light"] .tool-side, html[data-theme="light"] #wpEditorView .tool-side{ background:rgba(255,255,255,0.55); }
html[data-theme="light"] :is(.tool-toolbar, .wp-sub-bar, .wp-page-nav, .wp-table-bar){ background:rgba(240,250,244,0.6); }
html[data-theme="light"] :is(.canvas-stage, .wp-canvas-stage){ box-shadow:0 30px 70px -28px rgba(12,58,43,0.45), 0 0 0 1px rgba(30,142,90,0.10); }
html[data-theme="light"] :is(.tool-btn, .tool-select, .tool-color){ background:rgba(255,255,255,0.75); }
html[data-theme="light"] .tool-btn.active{ background:var(--primary); }

/* Menus that open from the glass header get a solid background: a blur inside the already
   blurred header lets the page show through. */
html[data-theme="light"] .site-header :is(.na-menu, .nav-drop-menu){ background:#FCFEFD; backdrop-filter:none; -webkit-backdrop-filter:none; }