/* ============================================================
   Van Dyke Trusts & Estates Law — Responsive layer
   Loads LAST, on top of site.css + page CSS. Mobile/tablet only.
   Desktop (>1080px) is unaffected.
   ============================================================ */

/* ---- Base: hamburger hidden until needed ---- */
.ms-nav-toggle { display: none; }
.ms-nav { position: relative; }
/* Desktop: the collapse wrapper behaves exactly like the old flat nav row */
.ms-nav-collapse { display: flex; align-items: center; gap: 40px; }

/* When the mobile drawer is open, the nav must paint above the hero/stage.
   site.css puts .ms-stage > .ms-nav and > .ms-hero both at z-index:2, so the
   later-in-DOM hero would otherwise cover the absolutely-positioned drawer. */
.ms-nav.ms-nav--open,
.ms-stage > .ms-nav.ms-nav--open { z-index: 60 !important; }

/* ============================================================
   TABLET / MOBILE NAV  (<= 1080px) — hamburger drawer
   ============================================================ */
@media (max-width: 1080px) {
  .ms-nav-inner { gap: 16px; padding: 12px 28px; }
  .ms-nav-logo img { height: 72px; }

  /* Hamburger button */
  .ms-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: none; margin-left: auto;
    background: transparent; border: 1px solid rgba(216,220,227,0.35);
    border-radius: 3px; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-nav-toggle-box { position: relative; width: 22px; height: 14px; display: block; }
  .ms-nav-toggle-bar,
  .ms-nav-toggle-bar::before,
  .ms-nav-toggle-bar::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px;
    background: var(--vd-cream); border-radius: 2px;
    transition: transform 220ms ease, opacity 160ms ease, top 220ms ease;
  }
  .ms-nav-toggle-bar { top: 6px; }
  .ms-nav-toggle-bar::before { top: -6px; }
  .ms-nav-toggle-bar::after  { top: 6px; }
  .ms-nav-toggle.is-open .ms-nav-toggle-bar { background: transparent; }
  .ms-nav-toggle.is-open .ms-nav-toggle-bar::before { top: 0; transform: rotate(45deg); background: var(--vd-gold-300); }
  .ms-nav-toggle.is-open .ms-nav-toggle-bar::after  { top: 0; transform: rotate(-45deg); background: var(--vd-gold-300); }

  /* Bio/cream-nav pages: dark bars on light bar */
  .bio-page-cream-nav .ms-nav-toggle-bar,
  .bio-page-cream-nav .ms-nav-toggle-bar::before,
  .bio-page-cream-nav .ms-nav-toggle-bar::after { background: var(--vd-navy-900); }
  .bio-page-cream-nav .ms-nav-toggle { border-color: var(--vd-silver-400); }

  /* Collapsible drawer */
  .ms-nav-collapse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--vd-navy-900);
    border-top: 1px solid rgba(216,220,227,0.18);
    box-shadow: 0 28px 50px rgba(6,21,35,0.45);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height 300ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
    padding: 0;
  }
  .ms-nav--open .ms-nav-collapse {
    max-height: 86vh; overflow-y: auto; opacity: 1; pointer-events: auto;
    padding: 6px 0 18px;
  }

  .ms-nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .ms-nav-link {
    color: var(--vd-silver-200) !important;
    padding: 15px 28px; border-bottom: 1px solid rgba(216,220,227,0.10) !important;
    font-size: 14px; letter-spacing: 0.12em; width: 100%;
  }
  .ms-nav-link:hover, .ms-nav-link.active { color: var(--vd-gold-300) !important; }

  /* Practice accordion inside drawer */
  .ms-nav-drop { width: 100%; }
  .ms-nav-drop > .ms-nav-link { display: flex; justify-content: space-between; align-items: center; }
  .ms-nav-drop .caret { transition: transform 200ms ease; opacity: 0.8; }
  .ms-nav-drop.exp .caret { transform: rotate(180deg); color: var(--vd-gold-300); }
  .ms-nav-menu {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    background: rgba(6,21,35,0.6); border: 0; border-radius: 0;
    box-shadow: none; min-width: 0; margin: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height 300ms cubic-bezier(.4,0,.2,1);
  }
  .ms-nav-drop.exp .ms-nav-menu { max-height: 820px; padding: 4px 0 8px; }
  .ms-nav-menu a {
    color: var(--vd-silver-300); padding: 12px 28px 12px 40px; font-size: 13px;
  }
  .ms-nav-menu-title { color: var(--vd-silver-200); }
  .ms-nav-menu-desc { color: var(--vd-silver-500); }
  .ms-nav-menu a:hover { background: rgba(216,220,227,0.06); color: var(--vd-gold-300); }
  .ms-nav-menu a:hover .ms-nav-menu-title { color: var(--vd-gold-300); }
  .ms-nav-menu a:hover .ms-nav-menu-desc { color: var(--vd-silver-300); }

  /* CTAs become full-width pills in the drawer */
  .ms-nav-join, .ms-nav-cta {
    margin: 10px 28px 0; text-align: center; justify-content: center;
    padding: 14px 20px; font-size: 12px; border-radius: 3px;
  }
  .ms-nav-cta { margin-top: 10px; background: var(--vd-gold-500); color: var(--vd-navy-900); }
  .ms-nav-cta:hover { background: var(--vd-gold-300); }

  /* Utility bar tightening */
  .ms-utility-inner { padding-left: 28px; padding-right: 28px; gap: 12px; }
  .ms-utility-meta { display: none; }
  .ms-utility-actions { gap: 16px; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* ============================================================
   LAYOUT COLLAPSE  (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  .ms-container { padding-left: 28px; padding-right: 28px; }

  /* Hero */
  .ms-hero, .ms-hero--image { padding: 48px 0 64px; }
  .ms-hero-grid, .ms-hero-grid--single { grid-template-columns: 1fr; gap: 40px; }
  .ms-hero-title { font-size: clamp(40px, 9vw, 60px); }
  .ms-hero-lead { font-size: 16px; max-width: none; }
  .ms-hero-actions { flex-wrap: wrap; gap: 14px; }
  .ms-hero-trust { flex-wrap: wrap; gap: 20px 28px; }
  .ms-stage, .ms-stage--court { min-height: 0; }
  .ms-stage--court > .ms-section { padding: 64px 0; }

  /* Stat strip → 2 cols with dividers reset */
  .ms-stats-grid, .com-stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .ms-stat, .com-stat { padding: 0 24px; }
  .ms-stat:first-child, .com-stat:first-child { padding-left: 24px; }
  .ms-stat:nth-child(odd), .com-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ms-stat-v { font-size: 48px; }
  .com-stats-grid { padding-left: 28px; padding-right: 28px; }

  /* Section headers stack */
  .ms-section { padding: 72px 0; }
  .ms-section-header,
  .pa-section-header, .ca-section-header, .com-section-header,
  .nw-section-header, .mi-section-header, .ho-section-header,
  .oc-section-header {
    grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px;
  }
  .ms-section-title { font-size: clamp(34px, 7vw, 48px); }

  /* Practices 3→2 */
  .ms-practices { grid-template-columns: 1fr 1fr; }
  .ms-practice,
  .ms-practice:nth-child(3n), .ms-practice:nth-child(3n+1),
  .ms-practice:not(:nth-child(3n)):not(:nth-child(3n+1)) {
    padding: 28px 24px; border-right: 1px solid var(--vd-silver-200);
  }
  .ms-practice:nth-child(even) { border-right: 0; padding-right: 0; }
  .ms-practice:nth-child(odd) { padding-left: 0; }
  .ms-practice:nth-child(n+3) { border-top: 1px solid var(--vd-silver-200); padding-top: 28px; }
  .ms-stage--court .ms-practice { border-right-color: rgba(216,220,227,0.18); }

  /* Two-col content blocks → single */
  .ms-about-grid, .ms-jet-grid, .ms-cta-grid,
  .pa-grid, .oc-philosophy-grid, .oc-twocol,
  .com-twocol, .ca-work, .ca-apply, .fu-hero-grid,
  .bio-hero-grid, .bio-body-grid {
    grid-template-columns: 1fr; gap: 40px;
  }
  .ms-about { padding: 72px 0; }
  .ms-about::before { display: none; }
  .ms-jet { padding: 72px 0; }
  .ms-jet-img { position: static; max-width: 320px; }
  .ms-jet-parallels { grid-template-columns: 1fr; gap: 24px; }
  .ms-about-cases { grid-template-columns: 1fr; gap: 28px; }

  /* Bio: sidebar unsticks, sits above prose */
  .bio-side { position: static; }
  .bio-body { padding: 64px 0 80px; }
  .bio-hero { padding: 48px 0 56px; }
  .bio-name { font-size: clamp(38px, 8vw, 56px); }

  /* Team 3→2 */
  .ms-team { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  /* Contact form panel */
  .ms-cta { padding: 72px 0; }
  .ms-cta-form { padding: 28px 22px; }
  .ms-cta-title { font-size: clamp(36px, 7vw, 48px); }
  .ms-cta-building img { height: 260px; }

  /* Signature / court image moments */
  .ms-signature-inner, .ms-court-inner { padding-left: 28px; padding-right: 28px; }
  .ms-signature-quote { font-size: clamp(28px, 6vw, 40px); }
  .ms-court { height: auto; min-height: 320px; }
  .ms-court-quote { font-size: clamp(30px, 7vw, 44px); }

  /* Footer 5→2 cols */
  .ms-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .ms-footer-top > :first-child { grid-column: 1 / -1; }
  .ms-footer-logo { height: 88px; }
  .ms-footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ms-footer-disclaimer-block { margin-left: -28px; margin-right: -28px; padding: 32px 28px; }
  .ms-footer-disclaimer-grid { grid-template-columns: 1fr; gap: 24px; }
  .ms-footer-adv-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ---- Page-specific grids ---- */
  /* Practice areas */
  .pa-issues, .pa-related { grid-template-columns: 1fr; }
  .pa-issue { border-right: 0; padding: 24px 0; border-bottom: 1px solid var(--vd-silver-200); }

  /* Our cases */
  .oc-criteria, .oc-process { grid-template-columns: 1fr; }
  .oc-criterion, .oc-process li { border-right: 0; padding: 24px 0; }
  .oc-deflist div { grid-template-columns: 1fr; gap: 6px; }

  /* Careers */
  .ca-criteria, .ca-benefits { grid-template-columns: 1fr; }
  .ca-criterion, .ca-benefit { border-right: 0; padding: 24px 0; }
  .ca-position { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }

  /* In the community */
  .com-causes { grid-template-columns: 1fr; }
  .com-cause { border-right: 0; padding: 24px 0; }
  .com-talk { grid-template-columns: 1fr; gap: 6px; }
  .com-twocol li { grid-template-columns: 1fr; gap: 4px; }

  /* News / press */
  .nw-cards { grid-template-columns: 1fr; }
  .pr-item { grid-template-columns: 1fr; gap: 8px; }

  /* Media inquiries */
  .mi-press-contact, .mk-grid { grid-template-columns: 1fr; }

  /* Honoring those who served */
  .ho-cards { grid-template-columns: 1fr; }
  .ho-community-inner { grid-template-columns: 1fr; gap: 44px; }
  .ho-community-title { font-size: 34px; }

  /* Find us */
  .fu-driving, .fu-modes { grid-template-columns: 1fr; }
  .fu-mode { border-right: 0; padding: 28px 0; border-bottom: 1px solid var(--vd-silver-200); }
  .fu-address div { grid-template-columns: 1fr; gap: 4px; }

  /* Firm structure org chart already has its own @media(880px); just tighten */
  .org-row { gap: 18px; }
}

/* ============================================================
   PHONE  (<= 560px)
   ============================================================ */
@media (max-width: 560px) {
  .ms-container { padding-left: 18px; padding-right: 18px; }
  .ms-nav-inner { padding-left: 18px; padding-right: 18px; }
  .ms-utility-inner { padding-left: 18px; padding-right: 18px; }
  .ms-signature-inner, .ms-court-inner, .com-stats-grid { padding-left: 18px; padding-right: 18px; }

  /* Stats + team + practices → single column */
  .ms-stats-grid, .com-stats-grid { grid-template-columns: 1fr; gap: 24px; }
  .ms-stat, .com-stat,
  .ms-stat:first-child, .com-stat:first-child,
  .ms-stat:nth-child(odd), .com-stat:nth-child(odd) {
    border-left: 0; padding: 0 0 22px; border-bottom: 1px solid rgba(216,220,227,0.18);
  }
  .ms-stats-grid .ms-stat:last-child, .com-stats-grid .com-stat:last-child { border-bottom: 0; padding-bottom: 0; }

  .ms-practices { grid-template-columns: 1fr; }
  .ms-practice,
  .ms-practice:nth-child(even), .ms-practice:nth-child(odd),
  .ms-practice:nth-child(3n), .ms-practice:nth-child(3n+1) {
    border-right: 0; padding: 24px 0; border-top: 1px solid var(--vd-silver-200);
  }
  .ms-practice:first-child { border-top: 0; padding-top: 0; }
  .ms-stage--court .ms-practice { border-right: 0 !important; }

  .ms-team { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ms-footer-top { grid-template-columns: 1fr; gap: 28px; }

  /* Type scaling */
  .ms-hero-title { font-size: clamp(34px, 11vw, 44px); }
  .ms-section-title { font-size: clamp(30px, 9vw, 38px); }
  .ms-cta-title { font-size: clamp(30px, 9vw, 38px); }
  .bio-name { font-size: clamp(32px, 10vw, 44px); }
  .ms-signature-quote, .ms-court-quote { font-size: clamp(26px, 8vw, 34px); }

  /* Buttons: full width, easy tap targets */
  .ms-hero-actions .ms-btn,
  .bio-actions .ms-btn { width: 100%; justify-content: center; }
  .ms-btn { padding: 15px 22px; }
  .ms-btn--ghost { justify-content: flex-start; padding-left: 0; }

  /* Section padding */
  .ms-section, .ms-about, .ms-jet, .ms-cta { padding: 56px 0; }

  /* Honors row wraps tighter */
  .ms-honors-marks { gap: 28px 32px; }

  /* Contact rows / facts stack labels */
  .ms-cta-contact-row { grid-template-columns: 1fr; gap: 4px; }
  .bio-facts div { grid-template-columns: 1fr; gap: 4px; }
  .bio-side-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* Prevent any stray horizontal overflow on small screens */
@media (max-width: 1080px) {
  html, body { overflow-x: hidden; }
}