/* =========================
   FloLark site stylesheet
   ========================= */

:root{
  --brand:#ff8a3d;

  /* Dark */
  --bg-dark:#0f1c24;
  --surface-1:#12232d;
  --surface-2:#0f1d27;
  --text:#dfe7ee;
  --muted:#93a3af;
  --ring:#264556;

  /* Light */
  --bg-light:#F9F4E4;
  --ink:#0e2530;
  --ink-muted:#5b6872;

  /* Header heights for spacer/fixed header */
  --header-h:132px; /* mobile (wraps to 2 rows) */
}
@media (min-width:920px){
  :root{ --header-h:76px; }
}

/* Theme resolution */
html[data-theme="dark"], html:not([data-theme="light"]) {
  --bg:var(--bg-dark);
  --surface:var(--surface-1);
  --surface-3:var(--surface-2);
  --fg:var(--text);
  --fg-muted:var(--muted);
}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]){
    --bg:var(--bg-light);
    --surface:#fff;
    --surface-3:#f1eee6;
    --fg:var(--ink);
    --fg-muted:var(--ink-muted);
  }
}
html[data-theme="light"]{
  --bg:var(--bg-light);
  --surface:#fff;
  --surface-3:#f1eee6;
  --fg:var(--ink);
  --fg-muted:var(--ink-muted);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  -webkit-text-size-adjust:100%;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Comfy gutters without 100vw overflow */
.container{
  width:min(1100px, 100%);
  margin:0 auto;
  padding:24px 4vw 56px;
}

/* =========================
   Fixed header + spacer
   ========================= */

.header-wrap{
  position:fixed; left:0; right:0; top:0;
  z-index:999;
  background:color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--surface-3);
}

.header-spacer{height:var(--header-h)} /* keeps content from sliding under header */

.site-header{
  width:min(1100px, 100%);
  margin:0 auto;
  display:grid;
  align-items:center;
  gap:12px;
  grid-template-columns:auto 1fr auto;
  padding:14px 4vw;
  min-height:56px;
}

/* Brand + logos */
.brand{display:flex; align-items:center; gap:10px; white-space:nowrap}
.brand img{width:40px;height:40px}
.brand span{font-weight:700; font-size:1.25rem; line-height:1.1}

/* Logo switching */
.dark-logo{display:block}
.light-logo{display:none}
html[data-theme="light"] .light-logo{display:block}
html[data-theme="light"] .dark-logo{display:none}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .light-logo{display:block}
  html:not([data-theme="dark"]) .dark-logo{display:none}
}

/* Section nav — wraps on mobile (no horizontal scroll) */
.primary-nav{
  grid-column:2 / 3;
  display:flex; gap:.5rem; justify-content:flex-start; align-items:center;
  flex-wrap:wrap;
}
.primary-nav a{
  display:inline-block;
  padding:.45rem .75rem;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid transparent;
}
.primary-nav a:hover{background:color-mix(in oklab, var(--surface) 85%, transparent)}
.primary-nav a:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* On small screens the nav occupies its own row */
@media (max-width: 919.98px){
  .primary-nav{
    grid-column:1 / -1;
    order: 2;
    border-top:1px solid var(--surface-3);
    padding:.5rem 0 0;
  }
}

/* Theme icon button */
.actions .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--surface-3);
  background:color-mix(in oklab, var(--surface) 75%, transparent);
}
.icon svg{width:22px;height:22px;display:block;fill:currentColor}
/* which icon to show */
.icon .icon-sun{display:none}
.icon .icon-moon{display:block}
html[data-theme="light"] .icon .icon-sun{display:block}
html[data-theme="light"] .icon .icon-moon{display:none}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .icon .icon-sun{display:block}
  html:not([data-theme="dark"]) .icon .icon-moon{display:none}
}

/* Anchor jumps land below header height */
main.container{ scroll-padding-top: var(--header-h); }

/* =========================
   Hero & Sections
   ========================= */
.hero{padding:40px 0 12px; text-align:center}
.hero h1{font-size:clamp(2rem, 6vw, 3.4rem); line-height:1.15; margin:.4em 0 .3em}
.lead{font-size:clamp(1.05rem, 2.6vw, 1.35rem); color:var(--fg-muted); max-width:60ch; margin:0 auto 1rem}
.cta-row{display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; margin:.75rem 0 0}
.store-badge img{height:56px}
.small.muted{color:var(--fg-muted)}

.section{padding:28px 0}
.grid2{display:grid; gap:18px}
@media (min-width: 820px){ .grid2{grid-template-columns:1.2fr .8fr} }
.card{background:color-mix(in oklab, var(--surface) 92%, transparent); border:1px solid var(--surface-3); border-radius:14px; padding:18px}
.callout{border-color:color-mix(in oklab, var(--brand) 35%, var(--surface-3))}

/* Screenshots grid */
.screenshots{
  display:grid; gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width: 900px){ .screenshots{grid-template-columns:repeat(3, minmax(0,1fr))} }
.screenshots figure{margin:0; background:var(--surface); border:1px solid var(--surface-3); border-radius:18px; padding:12px}

/* Bullets */
ul.bullets{padding-left:1.1rem}
ul.bullets li{margin:.35rem 0}

/* Footer */
.site-footer{
  width:min(1100px, 100%);
  margin:32px auto 0;
  border-top:1px solid var(--surface-3);
  padding:18px 4vw calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer p{margin:0; color:var(--fg-muted)}
.site-footer nav{display:flex; gap:18px; flex-wrap:wrap}
.site-footer a{padding:.35rem 0}
.site-footer a:focus-visible{outline:2px solid var(--ring); outline-offset:3px}