/*
 * wavePRESS — theme.css
 *
 * Base styles. Elementor handles page design; this file covers tokens,
 * reset, typography, header/nav/footer, archive cards and a11y.
 *
 *  1. Custom properties (tokens)
 *  2. Reset / base
 *  3. Typography
 *  4. Layout
 *  5. Header
 *  6. Header layout presets
 *  7. Navigation (desktop)
 *  8. Navigation (mobile)
 *  9. Footer
 * 10. Buttons & forms
 * 11. Posts, archives, comments
 * 12. Elementor
 * 13. Accessibility
 */

/* ── 1. Custom properties ─────────────────────────────────────────────────── */

:root {
  /* Colours: defaults only. Customizer values override these via wp_head. */
  --color-primary:    #000000;
  --color-secondary:  #555555;
  --color-accent:     #ffffff;
  --color-bg:         #ffffff;
  --color-text:       #1a1a1a;
  --color-text-muted: #666666;
  --color-border:     #e0e0e0;

  /* Typography */
  /* Fonts (Customizer > Typography overrides these via wp_head) */
  --font-body:         system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading:      var(--font-body);
  --font-nav:          var(--font-body);
  --font-button:       var(--font-body);
  --font-weight-body:    400;
  --font-weight-heading: 700;
  --font-weight-nav:     500;
  --font-weight-button:  600;
  --font-size-base:    1rem;
  --font-size-sm:      0.875rem;
  --font-size-lg:      1.125rem;
  --line-height-body:  1.65;
  --line-height-tight: 1.2;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --max-width:     1140px;
  --content-width: 720px;
  --gutter:        1.25rem;
  --border-radius: 4px;     /* boxes, cards, inputs (Style & Buttons > Corner style) */
  --button-radius: 4px;

  /* Header / footer */
  --header-height: 70px;
  --header-bg:     #ffffff;
  --header-border: var(--color-border);
  --footer-bg:     #1a1a1a;
  --footer-text:   #ffffff;

  /* Sizes (Customizer sliders override) */
  --logo-height:        50px;
  --logo-height-mobile: 40px;
  --social-icon-size:   20px;
  --nav-line-thickness: 2px;

  /* Transparent header text (Customizer overrides) */
  --header-transparent-text: #ffffff;

  /* WP admin bar, when logged in (set below):
     --admin-bar-height: the bar's height at the top of the page
     --admin-bar-offset: how far fixed things must sit below it (0 on phones, where the bar scrolls away) */
  --admin-bar-height: 0px;
  --admin-bar-offset: 0px;

  /* Real header height, measured by main.js (falls back to the minimum) */
  --header-offset: var(--header-height);
}

/* ── 2. Reset / base ──────────────────────────────────────────────────────── */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

img,
video {
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration: none;
}

/* Strip list styling only where the theme renders lists as UI (menus etc.) */
.nav-menu,
.nav-menu ul,
.footer-nav-menu,
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 3. Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-heading);
  margin-bottom: var(--space-md);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-md);
}

strong,
b {
  font-weight: 700;   /* body text loads its nearest-to-700 weight for this */
}

p:last-child {
  margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-xl);
  margin: 0 0 var(--space-md);
}

.entry-content li {
  margin-bottom: var(--space-xs);
}

blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ── 4. Layout ────────────────────────────────────────────────────────────── */

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-content {
  flex: 1;
}

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

.site-main {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-3xl) var(--gutter);
}

/* Single posts read better at a narrower measure */
.single-content .entry-content,
.single-content .entry-header {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* Full Width page template: no container, keeps vertical spacing */
.site-main--full-width {
  max-width: none;
}

.site-main--blank {
  max-width: none;
  padding: 0;
}

/* Blocks saved before 2.24.1, when the Text colour's palette slug was "text" (now "contrast") */
.has-text-background-color { background-color: var(--wp--preset--color--contrast) !important; }
.has-text-border-color { border-color: var(--wp--preset--color--contrast) !important; }

/* Wide and Full width blocks (the theme declares align-wide, so the editor offers them).
   Wide lines up with the header's edges; Full width runs to the window edges.
   Only top-level blocks in the content: blocks nested in a Group follow its layout. */
.entry-content > .alignwide {
  --align-wide: min(calc(var(--max-width) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)));
  width: var(--align-wide);
  max-width: none;
  margin-inline: calc((100% - var(--align-wide)) / 2);
}

.entry-content > .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* 100vw includes a desktop scrollbar; clip the few pixels it adds so there's no sideways scroll */
.site-content:has(.entry-content > .alignfull) {
  overflow-x: clip;
}

/* ── 5. Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 1000;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  color: var(--header-text, var(--color-text));   /* Header > Header text colour */
}

/* Fixed header (Customizer > Header > Fixed header) */
.wavepress-header-fixed .site-header {
  position: sticky;
  top: var(--admin-bar-offset);
}

/* WP admin bar sizes. It's only fixed (so only needs an offset) above 600px wide. */
body.admin-bar { --admin-bar-height: 46px; }

@media (min-width: 601px) {
  body.admin-bar { --admin-bar-offset: 46px; }
}

@media (min-width: 783px) {
  body.admin-bar { --admin-bar-height: 32px; --admin-bar-offset: 32px; }
}

/* ── Transparent header (per-page tickbox) ──
   The header is taken out of the page flow and sits over the top of the content,
   so a hero image / full-width Elementor section shows through behind it. */
.wavepress-transparent-header .site-header {
  position: absolute;
  top: var(--admin-bar-height);
  left: 0;
  right: 0;
}

/* .is-solid: added by main.js once scrolled, when "turns solid on scroll" is on.
   Until then the header is see-through with the transparent text colour. */
.wavepress-transparent-header .site-header:not(.is-solid) {
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--header-transparent-text);
}

.wavepress-transparent-header.wavepress-header-fixed .site-header {
  position: fixed;
  top: var(--admin-bar-offset);
}

/* ── Turning solid on scroll ──
   The header fades to its normal background, colours and logo. */
.wavepress-solid-on-scroll .site-header {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Two logos are output when a transparent logo is set; show one at a time */
.site-branding__solid {
  display: none;
}

.site-header.is-solid .custom-logo-link--transparent {
  display: none;
}

.site-header.is-solid .site-branding__solid {
  display: contents;
}

/* Soft shadow once scrolled, on any fixed header that has a background */
.wavepress-header-fixed:not(.wavepress-transparent-header) .site-header.is-scrolled,
.site-header.is-solid {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .wavepress-solid-on-scroll .site-header {
    transition: none;
  }
}

/* Header text switches to the transparent text colour */
.wavepress-transparent-header .site-title,
.wavepress-transparent-header .site-tagline {
  color: inherit;
}

.wavepress-transparent-header .site-tagline {
  opacity: 0.85;
}

/* Pages NOT built with Elementor: push the content down so the title
   isn't hidden behind the header. (Elementor pages run edge to edge on purpose.) */
/* :where() keeps this at its pre-2.21.1 weight, so a page's own CSS can still clear the padding
   (e.g. body.page .site-main:has(.tp-home) on hand-built home pages) */
.wavepress-transparent-header:not(.wavepress-elementor-page):where(:not(.wavepress-banner-under-header)) .site-main {
  padding-top: calc(var(--header-offset) + var(--space-3xl));
}

/* Elementor pages: the hero goes right to the top, so the theme's page title
   would sit underneath the header. Hide it; the hero carries the heading. */
.wavepress-transparent-header.wavepress-elementor-page .entry-header {
  display: none;
}

.site-header__inner {
  min-height: var(--header-height);  /* min-height, so stacked layouts can grow */
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Branding */
.site-branding {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The site name (shown when there's no logo) scales with Header > Logo Size:
   the default 50px logo size gives 1.25rem text */
.site-title {
  font-family: var(--font-heading);
  font-size: max(1rem, calc(var(--logo-height) * 0.4));
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  text-decoration: none;
  color: var(--header-text, var(--color-text));
}

.custom-logo-link {
  display: inline-block;
}

.custom-logo {
  max-height: var(--logo-height);
  width: auto;
}

@media (max-width: 768px) {
  .custom-logo {
    max-height: var(--logo-height-mobile);
  }

  .site-title {
    font-size: max(1rem, calc(var(--logo-height-mobile) * 0.45));
  }
}

.site-tagline {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--header-text-muted, var(--color-text-muted));
}

/* ── 6. Header layout presets ─────────────────────────────────────────────── */

/* Header actions: social icons and/or CTA button, side by side */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Preset 1: Logo left / Nav + actions right (default) */
.header-layout--logo-left-nav-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.header-layout--logo-left-nav-right .main-navigation {
  margin-left: auto;   /* keeps nav and actions together on the right */
}

/* Preset 2: Logo centre / Nav below.
   Row 1: [ empty | logo | actions ], row 2: nav across the full width.
   The equal 1fr side columns keep the logo truly centred. */
.header-layout--logo-center-nav-below {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ".   brand actions"
    "nav nav   nav";
  align-items: center;
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  padding-block: var(--space-md);
}

.header-layout--logo-center-nav-below .site-branding {
  grid-area: brand;
  align-items: center;
  text-align: center;
}

.header-layout--logo-center-nav-below .main-navigation {
  grid-area: nav;
  justify-content: center;
}

.header-layout--logo-center-nav-below .nav-menu {
  justify-content: center;
}

.header-layout--logo-center-nav-below .header-actions {
  grid-area: actions;
  justify-self: end;
}

/* Preset 4: Logo left / Icons + CTA right / Nav below.
   Row 1: [ logo | social, shop icons, CTA ], row 2: the menu across the full width,
   starting from the left. Can have a menu bar colour like preset 2. */
.header-layout--logo-left-nav-below {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brand actions"
    "nav   nav";
  align-items: center;
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  padding-block: var(--space-md);
}

.header-layout--logo-left-nav-below .site-branding {
  grid-area: brand;
}

.header-layout--logo-left-nav-below .main-navigation {
  grid-area: nav;
}

.header-layout--logo-left-nav-below .header-actions {
  grid-area: actions;
  justify-self: end;
}

/* Without a menu bar, pull the first link back so its text lines up with the logo */
.header-layout--logo-left-nav-below:not(.header-layout--navbar) .nav-menu {
  margin-left: calc(-1 * var(--space-xs));
}

/* Optional full-width menu bar (Header > Menu bar colour), computers and tablets only.
   The colour is one layer behind the nav (::before) reaching far past both sides; the
   header clips it at the window edges (overflow-x: clip, which doesn't block vertical
   overflow, so dropdowns still hang below the bar, and causes no sideways scroll).
   One painted layer, so its edges are smoothed evenly all the way across.
   --navbar-bg / --navbar-text come from the theme colours (inc/customizer.php). */
@media (min-width: 769px) {
  .header-layout--navbar {
    padding-bottom: 0;
  }

  .site-header:has(.header-layout--navbar) {
    border-bottom: 0;   /* the bar is the bottom edge */
    overflow-x: clip;
  }

  .header-layout--navbar .main-navigation {
    position: relative;
    isolation: isolate;   /* keeps the colour layer behind the links, inside the header */
    margin-top: var(--space-xs);
    padding-block: 0;
  }

  /* Top-level links fill the bar's full height, so the background highlight runs
     edge to edge top to bottom (same bar height as before: the padding moved into
     the links) */
  .header-layout--navbar .nav-menu {
    align-items: stretch;
    row-gap: 0;
  }

  .header-layout--navbar .nav-menu > li {
    align-items: stretch;
  }

  .header-layout--navbar .nav-menu > li > a {
    display: flex;
    align-items: center;
    padding-block: 0.75rem;
  }

  .wavepress-nav-bg .header-layout--navbar .nav-menu > li > a {
    border-radius: 0;
  }

  .header-layout--navbar .nav-menu > li > .nav-dropdown-toggle {
    align-self: center;
  }

  .header-layout--navbar .main-navigation::before {
    content: '';
    position: absolute;
    inset: 0 -100vmax;
    z-index: -1;
    background: var(--navbar-bg);
  }

  /* Links, arrows and the hover/current highlight follow the bar's text colour
     (Menu Highlight colours still win when set). Also over a transparent header. */
  .header-layout--navbar .nav-menu,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu {
    --nav-line-color: var(--nav-line-color-custom, var(--navbar-text));
    --nav-hover-text: var(--nav-hover-text-custom, var(--navbar-text));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--navbar-text) 15%, transparent));
  }

  .header-layout--navbar .nav-menu > li > a,
  .header-layout--navbar .nav-menu > li > .nav-dropdown-toggle,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu > li > a,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu > li > .nav-dropdown-toggle {
    color: var(--navbar-text);
  }

  /* …and switch to Menu Highlight > Hover text colour on hover, keyboard focus, the
     current page and an open dropdown's parent (the rule above would otherwise
     keep them in the bar's text colour) */
  .header-layout--navbar .nav-menu > li > a:is(:hover, :focus-visible),
  .wavepress-nav-current .header-layout--navbar .nav-menu > :is(.current-menu-item, .current-menu-ancestor) > a,
  .header-layout--navbar .nav-menu > .menu-item-has-children:is(:hover, :focus-within) > :is(a, .nav-dropdown-toggle),
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu > li > a:is(:hover, :focus-visible),
  .wavepress-nav-current.wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu > :is(.current-menu-item, .current-menu-ancestor) > a,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu > .menu-item-has-children:is(:hover, :focus-within) > :is(a, .nav-dropdown-toggle) {
    color: var(--nav-hover-text);
  }

  /* Dropdown panels keep the normal header colours */
  .header-layout--navbar .nav-menu .sub-menu,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-layout--navbar .nav-menu .sub-menu {
    --nav-line-color: var(--nav-line-color-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-text: var(--nav-hover-text-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--submenu-accent, var(--color-primary)) 12%, transparent));
  }
}

/* Preset 3: Logo left / Nav centre / CTA right.
   [ logo | nav + social | CTA ]: the menu and social icons are one group, and the
   CTA button has the right-hand edge to itself.
   The logo and button sides both grow from 0 (flex: 1 1 0), so with room to spare
   they're equal widths and the middle group sits exactly centred. They never go
   below their own size (min-width: max-content), and the menu only wraps if the
   whole row genuinely doesn't fit.
   .header-actions dissolves (display: contents) so its icons and button can sit
   apart. (Phones hide .header-actions, see section 8.) */
.header-layout--logo-left-nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-layout--logo-left-nav-center .site-branding,
.header-layout--logo-left-nav-center .header-cta,
.header-layout--logo-left-nav-center:not(.header-layout--has-cta)::after {
  flex: 1 1 0;
  min-width: max-content;
}

.header-layout--logo-left-nav-center .main-navigation {
  flex: 0 1 auto;
  min-width: 0;
}

.header-layout--logo-left-nav-center .header-cta {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 769px) {
  .header-layout--logo-left-nav-center .header-actions {
    display: contents;
  }

  .header-layout--logo-left-nav-center .header-actions > .social-icons {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-right: 0;
  }
}

/* Tablets and small laptops: the row gets tight, so the header social icons step
   aside for the menu (they're still in the footer and top bar). */
@media (min-width: 769px) and (max-width: 1199px) {
  .header-layout--logo-left-nav-center .header-actions > .social-icons {
    display: none;
  }
}

/* Keep the button on one line ("Order online", not "Order / online") */
.header-cta .btn {
  white-space: nowrap;
}

/* No button: an empty right side (same flex as the logo side) keeps the menu centred.
   (The has-cta class comes from PHP, so no :has() needed.) */
.header-layout--logo-left-nav-center:not(.header-layout--has-cta)::after {
  content: '';
}

/* No logo, title or tagline showing (Layout & Logo): the logo area steps out of the
   layout, so there's no empty space for it. Its hidden site title stays in place for
   screen readers and search engines (the class comes from PHP). */
.header-layout--no-branding .site-branding {
  position: absolute;
}

/* Centred and nav-below layouts: with nothing else on the top row either, drop it */
.header-layout--logo-center-nav-below.header-layout--no-branding:not(.header-layout--has-actions) {
  grid-template-areas: "nav nav nav";
  row-gap: 0;
}

.header-layout--logo-left-nav-below.header-layout--no-branding:not(.header-layout--has-actions) {
  grid-template-areas: "nav nav";
  row-gap: 0;
}

/* Nav-centre layout: an empty left side balances the button side, so the menu stays centred */
.header-layout--logo-left-nav-center.header-layout--no-branding::before {
  content: '';
  flex: 1 1 0;
}

/* ── Social icons (header) ── */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-icons__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--social-icon-size) + 1rem);   /* icon + 8px each side for a comfy tap area */
  height: calc(var(--social-icon-size) + 1rem);
  border-radius: 50%;
  color: inherit;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.social-icons__link:hover {
  color: var(--color-primary);
}

.wavepress-icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  flex-shrink: 0;
}

/* When the icons are the last thing in the header, pull the tap area out by
   its padding so the last icon lines up with the content edge. */
.header-actions > .social-icons:last-child {
  margin-right: -0.5rem;
}

/* On a transparent header, the primary colour may not show up on the hero, so just fade */
.wavepress-transparent-header .site-header:not(.is-solid) .social-icons__link:hover {
  color: inherit;
  opacity: 0.75;
}

/* ── 7. Navigation (desktop) ──────────────────────────────────────────────── */

.main-navigation {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--nav-gap, var(--space-lg));   /* Header > Menu item spacing */
  color: var(--header-text, var(--color-text));   /* so dropdown arrows never inherit the transparent header colour */
}

/* Menu highlight colours (Customizer > Menu Highlight). The *-custom values are only
   set when chosen; otherwise everything follows the primary colour.
   .header-actions gets them too, for "Apply to header social icons". */
.nav-menu,
.header-actions {
  --nav-line-color: var(--nav-line-color-custom, var(--color-primary));
  --nav-hover-text: var(--nav-hover-text-custom, var(--color-primary));
  --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--color-primary) 12%, transparent));
}

.nav-menu li {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nav-menu a {
  display: block;
  padding: var(--space-sm) var(--space-xs);
  text-decoration: none;
  color: var(--nav-link-color, var(--header-text, var(--color-text)));   /* dropdowns set --nav-link-color */
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  transition: color 0.15s ease;
}

/* Menu text case (Header > Menu text case) */
.wavepress-nav-case-capitalize .nav-menu a {
  text-transform: capitalize;
}

.wavepress-nav-case-uppercase .nav-menu a {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.wavepress-nav-current .nav-menu .current-menu-item > a,
.wavepress-nav-current .nav-menu .current-menu-ancestor > a {
  color: var(--nav-hover-text);
}

/* Dropdown toggle (chevron drawn in CSS, no icon font) */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--border-radius);
  color: inherit;
  cursor: pointer;
}

.nav-dropdown-toggle__icon {
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.is-open > .nav-dropdown-toggle .nav-dropdown-toggle__icon {
  transform: translateY(25%) rotate(-135deg);
}

/* Submenus: hidden by default, shown by .is-open (click/keyboard) or hover on mouse devices */
.nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 220px;
  padding: var(--space-sm) 0;
  background: var(--submenu-bg, var(--header-bg));   /* Menu Highlight > Dropdown background */
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-menu .is-open > .sub-menu {
  display: block;
}

@media (hover: hover) and (min-width: 769px) {
  .nav-menu li:hover > .sub-menu {
    display: block;
  }
}

.nav-menu .sub-menu li {
  display: flex;
  width: 100%;
}

.nav-menu .sub-menu a {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}

/* Dropdown colours (Menu Highlight > Dropdown background / text). The highlight inside
   dropdowns follows the dropdown text colour when one is set (--submenu-accent),
   otherwise the primary colour; the Menu Highlight colours still win when set.
   Computers and tablets only: on phones the dropdowns are part of the menu panel. */
@media (min-width: 769px) {
  .nav-menu .sub-menu {
    --nav-link-color: var(--submenu-text, var(--header-text, var(--color-text)));   /* panels default to the header background, so the header text colour too */
    --nav-line-color: var(--nav-line-color-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-text: var(--nav-hover-text-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--submenu-accent, var(--color-primary)) 12%, transparent));
    color: var(--nav-link-color);   /* arrows */
  }

  /* Coloured dropdowns: the hover/current item gets a soft block of the text colour,
     since a colour change wouldn't show (unless Menu Highlight colours are set) */
  .wavepress-submenu-colour .nav-menu .sub-menu a {
    margin-inline: var(--space-xs);
    border-radius: var(--border-radius);
  }

  .wavepress-submenu-colour .nav-menu .sub-menu a:hover,
  .wavepress-submenu-colour .nav-menu .sub-menu a:focus-visible,
  .wavepress-submenu-colour.wavepress-nav-current .nav-menu .sub-menu .current-menu-item > a,
  .wavepress-submenu-colour.wavepress-nav-current .nav-menu .sub-menu .current-menu-ancestor > a {
    background-color: var(--nav-hover-bg);
  }
}

/* ── Menu highlight (desktop) ──
   Body classes from Customizer > Menu Highlight:
     wavepress-nav-fx-{none|underline|grow-left|grow-right|grow-center|fade}
     wavepress-nav-line-over   line above the text instead of below
     wavepress-nav-bg          background highlight on hover
     wavepress-nav-current     current page stays highlighted
   The line is a ::after on top-level links, sized to the text (not the padding). */
@media (min-width: 769px) {
  .nav-menu > li > a {
    position: relative;
    --nav-pad-x: var(--space-xs);
  }

  .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: var(--nav-pad-x);
    right: var(--nav-pad-x);
    bottom: 0.2rem;
    height: var(--nav-line-thickness);
    border-radius: var(--nav-line-thickness);
    background: var(--nav-line-color);
    opacity: 0;
    pointer-events: none;
  }

  .wavepress-nav-line-over .nav-menu > li > a::after {
    top: 0.2rem;
    bottom: auto;
  }

  .wavepress-nav-fx-none .nav-menu > li > a::after {
    display: none;
  }

  /* Hidden state per effect */
  .wavepress-nav-fx-grow-left .nav-menu > li > a::after,
  .wavepress-nav-fx-grow-right .nav-menu > li > a::after,
  .wavepress-nav-fx-grow-center .nav-menu > li > a::after {
    opacity: 1;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .wavepress-nav-fx-grow-left .nav-menu > li > a::after   { transform-origin: left; }
  .wavepress-nav-fx-grow-right .nav-menu > li > a::after  { transform-origin: right; }
  .wavepress-nav-fx-grow-center .nav-menu > li > a::after { transform-origin: center; }

  .wavepress-nav-fx-fade .nav-menu > li > a::after {
    transition: opacity 0.3s ease;
  }

  /* Shown: hover, keyboard focus, and the current page (if switched on) */
  .nav-menu > li > a:hover::after,
  .nav-menu > li > a:focus-visible::after,
  .wavepress-nav-current .nav-menu > .current-menu-item > a::after,
  .wavepress-nav-current .nav-menu > .current-menu-ancestor > a::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Background highlight: links get a little more room so the colour has an edge */
  .wavepress-nav-bg .nav-menu {
    gap: var(--space-xs) var(--space-xs);
  }

  .wavepress-nav-bg .nav-menu > li > a {
    --nav-pad-x: var(--space-md);
    padding-inline: var(--nav-pad-x);
    border-radius: var(--border-radius);
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .wavepress-nav-bg .nav-menu a:hover,
  .wavepress-nav-bg .nav-menu a:focus-visible,
  .wavepress-nav-bg.wavepress-nav-current .nav-menu .current-menu-item > a,
  .wavepress-nav-bg.wavepress-nav-current .nav-menu .current-menu-ancestor > a {
    background-color: var(--nav-hover-bg);
  }

  /* Dropdown items: a full-width block, inset slightly from the panel edge */
  .wavepress-nav-bg .nav-menu .sub-menu a {
    margin-inline: var(--space-xs);
    border-radius: var(--border-radius);
  }

  /* Transparent header (until it turns solid): links, arrows, line and highlight take
     the transparent text colour unless a custom colour is chosen. Dropdown panels
     keep their solid background, so they get the normal colours back. */
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu,
  .wavepress-transparent-header .site-header:not(.is-solid) .header-actions {
    --nav-line-color: var(--nav-line-color-custom, var(--header-transparent-text));
    --nav-hover-text: var(--nav-hover-text-custom, var(--header-transparent-text));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--header-transparent-text) 15%, transparent));
  }

  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu .sub-menu {
    --nav-line-color: var(--nav-line-color-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-text: var(--nav-hover-text-custom, var(--submenu-accent, var(--color-primary)));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--submenu-accent, var(--color-primary)) 12%, transparent));
  }

  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > li > a,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > li > .nav-dropdown-toggle {
    color: var(--header-transparent-text);
  }

  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > li > a:hover,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > li > a:focus-visible,
  .wavepress-transparent-header.wavepress-nav-current .site-header:not(.is-solid) .nav-menu > .current-menu-item > a,
  .wavepress-transparent-header.wavepress-nav-current .site-header:not(.is-solid) .nav-menu > .current-menu-ancestor > a {
    color: var(--nav-hover-text);
  }

  /* Keep a dropdown's parent highlighted while the pointer (or keyboard focus) is
     anywhere in its dropdown, so it's clear which menu you're in. Same look as hover:
     colour, line effect, background block. Works for nested dropdowns too. */
  .nav-menu .menu-item-has-children:hover > a,
  .nav-menu .menu-item-has-children:focus-within > a,
  .nav-menu .menu-item-has-children:hover > .nav-dropdown-toggle,
  .nav-menu .menu-item-has-children:focus-within > .nav-dropdown-toggle,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > .menu-item-has-children:hover > a,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > .menu-item-has-children:focus-within > a,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > .menu-item-has-children:hover > .nav-dropdown-toggle,
  .wavepress-transparent-header .site-header:not(.is-solid) .nav-menu > .menu-item-has-children:focus-within > .nav-dropdown-toggle {
    color: var(--nav-hover-text);
  }

  .nav-menu > .menu-item-has-children:hover > a::after,
  .nav-menu > .menu-item-has-children:focus-within > a::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .wavepress-nav-bg .nav-menu .menu-item-has-children:hover > a,
  .wavepress-nav-bg .nav-menu .menu-item-has-children:focus-within > a,
  .wavepress-submenu-colour .nav-menu .sub-menu .menu-item-has-children:hover > a,
  .wavepress-submenu-colour .nav-menu .sub-menu .menu-item-has-children:focus-within > a {
    background-color: var(--nav-hover-bg);
  }
}

/* Header social icons can take the menu highlight colours (Menu Highlight >
   "Apply to header social icons"): hover colour, plus a round background if on. */
.wavepress-nav-social .header-actions .social-icons__link:hover,
.wavepress-nav-social .header-actions .social-icons__link:focus-visible,
.wavepress-nav-social.wavepress-transparent-header .site-header:not(.is-solid) .header-actions .social-icons__link:hover,
.wavepress-nav-social.wavepress-transparent-header .site-header:not(.is-solid) .header-actions .social-icons__link:focus-visible {
  color: var(--nav-hover-text);
}

/* With the background highlight, that's the hover cue. Without it, a transparent
   header keeps the slight fade, as the hover colour is usually the same white. */
.wavepress-nav-social.wavepress-nav-bg .header-actions .social-icons__link:hover,
.wavepress-nav-social.wavepress-nav-bg .header-actions .social-icons__link:focus-visible {
  background-color: var(--nav-hover-bg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu > li > a::after {
    transition: none !important;
  }
}

/* Header > "Show dropdown arrows" off: computers with a mouse only. The arrow
   button stays in the page for keyboard users: it's out of sight until it gets
   focus, and dropdowns also open while focus is anywhere inside their item.
   Touch screens keep the arrows, as they're how a dropdown is opened there. */
@media (hover: hover) and (min-width: 769px) {
  .wavepress-nav-no-arrows .nav-menu .nav-dropdown-toggle:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wavepress-nav-no-arrows .nav-menu li:focus-within > .sub-menu {
    display: block;
  }
}

/* ── Mega menu (inc/mega-menu.php) ─────────────────────────────────────────────
   A top-level item with "Mega menu" ticked (Appearance > Menus): its dropdown
   becomes a full-width panel of columns. 2nd-level items are the column headings,
   3rd-level items the links under them. Computers and tablets only: on phones
   it's the normal accordion menu.

   The panel hangs from the header (the mega item and the menu are left unpositioned,
   so the header is its containing block) and spans the window, with the columns
   lined up with the site container. With a menu bar it hangs from the bar instead
   (already container-wide), and its background is extended to the window edges. */
@media (min-width: 769px) {
  .nav-menu .nav-item--mega {
    position: static;
  }

  .nav-menu .nav-item--mega > .mega-menu {
    --mega-cols: repeat(auto-fill, minmax(11rem, 1fr));
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    grid-template-columns: var(--mega-cols);
    align-items: start;
    gap: var(--space-lg) var(--space-xl);
    padding-block: var(--space-xl);
    /* % padding is of the header's width: this lines the columns up with the container */
    padding-inline: max(var(--gutter), (100% - var(--max-width)) / 2 + var(--gutter));
    border: 0;
    border-block: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
    /* Long menus scroll inside the panel rather than off the bottom of the screen */
    max-height: calc(100dvh - var(--header-offset) - var(--admin-bar-offset));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Always laid out, but invisible until open, so it can fade in and out.
       visibility (hidden after the fade) keeps it out of the way of the pointer and
       out of the keyboard's tab order while closed. */
    display: grid;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  /* Colours: Menu Highlight > Mega menu background / text, else the dropdowns'.
     #masthead so they win over the dropdown colour rules (menu bar, transparent header). */
  #masthead .nav-menu .nav-item--mega > .mega-menu {
    --mega-panel-bg: var(--mega-bg, var(--submenu-bg, var(--header-bg)));
    background: var(--mega-panel-bg);
  }

  .wavepress-mega-colour #masthead .nav-menu .nav-item--mega > .mega-menu,
  .wavepress-mega-colour #masthead .nav-menu .nav-item--mega .mega-menu__links {
    --nav-link-color: var(--mega-text, var(--header-text, var(--color-text)));
    --nav-line-color: var(--nav-line-color-custom, var(--mega-accent, var(--color-primary)));
    --nav-hover-text: var(--nav-hover-text-custom, var(--mega-accent, var(--color-primary)));
    --nav-hover-bg:   var(--nav-bg-color-custom, color-mix(in srgb, var(--mega-accent, var(--color-primary)) 14%, transparent));
    color: var(--nav-link-color);
  }

  .nav-item--mega.mega-cols-2 > .mega-menu { --mega-cols: repeat(2, minmax(0, 1fr)); }
  .nav-item--mega.mega-cols-3 > .mega-menu { --mega-cols: repeat(3, minmax(0, 1fr)); }
  .nav-item--mega.mega-cols-4 > .mega-menu { --mega-cols: repeat(4, minmax(0, 1fr)); }
  .nav-item--mega.mega-cols-5 > .mega-menu { --mega-cols: repeat(5, minmax(0, 1fr)); }
  .nav-item--mega.mega-cols-6 > .mega-menu { --mega-cols: repeat(6, minmax(0, 1fr)); }

  /* Menu bar: the bar is already container-wide, so no extra inset; the panel's
     colour is stretched to the window edges (the header clips the overflow) */
  .header-layout--navbar .nav-menu .nav-item--mega > .mega-menu {
    padding-inline: 0;
    border: 0;
    /* background, then the bottom edge line, both stretched to the window edges */
    box-shadow: 0 0 0 100vmax var(--mega-panel-bg), 0 1px 0 100vmax var(--color-border);
    clip-path: inset(0 -100vmax -1px -100vmax);
  }

  /* Open: hover (mouse), the arrow button (touch / keyboard), or keyboard focus
     inside it when the arrows are hidden */
  .nav-menu .nav-item--mega.is-open > .mega-menu,
  .wavepress-nav-no-arrows .nav-menu .nav-item--mega:focus-within > .mega-menu {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* An invisible strip under the menu item, as wide as it, so the pointer can travel
     down to the panel (which starts at the bottom of the header) without it closing */
  .nav-menu > .nav-item--mega > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2.5rem;
  }

  .header-layout--navbar .nav-menu > .nav-item--mega > a::before {
    content: none;   /* the panel starts right under the bar */
  }

  /* Columns */
  .nav-menu .mega-menu > .mega-menu__column {
    display: block;
    width: auto;
    min-width: 0;
  }

  .nav-menu .mega-menu .nav-dropdown-toggle {
    display: none;   /* columns are always open */
  }

  .nav-menu .mega-menu .mega-menu__heading {
    display: block;
    margin: 0 0 var(--space-xs);
    padding: var(--space-xs);
    font-weight: 700;
    white-space: normal;
  }

  .mega-menu__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-sm);
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: opacity 0.15s ease;
  }

  .mega-menu__heading:hover .mega-menu__image {
    opacity: 0.9;
  }

  /* The links under each heading: a plain list, always shown */
  .nav-menu .mega-menu .mega-menu__links {
    display: block;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .nav-menu .mega-menu .mega-menu__links a {
    padding: 0.3rem var(--space-xs);
    font-weight: var(--font-weight-body);
    white-space: normal;
  }

  /* Highlight inside the panel: the normal dropdown highlight (Menu Highlight:
     hover text colour, plus the tint block when that's on), with the movement of
     Style & Buttons > Hover effect on the hovered link (Lift rises, Glow glows,
     Invert / Darken deepen the tint). #masthead so these win over the dropdown rules. */
  #masthead .nav-menu .mega-menu a {
    border-radius: var(--border-radius);
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, text-shadow 0.15s ease;
  }

  /* Links hug their text, so a tint block sits snugly around it, with the text
     still lined up under the heading */
  #masthead .nav-menu .mega-menu .mega-menu__links a {
    flex: 0 1 auto;
    margin: 0 0 0 calc(var(--space-xs) - 0.65rem);
    padding: 0.3rem 0.65rem;
  }

  #masthead .nav-menu .mega-menu .mega-menu__heading {
    margin: 0 0 var(--space-xs);
  }

  /* Column headings don't light up just because the pointer, or the page being
     viewed, is one of their links */
  #masthead .nav-menu .mega-menu .mega-menu__column > a {
    background: none;
    color: var(--nav-link-color, var(--header-text, var(--color-text)));
  }

  #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible),
  .wavepress-nav-current #masthead .nav-menu .mega-menu .current-menu-item > a {
    color: var(--nav-hover-text);
  }

  :is(.wavepress-nav-bg, .wavepress-submenu-colour, .wavepress-mega-colour) #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible),
  :is(.wavepress-nav-bg, .wavepress-submenu-colour, .wavepress-mega-colour).wavepress-nav-current #masthead .nav-menu .mega-menu .current-menu-item > a {
    background-color: var(--nav-hover-bg);
  }

  /* Button hover effect: movement (Lift, and Cartoon's pop) */
  #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
    transform: var(--btn-transform-hover);
  }

  :is(.wavepress-nav-bg, .wavepress-submenu-colour, .wavepress-mega-colour).wavepress-btn-hover-lift #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  }

  /* Glow: a soft glow of the primary colour */
  .wavepress-btn-hover-glow #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 70%, transparent);
  }

  :is(.wavepress-nav-bg, .wavepress-submenu-colour, .wavepress-mega-colour).wavepress-btn-hover-glow #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }

  /* Invert / Darken: a deeper tint */
  :is(.wavepress-nav-bg, .wavepress-submenu-colour, .wavepress-mega-colour):is(.wavepress-btn-hover-invert, .wavepress-btn-hover-darken) #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
    background-color: color-mix(in srgb, var(--nav-hover-bg), var(--mega-accent, var(--submenu-accent, var(--color-primary))) 18%);
  }

  @media (prefers-reduced-motion: reduce) {
    #masthead .nav-menu .mega-menu a:is(:hover, :focus-visible) {
      transform: none;
    }
  }

  /* Reduced motion: no fade or drift, it just appears and disappears */
  @media (prefers-reduced-motion: reduce) {
    .nav-menu .nav-item--mega > .mega-menu {
      transform: none;
      transition: none;
    }
  }

  /* Cartoon style: one inked edge top and bottom, not boxes inside boxes */
  .wavepress-btn-cartoon .nav-menu .nav-item--mega > .mega-menu {
    border: 0;
    border-block: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
  }

  .wavepress-btn-cartoon .header-layout--navbar .nav-menu .nav-item--mega > .mega-menu {
    border: 0;
    box-shadow: 0 0 0 100vmax var(--mega-panel-bg), 0 3px 0 100vmax var(--ink);
    clip-path: inset(0 -100vmax -3px -100vmax);
  }

  .wavepress-btn-cartoon .nav-menu .mega-menu .mega-menu__links {
    border: 0;
    box-shadow: none;
  }

  .wavepress-btn-cartoon .mega-menu__image {
    border: 2px solid var(--ink);
  }
}

@media (hover: hover) and (min-width: 769px) {
  /* .is-hover (main.js) keeps it open for a moment after the pointer leaves */
  .nav-menu .nav-item--mega:hover > .mega-menu,
  .nav-menu .nav-item--mega.is-hover > .mega-menu {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* The parent stays highlighted while its panel is open */
  .nav-menu > .nav-item--mega.is-hover > a {
    color: var(--nav-hover-text);
  }

  .nav-menu > .nav-item--mega.is-hover > a::after {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Phones: the mega menu is the normal accordion; category images are left out */
@media (max-width: 768px) {
  .mega-menu__image {
    display: none;
  }
}


/* Third-level menus fly out to the right */
.nav-menu .sub-menu .sub-menu {
  top: calc(-1 * var(--space-sm) - 1px);
  left: 100%;
}

/* Mobile menu button: hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;   /* bars follow the header text colour (incl. transparent header) */
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate the bars into an X when open */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── 8. Navigation (mobile) ───────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* All presets collapse to: branding left, hamburger right */
  .header-layout--logo-left-nav-right,
  .header-layout--logo-center-nav-below,
  .header-layout--logo-left-nav-center,
  .header-layout--logo-left-nav-below {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-sm);
  }

  .header-layout--logo-center-nav-below .site-branding {
    align-items: flex-start;
    text-align: left;
  }

  .site-header__inner.header-layout--logo-left-nav-center::after,
  .site-header__inner.header-layout--logo-left-nav-center::before {
    content: none;
  }

  /* The menu button always sits on the right (the nav-centre layout's logo side
     would otherwise grow and push it into the middle) */
  .header-layout--logo-left-nav-center .site-branding {
    flex: 0 1 auto;
  }

  .site-header__inner.header-layout--no-branding .main-navigation,
  .site-header__inner.header-layout--logo-left-nav-center .main-navigation {
    margin-left: auto;
  }

  .header-layout--logo-left-nav-right .main-navigation {
    margin-left: 0;
  }

  /* Social icons and CTA are hidden on mobile to keep the bar uncluttered.
     The footer still shows the social links; add the CTA page as a menu item
     if it needs to be reachable on mobile. */
  .header-actions {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .main-navigation {
    position: static;
  }

  .site-header__inner {
    position: relative;
  }

  /* Menu panel drops down below the header bar, full width */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-height) - var(--admin-bar-offset));
    overflow-y: auto;
    padding: var(--space-sm) 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu a {
    flex: 1;
    padding: var(--space-sm) var(--gutter);
  }

  .nav-dropdown-toggle {
    width: 2.75rem;      /* comfortable touch target */
    height: 2.75rem;
    margin-right: var(--space-sm);
  }

  /* Submenus become an accordion */
  .nav-menu .sub-menu,
  .nav-menu .sub-menu .sub-menu {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-menu .sub-menu a {
    padding-left: calc(var(--gutter) + var(--space-lg));
    white-space: normal;
  }

  .nav-menu .sub-menu .sub-menu a {
    padding-left: calc(var(--gutter) + var(--space-2xl));
  }
}

/* ── 9. Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding-block: var(--space-2xl);
  font-size: calc(var(--font-size-base) * var(--footer-scale, 1));   /* Footer > Footer text size */
}

/* Same container as the header (gutter inside the max-width), so edges line up */
.site-footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
  color: #fff;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
}

.footer-nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.footer-nav-menu a {
  font-size: calc(var(--font-size-sm) * var(--footer-scale, 1));
  text-decoration: none;
}

/* Vertical footer menu (Customizer > Footer > Footer menu layout): a stacked list,
   lined up with its cell (left / centre / right) */
.footer-nav-menu--vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-xs);
}

.site-footer__cell--center .footer-nav-menu--vertical { align-items: center; }
.site-footer__cell--right .footer-nav-menu--vertical  { align-items: flex-end; }

.footer-nav-menu a:hover {
  text-decoration: underline;
}

/* ── Footer grid (3 columns × 2 rows, Customizer > Footer) ──
   Columns align left / centre / right. A thin line separates the rows. */
.site-footer__grid {
  display: flex;
  flex-direction: column;
}

.site-footer__row {
  display: grid;
  /* --footer-cols: Customizer > Footer > Column widths (set on .site-footer__grid) */
  grid-template-columns: var(--footer-cols, repeat(3, minmax(0, 1fr)));
  align-items: start;
  gap: var(--space-lg) var(--space-xl);
  padding-block: var(--space-md);
}

.site-footer__row + .site-footer__row {
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__row:first-child { padding-top: 0; }
.site-footer__row:last-child  { padding-bottom: 0; }

.site-footer__cell--left   { text-align: left; }
.site-footer__cell--center { text-align: center; }
.site-footer__cell--right  { text-align: right; }

/* Flex-based elements (menu, icons) follow their cell's alignment too */
.site-footer__cell--center .footer-nav-menu,
.site-footer__cell--center .social-icons { justify-content: center; }
.site-footer__cell--right .footer-nav-menu,
.site-footer__cell--right .social-icons  { justify-content: flex-end; }

/* Social icon tap areas have 8px padding: pull them out so the glyphs line up with the edges */
.site-footer__cell--left .social-icons  { margin-left: -0.5rem; }
.site-footer__cell--right .social-icons { margin-right: -0.5rem; }

.site-footer__credit,
.footer-contact,
.footer-hours,
.footer-text {
  font-size: calc(var(--font-size-sm) * var(--footer-scale, 1));
  color: rgba(255, 255, 255, 0.75);
}

/* Footer logo (Footer > Logo position). Lines up with its cell; phones follow the phone layout. */
.footer-logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.footer-logo__image {
  display: block;
  max-height: var(--footer-logo-height, 60px);
  width: auto;
  max-width: 100%;
}

.footer-logo__text {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: calc(1.25rem * var(--footer-scale, 1));
  line-height: 1.2;
  color: var(--footer-text);
}

.site-footer__credit p,
.footer-text p,
.footer-contact__item {
  margin: 0 0 var(--space-xs);
}

.site-footer__credit p:last-child,
.footer-text p:last-child,
.footer-contact__item:last-child {
  margin-bottom: 0;
}

.footer-contact address {
  font-style: normal;
}

/* Opening hours in the footer: rows line up with the cell's alignment */
.footer-hours .wavepress-hours {
  justify-content: start;
}

.site-footer__cell--center .wavepress-hours { justify-content: center; }
.site-footer__cell--right .wavepress-hours  { justify-content: end; }

.footer-hours .wavepress-hours dt {
  color: var(--footer-text);
}

.footer-hours .wavepress-open-now {
  margin-bottom: var(--space-sm);
}

/* Phones: one stacked list. Rows dissolve (display: contents) so every element is
   its own section with a divider between, and "copyright last" can reorder across rows.
   Alignment: .site-footer__grid--m-center (default) or --m-left (Customizer > Footer). */
@media (max-width: 768px) {
  .site-footer__grid {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--space-sm) - var(--space-lg));   /* first section starts near the top */
  }

  .site-footer__row,
  .site-footer__row + .site-footer__row {
    display: contents;
  }

  .site-footer__cell {
    padding-block: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-footer__cell.is-mobile-last {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .site-footer__cell.is-empty {
    display: none;
  }

  .site-footer__grid--copyright-last .site-footer__cell--copyright {
    order: 99;
  }

  /* Copyright reads as the small print at the bottom */
  .site-footer__cell--copyright .site-footer__credit {
    font-size: calc(0.8125rem * var(--footer-scale, 1));
  }

  /* Left-aligned */
  .site-footer__grid--m-left .site-footer__cell {
    text-align: left;
  }

  .site-footer__grid--m-left .footer-nav-menu,
  .site-footer__grid--m-left .social-icons,
  .site-footer__grid--m-left .wavepress-hours {
    justify-content: flex-start;
  }

  .site-footer__grid--m-left .footer-nav-menu--vertical {
    align-items: flex-start;
  }

  .site-footer__grid--m-left .social-icons {
    margin-left: -0.5rem;
    margin-right: 0;
  }

  .site-footer__grid--m-left .footer-hours .wavepress-open-now {
    margin-inline: 0;
  }

  /* Centred */
  .site-footer__grid--m-center .site-footer__cell {
    text-align: center;
  }

  .site-footer__grid--m-center .footer-nav-menu,
  .site-footer__grid--m-center .social-icons,
  .site-footer__grid--m-center .wavepress-hours {
    justify-content: center;
  }

  .site-footer__grid--m-center .footer-nav-menu--vertical {
    align-items: center;
  }

  .site-footer__grid--m-center .social-icons {
    margin-inline: 0;
  }

  .site-footer__grid--m-center .footer-hours .wavepress-open-now {
    margin-inline: auto;
  }

  /* Bigger tap targets for the menu */
  .site-footer__cell .footer-nav-menu {
    gap: var(--space-xs) var(--space-lg);
  }

  .site-footer__cell .footer-nav-menu a {
    display: inline-block;
    padding-block: 0.35rem;
  }
}

/* Footer social icons: inherit the footer text colour; fade on hover
   (the primary colour can disappear on a dark footer) */

.site-footer .social-icons__link {
  color: var(--footer-text);
}

.site-footer .social-icons__link:hover {
  color: var(--footer-text);
  opacity: 0.7;
}

/* ── 10. Buttons & forms ──────────────────────────────────────────────────── */

/* Button look comes from Customizer > Style & Buttons, as body classes:
     wavepress-btn-{solid|outline|soft}                       style
     wavepress-btn-hover-{invert|darken|lift|glow|none}       hover effect
     wavepress-btn-upper                                      uppercase text
   Each sets --btn-* variables; the rules below just use them.
   "Primary" buttons: .btn--primary, header CTA, block editor buttons, search
   and comment submit buttons. .btn--outline always stays an outline. */

body {
  /* Solid (default) */
  --btn-bg: var(--color-primary);
  --btn-text: var(--color-accent);
  --btn-border: var(--color-primary);
  --btn-tint: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --btn-dark: color-mix(in srgb, var(--color-primary) 82%, #000);
}

.wavepress-btn-outline {
  --btn-bg: transparent;
  --btn-text: var(--color-primary);
}

.wavepress-btn-soft {
  --btn-bg: var(--btn-tint);
  --btn-text: var(--color-primary);
  --btn-border: transparent;
}

/* Hover colours start the same as the resting colours… */
body {
  --btn-bg-hover: var(--btn-bg);
  --btn-text-hover: var(--btn-text);
  --btn-border-hover: var(--btn-border);
  --btn-transform-hover: none;
  --btn-shadow-hover: none;
}

/* …and each hover effect changes what it needs */
.wavepress-btn-hover-invert.wavepress-btn-solid {
  --btn-bg-hover: transparent;
  --btn-text-hover: var(--color-primary);
}

.wavepress-btn-hover-invert.wavepress-btn-outline,
.wavepress-btn-hover-invert.wavepress-btn-soft {
  --btn-bg-hover: var(--color-primary);
  --btn-text-hover: var(--color-accent);
  --btn-border-hover: var(--color-primary);
}

.wavepress-btn-hover-darken.wavepress-btn-solid {
  --btn-bg-hover: var(--btn-dark);
  --btn-border-hover: var(--btn-dark);
}

.wavepress-btn-hover-darken.wavepress-btn-outline {
  --btn-bg-hover: var(--btn-tint);
}

.wavepress-btn-hover-darken.wavepress-btn-soft {
  --btn-bg-hover: color-mix(in srgb, var(--color-primary) 26%, transparent);
}

.wavepress-btn-hover-lift {
  --btn-transform-hover: translateY(-2px);
  --btn-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.wavepress-btn-hover-glow {
  --btn-shadow-hover: 0 6px 20px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* ── Cartoon style (Style & Buttons > Button style > Cartoon) ──
   A drawn, comic-panel look: an ink outline (the Text colour) and a hard offset
   "sticker" shadow with no blur. Buttons pop up on hover and press flat when clicked.
   Cards, the promo popup, dropdowns and form fields get the outline too.
   body.… beats the hover-effect classes, so the pop is the same whichever is chosen
   (Darken still darkens the fill). */
body.wavepress-btn-cartoon {
  --ink: var(--color-text);
  --btn-bg: var(--color-primary);
  --btn-text: var(--color-accent);
  --btn-border: var(--ink);
  --btn-bg-hover: var(--btn-bg);
  --btn-text-hover: var(--btn-text);
  --btn-border-hover: var(--ink);
  --btn-transform-hover: translate(-2px, -2px);
  --btn-shadow-hover: 6px 6px 0 var(--ink);
}

body.wavepress-btn-cartoon.wavepress-btn-hover-darken {
  --btn-bg-hover: var(--btn-dark);
}

.wavepress-btn-cartoon :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button),
.wavepress-btn-cartoon.wavepress-elementor-buttons .elementor-widget-button .elementor-button {
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

/* Outline-style buttons keep a see-through fill, inked */
.wavepress-btn-cartoon :is(.btn--outline, .wp-block-button.is-style-outline > .wp-block-button__link) {
  border-color: var(--ink);
  color: var(--ink);
}

.wavepress-btn-cartoon :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button):active,
.wavepress-btn-cartoon.wavepress-elementor-buttons .elementor-widget-button .elementor-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.wavepress-btn-cartoon :is(.post-card, .post-row, .wavepress-posts__empty) {
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.wavepress-btn-cartoon .post-card:is(:hover, :focus-within) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

.wavepress-btn-cartoon .promo-popup {
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}

.wavepress-btn-cartoon .promo-popup.is-preview-open {
  box-shadow: 8px 8px 0 var(--ink), 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}

@media (min-width: 769px) {
  .wavepress-btn-cartoon .nav-menu .sub-menu {
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
  }
}

.wavepress-btn-cartoon :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="file"]), textarea, select) {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .wavepress-btn-cartoon :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button, .post-card),
  .wavepress-btn-cartoon :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button, .post-card):is(:hover, :active, :focus-within),
  .wavepress-btn-cartoon.wavepress-elementor-buttons .elementor-widget-button .elementor-button:is(:hover, :active) {
    transform: none;
  }
}

.btn,
.search-submit,
.comment-form .submit,
.wp-block-button__link,
.wp-block-search__button {
  display: inline-block;
  padding: 0.65em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  font: inherit;
  font-family: var(--font-button);
  font-weight: var(--font-weight-button);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wavepress-btn-upper :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Primary buttons follow the chosen style */
.btn--primary,
.search-submit,
.comment-form .submit,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-block-search__button {
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-text);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.search-submit:hover,
.comment-form .submit:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-search__button:hover {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-text-hover);
}

/* Outline buttons (theme + block "Outline" style) */
.btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--color-primary);
  color: var(--color-accent);
}

/* ── Elementor Button widget (Style > "Elementor buttons use this style") ──
   Default Button widgets match the theme buttons. Specificity sits between
   Elementor's global defaults (.elementor-widget-button .elementor-button) and
   anything set on the widget itself (.elementor-NN .elementor-element-xx …),
   so per-button settings in Elementor still win. */
.wavepress-elementor-buttons .elementor-widget-button .elementor-button {
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  background-color: var(--btn-bg);
  color: var(--btn-text);
  fill: var(--btn-text);
  font-family: var(--font-button);
  font-weight: var(--font-weight-button);
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Default size only (Small); Elementor's Medium / Large / XL sizes keep their own padding */
.wavepress-elementor-buttons .elementor-widget-button .elementor-button.elementor-size-sm {
  padding: 0.65em 1.4em;
  font-size: var(--font-size-base);
}

.wavepress-elementor-buttons.wavepress-btn-outline .elementor-widget-button .elementor-button {
  border-color: var(--btn-border);
}

.wavepress-elementor-buttons.wavepress-btn-upper .elementor-widget-button .elementor-button {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wavepress-elementor-buttons .elementor-widget-button .elementor-button:hover,
.wavepress-elementor-buttons .elementor-widget-button .elementor-button:focus-visible {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  fill: var(--btn-text-hover);
  transform: var(--btn-transform-hover);
  box-shadow: var(--btn-shadow-hover);
}

/* The border only changes colour where the style uses one (outline, or the invert hover) */
.wavepress-elementor-buttons.wavepress-btn-outline .elementor-widget-button .elementor-button:is(:hover, :focus-visible),
.wavepress-elementor-buttons.wavepress-btn-hover-invert .elementor-widget-button .elementor-button:is(:hover, :focus-visible) {
  border-color: var(--btn-border-hover);
}

/* Solid + darken: a dark wash instead of a new colour, so buttons given their own
   colour in Elementor darken on hover too */
.wavepress-elementor-buttons.wavepress-btn-solid.wavepress-btn-hover-darken .elementor-widget-button {
  --btn-bg-hover: var(--btn-bg);
}

.wavepress-elementor-buttons.wavepress-btn-solid.wavepress-btn-hover-darken .elementor-widget-button .elementor-button:is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.18);
}

/* Lift / glow apply to every button */
:is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button):hover {
  transform: var(--btn-transform-hover);
  box-shadow: var(--btn-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .search-submit, .comment-form .submit, .wp-block-button__link, .wp-block-search__button):hover,
  .wavepress-elementor-buttons .elementor-widget-button .elementor-button:hover {
    transform: none;
  }
}

/* Search form (core markup) */
.search-form {
  display: flex;
  gap: var(--space-sm);
  max-width: 480px;
  margin-top: var(--space-md);
}

.search-form label {
  flex: 1;
}

.search-field,
.wp-block-search__input,
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  width: 100%;
  padding: 0.6em 0.8em;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

/* (search and comment submit buttons are styled with the buttons above) */

/* ── 11. Posts, archives, comments ────────────────────────────────────────── */

.archive-header {
  margin-bottom: var(--space-2xl);
}

.entry-header {
  margin-bottom: var(--space-xl);
}

.entry-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.entry-thumbnail {
  margin-bottom: var(--space-xl);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg) 35%, #fff);   /* a touch lighter than the page */
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover,
.post-card:focus-within {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.post-card__thumbnail {
  display: block;
  overflow: hidden;
}

.post-card__thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.post-card:hover .post-card__thumbnail img {
  transform: scale(1.03);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.post-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.post-card__title a {
  color: var(--color-primary);
  text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.post-card__meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.post-card__read-more {
  margin-top: var(--space-sm);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.post-card__read-more:hover,
.post-card__read-more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.post-card__arrow {
  margin-left: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card__thumbnail img {
    transition: none;
  }

  .post-card:hover .post-card__thumbnail img {
    transform: none;
  }
}

/* ── List layout (Customizer > Blog > Layout: List) ──
   One post per row: a coloured strip down the left (--blog-accent), the date and a
   square image on the left, the title, excerpt and "Continue reading" on the right. */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.post-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-lg) var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: color-mix(in srgb, var(--color-bg) 35%, #fff);
  border-left: 4px solid var(--blog-accent, var(--color-primary));
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
}

.post-row__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-row__date {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-text);
}

.post-row__thumbnail {
  display: block;
}

.post-row__thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--border-radius) / 2);
}

.post-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.post-row__title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.35;
}

.post-row__title a {
  color: var(--color-text);
  text-decoration: none;
}

.post-row__title a:hover,
.post-row__title a:focus-visible {
  color: var(--blog-accent, var(--color-primary));
}

.post-row__excerpt {
  margin: 0;
  line-height: 1.7;
}

.post-row__read-more {
  margin-top: var(--space-sm);
  color: var(--blog-accent, var(--color-primary));
  font-weight: 600;
  text-decoration: none;
}

.post-row__read-more:hover,
.post-row__read-more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.post-row__arrow {
  display: inline-block;
  margin-left: 0.2em;
  transition: transform 0.15s ease;
}

.post-row__read-more:hover .post-row__arrow {
  transform: translateX(3px);
}

/* Phones: one column. A small image and the date share the top line, then title, excerpt and link */
@media (max-width: 600px) {
  .post-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .post-row__aside {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .post-row__thumbnail {
    order: -1;
    width: 72px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-row__arrow {
    transition: none;
  }
}

/* ── [wavepress_posts] shortcode (inc/posts-shortcode.php) ── */

/* Cards: columns="2|3|4" sets the most across; narrower screens still drop to fewer */
.wavepress-posts.post-grid {
  margin-bottom: var(--space-xl);
}

@media (min-width: 900px) {
  .post-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* List: compact rows with an accent strip, the date, and the title (e.g. results) */
.post-links,
.entry-content .post-links {   /* beats the content's normal list indent */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.entry-content .post-links__item {
  margin: 0;
}

.post-links__item {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--color-bg) 35%, #fff);
  border-left: 4px solid var(--blog-accent, var(--color-primary));
  border-radius: 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease;
}

.post-links__item:hover,
.post-links__item:focus-within {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}

.post-links__date {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.post-links__title {
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.post-links__title:hover,
.post-links__title:focus-visible {
  color: var(--blog-accent, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The whole row is clickable through the title link */
.post-links__item {
  position: relative;
}

.post-links__title::after {
  content: '';
  position: absolute;
  inset: 0;
}

@media (max-width: 600px) {
  .post-links__item {
    grid-template-columns: 1fr;
  }

  .post-links__date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
}

.wavepress-posts__empty,
.entry-content .wavepress-posts__empty {
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--color-bg) 35%, #fff);
  border-left: 4px solid color-mix(in srgb, var(--blog-accent, var(--color-primary)) 35%, transparent);
  border-radius: 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.no-results {
  max-width: var(--content-width);
}

/* Post navigation (single posts: previous / next post) */
.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* Page numbers under the post grid: small buttons, the current page in the primary colour */
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border-radius: max(var(--border-radius), 4px);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-accent);
}

.pagination .page-numbers.dots {
  background: none;
}

.post-navigation {
  max-width: var(--content-width);
  margin: var(--space-2xl) auto 0;
}

/* Comments */
.comments-area {
  max-width: var(--content-width);
  margin: var(--space-3xl) auto 0;
}

.comment-list .comment {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
}

.comment-list .children {
  padding-left: var(--space-xl);
}

.comment-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.comment-form p {
  margin-bottom: var(--space-md);
}

/* ── 12. Elementor ────────────────────────────────────────────────────────── */

/* Pages built with Elementor: drop the theme container so sections
   (including Stretch Section and full-width containers) go edge to edge.
   The wavepress-elementor-page body class is added in functions.php. */
.wavepress-elementor-page .site-main {
  max-width: none;
  padding: 0;
}

/* Page title: use Elementor's per-page "Hide Title" toggle.
   It targets h1.entry-title by default, which matches this theme's markup. */

/* Elementor Canvas template outputs no header/footer itself;
   this is a safety net in case either slips through. */
body.elementor-template-canvas .site-header,
body.elementor-template-canvas .site-footer {
  display: none;
}

/* ── 13. Accessibility ────────────────────────────────────────────────────── */

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

.site-footer :focus-visible {
  outline-color: #fff;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden site title ("Show site title" off): reappears while it has keyboard
   focus, so tabbing never lands on an invisible link. */
.site-branding .site-title.screen-reader-text:focus {
  position: static !important;
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  /* undo WordPress core's generic grey "skip link" box for focused screen-reader text */
  background: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1.2;
  box-shadow: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.skip-link:focus {
  top: var(--admin-bar-offset);
}

/* Where main.js puts keyboard focus after "back to top" or closing the announcement:
   a landmark, not a control, so no focus ring */
[data-wavepress-focus-target]:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Business details (footer elements + shortcodes) ─────────────────────── */

.wavepress-address {
  font-style: normal;
}

/* Opening hours: day / time columns */
.wavepress-hours {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1.25em;
  row-gap: 0.25em;
  justify-content: start;
  margin: 0;
}

.wavepress-hours__row {
  display: contents;
}

.wavepress-hours dt {
  font-weight: 600;
}

.wavepress-hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.wavepress-hours__row.is-closed dd {
  opacity: 0.7;
}

.wavepress-hours__note {
  margin: var(--space-xs) 0 0;
  opacity: 0.85;
}

/* "Open now" badge (filled in by main.js; hidden until then) */
.wavepress-open-now {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0.75em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.wavepress-open-now[hidden] {
  display: none;
}

.wavepress-open-now::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #9a9a9a;
}

.wavepress-open-now.is-open::before {
  background: #3fb950;
}

.wavepress-open-now.is-closed::before {
  background: #e5534b;
}

/* In the footer the badge sits on its own line above the hours */
.footer-hours .wavepress-open-now {
  display: flex;
  width: fit-content;
}

.site-footer__cell--center .footer-hours .wavepress-open-now { margin-inline: auto; }
.site-footer__cell--right .footer-hours .wavepress-open-now  { margin-left: auto; }



/* ── Page title banner (inc/page-banner.php) ─────────────────────────────── */

.page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--banner-bg, var(--footer-bg));
  color: var(--banner-text, #ffffff);
}

.page-banner--compact { min-height: 0;     padding-block: var(--space-2xl); }
.page-banner--medium  { min-height: 240px; padding-block: var(--space-3xl); }
.page-banner--tall    { min-height: 380px; padding-block: calc(var(--space-3xl) * 1.5); }

/* Posts page with Transparent header: the header floats over the banner, so the
   banner grows by the header's height and its text stays clear of the menu. */
.wavepress-banner-under-header .page-banner--compact { padding-top: calc(var(--header-offset) + var(--space-2xl)); }
.wavepress-banner-under-header .page-banner--medium  { padding-top: calc(var(--header-offset) + var(--space-3xl)); min-height: calc(240px + var(--header-offset)); }
.wavepress-banner-under-header .page-banner--tall    { padding-top: calc(var(--header-offset) + var(--space-3xl) * 1.5); min-height: calc(380px + var(--header-offset)); }

/* Featured / default image, covered by the banner colour at the chosen strength */
.page-banner__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--banner-bg, var(--footer-bg));
  opacity: var(--banner-overlay, 0.55);
}

.page-banner__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-banner--center .page-banner__inner {
  text-align: center;
}

.page-banner__title {
  max-width: 22ch;
  margin: 0;
  color: inherit;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  text-wrap: balance;
}

.page-banner--center .page-banner__title,
.page-banner--center .page-banner__subtitle {
  margin-inline: auto;
}

.page-banner__subtitle {
  max-width: 60ch;
  margin: var(--space-md) 0 0;
  font-size: var(--font-size-lg);
  opacity: 0.88;
}

.page-banner a {
  color: inherit;
}

/* Breadcrumbs: Home › Parent › Page */
.page-banner__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

.page-banner--center .page-banner__breadcrumbs ol {
  justify-content: center;
}

.page-banner__breadcrumbs li + li::before {
  content: "›";
  margin-inline: 0.6em;
  opacity: 0.7;
}

.page-banner__breadcrumbs a {
  text-decoration: none;
}

.page-banner__breadcrumbs a:hover {
  text-decoration: underline;
}

/* "Hide the page title" (wavePRESS box): no title at all on that page or post */
.wavepress-hide-title .site-main > article > .entry-header {
  display: none;
}

/* The banner carries the title, so the templates' own titles step aside */
.wavepress-has-banner .site-main > article > .entry-header,
.wavepress-has-banner .archive-content > .archive-header,
.wavepress-has-banner .site-main > .archive-header:not(:has(.search-form)),
.wavepress-has-banner .search-results .archive-title {
  display: none;
}

/* …and so does the featured image, when it's the banner background */
.wavepress-banner-featured .site-main > article > .entry-thumbnail {
  display: none;
}

/* Less space between the banner and the content than below a plain header */
.wavepress-has-banner .site-main {
  padding-top: var(--space-2xl);
}

@media (max-width: 768px) {
  /* The current page is the title right below, so phones skip it in the trail */
  .page-banner__breadcrumbs li:last-child:not(:first-child) {
    display: none;
  }

  .page-banner--medium { min-height: 180px; padding-block: var(--space-2xl); }
  .page-banner--tall   { min-height: 260px; padding-block: var(--space-3xl); }
}

/* ── Announcement bar & top bar (inc/header-bars.php) ─────────────────────────
   Both sit above the header in the page flow (.site-preheader), so a fixed
   (sticky) header sticks once they've scrolled away. A transparent header is
   taken out of the flow, so it's pushed down by their height instead:
     --preheader-height:  full height (set by main.js)
     --preheader-visible: how much is still on screen as the page scrolls */

.site-preheader {
  position: relative;
  z-index: 1001;   /* above the header, so a transparent header can't cover the links */
}

.wavepress-transparent-header .site-header {
  top: calc(var(--admin-bar-height) + var(--preheader-height, 0px));
}

.wavepress-transparent-header.wavepress-header-fixed .site-header {
  top: calc(var(--admin-bar-offset) + var(--preheader-visible, 0px));
}

/* Announcement bar */
.announcement-bar {
  background: var(--announce-bg-custom, var(--color-text));
  color: var(--announce-color-custom, var(--color-bg));
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.announcement-bar[hidden] {
  display: none;
}

/* Closing: the bar stays solid and slides up out of view, with the page rising
   in step (main.js sets the starting height). Its contents are pinned to the bottom
   edge so they travel up with it, fading as they go — no gap of page background. */
.announcement-bar {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.announcement-bar.is-closing {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 0 !important;
}

.announcement-bar__inner {
  transition: opacity 0.2s ease;
}

.announcement-bar.is-closing .announcement-bar__inner {
  flex-shrink: 0;
  opacity: 0;
}

.announcement-bar__inner {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.6rem calc(var(--gutter) + 2rem);   /* room for the close button on both sides keeps the text centred */
  text-align: center;
}

/* The message. Centred and wrapping by default (and for "Never" scrolling). */
.announcement-bar__item {
  margin: 0;
}

/* Scrolling modes: one line, clipped at the edges with a soft fade.
   main.js adds .is-scrolling when the message should move ("Always", or "Only when
   it doesn't fit" and it's too long). It's a ticker: the message comes in from the
   right edge, crosses, and leaves on the left, then starts again from the right. */
.announcement-bar--scroll-auto .announcement-bar__viewport,
.announcement-bar--scroll-always .announcement-bar__viewport {
  overflow: hidden;
}

.announcement-bar--scroll-auto .announcement-bar__item,
.announcement-bar--scroll-always .announcement-bar__item {
  white-space: nowrap;
}

.announcement-bar.is-scrolling .announcement-bar__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}

.announcement-bar.is-scrolling .announcement-bar__track {
  display: flex;
  width: max-content;
  animation: wavepress-announce-scroll var(--announce-duration, 20s) linear infinite;
}

/* Pause while the visitor is reading it or tabbing through its link */
.announcement-bar.is-scrolling:hover .announcement-bar__track,
.announcement-bar.is-scrolling:focus-within .announcement-bar__track {
  animation-play-state: paused;
}

/* From just past the right edge (--announce-from = the viewport's width, set by
   main.js) to fully past the left edge (-100% = the message's own width) */
@keyframes wavepress-announce-scroll {
  from { transform: translateX(var(--announce-from, 100vw)); }
  to   { transform: translateX(-100%); }
}

/* Reduced motion: no scrolling, the whole message wraps instead */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar__item {
    white-space: normal !important;
  }

  .announcement-bar .announcement-bar__track {
    animation: none !important;
  }
}

.announcement-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.announcement-bar__link {
  font-weight: 600;
  white-space: nowrap;
}

.announcement-bar__close {
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) - 0.5rem);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}

.announcement-bar__close:hover,
.announcement-bar__close:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 15%, transparent);
}

.announcement-bar__close .wavepress-icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Top bar */
.top-bar {
  background: var(--topbar-bg-custom, var(--color-primary));
  color: var(--topbar-color-custom, var(--color-accent));
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.top-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  max-width: var(--max-width);
  min-height: 2.5rem;
  margin-inline: auto;
  padding: 0.3rem var(--gutter);
}

.top-bar__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-bar__item,
.top-bar__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.top-bar a {
  color: inherit;
  text-decoration: none;
}

.top-bar__item > a:hover,
.top-bar__item > a:focus-visible,
.top-bar__item--text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.top-bar__item .wavepress-icon {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.85;
}

.top-bar .wavepress-open-now {
  padding-block: 0.05em;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Social icons: a bit smaller than the header's, and only fading on hover
   (the primary colour would vanish on a primary background) */
.top-bar .social-icons {
  --social-icon-size: 15px;
  gap: 0;
  margin-inline-start: auto;
  margin-inline-end: -0.5rem;
}

.top-bar .social-icons__link:hover,
.top-bar .social-icons__link:focus-visible {
  color: inherit;
  opacity: 0.75;
}

@media (max-width: 768px) {
  /* Hidden on phones unless "Show on phones" is ticked */
  .top-bar:not(.top-bar--mobile) {
    display: none;
  }

  .top-bar__inner,
  .top-bar__items {
    justify-content: center;
  }

  .top-bar__inner {
    gap: var(--space-xs) var(--space-md);
  }

  .top-bar__items {
    gap: var(--space-xs) var(--space-md);
  }

  .top-bar .social-icons {
    margin-inline: 0;
  }
}

/* ── Mobile action bar (inc/header-bars.php) ── phones only */

.action-bar {
  display: none;
}

@media (max-width: 768px) {
  .action-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;   /* under the header (1000), so an open menu covers it */
    padding-bottom: env(safe-area-inset-bottom);   /* iPhone home indicator */
    background: var(--header-bg);
    color: var(--header-text, var(--color-text));   /* same colours as the header */
    border-top: 1px solid var(--header-border);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
  }

  .action-bar__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .action-bar__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .action-bar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 3.75rem;
    padding-inline: 0.25rem;
    color: inherit;
    font-family: var(--font-button);
    font-weight: var(--font-weight-button);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
  }

  .action-bar__item + .action-bar__item .action-bar__link {
    border-left: 1px solid var(--header-border);
  }

  .action-bar__link .wavepress-icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-primary);
  }

  .action-bar__label {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .action-bar__link:active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  /* The extra button (Book, Order…) uses the button colours */
  .action-bar__link--custom {
    background: var(--btn-bg);
    color: var(--btn-text);
  }

  .wavepress-btn-outline .action-bar__link--custom,
  .wavepress-btn-soft .action-bar__link--custom {
    background: var(--color-primary);
    color: var(--color-accent);
  }

  .action-bar__link--custom .wavepress-icon {
    color: inherit;
  }

  .action-bar__link--custom:active {
    background: var(--btn-dark);
  }

  .action-bar__item + .action-bar__item .action-bar__link--custom {
    border-left-color: transparent;
  }

  /* Room at the bottom of the page so the bar never covers the footer */
  body.wavepress-has-action-bar {
    padding-bottom: calc(3.75rem + 1px + env(safe-area-inset-bottom));
  }

  /* Pages without the site header and footer don't get it */
  .template-blank .action-bar,
  .elementor-template-canvas .action-bar {
    display: none;
  }

  body.wavepress-has-action-bar.template-blank,
  body.wavepress-has-action-bar.elementor-template-canvas {
    padding-bottom: 0;
  }
}

/* ── Contact Form 7 toast (inc/cf7-toast.php) ─────────────────────────────────
   "Message sent" pop-up in the theme's colours, corners and fonts. Colours from
   Customizer > Contact Form Toast (--toast-bg / --toast-text). */

.wavepress-toast {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.85rem 1.15rem;
  border-radius: var(--border-radius);
  background: var(--toast-bg, var(--color-text));
  color: var(--toast-text, var(--color-bg));
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wavepress-toast[hidden] {
  display: none;
}

.wavepress-toast.is-visible {
  opacity: 1;
  transform: none;
}

.wavepress-toast--left {
  right: auto;
  left: 1.75rem;
}

.wavepress-toast--center {
  right: auto;
  left: 50%;
  transform: translate(-50%, 1.25rem);
}

.wavepress-toast--center.is-visible {
  transform: translateX(-50%);
}

.wavepress-toast .wavepress-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.wavepress-btn-cartoon .wavepress-toast {
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

/* The toast shows the form's messages (sent, and the "there's an error" summary),
   so CF7's box under the form never appears and the page doesn't jump. The
   summary is still read out by CF7's own screen reader message. */
.wavepress-cf7-toast .wpcf7 form .wpcf7-response-output {
  display: none;
}

.wavepress-toast.is-error {
  background: #b3261e;
  color: #ffffff;
}

.wavepress-toast__icon {
  display: inline-flex;
}

.wavepress-toast__icon--error,
.wavepress-toast.is-error .wavepress-toast__icon--ok {
  display: none;
}

.wavepress-toast.is-error .wavepress-toast__icon--error {
  display: inline-flex;
}

/* ── Contact Form 7 forms ─────────────────────────────────────────────────────
   Theme fields and button, the fields close together, and error tips that sit
   under their field without pushing the form taller. */

.wpcf7 form > p,
.wpcf7 form > fieldset:not(.hidden-fields-container),
.wpcf7 form .wpcf7-form-row {
  margin: 0 0 1.5rem;   /* room for an error tip under each field */
}

.wpcf7 form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* CF7's default template puts a <br> between the label and the field */
.wpcf7 form label > br {
  display: none;
}

.wpcf7 .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  margin-top: 0.3rem;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select).wpcf7-form-control {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-body);
  line-height: 1.4;
}

.wpcf7 textarea.wpcf7-form-control {
  height: 9rem;
  min-height: 5rem;
  resize: vertical;
}

.wpcf7 .wpcf7-form-control:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* A field with an error: red edge, and the tip just below it, out of the flow */
.wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-not-valid {
  border-color: #b3261e;
  box-shadow: 0 0 0 1px #b3261e;
}

.wpcf7 .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.15rem;
  overflow: hidden;
  color: #b3261e;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Tick boxes and choices */
.wpcf7 .wpcf7-list-item {
  margin: 0 1rem 0 0;
}

.wpcf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--font-weight-body);
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  accent-color: var(--color-primary);
}

/* Send button: the theme's primary button */
.wpcf7 .wpcf7-submit {
  padding: 0.65em 1.4em;
  border: 2px solid var(--btn-border);
  border-radius: var(--button-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-button);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-button);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 .wpcf7-submit:is(:hover, :focus-visible) {
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  transform: var(--btn-transform-hover);
  box-shadow: var(--btn-shadow-hover);
}

.wpcf7 .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.wavepress-btn-upper .wpcf7 .wpcf7-submit {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wavepress-btn-cartoon .wpcf7 .wpcf7-submit {
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.wavepress-btn-cartoon .wpcf7 .wpcf7-submit:is(:hover, :focus-visible) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

/* The spinner sits beside the button without nudging anything */
.wpcf7 .wpcf7-spinner {
  vertical-align: middle;
}

/* Without the toast, CF7's message box keeps a theme look */
.wpcf7 form .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  border-left-color: #b3261e;
  background: color-mix(in srgb, #b3261e 8%, var(--color-bg));
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7 .wpcf7-submit:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .wavepress-toast,
  .wavepress-toast--left,
  .wavepress-toast--center {
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    max-width: none;
    justify-content: center;
    text-align: center;
    transform: translateY(1.25rem);
  }

  .wavepress-toast.is-visible {
    transform: none;
  }

  /* Above the mobile action bar */
  .wavepress-has-action-bar .wavepress-toast {
    bottom: calc(3.75rem + 1px + 0.75rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wavepress-toast,
  .wavepress-toast.is-visible {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .wavepress-toast--center,
  .wavepress-toast--center.is-visible {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .wavepress-toast--center,
  .wavepress-toast--center.is-visible {
    transform: none;
  }
}

/* ── Back to top button (inc/back-to-top.php) ── */

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--btn-border);
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.15s ease, color 0.15s ease;
}

/* Outline and soft buttons would be see-through over the page, so this one is always solid */
.wavepress-btn-outline .back-to-top,
.wavepress-btn-soft .back-to-top {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-accent);
}

.back-to-top--left {
  right: auto;
  left: 1.25rem;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--btn-dark);
  border-color: var(--btn-dark);
  color: var(--color-accent);
}

.back-to-top .wavepress-icon {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

@media (max-width: 768px) {
  .back-to-top {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .back-to-top--left {
    left: 1rem;
  }

  /* Above the mobile action bar */
  .wavepress-has-action-bar .back-to-top {
    bottom: calc(3.75rem + 1px + 0.75rem + env(safe-area-inset-bottom));
  }

  .back-to-top--no-mobile {
    display: none;
  }
}

/* ── Coming soon / maintenance page (inc/coming-soon.php) ── */

.wavepress-coming-soon {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

/* Background image, darkened with the footer colour so the text stays readable */
.wavepress-coming-soon--image {
  background-image:
    linear-gradient(color-mix(in srgb, var(--footer-bg) 72%, transparent), color-mix(in srgb, var(--footer-bg) 72%, transparent)),
    var(--cs-bg-image);
  background-size: cover;
  background-position: center;
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
  text-align: center;
}

.coming-soon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 34rem;
  margin-block: auto;   /* centred, with the footer link pushed to the bottom */
}

.coming-soon__logo {
  max-height: 96px;
  width: auto;
}

.coming-soon__site-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coming-soon__heading {
  margin: 0;
  color: inherit;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 1.05;
}

.coming-soon__message {
  margin: 0;
  font-size: var(--font-size-lg);
  opacity: 0.9;
}

.coming-soon__launch {
  margin: 0;
  padding: 0.35em 1em;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coming-soon__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.coming-soon__contact li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.coming-soon__contact .wavepress-icon {
  width: 1em;
  height: 1em;
  opacity: 0.8;
}

.coming-soon a {
  color: inherit;
}

.coming-soon .social-icons {
  justify-content: center;
}

.coming-soon .social-icons__link:hover,
.coming-soon .social-icons__link:focus-visible {
  color: inherit;
  opacity: 0.75;
}

.coming-soon__footer {
  margin: var(--space-2xl) 0 0;
  font-size: var(--font-size-sm);
  opacity: 0.75;
}

/* ── Single post layouts (inc/single-post.php, Customizer > Blog > Single post layout) ── */

/* Meta row: icon + text items (author, date, category, reading time) */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.post-meta__item .wavepress-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

.post-meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.post-meta a:hover,
.post-meta a:focus-visible {
  text-decoration: underline;
}

/* Share buttons: brand colours, small and square-ish */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-buttons__link {
  --share-bg: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.9rem;
  border-radius: min(var(--border-radius), 4px);
  background: var(--share-bg);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.share-buttons__link:hover,
.share-buttons__link:focus-visible {
  color: #fff;
  filter: brightness(1.15);
}

.share-buttons__link .wavepress-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.share-buttons__link--linkedin { --share-bg: #0a66c2; }
.share-buttons__link--facebook { --share-bg: #1877f2; }
.share-buttons__link--x,
.share-buttons__link--threads  { --share-bg: #000000; }
.share-buttons__link--email    { --share-bg: var(--color-secondary); }

.entry-footer .share-buttons {
  margin-top: var(--space-lg);
}

/* ── Split: title left (stays in view), post right ── */
.single-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-2xl) var(--space-3xl);
  align-items: start;
}

.single-split__aside {
  position: sticky;
  top: calc(var(--admin-bar-offset) + var(--header-offset, 0px) + var(--space-lg));
}

/* With a static (not fixed) header, the column only needs to clear the admin bar */
.wavepress-header-static .single-split__aside {
  top: calc(var(--admin-bar-offset) + var(--space-lg));
}

.single-split__title {
  margin: 0 0 var(--space-lg);
  color: var(--color-primary);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.1;
}

.single-split__cats {
  margin: 0;
  font-size: var(--font-size-sm);
}

.single-split__cats + .single-split__cats {
  margin-top: var(--space-xs);
}

.single-split__cats-label {
  margin-right: 0.35em;
  color: var(--color-text-muted);
}

.single-split__cats a {
  color: var(--color-text);
  text-decoration: none;
}

.single-split__cats a:hover,
.single-split__cats a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.single-split__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.single-split__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.single-split__main .entry-content {
  margin-top: var(--space-sm);
}

@media (max-width: 900px) {
  .single-split {
    grid-template-columns: 1fr;
  }

  .single-split__aside {
    position: static;
  }

  .single-split__title {
    margin-bottom: var(--space-sm);
  }
}

/* ── Hero: image banner, post with Recent posts beside it ── */
.post-hero {
  position: relative;
  background: var(--banner-bg, var(--footer-bg));
  background-size: cover;
  background-position: center;
  color: var(--banner-text, #ffffff);
  text-align: center;
}

.post-hero--image {
  background-image: var(--post-hero-image);
}

/* The banner overlay colour and strength (Customizer > Page Title Banner) */
.post-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--banner-bg, var(--footer-bg));
  opacity: var(--banner-overlay, 0.6);
}

.post-hero__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-3xl) var(--gutter);
}

.post-hero__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.post-hero__avatar {
  width: 96px;
  height: 96px;
  border: 3px solid color-mix(in srgb, currentColor 70%, transparent);
  border-radius: 50%;
  object-fit: cover;
}

.post-hero__author-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.post-hero__title {
  margin: 0 0 var(--space-lg);
  color: inherit;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.2;
}

.post-meta--hero {
  justify-content: center;
  gap: var(--space-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* "date | category | 3 mins read" */
.post-meta--hero .post-meta__item {
  padding-inline: var(--space-md);
}

.post-meta--hero .post-meta__item + .post-meta__item {
  border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}

.post-meta--hero a {
  color: inherit;
}

.single-hero-main.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-3xl);
  align-items: start;
}

.post-sidebar__heading {
  display: inline-block;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-primary);
  font-size: 1rem;
}

.recent-posts {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-posts__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.recent-posts__thumb {
  flex-shrink: 0;
}

.recent-posts__thumb img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: calc(var(--border-radius) / 2);
}

.recent-posts__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.recent-posts__title {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.recent-posts__title:hover,
.recent-posts__title:focus-visible {
  text-decoration-thickness: 2px;
}

.recent-posts__meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  .single-hero-main.has-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Phones: the meta items wrap, so drop the dividers (one could start a line) and space them out */
@media (max-width: 600px) {
  .post-meta--hero {
    gap: var(--space-xs) var(--space-lg);
  }

  .post-meta--hero .post-meta__item,
  .post-meta--hero .post-meta__item + .post-meta__item {
    padding-inline: 0;
    border-left: 0;
  }
}

/* ── Tall images in single posts (computers and tablets) ──
   Portrait photos would otherwise run well past the screen. Featured images and
   images in the post content are capped at --post-image-max-height and centred.
   Wide / full-width blocks, and images given a set width in the editor, are left alone.
   Blog > Tall featured images = Crop: the featured image fills the width at 16:9 instead,
   showing the top of the photo. */
@media (min-width: 769px) {
  .single-post {
    --post-image-max-height: min(70vh, 640px);
  }

  .single-post .entry-thumbnail img,
  .single-post .single-split__image img,
  .single-post .entry-content img:not([style*="width"]):not(.alignwide img):not(.alignfull img) {
    width: auto;
    max-width: 100%;
    max-height: var(--post-image-max-height);
    margin-inline: auto;
  }

  /* Keep left / right aligned images on their side */
  .single-post .entry-content .alignleft img,
  .single-post .entry-content img.alignleft { margin-inline: 0 auto; }
  .single-post .entry-content .alignright img,
  .single-post .entry-content img.alignright { margin-inline: auto 0; }

  .wavepress-tall-images-crop .entry-thumbnail img,
  .wavepress-tall-images-crop .single-split__image img {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;   /* keep the top of the photo (faces, headings), trim the bottom */
  }
}

/* ── Promo popup (Customizer > Promo Popup, inc/promo-popup.php) ──
   A centred card over a dimmed page: image on the left (on top on phones), then the
   heading, message and button. Uses the theme's colours, corners and buttons. */
.promo-popup {
  width: min(760px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.promo-popup::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* Fade and lift in (skipped for reduced motion) */
.promo-popup[open] {
  animation: wavepress-promo-in 0.3s ease-out;
}

.promo-popup[open]::backdrop {
  animation: wavepress-promo-fade 0.3s ease-out;
}

@keyframes wavepress-promo-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes wavepress-promo-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-popup[open],
  .promo-popup[open]::backdrop {
    animation: none;
  }
}

/* Customizer preview: opened without taking focus from the field being typed in
   (promo-popup.js), so it's drawn as a centred box with its own dimmed surround */
.promo-popup.is-preview-open {
  position: fixed;
  inset: 0;
  z-index: 100000;
  margin: auto;
  height: fit-content;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}

/* The page behind doesn't scroll while it's open */
html:has(.promo-popup[open]) {
  overflow: hidden;
}

.promo-popup__panel {
  position: relative;
  outline: none;
  display: grid;
  max-height: inherit;
  overflow-y: auto;
}

.promo-popup__panel--has-image {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.promo-popup__media {
  min-height: 100%;
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg));
}

.promo-popup__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-popup__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
}

.promo-popup__panel:not(.promo-popup__panel--has-image) .promo-popup__body {
  text-align: center;
  align-items: center;
  padding-inline: var(--space-2xl);
}

.promo-popup__heading {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
}

.promo-popup__text > :first-child { margin-top: 0; }
.promo-popup__text > :last-child  { margin-bottom: 0; }

.promo-popup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xs);
}

.promo-popup__link {
  font-weight: 600;
}

.promo-popup__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.promo-popup__close:hover,
.promo-popup__close:focus-visible {
  background: var(--color-bg);
}

.promo-popup__close .wavepress-icon {
  width: 1rem;
  height: 1rem;
}

/* Phones: image on top, a shorter crop */
@media (max-width: 600px) {
  .promo-popup__panel--has-image {
    grid-template-columns: 1fr;
  }

  .promo-popup__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .promo-popup__body {
    padding: var(--space-xl) var(--space-lg);
  }
}


/* ==========================================================================
   [wavepress_map]: click-to-load Google Map
   ========================================================================== */

.wavepress-map {
  position: relative;
  height: var(--map-height, 400px);
  margin-block: var(--space-lg);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* A faint street-grid pattern so the placeholder reads as "a map goes here" */
.wavepress-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.wavepress-map.is-loaded::before {
  display: none;
}

.wavepress-map__placeholder {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
}

.wavepress-map__pin {
  display: inline-flex;
  color: var(--color-primary);
}

.wavepress-map__pin svg {
  width: 2.25rem;
  height: 2.25rem;
}

.wavepress-map__address {
  margin: 0;
  max-width: 32ch;
  font-weight: 600;
}

.wavepress-map__note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, inherit);
}

.wavepress-map__note a {
  color: inherit;
}

.wavepress-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.wavepress-map__notice {
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed currentColor;
  font-size: var(--font-size-sm);
}