/* ==========================================================================
   RPESH 2026 — Responsive rules
   Breakpoints: 1460px (compact navigation) · 1340px (mobile menu)
                1180px (small desktop) · 980px (tablet) · 760px (large phone)
                520px (phone)
   ========================================================================== */

/* ---------- Compact navigation (11 menu items) ---------------------------- */
@media (max-width: 1780px) {
  .nav__link { font-size: .95rem; padding: .55rem .6rem; }
  .brand__sub { display: none; }
}

@media (max-width: 1440px) {
  .nav__link { font-size: .9rem; padding: .5rem .45rem; }
  .site-nav { gap: .6rem; }
}

/* ---------- Small desktop / large tablet ---------------------------------- */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 2rem; }
}

/* ---------- Two-row header (laptops and tablets) --------------------------
   Instead of hiding the menu behind a hamburger as soon as it no longer fits
   next to the logos, the menu moves to its own centred row underneath them.
   All eleven items stay visible. */
@media (max-width: 1340px) and (min-width: 821px) {
  .header__inner { flex-wrap: wrap; align-items: center; padding-bottom: .35rem; }
  .brand { flex: 1 1 auto; }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: .75rem;
    border-top: 1px solid var(--line);
    margin-top: .2rem;
    padding-top: .35rem;
  }
  .nav__list { flex-wrap: wrap; justify-content: center; }
  .nav__link { font-size: .95rem; padding: .5rem .6rem; }
  .brand__sub { display: block; }
}

/* Below ~1150px the header call to action is dropped so the menu keeps one row.
   The same action stays available in the hero and at the end of every page. */
@media (max-width: 1150px) and (min-width: 821px) {
  .nav__cta { display: none; }
  .nav__link { font-size: .92rem; padding: .5rem .5rem; }
}

/* ---------- Mobile navigation --------------------------------------------- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .site-nav { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* the grouped menu is shown fully expanded on small screens */
  .nav__more, .nav__more-item { position: static; }
  .nav__more-summary { display: none; }
  .nav__submenu {
    position: static; min-width: 0; padding: 0; margin: 0;
    border: 0; box-shadow: none; background: transparent;
  }
  .nav__submenu::before { display: none; }
  .nav__link--sub { text-transform: uppercase; letter-spacing: .04em; padding: .95rem .5rem; }
  .nav__cta { align-self: flex-start; }
  .nav__link {
    padding: .95rem .5rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.15rem;
  }
  .nav__link[aria-current="page"] { background: var(--tint); border-left: 3px solid var(--cyan-400); padding-left: 1rem; border-radius: 0; }

  body.nav-open { overflow: hidden; }
}

/* ---------- Tablet -------------------------------------------------------- */
@media (max-width: 980px) {
  .wrap, .wrap-narrow { width: min(100% - 2.5rem, var(--wrap)); }
  .section { padding: 4rem 0; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split__media { order: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__grid > :first-child { grid-column: 1 / -1; }

  .hero { padding: 4rem 0 7rem; }
  .countdown { padding: 1.5rem; }
  .countdown__label { max-width: none; flex: 1 1 100%; }
}

/* ---------- Large phone --------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 16px; }

  .topbar__inner { justify-content: center; text-align: center; gap: .35rem; }
  .topbar__inner > p { display: none; }
  .topbar__meta { gap: .9rem; justify-content: center; }

  .brand__logos img { height: 38px; }
  .brand__title { font-size: 1.15rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .hero { padding: 3rem 0 6rem; }
  .hero__meta { gap: .9rem; flex-direction: column; }
  .btn-row .btn { width: 100%; }

  .countdown-wrap { margin-top: -4rem; }
  .countdown__units { gap: .6rem; width: 100%; }
  .cd-unit { flex: 1 1 calc(50% - .3rem); min-width: 0; }

  .section { padding: 3.25rem 0; }
  .section-head { margin-bottom: 2rem; }

  .timeline__item { padding-left: 3.25rem; }
  .timeline::before { left: 17px; }
  .timeline__dot { left: 4px; width: 26px; height: 26px; }

  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }

  .map-frame { height: 320px; }
  .schedule th:nth-child(3), .schedule td:nth-child(3) { display: none; }
}

/* ---------- Small phone --------------------------------------------------- */
@media (max-width: 520px) {
  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
  .card { padding: 1.25rem; }
  .day-tab { flex: 1 1 100%; }
  .soon-block { padding: 2.5rem 1rem; }
  .logo-tile { min-height: 160px; }
}

/* ---------- Print --------------------------------------------------------- */
@media print {
  .site-header, .topbar, .nav-toggle, .cta-banner, .site-footer, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .hero, .page-hero { background: none !important; color: #000; padding: 1rem 0; }
  .hero__media, .hero::after, .page-hero::before { display: none; }
  .hero h1, .page-hero h1, .hero__subtitle { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}