/* =========================================================
   AURORA CARE HOSPITAL — RESPONSIVE REFINEMENTS
   Most component-level responsive rules live alongside their
   components in style.css. This file covers global breakpoint
   behaviour, nav switching, and fine mobile tuning.
   ========================================================= */

@media (max-width: 1024px){
  .main-nav{ display:none; }
  .header-actions .emergency-pill span{ display:none; }
  .header-actions .emergency-pill{ padding:9px; }
}

@media (min-width: 1025px){
  .menu-toggle{ display:none !important; }
}

@media (max-width: 1024px){
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:1px solid var(--color-border);
    background:#fff;
  }
  .menu-toggle svg{ width:20px; height:20px; color: var(--color-navy); }
}

@media (max-width: 480px){
  .wrap{ padding: 0 20px; }
  h1{ font-size: 34px; }
  h2{ font-size: 27px; }
  .hero{ padding-top:56px; padding-bottom:70px; }
  .hero-cta-row .btn{ width:100%; }
  .hero-cta-row{ flex-direction:column; }
  .hero-float-card{ position:static; margin-top:16px; max-width:none; }
  .quick-actions{ margin-top:-30px; margin-bottom:60px; }
  .quick-actions-panel{ border-radius: var(--radius-md); }
  .cta-band-actions{ flex-direction:column; }
  .cta-band-actions .btn{ width:100%; }
  .emergency-strip .wrap{ flex-direction:column; align-items:flex-start; }
  .emergency-strip .btn{ width:100%; justify-content:center; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Header brand text shrink on very small screens */
@media (max-width: 360px){
  .brand-name{ font-size:16px; }
  .brand-name span{ font-size:10px; }
}

/* Ensure no horizontal scrolling anywhere */
html, body{ overflow-x: hidden; }

/* =========================================================
   MOBILE-FIRST NAVIGATION & LAYOUT POLISH
   Added for production-grade tablet/mobile behaviour.
   ========================================================= */

/* Tablet: switch to compact header + hamburger */
@media (max-width: 1100px){
  .header-inner{ padding: 15px 24px; gap: 14px; }
  .main-nav{ display:none; }
  .menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    flex:0 0 44px;
    border:1px solid var(--color-border);
    border-radius:12px;
    background:#fff;
    color:var(--color-navy);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(11,31,51,.06);
  }
  .menu-toggle svg{ width:22px; height:22px; }
  .header-actions{ margin-left:auto; }
}

/* Keep the desktop emergency/appointment actions from crowding tablet headers */
@media (min-width: 701px) and (max-width: 1100px){
  .header-actions .emergency-pill span{ display:inline; }
  .header-actions .emergency-pill{ padding:9px 12px; }
  .header-actions .btn-primary{ display:inline-flex; }
}

/* Small tablets / phones: hamburger becomes the only right-side action */
@media (max-width: 700px){
  .header-inner{ padding:12px 18px; min-height:68px; }
  .brand{ min-width:0; gap:9px; }
  .brand-mark{ width:38px; height:38px; border-radius:10px; }
  .brand-mark svg{ width:20px; height:20px; }
  .brand-name{ font-size:17px; white-space:nowrap; }
  .brand-name span{ font-size:9.5px; letter-spacing:.03em; }

  .header-actions{ gap:8px; }
  .header-actions .emergency-pill,
  .header-actions > .btn{ display:none; }
  .menu-toggle{ width:42px; height:42px; flex-basis:42px; }

  .mobile-nav-panel{
    width:min(360px, 88vw);
    padding:20px 20px 30px;
  }
  .mobile-nav-head{ margin-bottom:16px; }
  .mobile-nav a{ padding:15px 4px; font-size:16px; }
  .mobile-nav .mobile-cta{ margin-top:20px; }
}

/* Phone layout refinements */
@media (max-width: 560px){
  .wrap{ padding-left:18px; padding-right:18px; }
  section{ padding:58px 0; }

  h1{ font-size:clamp(34px, 9vw, 42px); line-height:1.08; }
  h2{ font-size:clamp(28px, 7.5vw, 34px); line-height:1.12; }
  h3{ font-size:21px; }
  p{ font-size:16px; }

  .hero{ padding:44px 0 72px; }
  .hero-grid{ gap:30px; }
  .hero-media{ width:100%; max-width:none; }
  .hero-media-frame{ aspect-ratio:4 / 4.7; border-radius:18px; }
  .hero-float-card{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    margin:0;
    max-width:none;
    padding:14px 15px;
    border-radius:14px;
  }
  .hero-float-card .icon{ width:36px; height:36px; border-radius:9px; }
  .hero-float-card strong{ font-size:13.5px; }
  .hero-float-card span{ font-size:12px; }

  .hero-copy > p{ font-size:17px; line-height:1.6; margin-bottom:26px; }
  .hero-cta-row{ gap:10px; margin-bottom:28px; }
  .hero-cta-row .btn{ width:100%; min-height:50px; }
  .trust-row{ display:grid; grid-template-columns:1fr; gap:12px; }
  .trust-item{ font-size:13.5px; }

  .quick-actions{ margin-top:-30px; margin-bottom:58px; }
  .quick-actions-panel{ grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; }
  .quick-action{
    min-width:0;
    padding:18px 13px;
    gap:10px;
    align-items:flex-start;
  }
  .quick-action .qa-icon{ width:40px; height:40px; border-radius:10px; }
  .quick-action .qa-icon svg{ width:19px; height:19px; }
  .quick-action strong{ font-size:13.5px; line-height:1.3; }
  .quick-action small{ font-size:11.5px; line-height:1.35; }

  .intro-grid{ gap:28px; }
  .intro-media{ aspect-ratio:5 / 4.2; border-radius:16px; }
  .section-head{ margin-bottom:30px; }
  .section-head p{ font-size:16px; }

  .spec-grid,
  .doctor-grid,
  .why-grid,
  .facility-grid,
  .article-grid{ gap:14px; }
  .spec-card{ padding:23px 20px; }
  .doctor-body{ padding:17px 17px 18px; }
  .doctor-actions{ flex-direction:column; }
  .doctor-actions .btn{ width:100%; }
  .facility-card{ aspect-ratio:16 / 11; }

  .journey-step{ gap:14px; padding-bottom:26px; }
  .journey-num{ width:42px; height:42px; font-size:14px; }
  .journey-step::before{ left:20px; top:42px; }

  .cta-band{ padding:60px 0; }
  .cta-band p{ font-size:16px; }
  .cta-band-actions .btn{ width:100%; }

  .demo-banner{ align-items:flex-start; padding:12px 14px; font-size:12px; }
  .testimonial-card{ padding:23px 20px; }

  .faq-question{ padding:17px 18px; font-size:15px; }
  .faq-answer-inner{ padding:0 18px 18px; }

  .emergency-strip{ padding:22px 0; }
  .emergency-strip-text{ gap:12px; }
  .emergency-strip-icon{ width:44px; height:44px; }
  .emergency-strip h3{ font-size:17px; }
  .emergency-strip p{ font-size:13px; }

  .form-row{ grid-template-columns:1fr !important; }
}

/* Very small phones */
@media (max-width: 380px){
  .header-inner{ padding-left:14px; padding-right:14px; }
  .brand-name{ font-size:16px; }
  .brand-name span{ font-size:8.5px; }
  .wrap{ padding-left:15px; padding-right:15px; }
  .quick-action{ padding:16px 10px; gap:8px; }
  .quick-action .qa-icon{ width:36px; height:36px; }
  .quick-action strong{ font-size:12.5px; }
  .quick-action small{ font-size:10.5px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-nav,
  .mobile-nav-panel,
  .menu-toggle,
  .site-header,
  .header-inner{ transition:none !important; }
}