/* Dr Ana Borges — SHARED SHELL responsive layer: header (tablet/mobile), full-screen menu overlay, footer. Added 2026-11-07.
   Loaded AFTER main.css on EVERY page. Everything is inside @media (max-width:1023px) except the neutralising rules for the old
   flyout, so desktop (>=1024) is untouched. The menu overlay (#siteMenu) is built by main.js from the header's own nav and lives
   OUTSIDE <header>: the scrolled header has backdrop-filter, which makes it the containing block of any position:fixed child
   (root cause of the old "flyout is only ~140px tall" bug). Rules + review log: .claude/memory/responsive_playbook.md */

#siteMenu{display:none;}

@media (max-width:1023px){
  :root{--gutter:32px;--bar-w:18px;--bar-h:2px;--bar-gap:5px;--hdr-pt:12px;--hdr-btn:44px;--hdr-logo-h:36px;--hgutter:32px;}
  body.menu-open{overflow:hidden;}

  /* ---- header: logo left, Get In Touch + hamburger right (also the sticky bar once scrolled) ---- */
  .site-header{padding:var(--hdr-pt) 0;}
  .site-header .header-inner{padding:0 var(--hgutter);gap:12px;}
  .site-header .logo{flex:none;min-height:var(--hdr-btn);}
  .site-header .logo img{height:var(--hdr-logo-h);width:auto;max-width:none;}
  .site-header .main-nav{display:none;}
  .site-header .header-cta{display:inline-flex;margin-left:auto;min-height:var(--hdr-btn);padding:0 22px;font-size:15px;}
  .site-header .mobile-toggle{display:flex;flex:none;width:var(--hdr-btn);height:var(--hdr-btn);min-width:var(--hdr-btn);min-height:var(--hdr-btn);padding:0;gap:var(--bar-gap);}
  .site-header .mobile-toggle span{width:var(--bar-w);height:var(--bar-h);}
  .site-header .mobile-toggle.open span{transform:none;opacity:1;}   /* no in-place cross: the overlay has its own close button */
  .site-header.nav-open{background:transparent;box-shadow:none;}

  /* ---- overlay menu ---- */
  #siteMenu{
    display:block;position:fixed;inset:0;z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--white);color:var(--navy);padding:0 var(--hgutter) 40px;
    visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease;
  }
  body.menu-open #siteMenu{visibility:visible;opacity:1;}
  /* top bar replaces the header it covers => same numbers (padding, logo height, button box) as .site-header */
  #siteMenu .menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--hdr-pt) 0;}
  #siteMenu .menu-top .logo{display:flex;align-items:center;gap:10px;flex:none;min-height:var(--hdr-btn);font-family:var(--font-display);font-size:20px;color:var(--navy);}
  #siteMenu .menu-top .logo img{height:var(--hdr-logo-h);width:auto;max-width:none;filter:none;}
  #siteMenu .nav-close{position:relative;flex:none;width:var(--hdr-btn);height:var(--hdr-btn);padding:0;border:0;background:transparent;color:var(--navy);cursor:pointer;}
  #siteMenu .nav-close span{position:absolute;left:50%;top:50%;width:var(--bar-w);height:var(--bar-h);background:currentColor;}
  #siteMenu .nav-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
  #siteMenu .nav-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}

  #siteMenu .menu-list{border-top:1px solid var(--navy);margin-top:6px;}
  #siteMenu .menu-item{border-bottom:1px solid var(--cream-dark);}
  #siteMenu .menu-link,#siteMenu .menu-acc{
    display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:12px 0;
    font-family:var(--font-body);font-size:19px;line-height:1.3;color:var(--navy);background:none;border:0;cursor:pointer;text-align:left;
  }
  #siteMenu .menu-acc .chev{flex:none;width:12px;height:8px;transition:transform .25s var(--ease);}
  #siteMenu .menu-item.is-open .menu-acc .chev{transform:rotate(180deg);}
  #siteMenu .menu-sub{display:none;padding:0 0 14px 2px;}
  #siteMenu .menu-item.is-open .menu-sub{display:block;}
  #siteMenu .menu-sub h4{margin:16px 0 2px;font-family:var(--font-body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);font-weight:700;}
  #siteMenu .menu-sub h4:first-child{margin-top:6px;}
  #siteMenu .menu-sub a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:17px;line-height:1.3;color:var(--navy);}
  #siteMenu .menu-sub a.menu-all{font-weight:700;margin-top:10px;}
  #siteMenu .menu-extras{display:flex;padding-top:28px;}
  #siteMenu .menu-extras .btn{flex:1;min-height:52px;font-size:17px;}

  /* ---- footer ---- */
  .site-footer .container{padding-left:var(--hgutter);padding-right:var(--hgutter);}
  .footer-main{grid-template-columns:1fr 1fr;gap:36px 32px;}
  .footer-col h3{font-size:clamp(20px,3vw,22px);}
  .footer-col a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:15px;}
  .footer-contact p{font-size:15px;}
  .footer-bottom{font-size:14px;}
  .footer-legal{gap:0 24px;}
  .footer-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;font-size:14px;}
  .footer-logo{display:inline-flex;align-items:center;min-height:44px;}
}

@media (max-width:699px){
  .footer-main{grid-template-columns:1fr;gap:28px;}

  /* Header controls (<=699): fluid so logo + Get In Touch + menu button always fit one row. The wordmark and CTA shrink with the
     viewport; the button BOXES stay 44px (tap target). Below 360px the CTA is dropped from the bar (it lives in the menu). */
  :root{--gutter:24px;--hgutter:24px;--hdr-logo-h:clamp(26px,7.6vw,36px);}
  .site-header .header-inner{gap:clamp(6px,2.2vw,12px);}
  .site-header .logo,#siteMenu .menu-top .logo{font-size:clamp(15px,4.4vw,20px);gap:clamp(6px,2.2vw,10px);}
  .site-header .header-cta{padding:0 clamp(10px,3.2vw,18px);font-size:clamp(12.5px,3.6vw,15px);}
}
@media (max-width:479px){:root{--hgutter:20px;}}
@media (max-width:359px){.site-header .header-cta{display:none;}}