/* =================================================================
   URBANCE — MOBILE-FIRST PRODUCTION LAYER
   =================================================================
   Purpose: Fix every mobile issue (especially iPhone Safari) without
   altering any desktop design. Loaded LAST so overrides are clean.
   Breakpoints: 1024 → 768 → 600 → 480
   ================================================================= */

/* ─── 0. GLOBAL SAFE DEFAULTS ──────────────────────────────────── */

/* Prevent horizontal scroll everywhere */
html, body {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safari 100vh fix — use dvh where supported */
@supports (min-height: 100dvh) {
  .hero-v5,
  .iq-page .iq-hero,
  .services-hero,
  .about-hero {
    min-height: 100dvh;
  }
}

/* Safe-area padding for notch iPhones */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Tap highlight removal */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling (Safari compat) */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* All images responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Input zoom prevention — iOS zooms if font < 16px */
input, select, textarea {
  font-size: 16px !important;
}

/* Touch-friendly buttons */
button, a.btn, .dropdown-item, .quick-btn {
  min-height: 44px;
}

/* Fixed background fix for iOS (background-attachment: fixed doesn't work) */
@supports (-webkit-touch-callout: none) {
  .hero-v5,
  .page-ending {
    background-attachment: scroll !important;
  }
}

/* ─── 1. MOBILE NAV — handled by mobile-nav.css ───────────────── */
/* Old hamburger/drawer CSS removed. New mobile header, drawer, and
   bottom CTA bar are fully styled in /styles/mobile-nav.css.
   Keeping user-menu compact overrides here for the desktop navbar. */

/* Compact user avatar on mobile (desktop .hero-nav user menu) */
@media (max-width: 768px) {
  /* Hide desktop header — mobile-nav.css shows .mobile-header instead */
  .hero-nav {
    display: none !important;
  }

  /* Old nav-mobile-drawer/backdrop hidden (replaced by mobile-nav.css) */
  .nav-mobile-drawer,
  .nav-mobile-backdrop {
    display: none !important;
  }
}


/* ─── 2. GLOBAL LAYOUT — TABLET (≤ 1024px) ────────────────────── */
@media (max-width: 1024px) {
  .nav-pill {
    width: calc(100% - 32px);
    max-width: none;
  }
}


/* ─── 3. GLOBAL LAYOUT — TABLET-SMALL (≤ 768px) ───────────────── */
@media (max-width: 768px) {
  /* No extra body padding — the fixed 56px header is accounted for
     by each page's hero/first-section top padding. The hero already
     has generous top padding from desktop rules, and the compact
     mobile header (56px vs 72px desktop pill) means less space needed. */

  /* Reduce section padding globally */
  section,
  .sp-hero, .sp-about, .sp-values, .sp-services, .sp-coverage,
  .sp-reviews, .sp-process, .sp-faq, .sp-cta,
  .about-hero, .about-story, .about-values, .about-team,
  .tos-hero, .pp-hero, .lb-hero, .safety-hero, .pa-hero, .pg-hero, .a11y-hero,
  .pr-hero, .fq-hero, .gd-hero, .areas-hero,
  .ct-hero, .ct-map {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Stack two-column layouts */
  .hero-v5__container,
  .about-story__grid,
  .about-values__grid,
  .ct-main,
  .image-content__inner {
    grid-template-columns: 1fr !important;
  }

  /* Cards full-width */
  .sp-services__grid,
  .sp-values__grid,
  .pr-method-grid,
  .pr-svc-grid,
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─── 4. GLOBAL LAYOUT — MOBILE (≤ 600px) ──────────────────────── */
@media (max-width: 600px) {
  /* Tighter section spacing */
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Reduce hero height for mobile */
  .hero-v5 {
    min-height: auto;
  }

  /* Full-width buttons in hero/CTA sections */
  .hero-v5__btn-primary,
  .hero-v5__btn-secondary,
  .sp-cta .btn,
  .about-newsletter .btn,
  .pr-hero__cta .btn,
  .footer-cta-button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* ─── 5. GLOBAL LAYOUT — SMALL MOBILE (≤ 480px) ───────────────── */
@media (max-width: 480px) {
  /* Even tighter spacing */
  section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}


/* ─── 6. TYPOGRAPHY SCALING ────────────────────────────────────── */
@media (max-width: 768px) {
  h1, .hero-v5__title, .sp-hero__title, .about-hero__title,
  .tos-hero__title, .pp-hero__title, .lb-hero__title,
  .safety-hero__title, .pa-hero__title, .pg-hero__title,
  .a11y-hero__title, .pr-hero__title, .fq-hero__title,
  .gd-hero__title, .areas-hero__title, .ct-hero__title,
  .iq-hero__title {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(22px, 5.5vw, 34px);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(18px, 4.5vw, 26px);
    line-height: 1.25;
  }

  body, p, li {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Captions / small text */
  .hero-v5__sub, .sp-hero__sub, .iq-hero__sub,
  .about-hero__sub, .pr-hero__sub, .fq-hero__sub,
  .gd-hero__sub, .areas-hero__sub, .ct-hero__sub,
  small, figcaption, caption {
    font-size: 14px;
    line-height: 1.55;
  }
}


/* ─── 7. FOOTER MOBILE ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce page-ending gradient space */
  .page-ending {
    padding-bottom: 0;
  }

  .faq-footer-wrapper {
    margin-top: 40px;
    padding: 0 12px 32px;
  }

  .footer-card {
    border-radius: 20px;
    padding: 24px 16px 20px;
    gap: 20px;
  }

  /* Compact CTA panel */
  .footer-cta-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px;
    border-radius: 16px;
    gap: 12px;
    margin-bottom: 8px;
  }

  .footer-cta-title {
    font-size: 1.15rem;
    text-align: center;
  }

  .footer-cta-subtext {
    font-size: 0.9rem;
    text-align: center;
  }

  .footer-cta-button {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .footer-main-grid {
    flex-direction: column;
    gap: 20px;
  }

  /* Footer brand stays visible, compact */
  .footer-brand {
    align-items: center;
    text-align: center;
  }

  .footer-brand-text {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .footer-social {
    justify-content: center;
  }

  /* ── Accordion footer columns ──────────────────────────────── */
  /* Layout only — accordion open/close is owned by footer-redesign.css */
  .footer-links-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Kill the old h4::after chevron — footer-redesign.css uses the span icon */
  .footer-column h4::after {
    display: none !important;
    content: none !important;
  }

  .footer-links a {
    font-size: 14px;
    line-height: 1.8;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-size: 13px;
    padding-top: 16px;
    margin-top: 8px;
  }

  .footer-bottom-right {
    justify-content: center;
  }

  /* Reduce watermark on mobile */
  .footer-underlay {
    height: 50%;
  }

  .footer-underlay::before {
    font-size: clamp(5rem, 18vw, 12rem) !important;
  }
}

@media (max-width: 480px) {
  .footer-card {
    border-radius: 16px;
    padding: 20px 12px 16px;
  }

  .footer-cta-panel {
    padding: 16px 12px;
    border-radius: 12px;
  }

  .faq-footer-wrapper {
    padding: 0 8px 24px;
    margin-top: 24px;
  }
}


/* ─── 8. INSTANT QUOTE CHAT — MOBILE FIX ──────────────────────── */
@media (max-width: 768px) {
  .iq-page .iq-hero {
    min-height: auto;
    padding: 100px 16px 24px;
  }

  .iq-page .iq-hero--compact {
    padding: 90px 16px 16px;
  }

  .iq-page .iq-card {
    padding: 0 8px;
  }

  .iq-page .iq-card__inner {
    border-radius: 16px;
    max-height: none;
  }

  /* Chat thread — scrollable, fills screen */
  .iq-page .iq-card__thread {
    min-height: 45vh;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Welcome section compact */
  .iq-page .iq-welcome {
    padding: 24px 16px;
  }

  .iq-page .iq-welcome__title {
    font-size: 20px !important;
  }

  /* Quick action buttons — wrap nicely, bigger tap targets */
  .iq-page .quick-actions {
    gap: 8px;
    padding: 0 12px 16px;
    flex-wrap: wrap;
  }

  .iq-page .quick-btn {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    border-radius: 12px;
  }

  /* Input composer — sticky at bottom */
  .iq-page .iq-card__input {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0 0 16px 16px;
  }

  .iq-page .iq-card__input-row {
    gap: 8px;
  }

  .iq-page .chat-input {
    font-size: 16px !important;
    padding: 12px 14px;
    min-height: 46px;
    border-radius: 12px;
  }

  .iq-page .send-btn {
    min-width: 46px;
    min-height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  /* Trust row below chat */
  .iq-page .iq-trust-row {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .iq-page .iq-trust-item {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .iq-page .iq-hero--compact {
    padding: 80px 12px 12px;
  }

  .iq-page .iq-card {
    padding: 0 4px;
  }

  .iq-page .iq-card__thread {
    max-height: 50vh;
  }

  .iq-page .quick-btn {
    flex: 1 1 100%;
  }
}

/* Quick reply chips in chat */
@media (max-width: 768px) {
  .quick-reply-chips {
    gap: 6px;
    flex-wrap: wrap;
  }

  .quick-reply-chip,
  .chip-btn {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 10px;
  }
}


/* ─── 9. AUTH PAGES (LOGIN / SIGNUP) ───────────────────────────── */
@media (max-width: 768px) {
  .auth-split {
    flex-direction: column !important;
    min-height: auto;
  }

  .auth-split__left,
  .auth-split__visual,
  .auth-panel-left {
    display: none !important;
  }

  .auth-split__right,
  .auth-panel-right,
  .auth-split__form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 20px !important;
    min-height: auto;
  }

  .auth-card,
  .auth-form-card {
    border-radius: 16px;
    padding: 28px 20px;
  }

  .auth-card input,
  .auth-form-card input {
    font-size: 16px !important;
    min-height: 48px;
    border-radius: 10px;
  }

  .auth-card button[type="submit"],
  .auth-form-card button[type="submit"] {
    min-height: 48px;
    width: 100%;
    font-size: 15px;
    border-radius: 10px;
  }
}


/* ─── 10. DASHBOARD PAGES (Profile, Bookings, Settings, Wallet) ── */
@media (max-width: 768px) {
  .dash-layout {
    flex-direction: column !important;
    gap: 0;
  }

  .dash-sidebar {
    display: none !important;
  }

  .dash-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    min-height: auto;
  }

  .dash-profile-hero {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .dash-profile-hero__avatar {
    margin: 0 auto;
  }

  .dash-card, .dash-section-card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .dash-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  /* Booking cards */
  .booking-card, .dash-booking-card {
    padding: 16px;
    border-radius: 14px;
  }

  .booking-card__actions, .dash-booking-card__actions {
    flex-direction: column;
    gap: 8px;
  }

  .booking-card__actions .btn,
  .dash-booking-card__actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}


/* ─── 11. LEGAL / INFO PAGES ──────────────────────────────────── */
@media (max-width: 768px) {
  /* All legal dark heroes */
  .tos-hero, .pp-hero, .lb-hero, .safety-hero,
  .pa-hero, .pg-hero, .a11y-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  /* Content containers */
  .tos-content, .pp-content, .lb-content, .safety-content,
  .pa-content, .pg-content, .a11y-content {
    padding: 32px 16px;
  }

  /* Section cards inside legal pages */
  .tos-card, .pp-card, .lb-card, .safety-card,
  .pa-card, .pg-card, .a11y-card,
  .tos-section, .pp-section, .lb-section, .safety-section,
  .pa-section, .pg-section, .a11y-section {
    padding: 24px 16px;
    border-radius: 14px;
  }

  /* Legal page mobile nav dropdown */
  .tos-mobile-nav, .pp-mobile-nav, .lb-mobile-nav,
  .safety-mobile-nav, .pa-mobile-nav, .pg-mobile-nav,
  .a11y-mobile-nav {
    display: block;
    margin-bottom: 16px;
  }

  .tos-mobile-nav select, .pp-mobile-nav select,
  .lb-mobile-nav select, .safety-mobile-nav select,
  .pa-mobile-nav select, .pg-mobile-nav select,
  .a11y-mobile-nav select {
    width: 100%;
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px;
    border-radius: 10px;
  }

  /* Hide desktop sidebar nav on legal pages */
  .tos-sidebar, .pp-sidebar, .lb-sidebar, .safety-sidebar,
  .pa-sidebar, .pg-sidebar, .a11y-sidebar {
    display: none;
  }
}


/* ─── 12. SERVICES PAGE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  .sp-services__grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .sp-service-card {
    padding: 20px 16px;
  }

  .sp-process__steps {
    grid-template-columns: 1fr !important;
  }

  .sp-coverage__grid,
  .sp-values__grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── 13. ABOUT PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-hero {
    min-height: auto !important;
    padding: 100px 16px 40px !important;
  }

  .about-story__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .about-values__grid {
    grid-template-columns: 1fr !important;
  }

  .about-team__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
}

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


/* ─── 14. CONTACT PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .ct-hero {
    padding: 100px 16px 32px !important;
    min-height: auto !important;
  }

  .ct-main {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
    gap: 24px;
  }

  .ct-form input,
  .ct-form textarea,
  .ct-form select {
    font-size: 16px !important;
    min-height: 48px;
  }

  .ct-form textarea {
    min-height: 120px;
  }

  .ct-form button[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }

  /* Map section */
  .ct-map iframe {
    height: 250px;
    border-radius: 14px;
  }
}


/* ─── 15. AREAS PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .areas-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  .areas-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  .area-card {
    padding: 16px;
    border-radius: 12px;
  }
}

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


/* ─── 16. FAQ PAGE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fq-hero {
    padding: 100px 16px 32px !important;
    min-height: auto !important;
  }

  .fq-layout {
    flex-direction: column;
  }

  .fq-sidebar {
    display: none;
  }

  .fq-content {
    width: 100%;
    max-width: 100%;
  }

  .fq-tabs {
    padding: 0 8px;
  }

  .fq-tabs__inner {
    gap: 6px;
  }

  .fq-tab {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 40px;
  }
}


/* ─── 17. PRICING PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .pr-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  .pr-method-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .pr-factors {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .pr-svc-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .pr-promise {
    padding: 32px 20px;
    border-radius: 16px;
  }

  .pr-faq-list {
    padding: 0 8px;
  }
}


/* ─── 18. GUIDES / ARTICLES ───────────────────────────────────── */
@media (max-width: 768px) {
  .gd-hero {
    padding: 100px 16px 32px !important;
    min-height: auto !important;
  }

  .gd-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .ar-article {
    padding: 0 16px;
  }

  .ar-article img {
    border-radius: 12px;
  }

  .ar-related__grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── 19. SERVICE DETAIL PAGES ────────────────────────────────── */
@media (max-width: 768px) {
  .sd-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  .sd-hero__split {
    grid-template-columns: 1fr !important;
  }

  .sd-features__grid,
  .sd-process__grid,
  .sd-pricing__grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .sd-faq__grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── 20. BOOKING FLOW (book.html, booking-confirmation.html) ─── */
@media (max-width: 768px) {
  .book-container, .bc-container {
    padding: 100px 16px 32px;
    max-width: 100%;
  }

  .book-card, .bc-card {
    padding: 24px 16px;
    border-radius: 16px;
  }

  .book-card input, .book-card select,
  .bc-card input, .bc-card select {
    font-size: 16px !important;
    min-height: 48px;
  }

  .book-card button, .bc-card button {
    min-height: 48px;
    width: 100%;
    font-size: 15px;
  }

  /* Time slots grid */
  .time-slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .time-slot {
    min-height: 44px;
    font-size: 14px;
  }
}


/* ─── 21. PROVIDER PAGES ──────────────────────────────────────── */
@media (max-width: 768px) {
  .provider-hero, .bp-hero {
    padding: 100px 16px 40px !important;
    min-height: auto !important;
  }

  .provider-grid, .bp-grid,
  .provider-benefits-grid, .bp-benefits {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}


/* ─── 22. HOMEPAGE SPECIFIC SECTIONS ──────────────────────────── */
@media (max-width: 768px) {
  /* How it works */
  .hiw-cards {
    flex-direction: column;
    gap: 16px;
  }

  .hiw-card {
    width: 100%;
  }

  /* Why Urbance grid */
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Testimonials */
  .test-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Services carousel - horizontal scroll */
  .services-carousel {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 0 16px 16px;
  }

  .services-carousel .service-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}


/* ─── 23. REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .nav-mobile-drawer {
    transition: none;
  }

  .nav-mobile-backdrop {
    transition: none;
  }

  .hero-v5__orb,
  .hero-v5__shimmer,
  .hero-v5__float-card {
    animation: none !important;
    opacity: 1;
  }
}


/* ─── 24. PRINT ───────────────────────────────────────────────── */
@media print {
  .hero-nav,
  .nav-mobile-drawer,
  .nav-mobile-backdrop,
  .urbie-launcher,
  .footer-underlay::before {
    display: none !important;
  }
}