/*
 * 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;
}

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

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

/* 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.) */
.wavepress-transparent-header:not(.wavepress-elementor-page) .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;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  text-decoration: none;
  color: 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-tagline {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: 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;
}

/* 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.25rem;
  }

  .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);
  }

  /* 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: '';
}

/* ── 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(--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(--color-text));   /* dropdowns set --nav-link-color */
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  transition: color 0.15s ease;
}

.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(--color-text));
    --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);
  }
}

/* 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;
  }
}

/* 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 {
    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;
  }

  .header-layout--logo-left-nav-center::after {
    content: none;
  }

  .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);
}

/* 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: var(--font-size-sm);
  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: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
}

.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: 0.8125rem;
  }

  /* 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);
}

.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);
}

/* 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 {
    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;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.post-card__thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.post-card__title {
  font-size: 1.15rem;
  margin-bottom: 0;
}

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

.post-card__title a:hover {
  color: var(--color-primary);
}

.post-card__meta,
.post-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.post-card__excerpt {
  flex: 1;
}

.post-card__read-more {
  align-self: flex-start;
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
}

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

/* Pagination / post navigation */
.pagination .nav-links,
.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
}

.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); }

/* 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), plus a hidden copy for a gapless loop. */
.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;
}

.announcement-bar.is-scrolling .announcement-bar__item {
  padding-right: 4rem;   /* gap before the message repeats */
}

/* 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;
}

/* The track holds two copies, so moving it half its width loops seamlessly */
@keyframes wavepress-announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 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(--color-text);
    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;
  }
}

/* ── 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;
}