/* =========================================================
   Cybersecurity Awareness — shared stylesheet
   Every page in the site links to this one file, so changes
   here apply everywhere.
   ========================================================= */

:root {
  /* Brand colours. Change these two and everything else follows. */
  --color-primary: #FFC72C;    /* yellow — links, hover, active page */
  --color-secondary: #1B2A63;  /* navy — header, nav pills, text on yellow */

  --color-bg: #0f172a;
  --color-bg-alt: var(--color-secondary);
  --color-surface: #223470;    /* a step lighter than secondary, for cards */
  --color-text: #e6ebf5;
  --color-text-dim: #a3b0cc;
  --color-accent: var(--color-primary);
  --color-accent-strong: #e6ae12;      /* darker yellow, for hover on already-yellow things */
  --color-on-accent: var(--color-secondary);  /* text colour when sitting on yellow */
  --color-danger: #f56565;
  --color-warning: #ecc94b;
  --color-safe: #48bb78;
  --color-nav-bg: var(--color-secondary);  /* header nav pills */

  /* Borders and tints. On a dark page these are see-through white, so
     they show up as faint lighter lines. Light mode swaps them for
     see-through navy, since white lines vanish on a white page. The
     names go from faintest to boldest. */
  --line-faint: rgba(255, 255, 255, 0.06);   /* card and panel edges */
  --line-soft: rgba(255, 255, 255, 0.08);    /* header, pager, footer dividers */
  --line: rgba(255, 255, 255, 0.12);         /* nav pills */
  --line-strong: rgba(255, 255, 255, 0.15);  /* text inputs */
  --line-bold: rgba(255, 255, 255, 0.25);    /* outline buttons */
  --hover-tint: rgba(255, 255, 255, 0.04);   /* sidebar link hover */
  --track: rgba(255, 255, 255, 0.1);         /* empty part of the strength meter */

  --radius: 10px;
  --max-width: 960px;

  /* System fonts only — nothing is downloaded, so no third-party
     request and no GDPR exposure. Serif for headings, sans for body:
     reads like a document rather than a dashboard. */
  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Cambria, "Times New Roman", serif;
  --font-body: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;

  font-size: 16px;
}

/* ---------- Light mode ----------
   The site is dark by default. js/theme.js puts data-theme="light" on
   the <html> element when the reader's system is set to light mode, or
   when they press the sun/moon button in the header. This block then
   swaps every colour token, and the rest of the stylesheet follows,
   because every rule reads its colour from these variables.

   There's no yellow in light mode: yellow text on white is almost
   unreadable. Navy takes over as the accent for links, buttons and
   highlights. Every text colour here passes the WCAG AA contrast
   minimum of 4.5:1 against the backgrounds it sits on. */
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-alt: #ffffff;               /* header */
  --color-surface: #f3f5f9;              /* cards, panels, quiz questions */
  --color-text: #1a2138;
  --color-text-dim: #4a5470;
  --color-accent: #1B2A63;               /* navy: links, buttons, active page */
  --color-accent-strong: #2c42a0;        /* lighter navy for hover */
  --color-on-accent: #ffffff;            /* text sitting on navy */
  --color-danger: #c53030;               /* darker than dark mode's, so text stays readable on white */
  --color-warning: #975a16;
  --color-safe: #276749;
  --color-nav-bg: var(--color-surface);

  --line-faint: rgba(27, 42, 99, 0.10);
  --line-soft: rgba(27, 42, 99, 0.12);
  --line: rgba(27, 42, 99, 0.16);
  --line-strong: rgba(27, 42, 99, 0.22);
  --line-bold: rgba(27, 42, 99, 0.32);
  --hover-tint: rgba(27, 42, 99, 0.05);
  --track: rgba(27, 42, 99, 0.10);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-strong);
}

/* ---------- Layout helpers ---------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header / nav ---------- */

header.site-header {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-header .brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  text-decoration: none;
}

/* Inside the header the container already adds vertical padding,
   so the generic nav padding (further down) would double it. */
.site-header nav {
  padding: 0;
}

/* The page you're currently on is shown in the accent colour:
   yellow in dark mode, navy in light mode. */
.site-header nav a.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Light/dark toggle. js/theme.js adds it as the last item in the header
   nav, so it only appears when JavaScript is running and the button can
   actually work. It's styled to match the nav pills beside it. The <li>
   is made a flex box so the button stretches to the same height as the
   text links next to it. */
.theme-toggle-item {
  display: flex;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  border-radius: var(--radius);
  background: var(--color-nav-bg);
  color: var(--color-text);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* The icon is drawn with stroke="currentColor", so it takes the
   button's text colour and flips on hover along with it. */
.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

/* ---------- Hero ---------- */

.hero {
  padding: 3.5rem 0 1.5rem;
}

.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 1rem;
  max-width: 40rem;
}

.hero p {
  color: var(--color-text-dim);
  font-size: 1.1rem;
  max-width: 40rem;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.btn.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--line-bold);
}

.btn.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- Section headings ---------- */

.section {
  padding: 2.5rem 0;
}

.section-title {
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
}

.section-subtitle {
  color: var(--color-text-dim);
  max-width: 40rem;
  margin: 0;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--line-faint);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.card h3 {
  margin-top: 0;
  color: var(--color-text);
}

.card p {
  color: var(--color-text-dim);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Whole card flips to the accent colour on hover (yellow in dark
   mode, navy in light), and every piece of text inside switches to
   --color-on-accent so it stays readable. */
.card:hover {
  transform: translateY(-2px);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.card:hover h3,
.card:hover p {
  color: var(--color-on-accent);
}

/* ---------- Content pages (Learn) ---------- */

main.page {
  padding: 2.5rem 0 4rem;
}

main.page h1 {
  font-size: 1.9rem;
}

.callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.callout.danger {
  border-left-color: var(--color-danger);
}

.callout.warning {
  border-left-color: var(--color-warning);
}

/* ---------- Exercises ---------- */

.exercise-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 2rem 0;
  border: 1px solid var(--line-faint);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
}

.strength-meter {
  height: 10px;
  border-radius: 5px;
  background: var(--track);
  margin-top: 0.75rem;
  overflow: hidden;
}

.strength-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--color-danger);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.strength-label {
  margin-top: 0.5rem;
  font-weight: 600;
}

/* The one-line explanation under the rating, e.g. why it's Weak. */
.strength-reason {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-dim);
}

.feedback-list {
  margin-top: 1rem;
  padding-left: 1.1rem;
  color: var(--color-text-dim);
}

.feedback-list li.ok {
  color: var(--color-safe);
}

.feedback-list li.missing {
  color: var(--color-text-dim);
}

/* ---------- Nav links styled as buttons ---------- */

nav {
  padding: 1rem 0;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

nav ul a {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--color-nav-bg);
  color: var(--color-text);
  border: 1px solid var(--line);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

nav ul a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  /* The generic a:hover rule near the top of this file has higher
     specificity than "nav ul a" and would otherwise recolor the text
     yellow-on-yellow here. Setting it explicitly wins the tie. */
  color: var(--color-on-accent);
}

/* ---------- Quiz (security-exercises) ---------- */

.quiz-question {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line-faint);
}

.quiz-question-text {
  font-weight: 600;
  margin-top: 0;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.quiz-feedback {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.quiz-feedback.correct {
  color: var(--color-safe);
}

.quiz-feedback.incorrect {
  color: var(--color-danger);
}

.quiz-feedback.unanswered {
  color: var(--color-warning);
}

.quiz-submit {
  /* Buttons don't inherit the page font by default, so without this
     they fall back to the browser's own font. */
  font-family: inherit;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.quiz-submit:hover {
  background: var(--color-accent-strong);
}

/* Submit and Clear sit side by side, and wrap onto two lines on
   narrow screens instead of overflowing. */
.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Clear answers: same shape as Submit but outlined, so the yellow
   button stays the obvious one to press. Mirrors .btn-outline. */
.quiz-reset {
  font-family: inherit;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--line-bold);
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.quiz-reset:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* The "saved in this browser only" line under the quiz. */
.quiz-note {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin-top: 0.25rem;
}

.quiz-score {
  margin-top: 1rem;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- Docs layout (one topic per page) ----------
   Two columns: a sticky topic list on the left, the article on
   the right. Collapses to one column on narrow screens (see the
   @media block at the end of this section). */

.docs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  max-width: 1200px;
}

.docs-content p,
.docs-content ul,
.docs-content ol {
  max-width: 70ch;
}

.docs-sidebar {
  align-self: start;      /* needed for sticky to work inside a grid */
  position: sticky;
  top: 1rem;
}

.docs-sidebar-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 0.5rem;
}

.docs-nav {
  padding: 0;             /* cancel the generic nav padding */
}

.docs-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docs-nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  border-left: 2px solid transparent;
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: 0.95rem;
}

.docs-nav a:hover {
  color: var(--color-accent);
  background: var(--hover-tint);
}

/* aria-current="page" marks the topic you're on — it's both the
   accessibility hook and the styling hook, so they can't drift apart. */
.docs-nav a[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-surface);
  border-left-color: var(--color-accent);
}

.docs-content h1 {
  font-size: 2rem;
  margin-top: 0;
}

.docs-content h2 {
  font-size: 1.3rem;
  margin-top: 2rem;
}

.topic-intro {
  font-size: 1.1rem;
  color: var(--color-text-dim);
}

.tip-list li {
  margin-bottom: 0.4rem;
}

/* ---------- Example screenshots ---------- */

/* auto-fit lets the browser pick the column count: as many columns of
   at least 260px as will fit, then it wraps. Two phone screenshots sit
   side by side on desktop and stack on mobile without a media query.
   A single figure in this grid fills the full width, which is what the
   wide email screenshots will want later. */
.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

/* <figure> carries a chunky default margin from the browser stylesheet.
   Zeroing it leaves the grid gap as the only thing setting spacing. */
.example {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

/* ---------- Example carousel ----------
   One screenshot at a time, as wide as the reading column, so it's
   readable without clicking. Use it by putting figures inside
   <div class="example-carousel"> instead of .example-grid.

   The sliding is plain CSS "scroll snap": the figures sit in a row
   that scrolls sideways and always settles on one whole slide. That
   means swiping on a phone works with no JavaScript at all.
   js/carousel.js then adds the Previous/Next buttons and the "1 / 3"
   counter, and hides the scrollbar once those buttons exist. */

.example-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;  /* sideways swipes don't trigger browser back/forward */
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;          /* room for the scrollbar when there's no JS */
}

.example-carousel .example {
  flex: 0 0 100%;                  /* each slide takes the full width */
  scroll-snap-align: center;
}

/* Tall phone screenshots would otherwise fill the whole screen, so cap
   the height and keep the image centred in its card. */
.example-carousel .example img {
  max-height: 460px;
  width: auto;
  margin: 0 auto;
}

/* Once js/carousel.js is running, the buttons replace the scrollbar. */
.example-carousel.is-enhanced {
  scrollbar-width: none;
  padding-bottom: 0;
}

.example-carousel.is-enhanced::-webkit-scrollbar {
  display: none;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.carousel-btn {
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.carousel-btn:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* At the first or last slide, the button that can't go further fades. */
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-count {
  margin: 0;
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-dim);
}

/* ---------- Image lightbox ---------- */

/* zoom-in tells the reader it's clickable before they try. */
.example-zoom {
  display: block;
  cursor: zoom-in;
}

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
}

/* ::backdrop is the layer <dialog> paints behind a modal. There's no
   other way to style it, and it only exists when you use showModal(). */
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.lightbox img {
  display: block;
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}


/* The responsive image pair you'll reuse forever: max-width stops the
   image overflowing its column, height:auto scales it proportionally
   instead of squashing it. display:block removes the few pixels of
   phantom gap browsers leave under inline images. */
.example img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.example figcaption {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.example figcaption strong {
  color: var(--color-text);
}

.example code {
  background: var(--color-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--color-accent);
}



/* ---------- Optional how-to block ----------
   An inline <details> for step-by-step walkthroughs most readers will
   skip. Collapsed by default so the page stays short for them, and so
   the quiz further down stays reachable. Deliberately separate from
   .docs-toggle, which styles the sidebar's topic list as a small
   uppercase label. */

.howto {
  background: var(--color-surface);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius);
  margin: 1.5rem 0;
  overflow: hidden;
}

/* list-style:none removes the browser's default disclosure triangle in
   Chrome and Firefox. Older Safari ignores it and needs the ::-webkit-
   rule below. */
.howto > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.howto > summary::-webkit-details-marker {
  display: none;
}

.howto > summary:hover {
  color: var(--color-accent);
}

/* Our own arrow, drawn with borders instead of an image or icon font.
   currentColor makes it inherit the summary's text colour, so it turns
   yellow on hover for free. */
.howto > summary::before {
  content: "";
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.15s ease;
}

/* details[open] is an attribute selector. The browser adds and removes
   that "open" attribute itself as the block toggles, so both states are
   styleable with no JavaScript. */
.howto[open] > summary::before {
  transform: rotate(90deg);
}

/* Time estimate, pushed to the right edge by margin-left:auto inside
   the summary's flex row. */
.howto-time {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-dim);
}

.howto-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--line-faint);
}

.howto-body ol {
  margin: 0;
  padding-left: 1.4rem;
}

.howto-body li {
  margin-bottom: 0.9rem;
  padding-left: 0.3rem;
}

/* ::marker targets only the number on a list item, so the digits can be
   accented without touching the text beside them. */
.howto-body li::marker {
  color: var(--color-accent);
  font-weight: 700;
}

.howto-body li:last-child {
  margin-bottom: 0;
}

/* A screenshot inside a how-to isn't a grid item, so it goes full column
   width instead of sitting in a 260px track. Nesting the figure inside
   the <li> it illustrates keeps each picture tied to its own step. */
.howto-body .example {
  margin: 0.75rem 0 0;
}

/* Narrower screenshots for one how-to block without touching any other
   page. Add howto-compact alongside howto on the <details> element and
   every figure inside it shrinks, rather than tagging each one. Safe to
   go small because the lightbox still opens them at full resolution. */
.howto-compact .example {
  max-width: 420px;
}

/* For a logo or brand mark rather than a screenshot. Capping the figure
   keeps a 1280px source from rendering at full column width, and the
   image fills whatever the cap leaves after the card's padding. */
.example-logo {
  max-width: 200px;
}

.example-logo img {
  width: 100%;
}

/* A quiet finish line, so the reader can see where "done" is before
   they start. */
.howto-done {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-safe);
  background: var(--color-bg);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  color: var(--color-text-dim);
}

/* A callout for important information or warnings. */
.callout {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 6px;
}

.callout.info {
  border-left: 3px solid var(--color-info);
  background: var(--color-bg-info);
}

.callout.warning {
  border-left: 3px solid var(--color-warning);
  background: var(--color-bg-warning);
}

.docs-toggle summary{
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding: 0.45rem 0;
}

.docs-toggle summary:hover {
  color: var(--color-accent);
}

.danger {
  color:var(--color-danger);
}


/* Previous / next links at the bottom of a topic. */
.pager {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-soft);
}

.pager a {
  text-decoration: none;
  font-weight: 600;
}

.pager-next {
  margin-left: auto;
}

@media (max-width: 720px) {
  .docs {
    /* minmax(0, 1fr) rather than plain 1fr: plain 1fr lets the column
       stretch to fit anything wide inside it, like the carousel's row
       of slides, which pushed the whole page wider than the phone. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .docs-sidebar {
    position: static;
  }

  .docs-nav ol {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- Utility: centered text ---------- */

.center-text {
  text-align: center;
}

/* ---------- Footer ---------- */

footer.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 1.5rem 0;
  color: var(--color-text-dim);
  font-size: 0.85rem;
  text-align: center;
}