:root {
  /* Brand palette sourced from shared/public/img/rabbit-mark-3A.svg --
     navy and red keep their historical variable names (touched by dozens of
     selectors and a few inline `style="color:var(--navy)"` attributes in the
     admin views) but now hold the logo's forest green / brown instead of the
     old blue/red. The success and error colors below stay untouched --
     those are UI semantics (paid/pending/failed, form errors), not brand color. */
  --navy: #2f5d50;
  --navy-dark: #1f4038;
  --red: #6b4a3a;
  --red-dark: #50382c;
  --cream: #e6e0d9;
  --text: #24272b;
  --muted: #5c6370;
  --border: #dfe1e6;
  --success-bg: #e6f4ea;
  --success-text: #1e6b33;
  --error-bg: #fbe9e7;
  --error-text: #9c2b20;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.55;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--navy); line-height: 1.2; }
h1 { font-size: 2.1rem; margin-top: 0.2em; }
h2 { font-size: 1.5rem; margin-top: 1.6em; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header / nav */
.site-header { background: var(--navy); color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; font-family: Georgia, serif; font-size: 1.25rem; font-weight: bold; }
.brand:hover { text-decoration: none; opacity: 0.9; }
/* White circular backing behind the mark -- its own ring color matches
   --navy exactly, so on the navy header it would otherwise vanish into the
   background and lose its outline (same reasoning as .ltp-badge's white box
   for the Red Cross mark). */
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #fff; flex-shrink: 0;
}
.brand-mark img { display: block; width: 26px; height: 26px; }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: #dde6e2; font-weight: 500; }
.main-nav a.active, .main-nav a:hover { color: #fff; }
.main-nav a:hover { text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.nav-user { color: #c7d3cc; font-size: 0.9rem; }

/* Mobile nav toggle -- checkbox hack (not a real <button>+JS toggle) so the
   menu opens/closes with zero JavaScript, matching this site's "works fully
   without JS" baseline (see site.js's header comment). The checkbox itself
   stays in the tab order (visually hidden, not display:none) so keyboard
   users can still reach and toggle it via its <label>; site.js layers on
   aria-expanded syncing, outside-click, and Escape-to-close as pure
   enhancement, not requirements. Hidden above the mobile breakpoint below,
   where the full .main-nav row is always shown instead. */
.nav-toggle-checkbox {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.nav-toggle-checkbox:focus-visible ~ .nav-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars span,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span { top: 6px; }
.nav-toggle-bars::after { top: 12px; }
/* Checked state morphs the three bars into an X. */
.nav-toggle-checkbox:checked ~ .nav-toggle .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle .nav-toggle-bars span { opacity: 0; }
.nav-toggle-checkbox:checked ~ .nav-toggle .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* "Classes" dropdown in the main nav -- shown on hover/focus (desktop mouse)
   and toggled by click via shared/public/js/site.js (adds/removes .is-open,
   for touch/keyboard use -- see that file). The trigger link itself still
   goes straight to /classes with JS disabled.
   `.nav-dropdown-menu`'s gap above the visible panel is `padding-top`, NOT
   `margin`, deliberately -- padding is still part of the hoverable box, so
   there's no dead zone between the trigger and the menu for the pointer to
   fall through (a `margin-top` gap there was closing the menu before the
   cursor could reach it). The actual visible panel is the `-inner` div. */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu-inner {
  min-width: 180px;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 6px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
  color: #dde6e2;
}
.nav-dropdown-menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-bottom: none;
  padding-bottom: 8px;
}

/* Below this, the header collapses to a hamburger: the full-width row of
   nav links (including the Classes and language dropdowns) becomes a
   vertical panel under the brand row, shown only while .nav-toggle-checkbox
   is checked. Dropdowns switch from an absolute-positioned floating panel
   (fine in a horizontal bar) to static/in-flow (so they push the rest of
   the vertical menu down instead of floating over it). */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: 3;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .nav-toggle-checkbox:checked ~ .main-nav { display: flex; }
  /* Plain links are direct children of the now flex-column .main-nav, so
     they're auto-"blockified" and their padding naturally sets the row
     height. The Classes/language trigger <a> is a *grandchild* (nested one
     level inside .nav-dropdown), so that blockification doesn't reach it --
     without an explicit display:block here it stays inline, its vertical
     padding never expands the row, and it renders roughly half as tall as
     every other row (visible as cramped spacing around Classes/English). */
  .main-nav > a, .main-nav > .nav-dropdown > a {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .main-nav a:hover { border-bottom: 1px solid var(--red); padding-bottom: 12px; }
  .nav-dropdown { position: static; width: 100%; }
  .nav-dropdown-menu { position: static; padding-top: 0; }
  .nav-dropdown-menu-inner {
    min-width: 0;
    width: 100%;
    margin: 0 0 6px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    box-shadow: none;
  }
  .nav-user { width: 100%; padding-top: 10px; }
}

/* Flash messages */
.flash { padding: 12px 0; font-weight: 500; }
.flash-success { background: var(--success-bg); color: var(--success-text); }
.flash-error { background: var(--error-bg); color: var(--error-text); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; padding: 70px 0; }
.hero-inner { max-width: 760px; }
.hero h1 { color: #fff; font-size: 2.4rem; margin-bottom: 0.4em; }
.hero-sub { color: #d9e3de; font-size: 1.1rem; margin-bottom: 1.6em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons */
.button, .button-outline, .link-button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: 1rem;
}
.button { background: var(--red); color: #fff; border-color: var(--red); }
.button:hover { background: var(--red-dark); border-color: var(--red-dark); text-decoration: none; }
.button-outline { background: transparent; color: #fff; border-color: #fff; }
.button-outline.small { padding: 6px 14px; font-size: 0.9rem; }
.button-outline:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.section .button-outline, .booking-option .button-outline { color: var(--navy); border-color: var(--navy); }
.section .button-outline:hover { background: var(--navy); color: #fff; }
.link-button { background: none; border: none; color: #dde6e2; padding: 0; font-weight: 500; text-decoration: underline; cursor: pointer; }
.inline-form { display: inline; }
.link-arrow { font-weight: 600; }
.link-arrow.back { display: inline-block; margin-bottom: 1em; }

/* Sections & cards */
.section { padding: 40px 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 1.2em; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--cream); }
.class-category { margin-top: 2.4em; }
.class-category:first-of-type { margin-top: 1.6em; }
.class-category h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.card h3 { margin-top: 0; font-size: 1.15rem; }
.price { font-weight: 700; color: var(--navy); }
.meta { color: var(--muted); font-size: 0.92rem; }
.alt-path { background: var(--cream); border-radius: var(--radius); padding: 20px; }

.upcoming-list { list-style: none; padding: 0; }
.upcoming-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }

/* Pricing table -- used inside a class's `description` (shared/classes.js),
   e.g. the merged private First Aid/CPR/AED session's per-organization,
   base + per-student pricing. Wrapped in .table-scroll (same as the admin
   console's tables) wherever it's rendered narrow enough to need it, but
   the table itself is small enough it rarely does. */
.pricing-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.pricing-table caption { text-align: left; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5em; caption-side: top; }
.pricing-table th, .pricing-table td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.pricing-table thead th { background: var(--navy); color: #fff; }
.pricing-table tbody th { background: var(--cream); font-weight: 600; white-space: nowrap; }

/* Screenshot embedded inside a class's `description` (shared/classes.js) --
   e.g. the private First Aid/CPR/AED session's checkout walkthrough image.
   Capped narrower than the full content column so it reads as an inline
   illustration, not a full-bleed image. */
.screenshot { display: block; max-width: 320px; width: 100%; height: auto; margin: 1.2em 0; border: 1px solid var(--border); border-radius: var(--radius); }

/* Class detail syllabus */
.syllabus { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 1.2em 0; }
.syllabus-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; background: var(--cream); }
.syllabus-section h3 { margin-top: 0; font-size: 1rem; }
.syllabus-section ul { margin: 0; padding-left: 1.2em; }
.syllabus-section li { padding: 3px 0; }
.credential-heading { display: flex; align-items: center; gap: 10px; }
.credential-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.credential-heading h4 { margin: 0; }

/* FAQ page -- native <details>/<summary> disclosure widgets, no JS needed
   (same "works with no JS, enhance if present" approach as the mobile nav
   toggle above). Add more questions (and categories) in shared/faq.js, not
   here -- .faq-category is one category section (same visual rhythm as
   .class-category on the /classes page), .faq-list the questions in it. */
.faq-category { margin-top: 2.4em; }
.faq-category:first-of-type { margin-top: 1.6em; }
.faq-category h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.faq-list { margin-top: 1.4em; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--cream); padding: 4px 20px; }
.faq-item summary { padding: 14px 0; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+ '; color: var(--red); font-weight: 700; }
.faq-item[open] summary::before { content: '\2212 '; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 14px 0 18px; }
.faq-answer p:first-child { margin-top: 0; }
.faq-answer p:last-child { margin-bottom: 0; }

/* About / instructor page */
.instructor-layout { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 1.5em; }
.instructor-photo {
  width: 220px; height: 220px; border-radius: var(--radius);
  background: var(--cream); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0;
}
.instructor-bio { flex: 1; min-width: 260px; }
.instructor-title { color: var(--muted); font-weight: 600; margin-top: -0.6em; }

.ltp-banner { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-top: 1.5em; }
.ltp-badge {
  /* Padding here is the mark's required clear space -- keep it clear of any other
     graphic, logo, or text per the Red Cross Training Provider graphic guidelines. */
  width: 260px; padding: 22px; background: #fff; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ltp-badge img { display: block; width: 100%; height: auto; }
.ltp-banner > div:last-child { flex: 1; min-width: 260px; }

/* Booking browse */
.view-toggle { display: flex; gap: 10px; margin: 1em 0 1.6em; flex-wrap: wrap; align-items: center; }
.view-toggle a { padding: 8px 18px; border: 1px solid var(--border); border-radius: 20px; color: var(--navy); font-weight: 600; }
.view-toggle a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.view-toggle a:hover { text-decoration: none; }
.filter-chip { padding: 6px 14px; border-radius: 20px; background: var(--cream); font-size: 0.88rem; }
.filter-chip a { margin-left: 8px; }

.day-group { margin-bottom: 1.6em; }
.occurrence-list { list-style: none; padding: 0; }
.occurrence-row a {
  display: grid; grid-template-columns: 90px 1fr 160px 120px; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px;
  color: var(--text);
}
.occurrence-row a:hover { border-color: var(--red); text-decoration: none; }
.occ-time { font-weight: 700; color: var(--navy); }
.occ-seats { color: var(--muted); font-size: 0.88rem; text-align: right; }

.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-weekday { font-weight: 700; color: var(--muted); text-align: center; padding: 6px 0; font-size: 0.85rem; }
.calendar-cell { min-height: 90px; border: 1px solid var(--border); border-radius: 6px; padding: 6px; font-size: 0.82rem; }
.calendar-cell.empty { border: none; }
.cell-day { font-weight: 700; color: var(--navy); }
.cell-event { display: block; background: var(--cream); border-radius: 4px; padding: 3px 5px; margin-top: 4px; color: var(--navy); }
.cell-event:hover { background: var(--red); color: #fff; text-decoration: none; }

/* Booking detail */
.booking-detail .seats { font-weight: 600; }
/* Optional per-class walkthrough (shared/classes.js's `bookingInstructions`,
   e.g. the private First Aid/CPR/AED session's checkout steps) rendered
   above the pay button on this page -- see booking/detail.ejs. Reuses
   .pricing-table/.screenshot/ol styling from the class-detail page, since
   it's the same kind of HTML block, just moved to a different page. */
.booking-instructions { margin: 1.5em 0; }
.booking-panel { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 1.5em; }
.booking-option { flex: 1; min-width: 280px; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.booking-option.alt { background: var(--cream); }
.booking-form { display: flex; flex-direction: column; gap: 12px; margin-top: 1em; }
.booking-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.booking-form input, .booking-form select, .booking-form textarea,
.admin-form input, .admin-form select, .admin-form textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; font-family: inherit; }
.booking-form textarea { resize: vertical; }
.admin-form textarea { width: 100%; min-width: 320px; resize: vertical; }
.notice { padding: 10px 14px; border-radius: 6px; background: var(--cream); }
.notice-error { background: var(--error-bg); color: var(--error-text); }
.notice-success { background: var(--success-bg); color: var(--success-text); }

.booking-result { text-align: center; padding: 60px 0; }

/* Subscribe form (footer) */
.subscribe-form { display: flex; flex-direction: column; gap: 8px; }
.subscribe-form input { padding: 9px 10px; border-radius: 6px; border: 1px solid #3e6656; background: #2a4f43; color: #fff; }
.subscribe-form input::placeholder { color: #9db8ab; }
.subscribe-form button { padding: 9px; border-radius: 6px; border: none; background: var(--red); color: #fff; font-weight: 600; cursor: pointer; }
.subscribe-form button:hover { background: var(--red-dark); }
.footer-notice { margin-top: 10px; font-size: 0.88rem; padding: 8px 10px; }

/* Footer */
.site-footer { background: var(--navy-dark); color: #c7d3cc; margin-top: 40px; padding: 40px 0 0; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; margin-top: 0; }
.site-footer a { color: #c7d3cc; }
.footer-social a { display: inline-flex; color: #c7d3cc; }
.footer-social a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #2c4a3f; margin-top: 30px; padding: 16px 20px; font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom .staff-link { color: #7fa093; }

/* Admin console */
.admin-shell { background: var(--navy-dark); color: #fff; padding: 14px 0; }
.admin-shell .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.admin-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-nav a { color: #dde6e2; font-weight: 600; }
.admin-nav a.active { color: #fff; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.admin-subnav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 1.2em; border-bottom: 1px solid var(--border); }
.admin-subnav a { padding: 6px 0; font-weight: 600; color: var(--navy); }
.admin-subnav a.active { border-bottom: 2px solid var(--red); }
.admin-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 1em 0 2em; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--cream); }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; }
/* Forces a label onto its own full-width row instead of the default
   flex-wrap shrink-to-fit sizing -- for a field like Subject/Message where
   you want it to line up under the field above rather than sit beside
   whatever else fits on that row. */
.admin-form label.full-width { flex: 1 1 100%; }
.admin-form label.full-width input, .admin-form label.full-width select, .admin-form label.full-width textarea { width: 100%; }
/* A checkbox+text pair reads naturally in a row (checkbox first), not the
   column stack every other .admin-form label uses. */
.admin-form label.checkbox-label { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; }
.admin-form label.checkbox-label input[type="checkbox"] { width: auto; }
.admin-form .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--cream); border: 1px solid var(--border); color: var(--muted); }
.id-snippet { font-size: 0.8rem; color: var(--muted); cursor: help; }
.dashboard-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 1.5em 0; }
.dashboard-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; }
.dashboard-tile .num { font-size: 2rem; font-weight: 700; color: var(--navy); display: block; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions select { padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border); }
.row-actions button, .icon-button { padding: 4px 10px; font-size: 0.85rem; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
.icon-button.danger { color: var(--error-text); border-color: var(--error-text); }

/* Admin table */
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-page-heading h1 { margin-bottom: 0; }
/* Wraps each admin table (see admin/schedules.ejs, bookings.ejs,
   schedule-students.ejs) so its 6-8 columns scroll horizontally on a phone
   screen instead of either overflowing the whole page or squeezing every
   column illegibly thin. min-width on the table itself is what forces the
   scrollbar to appear rather than the table just shrinking to fit. */
.table-scroll { overflow-x: auto; margin: 1em 0 2em; -webkit-overflow-scrolling: touch; }
.table-scroll .admin-table { min-width: 640px; margin: 0; }
.admin-table { width: 100%; border-collapse: collapse; margin: 1em 0 2em; }
.admin-table th, .admin-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: 0.9rem; }
.admin-table th { background: var(--cream); }
.admin-table .filter-row td { background: var(--cream); padding: 6px 8px; }
.admin-table .filter-row input, .admin-table .filter-row select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; font-family: inherit; box-sizing: border-box; }
.status { padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.status-paid { background: var(--success-bg); color: var(--success-text); }
.status-pending { background: #fff4d6; color: #8a6d1a; }
.status-cancelled, .status-failed { background: var(--error-bg); color: var(--error-text); }

@media (max-width: 640px) {
  .occurrence-row a { grid-template-columns: 70px 1fr; grid-template-rows: auto auto; }
  .occ-location, .occ-seats { grid-column: 2; }
  .hero { padding: 44px 0; }
  .hero h1 { font-size: 1.9rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button, .hero-actions .button-outline { text-align: center; }
  .booking-panel { flex-direction: column; }
  .booking-option { min-width: 0; }
  .admin-page-heading { align-items: flex-start; }
  .admin-form textarea { min-width: 0; }
}

@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .header-inner { padding: 12px 16px; }
}