/*
 * 50-responsive.css — ElNidoGuide-Migration.md §9.
 *
 * GB breakpoints: tablet 1024, mobile 767. The prototype's mobile frame is 430px,
 * which is the width the QA gate screenshots at.
 *
 * Most sections need nothing here: they are auto-fit minmax grids (20-layout.css)
 * and collapse on their own, and headings use the clamp() scale from 00-tokens.css
 * so they need no per-breakpoint overrides. What remains are the cases where the
 * DOM order or position has to change.
 */

@media (max-width:1024px){
  /* §9 — sticky asides become static and full-width. `order` moves them BELOW the
     main column regardless of source order. Booking cards are the exception and
     are handled separately below. */
  .eng-split{ grid-template-columns:1fr; }
  .eng-rail{ position:static; top:auto; }
  .eng-split > .eng-rail{ order:2; }
  .eng-split > .eng-main{ order:1; }

  /* The plan page's rail holds the questions; on one column they belong ABOVE the
     itinerary they produce, not below it. The body class is put there by PHP, which
     already knows the page carries the card (eng_planner_card_body_class(),
     inc/planner-card.php) — a plain class rather than `:has()`, so the phone reading
     order does not depend on selector support. */
  body.eng-has-planner-card .eng-split > .eng-rail{ order:0; }
}

@media (max-width:767px){
  .eng-section{ padding-bottom:var(--space-6); }
  .eng-grid{ gap:var(--space-6); }

  /* §9 — booking cards (tour, stay) are the exception to the aside rule: they
     stay ABOVE the fold order rather than dropping below the content, because
     they are the reason the page exists. */
  .eng-split > .eng-rail.eng-rail--booking{ order:0; }

  /* §9 — hit targets ≥44px on mobile. The tab bar is 48px (see below). */
  .eng-btn,
  .eng-seg__opt,
  .eng-faq > summary{ min-height:44px; }

  /* §9 — tables scroll rather than squash. Applied to Woo's own tables too, which
     is why the selector list is broader than .eng-table. */
  .eng-table,
  .woocommerce table.shop_table{ display:block; overflow-x:auto; white-space:nowrap; }

  /* §4.3 / §9 — the mobile bottom tab bar is fixed, so body needs padding or the
     last section sits underneath it permanently. 48px bar + safe-area inset. */
  body.eng-has-tabbar{
    padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));
  }
}

/* §4.3 — the mobile bar is mobile-only, by CSS rather than a GP display rule, so
   it is never emitted-then-hidden at desktop widths. */
@media (min-width:768px){
  .eng-tabbar,
  .eng-bookingstrip{ display:none !important; }
}

/* §9 — below 480 the utility strip's sea-status item is dropped rather than
   allowed to wrap to a third line. */
@media (max-width:479px){
  .eng-utility__sea{ display:none; }
}

/* The prototype guards its own animations this way (its line 82); carried over so
   the behaviour survives into the theme. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   §4.1 Masthead — mobile treatment.

   The prototype's mobile header is: brand + "My trip" chip + a Menu button.
   The full link row and the secondary actions collapse behind that button.

   Done with a checkbox and :has() rather than JavaScript — the toggle then works
   before any script loads, survives a JS error, and keeps keyboard and
   screen-reader behaviour native. The checkbox is visually hidden but focusable,
   and the <label> carries the visible affordance.
   ========================================================================== */

.eng-nav__cb{ position:absolute; opacity:0; width:1px; height:1px; }

@media (min-width:768px){
  /* Desktop: no toggle, links always visible. */
  .eng-nav__toggle{ display:none; }
}

@media (max-width:767px){
  .eng-nav{ gap:var(--space-2) var(--space-3); }

  /* Hamburger: a square icon button, no radius, 44px hit target (§9). The icon
     is Lucide "menu", stroke 1.5 (§12 permits no other icon set or weight). */
  .eng-nav__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    order:3;
    margin-left:auto;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--color-divider);
    background:transparent;
    color:var(--color-accent-800);
    cursor:pointer;
  }
  .eng-nav__toggle:hover{ background:var(--color-accent-100); color:var(--color-accent-900); }
  .eng-nav__toggle svg{ width:22px; height:22px; display:block; }

  /* Swap the glyph on open: menu out, close in. */
  .eng-nav__toggle .eng-icon-close{ display:none; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__toggle .eng-icon-menu{ display:none; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__toggle .eng-icon-close{ display:block; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__toggle{
    background:var(--color-accent-100);
    border-color:var(--color-accent-600);
  }
  .eng-nav__actions{ order:2; margin-left:auto; gap:var(--space-3); }

  /* Closed: the link row lives behind the toggle. */
  .eng-nav__links{ display:none; order:4; width:100%; flex-direction:column; gap:0; }

  /* "My plan" and the Book-a-tour button are hidden in the BAR; the open
     overlay below brings them back as its bottom action dock. */
  .eng-nav__actions .eng-nav__plan,
  .eng-nav__actions .eng-btn--primary{ display:none; }

  /* ---- Chrome revamp (2026-09-01): open = a full-screen menu layer. ----
     The whole .eng-nav becomes the layer (no extra markup in the GP Element):
     brand stays as the header row with the close toggle pinned top-right,
     links become a large-type column, and the actions dock to the bottom.
     inc/chrome.php's script locks body scroll (html.eng-menu-open) and closes
     on Escape; the checkbox still works with JS disabled — the layer simply
     scrolls in place. */
  .eng-nav:has(.eng-nav__cb:checked){
    position:fixed;
    inset:0;
    z-index:1200;
    background:var(--color-bg);
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    overflow:auto;
    padding:var(--space-3) var(--space-4) var(--space-4);
    gap:0;
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__toggle{
    position:absolute;
    top:var(--space-3);
    right:var(--space-4);
    background:var(--color-accent-100);
    border-color:var(--color-accent-600);
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links{
    display:flex;
    order:1;
    margin-top:var(--space-6);
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a{
    font-family:var(--font-heading);
    font-size:28px;
    font-weight:600;
    color:var(--color-text);
    padding:var(--space-3) 0;
    border-top:1px solid var(--color-divider);
    min-height:44px;
    display:flex;
    align-items:center;
    animation:eng-menu-rise .28s ease both;
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a::after{ content:none; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a[aria-current="page"]{
    color:var(--color-accent-800);
    text-decoration:underline;
    text-decoration-color:var(--color-accent-700);
    text-decoration-thickness:2px;
    text-underline-offset:6px;
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(1){ animation-delay:.02s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(2){ animation-delay:.04s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(3){ animation-delay:.06s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(4){ animation-delay:.08s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(5){ animation-delay:.1s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(6){ animation-delay:.12s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(7){ animation-delay:.14s; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a:nth-child(8){ animation-delay:.16s; }

  /* The action dock: everything the bar hides comes back, full-width, with
     Book a tour as the one filled button. */
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__actions{
    order:2;
    margin:auto 0 0;
    padding-top:var(--space-4);
    border-top:1px solid var(--color-divider);
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:var(--space-3);
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__actions a{
    font-size:16px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__actions .eng-nav__plan{ display:inline-flex; }
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__actions .eng-btn--primary{
    display:inline-flex;
    justify-content:center;
  }

  /* Brand shrinks so brand + chip + Menu fit one row at 430px. */
  .eng-brand__name{ font-size:18px; }
  .eng-brand__sub{ font-size:9px; letter-spacing:.3em; }
  .eng-pin,
  .eng-brand img{ height:30px !important; }
}

/* §9 — the utility strip wraps to two lines on mobile; below 480 the sea-status
   item is dropped rather than allowed to take a third. (The 480 rule lives above.) */
@media (max-width:767px){
  .eng-utility{ gap:2px 14px; font-size:10px; }
}

/* Chrome revamp (2026-09-01): the open menu's staggered link reveal, and the
   scroll lock inc/chrome.php toggles while it is open. */
@keyframes eng-menu-rise{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
html.eng-menu-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .eng-nav:has(.eng-nav__cb:checked) .eng-nav__links > a{ animation:none; }
}