/* ============================================================
   GLOBAL — global.css
   Requires tokens.css. Load it immediately after, before every
   other sheet.

   The base layer and the handful of primitives every page needs.
   Both used to be written twice — once at the top of
   case-study-template.css and again inline in index.php — which
   meant the homepage and the case studies could drift apart
   without anyone noticing. They now live here, once.

   What belongs in this file: anything every page needs, or any
   component used on more than one page. Page-specific layout
   stays with its page. The homepage's carousel, logo strip and
   services blocks are still inline in index.php, because nothing
   else uses them yet.

   Contents:
     base       reset, document, body, images, focus, skip link
     .btn       the button family, in one definition
   ============================================================ */

/* ── Base ───────────────────────────────────────────────────*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--plum);
  color: var(--cream);
  font-size: var(--text-dek);
  line-height: var(--leading-dek);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

/* Anchored sections clear the fixed site bar. */
[id] { scroll-margin-top: var(--sticky-top); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: #fff; padding: .75rem 1.25rem; z-index: 100; }
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ── Page titles ────────────────────────────────────────────
   One display role for every page's h1, declared once here rather
   than re-typed in each page's stylesheet — which is how /login and
   /404 quietly ended up two steps smaller than /work and /about.

   The homepage hero is deliberately not in this list: it's a headline
   rather than a page title, and carries its own tighter leading.

   The page stylesheets load after this one, so they may add position
   and alignment to these h1s but must not restate the type. */
.cs-hero h1,
.about-hero h1,
.work-index-head h1,
.auth-panel h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-display);
  color: var(--cream);
  text-wrap: balance;
}

/* ── Buttons ────────────────────────────────────────────────*/

/* The base is the outlined gold button, because that's what a bare
   class="btn" has always rendered as on the case studies, /work and
   /login. Spacing is deliberately absent — a button's margin belongs
   to whatever is laying it out, not to the button. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 42px;
  min-width: 160px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--text-btn);
  line-height: var(--leading-btn);
  font-weight: var(--font-weight-btn);
  text-decoration: none;
  cursor: pointer;
  transition:
    background   var(--dur-fast) var(--ease),
    color        var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--gold); color: #fff; }

/* Named alias for the base. The homepage says .btn.btn-primary to
   distinguish it from .btn-linkedin sitting next to it; keeping the
   class means that markup reads as a deliberate pair. */
.btn-primary { }

/* LinkedIn blue with the white logo. */
.btn-linkedin {
  background: var(--linkedin);
  border-color: var(--linkedin);
  color: #fff;
}

.btn-linkedin:hover {
  background: #0858A8;
  border-color: #0858A8;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   One footer on every page, homepage included, so it sits in
   the shared layer rather than the case study sheet.
   ═══════════════════════════════════════════════════════════ */
/* The rule sits on the outer element so it runs the full width of the
   page, while the content stays on the same measure as everything
   above it. .cs-cta splits itself the same way. */
.cs-foot {
  border-top: 1px solid var(--rule-soft);
}
.cs-foot-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.25rem) var(--pad) clamp(2.25rem, 3.5vw, 3rem);
  font-size: var(--text-footer);
  line-height: var(--leading-footer);
  color: var(--cream-dim);
}
.cs-foot a { color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.cs-foot a:hover { color: var(--gold); border-color: var(--gold); }

/* The icon inherits the link's colour, so it greys and golds with the
   word. The rule moves off the <a> and onto the <span> so it underlines
   the word only — an underline running beneath the glyph reads as a
   box round it. */
.cs-foot-social {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 0 !important;
}
.cs-foot-social span { border-bottom: 1px solid var(--rule-soft); }
.cs-foot-social:hover span { border-color: var(--gold); }
.cs-foot-social svg { flex: 0 0 auto; }