/* ==========================================================================
   Ben Richard Design · Shared components
   --------------------------------------------------------------------------
   Loaded on every page after tokens.css. Page layouts live in css/pages/*.
   Sections: Base · Type roles · Header · Buttons · Dot nav · Lamp · Curtain ·
             Footer · Keyframes · Reduced motion
   ========================================================================== */

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.wp-site-blocks { display: contents; }         /* WordPress wrapper: keep pages' own layout */
img { max-width: none; }
/* Screen-reader-only text (page titles on pages whose design has no visible heading) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type roles ----------
   Every text style lives here. Put the class on new markup (e.g. class="t-h2"),
   or list an existing selector next to the role it uses. Line heights sit on the
   8px grid. Colour comes from the component, not the role. */
.t-display, .sec h1, .sec.finals .finals-head h2 {
  font-size: var(--fs-display); line-height: 56px; font-weight: var(--fw-light); letter-spacing: var(--tracking-heading);
}
.t-h1, .services-main h1 {
  font-size: var(--fs-h1); line-height: 48px; font-weight: var(--fw-light); letter-spacing: var(--tracking-heading);
}
.t-h2, .sec h2, .generic-main h1 {
  font-size: var(--fs-h2); line-height: 40px; font-weight: var(--fw-light); letter-spacing: var(--tracking-heading);
}
.t-h3, .svc h2, .impacts .card h3, .generic-main h2 {
  font-size: var(--fs-h3); line-height: 32px; font-weight: var(--fw-light); letter-spacing: var(--tracking-heading);
}
/* Long-form copy */
.t-body, .svc p, .impacts .card p, .generic-main p, .generic-main li {
  font-size: var(--fs-base); line-height: 24px; font-weight: var(--fw-light);
}
/* Short supporting text: client names, project meta, card titles */
.t-meta, .body {                                          /* case-study paragraphs use this role too */
  font-size: var(--fs-lg); line-height: 24px; font-weight: var(--fw-regular);
}
/* Small print: footer, tile client */
.t-caption, .site-foot {
  font-size: var(--fs-sm); line-height: 16px; font-weight: var(--fw-regular);
}
/* Small uppercase / numeric labels: counters, tags, hints */
.t-eyebrow, .count, .viewer-bar, .ph .tag, .rotate-hint, .sheet-title, .hint {
  font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* Buttons */
.t-label, .contact, .view-btn, .btn-pill, .btn-solid, .is-style-pill .wp-block-button__link {
  font-size: var(--fs-base); line-height: 16px; font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* Mobile step-downs (≤768px). Body, caption, eyebrow, label and nav stay the same size. */
@media (max-width: 768px) {
  .t-display, .sec h1, .sec.finals .finals-head h2 { font-size: var(--fs-h2); line-height: 40px; }
  .t-h1, .services-main h1 { font-size: var(--fs-h2); line-height: 40px; }
  .t-h2, .sec h2, .generic-main h1 { font-size: var(--fs-h3); line-height: 32px; }
  .t-meta, .body { font-size: var(--fs-base); }
}
/* Navigation items: hotspots, filter menu, menu sheet */
.t-nav, .cat-btn, .sheet-link {
  font-size: var(--fs-base); line-height: 16px; font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ---------- Header: logo + contact ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gutter);
  z-index: 20;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
/* Scroll backdrop (services): fades in once content scrolls under the header */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -24px;
  background: linear-gradient(180deg, var(--bg) 55%, rgba(29,27,26,0));
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none; z-index: -1;
}
.is-scrolled .site-header::before { opacity: 1; }

.logo {
  display: block; width: 56px; height: 56px; border-radius: 4px; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.logo img, .logo svg { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (hover: hover) {
  .logo:hover { transform: rotate(-8deg) scale(1.06); box-shadow: 0 8px 32px -8px rgba(46,207,168,.6); }
}
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Buttons ---------- */
/* Pill button (outline): Contact, View portfolio, and the "Pill" style of the core Button block */
.contact, .view-btn, .btn-pill, .is-style-pill .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px;
  font-family: inherit;
  color: var(--fg); background: transparent; text-decoration: none;
  padding: calc(var(--cap-shift) * 2) 24px 0; border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.contact:hover, .view-btn:hover, .btn-pill:hover, .is-style-pill .wp-block-button__link:hover {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.contact:focus-visible, .view-btn:focus-visible, .btn-pill:focus-visible, .is-style-pill .wp-block-button__link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
/* Pill button (solid): Menu (home, mobile) and "View more" on case studies */
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: calc(var(--cap-shift) * 2) 24px 0;
  font-family: inherit; color: var(--bg); background: var(--fg); text-decoration: none;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
@media (hover: hover) { .btn-solid:hover { background: var(--orange); } }   /* #1D1B1A on #FF7336 = 6.3:1 */
.btn-solid:active { transform: scale(.96); }
.btn-solid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* On light sections (project pages) */
.on-light .contact { color: var(--ink); border-color: var(--ink-line); }
.on-light .contact:hover { background: var(--ink); color: var(--fg); border-color: var(--ink); }

/* Round icon button (carousel arrows, expand, viewer close, back-to-top) */
.icon-btn {
  width: 48px; height: 48px; border-radius: var(--radius-pill); cursor: pointer;
  display: grid; place-items: center; color: var(--fg);
  background: var(--glass); border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--fg); color: var(--brand); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.icon-btn svg { width: 24px; height: 24px; }   /* 50% of the 48px button, 60% at 40px on mobile */
/* Back to top (Project and About pages): fixed icon-btn, shown once you leave the
   first screen; .totop-light swaps to ink when a light section sits beneath it. */
.to-top {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 21;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.8);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), bottom .5s var(--ease),
              opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop-light .to-top { color: var(--ink); background: rgba(29,27,26,.04); border-color: var(--ink-line); }
.totop-light .to-top:hover { background: var(--ink); color: var(--fg); border-color: var(--ink); }
.to-top.show:active { transform: scale(.94); }

/* ---------- Dot nav: vertical progress dots (portfolio cards, project sections) ----------
   Inactive colour comes from --dot (set on light sections); the active dot is always orange. */
.dot-nav {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 4;
}
.dot-nav button {
  width: 8px; height: 8px; border-radius: var(--radius-pill); border: 0; padding: 0; cursor: pointer;
  background: var(--dot, rgba(255,255,255,.25));
  transition: height .4s var(--ease), background .4s var(--ease);
}
.dot-nav button.on { height: 24px; background: var(--orange); }
.dot-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Lamp glow ("lights click on") ---------- */
.lamp {
  position: absolute; left: 50%; top: 0;
  width: min(1200px, 100%); height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 55% at 50% 0%, rgba(255,214,150,.12), rgba(255,190,120,.04) 50%, transparent 75%);
  pointer-events: none; opacity: 0;
}
.is-ready .lamp { animation: lampOn 1.1s steps(1, end) .15s forwards, breathe 5s ease-in-out 2s infinite; }

/* ---------- Page transition curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 30; background: var(--bg);
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-curtain) var(--ease);
}
.is-leaving .curtain { opacity: 1; }

/* ---------- Footer: copyright + socials ---------- */
.site-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--muted);
}
.site-foot .copy { white-space: nowrap; }
.site-foot .socials { list-style: none; display: flex; gap: 0; margin: 0 -12px 0 0; padding: 0; }
.site-foot .socials a {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  color: rgba(255,255,255,.7);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-foot .socials svg { width: 16px; height: 16px; display: block; }
@media (hover: hover) {
  .site-foot .socials a:hover { color: var(--orange); background: rgba(255,115,54,.12); transform: translateY(-2px); }
}
.site-foot .socials a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .logo { width: 40px; height: 40px; }
  .contact, .view-btn, .btn-pill { height: 40px; padding-left: 16px; padding-right: 16px; }
  .icon-btn { width: 40px; height: 40px; }
  .dot-nav { right: 8px; }
  .dot-nav button { width: 4px; height: 4px; }
  .dot-nav button.on { height: 16px; }
  .site-foot .socials { margin-right: -8px; }
  .site-foot .socials a { width: 32px; height: 32px; }
}

/* ---------- Keyframes (shared) ---------- */
/* Transform-based: for elements with no other transform logic */
@keyframes pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.85); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes drop { to { opacity: 1; transform: none; } }
/* Property-based (translate / scale): safe on elements whose transform JS controls */
@keyframes popProp {
  0%   { opacity: 0; translate: 0 14px; scale: .85; }
  60%  { opacity: 1; translate: 0 -3px; scale: 1.03; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes riseProp { from { opacity: 0; translate: 0 24px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes lampOn {
  0% { opacity: 0; } 20% { opacity: .9; } 32% { opacity: .15; } 45% { opacity: 1; } 100% { opacity: 1; }
}
/* --breathe-min lets each lamp choose how far it dims (home glows use .82) */
@keyframes breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(var(--breathe-min, .75)); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- Reduced motion (all pages) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition: none !important;
  }
}

/* ---------- Generic pages (About, Resume, 404, blog fallback) ---------- */
.generic-main {
  max-width: 768px; margin: 0 auto;
  padding: 136px var(--side) 96px;
  min-height: calc(100dvh - 56px);
}
.generic-main h1 { margin-bottom: 32px; }
.generic-main h2 { margin: 40px 0 16px; }
.generic-main p, .generic-main li { color: var(--soft); }
.generic-main p + p { margin-top: 1em; }
.generic-main a { text-decoration: underline; text-underline-offset: 4px; }
.generic-main a:hover { color: var(--orange); }
.generic-main + .site-foot--page { padding: 0 var(--gutter) calc(var(--gutter) - 12px); }