/* ═══════════════════════════════════════════════════════════
   Puget Sound Moving — mobile.css
   Comprehensive mobile overrides for all templates.
   Loaded on every page alongside global.css.
   Breakpoints: 1100px (tablet), 768px (mobile), 480px (xs)
═══════════════════════════════════════════════════════════ */

/* ─── NAV MOBILE ──────────────────────────────────────────── */
/* Hide mobile-only elements on desktop */
.nav-mobile-actions { display: none; }
.mobile-drawer-overlay { display: none; }
.mobile-drawer { display: none; }

@media (max-width: 900px) {
  .nav-inner { height: 60px; padding: 0 4%; }
  .nav-logo-text .logo-sub { display: none; }
  .nav-logo-icon { width: 36px; height: 36px; }

  /* Hide desktop nav elements */
  .nav-menu-wrap { display: none; }
  .nav-cta { display: none; }

  /* Show mobile actions */
  .nav-mobile-actions {
    display: flex; align-items: center; gap: 4px;
  }

  /* Mobile phone button */
  .mobile-phone-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: var(--gold);
    text-decoration: none; border-radius: 50%;
    transition: background 0.2s;
  }
  .mobile-phone-btn:active { background: rgba(255,255,255,0.08); }

  /* Hamburger button */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger-line {
    display: block; width: 22px; height: 2px;
    background: var(--white); border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.77,0,0.175,1),
                opacity 0.2s ease,
                width 0.3s cubic-bezier(0.77,0,0.175,1);
    transform-origin: center;
  }
  .hamburger-line:nth-child(1) { margin-bottom: 5px; }
  .hamburger-line:nth-child(2) { margin-bottom: 5px; width: 16px; margin-left: auto; }
  .hamburger-line:nth-child(3) { width: 22px; }

  /* Hamburger → X animation */
  .nav-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg); width: 22px;
  }
  .nav-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0; transform: scaleX(0); width: 22px;
  }
  .nav-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); width: 22px;
  }

  /* ─── MOBILE DRAWER ─────────────────────────────────────── */
  .mobile-drawer-overlay {
    display: block; position: fixed; inset: 0; z-index: 997;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .mobile-drawer-overlay.is-visible {
    opacity: 1; visibility: visible;
  }

  .mobile-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(85vw, 360px); z-index: 998;
    background: linear-gradient(175deg, #0a1838 0%, var(--navy) 40%, #07112A 100%);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 40px rgba(0,0,0,0.4);
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
  }

  .mobile-drawer-inner {
    display: flex; flex-direction: column; min-height: 100%;
    padding: 80px 28px 32px; /* top padding clears the header */
  }

  /* ─── DRAWER LINKS ──────────────────────────────────────── */
  .mobile-nav-list {
    list-style: none; margin: 0; padding: 0;
  }
  .mobile-nav-list > li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mobile-drawer.is-open .mobile-nav-list > li {
    opacity: 1; transform: translateX(0);
  }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(1) { transition-delay: 0.08s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(2) { transition-delay: 0.12s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(3) { transition-delay: 0.16s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(4) { transition-delay: 0.20s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(5) { transition-delay: 0.24s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(6) { transition-delay: 0.28s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(7) { transition-delay: 0.32s; }
  .mobile-drawer.is-open .mobile-nav-list > li:nth-child(8) { transition-delay: 0.36s; }

  .mobile-nav-list > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 4px;
    font-family: 'DM Sans', sans-serif; font-size: 17px;
    font-weight: 500; letter-spacing: 0.3px;
    color: rgba(255,255,255,0.85); text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
  }
  .mobile-nav-list > li > a::after {
    content: ''; display: block;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(-45deg);
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
  }
  .mobile-nav-list > li > a:active {
    color: var(--gold); padding-left: 8px;
  }
  .mobile-nav-list > li > a:active::after {
    opacity: 1; transform: rotate(-45deg) translate(2px, -2px);
  }
  .mobile-nav-list > li.current-menu-item > a {
    color: var(--gold);
  }
  .mobile-nav-list > li.current-menu-item > a::after {
    opacity: 1;
  }

  /* Sub-menu */
  .mobile-nav-list .sub-menu {
    list-style: none; margin: 0; padding: 0 0 8px 16px;
  }
  .mobile-nav-list .sub-menu a {
    display: block; padding: 10px 4px;
    font-size: 14px; color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
  }
  .mobile-nav-list .sub-menu a:active { color: var(--gold); }

  /* ─── DRAWER CTA ────────────────────────────────────────── */
  .mobile-drawer-cta {
    margin-top: auto; padding-top: 32px;
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
  }
  .mobile-drawer.is-open .mobile-drawer-cta {
    opacity: 1; transform: translateY(0);
  }

  .mobile-cta-phone {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px; letter-spacing: 2px;
    color: var(--gold); text-decoration: none;
    padding: 14px 0;
    border-top: 1px solid rgba(201,148,42,0.2);
    transition: color 0.2s;
  }
  .mobile-cta-phone svg { flex-shrink: 0; opacity: 0.7; }
  .mobile-cta-phone:active { color: var(--gold-light); }

  .mobile-cta-quote {
    display: block; width: 100%;
    background: var(--gold); color: var(--navy);
    text-align: center; padding: 16px 24px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; border-radius: 4px;
    transition: background 0.2s, transform 0.15s;
  }
  .mobile-cta-quote:active {
    background: var(--gold-light); transform: scale(0.98);
  }

  /* ─── DRAWER FOOTER ─────────────────────────────────────── */
  .mobile-drawer-footer {
    margin-top: 24px; text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease 0.35s;
  }
  .mobile-drawer.is-open .mobile-drawer-footer { opacity: 1; }
  .mobile-drawer-footer p {
    font-size: 11px; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.2); text-transform: uppercase;
  }

  /* ─── BODY SCROLL LOCK ──────────────────────────────────── */
  body.mobile-nav-open { overflow: hidden; }
}

/* Scrolled state */
.site-header.scrolled .nav-inner { height: 56px; }
@media (max-width: 900px) {
  .site-header.scrolled .nav-inner { height: 52px; }
}

/* ─── HERO SECTIONS ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .city-hero-inner, .service-hero-inner, .home-hero-inner {
    grid-template-columns: 1fr; padding: 64px 5% 72px; gap: 0;
  }
  .quote-card { display: none !important; }
}
@media (max-width: 768px) {
  .city-hero-headline  { font-size: clamp(42px, 11vw, 64px); }
  .service-hero-headline { font-size: clamp(42px, 11vw, 72px); }
  .home-hero-headline  { font-size: clamp(46px, 12vw, 72px); }
  .city-hero-inner, .service-hero-inner, .home-hero-inner { padding: 52px 5% 60px; }
  .hero-buttons { flex-direction: column; gap: 12px; }
  .hero-buttons a { clip-path: none !important; text-align: center; padding: 16px 24px !important; width: 100%; }
}
@media (max-width: 480px) {
  .city-hero-headline, .service-hero-headline { font-size: clamp(36px, 10vw, 52px); }
  .hero-includes { gap: 8px; }
  .hero-include-pill { font-size: 12px; }
}

/* ─── TRUST & STATS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .trust-bar-inner, .stats-strip-inner { grid-template-columns: 1fr 1fr; }
  .trust-block { border-left: none; border-bottom: 1px solid #E5E3DA; padding: 18px; }
  .stat-block  { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 22px 16px; }
  .trust-block-num { font-size: 36px; }
  .stat-number { font-size: 48px; }
  .hero-trust { flex-wrap: wrap; gap: 20px; }
  .hero-trust-item { flex: 1; min-width: 70px; border: none; padding: 0; margin: 0; }
}

/* ─── FOOTER ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer-badges { justify-content: center; }
  .site-footer { padding: 48px 5% 0; }
}

/* ─── CTA BAND ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-section { padding: 64px 5%; }
  .cta-bg-text { font-size: 160px; }
  .cta-buttons { flex-direction: column; align-items: stretch; gap: 12px; max-width: 340px; margin: 0 auto; }
  .cta-buttons a { clip-path: none !important; text-align: center; }
}

/* ─── BUTTONS GLOBAL ──────────────────────────────────────── */
@media (max-width: 768px) {
  .btn-primary, .btn-secondary, .btn-dark, .btn-outline-dark { clip-path: none; }
}

/* ─── CITY TEMPLATE ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .local-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .neighborhoods-grid { grid-template-columns: 1fr; gap: 36px; }
  .neighborhoods-map-panel { height: 260px; }
  .services-header { grid-template-columns: 1fr; gap: 16px; }
  .city-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-local-grid { grid-template-columns: 1fr 1fr; }
  .seo-grid { grid-template-columns: 1fr; gap: 40px; }
  .city-faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-sticky { position: static; }
  .photos-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .photos-grid .photo-slot:first-child { grid-row: auto; }
  .map-embed-wrapper { height: 360px; }
}
@media (max-width: 768px) {
  .local-intro, .neighborhoods, .photos-section,
  .city-services, .testimonials-section, .why-local,
  .seo-section, .city-faq, .map-section { padding: 60px 0; }
  .city-services-grid { grid-template-columns: 1fr !important; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .why-local-grid { grid-template-columns: 1fr; }
  .photos-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); }
  .testimonials-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .map-embed-wrapper { height: 280px; }
  .map-embed-wrapper::before { display: none; }
  .n-chip, .loc-chip { clip-path: none; font-size: 13px; padding: 8px 14px; }
  .neighborhood-chips { gap: 8px; }
  .biz-card { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .city-services-grid { grid-template-columns: 1fr !important; }
  .service-card { padding: 28px 22px; }
}

/* ─── SERVICE TEMPLATE ────────────────────────────────────── */
@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: 1fr; gap: 36px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px; }
  .process-grid::before { display: none; }
  .pricing-header { grid-template-columns: 1fr; gap: 16px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-sticky { position: static; }
  .svc-seo-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .service-overview, .benefits-section, .process-section,
  .pricing-section, .cases-section, .svc-faq-section,
  .svc-seo-section, .locations-section { padding: 60px 0; }
  .benefits-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .cases-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pricing-section::before { display: none; }
  .step-circle { width: 80px; height: 80px; }
  .step-num { font-size: 32px; }
  .overview-badge { width: 90px; height: 90px; bottom: -10px; right: 16px; }
  .badge-num { font-size: 26px; }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr !important; max-width: 280px; margin: 0 auto; }
  .overview-panel { padding: 28px 20px; }
  .benefit-card { padding: 28px 20px; }
}

/* ─── BLOG ARCHIVE & SINGLE ───────────────────────────────── */
@media (max-width: 1100px) {
  .archive-layout { grid-template-columns: 1fr; }
  .archive-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .posts-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .post-card-featured { grid-template-columns: 1fr; }
  .post-card-featured .post-card-image { height: 240px; }
  .single-layout { grid-template-columns: 1fr; }
  .single-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .archive-hero { padding: 80px 0 56px; }
  .archive-body { padding: 48px 0 64px; }
  .posts-grid { grid-template-columns: 1fr; }
  .archive-sidebar { grid-template-columns: 1fr; }
  .filter-chip { font-size: 12px; padding: 6px 14px; clip-path: none; }
  .single-hero { padding: 72px 0 52px; }
  .single-hero-title { font-size: clamp(26px, 7vw, 44px); }
  .single-body { padding: 48px 0 64px; }
  .single-sidebar { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; gap: 16px; }
  .post-content p, .post-content li { font-size: 16px; }
}

/* ─── HOMEPAGE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .home-services-header { grid-template-columns: 1fr; gap: 16px; }
  .home-services-grid { grid-template-columns: 1fr 1fr; }
  .home-process-header { grid-template-columns: 1fr; gap: 16px; }
  .home-process-steps { grid-template-columns: 1fr 1fr; gap: 36px; }
  .home-process-steps::before { display: none; }
  .home-why-grid { grid-template-columns: 1fr 1fr; }
  .home-areas-layout { grid-template-columns: 1fr; gap: 36px; }
  .home-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .home-faq-sticky { position: static; }
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .home-services, .home-process, .home-why,
  .home-areas, .home-faq, .home-reviews { padding: 60px 0; }
  .home-services-grid { grid-template-columns: 1fr; }
  .home-process-steps { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
  .home-why-grid { grid-template-columns: 1fr; }
  .areas-map { height: 280px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .home-reviews-header { flex-direction: column; gap: 16px; }
  .home-hero-buttons { flex-direction: column; gap: 12px; }
  .home-hero-buttons a { clip-path: none !important; text-align: center; width: 100%; }
  .intro-strip { padding: 20px 5%; }
  .intro-strip-inner { gap: 16px; }
  .city-tags { gap: 8px; }
  .city-tag { clip-path: none; font-size: 13px; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .home-hero-headline { font-size: clamp(40px, 12vw, 60px); }
  .hero-trust-num { font-size: 30px; }
  .home-hero-trust { gap: 12px; }
  .hero-trust-item { min-width: calc(50% - 6px); }
}

/* ─── TOUCH DEVICE HOVER RESET ────────────────────────────── */
@media (hover: none) {
  .post-card:hover, .home-svc-card:hover, .service-card:hover,
  .benefit-card:hover, .why-card:hover, .review-card:hover,
  .case-card:hover, .home-why-card:hover, .loc-chip:hover,
  .city-tag:hover, .n-chip:hover, .filter-chip:hover { transform: none; box-shadow: none; }
}

/* ─── iOS FORM ZOOM FIX ───────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="date"], input[type="number"], input[type="search"],
  select, textarea { font-size: 16px !important; }
}

/* ─── SAFE AREA (iPhone notch) ────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer .footer-bottom { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

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

/* ─── ABOUT PAGE ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .about-hero-inner    { grid-template-columns: 1fr !important; gap: 40px; }
  .about-story-grid    { grid-template-columns: 1fr !important; gap: 36px; }
  .about-values-grid   { grid-template-columns: 1fr 1fr !important; }
  .about-team-grid     { grid-template-columns: 1fr 1fr !important; }
  .about-fleet-grid    { grid-template-columns: 1fr !important; }
  .about-hero-photo-frame::before { display: none; }
  .credentials-inner   { grid-template-columns: 1fr !important; gap: 20px; }
  .credentials-label   { text-align: left !important; }
}
@media (max-width: 600px) {
  .about-values-grid   { grid-template-columns: 1fr !important; }
  .about-team-grid     { grid-template-columns: 1fr !important; }
  .about-hero-stats    { flex-wrap: wrap; gap: 20px; }
  .about-stat          { border: none !important; padding: 0 !important; margin: 0 !important; }
  .about-hero          { padding: 64px 0 48px; }
  .about-story, .about-team, .about-values, .about-fleet { padding: 56px 0; }
  .about-hero-title    { font-size: 44px !important; }
  .fleet-photo         { height: 240px !important; }
}

/* ─── SIDEBAR PAGE ────────────────────────────────────── */
@media (max-width: 1000px) {
  .page-sidebar-layout { grid-template-columns: 1fr !important; }
  .page-sidebar        { position: static !important; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .page-sidebar        { grid-template-columns: 1fr !important; }
}

/* ─── LOCATIONS PAGE ──────────────────────────────────── */
@media (max-width: 1100px) {
  .offices-grid        { grid-template-columns: 1fr 1fr !important; }
  .office-card.featured { grid-column: auto !important; grid-template-columns: 1fr !important; }
  .office-card.featured .office-card-map { height: 220px !important; }
  .location-cards-grid { grid-template-columns: repeat(3,1fr) !important; }
  .coverage-inner      { grid-template-columns: 1fr !important; gap: 36px; }
  .coverage-map-visual { height: 240px !important; }
  .locations-offices-header { grid-template-columns: 1fr !important; gap: 16px; }
}
@media (max-width: 720px) {
  .offices-grid        { grid-template-columns: 1fr !important; }
  .location-cards-grid { grid-template-columns: 1fr 1fr !important; }
  .locations-hero-search { flex-direction: column; }
  .locations-hero-search button { justify-content: center; padding: 14px; }
  .locations-hero      { padding: 72px 0 56px; }
}
@media (max-width: 480px) {
  .location-cards-grid { grid-template-columns: 1fr !important; }
  .office-card-city    { font-size: 24px !important; }
}