/*
Theme Name: Hush
Theme URI: https://hush.example
Author: Hush.
Author URI: https://hush.example
Description: Editorial landing-page theme. Each landing page lives in /landing-pages/<slug>/ with its own template, stylesheet, fonts, scripts and ai.json. The WordPress editor is bypassed — content is authored in PHP partials. This stylesheet contains ONLY the base layout primitives (wrappers, section spacer, generic off-white header/footer skin). All page-specific styling lives in /landing-pages/<slug>/style.css.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: hush
*/

/* ============================================================
   BASE TOKENS — neutral defaults. Landing pages override.
   ============================================================ */
:root{
  --bg:        #F4F7F6;   /* off-white */
  --bg-warm:   #EDF3F2;   /* off-white, slightly warmer */
  --bg-sub:    #E2ECEB;
  --card:      #FFFFFF;
  --ink:       #0F2225;
  --ink-2:     #3A4F52;
  --ink-3:     #6B7D80;
  --rule:      #D6DEDE;
  --accent:    #1F6F7A;

  /* Generic font fallbacks. Landing pages re-declare these
     with Google Fonts once they load fonts.php. */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  --w-narrow: 740px;
  --w-text:   880px;
  --w-wide:   1220px;
  --w-bleed:  1440px;

  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(60px, 8vw, 110px);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

/* ============================================================
   WRAPPERS — shared across all pages
   ============================================================ */
.wrap-narrow{ max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-text  { max-width: var(--w-text);   margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-wide  { max-width: var(--w-wide);   margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-bleed { max-width: var(--w-bleed);  margin: 0 auto; padding: 0 var(--pad-x); }

/* ============================================================
   SECTION SPACER — consistent vertical rhythm across pages
   ============================================================ */
.sec{ padding: var(--section-y) 0; }

/* ============================================================
   SITE HEADER — off-white, neutral skin.
   Landing-page CSS may override colors/typography.
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo{
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 2px;
}
.logo .dot{ color: var(--accent); }
.nav-pri{
  display: flex; align-items: center; gap: 32px;
  font-size: 14px;
  font-weight: 500;
}
.nav-pri a{ color: var(--ink-2); transition: color .15s ease; }
.nav-pri a:hover{ color: var(--ink); }
.nav-pri .pill{
  background: var(--ink);
  color: var(--bg);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.nav-pri .pill:hover{ background: var(--accent); color:#fff; }

/* ============================================================
   SITE FOOTER — off-white, neutral skin.
   ============================================================ */
.footer{
  background: var(--bg-warm);
  padding: clamp(48px, 6vw, 80px) 0 32px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.footer-brand .logo{ font-size: 32px; margin-bottom: 12px; }
.footer-brand p{ max-width: 36ch; color: var(--ink-3); }
.footer-col h5{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ color: var(--ink-2); }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-3);
}
.footer-bottom .disclosure{ max-width: 65ch; }

/* ============================================================
   BASE RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .nav-pri{ gap: 14px; font-size: 13px; }
  .nav-pri a:not(.pill){ display: none; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
}