/* ============================================================
   MEILS – MOBILE OPTIMISATION  (360 px and up)
   Loaded after all other stylesheets so rules can override.
   Breakpoints used:
     ≤ 900 px  – tablet / nav-collapse
     ≤ 768 px  – large mobile
     ≤ 600 px  – medium mobile
     ≤ 480 px  – small mobile
     ≤ 400 px  – tiny mobile (360 px phones)
============================================================ */

/* ================================================================
   1. GLOBAL BASE  — applies to every page on every mobile size
================================================================ */

/* Prevent horizontal scroll site-wide */
html, body { overflow-x: hidden; }

/* Smooth scrolling already set; make sure body doesn't overflow */
body { -webkit-text-size-adjust: 100%; }

/* Touch-friendly minimum tap target for all interactive elements */
a, button, [role="button"],
input[type="submit"], input[type="button"],
select, label { -webkit-tap-highlight-color: transparent; }

/* ================================================================
   2. NAVBAR
================================================================ */
@media (max-width: 900px) {

  /* Logo: shrink from 100 px to a sensible mobile height */
  .logo-img { height: 56px; }

  /* Nav inner: tighter horizontal padding, no gap overflow */
  .nav-inner { padding: 0 16px; gap: 4px; }

  /* Right-side controls */
  .nav-right { gap: 8px; }

  /* Hide the "Talk to an Expert" text label on tablets,
     keep it as an icon-only button */
  .btn-expert span { display: none; }
  .btn-expert      { padding: 8px 12px; font-size: .8rem; }

  /* Login button — keep visible, slightly smaller */
  .nav-login-btn { padding: 6px 12px; font-size: .8rem; }

  /* Hamburger — ensure it is actually visible */
  .hamburger { display: flex; align-items: center; justify-content: center;
               padding: 8px; font-size: 1.4rem; }

  /* Mobile nav panel: override defaults */
  .nav-links.open { padding: 16px; gap: 2px; }
  .nav-links.open .nav-btn {
    color: rgba(255,255,255,.9);
    font-size: .95rem;
    padding: 12px 14px;
    border-radius: 8px;
    width: 100%;
    justify-content: space-between;
    min-height: 48px;          /* touch target */
  }
  .nav-links.open .nav-btn:hover,
  .nav-links.open .nav-item.open .nav-btn {
    background: rgba(255,255,255,.1);
    color: #fff;
  }

  /* Mega-menu items inside the open panel */
  .nav-links.open .mega-item,
  .nav-links.open .mega-item.mega-item-sm {
    padding: 10px 12px;
    min-height: 44px;
    align-items: center;
    color: rgba(255,255,255,.85);
  }
  .nav-links.open .mega-item strong { color: #fff; font-size: .85rem; }

  /* Nav user widget — stays in header */
  .nav-user-name { max-width: 70px; }
}

@media (max-width: 768px) {
  /* Hide Expert button at tablet — too much space */
  .btn-expert { display: none !important; }
}

@media (max-width: 600px) {
  .logo-img { height: 44px; }
  .nav-inner { padding: 0 12px; gap: 0; }

  /* Keep login button compact */
  .nav-login-btn span { display: none; }
  .nav-login-btn { padding: 7px 10px; }

  /* Language selector — hide text, keep flag/icon */
  .lang-selector span { display: none; }

  /* Tighten nav-right gap */
  .nav-right { gap: 6px; }
}

/* ================================================================
   3. HERO SECTION  — critical layout overhaul for mobile
   Desktop uses position:absolute children; we switch to flex flow.
================================================================ */
@media (max-width: 900px) {

  /* Switch hero from absolute-child layout → flex column */
  #heroSection,
  .hero-photo {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: calc(var(--nav-h) + 32px) 20px 48px !important;
    min-height: 100svh;
    overflow: hidden;
    background-position: center center !important;
  }

  /* Pull hero-content-3d out of absolute positioning */
  .hero-content-3d {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    pointer-events: all;
  }

  /* Pull hero search widget out of absolute positioning */
  #heroSearch {
    position: relative !important;
    left: auto !important;      /* kills the 5 px overflow offset */
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px;
    padding: 0 !important;
  }

  /* Scroll hint — hide on mobile to save space */
  .hero-scroll-hint { display: none; }

  /* Hero headings */
  .hero-content-3d h1,
  .hero-title        { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; line-height: 1.2; }
  .hero-content-3d p,
  .hero-sub          { font-size: clamp(.9rem, 3.5vw, 1rem) !important; }

  /* Non-image (gradient) hero pages */
  .hero:not(.hero-photo) { padding: 100px 20px 60px; }
  .hero-content { padding: 0; }
}

@media (max-width: 480px) {
  #heroSection,
  .hero-photo {
    padding: calc(var(--nav-h) + 20px) 16px 36px !important;
  }
  .hero-title { font-size: 1.7rem !important; }
  .hero-cta   { flex-direction: column; gap: 10px; }
  .hero-cta a,
  .hero-cta button { width: 100%; justify-content: center; text-align: center; }
}

/* Stats band: if present, remove negative margin on mobile */
@media (max-width: 768px) {
  .stats-band { margin-top: 0; }
  .sband-num  { font-size: 1.8rem; }
  .stats-band-inner { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .sband-item { flex: 1 1 40%; min-width: 120px; }
  .sband-divider { display: none; }
}

/* ================================================================
   4. SECTIONS & CONTAINERS
================================================================ */
@media (max-width: 768px) {
  .section    { padding: 48px 0; }
  .container  { padding: 0 20px; }

  .section-title { font-size: 1.35rem; }
  .section-sub   { font-size: .84rem; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  .section   { padding: 36px 0; }
  .container { padding: 0 16px; }
  .section-title { font-size: 1.2rem; }
}

/* Fix grid min-content overflow — 1fr resolves as minmax(auto,1fr) by default,
   which lets flex/content children push the column wider than the container.
   minmax(0,1fr) clamps the minimum to 0 so the grid respects the container. */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > * { min-width: 0; }
}

/* Generic two-column grid → single on small screens */
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ================================================================
   5. NAVIGATION PILLS / CTA BUTTONS (touch targets)
================================================================ */
@media (max-width: 900px) {
  /* Ensure all CTA buttons have minimum tap height */
  .btn-primary,
  .btn-outline-white,
  .btn-solid-white,
  .btn-cta,
  .btn-expert,
  .btn-login { min-height: 44px; }
}

/* ================================================================
   6. QUOTE WIDGET (homepage)
================================================================ */
@media (max-width: 600px) {
  .quote-widget { border-radius: 12px; }
  .qw-logo-img  { height: 80px; }
  .qw-btn       { width: 100%; justify-content: center; min-height: 46px; }
}

/* ================================================================
   7. TRUST / STATS BAR
================================================================ */
@media (max-width: 600px) {
  .trust-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 20px;
  }
  .trust-divider { display: none; }
}

/* ================================================================
   8. WHY-CHOOSE / FEATURE CARDS
================================================================ */
@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-card { padding: 20px 16px; }
  .why-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 12px; }
  .why-card h3 { font-size: .88rem; }
  .why-card p  { font-size: .78rem; }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   9. FOOTER
================================================================ */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .logo-img-footer { height: 120px; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; gap: 24px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: .75rem;
  }
  .footer-bottom-links { flex-wrap: wrap; gap: 8px; }
}

/* ================================================================
   10. FLOATING ACTION BUTTONS
================================================================ */
@media (max-width: 480px) {
  .fab-wa  { width: 48px; height: 48px; font-size: 1.4rem; right: 16px; bottom: 20px; }
  .fab-cta { right: 76px; bottom: 24px; height: 44px; }
  .fab-cta span { display: none; }
  .fab-cta { padding: 0 16px; font-size: .8rem; }
}

/* ================================================================
   11. COOKIE BANNER
================================================================ */
@media (max-width: 480px) {
  .cookie-inner { padding: 14px 16px; gap: 12px; }
  .cookie-inner p { font-size: .82rem; }
  .cookie-btns { width: 100%; }
  .cookie-accept,
  .cookie-decline { flex: 1; text-align: center; min-height: 40px; }
}

/* ================================================================
   12. QUICK-CONTACT MODAL
================================================================ */
@media (max-width: 480px) {
  .qc-panel { padding: 28px 20px 24px; }
  .qc-title { font-size: 1.1rem; }
  .qc-field input,
  .qc-field textarea { font-size: .88rem; padding: 10px 12px; }
}

/* ================================================================
   13. LOGIN PAGE
================================================================ */
@media (max-width: 600px) {
  body.login-page { padding: 16px 16px 0; }
  .login-wrap     { padding: 16px 0; }
  .login-card     { border-radius: 18px; }
  .login-header   { padding: 24px 20px 18px; }
  .login-logo     { height: 100px; }
  .login-body     { padding: 20px 20px 24px; }
}

@media (max-width: 400px) {
  body.login-page { padding: 12px 12px 0; }
  .login-logo     { height: 80px; }
  .login-header   { padding: 20px 16px 16px; }
  .login-header-title { font-size: 1rem; }
  .login-body     { padding: 16px 16px 20px; }
  .login-input    { font-size: .88rem; padding: 10px 12px; }
  .btn-login      { font-size: .9rem; padding: 12px; }
  .login-footer a { margin: 0 8px; }
}

/* ================================================================
   14. CONTACT PAGE
================================================================ */
@media (max-width: 768px) {
  .contact-grid,
  .contact-inner { grid-template-columns: 1fr !important; gap: 28px; }
  .contact-info  { order: 2; }
  .contact-form  { order: 1; }
}

@media (max-width: 480px) {
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: .9rem; padding: 10px 12px; min-height: 44px; }
  .contact-submit { width: 100%; min-height: 46px; justify-content: center; }
}

/* ================================================================
   15. QUOTE & REQUEST FORMS
================================================================ */
@media (max-width: 768px) {
  .quote-form-inner,
  .qf-inner,
  .sw-summary { flex-direction: column; gap: 16px; }

  .sw-divider { display: none; }

  /* Form rows that are side-by-side on desktop → stack on mobile */
  .sw-form-row,
  .qf-row,
  .form-row-2 { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  /* All form inputs get proper tap height */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: .9rem !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }

  /* Submit / CTA buttons fill width on mobile */
  .btn-submit,
  .btn-quote,
  .btn-request { width: 100%; justify-content: center; min-height: 46px; }
}

/* ================================================================
   16. SERVICE / CUSTOMS-CLEARANCE PAGES
================================================================ */
@media (max-width: 768px) {
  /* Two-column content+sidebar → stack */
  .cc-layout,
  .cc-grid,
  .svc-grid  { grid-template-columns: 1fr !important; gap: 24px; }

  /* Service hero area */
  .cc-hero-content,
  .svc-hero-content { padding: 0 20px; }
  .cc-hero-content h1,
  .svc-hero-content h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
}

@media (max-width: 480px) {
  /* Feature list items */
  .cc-feature,
  .svc-feature { flex-direction: column; gap: 8px; align-items: flex-start; }
  .cc-feature-icon,
  .svc-feature-icon { margin-bottom: 4px; }
}

/* ================================================================
   17. OFFER CARDS / CAROUSEL
================================================================ */
@media (max-width: 600px) {
  /* Cards snap individually on mobile */
  .offer-card   { min-width: min(260px, 80vw) !important; }
  .product-card { min-width: min(200px, 75vw) !important; }
}

/* ================================================================
   18. MY QUOTES / BACKSTAGE (table-heavy pages)
================================================================ */
@media (max-width: 768px) {
  /* Wide tables become horizontally scrollable */
  .table-wrap,
  .mq-table-wrap,
  .quotes-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .mq-table,
  .quotes-table { min-width: 600px; }

  /* Page header stacks */
  .mq-header,
  .backstage-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ================================================================
   19. RATES / REFERENCES PAGES
================================================================ */
@media (max-width: 768px) {
  .rates-grid,
  .ref-grid { grid-template-columns: 1fr !important; }

  .rates-filter,
  .ref-filter { flex-direction: column; gap: 8px; }

  .rates-filter input,
  .rates-filter select { width: 100%; }
}

/* ================================================================
   20. ABOUT / COMMUNITY / GALLERY
================================================================ */
@media (max-width: 768px) {
  .about-inner,
  .about-grid { grid-template-columns: 1fr !important; gap: 28px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   21. WCA MEMBERSHIP SECTION
================================================================ */
@media (max-width: 768px) {
  .wcam-inner { gap: 28px; }
  .wcam-article h2 { font-size: 1.3rem; }
  .wcam-article p  { font-size: .85rem; }
}

/* ================================================================
   22. TYPOGRAPHY — clamp headings site-wide
================================================================ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.75rem); }
  h3 { font-size: clamp(1rem,  4vw, 1.25rem); }
}

/* ================================================================
   23. SCROLL HINT (hero bottom arrow)
================================================================ */
@media (max-width: 768px) {
  .hero-scroll-hint { bottom: 16px; }
}

/* ================================================================
   24. GENERAL UTILITY OVERRIDES AT SMALL SIZES
================================================================ */
@media (max-width: 480px) {
  /* Page-level padding resets so nothing hugs the edge */
  .page-wrap,
  .page-inner { padding: 0 16px; }

  /* Common label/chip tags */
  .cc-label,
  .section-tag { font-size: .7rem; padding: 3px 10px; }

  /* View-all links */
  .view-all { font-size: .8rem; }
}

/* ================================================================
   25. TRACK & CONVERTER WIDGETS
================================================================ */

/* Reduce card padding so content fits comfortably */
@media (max-width: 600px) {
  .card { padding: 20px 16px; }
}

/* Track widget: stack input + button so button isn't clipped */
@media (max-width: 600px) {
  .track-input-row {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  .track-input { width: 100%; box-sizing: border-box; }
  .track-input-row .btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Converter widget: stack FROM / SWAP / TO vertically */
@media (max-width: 600px) {
  .conv-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .conv-swap {
    align-self: center;
    transform: rotate(90deg); /* arrows point up/down instead of left/right */
  }
  .conv-field { width: 100%; }
  .conv-select,
  .conv-input  { width: 100%; box-sizing: border-box; }

  /* Conv tabs: wrap if labels don't fit */
  .conv-tabs { flex-wrap: wrap; }
  .conv-tab  { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
}

/* ================================================================
   26. FORM PROGRESS STEPPER (quote wizard)
================================================================ */
@media (max-width: 600px) {
  .form-progress {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .fp-step { min-width: 72px; flex-shrink: 0; }
  .fp-step span { font-size: .65rem; }
}

/* ================================================================
   27. SAFE-AREA INSETS (iPhone notch / home indicator)
================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cookie-banner { padding-bottom: env(safe-area-inset-bottom); }
  .fab-wa,
  .fab-cta       { bottom: calc(20px + env(safe-area-inset-bottom)); }
  body.login-page { padding-bottom: env(safe-area-inset-bottom); }
}