/* ==========================================================================
   Sherpas IT — proposal stylesheet
   Tokens taken verbatim from 3sherpas.com/brand-guide. Colour use is
   function-driven: Lake Blue acts, Larch Gold signposts, Granite Rust is for
   hover and secondary links, Steel Slate decorates only.
   ========================================================================== */

:root {
  /* Foundation */
  --ink-navy:     #0D3356;   /* primary text, dark backgrounds, logo */
  --ink-deep:     #071E33;   /* footer background */
  --mist:         #F3F5F6;   /* page background */
  --ink-soft:     #3D5872;   /* secondary text, ledes */
  --ridge-line:   #D6DADE;   /* borders and dividers */
  --field-border: #848F9B;   /* input edges */
  --ridge:        #5F6B78;   /* labels, placeholders, captions */

  /* Accent roles */
  --accent-action:       #2D6E8E;  /* Lake Blue — primary buttons, focus */
  --accent-action-dark:  #235A75;  /* button hover */
  --accent-label:        #B8862E;  /* Larch Gold — wayfinding, never buttons */
  --accent-label-bright: #D9A94F;  /* gold on navy */
  --accent-label-dark:   #8F6820;  /* gold where standard fails contrast */
  --accent-hover:        #A14B35;  /* Granite Rust — card hover, 2nd links */
  --accent-hover-dark:   #7E3A29;
  --decor:               #4A6785;  /* Steel Slate — decoration only */
  --success:             #2F7A4F;

  /* Type scale */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.5rem + 2vw, 2.8rem);
  --text-4xl:  clamp(2.4rem, 1.7rem + 3vw, 3.6rem);

  /* Spacing */
  --space-1: 0.5rem;  --space-2: 0.75rem; --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2rem;    --space-6: 3rem;
  --space-7: 4.5rem;  --space-8: 6.5rem;  --space-9: 9rem;

  /* Radius */
  --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

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

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink-navy);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0; }

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-label-dark);
  margin: 0;
}
.eyebrow-onnavy { color: var(--accent-label-bright); }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
.lede { font-size: var(--text-lg); color: var(--ink-soft); line-height: 1.6; }
.caption { font-size: var(--text-xs); color: var(--ridge); }
.stack > * + * { margin-top: var(--space-3); }

/* ---- Layout ------------------------------------------------------------- */
.shell { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .shell { padding-inline: var(--space-5); } }
.section { padding-block: var(--space-7); }
@media (min-width: 768px) { .section { padding-block: var(--space-8); } }
.section-tight { padding-block: var(--space-6); }
.rule { border: 0; border-top: 1px solid var(--ridge-line); margin: 0; }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head h2 { margin-top: var(--space-2); max-width: 26ch; }
.section-head .lede { margin-top: var(--space-3); }

/* ---- Header ------------------------------------------------------------- */
.masthead { background: #fff; border-bottom: 1px solid var(--ridge-line); }
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  /* Tightened from --space-3 so the larger logo fits without the bar growing. */
  gap: var(--space-4); padding-block: var(--space-1); flex-wrap: wrap;
}
/* The brand guide specifies 42px header / 30px footer. Larger here at the
   client's request. The logo's own padding is zero so the mark grows without
   the masthead growing with it — the bar's own padding-block supplies the
   surrounding space, which keeps the header the height it was at 42px. */
.logo { height: 64px; width: auto; display: block; padding: 0; }
.logo-footer { height: 48px; width: auto; display: block; filter: brightness(0) invert(1); padding: 0; }

.masthead-meta { text-align: right; }

/* ---- Links & buttons ---------------------------------------------------- */
a { color: var(--accent-action); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; border-radius: var(--radius-xs); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-weight: 600; font-size: var(--text-sm);
  padding: 12px 22px; border-radius: var(--radius-sm);
  text-decoration: none; border: 1px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-primary { background: var(--accent-action); color: #fff; }
.btn-primary:hover { background: var(--accent-action-dark); color: #fff; }
.btn-ghost { border-color: var(--field-border); color: var(--ink-navy); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-navy); color: var(--ink-navy); background: #fff; }
.btn-onnavy { border-color: rgba(255,255,255,.42); color: #fff; }
.btn-onnavy:hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--ridge-line);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.card-lg { padding: var(--space-5); }
.grid { display: grid; gap: var(--space-4); }
/* Ascending order matters: these have equal specificity, so a wider
   breakpoint declared first would be overridden by a narrower one. */
@media (min-width: 640px) { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .g-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Price cards -------------------------------------------------------- */
.price {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--ink-navy);
}
.price-unit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500; font-size: var(--text-sm); color: var(--ridge);
  display: block; margin-top: var(--space-1);
}
.price-card { display: flex; flex-direction: column; }
.price-card .featurelist { margin-top: var(--space-4); }
.price-card .price-foot { margin-top: auto; padding-top: var(--space-4); }

/* ---- Feature lists ------------------------------------------------------ */
.featurelist { list-style: none; margin: 0; padding: 0; }
.featurelist li {
  position: relative; padding-left: var(--space-4); padding-block: 7px;
  font-size: var(--text-sm); color: var(--ink-soft);
  border-top: 1px solid var(--ridge-line);
}
.featurelist li:first-child { border-top: 0; }
.featurelist li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--accent-label); opacity: .85;
}

/* ---- Callout ------------------------------------------------------------ */
.callout {
  background: #fff; border: 1px solid var(--ridge-line);
  border-left: 4px solid var(--accent-label);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.callout-strong {
  background: var(--ink-navy); color: #fff;
  border: 0; border-left: 4px solid var(--accent-label-bright);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.callout-strong h3 { color: #fff; }
.callout-strong p { color: rgba(255,255,255,.86); }

/* ---- Navy band ---------------------------------------------------------- */
.band-navy { background: var(--ink-navy); color: #fff; position: relative; overflow: hidden; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .lede { color: rgba(255,255,255,.82); }
/* Steel Slate peaks, the one decorative motif the brand guide allows. */
.peaks { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; opacity: .15; pointer-events: none; }
.band-navy .shell { position: relative; z-index: 1; }

/* ---- Table -------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Padding, not margin — a caption sits inside the wrapper's border. */
.tbl caption { text-align: left; padding: var(--space-3) var(--space-4) var(--space-1); }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ridge-line); vertical-align: top; }
.tbl thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500; font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ridge);
  border-bottom: 1px solid var(--field-border);
}
.tbl td.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl-total td { font-weight: 700; color: var(--ink-navy); border-top: 1px solid var(--field-border) !important; }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--ridge-line); border-radius: var(--radius-md); }
.tbl-wrap .tbl th:first-child, .tbl-wrap .tbl td:first-child { padding-left: var(--space-4); }
.tbl-wrap .tbl th:last-child,  .tbl-wrap .tbl td:last-child  { padding-right: var(--space-4); }

/* ---- Swatches (brand guide) --------------------------------------------- */
.swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.swatch { border: 1px solid var(--ridge-line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.swatch-chip { height: 76px; }
.swatch-body { padding: 10px 12px 12px; }
.swatch-name { font-weight: 600; font-size: var(--text-sm); }
.swatch-hex { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--text-xs); color: var(--ridge); }
.swatch-role { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 4px; }
.ramp { height: 90px; border-radius: var(--radius-sm); border: 1px solid var(--ridge-line); }

/* ---- Status pills ------------------------------------------------------- */
.pill {
  display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-xs); border: 1px solid;
}
.pill-observed { color: var(--success);       border-color: var(--success);       background: #F0F7F3; }
.pill-missing  { color: var(--accent-hover-dark); border-color: var(--accent-hover); background: #FBF2F0; }
.pill-proposed { color: var(--accent-label-dark);  border-color: var(--accent-label);  background: #FBF6EC; }

/* ---- Things the sender must fill in ------------------------------------- */
.fill {
  background: #FFF3D4; border-bottom: 1px dashed var(--accent-label-dark);
  padding: 0 3px; color: var(--accent-label-dark); font-weight: 600;
}
.prep {
  background: #FBF6EC; border: 1px dashed var(--accent-label);
  border-radius: var(--radius-md); padding: var(--space-4);
  margin-block: var(--space-4);
}
.prep h3 { font-size: var(--text-base); }

/* ---- Footer ------------------------------------------------------------- */
.foot { background: var(--ink-deep); color: rgba(255,255,255,.76); }
.foot a { color: #fff; }
.foot a:hover { color: var(--accent-label-bright); }
.foot-grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.tagline { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; color: #fff; font-size: var(--text-lg); }

/* ---- Print -------------------------------------------------------------- */
@media print {
  :root { --text-base: 10.5pt; }
  body { background: #fff; }
  .prep, .noprint { display: none !important; }
  .section, .section-tight { padding-block: 14pt; }
  .band-navy { background: #fff !important; color: var(--ink-navy) !important; }
  .band-navy h2, .band-navy h3 { color: var(--ink-navy) !important; }
  .band-navy .lede, .band-navy p { color: var(--ink-soft) !important; }
  .peaks, .logo-footer { display: none; }
  .foot { background: #fff !important; color: var(--ink-soft) !important; border-top: 1pt solid var(--ridge-line); }
  .foot a, .tagline { color: var(--ink-navy) !important; }
  .callout-strong { background: #fff !important; border: 1pt solid var(--ink-navy); }
  .callout-strong h3 { color: var(--ink-navy) !important; }
  .callout-strong p { color: var(--ink-soft) !important; }
  .btn { border: 1pt solid var(--field-border) !important; background: #fff !important; color: var(--ink-navy) !important; }
  .card, .tbl-wrap, .callout { break-inside: avoid; }
  h2 { break-after: avoid; }
  a { text-decoration: none; }
}