/* ============================================================
   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 -------------------------- */


.ath-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ath-frost);
  border-bottom: 1px solid var(--ath-border-light);
}


/* ---------- Menu button (left of header) ------------------- */

.ath-header__menu-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0;
  background: transparent;
  color: var(--ath-arctic-navy);
  border: 0;
  border-radius: 8px;
  outline: 0;
  box-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;
  line-height: 1;
  transition:
    color 0.25s var(--ath-ease-out),
    background-color 0.25s var(--ath-ease-out);
}

.ath-header__menu-button:hover,
.ath-header__menu-button:focus,
.ath-header__menu-button:focus-visible {
  background: color-mix(in srgb, var(--ath-arctic-mist) 40%, transparent);
  outline: 0;
  box-shadow: none;
}

.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) ---------- */

button.ath-menu__close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 20px 48px;
  background: transparent;
  color: var(--ath-frost) !important;
  border: 1px solid color-mix(in srgb, var(--ath-frost) 45%, transparent);
  border-radius: 999px;
  outline: 0;
  box-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;
  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);
}

button.ath-menu__close:hover,
button.ath-menu__close:focus,
button.ath-menu__close:focus-visible {
  background: color-mix(in srgb, var(--ath-frost) 8%, transparent);
  border-color: var(--ath-frost);
  outline: 0;
  box-shadow: none;
}

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

/* ---------- Elementor editor safety -------------------------
   Hide the fullscreen menu by default inside Elementor editor.
   This prevents the header overlay from covering Footer/Page editing.
   To visually edit the overlay itself, temporarily add:
   ath-menu--editor-preview
   to the Fullscreen Menu Overlay container.
------------------------------------------------------------- */

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

body.elementor-editor-active .ath-menu.ath-menu--editor-preview,
body.elementor-editor-preview .ath-menu.ath-menu--editor-preview {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  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) !important;
    line-height: 1.05 !important;
  }
  .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 !important;
  }
}


/* ---------- 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-frost) !important;
  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-arctic-blue);
  font-family: Manrope, system-ui, sans-serif;
  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-frost) !important;
  font-family: "Noto Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 4.5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.018em !important;
}

.ath-menu__nav .elementor-icon-list-item > a:hover,
.ath-menu__nav .elementor-icon-list-item > a:focus-visible {
  color: var(--ath-arctic-blue) !important;
  transform: translateX(4px);
  outline: 0;
}

.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-arctic-blue) !important;
}


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

.ath-menu__meta-label,
.ath-menu__meta .elementor-heading-title {
  margin: 0;
  color: var(--ath-arctic-blue) !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-size: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.ath-menu__meta-contact,
.ath-menu__meta-contact p {
  margin: 0;
  color: var(--ath-frost) !important;
}

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


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

.ath-menu__media-title,
.ath-menu__media-title .elementor-heading-title {
  margin: 0 !important;
  color: var(--ath-frost) !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
}

.ath-menu__media-card.is-preview {
  border-color: var(--ath-arctic-blue) !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 padding and shape as desktop, no shrink */
  button.ath-menu__close,
  .ath-menu__close {
    padding: 20px 48px !important;
    font-size: clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem) !important;
  }

  /* 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;
  }
  .ath-menu__media-title,
  .ath-menu__media-title .elementor-heading-title {
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem) !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-arctic-blue) !important;
}

.ath-menu__nav .elementor-icon-list-item.ath-menu__nav-item--active > a::before {
  color: var(--ath-frost) !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;
}

.ath-header__brand img {
  max-width: 100% !important;
  height: auto !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;
  }
  .ath-header__brand {
    flex: 0 0 auto !important;
    order: 1 !important;
    align-self: center !important;
  }
  /* Make sure the CTA, if not hidden through Elementor, stays out */
  .ath-header__cta {
    display: none !important;
  }
}

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