/* ══════════════════════════════════════════════════════════════════════════
   The Pub - RedM Australia satellite site
   ══════════════════════════════════════════════════════════════════════════

   Everything here is what the shared theme (css/theme.css) does not already
   cover: the document chrome a long-form guide needs. Page furniture, prose
   rhythm, steps, callouts, FAQ disclosure, footer.

   Sizing rule, same as the theme: no bare px. The root font size tracks the
   viewport, so every length here is in rem and the whole page scales with one
   number. px is permitted in exactly two places, @media breakpoints and
   blur() radii, and neither is a layout size.

   Do not restate tokens that theme.css already owns. If a colour or a space
   is needed, it comes from a var().
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Local tokens ───────────────────────────────────────────────────────── */

:root {
  --sat-header-veil: rgba(10, 9, 7, 0.86);
  --sat-note:        rgba(201, 162, 39, 0.07);
  --sat-warn:        rgba(142, 36, 32, 0.14);
  --sat-good:        rgba(92, 107, 63, 0.14);
  --sat-code:        rgba(0, 0, 0, 0.42);
}

/* ── Page frame ─────────────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 5;
  background: var(--sat-header-veil);
  border-bottom: var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.1;
}

.brand__note {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}

.nav a {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0.25rem 0;
  border-bottom: var(--hair2) solid transparent;
}
.nav a:hover {
  color: var(--gold-bright);
  border-bottom-color: rgba(201, 162, 39, 0.5);
  text-decoration: none;
}
.nav a[aria-current="page"] {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

/* The publisher line under the nav. Quiet by design: it is a disclosure, not
   an advertisement, and a satellite that shouts its owner's name in the
   header is the doorway page pattern search ranking exists to demote. */

.site-header__by {
  margin: 0;
  padding-bottom: var(--sp-4);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--cream-faint);
  border-top: var(--rule-faint);
  padding-top: var(--sp-3);
  max-width: var(--measure);
}
.site-header__by a { color: var(--cream-dim); }
.site-header__by a:hover { color: var(--gold-bright); }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.crumbs {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--cream-faint);
  padding-top: var(--sp-4);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.crumbs li::after {
  content: "/";
  margin-left: 0.375rem;
  opacity: 0.5;
}
.crumbs li:last-child::after { content: none; }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: var(--rule-faint);
}

.masthead h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  max-width: 24ch;
}

.standfirst {
  font-size: var(--fs-head);
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: var(--measure);
  margin: 0;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ── Prose ──────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); }

.prose > section { padding-top: var(--sp-7); }

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--rule-faint);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: var(--tracking-mid);
  color: var(--cream);
  margin: var(--sp-6) 0 var(--sp-3);
}

.prose h4 {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: var(--sp-5) 0 var(--sp-2);
}

.prose p { margin: 0 0 var(--sp-4); }

.prose ul,
.prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--gold); }

.prose strong { color: var(--paper); font-weight: 600; }

.prose hr {
  border: 0;
  border-top: var(--rule-faint);
  margin: var(--sp-6) 0;
}

.prose blockquote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-left: var(--hair2) solid var(--brass-dark);
  color: var(--cream-dim);
}

/* Wide blocks are allowed to break the reading column. */
.prose .bleed { max-width: 68rem; }

/* ── Code, paths and keys ───────────────────────────────────────────────── */

code, kbd, samp {
  font-family: var(--font-numeric);
  font-size: 0.92em;
}

.prose code {
  background: var(--sat-code);
  border: var(--rule-faint);
  padding: 0.0625rem 0.3125rem;
  color: var(--paper);
  word-break: break-word;
}

kbd {
  display: inline-block;
  background: rgba(40, 35, 28, 0.9);
  border: var(--hair) solid var(--brass-dark);
  border-bottom-width: var(--hair2);
  padding: 0.0625rem 0.375rem;
  color: var(--cream);
  font-size: 0.85em;
  line-height: 1.5;
}

pre {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--sat-code);
  border: var(--rule-faint);
  overflow-x: auto;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--paper);
}
pre code { background: none; border: 0; padding: 0; }

/* ── Callouts ───────────────────────────────────────────────────────────── */

.note {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule-faint);
  border-left: var(--hair2) solid var(--gold);
  background: var(--sat-note);
}
.note > :last-child { margin-bottom: 0; }

.note--warn   { border-left-color: var(--blood-bright); background: var(--sat-warn); }
.note--good   { border-left-color: var(--moss-bright);  background: var(--sat-good); }

.note__title {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: var(--sp-2);
}

/* ── Steps ──────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-7);
  margin: 0;
  border-left: var(--rule-faint);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: 0;
  width: var(--sp-6);
  height: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-numeric);
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--brass);
  border: var(--hair) solid var(--gold-bright);
}

.steps h3 { margin-top: 0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.card { padding: var(--sp-5); }

.card h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: var(--tracking-mid);
  color: var(--paper);
}

.card p { margin: 0 0 var(--sp-3); color: var(--cream-dim); font-size: var(--fs-small); }
.card > :last-child { margin-bottom: 0; }

/* ── Checklist ──────────────────────────────────────────────────────────── */

.checklist { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }

.checklist > li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  transform: rotate(45deg);
  background: var(--gold);
  opacity: 0.85;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { margin-bottom: var(--sp-5); }

.faq details {
  border-bottom: var(--rule-faint);
  padding: var(--sp-3) 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--cream);
  padding-right: var(--sp-5);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-numeric);
  color: var(--gold);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--gold-bright); }

.faq details > *:not(summary) { margin-top: var(--sp-3); color: var(--cream-dim); }
.faq details > :last-child { margin-bottom: 0; }

/* ── Table extras ───────────────────────────────────────────────────────── */

.table-wrap { margin-bottom: var(--sp-3); }
.table caption {
  caption-side: bottom;
  text-align: left;
  font-size: var(--fs-micro);
  color: var(--cream-faint);
  padding-top: var(--sp-3);
}
.table td { vertical-align: top; }
.table th[scope="row"] {
  white-space: normal;
  color: var(--cream);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
}

/* ── Next reads ─────────────────────────────────────────────────────────── */

.next {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--rule);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-top: var(--rule);
  background: rgba(10, 9, 7, 0.72);
  font-size: var(--fs-small);
  color: var(--cream-faint);
}

.site-footer a { color: var(--cream-dim); }
.site-footer a:hover { color: var(--gold-bright); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }

.site-footer__legal {
  padding-top: var(--sp-4);
  border-top: var(--rule-faint);
  font-size: var(--fs-micro);
  line-height: 1.7;
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .site-header__inner { align-items: flex-start; flex-direction: column; }
  .masthead { padding-top: var(--sp-6); }
  .masthead h1 { font-size: var(--fs-title); }
  .standfirst { font-size: var(--fs-body); }
  .prose > section { padding-top: var(--sp-6); }
  .steps > li { padding-left: var(--sp-6); }
  .steps > li::before { left: calc(-1 * var(--sp-3)); width: var(--sp-5); height: var(--sp-5); }
}