/* ============================================================
   Atheria Header — bar + fullscreen menu styles
   Lifted verbatim from the original Header HTML widget.
   ============================================================ */

/* ============================================================
   Atheria Stays — Header + Fullscreen Menu (v6)
   Layout strategy:
   - Desktop & Tablet: overlay locked to 100vh, two independent
     scroll rails (left panel scrolls if nav+meta is tall, right
     panel scrolls through media cards).
   - Mobile: overlay 100dvh, right media panel hidden entirely,
     left panel scrolls if content is taller than viewport.
   ============================================================ */


/* ---------- Header bar appearance -------------------------- */


/* The room Header 01 takes, rounded up, for the page before any script measures it. */
body:has(#atheria-site-header .ath-header) {
  --ath-header-height: 64px;
}

@media (min-width: 768px) {
  body:has(#atheria-site-header .ath-header) {
    --ath-header-height: 81px;
  }
}

@media (min-width: 1025px) {
  body:has(#atheria-site-header .ath-header) {
    --ath-header-height: 80px;
  }
}

.ath-header {
  position: relative;
  z-index: 100;
  background: var(--ath-surface);
  border-bottom: 1px solid var(--ath-border-light);
}


/* ---------- Menu button (left of header) -------------------
   The tunable properties read --ath-menu-toggle-* so the Menu Toggle
   widget can set them without competing on specificity. The fallbacks
   are inline rather than declared in one block because the very-small
   phone rule at the end of this file needs a different fallback for
   the same variable; a declaration would leave it unreachable. */

.elementor-widget-atheria_menu_toggle .ath-header__menu-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--ath-menu-toggle-padding, 10px 14px);
  margin: 0;
  background: var(--ath-menu-toggle-bg, transparent);
  color: var(--ath-menu-toggle-color, var(--ath-on-surface));
  border: 0;
  border-radius: var(--ath-menu-toggle-radius, 8px);
  outline: 0;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem);
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  word-spacing: normal;
  line-height: 1;
  transition:
    color 0.25s var(--ath-ease-out),
    background-color 0.25s var(--ath-ease-out);
}

.elementor-widget-atheria_menu_toggle .ath-header__menu-button:hover,
.elementor-widget-atheria_menu_toggle .ath-header__menu-button:focus-visible {
  background: var(--ath-menu-toggle-bg-hover, color-mix(in srgb, var(--ath-arctic-mist) 40%, transparent));
  color: var(--ath-menu-toggle-color-hover, var(--ath-menu-toggle-color, var(--ath-on-surface)));
  border: 0;
  border-radius: var(--ath-menu-toggle-radius, 8px);
  outline: 0;
  box-shadow: none;
}

.elementor-widget-atheria_menu_toggle .ath-header__menu-button:focus-visible {
  outline: var(--ath-focus-ring-width) solid var(--ath-focus-ring);
  outline-offset: var(--ath-focus-ring-offset);
}

.ath-header__menu-lines {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 12px;
  flex: 0 0 auto;
}

.ath-header__menu-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    transform 0.35s var(--ath-ease-out),
    top 0.35s var(--ath-ease-out);
}

.ath-header__menu-line:nth-child(1) { top: 2px; }
.ath-header__menu-line:nth-child(2) { top: 8px; }

.ath-header__menu-button[aria-expanded="true"] .ath-header__menu-line:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.ath-header__menu-button[aria-expanded="true"] .ath-header__menu-line:nth-child(2) {
  top: 5px;
  transform: rotate(-45deg);
}


/* ---------- Close button (inside overlay top bar) ---------- */

.ath-menu button.ath-menu__close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: var(--ath-menu-close-padding, 20px 48px);
  background: var(--ath-menu-close-bg, transparent);
  color: var(--ath-menu-close-color, var(--ath-on-inverse));
  border: 1px solid color-mix(in srgb, var(--ath-menu-close-border-color, var(--ath-on-inverse)) calc(var(--ath-menu-close-border-opacity, 0.45) * 100%), transparent);
  border-radius: var(--ath-menu-close-radius, 999px);
  outline: 0;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem);
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  word-spacing: normal;
  line-height: 1;
  transition:
    background-color 0.25s var(--ath-ease-out),
    border-color 0.25s var(--ath-ease-out),
    color 0.25s var(--ath-ease-out);
}

.ath-menu button.ath-menu__close:hover,
.ath-menu button.ath-menu__close:focus-visible {
  background: var(--ath-menu-close-bg-hover, color-mix(in srgb, var(--ath-on-inverse) 8%, transparent));
  color: var(--ath-menu-close-color-hover, var(--ath-menu-close-color, var(--ath-on-inverse)));
  border: 1px solid color-mix(in srgb, var(--ath-menu-close-border-color-hover, var(--ath-on-inverse)) calc(var(--ath-menu-close-border-opacity-hover, 1) * 100%), transparent);
  border-radius: var(--ath-menu-close-radius, 999px);
  outline: 0;
  box-shadow: none;
}

.ath-menu button.ath-menu__close:focus-visible {
  outline: var(--ath-focus-ring-width) solid var(--ath-focus-ring);
  outline-offset: var(--ath-focus-ring-offset);
}

.ath-menu__close-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.ath-menu__close-icon::before,
.ath-menu__close-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
}
.ath-menu__close-icon::before { transform: rotate(45deg); }
.ath-menu__close-icon::after  { transform: rotate(-45deg); }


/* ---------- Overlay base ----------------------------------- */

.ath-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0s linear 0.45s,
    opacity 0.35s var(--ath-ease-out);
}

.ath-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    visibility 0s linear 0s,
    opacity 0.35s var(--ath-ease-out);
}

.ath-menu.is-closing {
  pointer-events: none;
}

body.ath-menu-open {
  overflow: hidden;
}

/* The open menu covers WordPress's toolbar, so a signed-in builder sees it as a visitor does; the header's own stacking context has to rise with it. */
body.admin-bar.ath-menu-open #atheria-site-header,
body.admin-bar.ath-menu-open #atheria-site-header .ath-header {
  z-index: 100000;
}

/* ---------- Elementor editor safety -------------------------
   At rest the overlay stays out of the way, or it would cover the
   canvas while a Page or the Footer template is being edited. It
   becomes visible only once the controller has opened it from a real
   click on the menu trigger, and the close button puts it back.
------------------------------------------------------------- */

body.elementor-editor-active .ath-menu:not(.is-open),
body.elementor-editor-preview .ath-menu:not(.is-open) {
  position: fixed !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.elementor-editor-active .ath-menu.is-open,
body.elementor-editor-preview .ath-menu.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ---------- Height chain (desktop & tablet) ----------------
   Force the shell, its inner, the body, and both panels to all
   take exactly the overlay height. This is what gives each panel
   a real container to scroll inside of. */

@media (min-width: 768px) {

  .ath-menu__shell,
  .ath-menu__shell > .e-con-inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .ath-menu__body {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .ath-menu__panel,
  .ath-menu__panel--nav,
  .ath-menu__panel--media {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* Left panel: own vertical scroll */
  .ath-menu__panel--nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ath-frost) 30%, transparent) transparent;
  }

  /* Right panel wrapper: no scroll itself, hands off to media-scroll */
  .ath-menu__panel--media,
  .ath-menu__panel--media > .e-con-inner {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* Right media rail: own vertical scroll */
  .ath-menu__media-scroll {
    flex: 1 1 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ath-frost) 30%, transparent) transparent;
  }

  /* Visible scroll bars (Chromium/WebKit) for both rails */
  .ath-menu__panel--nav::-webkit-scrollbar,
  .ath-menu__media-scroll::-webkit-scrollbar {
    width: 8px;
  }
  .ath-menu__panel--nav::-webkit-scrollbar-thumb,
  .ath-menu__media-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ath-frost) 30%, transparent);
    border-radius: 4px;
  }
  .ath-menu__panel--nav::-webkit-scrollbar-thumb:hover,
  .ath-menu__media-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ath-frost) 50%, transparent);
  }
  .ath-menu__panel--nav::-webkit-scrollbar-track,
  .ath-menu__media-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
}


/* ---------- Mobile (≤767px) -------------------------------- */

@media (max-width: 767px) {

  .ath-menu__shell,
  .ath-menu__shell > .e-con-inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .ath-menu__body {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  .ath-menu__panel--media {
    display: none !important;
  }

  /* Left panel: scrollable, with comfortable bottom padding so
     the Reservations block never touches the bottom of the
     viewport. Justify content to start (top), not space-between. */
  .ath-menu__panel--nav {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ath-frost) 35%, transparent) transparent;
  }
  .ath-menu__panel--nav::-webkit-scrollbar {
    width: 6px;
    -webkit-appearance: none;
  }
  .ath-menu__panel--nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ath-frost) 35%, transparent);
    border-radius: 3px;
  }
  .ath-menu__panel--nav::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Tighter nav so meta block has room to breathe above the bottom */
  .ath-menu__nav .elementor-icon-list-items {
    gap: 2px !important;
  }
  .ath-menu__nav .elementor-icon-list-item > a,
  .ath-menu__nav .elementor-icon-list-item > .elementor-icon-list-text {
    padding: 3px 0 !important;
    gap: 12px !important;
  }
  .ath-menu__nav .elementor-icon-list-text {
    font-size: clamp(1.625rem, 1rem + 4vw, 2.5rem);
    line-height: 1.05;
  }
  .ath-menu__nav .elementor-icon-list-item > a::before,
  .ath-menu__nav .elementor-icon-list-item > .elementor-icon-list-text::before {
    min-width: 1.75em;
    padding-top: 5px;
  }

  /* Pull the meta block up — sits closer to the nav, not floating
     near the bottom edge. */
  .ath-menu__meta {
    margin-top: 8px !important;
    gap: 8px !important;
  }
}

@media (max-width: 374px) {
  .ath-menu__nav .elementor-icon-list-text {
    font-size: 1.5rem;
  }
}


/* ---------- Nav (Elementor Icon List) ---------------------- */

.ath-menu__nav .elementor-icon-list-items {
  counter-reset: ath-nav;
}

.ath-menu__nav .elementor-icon-list-item {
  counter-increment: ath-nav;
  background: transparent;
}

.ath-menu__nav .elementor-icon-list-item::after {
  content: none !important;
}

.ath-menu__nav .elementor-icon-list-icon {
  display: none !important;
}

.ath-menu__nav .elementor-icon-list-item > a,
.ath-menu__nav .elementor-icon-list-item > .elementor-icon-list-text {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 16px !important;
  color: var(--ath-on-inverse);
  text-decoration: none !important;
  transition:
    color 0.3s var(--ath-ease-out),
    transform 0.3s var(--ath-ease-out);
}

.ath-menu__nav .elementor-icon-list-item > a::before,
.ath-menu__nav .elementor-icon-list-item > .elementor-icon-list-text::before {
  content: counter(ath-nav, decimal-leading-zero);
  min-width: 2.25em;
  padding-top: 6px;
  align-self: flex-start;
  color: var(--ath-on-inverse-accent);
  font-family: var(--ath-font-eyebrow);
  font-size: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ath-menu__nav .elementor-icon-list-text {
  color: var(--ath-on-inverse);
  font-family: var(--ath-font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.018em;
}

.ath-menu__nav .elementor-icon-list-item > a:hover,
.ath-menu__nav .elementor-icon-list-item > a:focus-visible {
  color: var(--ath-on-inverse-accent);
  transform: translateX(4px);
}

.ath-menu__nav .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.ath-menu__nav .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
  color: var(--ath-on-inverse-accent);
}


/* ---------- Meta block colors ------------------------------ */

.ath-menu .ath-menu__meta-label,
.ath-menu .ath-menu__meta .elementor-heading-title {
  margin: 0;
  color: var(--ath-on-inverse-accent);
  font-family: var(--ath-font-eyebrow);
  font-size: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ath-menu .ath-menu__meta-contact,
.ath-menu .ath-menu__meta-contact p {
  margin: 0;
  color: var(--ath-on-inverse);
}

.ath-menu .ath-menu__meta-tagline,
.ath-menu .ath-menu__meta-tagline p {
  margin: 0;
  color: var(--ath-border-light);
}

.ath-menu .ath-menu__meta .ath-hotel-contact {
  color: var(--ath-on-inverse);
}

.ath-menu .ath-menu__meta .ath-hotel-contact__label {
  color: var(--ath-on-inverse-accent);
  font-family: var(--ath-font-eyebrow);
  font-size: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ath-menu .ath-menu__meta .ath-hotel-contact__link,
.ath-menu .ath-menu__meta .ath-social-links__link {
  color: var(--ath-on-inverse);
}

.ath-menu .ath-menu__meta .ath-hotel-contact__link:hover,
.ath-menu .ath-menu__meta .ath-hotel-contact__link:focus-visible,
.ath-menu .ath-menu__meta .ath-social-links__link:hover,
.ath-menu .ath-menu__meta .ath-social-links__link:focus-visible {
  color: var(--ath-on-inverse-accent);
}


/* ---------- Media card appearance --------------------------
   Each card: stacked image (top, 4:5 ratio) + title (bottom),
   wrapped in a rounded container that fully clips the image. */

.ath-menu__media-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--ath-frost) 4%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ath-frost) 12%, transparent) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition:
    border-color 0.3s var(--ath-ease-out),
    transform 0.35s var(--ath-ease-out),
    background-color 0.3s var(--ath-ease-out);
}

.ath-menu__media-card:hover {
  border-color: var(--ath-on-inverse-accent) !important;
  background: color-mix(in srgb, var(--ath-frost) 7%, transparent) !important;
  transform: translateY(-2px);
}

/* Image wrapper: force aspect ratio on the widget container,
   not just the <img>, so Elementor cannot shrink it. */
.ath-menu__media-image,
.ath-menu__media-image .elementor-widget-container,
.ath-menu__media-image .elementor-image {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.ath-menu__media-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

.ath-menu__media-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Title sits below the image inside the rounded card. */
.ath-menu__media-title {
  width: 100% !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Colour and type are the template's, not this file's. The card title carries
   a level and a colour role, and both reach it at element level, which is more
   specific than anything scoped to this class — so a declaration here could
   only ever have won by being !important, which is exactly what put the five
   titles beyond the reach of the design system. Only the margin stays, and it
   needs no flag: the sole competitor is the user agent's own h3 margin. */
.ath-menu__media-title,
.ath-menu__media-title .elementor-heading-title {
  margin: 0;
}

.ath-menu__media-card.is-preview {
  border-color: var(--ath-on-inverse-accent) !important;
  background: color-mix(in srgb, var(--ath-frost) 7%, transparent) !important;
  transform: translateY(-2px) scale(1.005);
}


/* ---------- Reduced motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ath-menu,
  .ath-menu__nav .elementor-icon-list-item > a,
  .ath-menu__media-card {
    transition-duration: 0.01ms !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .ath-menu__nav .elementor-icon-list-item > a:hover { transform: none; }
  .ath-menu__media-card:hover { transform: none !important; }
}

/* ---------- Tablet: match desktop close + media cards ------ */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Close button: same type size as desktop, no shrink */
  .ath-menu button.ath-menu__close,
  .ath-menu .ath-menu__close {
    font-size: clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem);
  }

  /* Media cards: identical rounded layout to desktop */
  .ath-menu__media-card {
    border-radius: 20px !important;
  }
  .ath-menu__media-image {
    aspect-ratio: 4 / 5 !important;
  }
  .ath-menu__media-title {
    padding: 18px 20px !important;
  }

  /* Add bottom padding to the left panel on tablet too,
     so meta block doesn't hug the bottom edge. */
  .ath-menu__panel--nav {
    padding-bottom: 32px !important;
  }
}

/* ---------- Active nav link -------------------------------- */
/* Applied by JS to the link matching the current page URL. */

.ath-menu__nav .elementor-icon-list-item.ath-menu__nav-item--active > a,
.ath-menu__nav .elementor-icon-list-item.ath-menu__nav-item--active > a .elementor-icon-list-text {
  color: var(--ath-on-inverse-accent) !important;
}

.ath-menu__nav .elementor-icon-list-item.ath-menu__nav-item--active > a::before {
  color: var(--ath-on-inverse) !important;
}

/* ---------- Header bar safety: never wrap on any device ----
   Desktop/Tablet: original 3-column layout from Elementor
   (menu left, brand center, CTA right) — we only enforce no-wrap.
   Mobile: 2 items only (menu left, brand right). CTA is hidden
   by Elementor; brand is pushed right with margin-left:auto. */

.ath-header__bar {
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100%;
}

.ath-header__bar > * {
  min-width: 0 !important;
}

/* Mobile only: enforce menu-left / logo-right layout.
   On Desktop and Tablet, leave Elementor's space-between alone
   so the existing 3-column distribution (menu | brand | CTA)
   keeps working. */
@media (max-width: 767px) {
  .ath-header__bar {
    justify-content: flex-start !important;
  }
  .ath-header__menu-button {
    flex: 0 0 auto !important;
    order: 0 !important;
    margin-right: auto !important;
  }
}

/* Very small phones: hide MENU text, keep only hamburger icon */
@media (max-width: 374px) {
  .ath-header__menu-button {
    padding: var(--ath-menu-toggle-padding, 8px 10px) !important;
  }
  .ath-header__menu-button .ath-header__menu-label {
    display: none;
  }
}

/* The button utility's padding and border sit on the widget's wrapper and would set the bar's height, so the wrapper sheds them above and below the button, and its clip with them. */
.ath-header__bar .ath-header__cta {
  padding-block: 0;
  border-block-width: 0;
  overflow: visible;
}

/* The bar's height comes from these paddings around its tallest item, 80px from 1025px and 64px on phones; they outrank only Elementor's default, so padding set on either container wins. */
@media (min-width: 1025px) {
  .e-con.ath-header {
    --padding-top: 0px;
    --padding-bottom: 0px;
  }

  .e-con.ath-header__bar {
    --padding-top: 17.5px;
    --padding-bottom: 17.5px;
  }

  /* The logo stays centred in the bar whether the booking button shows or not. */
  .ath-header__bar.e-con > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .ath-header__bar.e-con > .e-con-inner > * {
    grid-row: 1;
  }

  .ath-header__bar.e-con > .e-con-inner > .elementor-widget-atheria_menu_toggle {
    grid-column: 1;
    justify-self: start;
  }

  .ath-header__bar.e-con > .e-con-inner > .elementor-widget-atheria_site_logo {
    grid-column: 2;
  }

  .ath-header__bar.e-con > .e-con-inner > .ath-header__cta {
    grid-column: 3;
    justify-self: end;
  }
}

/* The button utility's padding and clip sit on the widget's wrapper, which on a phone would cut the button off and heighten the bar, so the wrapper sheds them and the logo gives way first. */
@media (max-width: 767px) {
  body:has(#atheria-site-header .ath-header__cta:not(.elementor-hidden-mobile)) {
    --ath-header-height: 69px;
  }

  .e-con.ath-header {
    --padding-top: 0px;
    --padding-bottom: 0px;
  }

  .e-con.ath-header__bar {
    --padding-top: 14.5px;
    --padding-bottom: 14.5px;
  }

  .ath-header__bar .ath-header__cta {
    flex-shrink: 0;
    padding: 0;
    overflow: visible;
  }

  /* The logo takes only the space the menu button and the Book button leave, so it never covers them. */
  .ath-header__bar .elementor-widget-atheria_menu_toggle {
    flex-shrink: 0;
  }

  .ath-header__bar .elementor-widget-atheria_site_logo .ath-site-logo__link {
    max-width: 100%;
  }

  .ath-header__bar .elementor-widget-atheria_site_logo .ath-site-logo__link img {
    max-width: 100% !important;
    object-fit: contain;
  }

  .ath-header__bar .ath-header__cta .elementor-button {
    padding: 10px 16px;
  }
}


/* ---------- Nav list (widget-rendered) --------------------- */
/* Header 01's navigation is rendered by atheria_fullscreen_navigation
   from a WordPress menu. The widget keeps emitting Elementor's
   .elementor-icon-list-* class names, so every rule above still
   matches and nothing about the top level moves.

   What those rules never carried is the list reset and the row
   spacing: both came from Elementor, the reset from
   widget-icon-list.min.css and the 4px from the Icon List's own
   space_between control. That stylesheet is only enqueued when an
   Icon List is on the page, and the generated spacing was keyed to
   that widget's element id, so both leave with the widget. They are
   re-declared here.

   Appended at the end of the file on purpose. The rules above are
   order-sensitive and are left exactly as they are. */

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

/* The row stacks its label and its sub-list, so it stays a flex column: block
   layout would put the inline-flex anchor in a line box and add its leading
   back, which measures 1.64px a row against what the Icon List rendered.
   What does not belong on the row is the alignment. It exists so the anchor
   keeps its content width and the counter sits where it always did, and as
   align-items it reached every flex child to do it. Asked of the anchor
   instead, the sub-list is left to stretch as it would in normal flow. */
.ath-menu__nav .ath-menu__nav-item {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  padding: 0;
}

.ath-menu__nav .ath-menu__nav-item > .ath-menu__nav-link {
  align-self: flex-start;
}

/* Elementor split space_between into two halves, one either side of
   the gap. Same split, same 4px, so the rhythm is unchanged. */
.ath-menu__nav .ath-menu__nav-item:not(:last-child) {
  padding-bottom: calc(var(--ath-nav-row-gap, 4px) / 2);
}

.ath-menu__nav .ath-menu__nav-item:not(:first-child) {
  margin-top: calc(var(--ath-nav-row-gap, 4px) / 2);
}


/* ---------- Sub-menu --------------------------------------- */
/* Children are always visible under their parent. They are not
   numbered: the counter increments on .elementor-icon-list-item,
   which only top-level rows carry, so a child neither advances the
   count nor draws a number.

   The indent tracks the number gutter — 2.25em of the counter's own
   clamp, plus the 16px row gap — so children align under the parent
   label at every width without a second breakpoint. */

.ath-menu__nav .ath-menu__subnav {
  list-style: none;
  margin: 0 0 0 var(--ath-nav-subnav-indent, calc((2.25 * clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem)) + 16px));
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ath-menu__nav .ath-menu__subnav-item {
  margin: 0;
  padding: 0;
}

.ath-menu__nav .ath-menu__subnav-link {
  display: inline-block;
  color: var(--ath-nav-subnav-link, var(--ath-on-inverse));
  text-decoration: none;
  font-family: var(--ath-font-heading);
  font-weight: 400;
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition:
    color 0.3s var(--ath-ease-out),
    transform 0.3s var(--ath-ease-out);
}

.ath-menu__nav .ath-menu__subnav-link:hover,
.ath-menu__nav .ath-menu__subnav-link:focus-visible {
  color: var(--ath-nav-subnav-link-hover, var(--ath-on-inverse-accent));
  transform: translateX(4px);
}

.ath-menu__nav .ath-menu__subnav-item--active > .ath-menu__subnav-link {
  color: var(--ath-on-inverse-accent);
}

@media (prefers-reduced-motion: reduce) {
  .ath-menu__nav .ath-menu__subnav-link {
    transition-duration: 0.01ms !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .ath-menu__nav .ath-menu__subnav-link:hover {
    transform: none;
  }
}


/* ---------- Editor notice ---------------------------------- */
/* Elementor edit mode only. The front end renders nothing when no
   menu is bound, so there is never an empty list to style. */

.ath-menu__nav-notice {
  color: var(--ath-on-inverse);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-left: 3px solid var(--ath-on-inverse-accent);
  background: color-mix(in srgb, var(--ath-frost) 8%, transparent);
  border-radius: 0 4px 4px 0;
}


/* ---------- Overlay shell must not wrap -------------------- */
/* Elementor makes every flex container wrap below 768px:
     @media (max-width: 767px) { .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) } }
     .e-con.e-flex > .e-con-inner { flex-wrap: var(--flex-wrap) }
   with --flex-wrap-mobile defaulting to wrap. Above 768px the
   variable is empty and the inner computes nowrap, which is why no
   viewport height breaks a desktop width.

   The shell is a column holding the top bar and the body. Wrapping a
   column means a second column beside the first, so as soon as the
   content is taller than the viewport the body leaves the box — at
   475x568 it sits at x=444 in a container 428 wide — and the overlay,
   which clips, opens on the top bar alone. The navigation is rendered
   the whole time and simply outside the frame.

   Every container down the overlay's layout chain is named, not just
   the shell: the overlay, the shell and its inner, the body and the
   two panels all stack their children, and any one of them wrapping
   puts content in a column outside the frame. Measured with the menu
   the importer ships, the nav panel wraps at 475x568 as readily as the
   shell does — 681px of content in a 418px box — so fixing the shell
   alone moves the failure rather than ending it.

   The top bar is left out. It is a row of three, wrapping is the right
   answer if it ever runs out of width, and nothing about it stacks.

   The template says these are columns; this says they are one column
   each. !important because Elementor's selector carries three classes
   and the sheets' relative order is not ours to fix. */

.ath-menu,
.ath-menu__shell,
.ath-menu__shell > .e-con-inner,
.ath-menu__body,
.ath-menu__panel,
.ath-menu__panel > .e-con-inner,
.ath-menu__media-scroll {
  flex-wrap: nowrap !important;
}