/* ==========================================================================
   Sandy Brown Acoustics — global design tokens + base + layout + reveals.
   Loaded site-wide and as an editor style. Blocks CONSUME these vars;
   they must never redefine the palette.
   ========================================================================== */

:root{
  /* brand */
  --sb-blue:#0004ff;
  --sb-blue-dark:#0003cc;
  --sb-ink:#433a3f;      /* charcoal — body text & footer bar */
  --sb-grey:#f3f3f3;     /* light grey — card & footer-top backgrounds */
  --sb-grey-2:#e6e6e8;
  --sb-white:#ffffff;
  --sb-muted:#797279;
  --sb-navy:#10193f;     /* mobile menu panel */

  /* type */
  --sb-font:'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sb-w-body:500;
  --sb-w-btn:600;
  --sb-w-head:900; /* titles/headings are light; logos + bold text pin their own weight */
  --sb-w-logo:800;

  /* layout / rhythm */
  --sb-maxw:1720px;  /* content ≈1560px at 1920, as on the artboards (titles start x≈197) */
  --sb-gutter:clamp(20px, 5vw, 80px);
  --sb-section-y:clamp(56px, 8vw, 96px);
  --sb-gap:clamp(16px, 2vw, 28px);
  --sb-radius:14px;
  --sb-radius-lg:22px;

  /* title scale, measured off the 1920 artboards; fluid (size/19.2 vw) so it tracks the artwork's
     proportions at every width, capped at the 1920 size */
  --sb-fs-display:clamp(2.4rem, 4.95vw, 5.95rem);   /* 95px  hero, blue banner */
  --sb-fs-statement:clamp(2.2rem, 4.48vw, 5.4rem);  /* 86px  At the forefront…, Why join us? */
  --sb-fs-title:clamp(2rem, 3.54vw, 4.25rem);       /* 68px  page titles: Projects, Contact Us… */
  --sb-fs-section:clamp(1.75rem, 2.66vw, 3.2rem);   /* 51px  Get in touch…, Directors, Vacancies */
  --sb-fs-small:clamp(1.4rem, 1.72vw, 2.05rem);     /* 33px  Latest insights, Recent articles */
  --sb-header-h:clamp(96px, 7.8125vw, 150px); /* full header (hero top padding + solid-page slot); 150px on the 1920 artboard */
  --sb-header-h-compact:60px;  /* scrolled/compact header */
  --sb-admin-offset:0px;       /* WP admin bar height when logged in */
  /* Bottom edge of the compact header — `top` for sticky sub-bars (e.g. .sb-filters). */
  --sb-sticky-top:calc(var(--sb-admin-offset) + var(--sb-header-h-compact));
}
/* Admin bar offset (32px ≥783px, 46px below). ≤600px WP un-fixes the bar, so it has
   scrolled away by the time anything sticks — sub-bars then sit flush under the header.
   Set on both :root (for html scroll-padding) and body; kept as separate rules so an
   unsupported :has() can't drop the body rule. */
:root:has(> body.admin-bar){--sb-admin-offset:32px;--sb-sticky-top:calc(var(--sb-admin-offset) + var(--sb-header-h-compact))}
body.admin-bar{--sb-admin-offset:32px;--sb-sticky-top:calc(var(--sb-admin-offset) + var(--sb-header-h-compact))}
@media(max-width:782px){
  :root:has(> body.admin-bar){--sb-admin-offset:46px}
  body.admin-bar{--sb-admin-offset:46px}
}
@media(max-width:600px){
  :root:has(> body.admin-bar){--sb-sticky-top:var(--sb-header-h-compact)}
  body.admin-bar{--sb-sticky-top:var(--sb-header-h-compact)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.sb-body{
  margin:0;font-family:var(--sb-font);font-weight:var(--sb-w-body);
  font-size:16px;line-height:1.55;color:var(--sb-ink);background:var(--sb-white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Hand-set heading line breaks reflow on mobile (so keep a space before each <br> in headings).
   Prose, addresses and other copy keep their breaks. */
@media(max-width:768px) {
  :is(h1,h2,h3,h4,.sb-h1,.sb-h2,[data-sb-hero-title]) br {
    display: none;
  }
}
.sb-body img,.sb-body svg{max-width:100%;display:block}
/* CDN <picture> wrappers must be layout-invisible so absolute/100% imgs behave as before */
picture{display:contents}
a{color:inherit;text-decoration:none}
.sb-body button{font-family:inherit}
.sb-body :focus-visible{outline:3px solid rgba(0,4,255,.5);outline-offset:2px}
.sb-main{display:block}

/* layout helpers */
.sb-container{width:100%;max-width:var(--sb-maxw);margin-inline:auto;padding-inline:var(--sb-gutter)}
.sb-section{padding-top:var(--sb-section-y)}

/* typography */
.sb-h1,.sb-h2,.sb-h3{margin:0;font-weight:var(--sb-w-head);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
.sb-h1{font-size:var(--sb-fs-display)}
.sb-h2{font-size:var(--sb-fs-section)}
/* A page's first title (sb_heading makes it the h1) is its page title in the artwork. */
h1.sb-h2,.sb-h2.sb-h--title{font-size:var(--sb-fs-title)}
.sb-h2.sb-h--statement{font-size:var(--sb-fs-statement)}
.sb-h2.sb-h--section{font-size:var(--sb-fs-section)}
.sb-h2.sb-h--small{font-size:var(--sb-fs-small)}
.sb-h3{font-size:clamp(1.25rem, 2.3vw, 1.85rem)}
.sb-text-blue{color:var(--sb-blue)}
.sb-text-white{color:var(--sb-white)}
.sb-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--sb-w-btn);color:var(--sb-muted)}

/* generic archive fallback */
.sb-archive__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(20px,3vw,32px)}
@media(max-width:1024px){.sb-archive__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sb-archive__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Scroll reveals — driven by resources/js/animations.js
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.is-visible>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}
/* editor: never sit invisible waiting for an observer */
.block-editor-block-list__layout .reveal,
.block-editor-block-list__layout .reveal-stagger>*{opacity:1!important;transform:none!important}