/* ==========================================================================
   Whistleblowers Australia — Plain HTML Site Stylesheet
   Translates the Next.js/Tailwind CSS design to plain CSS.
   Mobile-first responsive design with CSS custom properties.

   HOW THIS FILE IS ORGANISED
   --------------------------
   1.  CSS Custom Properties  – Colour palette, spacing, shadows, etc.
   2.  CSS Reset / Base        – Sensible defaults for all elements.
   3.  Typography              – Headings, paragraphs, links.
   4.  Layout                  – Containers, flexbox helpers, centering.
   5.  Navbar                  – Top navigation bar.
   6.  Search Bar              – Inline search in the navbar.
   7.  Card Grid               – The grid of clickable cards on pages.
   8.  Quick Navigation        – The sidebar that appears on long pages.
   9.  Document List           – The list layout on Forms & Downloads.
   10. Search Results Page     – Full-page search results.
   11. Prose Styles            – Readable text blocks (paragraphs, lists).
   12. Utilities               – Small helper classes (colours, spacing…).
   13. Responsive Helpers      – Show/hide things at different screen sizes.
   14. Newsletter Specific     – Styles only used on the Newsletters page.
   15. Page with Sidebar       – Layout shift when a sidebar is present.
   16. Stacked Content         – Vertical spacing between child elements.
   17. Form Inputs             – Text input styling.
   18. Print Styles            – What changes when someone prints the page.

   CSS TIP: "Mobile-first" means the default styles target phones.
   We then use @media queries to add styles for larger screens.
   ========================================================================== */


/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   --------------------------------------------------------------------------
   CSS custom properties (also called "CSS variables") let you define a
   value once and reuse it everywhere.  They always start with two dashes
   (--).  You reference them with var(--name).

   Example:
     --blue-700: #1d4ed8;          <-- define the colour
     background-color: var(--blue-700);  <-- use it later

   WHY THIS IS USEFUL: If you ever want to change the brand blue, you
   only change it in ONE place below and it updates the whole site.
   ========================================================================== */

:root {
  /* "root" means these variables are available everywhere on the page. */

  /* --- Blue palette ---
     Numbers go from light (50) to dark (800).
     Lower numbers = lighter, higher numbers = darker. */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;   /* This is the primary brand colour. */

  /* --- Gray palette --- */
  --gray-50:  #f9fafb;   /* Almost white — used for subtle backgrounds */
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;   /* Light border colour */
  --gray-300: #d1d5db;   /* Input border colour */
  --gray-400: #9ca3af;
  --gray-500: #6b7280;   /* Secondary text colour */
  --gray-600: #4b5563;
  --gray-700: #374151;   /* Main body text colour */
  --gray-800: #1f2937;   /* Darkest text colour */

  /* --- Other colours --- */
  --white:   #ffffff;
  --green-600: #16a34a;

  /* --- Typography ---
     font-family is the typeface used across the whole site.
     "Arial, Helvetica, sans-serif" means: try Arial first,
     then Helvetica, then any sans-serif font the browser has. */
  --font-family: Arial, Helvetica, sans-serif;

  /* --- Spacing scale (rem) ---
     "rem" stands for "root em" — it is relative to the browser's
     base font size (usually 16px).  So 1rem = 16px, 0.5rem = 8px.
     Using rem instead of px means the layout scales if the user
     changes their browser font size (good for accessibility). */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* --- Shadows ---
     box-shadow adds a drop-shadow effect behind an element.
     Format: horizontal-offset  vertical-offset  blur  spread  colour
     "rgba" is a colour with transparency (the last number is opacity). */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* --- Border radius ---
     border-radius rounds the corners of an element.
     Higher values = rounder corners.
     "9999px" makes a fully circular/pill shape. */
  --rounded:    0.25rem;   /* Slightly rounded */
  --rounded-md: 0.375rem;  /* Medium rounding */
  --rounded-lg: 0.5rem;    /* More rounded */
  --rounded-full: 9999px;  /* Fully circular */

  /* --- Transitions ---
     Transitions make property changes animate smoothly instead of
     snapping instantly.  Format: property  duration  timing-function.
     "ease" means it starts slow, speeds up, then slows down again. */
  --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  --transition-opacity: opacity 0.15s ease;
  --transition-shadow: box-shadow 0.15s ease;
  --transition-transform: transform 0.3s ease-in-out;
}


/* ==========================================================================
   2. CSS Reset / Base
   --------------------------------------------------------------------------
   Browsers apply their own default styles (margins, padding, etc.) which
   differ between browsers.  A "reset" removes those defaults so every
   browser starts from the same baseline, giving you full control.
   ========================================================================== */

/* The "*" selector means "every element".
   ::before and ::after are pseudo-elements (decorative extras).
   box-sizing: border-box  means padding and border are INCLUDED
   in an element's width/height — much easier to work with. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;          /* Clicking an anchor link scrolls smoothly instead of jumping */
  -webkit-text-size-adjust: 100%;   /* Prevents iOS from auto-resizing text in landscape mode */
}

body {
  font-family: var(--font-family);
  line-height: 1.5;                 /* Space between lines of text (1.5 = 150% of font size) */
  color: var(--gray-800);           /* Default text colour — dark gray */
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;       /* Makes text look smoother on Mac/iOS */
  -moz-osx-font-smoothing: grayscale;
  /* Content stays visible while the shared navigation loads. */
}

/* Legacy pages retain this marker when navigation has finished loading. */
body.ready {
  opacity: 1;
}

/* Images default to responsive behaviour: never wider than their
   container, and height scales automatically to keep proportions. */
img {
  max-width: 100%;
  height: auto;
  display: block;       /* Removes the small gap that appears below inline images */
}

/* Remove default bullet points and numbers from lists.
   We add them back with specific classes where needed. */
ul, ol {
  list-style: none;
}

/* Remove default underlines from links — we style them ourselves. */
a {
  text-decoration: none;
}

/* Reset buttons to have no border or background by default.
   This makes it easier to style custom buttons from scratch. */
button {
  cursor: pointer;       /* Shows the hand/pointer cursor on hover */
  border: none;
  background: none;
  font-family: inherit;  /* "inherit" means "use the same font as the parent" */
  font-size: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
}

/* Let long reference URLs wrap inside narrow content columns. */
main {
  overflow-wrap: anywhere;
}

/* Keep in-page destinations below the sticky navigation. */
main.min-h-screen[id],
main.min-h-screen [id] {
  scroll-margin-top: 6rem;
}


/* ==========================================================================
   3. Typography
   --------------------------------------------------------------------------
   Typography = how text looks: size, weight (boldness), colour, spacing.
   "rem" sizes relative to browser base (usually 16px).
   So 2.25rem = 36px, 1.5rem = 24px, etc.
   ========================================================================== */

h1 {
  font-size: 2.25rem;       /* 36px — largest heading */
  font-weight: 700;         /* 700 = bold */
  color: var(--blue-800);   /* Brand blue */
  line-height: 1.2;         /* Tighter line spacing for headings */
}

h2 {
  font-size: 1.5rem;        /* 24px */
  font-weight: 700;
  color: var(--blue-800);
  line-height: 1.3;
}

h3 {
  font-size: 1.125rem;      /* 18px */
  font-weight: 600;         /* 600 = semi-bold (slightly less bold than 700) */
  color: var(--blue-800);
  line-height: 1.4;
}

h4 {
  font-size: 1.125rem;      /* 18px — same size as h3 but lighter weight */
  font-weight: 500;         /* 500 = medium weight */
  color: var(--blue-800);
  line-height: 1.4;
}

p {
  color: var(--gray-700);
  margin-bottom: 1rem;      /* Adds space below each paragraph */
}

/* Makes paragraphs slightly larger when the "text-lg" class is used */
p.text-lg,
.text-lg p {
  font-size: 1.125rem;      /* 18px instead of the default 16px */
}

/* All links are blue by default */
a {
  color: var(--blue-600);
}

/* Underline appears only when the user hovers over a link */
a:hover {
  text-decoration: underline;
}

/* <mark> is used to highlight search terms in results */
mark {
  background-color: #fef08a; /* yellow highlight */
  padding: 0.125em 0.25em;
  border-radius: 2px;
}

strong {
  font-weight: 700;         /* Bold */
}

em {
  font-style: italic;
}

/* @media query: applies styles ONLY when the screen is at least 768px wide.
   768px is roughly the width of a tablet in portrait mode.
   This makes h1 bigger on tablets and desktops. */
@media (min-width: 768px) {
  h1 {
    font-size: 3rem;         /* 48px on larger screens */
  }
}


/* ==========================================================================
   4. Layout
   --------------------------------------------------------------------------
   These are helper classes for controlling width, centering, and spacing.

   CSS TIP: "margin-left: auto; margin-right: auto;" centres a block
   element horizontally within its parent.  This only works when the
   element has a max-width or width set.
   ========================================================================== */

/* A centered container with max width and side padding. */
.container {
  width: 100%;
  max-width: 80rem;    /* 1280px — prevents content from stretching too wide on big monitors */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);    /* 16px padding on each side */
  padding-right: var(--space-4);
}

/* Max-width classes — used to control how wide a section can get.
   The content still centres itself thanks to mx-auto. */
.max-w-7xl { max-width: 80rem; }    /* 1280px — widest */
.max-w-5xl { max-width: 64rem; }    /* 1024px */
.max-w-4xl { max-width: 56rem; }    /* 896px  */
.max-w-3xl { max-width: 48rem; }    /* 768px — narrowest, good for reading text */

/* "mx-auto" = margin-x auto = centres an element horizontally */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Makes an element at least as tall as the browser window (viewport).
   "vh" = viewport height.  100vh = 100% of the window height. */
.min-h-screen {
  min-height: 100vh;
}

/* Standard section padding — generous space above/below,
   with side padding that grows on larger screens (see @media below). */
.section-padding {
  padding-top: var(--space-16);     /* 64px */
  padding-bottom: var(--space-16);
  padding-left: var(--space-4);     /* 16px */
  padding-right: var(--space-4);
}

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

/* --- Flexbox helpers ---
   Flexbox is a CSS layout mode that makes it easy to arrange items in
   a row or column.  "display: flex" turns an element into a flex container.
   Its children automatically become flex items that can be aligned,
   spaced, and reordered. */
.flex {
  display: flex;                    /* Activates flexbox on this element */
}

.flex-col {
  flex-direction: column;           /* Stack children vertically (top to bottom) */
}

.flex-row {
  flex-direction: row;              /* Arrange children horizontally (left to right) — this is the default */
}

.flex-grow {
  flex-grow: 1;                     /* This item expands to fill any remaining space in the flex container */
}

.flex-shrink-0 {
  flex-shrink: 0;                   /* Prevents this item from shrinking when space is tight */
}

.items-center {
  align-items: center;              /* Vertically centres flex children within their row */
}

.items-start {
  align-items: flex-start;          /* Aligns flex children to the top of their row */
}

.justify-center {
  justify-content: center;          /* Horizontally centres flex children */
}

.justify-between {
  justify-content: space-between;   /* Pushes first child to the left and last child to the right */
}

.relative {
  position: relative;               /* Enables top/left/bottom/right offsets and acts as a positioning anchor for children with position:absolute */
}

.bg-white {
  background-color: var(--white);
}

/* On screens 640px+ (small tablets), give sections more side padding */
@media (min-width: 640px) {
  .section-padding {
    padding-left: var(--space-6);   /* 24px */
    padding-right: var(--space-6);
  }
}

/* On screens 1024px+ (desktops), even more side padding */
@media (min-width: 1024px) {
  .section-padding {
    padding-left: var(--space-8);   /* 32px */
    padding-right: var(--space-8);
  }
}


/* ==========================================================================
   5. Navbar (.navbar)
   --------------------------------------------------------------------------
   The blue navigation bar at the top of every page.
   "position: sticky" keeps it visible as you scroll down.
   "z-index" controls stacking order — higher numbers appear on top.
   ========================================================================== */

.navbar {
  background-color: var(--blue-700);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);     /* Drop shadow below the navbar */
  position: sticky;                 /* Sticks to the top of the viewport when you scroll */
  top: 0;                           /* Sticks at the very top */
  z-index: 70;                      /* Ensures the navbar appears above page content */
}

/* The inner container that positions logo, search, and links in a row */
.navbar-inner {
  display: flex;                    /* Flex row (horizontal) by default */
  justify-content: space-between;   /* Logo on left, links on right */
  align-items: center;              /* Vertically centres everything */
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- Logo --- */
.navbar-logo {
  color: var(--white);
  font-size: 1.25rem;              /* 20px */
  font-weight: 700;
  letter-spacing: -0.025em;        /* Slightly tighter letter spacing */
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar-logo:hover {
  text-decoration: none;
  color: var(--white);
}

.navbar-logo img {
  width: 32px;
  height: 32px;
  margin-right: 0.5rem;
}

/* On small screens, show the short text "WBA" */
.navbar-logo-text-short {
  display: inline;
}

/* On small screens, hide the full text "Whistleblowers Australia" */
.navbar-logo-text-full {
  display: none;
}

/* On extra-large screens (1280px+), swap: hide short, show full */
@media (min-width: 1280px) {
  .navbar-logo-text-short {
    display: none;
  }
  .navbar-logo-text-full {
    display: inline;
  }
}

/* --- Desktop search (centred in the navbar) ---
   Hidden on mobile, shown on screens 768px and wider. */
.navbar-search-desktop {
  display: none;                    /* Hidden on mobile */
}

@media (min-width: 768px) {
  .navbar-search-desktop {
    display: flex;
    justify-content: center;
    flex: 1;                        /* Takes up remaining space between logo and links */
  }
  .navbar-search-desktop .search-bar {
    width: 16rem;                   /* Fixed width for the search input */
  }
}

/* --- Desktop nav links (Home, About, Contact, More) ---
   Hidden on mobile, shown on screens 768px and wider. */
.navbar-links-desktop {
  display: none;                    /* Hidden on mobile */
}

@media (min-width: 768px) {
  .navbar-links-desktop {
    display: flex;
    align-items: center;
    gap: 1.5rem;                    /* Space between each link */
  }
}

/* Individual navbar link styling */
.navbar-link {
  color: var(--white);
  opacity: 0.9;                    /* Slightly transparent by default */
  display: flex;
  align-items: center;
  white-space: nowrap;              /* Prevents text from wrapping to a new line */
  transition: var(--transition-opacity);
  text-decoration: none;
  font-size: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* On hover/focus, link becomes fully opaque (brighter) */
.navbar-link:hover,
.navbar-link:focus {
  opacity: 1;
  text-decoration: none;
  color: var(--white);
}

/* The small down-arrow icon in the "More" dropdown button */
.navbar-link .chevron {
  margin-left: 0.25rem;
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;  /* Smooth rotation animation */
}

/* When the dropdown is open, rotate the arrow 180 degrees (points up) */
.navbar-link .chevron.open {
  transform: rotate(180deg);
}

/* --- Mobile hamburger menu toggle button ---
   Visible only on mobile (hidden at 768px+). */
.navbar-mobile-toggle {
  display: block;                   /* Visible on mobile */
}

@media (min-width: 768px) {
  .navbar-mobile-toggle {
    display: none;                  /* Hidden on tablet/desktop */
  }
}

/* --- Desktop dropdown ("More" menu) ---
   position: relative on the parent makes the dropdown
   position itself relative to the "More" button. */
.navbar-dropdown {
  position: relative;
}

/* The actual dropdown panel that appears below the "More" button */
.navbar-dropdown-menu {
  position: absolute;               /* Taken out of normal flow, positioned relative to .navbar-dropdown */
  right: 0;                         /* Aligned to the right edge of the button */
  top: 100%;                        /* Positioned just below the button */
  margin-top: 0.5rem;
  width: 16rem;
  background-color: var(--white);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem 0;
  z-index: 70;
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
}

/* Each link inside the dropdown */
.navbar-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--gray-800);
  text-decoration: none;
  transition: var(--transition-colors);  /* Smooth colour change on hover */
}

.navbar-dropdown-item:hover {
  background-color: var(--blue-100);     /* Light blue highlight on hover */
  text-decoration: none;
  color: var(--gray-800);
}

/* --- Mobile menu ---
   The full-width menu that slides open when you tap the hamburger. */
.navbar-mobile-menu {
  width: 100%;
  background-color: var(--blue-800);     /* Darker blue than the navbar */
  margin-top: 0.5rem;
  border-radius: var(--rounded-md);
  padding: 0.5rem;
  z-index: 70;
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
}

@media (min-width: 768px) {
  .navbar-mobile-menu { display: none !important; }
}

/* Search bar wrapper inside the mobile menu */
.navbar-mobile-search {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

/* Each link in the mobile menu */
.navbar-mobile-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--white);
  text-decoration: none;
  transition: var(--transition-colors);
  border-radius: var(--rounded-md);
}

.navbar-mobile-link:hover {
  background-color: var(--blue-700);     /* Slightly lighter blue on hover */
  text-decoration: none;
  color: var(--white);
}

/* --- Icon margins in nav items ---
   Adds a small gap between the icon and the link text. */
.nav-icon {
  margin-right: 0.5rem;
  width: 1em;                           /* Sizes the icon relative to the text size */
  height: 1em;
  flex-shrink: 0;                       /* Prevents the icon from shrinking */
}


/* ==========================================================================
   6. Search Bar (.search-bar)
   --------------------------------------------------------------------------
   The search input that appears in the navbar (desktop and mobile).
   Uses position:absolute for the magnifying glass icon and clear button
   so they sit inside the input field.
   ========================================================================== */

.search-bar {
  position: relative;                    /* Anchor point for the dropdown */
  width: 100%;
}

@media (min-width: 768px) {
  .search-bar {
    width: 16rem;                        /* Fixed width on desktop */
  }
}

.search-bar form {
  display: flex;
  align-items: center;
}

.search-bar .search-input-wrapper {
  position: relative;                    /* Anchor for the icon and clear button */
  flex-grow: 1;
}

/* The actual text input field */
.search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 2.5rem;   /* Extra left padding makes room for the magnifying glass icon */
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-md);
  background-color: var(--blue-600);     /* Blue background to match the navbar */
  color: var(--white);
  font-size: 0.875rem;                   /* 14px — slightly smaller text */
  outline: none;                         /* Removes the browser's default focus outline */
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Placeholder text colour (the "Search..." text when input is empty) */
.search-input::placeholder {
  color: var(--blue-200);                /* Light blue placeholder */
}

/* When the input is focused (clicked into), show a blue ring around it */
.search-input:focus {
  box-shadow: 0 0 0 2px var(--blue-500); /* Blue "focus ring" */
  border-color: transparent;
}

/* The magnifying glass icon inside the search input.
   position:absolute + top:50% + translateY(-50%) centres it vertically. */
.search-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);           /* Perfectly centres vertically */
  color: var(--white);
  pointer-events: none;                  /* Click passes through to the input behind it */
  display: flex;
  align-items: center;
}

/* The "X" button to clear the search input */
.search-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.25rem;
}

.search-clear:hover {
  color: var(--gray-200);
}

/* --- Search dropdown (autocomplete results) ---
   Appears below the search input when you type. */
.search-dropdown {
  position: absolute;                    /* Floats below the input */
  z-index: 50;
  margin-top: 0.5rem;
  width: 100%;
  background-color: var(--white);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  max-height: min(24rem, calc(100dvh - 6rem)); /* Keep suggestions inside short windows */
  overflow-y: auto;                      /* Adds a scrollbar when content overflows */
}

.search-dropdown ul {
  padding: 0.25rem 0;
}

/* Each result item in the dropdown */
.search-dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--gray-800);
  text-decoration: none;
  transition: var(--transition-colors);
}

.search-dropdown-item:hover {
  background-color: var(--blue-50);      /* Very light blue highlight */
  text-decoration: none;
  color: var(--gray-800);
}

/* The result title (bold text) */
.search-dropdown-item .title {
  font-weight: 500;
  display: block;
}

/* The parent page name shown below the title in smaller gray text */
.search-dropdown-item .parent {
  font-size: 0.875rem;
  color: var(--gray-500);
  display: block;
}

/* The "View all results" link at the bottom of the dropdown */
.search-dropdown-footer {
  border-top: 1px solid var(--gray-100);
}

.search-dropdown-footer a {
  display: block;
  padding: 0.5rem 1rem;
  text-align: center;
  color: var(--blue-600);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-colors);
}

.search-dropdown-footer a:hover {
  background-color: var(--blue-50);
  text-decoration: none;
}

/* "No results found" message */
.search-dropdown-empty {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   7. Card Grid
   --------------------------------------------------------------------------
   CSS Grid is a layout system for creating rows and columns.
   "grid-template-columns" defines how many columns and their widths.
   "1fr" means "1 fraction of the available space" — so "repeat(3, 1fr)"
   creates 3 equal-width columns.

   On mobile: 1 column.  On tablet (768px): 2 columns.  On desktop (1024px): 3 columns.
   ========================================================================== */

.card-grid {
  display: grid;                         /* Activates CSS Grid */
  grid-template-columns: 1fr;            /* 1 column on mobile */
  gap: var(--space-6);                   /* 24px gap between cards */
}

/* 2 columns on tablet screens */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columns on desktop screens */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Base card styling — shared by all card variants */
.card {
  padding: var(--space-6);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: block;
  transition: var(--transition-colors), var(--transition-shadow);
}

.card:hover {
  text-decoration: none;
}

/* Blue card variant (used on the homepage for navigation links) */
.card-blue {
  background-color: var(--blue-100);     /* Light blue */
}

.card-blue:hover {
  background-color: var(--blue-200);     /* Slightly darker blue on hover */
}

/* Very light blue card variant */
.card-blue-50 {
  background-color: var(--blue-50);
}

/* Gray card variant */
.card-gray {
  background-color: var(--gray-50);
}

/* Content box — used for main text sections (gray background with padding) */
.content-box {
  background-color: var(--gray-50);
  padding: var(--space-8);               /* 32px padding all around */
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
}

/* 2-column grid variant (used for side-by-side content on some pages) */
.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr;            /* 1 column on mobile */
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);  /* 2 columns on tablet/desktop */
  }
}


/* ==========================================================================
   8. Quick Navigation Sidebar (.quick-nav)
   --------------------------------------------------------------------------
   A sidebar that appears on long pages (Stories, Strategy, Newsletters).
   On mobile, it slides in from the left when you tap the toggle button.
   On desktop (768px+), it is always visible on the left side.

   KEY CSS CONCEPTS USED:
   - position:fixed = stays in place even when you scroll
   - transform:translateX(-100%) = moved off-screen to the left
   - transition = animates the sliding motion smoothly
   ========================================================================== */

/* The floating button that opens the sidebar on mobile */
.quick-nav-toggle {
  display: block;
  position: fixed;                       /* Stays in place while scrolling */
  right: 1rem;
  bottom: 1rem;                          /* Clear of the navbar and page title */
  z-index: 60;
  padding: 0.5rem;
  background-color: var(--blue-600);
  color: var(--white);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  border: none;
  cursor: pointer;
  transition: var(--transition-colors);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-nav-toggle:hover {
  background-color: var(--blue-700);
}

.quick-nav-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-500);
}

/* Hide the toggle button on desktop — the sidebar is always visible there */
@media (min-width: 768px) {
  .quick-nav-toggle {
    display: none;
  }
}

/* The sidebar panel itself */
.quick-nav-sidebar {
  position: fixed;                       /* Stays in place while scrolling */
  left: 0;
  top: 76px;                            /* Below the sticky navbar */
  height: calc(100dvh - 76px);
  z-index: 30;
  background-color: var(--gray-100);
  box-shadow: var(--shadow-lg);
  width: 14rem;                          /* 224px wide */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);          /* Slides the sidebar off-screen to the left */
  overflow-y: auto;                      /* Scrollable if there are many links */
}

/* When the "open" class is added (by JS), slide the sidebar into view */
.quick-nav-sidebar.open {
  transform: translateX(0);
}

/* On desktop, the sidebar is always visible (no sliding needed) */
@media (min-width: 768px) {
  .quick-nav-sidebar {
    transform: translateX(0);            /* Always visible */
    box-shadow: none;
    border-right: 1px solid var(--gray-200);
  }
}

/* Sidebar header — only shown on mobile */
.quick-nav-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.quick-nav-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-800);
}

@media (min-width: 768px) {
  .quick-nav-header {
    display: none;                       /* Hidden on desktop */
  }
}

/* Navigation links inside the sidebar */
.quick-nav-links {
  display: flex;
  flex-direction: column;               /* Stacked vertically */
  gap: 0.25rem;
  padding: var(--space-4) var(--space-2);
  flex-grow: 1;
  overflow-y: auto;
}

.quick-nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--gray-700);
  border-radius: var(--rounded-md);
  text-decoration: none;
  font-size: 0.875rem;                  /* 14px */
  font-weight: 500;
  transition: var(--transition-colors);
}

.quick-nav-link:hover {
  background-color: var(--blue-100);
  color: var(--blue-700);
  text-decoration: none;
}

/* Icon next to each sidebar link */
.quick-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.75rem;
  color: var(--gray-500);
}

.quick-nav-link:hover .quick-nav-icon {
  color: var(--blue-600);
}


/* ==========================================================================
   9. Document List (forms-downloads)
   --------------------------------------------------------------------------
   A vertical list of downloadable documents. Each item shows the
   document name, description, and a download button.
   On mobile the button sits below the text; on desktop they sit side by side.
   ========================================================================== */

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Adds a thin gray line between list items (but not above the first one).
   The "+" selector means "the next sibling" — so "li + li" targets
   every <li> that comes after another <li>. */
.doc-list > li + li {
  border-top: 1px solid var(--gray-200);
}

/* Each document item — stacks vertically on mobile */
.doc-item {
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;               /* Text above button on mobile */
  column-gap: var(--space-4);
}

.doc-item > * {
  min-width: 0;
}

.doc-item .btn-primary {
  flex-shrink: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
}

/* On tablet+, lay out the text and button side by side */
@media (min-width: 768px) {
  .doc-item {
    flex-direction: row;                /* Text on left, button on right */
    align-items: center;
    justify-content: space-between;
  }
}

/* The text portion of a document item */
.doc-item .doc-info {
  flex: 1;                              /* Takes up remaining space */
}

.doc-item .doc-info h3 {
  margin-bottom: 0.25rem;
}

.doc-item .doc-info p {
  color: var(--gray-600);
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .doc-item .doc-info p {
    margin-bottom: 0;
  }
}

/* Primary button — the blue "Download PDF" button */
.btn-primary {
  display: inline-block;
  background-color: var(--blue-700);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: var(--rounded);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-colors);  /* Smooth colour change on hover */
  white-space: nowrap;                   /* Prevents "Download PDF" from wrapping */
  text-align: center;
  margin-top: 0.5rem;
}

.btn-primary:hover {
  background-color: var(--blue-800);     /* Darker blue on hover */
  text-decoration: none;
  color: var(--white);
}

@media (min-width: 768px) {
  .btn-primary {
    margin-top: 0;                       /* Remove top margin when button is beside text */
  }
}

/* Secondary button — used for "Subscribe" and similar actions */
.btn-secondary {
  display: inline-block;
  background-color: var(--blue-600);
  color: var(--white);
  padding: 0.5rem 1.5rem;
  border-radius: var(--rounded-md);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-colors);
  border: none;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--blue-700);
  text-decoration: none;
  color: var(--white);
}


/* ==========================================================================
   10. Search Results Page
   --------------------------------------------------------------------------
   The full search results page at /search/index.html.
   Contains a large search input and a list of result cards.
   ========================================================================== */

/* The search form at the top of the results page */
.search-results-form {
  display: flex;
  margin-bottom: var(--space-8);
}

.search-results-form .search-input-wrapper {
  position: relative;
  flex-grow: 1;
}

/* The large search input on the results page (different from navbar search) */
.search-results-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem; /* Left padding for the magnifying glass icon */
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-md);
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.search-results-input:focus {
  box-shadow: 0 0 0 2px var(--blue-500);
  border-color: transparent;
}

/* Magnifying glass icon inside the results page search input */
.search-results-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* The "Search" button next to the results page input */
.search-results-btn {
  margin-left: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--blue-700);
  color: var(--white);
  border: none;
  border-radius: var(--rounded-md);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-colors);
  white-space: nowrap;
}

.search-results-btn:hover {
  background-color: var(--blue-800);
}

/* Grayed out and non-clickable when the button is disabled */
.search-results-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Each search result card */
.search-result-item {
  border: 1px solid var(--gray-100);
  border-radius: var(--rounded-lg);
  padding: var(--space-4);
  transition: var(--transition-shadow);
  display: block;
  text-decoration: none;
  color: inherit;                        /* Uses the parent's text colour */
}

.search-result-item:hover {
  box-shadow: var(--shadow-md);          /* Lifts slightly on hover */
  text-decoration: none;
  color: inherit;
}

.search-result-item .result-inner {
  display: flex;
  align-items: flex-start;
}

/* The icon to the left of each search result */
.search-result-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
  margin-right: 0.75rem;
  color: var(--blue-600);
}

/* Green icon for heading-type results */
.search-result-icon.heading-icon {
  color: var(--green-600);
}

.search-result-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--blue-800);
  margin-bottom: 0.25rem;
}

.search-result-parent {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.search-result-excerpt {
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.search-result-link {
  color: var(--blue-600);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.search-result-link:hover {
  text-decoration: underline;
}

.search-result-link .arrow {
  margin-left: 0.25rem;
}

/* "Found X results" text */
.search-results-count {
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

/* Results list — stacked vertically with gaps */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The "no results" empty state */
.search-no-results {
  text-align: center;
  padding: 2.5rem var(--space-4);
  background-color: var(--gray-50);
  border-radius: var(--rounded-lg);
}

.search-no-results .no-results-icon {
  font-size: 2.5rem;
  color: var(--gray-300);
  margin-bottom: var(--space-4);
}

.search-no-results h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.search-no-results p {
  color: var(--gray-500);
}

.search-no-results a {
  color: var(--blue-600);
}


/* ==========================================================================
   11. Prose Styles
   --------------------------------------------------------------------------
   "Prose" styles make long-form text content readable.
   When you wrap text in a div with class="prose", paragraphs get proper
   spacing, lists get bullet points back, and headings get top margins.
   ========================================================================== */

.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;                     /* Extra-generous line spacing for readability */
  color: var(--gray-700);
}

/* Unordered lists (bullet points) inside prose */
.prose ul {
  list-style-type: disc;                 /* Restores the round bullet points */
  padding-left: 1.5rem;                  /* Indents the list */
  margin-bottom: 1rem;
}

.prose ul li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
  color: var(--gray-700);
}

.prose ul li + li {
  margin-top: 0.25rem;
}

/* Ordered lists (numbered) inside prose */
.prose ol {
  list-style-type: decimal;             /* Shows 1. 2. 3. etc. */
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose ol li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Links inside prose */
.prose a {
  color: var(--blue-600);
}

.prose a:hover {
  text-decoration: underline;
}

/* Headings inside prose get top margin to separate them from preceding text */
.prose h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Styled list — used on About and How-To pages for larger list items */
.styled-list {
  list-style-type: disc;                 /* Round bullet points */
  padding-left: 1.5rem;
}

.styled-list li {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;                   /* 18px */
  color: var(--gray-700);
  line-height: 1.75;
}

.styled-list li + li {
  margin-top: 0;
}


/* ==========================================================================
   12. Utilities
   --------------------------------------------------------------------------
   Small, single-purpose helper classes.  Each one does ONE thing.
   You combine them on an HTML element to build up the styling you want.

   Example:  <p class="text-lg text-gray-600 mb-4">
   This makes the paragraph: 18px font, gray colour, 1rem bottom margin.
   ========================================================================== */

/* --- Display --- */
.hidden        { display: none !important; }   /* !important overrides all other display rules */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; align-items: center; }

/* --- Font style / weight --- */
.italic        { font-style: italic; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* --- Font size --- */
.text-sm  { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }      /* 16px */
.text-lg  { font-size: 1.125rem; }   /* 18px */
.text-xl  { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }     /* 24px */
.text-3xl { font-size: 1.875rem; }   /* 30px */
.text-4xl { font-size: 2.25rem; }    /* 36px */

/* --- Text colours --- */
.text-white    { color: var(--white); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-800 { color: var(--blue-800); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }

/* --- Background colours --- */
.bg-blue-50  { background-color: var(--blue-50); }
.bg-blue-100 { background-color: var(--blue-100); }
.bg-gray-50  { background-color: var(--gray-50); }

/* --- Margin-bottom ---
   "mb" = margin-bottom.  The number is a spacing step.
   mb-4 = margin-bottom: 1rem (16px). */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }   /*  4px */
.mb-2  { margin-bottom: 0.5rem; }    /*  8px */
.mb-3  { margin-bottom: 0.75rem; }   /* 12px */
.mb-4  { margin-bottom: 1rem; }      /* 16px */
.mb-5  { margin-bottom: 1.25rem; }   /* 20px */
.mb-6  { margin-bottom: 1.5rem; }    /* 24px */
.mb-8  { margin-bottom: 2rem; }      /* 32px */
.mb-10 { margin-bottom: 2.5rem; }    /* 40px */
.mb-12 { margin-bottom: 3rem; }      /* 48px */

/* --- Margin-top ---
   "mt" = margin-top. */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }

/* --- Padding ---
   "p" = padding on all sides.  "px" = left and right.  "py" = top and bottom. */
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* --- Gap (for flex and grid containers) ---
   "gap" sets the space between children in a flex or grid container. */
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* --- Border ---
   "border-b" adds a thin line at the bottom of an element. */
.border-b     { border-bottom: 1px solid var(--gray-200); }
.border-blue-200 { border-color: var(--blue-200); }

/* --- Border radius --- */
.rounded    { border-radius: var(--rounded); }
.rounded-md { border-radius: var(--rounded-md); }
.rounded-lg { border-radius: var(--rounded-lg); }

/* --- Shadow --- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* --- Whitespace --- */
.whitespace-nowrap { white-space: nowrap; }    /* Prevents text from wrapping */

/* --- Tracking (letter-spacing) --- */
.tracking-tight { letter-spacing: -0.025em; }  /* Slightly tighter letter spacing */

/* --- Spinner animation ---
   Creates a circular loading indicator.  It uses a CSS animation
   that rotates the element 360 degrees continuously. */
.spinner {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid transparent;
  border-top-color: var(--blue-500);     /* Only top and bottom borders are visible */
  border-bottom-color: var(--blue-500);
  border-radius: var(--rounded-full);    /* Makes it circular */
  animation: spin 0.75s linear infinite; /* Rotates forever, 0.75 seconds per revolution */
}

/* @keyframes defines a CSS animation.
   This one goes from 0 degrees to 360 degrees rotation. */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Smaller spinner variant (used inside the search loading indicator) */
.spinner-sm {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top-color: currentColor;        /* Uses whatever text colour is set */
  border-radius: var(--rounded-full);
  animation: spin 0.75s linear infinite;
  margin-right: 0.5rem;
}

/* --- Screen-reader only ---
   Makes an element invisible on screen but still readable by screen
   readers (assistive technology for visually impaired users).
   This is an accessibility best practice. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   13. Responsive Breakpoints — Visibility Helpers
   --------------------------------------------------------------------------
   These classes let you show or hide elements at different screen sizes.
   "md" refers to the "medium" breakpoint, which is 768px (tablet size).

   Example:
     <div class="md-show">Only visible on tablet and larger</div>
     <div class="md-hide">Only visible on mobile</div>
   ========================================================================== */

/* Hidden by default (mobile), visible on tablet+ */
.md-show {
  display: none;
}

@media (min-width: 768px) {
  .md-show {
    display: block;
  }
  .md-show-flex {
    display: flex;
  }
  .md-hide {
    display: none !important;
  }
}

/* Responsive section padding — used on page sections.
   Side padding increases on larger screens for better readability. */
.section {
  padding-top: var(--space-16);          /* 64px */
  padding-bottom: var(--space-16);
  padding-left: var(--space-4);          /* 16px on mobile */
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .section {
    padding-left: var(--space-6);        /* 24px on small tablets */
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-left: var(--space-8);        /* 32px on desktops */
    padding-right: var(--space-8);
  }
}

/* Less vertical padding variant */
.section-sm {
  padding-top: var(--space-8);           /* 32px */
  padding-bottom: var(--space-8);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .section-sm {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .section-sm {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Medium vertical padding variant */
.section-md {
  padding-top: var(--space-12);          /* 48px */
  padding-bottom: var(--space-12);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .section-md {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .section-md {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}


/* ==========================================================================
   14. Newsletter Specific
   --------------------------------------------------------------------------
   Styles used only on the Newsletters page.
   ========================================================================== */

/* Each newsletter issue card */
.newsletter-card {
  background-color: var(--blue-50);
  padding: var(--space-5);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
}

.newsletter-card h4 {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--blue-800);
  margin-bottom: 0.5rem;
}

/* Year heading with a blue underline */
.newsletter-year-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--blue-800);
  border-bottom: 1px solid var(--blue-200);
  padding-bottom: 0.5rem;
  margin-bottom: var(--space-4);
}

/* "View Newsletter" link with an arrow icon */
.newsletter-link {
  color: var(--blue-600);
  display: inline-flex;                  /* Flex so the arrow icon sits next to the text */
  align-items: center;
  text-decoration: none;
  transition: var(--transition-colors);
}

.newsletter-link:hover {
  color: var(--blue-800);
  text-decoration: none;
}

.newsletter-link svg,
.newsletter-link .arrow {
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
}

/* Spacing between year sections */
.newsletter-year-section {
  margin-bottom: var(--space-8);
}

/* Newsletter grid — 1 column on mobile, 2 on tablet, 3 on desktop */
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .newsletter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .newsletter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Subscribe section at the bottom of the Newsletters page */
.subscribe-section {
  background-color: var(--blue-100);
  padding: var(--space-8);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
}

.subscribe-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-800);
  margin-bottom: var(--space-4);
}

/* The email subscription form — stacks vertically on mobile,
   goes side-by-side on small tablets+ (640px). */
.subscribe-form {
  display: flex;
  flex-direction: column;               /* Stacked on mobile */
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .subscribe-form {
    flex-direction: row;                /* Side-by-side on tablet+ */
  }
}

/* Email input in the subscribe form */
.subscribe-form input[type="email"] {
  flex-grow: 1;                         /* Stretches to fill available space */
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-md);
  outline: none;
  font-size: 1rem;
}

.subscribe-form input[type="email"]:focus {
  box-shadow: 0 0 0 2px var(--blue-500);
  border-color: transparent;
}


/* ==========================================================================
   15. Page with Sidebar Layout
   --------------------------------------------------------------------------
   When a page has a Quick Navigation sidebar, the main content needs to
   be pushed to the right so it doesn't sit behind the sidebar.
   On mobile there's no sidebar visible, so no margin is needed.
   ========================================================================== */

.page-with-sidebar {
  margin-left: 0;                       /* No offset on mobile */
}

@media (min-width: 768px) {
  .page-with-sidebar {
    margin-left: 14rem;                 /* 224px — matches the sidebar width */
  }
}


/* ==========================================================================
   16. Stacked Content Sections (space-y pattern)
   --------------------------------------------------------------------------
   "space-y" adds vertical spacing between consecutive child elements.
   It uses the "lobotomised owl" selector ( > * + * ) which means:
   "target every child element that comes after another child element".
   This adds margin-top to every child EXCEPT the first one.

   Example:
     <div class="space-y-6">
       <div>No top margin (first child)</div>
       <div>Has 1.5rem top margin</div>
       <div>Has 1.5rem top margin</div>
     </div>
   ========================================================================== */

.space-y-6 > * + * {
  margin-top: var(--space-6);           /* 24px between items */
}

.space-y-12 > * + * {
  margin-top: var(--space-12);          /* 48px between items */
}

.space-y-3 > * + * {
  margin-top: var(--space-3);           /* 12px between items */
}

.space-y-1 > * + * {
  margin-top: 0.25rem;                  /* 4px between items */
}


/* ==========================================================================
   17. Form Inputs (general)
   --------------------------------------------------------------------------
   A reusable text input style.  Apply class="form-input" to any <input>.
   ========================================================================== */

.form-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-md);
  outline: none;
  font-size: 1rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Blue focus ring when the user clicks into the input */
.form-input:focus {
  box-shadow: 0 0 0 2px var(--blue-500);
  border-color: transparent;
}


/* ==========================================================================
   18. Print Styles
   --------------------------------------------------------------------------
   @media print applies ONLY when the user prints the page (Ctrl+P / Cmd+P).
   We hide the navbar, sidebar, and search bar since they're not useful
   on paper, and switch to black text on a white background.
   ========================================================================== */

@media print {
  .navbar,
  .quick-nav-toggle,
  .quick-nav-sidebar,
  .search-bar {
    display: none !important;            /* Hide navigation elements when printing */
  }

  .page-with-sidebar {
    margin-left: 0 !important;           /* Remove sidebar offset on paper */
  }

  body {
    color: #000;                         /* Black text for printing */
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;          /* Underline links so they're visible in print */
  }
}

/* Shared navigation accessibility and stable loading. */
#navbar-placeholder { min-height: 76px; position: sticky; top: 0; z-index: 70; }
.navbar-inner { min-height: 44px; }
.navbar-mobile-toggle { color: white; min-height: 44px; padding: .5rem; }
.navbar-link, .navbar-mobile-link { min-height: 44px; }
.ui-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.search-input { min-height: 44px; }
.search-input::placeholder { color: #fff; opacity: 1; }
.search-clear { min-width: 32px; min-height: 32px; justify-content: center; }
:focus-visible { outline: 3px solid #9c5600; outline-offset: 4px; }
.navbar :focus-visible { outline-color: #fff; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: .75rem 1rem; background: #fff; color: #173b74; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}