/* ============================================================
   GrailGuard — Mobile-Responsive Overrides
   Shared stylesheet for all pages (index, book, track, admin, sign)
   ============================================================ */

/* --- GLOBAL RESETS --- */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* --- TABLET (max-width: 900px) --- */
@media (max-width: 900px) {
  .nav-links { gap: 16px !important; }
  .nav-links a { font-size: 13px !important; }
  .hero h1, .hero-title { font-size: 2.2rem !important; line-height: 1.2 !important; }
  .hero-subtitle, .hero p { font-size: 1rem !important; }
  .features-grid, .services-grid, .stats-grid, .pricing-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tab { white-space: nowrap !important; flex-shrink: 0 !important; padding: 10px 16px !important; font-size: 13px !important; }
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin: 0 -12px !important; padding: 0 12px !important; }
  table, .table { min-width: 600px !important; font-size: 13px !important; }
  th, td { padding: 10px 12px !important; }
  .modal-content { width: 95% !important; max-width: 95vw !important; max-height: 90vh !important; margin: 5vh auto !important; overflow-y: auto !important; }
  .modal-actions { flex-direction: column !important; gap: 8px !important; }
  .modal-actions .btn { width: 100% !important; }
  .detail-grid { grid-template-columns: 1fr 1fr !important; }
  .form-group { margin-bottom: 16px !important; }
}

/* --- MOBILE (max-width: 600px) --- */
@media (max-width: 600px) {
  .main-content { padding: 12px !important; }
  section { padding: 40px 16px !important; }
  .header, header, .admin-header { padding: 12px 16px !important; flex-wrap: wrap !important; }
  .header-logo, .logo, header .logo { font-size: 20px !important; }
  .header-actions { gap: 8px !important; font-size: 12px !important; flex-wrap: wrap !important; }
  .logout-btn { padding: 6px 12px !important; font-size: 12px !important; }
  /* 2026-05-09: hero headline was rendering at ~25px on phones — too
     small to act as the visual hook on first paint. Luxury-shipping
     brand needs the headline to land like a magazine cover, not a
     subtitle. Bump to ~40px with tighter line-height + a little
     letter-spacing tweak for display weight. */
  .hero h1, .hero-title {
    font-size: 2.9rem !important; /* 2026-05-09: nudged up from 2.5rem per UX pass — wanted a touch more presence on a phone */
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
  }
  .hero-subtitle, .hero p { font-size: 1rem !important; line-height: 1.55 !important; }
  /* 2026-05-09: include .hero-actions (homepage's class — the existing
     .hero-buttons / .cta-buttons rules missed it). Switch from
     align-items: stretch (edge-to-edge buttons) to center, with a
     max-width so the buttons read as a deliberate centered CTA stack
     instead of a full-bleed bar. */
  .hero-buttons, .cta-buttons, .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .hero-buttons a, .hero-buttons button,
  .cta-buttons a, .cta-buttons button,
  .hero-actions a, .hero-actions button {
    text-align: center !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .features-grid, .services-grid, .stats-grid, .pricing-grid, .testimonials-grid, .process-grid, .detail-grid, .benefits-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .stat-card { padding: 16px !important; }
  .stat-value { font-size: 1.8rem !important; }
  .stat-label { font-size: 12px !important; }
  .tabs { gap: 4px !important; margin-bottom: 20px !important; }
  .tab { padding: 8px 12px !important; font-size: 11px !important; letter-spacing: 0.5px !important; }
  .table-wrapper { margin: 0 -12px !important; padding: 0 !important; border-radius: 0 !important; }
  table, .table { font-size: 12px !important; }
  th, td { padding: 8px 10px !important; }
  .booking-form, .form-container, .book-form { padding: 16px !important; }
  .form-row, .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  input, select, textarea { font-size: 16px !important; }
  .tracking-result, .tracking-card, .shipment-card { padding: 16px !important; }
  .timeline { padding-left: 16px !important; }
  .timeline-item { padding-left: 24px !important; margin-bottom: 16px !important; }
  .card, .feature-card, .pricing-card, .testimonial-card, .service-card { padding: 20px !important; }
  .btn, .btn-primary, .btn-secondary, button[type="submit"] { padding: 12px 20px !important; font-size: 14px !important; width: 100% !important; }
  .search-box { width: 100% !important; font-size: 14px !important; }
  .filter-select { width: 100% !important; font-size: 14px !important; }
  .controls { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .modal-content { width: 100% !important; max-width: 100vw !important; border-radius: 16px 16px 0 0 !important; max-height: 85vh !important; margin: auto 0 0 0 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
  .modal-header { padding: 16px !important; }
  .card { padding: 16px !important; border-radius: 12px !important; }
  canvas { max-width: 100% !important; height: auto !important; }
  .login-container { padding: 20px !important; }
  .login-box { padding: 24px 20px !important; width: 100% !important; max-width: 100% !important; }
  .login-logo-text, .login-logo { font-size: 24px !important; }
  footer, .footer { padding: 24px 16px !important; text-align: center !important; }
  .footer-grid, .footer-columns { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center !important; }

  /* 2026-05-09: tighten the actual footer markup the homepage and most
     pages use (.footer-inner / .footer-col / .footer-bottom). The
     default desktop rules push 14px links with 10px margin and 13px
     uppercase headers — fine on a wide screen but they balloon the
     mobile footer to almost a full page of vertical space. Compress
     into a 2-column grid with smaller type, tighter rhythm, and
     center-aligned brand block. */
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px !important;
    text-align: left !important;
    padding: 0 4px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  .footer-brand p { font-size: 12px !important; line-height: 1.5 !important; margin-top: 8px !important; }
  .footer-col h4 {
    font-size: 11px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.6px !important;
  }
  .footer-col a {
    font-size: 12px !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }
  /* Footer-bottom (©, Terms · Privacy · etc.) — was a horizontal flex row
     that crammed both blocks side-by-side and overlapped the chat bubble.
     Stack vertically on mobile, smaller type, more breathing room from
     the chat widget at bottom-right. */
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    padding-bottom: 80px !important; /* clear the floating chat bubble */
  }
  .footer-bottom p { font-size: 11px !important; line-height: 1.5 !important; }

  /* The hamburger button on the homepage has been rendering as a single
     visible bar instead of three on some mobile devices — the spans
     stacked with `display: block + margin: 5px 0` are getting collapsed
     by some flex/inline-flex inheritance from the touch-friendly rule
     below (which adds `display: inline-flex; align-items: center` to
     every button). Lock the toggle to flex-column with explicit gap so
     each span renders as a separate horizontal bar, regardless of any
     other display rule that lands on `button`. */
  .mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px !important;
  }
  .mobile-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: #283618 !important;
    border-radius: 2px !important;
  }

  /* 2026-05-09: the slide-out mobile menu was rendering on a near-black
     background (rgba(10,10,15,.97)) with cream link text — jarring
     against the cream hero/header above it and hard to read. Repaint
     it on a soft cream surface with dark-green text so the drawer
     reads as part of the same brand world. Gold tint on each link's
     bottom border gives a subtle separator + hover affordance without
     adding visual weight. */
  .mobile-menu {
    background: rgba(247, 245, 238, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(40, 54, 24, 0.08) !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    padding: 24px 24px 80px !important;
    overflow-y: auto !important;
  }
  .mobile-menu a {
    color: #283618 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 360px !important;
    text-align: left !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(40, 54, 24, 0.10) !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
  }
  .mobile-menu a:last-child { border-bottom: none !important; }
  .mobile-menu a:active,
  .mobile-menu a:focus { color: #C9A227 !important; outline: none !important; }
  /* The Book Now CTA is a filled button in desktop nav. In the drawer
     keep it visible as a primary action, not a flat link.
     2026-05-09: bumped text color from cream (#F0EFEB) to true white
     (#FFFFFF) and weight from 600 to 700 — user reported the cream was
     hard to read against the dark green at phone-screen sizes. */
  .mobile-menu a.btn-nav,
  .mobile-menu a[href="/book.html"]:last-of-type {
    background: #283618 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
  }
  /* Same treatment for any other green CTA in the mobile drawer or
     directly inside the mobile-menu container. Catches both the
     hover/active state of focus too. */
  .mobile-menu a.btn-nav:active,
  .mobile-menu a.btn-nav:focus,
  .mobile-menu a[href="/book.html"]:last-of-type:active,
  .mobile-menu a[href="/book.html"]:last-of-type:focus {
    color: #FFFFFF !important;
  }

  /* 2026-05-09: collapse the 31-city map legend on mobile. On a 375px
     screen the .map-city-tag list wraps into a chaotic 12-row block
     that buries everything else. Replace with a single summary line
     using CSS generated-content on the legend container — no HTML
     change needed. The actual city tags hide; their parent picks up
     a ::before with the brand-formatted summary instead. */
  .map-city-tag { display: none !important; }
  .map-cities-summary {
    display: block !important;
    text-align: center !important;
    color: #283618 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin-top: 16px !important;
  }
  .map-cities-summary .gg-num {
    color: #C9A227 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
  }

  /* 2026-05-09: hide the "Insured up to $500,000" trust pill on the
     book.html quote flow at mobile sizes. User feedback: the row
     above the quote form felt cluttered on a phone; coverage info
     lives further down the page and on the FAQ. Desktop keeps the
     pill so the trust row reads as one cohesive band. */
  .trust-pill-insurance { display: none !important; }
  .checkbox-group { flex-direction: column !important; gap: 8px !important; }
  .email-btn { width: 100% !important; }
  .bookings-container { gap: 12px !important; }
  .status-badge { font-size: 11px !important; padding: 4px 8px !important; }
}

/* --- SMALL PHONE (max-width: 380px) --- */
@media (max-width: 380px) {
  /* Tiny phones (iPhone SE, older Android) — keep the headline punchy
     but allow it to step down so it doesn't push CTAs below the fold. */
  .hero h1, .hero-title { font-size: 2.3rem !important; line-height: 1.1 !important; }
  .tab { padding: 6px 8px !important; font-size: 10px !important; }
  .stat-value { font-size: 1.4rem !important; }
  .header-logo, .logo { font-size: 18px !important; }
  .modal-content { padding: 12px !important; }
  .card { padding: 12px !important; }
}

/* --- TOUCH-FRIENDLY ENHANCEMENTS --- */
@media (hover: none) and (pointer: coarse) {
  .tab, .btn, button, a.btn, .nav-links a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .card:hover, .feature-card:hover, .stat-card:hover { transform: none !important; }
  .tabs::-webkit-scrollbar, .table-wrapper::-webkit-scrollbar { display: none !important; }
}

/* --- LANDSCAPE PHONE --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding: 40px 20px !important; }
  .modal-content { max-height: 95vh !important; }
}

/* --- PRINT STYLES --- */
@media print {
  .tabs, .header-actions, .logout-btn, .hamburger, .mobile-menu, .controls, .modal-overlay, footer, .hero-buttons, .cta-buttons { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  .table-wrapper { overflow: visible !important; }
  table { min-width: auto !important; }
}