/* ============================================================================
   site.css — shared stylesheet for bizat.co (Biz Automation landing).
   Linked by every page; each page keeps a thin inline <style> for its own
   page-specific components. Warm editorial system: cream + orange, Fraunces
   serif + JetBrains Mono. Mobile-first + responsive. 1080px content cap.
   Fonts are loaded via a <link> in each page's <head> (not imported here).
   ============================================================================ */

:root{
  /* surfaces */
  --paper:#faf8f4; --card:#fff; --panel:#f1ede4;
  --line:#e8e4dc; --line-soft:#e2dccf;
  /* ink */
  --head:#2c2c2e; --fg:#3a3a3c; --prose:#52525a;
  --muted:#8a8a8f; --grey:#a8a9ad;
  /* brand */
  --orange:#f5a623; --orange-deep:#e0941a;
  --orange-wash:rgba(245,166,35,.12); --orange-line:rgba(245,166,35,.28);
  /* status accents */
  --green:#2e7d32; --blue:#2f6db5;
  /* layout + rhythm */
  --measure:1080px;     /* desktop content cap */
  --read:72ch;          /* readable prose line-length cap */
  --gut:clamp(1.1rem, 4vw, 2rem);   /* responsive side padding */
  --rhythm:clamp(2.5rem, 6vw, 3.75rem);  /* vertical section spacing */
  /* type scale (fluid) */
  --fs-h1:clamp(2.3rem, 6vw, 3.6rem);
  --fs-h2:clamp(1.5rem, 3.5vw, 1.95rem);
  --fs-lede:clamp(1.1rem, 2.2vw, 1.25rem);
  --fs-body:clamp(1rem, 1.6vw, 1.12rem);
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}

/* base */
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Fraunces",Georgia,serif;
  background:var(--paper);
  color:var(--fg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
.mono{font-family:"JetBrains Mono",monospace}

/* ---- layout container -------------------------------------------------------
   .wrap and main both center content at the 1080 cap with responsive gutters.
   Feed pages that want the sticky-footer column add their own body flex inline. */
.wrap,main{max-width:var(--measure);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);width:100%}
main{padding-top:clamp(2rem,6vw,3rem);padding-bottom:clamp(3rem,8vw,4.5rem)}
/* readable prose cap — apply to text blocks inside the wide frame */
.read{max-width:var(--read)}

/* ---- shared headings / lede -------------------------------------------------
   Page heroes may set their own clamp on h1, but these give a consistent base. */
h1{font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--head)}
h2{font-weight:300;letter-spacing:-.01em;line-height:1.15;color:var(--head)}
.lede{font-size:var(--fs-lede);color:var(--prose);max-width:var(--read)}

/* ---- mono labels ------------------------------------------------------------ */
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-deep);font-weight:500;margin-bottom:1.1rem}
.eyebrow.muted{color:var(--muted);letter-spacing:.2em}
.kicker{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:1.25rem}
.crumb{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:1.5rem}
.crumb a{color:var(--orange-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.back{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line);display:inline-block;margin-bottom:2.5rem}
.back:hover{color:var(--orange-deep);border-color:var(--orange)}

/* ---- top nav bar (product family) ------------------------------------------ */
.topbar{max-width:var(--measure);margin:0 auto;padding:1.25rem var(--gut);position:relative;z-index:1}
.topbar a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.topbar img{height:64px;width:auto}

/* ---- site navigation -------------------------------------------------------
   Logo + inline links on desktop; logo + hamburger that opens a dropdown panel
   on mobile. Toggled by the tiny script in nav-toggle (added inline per page).
   Markup:
     <header class="nav"><div class="nav-in">
       <a class="nav-logo" href="/"><img .../></a>
       <button class="nav-btn" aria-label="Menu" aria-expanded="false">…</button>
       <nav class="nav-links">…<a>…</a>…</nav>
     </div></header>                                                            */
.nav{position:relative;z-index:20;border-bottom:1px solid var(--line);background:var(--paper)}
.nav-in{max-width:var(--measure);margin:0 auto;padding:.9rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav-logo img{height:52px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-family:"JetBrains Mono",monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--orange-deep);border-color:var(--orange)}
.nav-links a[aria-current="page"]{color:var(--orange-deep);border-color:var(--orange)}
/* hamburger button — hidden on desktop */
.nav-btn{display:none;flex:0 0 auto;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--head);padding:0}
.nav-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.nav-btn:hover{border-color:var(--orange);color:var(--orange-deep)}

@media (max-width: 640px){
  .nav-btn{display:inline-flex}
  /* dropdown panel: hidden by default, shown when [data-open] is set on .nav */
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.06);
    padding:.25rem var(--gut) .75rem;
    opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .18s,transform .18s,visibility .18s}
  .nav[data-open] .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:.85rem .25rem;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-color:var(--line);color:var(--orange-deep)}
}

/* ---- card primitive --------------------------------------------------------- */
.card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,166,35,.12)}

/* ---- call-to-action button -------------------------------------------------- */
.cta{display:inline-block;background:var(--orange);color:#fff;border:1px solid var(--orange-deep);border-radius:8px;padding:.85rem 2rem;font-family:"JetBrains Mono",monospace;font-size:.9rem;text-decoration:none;transition:background .2s,transform .2s;box-shadow:0 4px 14px rgba(245,166,35,.25)}
.cta:hover{background:var(--orange-deep);transform:translateY(-1px)}
.cta.ghost{background:transparent;color:var(--orange-deep);box-shadow:none;margin-left:.5rem}
.cta.ghost:hover{background:rgba(245,166,35,.1)}

/* ---- inline link styles ----------------------------------------------------- */
a.inline{color:var(--orange-deep);text-decoration:none;border-bottom:1px solid rgba(245,166,35,.4)}
a.inline:hover{border-color:var(--orange)}
.readmore{display:inline-flex;align-items:center;gap:.4rem;font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--orange-deep);text-decoration:none;border-bottom:1px solid rgba(245,166,35,.45);padding-bottom:1px;margin-top:.4rem}
.readmore:hover{border-color:var(--orange)}

/* ---- pull-quote (left orange bar) ------------------------------------------- */
.pull{font-size:clamp(1.25rem,3.2vw,1.5rem);font-weight:300;font-style:italic;color:var(--head);line-height:1.35;border-left:3px solid var(--orange);padding:.2rem 0 .2rem 1.3rem;margin:1.8rem 0}

/* ---- footer (identical site-wide) ------------------------------------------- */
footer{border-top:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted);padding:1.75rem var(--gut);text-align:center;line-height:1.8}
footer a{color:var(--grey)}

/* ---- accessibility: respect reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================================
   Responsive — mobile-first base above; these widen spacing on larger screens.
   Page-specific multi-column grids stack on phones via their own minmax()/media
   rules; the tokens here (--gut, --rhythm) already scale fluidly with clamp().
   ============================================================================ */
@media (max-width: 600px){
  .topbar img{height:54px}
  .back{margin-bottom:1.75rem}
  .cta.ghost{margin-left:0;margin-top:.6rem}
}
