/*
 * responsive.css — Responsive nav (1400px hamburger), layout breakpoints
 * Shared by ALL pages
 * Dr Samir Contractor Website
 */

/* ─── RESPONSIVE ─── */

/* hide hamburger on desktop */
.mobile-toggle { display: none; }

/* Below 1400px → switch to hamburger */
@media(max-width:1400px){
  /* Hide desktop nav links & show hamburger */
  .nav-links { display: none; }
  .mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    padding: .4rem; flex-shrink: 0;
  }
  .mobile-toggle svg { width: 26px; height: 26px; stroke: var(--ink); display: block; }

  /* Mobile nav panel */
  .nav-links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 2px solid var(--brand-blue);
    border-bottom: 1px solid var(--rule);
    padding: .75rem 18px 1.25rem;
    gap: 0; align-items: stretch;
    box-shadow: 0 8px 24px rgba(15,44,63,.12);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 200;
  }

  /* Top-level plain links */
  .nav-links.is-open > a {
    font-size: .95rem; font-weight: 500;
    padding: .72rem 0; border-bottom: 1px solid var(--rule);
    border-radius: 0; background: none; color: var(--ink-2);
    text-decoration: none;
  }
  .nav-links.is-open > a:hover { color: var(--brand-blue); }

  /* Dropdown wrapper */
  .nav-links.is-open .nav-dropdown { width: 100%; border-bottom: 1px solid var(--rule); }

  /* Dropdown toggle row */
  .nav-links.is-open .nav-dropdown-toggle {
    font-size: .95rem; font-weight: 500;
    padding: .72rem 0; width: 100%;
    border-radius: 0; background: none; color: var(--ink-2);
    display: flex; justify-content: space-between; align-items: center;
  }
  .nav-links.is-open .nav-dropdown-toggle:hover { color: var(--brand-blue); background: none; }

  /* Sub-menu hidden by default on mobile — shown only when .submenu-open */
  .nav-links.is-open .nav-dropdown-menu {
    display: none;
    position: static;
    box-shadow: none; border: none;
    border-left: 3px solid var(--brand-blue-soft);
    border-radius: 0;
    padding: .2rem 0 .6rem .9rem;
    margin-bottom: .4rem;
    min-width: unset; animation: none;
    background: transparent;
  }
  .nav-links.is-open .nav-dropdown.submenu-open .nav-dropdown-menu { display: block; }

  /* Rotate chevron when open */
  .nav-links.is-open .nav-dropdown.submenu-open .nav-dropdown-toggle svg { transform: rotate(180deg); }

  .nav-links.is-open .nav-dropdown-menu li + li { border: none; }
  .nav-links.is-open .nav-dropdown-menu li a {
    padding: .4rem 0; font-size: .88rem;
    color: var(--ink-3); background: none; display: block;
  }
  .nav-links.is-open .nav-dropdown-menu li a:hover { color: var(--brand-blue); }

  /* CTA full-width */
  .nav-links.is-open .btn-nav-cta {
    width: 100%; justify-content: center;
    margin-left: 0; margin-top: .85rem;
    padding: .8rem 1rem; font-size: .92rem; border-radius: 6px;
  }
}

/* Tablet/mobile layout adjustments */
@media(max-width:1024px){
  .volumes-grid { grid-template-columns: repeat(2,1fr); }
  .practice-grid { grid-template-columns: repeat(3,1fr) !important; }
  .memberships-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:860px){
  .hero-grid { grid-template-columns: 1fr; }
  .about-hero::before { width: 100%; clip-path: none; opacity: .35; }
  .portrait-wrap { max-width: 380px; margin: 0 auto; order: -1; }
  .cred-float { left: 0; bottom: -1rem; }
  .philosophy-grid { grid-template-columns: 1fr; }
  .about-cta-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: span 2; }
  .memberships-grid { grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .volumes-grid { grid-template-columns: 1fr 1fr; }
  .practice-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-cta-row { flex-direction: column; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .cta-btn-row { flex-direction: column; align-items: stretch; }
  .cta-btn-row .btn { justify-content: center; }
}
@media(prefers-reduced-motion:reduce){ *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }