/* ══════════════════════════════════════════════════════════════
   overrides.css — responsive fixes, loaded AFTER styles.css
   • Mobile nav: hamburger + dropdown menu (≤900px)
   • Pricing: stack the 3 cards instead of letting them go thin
   ══════════════════════════════════════════════════════════════ */

/* ── Brand logomark ───────────────────────────────────────────────
   The supplied mark is a white-on-transparent PNG, so it's driven as a
   CSS mask: the shape stays crisp and takes the brand blue, which reads
   in both light and dark themes; the transparent center shows the page
   through, exactly as the mark is drawn. */
.brand-mark{
  flex:none;
  width:1.2em; height:1.2em;
  background-color:var(--blue);
  -webkit-mask:url(assets/clodex-logo.png) center/contain no-repeat;
  mask:url(assets/clodex-logo.png) center/contain no-repeat;
}
/* dark mode: off-white mark reads cleanly on the dark nav */
[data-theme="dark"] .brand-mark{ background-color:#eef1f7; }

/* ── Hamburger button ─────────────────────────────────────────── */
.nav-burger{
  display:none; flex:none; position:relative;
  width:38px; height:38px; margin-left:2px;
  border:0; background:0 0; border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center;
  color:var(--ink); transition:background .2s;
}
.nav-burger:hover{background:rgba(40,60,100,.08)}
.nav-burger span{
  position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .28s var(--ease),opacity .2s;
}
.nav-burger span:first-child{transform:translateY(-4px)}
.nav-burger span:last-child{transform:translateY(4px)}
.nav.menu-open .nav-burger span:first-child{transform:rotate(45deg)}
.nav.menu-open .nav-burger span:last-child{transform:rotate(-45deg)}

/* ── Dropdown menu panel ──────────────────────────────────────── */
.nav-menu{
  position:absolute; top:calc(100% + 4px); left:12px; right:12px; z-index:99;
  display:flex; flex-direction:column; gap:2px;
  padding:10px; border-radius:16px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(24,32,63,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.nav-menu.open{opacity:1; transform:none; visibility:visible; pointer-events:auto}
.nav-menu a:not(.btn){
  display:block; font-family:var(--disp); font-weight:600; font-size:1rem;
  color:var(--ink); text-decoration:none;
  padding:.72em .8em; border-radius:11px;
  transition:background .15s,color .15s;
}
.nav-menu a:not(.btn):hover{background:rgba(40,60,100,.06); color:var(--ink)}
.nav-menu-ctas{
  display:flex; flex-direction:column; gap:9px;
  margin-top:8px; padding-top:11px; border-top:1px solid var(--line);
}

/* dark theme */
[data-theme="dark"] .nav-menu{
  background:rgba(18,19,24,.92); border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 48px rgba(0,0,0,.55);
}
[data-theme="dark"] .nav-menu a:not(.btn):hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .nav-menu-ctas{border-top-color:rgba(255,255,255,.1)}

/* show the burger / hide inline nav download buttons on mobile */
@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-cta>.btn-os{display:none}
  /* nav-links (the flex:1 spacer) is hidden ≤900px — pin controls right */
  .nav-cta{margin-left:auto}
  .nav.menu-open{
    background:rgba(255,255,255,.85); border-bottom-color:var(--line);
    -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  }
  [data-theme="dark"] .nav.menu-open{background:rgba(14,15,18,.9)}
}
/* the menu is a mobile-only affordance */
@media (min-width:901px){ .nav-menu{display:none} }

/* ── Nav: pill locked to page center, side groups mirror it ──────
   Three columns with equal 1fr sides pin the middle (auto) column
   onto the true page center, so the Features/Pricing/FAQ pill is
   exactly centered. The brand and CTA groups then CENTER themselves
   within their own half, so they sit symmetrically around the pill
   instead of hugging the outer edges. */
@media (min-width:901px){
  .nav-in{ display:grid; grid-template-columns:1fr auto 1fr; }
  .nav-in .brand{ justify-self:center; }
  .nav-in .nav-cta{ justify-self:center; }
}

/* ── Pricing: stack the cards instead of squeezing 3-up ───────── */
@media (max-width:900px){
  .price-grid{
    grid-template-columns:1fr;
    max-width:440px;
    margin-left:auto; margin-right:auto;
  }
  /* the Pro card's vertical "pop-out" only makes sense in a row;
     zero it out so stacked cards don't overlap */
  .pcard-pro{margin-top:0; margin-bottom:0}
}

/* ── Theme toggle: animated moon ⇄ sun swap ──────────────────────
   Both icons are stacked in the button; we crossfade + spin between
   them on theme change. Light = moon shown, Dark = sun shown.
   (Overrides styles.css `.ic-sun{display:none}` which had pinned the
   sun hidden in every theme.) */
[data-theme="dark"]{ color-scheme:dark; }

.theme-btn svg{
  position:absolute; inset:0; margin:auto; display:block;
  transition:opacity .35s var(--ease), transform .5s var(--ease);
  will-change:opacity,transform;
}
/* light mode — moon in, sun spun out */
.theme-btn .ic-moon{ opacity:1; transform:rotate(0) scale(1); }
.theme-btn .ic-sun{ opacity:0; transform:rotate(-90deg) scale(.35); }
/* dark mode — sun in, moon spun out */
[data-theme="dark"] .theme-btn .ic-moon{ opacity:0; transform:rotate(90deg) scale(.35); }
[data-theme="dark"] .theme-btn .ic-sun{ opacity:1; transform:rotate(0) scale(1); }

@media (prefers-reduced-motion:reduce){
  .theme-btn svg{ transition:opacity .12s linear; }
  .theme-btn .ic-moon,.theme-btn .ic-sun,
  [data-theme="dark"] .theme-btn .ic-moon,[data-theme="dark"] .theme-btn .ic-sun{ transform:none; }
}

/* ── Nav auth: subtle "Log In" text link + boxed "Sign Up" ───────── */
.nav-login{
  font-family:var(--disp); font-weight:600; font-size:.9rem; line-height:1;
  color:var(--body-c); text-decoration:none; white-space:nowrap;
  padding:.55em .7em; border-radius:9px;
  transition:color .18s, background .18s;
}
.nav-login:hover{ color:var(--ink); background:rgba(40,60,100,.07); }
[data-theme="dark"] .nav-login:hover{ background:rgba(255,255,255,.08); }

/* Sign Up reuses the skeuomorphic blue .btn-blue (matches the old Windows
   button); .nav-signup just makes it nav-compact and is the hook to drop it
   into the burger menu on mobile. */
.nav-cta .nav-signup{ font-size:.86rem; padding:.55em 1.15em; }

/* Desktop-only: the inline auth links live in the burger menu on mobile */
@media (max-width:900px){
  .nav-login, .nav-cta .nav-signup{ display:none; }
}

/* "Everything you need, built in." heading — dark ink in light, white in dark.
   Note: -webkit-text-fill-color overrides `color`, so BOTH must be set (that's
   why the color picker looked stuck when only `color` changed). */
#page2 .sec-h2 .sec-h2-w{ color:#181b23; -webkit-text-fill-color:#181b23; }
[data-theme="dark"] #page2 .sec-h2 .sec-h2-w{ color:#eef1f7; -webkit-text-fill-color:#eef1f7; }

/* ── Toasts (bottom-right) ─────────────────────────────────────────── */
.toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  width:max-content; max-width:min(360px, calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; border-radius:14px;
  font-family:var(--sans); font-size:.88rem; line-height:1.4; font-weight:500;
  color:#f2f3f5; background:#1b1e25;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.3);
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .34s var(--ease), opacity .34s var(--ease);
  pointer-events:auto; cursor:pointer;
}
.toast.is-in{ transform:none; opacity:1; }
.toast-ic{ flex:none; width:18px; height:18px; margin-top:1px; color:#8aa0ff; }
.toast-msg{ flex:1; }
.toast.is-error{ background:#241417; border-color:rgba(255,120,120,.26); }
.toast.is-error .toast-ic{ color:#ff8f8f; }
@media (prefers-reduced-motion:reduce){ .toast{ transition:opacity .2s ease; transform:none; } }

/* ── "Current Plan" — disabled/greyed pricing CTA ──────────────────── */
.pcard .pcard-cta.is-current-plan{
  background-image:linear-gradient(#505050 0px, #414141 60%, #333333 100%);
  box-shadow:rgba(255,255,255,.68) 0 1px 0 0 inset,
             rgba(110,110,110,.4) 0 0 0 1px inset,
             rgba(85,85,85,.3) 0 -5px 10px 0 inset,
             rgba(28,28,28,.4) 0 2px 3px 0,
             rgba(0,0,0,.42) 0 9px 18px 0,
             rgba(32,32,32,.5) 0 20px 38px -10px;
  color:#e9e9e9; cursor:default;
}