/* SurfSizer design system */

:root {
  --ocean-900: #06243a;
  --ocean-800: #0a3352;
  --ocean-700: #0f4a72;
  --ocean-600: #14639a;
  --ocean-500: #1c86c9;
  --ocean-100: #dbeefb;
  --ocean-50:  #f0f8fe;

  --sand-600: #b8792c;
  --sand-500: #e09b3d;
  --sand-100: #fdf1de;

  --ink:       #10202c;
  --ink-soft:  #40566a;
  /* Dark enough to clear 4.5:1 on the tinted result panel and the footer,
     which are the lightest surfaces this token ever sits on. */
  --ink-faint: #55697c;

  --paper:     #ffffff;
  --paper-alt: #f5f9fc;
  --line:      #dbe6ee;
  /* Form controls are UI components, so their edges need 3:1 (WCAG 1.4.11).
     --line is far too faint for that; it stays for decorative dividers only. */
  --field-border: #75899a;

  --ok: #17794a;

  /* Accent text sits on the tinted result panel, so it has to flip with theme. */
  --accent-text: var(--ocean-700);
  --accent-label: var(--ocean-600);
  /* Links need the same treatment — the mid-blue is only legible on light. */
  --link: var(--ocean-600);
  --link-hover: var(--ocean-700);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(10, 40, 62, .07), 0 2px 8px rgba(10, 40, 62, .05);
  --shadow-md: 0 4px 12px rgba(10, 40, 62, .09), 0 12px 32px rgba(10, 40, 62, .07);

  --measure: 68ch;
  --wrap: 1120px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ocean-100: #163d59;
    --ocean-50:  #0e2c42;
    --sand-100:  #3a2a12;
    --ink:       #e6eef5;
    --ink-soft:  #a8bccd;
    --ink-faint: #7e94a7;
    --paper:     #071a29;
    --paper-alt: #0c2337;
    --line:      #1b3d57;
    --field-border: #4d6b85;
    --ok: #4cc98a;
    --accent-text:  #8ecbf2;
    --accent-label: #6fb8e6;
    --link:         #6fb8e6;
    --link-hover:   #a3d5f5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-top: 2.4em; }
h3 { font-size: 1.17rem; margin-top: 1.8em; }
p, ul, ol { margin: 0 0 1.15em; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

/* Body copy runs the full calculator width. Long measures get a little more
   leading so the eye can still find the next line. */
.prose { max-width: none; }
.prose p, .prose li { line-height: 1.72; }
.prose li { margin-bottom: .4em; }
.prose > section > p, .prose .faq-item p { max-width: 100%; }

/* ---------------------------------------------------------------- header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand img { display: block; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.site-nav { display: flex; gap: 4px; font-size: .93rem; font-weight: 500; }

.nav-item { position: relative; }
.nav-toggle {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-toggle:hover { color: var(--link); background: var(--paper-alt); }
.nav-item.is-current > .nav-toggle { color: var(--link); font-weight: 600; }
.nav-toggle svg { transition: transform .15s ease; flex-shrink: 0; }
.nav-item.is-open > .nav-toggle { color: var(--link); background: var(--paper-alt); }
.nav-item.is-open > .nav-toggle svg { transform: rotate(180deg); }

.nav-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 262px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  z-index: 30;
}
.nav-item.is-open .nav-menu { display: block; }
.nav-item:last-child .nav-menu { left: auto; right: 0; }

/* Hover opens only where there is a real pointer, and only in CSS — keeping it
   out of JS means hovering can never fight the click/keyboard state. */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover .nav-menu { display: block; }
  .nav-item:hover > .nav-toggle { color: var(--link); background: var(--paper-alt); }
  .nav-item:hover > .nav-toggle svg { transform: rotate(180deg); }
}

.nav-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.35;
}
.nav-menu a:hover { background: var(--paper-alt); color: var(--link); }
.nav-menu a[aria-current="page"] { color: var(--link); font-weight: 600; background: var(--paper-alt); }
.nav-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-label); flex-shrink: 0;
}

@media (max-width: 860px) {
  .site-header .wrap { gap: 8px; }
  .site-nav { gap: 0; }
  .nav-toggle { padding: 8px 7px; font-size: .86rem; gap: 4px; }
  .nav-menu { min-width: 236px; }
  /* Keep the panel on screen whichever button opened it. */
  .nav-item .nav-menu { left: auto; right: 0; }
}
/* Below this the three labels plus the wordmark no longer fit on one line, and
   the header was forcing the whole page to scroll sideways. Shed the least
   useful text rather than let that happen. */
@media (max-width: 620px) {
  .nav-label-extra { display: none; }
}
@media (max-width: 470px) {
  .brand-name { display: none; }
  .nav-toggle { padding: 8px 6px; font-size: .82rem; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  background: var(--ocean-900);
  color: #fff;
  padding: 52px 0 128px;
  position: relative;
  overflow: hidden;
}

/* The hero photo is a real <img> rather than a CSS background so it can carry
   alt text. The scrim over it is what keeps the headline readable. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 20, 34, .93) 0%, rgba(4, 20, 34, .84) 38%, rgba(4, 20, 34, .46) 70%, rgba(4, 20, 34, .34) 100%),
    linear-gradient(180deg, rgba(4, 20, 34, .55) 0%, rgba(4, 20, 34, .18) 45%, rgba(4, 20, 34, .5) 100%);
}
.hero > .wrap { position: relative; z-index: 2; }

/* Interior pages carry the same hero photo as the home page; they just sit
   shallower, since no calculator card overlaps the curve below them. */
.hero--interior { padding: 46px 0 64px; }
.hero--interior h1 { max-width: 22ch; }

/* An interior hero that has a calculator card overlapping it needs the same
   deep bottom padding as the home page, or the card covers the lede. */
.hero--calc { padding-bottom: 128px; }

/* #cfe6f7 clears 4.5:1 even against the lightest stop of the hero gradient;
   the previous #a8cbe4 only managed 3.59:1 down there. */
.breadcrumb { font-size: .86rem; margin-bottom: 14px; color: #cfe6f7; }
.breadcrumb a { color: #cfe6f7; text-decoration: underline; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { padding: 0 6px; opacity: .65; }

main.wrap > .prose > section:first-child > h2 { margin-top: 1.6em; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 76px;
  background: var(--paper);
  -webkit-mask: radial-gradient(58% 100% at 50% 100%, #000 99%, transparent 100%);
  mask: radial-gradient(58% 100% at 50% 100%, #000 99%, transparent 100%);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { font-size: 1.13rem; color: #cfe6f7; max-width: 60ch; margin-bottom: 0; }
.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8ecbf2; margin-bottom: 14px;
}

/* ---------------------------------------------------------------- calculator */
.calc-shell { margin-top: -96px; position: relative; z-index: 5; }
.calc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.calc-grid { display: grid; grid-template-columns: 1.25fr .95fr; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-inputs { padding: 28px; }
.calc-inputs h2 { margin: 0 0 4px; font-size: 1.28rem; }
.calc-hint { color: var(--ink-faint); font-size: .89rem; margin-bottom: 22px; }

.field { margin-bottom: 17px; }
.field > label, .field-label {
  display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--ink);
}
.field-note { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }

input[type="number"], select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .96rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f8497' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
input:focus-visible, select:focus-visible, button:focus-visible, .unit-toggle button:focus-visible {
  outline: 2px solid var(--ocean-500); outline-offset: 2px;
}

.weight-row { display: flex; gap: 8px; }
.weight-row input { flex: 1; }
.unit-toggle { display: inline-flex; border: 1px solid var(--field-border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.unit-toggle button {
  font: inherit; font-size: .87rem; font-weight: 600; padding: 0 14px;
  background: var(--paper); color: var(--ink-soft); border: 0; cursor: pointer;
}
.unit-toggle button[aria-pressed="true"] { background: var(--ocean-600); color: #fff; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .field-pair { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- result */
.calc-result {
  padding: 28px; background: var(--ocean-50);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
@media (max-width: 900px) { .calc-result { border-left: 0; border-top: 1px solid var(--line); } }

.result-label { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-label); }
.result-figure { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.result-figure strong { font-size: clamp(2.8rem, 8vw, 3.9rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--accent-text); }
.result-figure span { font-size: 1.4rem; font-weight: 700; color: var(--accent-label); }
.result-range { font-size: .94rem; color: var(--ink-soft); margin-bottom: 18px; }
.result-range b { color: var(--ink); font-weight: 600; }

.working { border-top: 1px solid var(--line); padding-top: 15px; margin-top: auto; }
.working h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin: 0 0 9px; }
.working-row { display: flex; justify-content: space-between; gap: 12px; font-size: .87rem; padding: 3px 0; color: var(--ink-soft); }
.working-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.working-row.is-total { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 9px; font-weight: 600; color: var(--ink); }
.working-eq { font-size: .84rem; color: var(--ink-faint); margin: 10px 0 0; font-variant-numeric: tabular-nums; }

.length-tip {
  background: var(--sand-100); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: .88rem; color: var(--ink-soft); margin-top: 14px;
}
.length-tip b { color: var(--ink); }

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; margin: 0 0 1.3em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: .93rem; }
caption { text-align: left; font-size: .87rem; color: var(--ink-faint); padding-bottom: 8px; }
th, td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--line); }
thead th { background: var(--paper-alt); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); white-space: nowrap; }
tbody tr:hover { background: var(--paper-alt); }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- misc blocks */
main section { scroll-margin-top: 80px; }

.callout {
  background: var(--paper-alt); border: 1px solid var(--line);
  border-left: 3px solid var(--ocean-500);
  border-radius: var(--radius-sm); padding: 15px 18px; margin: 1.6em 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0 14px; }
.faq-item h3 { margin-top: 1.1em; }
.faq-item p:last-child { margin-bottom: 0; }

.method {
  background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin: 2em 0;
}
.method h2 { margin-top: 0; font-size: 1.2rem; }
.method p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */
/* Text results (a "3/2" or an "L") need far less size than a big number. */
.result-figure strong.is-text { font-size: clamp(2.1rem, 5.5vw, 2.8rem); }
.result-sub { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.result-extras {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: .89rem; color: var(--ink-soft); margin-bottom: 14px;
}
.result-extras b { color: var(--ink); }

.site-footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  background: var(--paper-alt); padding: 36px 0 30px;
  font-size: .89rem; color: var(--ink-faint);
}
.site-footer a { color: var(--ink-soft); }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; }

/* Full link list in the footer — the header nav can't hold every page, and on
   mobile it is hidden entirely, so this is the real navigation down there. */
.footer-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 30px; padding-bottom: 26px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.footer-nav h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 0 0 9px;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 6px; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--link); text-decoration: underline; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}