/* =========================================================
   Diverse Claims Adjusters — design tokens, reset, layout
   ========================================================= */

:root {
  /* ---- Brand palette (sampled from the original site) ---- */
  --c-brand:        #74b0cc;   /* light blue — nav band, accents          */
  --c-brand-dark:   #578499;   /* slate blue — heading highlight boxes     */
  --c-ink:          #000000;
  --c-white:        #ffffff;
  --c-card-bg:      #000000;
  --c-card-text:    #d8d8d8;
  --c-link:         #116dff;

  /* ---- Translucent surfaces ---- */
  --s-nav:          rgba(116, 176, 204, .95);
  --s-paper:        rgba(255, 255, 255, .90);
  --s-panel-dark:   rgba(0, 0, 0, .75);   /* interior pages */
  --s-footer:       rgba(0, 0, 0, .50);

  --c-frame:        #3d9be9;              /* photo frame blue */

  /* ---- Typography ----
     Basic ................. Google Font, matches the original exactly.
     Lucida Console ........ metric-identical to the original's
                             "lucida-console-w01" (Monotype, Wix-licensed).
     Roboto Condensed ...... stand-in for "nimbus-sans-tw01con"
                             (URW/Monotype, Wix-licensed, not redistributable).
     See README.md → Fonts.                                              */
  --f-body:  "Basic", "Helvetica Neue", Arial, sans-serif;
  --f-mono:  "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
             Consolas, monospace;
  --f-cond:  "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed",
             Arial, sans-serif;

  /* Arial Narrow measures ~6.8% wider than the original's Nimbus Sans
     Condensed at every size tested (58px hero 394 vs 367, 40px sub 941 vs 881,
     32px call bar 395 vs 375, 20px nav 68 vs 64). This tracking correction
     brings all four back to within ~1% of the original. */
  --ls-cond: -0.019em;

  /* ---- Type scale (desktop, 1:1 with the original) ---- */
  --t-hero:      58px;
  --t-hero-sub:  40px;
  --t-tagline:   30px;
  --t-catbar:    30px;
  --t-callbar:   32px;
  --t-nav:       20px;
  --t-body:      20px;
  --t-footer-h:  22px;
  --t-card:      14px;
  --t-footer:    13px;

  /* ---- Spacing ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 14px;
  --sp-4: 21px;
  --sp-5: 25px;
  --sp-6: 32px;
  --sp-7: 41px;
  --sp-8: 63px;

  /* ---- Layout ---- */
  --shell-max: 980px;
  --shell-pad: 16px;
  --nav-band-h: 116px;

  /* Gap between the bottom of the nav band and the top of the content
     panel, so the background photograph shows through. Measured on the
     original: nav band ends at 223, panel starts at 308. */
  --gap-header: 85px;
}

/* ---------------------------------------------------------
   Reset / base
   --------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.25;
  color: var(--c-ink);
  background-color: #1b2a33;         /* shows through before the photo loads */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, p, ul, figure, address { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-cond);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   Page background
   A fixed, full-viewport photo that stays put while the content
   scrolls over it — matching the original's behaviour.
   The 1280px rendition is served to small screens; the full
   2560px file only loads from 900px up.
   --------------------------------------------------------- */

/* Each page picks its photo by overriding --bg-page on <body>. */
:root { --bg-page: url("../images/bg-home-1280.jpg"); }

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #223440;          /* shows while the photo decodes */
  background-image: var(--bg-page);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.page-adjusters { --bg-page: url("../images/bg-about-1280.jpg"); }

@media (min-width: 900px) {
  :root                { --bg-page: url("../images/bg-home.jpg"); }
  body.page-adjusters  { --bg-page: url("../images/bg-about.jpg"); }
}

/* The live Links page uses a monochrome city photo; this echoes that
   treatment with the site's own image rather than a second file. */
body.page-links .page-bg { filter: grayscale(1) contrast(1.05); }

/* Interior pages use a slightly lighter panel than Adjusters */
body.page-jobs,
body.page-links,
body.page-contact { --s-panel-dark: rgba(0, 0, 0, .65); }

/* ---------------------------------------------------------
   Layout primitives
   --------------------------------------------------------- */

.shell {
  width: min(var(--shell-max), 100% - (var(--shell-pad) * 2));
  margin-inline: auto;
}

/* White translucent content column. Consecutive panels are flush so
   they read as one continuous surface, exactly as on the original. */
.panel__inner {
  background: var(--s-paper);
  padding: var(--sp-7) var(--sp-2) var(--sp-8);
}

.panel--cards .panel__inner {
  padding-block: var(--sp-3) 2px;
}

main {
  position: relative;
  padding-top: var(--gap-header);
}