/* Brain Bytes — shared site chrome. Loaded by EVERY page (homepage + blog).
   Tokens, typography, buttons, nav, contact, footer, a11y, dialog.
   Page-specific styles live in home.css / blog.css, loaded after this. */

/* ===== Brand tokens (shared system: kiosk.css / org-presentation) ===== */
:root{
  --bb-blue:#4682b4;        /* primary steel-blue */
  --bb-blue-hover:#3a6d96;
  --bb-title:#2d5a7b;       /* deep-blue titles */
  --bb-ink:#242424;         /* body text */
  --bb-muted:#5f6771;       /* secondary text (>=5:1 on white, AA) */
  --bb-line:#dde1e6;        /* hairlines */
  --bb-panel:#f6f8fa;       /* light panels */
  --bb-bg:#ffffff;
  --bb-signal:#2f6b1f;      /* secondary accent: forest green (AA), CTA + eyebrow */
  --maxw:1080px;
  --pad:1.25rem;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; background:var(--bb-bg); color:var(--bb-ink);
  font-family:'Ubuntu',system-ui,-apple-system,sans-serif;
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ color:var(--bb-title); line-height:1.15; font-weight:700; margin:0; }
a{ color:#3a6d96; text-decoration:none; }
a:hover{ color:#1f4260; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:#3a6d96; font-weight:700; margin:0 0 .6rem;
}
.muted{ color:var(--bb-muted); }
.rule{ height:1px; background:var(--bb-line); border:0; margin:0; }

/* ===== Buttons (used by both <a> and <button>) ===== */
.btn{
  display:inline-block; padding:.7em 1.5em; border-radius:6px; font-weight:500;
  border:1.5px solid #3a6d96; color:#3a6d96; background:transparent;
  font-family:inherit; font-size:1rem; line-height:1.3;
  transition:background .15s ease,color .15s ease,transform .1s ease; cursor:pointer;
}
.btn:hover{ background:#3a6d96; color:#fff; }
.btn-solid{ background:#3a6d96; color:#fff; }
.btn-solid:hover{ background:#1f4260; color:#fff; }
.btn-cta{ background:var(--bb-signal); border-color:var(--bb-signal); color:#fff; }
.btn-cta:hover{ background:#21500f; border-color:#21500f; color:#fff; transform:translateY(-1px); }

/* ===== Nav (fixed top bar, shared) ===== */
header.nav{
  position:fixed; top:0; left:0; width:100%; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--bb-line);
}
.nav-inner{ display:flex; align-items:center; gap:1.5rem; height:64px; }
.nav-inner img{ height:30px; display:block; }
.nav-links{ display:flex; gap:1.4rem; margin-left:auto; align-items:center; }
.nav-links a{ color:#3a6d96; font-size:.95rem; font-weight:500; }
.nav-links a:hover{ color:#1f4260; text-decoration:underline; text-underline-offset:5px; }
.nav-links a[aria-current]{ color:var(--bb-title); text-decoration:underline; text-underline-offset:5px; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:0; color:#3a6d96;
  font-size:1.4rem; line-height:1; cursor:pointer; padding:.3em .5em; }

/* ===== Section scaffolding (shared by contact + homepage sections) ===== */
section{ padding:4.5rem 0; }
section h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.lead{ font-size:1.15rem; color:var(--bb-muted); max-width:60ch; margin:.6rem 0 0; }
.lead-wide{ max-width:none; }

/* ===== Contact section ===== */
.contact{ background:var(--bb-panel); border-top:1px solid var(--bb-line); }
.contact .eyebrow{ color:var(--bb-signal); }
/* Subtle emphasis for key phrases in the blog's longer "what we do" intro. */
.contact .lead .key{ color:var(--bb-title); font-weight:600; }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }
.contact h3{ color:#3a6d96; font-size:1.05rem; margin-bottom:.6rem; }
.contact-ian{ text-align:center; }
.avatar{ width:104px; height:104px; border-radius:50%; background:var(--bb-line) center/cover no-repeat;
         margin:.4rem auto .6rem; }
.infolist{ list-style:none; padding:0; margin:0; } .infolist li{ padding:.2rem 0; }

/* ===== Footer ===== */
footer.foot{ background:var(--bb-ink); color:#9aa0a6; font-size:.9rem; }
footer.foot .wrap{ display:flex; justify-content:space-between; padding-top:1.4rem; padding-bottom:1.4rem; flex-wrap:wrap; gap:.5rem; }
footer.foot a{ color:#9aa0a6; } footer.foot a:hover{ color:#fff; }

/* ===== Responsive (nav + contact + generic) ===== */
@media (max-width:820px){
  section{ padding:3rem 0; }
  .contact-grid{ grid-template-columns:1fr; }
  /* Mobile nav: collapse links behind the hamburger. */
  .nav-toggle{ display:inline-block; }
  .nav-links{ display:none; position:absolute; top:64px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:.4em 0;
    border-bottom:1px solid var(--bb-line); box-shadow:0 8px 20px rgba(0,0,0,.06); }
  header.nav.nav-open .nav-links{ display:flex; }
  .nav-links a{ padding:.7em var(--pad); }
  .nav-links .btn-cta{ margin:.5em var(--pad); text-align:center; }
}

/* ===== Accessibility ===== */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:#2d5a7b; color:#fff;
  padding:.6em 1em; border-radius:0 0 6px 0; }
.skip-link:focus{ left:0; }
/* Visible focus for every focusable element (SC 2.4.7). scroll-margin keeps a
   Tab-focused target clear of the fixed nav (SC 2.4.11). */
a:focus-visible, button:focus-visible, .btn:focus-visible, video:focus-visible,
summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .blog-card:focus-within{
  outline:3px solid #3a6d96; outline-offset:2px; border-radius:4px; }
a, button, .btn, .blog-card, h1, h2, h3 { scroll-margin-top:80px; }
/* Small icon-only links (social, RSS): ensure a >=24x24 target (SC 2.5.8) and
   a clear, AA-contrast colour instead of inheriting muted grey. */
.social-link{ display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; min-height:24px; color:#3a6d96; font-size:1.15rem; }
.social-link:hover{ color:#1f4260; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ===== Booking dialog (Calendly modal) ===== */
dialog::backdrop{ backdrop-filter:blur(2px); }
body:has(dialog[open]){ overflow:hidden; }