/* site.css: what Azuca's legacy pages need on top of style.css (kept byte-identical to the
   old site's) now that lite.js replaces jQuery, slick and script.min.js. Loaded after
   style.css on every legacy page and on /menus/. Plain CSS: no nesting (see CLAUDE.md). */

/* ---------- Intro slider ----------
   style.css shows slides only inside .slick-initialized, so until lite.js (deferred) runs the
   slider is 0px tall and the page below jumps up into it. Show the first slide at its final
   height meanwhile. */
.js-page-intro-slider:not(.slick-initialized) > .page-intro-slide:first-child {
  display: block;
  min-height: 100vh;
}
.js-page-intro-slider:not(.slick-initialized) > .page-intro-slide + .page-intro-slide {
  display: none;
}

/* ---------- Header bar and phone menu ----------
   The menu button is a real <button> now. style.css styled the old link (`display: table`
   with a table-cell span); a button keeps the same look laid out with flex. Below 1150px only:
   past it style.css hides the button and shows the list inline. */
@media screen and (max-width: 1149.98px) {
  .auto-hide-header .nav-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    margin: 0;
    background: none;
    border: 0;
    border-left: 1px solid #f2f2f2;
    border-radius: 0;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .auto-hide-header .nav-trigger span {
    display: block;
  }
  .auto-hide-header .nav-trigger:focus { outline: none; }
  .auto-hide-header .nav-trigger:focus-visible {
    outline: 2px solid #ff1111;
    outline-offset: -4px;
  }

  /* The bars and "Menu" in a brighter red: style.css's #9c0000 was hard to see on black. */
  .auto-hide-header .nav-trigger {
    color: #ff2b2b;
    border-left-color: rgba(255, 255, 255, 0.3);
  }
  .auto-hide-header .nav-trigger em,
  .auto-hide-header .nav-trigger em::before,
  .auto-hide-header .nav-trigger em::after {
    background-color: #ff2b2b;
  }

  /* The panel docks under the bar at its real height (60px, 70px from 992px) and scrolls on
     its own when the list is taller than a landscape phone. Its links and buttons share one
     centred column, 360px at most, so a tablet doesn't stretch them edge to edge. */
  .secondary-nav > ul {
    top: 100%;
    max-height: calc(100vh - var(--header-height, 60px));
    max-height: calc(100dvh - var(--header-height, 60px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 8px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
  }
  .secondary-nav > ul.is-open {
    animation: page-nav-in 0.2s ease-out;
  }
  .secondary-nav > ul > li {
    max-width: 360px;
    margin: 0 auto;
  }
  .secondary-nav > ul > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .secondary-nav > ul > li > a:not(.button) {
    height: 52px;
    line-height: 52px;
    padding: 0;
    font-size: 17px;
    letter-spacing: 0.02em;
  }
  /* The two red buttons: a block of their own under the links, 12px apart (style.css gave each
     a 30px top margin, which left a 47px gap between them). */
  .secondary-nav > ul > li:has(> a.button) {
    border-top: 0;
    padding-top: 12px;
  }
  .secondary-nav > ul > li:not(:has(> a.button)) + li:has(> a.button) {
    padding-top: 24px;
  }
  .secondary-nav > ul a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .secondary-nav > ul a:focus-visible {
    outline: 2px solid #ff2b2b;
    outline-offset: -2px;
  }
}

/* The 258x70 logo overhung the 60px phone bar by 5px at each edge (clipped at the top, and
   over the menu frame on /menus/). Below 992px, where the bar is 60px, it draws at 50px. */
@media screen and (max-width: 991.98px) {
  .auto-hide-header .logo img {
    width: auto;
    max-height: 50px;
  }
}

/* The page the visitor is on. */
.secondary-nav > ul a[aria-current="page"]:not(.button) {
  color: #ff1111;
}

/* Dim the page behind the open menu (under the bar, which is z-index 200) and stop it
   scrolling. The 88 order bar sits at z-index 99999 and would cover the panel's foot, so it
   steps aside while the menu is open. */
.page-nav-backdrop {
  position: fixed;
  top: var(--header-height, 60px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
html.page-nav-open .page-nav-backdrop {
  opacity: 1;
  visibility: visible;
}
html.page-nav-open {
  overflow: hidden;
}
html.page-nav-open [data-88-footer] {
  display: none;
}
@media screen and (min-width: 1150px) {
  .page-nav-backdrop { display: none; }
}

@keyframes page-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .secondary-nav > ul.is-open { animation: none; }
  .page-nav-backdrop { transition: none; }
}

/* ---------- Contact form ----------
   88.js gives a form its card inset only when the form's ground differs from the colour
   behind it, and it reads background-color alone: the section's gradient (style.css) is a
   background-image, so the form saw the white page and drew edge to edge. A solid colour
   under the gradient (its middle stop) gives it the right ground. */
#contact {
  background-color: rgb(33, 0, 0);
}
/* The form is the last thing in its column, so its card sat flush on the map below. */
#contact [data-88-form] {
  margin-bottom: 48px;
}

/* The map row under it: style.css has no .container-fluid rule, so the row's -15px margins
   pushed the map and the red address bar 15px past the right edge and the whole page scrolled
   sideways. Clipping keeps both edge to edge; the bar's centred address stays centred. */
#contact > .container-fluid {
  overflow: hidden;
}

/* ---------- Page headings ----------
   Each page's one h1 is the heading that was its first h2 (the homepage's first slide, the
   parties card). style.css sizes h1 at 4rem from 768px, h2 at 3rem; these keep the h2 size,
   so the page looks as it did. Below 768px style.css draws both at 2.25rem. */
@media screen and (min-width: 768px) {
  h1.page-intro__title3,
  h1.section__title2 {
    font-size: 48px;
    font-size: 3rem;
  }
}