/* ============================================================
   responsive.css
   All @media queries. Mobile-first: the three-panel grid
   collapses to a vertical stack on small screens, and the
   overlay card / nav scale gracefully.
   ============================================================ */

/* ---- Tablet and below ---- */
@media (max-width: 900px) {
  /*
    The mockup-bg panels remain position: fixed — they stay as purely
    decorative background on mobile, never entering the document flow.
    Only the site-wrapper (nav + hero) is visible as scrollable content.
  */
  html,
  body {
    overflow: auto;
  }

  /* ── Performance: remove heavy backdrop-filter on mobile ──
     backdrop-filter forces GPU compositing on every frame and causes
     janky scrolling on low-end devices. Replaced with higher-opacity
     backgrounds that are mostly opaque but still hint at translucency. */
  .site-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.88);
  }

  .hero__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.92);
  }

  .about-hero__card,
  .about-section__card,
  .about-cta__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.92);
  }

  .services-hero__card,
  .services-offerings__card,
  .services-section__card,
  .services-cta__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.92);
  }

  .contact-hero__card,
  .contact-form__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.92);
  }

  .terms-hero__card,
  .terms-content__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 4, 22, 0.92);
  }

  .lang-switcher__menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ── Panel bounds ── */

  /*
    Beauty panel: clip overflow (arch buttons no longer bleed on mobile
    since the arch nav is converted to a flex row below) and push content
    to the top so the hero card doesn't cover the title.
  */
  .panel--beauty {
    overflow: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    /* Extra top padding to clear the site nav bar (~56px) */
    padding-top: 4rem;
  }

  /*
    Nudge arcade title for the narrower portrait column.
  */
  .arcade__title {
    font-size: 2.2rem;
  }

  .beauty__content {
    width: 100%;
    margin-top: 0;
  }

  /*
    Arch nav fallback on mobile: switch from absolute trigonometric
    positioning (which needs a tall container and can bleed outside)
    to a compact horizontal flex row of circle buttons.
  */
  .beauty__arch-nav {
    height: auto;
    padding: 0.5rem 0 0.25rem;
    margin-bottom: 0;
  }

  .beauty__arch-nav ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    height: auto;
    width: 100%;
  }

  .beauty__arch-nav li {
    position: static;
    left: auto;
    top: auto;
    --btn-size: 52px;
    width: var(--btn-size);
    height: var(--btn-size);
  }

  /* ── HVACR panel: centralize text, push content lower, nav at bottom ──
     Reverse the flex order so the nav bar pins to the bottom of the
     panel. The hero content sits above it with text centred and pushed
     toward the nav (justify-content: flex-end).
  */
  .hvacr__nav {
    order: 2;       /* bottom */
    flex-shrink: 0;
  }

  .hvacr__hero {
    order: 1;       /* top — fills remaining space */
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* push text down toward the nav */
    padding: 0.5rem 1rem 0.75rem;
    gap: 0.5rem;
    text-align: center;
  }

  .hvacr__hero-text {
    align-items: center;
  }

  .hvacr__cta-group {
    justify-content: center;
  }

  .hero__card {
    padding: 2rem 1.5rem;
    max-width: 100%;
  }

  /* ── Mobile navigation ── */

  /* Show the hamburger button; hide the desktop inline link list */
  .site-nav__hamburger {
    display: flex;
  }

  .site-nav__links {
    /* Take the links out of the flex row and turn them into a dropdown */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--overlay-mobile-nav-bg);
    /* backdrop-filter removed on mobile for performance — see top of this file */
    border-top: 1px solid var(--overlay-card-border);
    padding: 0.25rem 0 0.5rem;
    z-index: 50;
    gap: 0;

    /* Slide-down entrance animation via max-height */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }

  /* Revealed state — toggled by adding .site-nav--open in mobile-nav.js */
  .site-nav--open .site-nav__links {
    max-height: 30rem;
    opacity: 1;
    pointer-events: auto;
  }

  /* Each link item full-width with generous tap target */
  .site-nav__links > li {
    width: 100%;
    border-bottom: 1px solid var(--overlay-divider-faint);
  }

  .site-nav__links > li:last-child {
    border-bottom: none;
  }

  .site-nav__links a {
    display: block;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Lang switcher: expand inline rather than as a floating popup.
     The parent .site-nav__links has overflow:hidden for the slide animation,
     so absolutely-positioned children are clipped. Making the menu static
     lets it flow in-place without being cut off. */
  .lang-switcher {
    margin-left: 0;
    padding: 0.6rem 1.5rem 0;
  }

  .lang-switcher__btn {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0 0.6rem;
    border: none;
    font-size: 0.9rem;
  }

  /* Override the floating dropdown to a static inline expansion */
  .lang-switcher__menu {
    position: static;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.5rem;
    min-width: unset;
    width: 100%;
    /* Show/hide is still handled by .lang-switcher--open toggling display:block */
  }

  .lang-switcher__menu [role="option"] {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--overlay-divider-faint);
  }

  .lang-switcher__menu [role="option"]:last-child {
    border-bottom: none;
  }

  .site-nav {
    padding: 0.75rem 1.25rem;
  }
}

/* ---- Small mobile ---- */
@media (max-width: 480px) {
  .hero__heading {
    font-size: 1.6rem;
  }

  .hvacr__nav {
    padding: 0 1rem;
  }

  .hvacr__nav-links {
    gap: 0.75rem;
  }

  .beauty__arch-nav li {
    --btn-size: 50px;
  }
}

/* ---- Accessibility: honour reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__cta {
    transition: none;
  }
}