/* CHANGES (2025-10-02, RPW)
   • Hero spacing tightened: top padding reduced from 2rem → 1rem, bottom stays 2rem.
   • Done globally on `.hero`. If later you want homepage-only, we can move it to `.home .hero`.
*/

:root {
  --bg: #ffffff; --fg: #0b1220; --muted: #5b667a; --accent: #4f7cff; --border: #e6e8ee;
  --bg-elev: #f8f9fc; --link: #2b6cff; --ok: #16a34a; --err: #dc2626;

  /* === Nav sizing (keeps SI logo height in sync with buttons) === */
  --nav-pad-y: .5rem;
  --nav-pad-x: .75rem;
  --nav-line: 1.25rem;                 /* text line-height inside nav items */
  --nav-item-h: calc(var(--nav-line) + var(--nav-pad-y) * 2); /* total item height */
}
@media (prefers-color-scheme: dark){
  :root { --bg:#0b1220; --fg:#eef2ff; --muted:#a0abc0; --accent:#7aa2ff; --border:#1f2937; --bg-elev:#121a2b; --link:#9db8ff; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin-inline:auto;padding:1rem}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:var(--fg);color:var(--bg);padding:.5rem .75rem;border-radius:.5rem;z-index:99}

/* ---------- Site header ---------- */
.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:20}
.brand{display:flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;font-weight:700;padding:var(--nav-pad-y) var(--nav-pad-x)}
/* scale SI logo to match nav item height */
.brand img{height:var(--nav-item-h);width:auto;display:block}
.site-nav ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-block;padding:var(--nav-pad-y) var(--nav-pad-x);border-radius:.5rem;color:inherit;text-decoration:none;line-height:var(--nav-line)}
.site-nav a.cta{background:var(--accent);color:white}
.site-nav a.active{outline:2px solid var(--accent)}
.nav-toggle{display:none}
@media (max-width: 800px){
  .nav-toggle{display:block;background:none;border:1px solid var(--border);padding:.4rem .6rem;border-radius:.5rem}
  .site-nav{display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;background:var(--bg);border:1px solid var(--border);padding:.5rem;border-radius:.75rem;position:absolute;right:1rem;top:3.25rem}
}

/* ---------- General UI ---------- */
.hero{padding-block:1rem 2rem;align-items:center}  /* tightened */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}
.lead{font-size:1.125rem;color:var(--muted)}
.tagline{font-size:1.25rem;font-weight:500;margin:.25rem 0 .5rem 0;letter-spacing:.01em}
.actions{display:flex;gap:.75rem;margin-block:1rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:.6rem;border:1px solid var(--border);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}
.fine-print{font-size:.875rem;color:var(--muted)}
.section{padding-block:2rem}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:0;margin:0;list-style:none}
.feature-grid h3{margin:.25rem 0}
@media (max-width: 1100px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px){.feature-grid{grid-template-columns:1fr}}
.callout{background:var(--bg-elev);border:1px solid var(--border);padding:1.25rem;border-radius:.9rem;display:grid;gap:.5rem}
.site-footer{border-top:1px solid var(--border);margin-top:2rem}
.site-footer ul{list-style:none;display:flex;gap:1rem;padding:0;margin:0 0 .5rem 0}

/* ---------- Docs layout ---------- */
.docs-layout{display:grid;grid-template-columns:280px 1fr;gap:1rem}
.sidebar{position:sticky;top:4.5rem;align-self:start;padding:.5rem;border-right:1px solid var(--border)}
.sidebar .search input{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg);color:var(--fg)}
.sidebar-title{margin:.75rem 0 .25rem}
.docs-nav{padding-left:.75rem} /* breathing room away from browser chrome */
.docs-nav ol{margin:0 0 .75rem 1.25rem}
.docs-nav a{display:inline-block;padding:.125rem 0}
.doc-content article{padding-block:1rem;border-bottom:1px solid var(--border)}

/* ========= Sidebar category titles (sentence case, white, bold) ========= */
.docs-nav .sidebar-title{
  color:#fff; font-weight:700; font-size:1.1rem;
  margin:1rem 0 .5rem; padding-left:.25rem;
}

/* Press assets grid */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:0;margin:0;list-style:none}
.asset-grid li{list-style:none}
.asset-actions{display:flex;gap:.5rem;margin-top:.5rem}

.inline-form{display:flex;gap:.5rem;flex-wrap:wrap}
.error{color:var(--err)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.device-shot{border:1px solid var(--border);border-radius:.75rem;overflow:hidden;background:var(--bg-elev)}
.accent{color:var(--accent)}

/* ---------- Links ---------- */
a{color:var(--accent);text-decoration:none}
a:hover, a:focus-visible{text-decoration:underline;text-underline-offset:0.15em}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.25rem}
.site-nav a, .site-footer a, .brand{color:inherit;text-decoration:none}
.site-nav a:hover, .site-footer a:hover, .brand:hover{text-decoration:none;opacity:.9}
.no-underline,.link-plain{color:inherit;text-decoration:none}
.no-underline:hover,.link-plain:hover{color:var(--accent)}
.link-muted{color:var(--muted);text-decoration:none}
.link-muted:hover{color:var(--accent)}

/* ---------- Headings (fluid) ---------- */
h1 { font-size: clamp(1.75rem, 2.5vw + 1.2rem, 2.5rem); line-height: 1.2; }
h2 { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem); line-height: 1.25; }
h3 { font-size: clamp(1.05rem, 1vw + .85rem, 1.25rem); line-height: 1.3; }

/* ---------- Responsive niceties ---------- */
@media (max-width: 640px){ .container { padding: .75rem; } }
@media (max-width: 900px){
  .docs-layout{display:block}
  .sidebar{
    position:static; top:auto;
    border-right:none !important;
    border-bottom:1px solid var(--border);
    margin-bottom:1rem;
    padding:.5rem 0 1rem 0;
    background:var(--bg);
  }
  .doc-content{margin:0}
  .doc-content.container{padding-top:0}
  .docs-nav a{padding:.25rem 0}
}
.docs-nav a{word-break:break-word}
@media (max-width: 700px){ .device-shot{margin-top:1rem} }
@media (max-width: 600px){ .site-footer ul{flex-wrap:wrap;row-gap:.5rem} }

/* =========================================================
   Shared Docs Hub Header + Search (used on ALL docs pages)
   ========================================================= */
.hub-header{
  position:sticky; top:3.5rem; z-index:15; /* below .site-header (20), above content */
  text-align:center;
  padding:2.25rem 1rem 1rem;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.hub-header h1{
  margin:0 0 .35rem 0;
  font-size:clamp(1.85rem, 2.2vw + 1.1rem, 2.5rem);
  line-height:1.2;
}
.hub-header p{
  margin:0 auto .9rem auto;
  max-width:72ch;
  color:var(--muted);
}
.hub-search-wrap{max-width:920px;margin:0 auto;position:relative}
.hub-search-wrap svg{position:absolute;top:50%;left:1rem;width:1rem;height:1rem;fill:var(--muted);transform:translateY(-50%);pointer-events:none}
#hub-search{
  width:100%; font:inherit;
  padding:.75rem 1rem .75rem 2.5rem;
  border:1px solid var(--accent); border-radius:.75rem;
  background:var(--bg); color:var(--fg);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
#hub-search:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent) }
.hub-header.compact{ padding:1.25rem 1rem .75rem }
.hub-header.compact h1{ font-size:clamp(1.4rem, 1.4vw + 1rem, 1.85rem); margin-bottom:.25rem }
.docs-layout .sidebar .search{ display:none }

/* =========================================================
   Sticky breadcrumbs bar (shared)
   ========================================================= */
.crumbbar{
  position:sticky; top: calc(3.5rem + 84px); /* header + hub header height */
  z-index:14; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.crumbbar .breadcrumbs{
  font-size:.9rem; color:var(--muted);
  margin:0; padding:.5rem 0;
}
.crumbbar .breadcrumbs a{ color:inherit; text-decoration:none }
.crumbbar .breadcrumbs a:hover{ text-decoration:underline }

/* =========================================================
   Explainers: focus frame + masking
   ========================================================= */
.explainer-set{ position:relative }
.explainer{ position:relative; scroll-margin-top:160px } /* anchors not hidden under sticky bars */

.explainer-focus{
  border:1px solid var(--accent);            /* single crisp stroke */
  border-radius:12px;
  padding:1rem 1.25rem;                      /* even insets all around */
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);   /* soft glow only, no outer ring */
  outline:none;                              /* ensure no extra outline */
}

.explainer-dim{
  filter: blur(8px) brightness(.6);          /* stronger blur + dim */
  transition: filter .2s ease;
}
@media (prefers-reduced-motion: reduce){
  .explainer-dim{ filter: blur(6px) brightness(.7) }
}

/* Helper: center the “Videos” placeholder */
#videos{ text-align:center }

/* Divider toggle — press "d" (handled in main.js) to apply */
.no-dividers{ --border: transparent }

/* RPW — tighten homepage hero spacing (nav → headline) */
.hero { padding-block: .5rem 1.5rem !important; }      /* was 2rem */
.hero .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.hero h1 { margin-top: 0 !important; }

/* keep a touch more breathing room on small screens */
@media (max-width: 640px){
  .hero { padding-block: .75rem 1.5rem !important; }
}