/* ===========================
   RESPONSIVE — Premium Taxi v20
   v20: nav#main-nav mobile reset: max-width:100% (desktop collision guard override).
=========================== */

/* ≥ 1200px */
@media (min-width: 1200px) {
  nav a { padding: .36rem .75rem; font-size: .72rem; }
}

/* ≤ 1060px */
@media (max-width: 1060px) {
  nav a { font-size: .64rem; padding: .30rem .44rem; letter-spacing: .06em; }
  .header-actions .btn-gold { padding: .44rem .8rem; font-size: .68rem; }
}

/* ≤ 900px — tablet: hide 2 nav items to reduce overflow risk */
@media (max-width: 900px) {
  nav a[data-page="gdpr"]    { display: none; }
  nav a[data-page="special"] { display: none; }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .footer-brand  { grid-column: 1 / -1; }
  .footer-brand p { max-width: 100%; }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .contact-left,
  .contact-right { max-width: 640px; margin-left: auto; margin-right: auto; }
  .tariff-cards   { grid-template-columns: 1fr 1fr; }
  .slider-result  { grid-template-columns: 1fr 1fr; }
}

/* ≤ 820px — hamburger menu */
@media (max-width: 820px) {
  .header-inner { grid-template-columns: 1fr auto; }

  /* ── MOBILE NAV DRAWER ──
     Slides down from header edge using max-height animation.
     No display:none toggling = butter-smooth CSS transitions.
     Safe on iOS Safari: no position:fixed full-screen overlay.
  */
  nav#main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    /* Attached directly below header */
    position: fixed;
    top: var(--h-h);
    left: 0;
    right: 0;
    /* Reset desktop centering + collision guard */
    transform: none;
    height: auto;
    max-width: 100%;
    z-index: 1100; /* well above everything — no stacking context parent now */

    /* Slide animation */
    max-height: 0;
    overflow: hidden;
    visibility: hidden;

    background: var(--bg);
    border-bottom: 2px solid var(--border);
    box-shadow: none;

    transition:
      max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.36s,
      box-shadow 0.36s;

    gap: 0;
    padding: 0;
  }

  nav#main-nav.open {
    max-height: 480px;
    visibility: visible;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    transition:
      max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s,
      box-shadow 0.36s;
  }

  nav#main-nav a {
    font-size: .95rem;
    padding: .92rem 1.5rem;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--border);
    text-align: left;
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--text2);
    position: relative;

    /* Stagger-in */
    opacity: 0;
    transform: translateX(-8px);
    transition: color .2s, background .18s, opacity .28s, transform .28s;
  }

  nav#main-nav.open a {
    opacity: 1;
    transform: translateX(0);
  }

  nav#main-nav a:nth-child(1) { transition-delay: 0.05s; }
  nav#main-nav a:nth-child(2) { transition-delay: 0.10s; }
  nav#main-nav a:nth-child(3) { transition-delay: 0.15s; }
  nav#main-nav a:nth-child(4) { transition-delay: 0.20s; }
  nav#main-nav a:nth-child(5) { transition-delay: 0.24s; }
  nav#main-nav a:nth-child(6) { transition-delay: 0.28s; }

  nav#main-nav a[data-page="gdpr"]    { display: flex; }
  nav#main-nav a[data-page="special"] { display: flex; }

  nav#main-nav a.active {
    color: var(--gold);
    background: var(--gold-alpha2);
  }

  nav#main-nav a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 55%;
    background: var(--gold);
    border-radius: 0 3px 3px 0;
  }

  nav#main-nav a:hover {
    color: var(--gold);
    background: var(--gold-alpha2);
  }

  nav#main-nav a:last-child { border-bottom: none; }

  /* Backdrop scrim — sits between header and content */
  body.nav-open::after {
    content: '';
    position: fixed;
    top: var(--h-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.42);
    z-index: 930;
    animation: scrimIn .28s ease both;
    pointer-events: auto;
  }

  @keyframes scrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* hamburger visibility controlled by JS .hamburger--visible class */
  .header-reserve { display: none !important; }
  .fab-reserve    { display: none !important; }
  .fab-call       { display: none !important; }

  /* Bottom action bar */
  .bottom-bar { display: flex; }

  /* Push page content above bottom bar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ≤ 768px — same overlay, just adjust header height + other layout */
@media (max-width: 768px) {
  :root { --h-h: 58px; }

  .hero-content { padding: 2.25rem var(--px); }
  .hero h1 { font-size: clamp(2.2rem,9.5vw,3.4rem); }
  .hero p  { font-size: .98rem; max-width: 32rem; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 300px; margin: 0 auto; }
  .hero-actions .btn { width: 100%; }

  .section        { padding: 3.25rem var(--px); }
  .section-title  { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .section-sub    { font-size: .92rem; margin-bottom: 2.1rem; }
  .tariff-cards   { grid-template-columns: 1fr; padding: 2rem var(--px); }
  .slider-section { padding: 2rem var(--px) 2.5rem; }
  .slider-result  { grid-template-columns: 1fr; }
  .km-table { font-size: .78rem; }
  .km-table th, .km-table td { padding: .38rem .55rem; }
  .calc-controls { grid-template-columns: 1fr; }
  .calc-btn-row  { flex-direction: column; }
  .calc-btn-row .btn { width: 100%; }
  #route-map { height: 240px; }
  .route-info { gap: .65rem; font-size: .81rem; }
  .price-result { padding: 1.1rem .95rem; }
  .pr-row   { flex-wrap: wrap; }
  .pr-value { text-align: left; }
  .features-grid { grid-template-columns: 1fr; gap: .9rem; }
  .special-grid  { grid-template-columns: 1fr; }
  .contact-layout { padding: 2rem var(--px) 3.5rem; }
  .contact-left,
  .contact-right,
  .calc-header,
  .slider-header { text-align: center; margin-left: auto; margin-right: auto; }
  .calc-header .ornament,
  .slider-header .ornament { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
  .contact-form { padding: 1.6rem 1.1rem; }
  .form-row-2   { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .footer-inner  { grid-template-columns: 1fr; gap: 1.6rem; }
  footer         { padding: 3rem var(--px) 5.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .45rem; }
  .footer-col,
  .footer-brand { text-align: center; }
  .footer-pay,
  .footer-channels { align-items: center; justify-content: center; }
  .cta-strip  { padding: 3rem var(--px); }
  .cta-actions { flex-direction: column; align-items: stretch; max-width: 300px; margin: 0 auto; }
  .cta-actions .btn { width: 100%; }
  .channel-btns { justify-content: center; }

  /* Cookie bottom sheet */
  #cookie-banner {
    flex-direction: column; align-items: stretch;
    bottom: 0; left: 0; width: 100%;
    transform: translateY(100%);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  #cookie-banner.show { transform: translateY(0); }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1; }
  .popup-card { padding: 1.75rem 1.1rem; }
}

/* ≤ 420px — iPhone SE and small Android */
@media (max-width: 420px) {
  .logo { font-size: 1.12rem; }
  .logo-icon { width: 24px; height: 24px; font-size: .7rem; }
  .tariff-price { font-size: 2.1rem; }
  .hero h1 { font-size: clamp(1.95rem,10vw,2.8rem); }
  .src-price { font-size: 1.75rem; }
  .btn { letter-spacing: .08em; }
  .btn-lg { font-size: .75rem; }
  .pr-total { font-size: 1.4rem; }
  .header-inner { padding: 0 .75rem; gap: .25rem; }
  .theme-toggle { width: 30px; height: 30px; font-size: .8rem; }
  .hamburger { width: 32px; height: 32px; }
}

/* ≤ 360px — very small Android phones */
@media (max-width: 360px) {
  :root { --px: 0.85rem; }
  .header-inner { padding: 0 .65rem; }
  .logo-text { display: none; } /* hide "Premium" only on truly tiny screens */
}

/* Body scroll lock when mobile nav is open */
body.nav-open { overflow: hidden; }

/* Touch targets */
@media (hover: none) and (pointer: coarse) {
  .btn         { min-height: 44px; padding-top: .7rem; padding-bottom: .7rem; }
  nav a        { min-height: 48px; }
  .faq-q       { min-height: 48px; }
  .geo-btn, .share-loc-btn { min-height: 42px; }
  .km-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .map-locate-btn { width: 42px; height: 42px; }

  /* iOS Safari zooms page on focus if font-size < 16px — prevent this */
  .form-input, .form-select, .form-textarea { font-size: 16px !important; }
}

/* Nav icons — hidden on desktop, shown on mobile drawer */
.nav-icon { display: none; }

@media (max-width: 820px) {
  .nav-icon {
    display: inline-block;
    width: 1.3rem;
    text-align: center;
    color: var(--gold);
    opacity: .75;
    font-size: .85rem;
    flex-shrink: 0;
  }
}