/*
  Base — reset, element defaults, typography and the page grid shell.
  Component-specific styling (nav, cards, forms, etc.) lives in components.css.
*/

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main grows to fill any leftover viewport height, so on short pages the
   footer still sits at the bottom of the screen instead of floating high up
   — but it's a normal in-flow element, not fixed, so it scrolls away with
   the rest of the page and only comes into view once you reach the bottom. */
main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-3);
}
h4 {
  font-size: var(--step-2);
}

p {
  margin: 0 0 var(--space-3);
  overflow-wrap: break-word;
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.25em;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--color-accent-dark);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

th,
td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-heading);
  color: var(--color-navy);
}

/* Opt-in override for tables that shouldn't look like tabular data (e.g. a
   plain text+button layout grid authored as a markdown table for its
   two-column alignment) — wrap the table in <div class="table-plain">...
   </div> to drop the row-divider borders every other table keeps, tighten
   cell padding to vertical-only, and hide the (markdown-mandated but here
   empty/unused) header row entirely. */
.table-plain th,
.table-plain td {
  border-bottom: 0;
  padding: var(--space-2) 0;
}

.table-plain thead {
  display: none;
}

/* Opt-in for a table of fee amounts — right-aligns every value cell and its
   column header (the row-label column/header stays left-aligned) so figures
   line up on their ones/tens/hundreds digits instead of on their left edge.
   The row-label header is matched via thead's first <tr>'s first <th> rather
   than plain :first-child — with a spanning "Fee" header over two sub-header
   rows, "Full"/"Family*" headers in the second row are each :first-child of
   their own <tr> too, even though they sit under the "Annual"/"Monthly"
   value columns, so a bare :first-child would wrongly catch them as well. */
/* .fees-table is applied directly to the <table> (subscription rates, a raw
   HTML table) or to a wrapping <div> (onboarding fees, a markdown table) —
   covering both so either shrinks to its content instead of table's
   site-wide default of filling its container's full width. */
.fees-table,
.fees-table table {
  width: auto;
}

.fees-table td,
.fees-table th {
  padding-block: 2px;
}

.fees-table td:not(:first-child),
.fees-table th {
  text-align: right;
}

.fees-table thead tr:first-child > th:first-child {
  text-align: left;
}

/* Subscription rates only — `table.fees-table` matches the <table> itself,
   which is only true there (onboarding fees' table.fees-table class sits on
   a wrapping <div>, not the <table>, so this doesn't reach it). Its "Fee"
   row-label column has long entries (e.g. "Overseas & Young Away
   Membership") that shouldn't wrap now the table is no longer full-width. */
table.fees-table td:first-child {
  white-space: nowrap;
}

.fees-table th[colspan] {
  text-align: center;
}

.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;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* The main body copy on a standard content page — nested inside a plain
   .container (not combined onto the same element as it used to be), so its
   percentage width below resolves against .container's already-capped,
   already-centered box instead of the raw viewport, and it lines up with
   the page heading above it rather than drifting off-center on wide
   screens. Full width on small/medium screens (nothing to gain by
   narrowing it there); from desktop widths up it's capped to 80% of the
   container, centered, so text/headings get noticeably more room than the
   old fixed reading-width measure did. */
.prose {
  max-width: 100%;
}

@media (min-width: 960px) {
  .prose {
    max-width: 80%;
    margin-inline: auto;
  }
}

.prose img {
  margin-block: var(--space-3);
}

/* Markdown headings (#/##/###/####) within prose content — scoped here
   rather than overriding the global h1-h4 rules above, which also style the
   page-hero <h1> (driven by front-matter `title`, not Markdown). Sized
   relative to body copy rather than the same large scale as the hero title:
   #### matches body text, and each level up steps up another 20%. */
.prose h1 {
  font-size: calc(var(--step-0) * 1.728);
}
.prose h2 {
  font-size: calc(var(--step-0) * 1.44);
}
.prose h3 {
  font-size: calc(var(--step-0) * 1.2);
}
.prose h4 {
  font-size: var(--step-0);
}

section {
  padding-block: var(--space-6);
}

section + section {
  border-top: 1px solid var(--color-border);
}