/*
 * Mobile + tablet header (<= 1199px).
 *
 * Replaces the inset Bootstrap dropdown with a full-height side sheet and adds
 * a pinned Call / Book action bar. The desktop header (>= 1200px) is untouched:
 * every rule below lives inside the media query.
 *
 * Loaded last in head.html so it wins over the WordPress-era stylesheets.
 */

@media only screen and (max-width: 1199px) {

  /* ---------------------------------------------------------------
     1. Retire the old mobile chrome
     --------------------------------------------------------------- */

  /* The Bootstrap collapse panel, the Cherry image and the social list that
     lived inside it are desktop-only now. The sheet below replaces them. */
  #masthead .header-bottom .navbar-navigation { display: none !important; }

  /* Top-bar "Book Now" pill: superseded by the pinned action bar. */
  #masthead .right-content > ul { display: none !important; }

  /* Old three-bar toggler is replaced by .mnav-toggle in header.html. */
  #masthead .navbar-toggler { display: none !important; }

  /* ---------------------------------------------------------------
     2. Header bar
     --------------------------------------------------------------- */

  header#masthead { padding: 0; }
  #masthead .header-bottom { padding: 8px 0; }

  /* The header sits transparent over the hero photo, which is light enough in
     places to swallow a white logo. A soft top-down scrim restores contrast
     without turning the bar into a solid block. */
  header#masthead::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 118px;
    background: linear-gradient(180deg, rgba(4, 16, 38, .58), rgba(4, 16, 38, 0));
    pointer-events: none;
    z-index: -1;
  }
  /* Once the header goes solid white on scroll the scrim would darken it. */
  header#masthead.navbar-sticky::before { opacity: 0; }

  #masthead .navbar-logo a img { max-width: 190px; height: auto; }

  /* Menu button: 48x48 with a visible label. The word roughly doubles
     engagement over a bare hamburger and gets the target to size. */
  .mnav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .2s ease;
  }
  .mnav-toggle:hover { background: rgba(255, 255, 255, .26); }
  .mnav-toggle .mnav-toggle-bar {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }
  .mnav-toggle .mnav-toggle-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    margin-top: 2px;
  }
  /* On the solid white sticky bar the white-on-white button would vanish. */
  .navbar-sticky .mnav-toggle { background: #EEF2F9; }
  .navbar-sticky .mnav-toggle:hover { background: #E2E9F5; }
  .navbar-sticky .mnav-toggle .mnav-toggle-bar { background: #12325E; }
  .navbar-sticky .mnav-toggle .mnav-toggle-label { color: #12325E; }

  /* Utility strip (phone / directions / social) shows from 768px up. Its taps
     were well under the minimum. */
  .header-top .custom-menu-class ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---------------------------------------------------------------
     3. Pinned action bar
     --------------------------------------------------------------- */

  /* Two permanent targets, thumb-reachable on every page. Dental traffic
     splits between "call someone now" and "book it myself"; each gets one. */
  .mnav-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #E2E7F1;
    box-shadow: 0 -6px 20px rgba(2, 33, 80, .10);
  }
  .mnav-actionbar .mnav-ab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease;
  }
  .mnav-actionbar .mnav-ab svg { width: 17px; height: 17px; flex: none; }
  .mnav-actionbar .mnav-ab--call { background: #EAF1FB; color: #123A72; }
  .mnav-actionbar .mnav-ab--call:hover { background: #DCE8F8; color: #123A72; text-decoration: none; }
  .mnav-actionbar .mnav-ab--book { background: #5585CC; color: #fff; }
  .mnav-actionbar .mnav-ab--book:hover { background: #4372B8; color: #fff; text-decoration: none; }

  /* Keep the bar from covering the end of the footer. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* ---------------------------------------------------------------
     4. Sheet
     --------------------------------------------------------------- */

  /* Above the a11y toolbar (9999) so it can't be punched through. */
  .mnav-scrim {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(6, 17, 38, .55);
    opacity: 0;
    transition: opacity .28s ease;
  }
  .mnav-scrim.is-open { opacity: 1; }

  .mnav-sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    width: 88%;
    max-width: 360px;
    background: #fff;
    box-shadow: -12px 0 34px rgba(2, 33, 80, .22);
    transform: translateX(101%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  .mnav-sheet.is-open { transform: translateX(0); }
  /* Tablets have room for a wider panel; phones do not. */
  @media (min-width: 768px) { .mnav-sheet { max-width: 420px; } }
  /* display:flex above would otherwise beat the UA rule for [hidden]. */
  .mnav-sheet[hidden] { display: none; }

  .mnav-sheet-top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #EDF1F8;
  }
  /* Brand mark is a white SVG built for the photo header; invert it on white. */
  .mnav-sheet-top img { max-width: 150px; height: auto; filter: brightness(0); }
  .mnav-close {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #F2F5FA;
    color: #111722;
    cursor: pointer;
  }
  .mnav-close:hover { background: #E6ECF6; }
  .mnav-close svg { width: 17px; height: 17px; }

  /* Social proof, straight from hugo.toml params. */
  .mnav-proof {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: #FBFCFE;
    border-bottom: 1px solid #EDF1F8;
    font-size: 12.5px;
    color: #4A5468;
  }
  .mnav-proof-stars { color: #E0A32B; font-size: 12px; letter-spacing: 1px; }
  .mnav-proof b { color: #111722; font-weight: 700; }

  .mnav-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* --- intent tiles: what people actually opened the menu to do --- */
  .mnav-intents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 16px 10px;
  }
  .mnav-intents .mnav-intent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
  }
  .mnav-intents .mnav-intent:hover { text-decoration: none; }
  .mnav-intents .mnav-intent b { font-size: 14px; font-weight: 600; line-height: 1.2; }
  .mnav-intents .mnav-intent small { font-size: 10.5px; line-height: 1.3; opacity: .78; }
  .mnav-intents .mnav-intent--call { background: #EAF1FB; color: #123A72; }
  .mnav-intents .mnav-intent--call:hover { background: #DCE8F8; color: #123A72; }
  .mnav-intents .mnav-intent--book { background: #5585CC; color: #fff; }
  .mnav-intents .mnav-intent--book:hover { background: #4372B8; color: #fff; }
  /* Emergency Dentist is the highest-urgency page on the site and currently
     sits two invisible taps deep under Services. */
  .mnav-intents .mnav-intent--emergency {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    background: #FBEDEB;
    color: #8E322B;
  }
  .mnav-intents .mnav-intent--emergency:hover { background: #F7E1DE; color: #8E322B; }
  .mnav-intents .mnav-intent--emergency b { flex: 1; }

  /* --- navigation --- */
  .mnav-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border-top: 1px solid #EDF1F8;
  }
  .mnav-list > li { border-bottom: 1px solid #EDF1F8; }
  .mnav-row { display: flex; align-items: stretch; }
  /* Split target: the label navigates to the section page, the chevron
     expands it. Neither action can trap you. */
  .mnav-list .mnav-row > a {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    font-size: 15.5px;
    font-weight: 500;
    color: #111722;
    text-decoration: none;
  }
  .mnav-list .mnav-row > a:hover { background: #F7FAFD; color: #123A72; text-decoration: none; }
  .mnav-list .mnav-row > a.is-current { color: #123A72; font-weight: 600; box-shadow: inset 3px 0 0 #5585CC; }
  .mnav-expand {
    width: 56px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid #F1F4FA;
    background: transparent;
    color: #5A6478;
    cursor: pointer;
  }
  .mnav-expand svg { width: 15px; height: 15px; transition: transform .22s ease; }
  .mnav-expand[aria-expanded="true"] { background: #F5F8FD; color: #123A72; }
  .mnav-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

  .mnav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #F8FAFD;
    border-top: 1px solid #EDF1F8;
  }
  .mnav-sub[hidden] { display: none; }
  .mnav-list .mnav-sub a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 16px 0 28px;
    font-size: 14px;
    color: #3C465C;
    text-decoration: none;
    border-bottom: 1px solid #EEF2F8;
  }
  .mnav-list .mnav-sub a:hover { background: #EEF4FC; color: #123A72; text-decoration: none; }
  .mnav-list .mnav-sub li:last-child a { border-bottom: 0; }
  .mnav-list .mnav-sub a.is-overview { font-weight: 600; color: #123A72; }
  .mnav-list .mnav-sub a.is-current { font-weight: 600; color: #123A72; }
  /* Mark sits in the indent gutter so its label stays flush with siblings. */
  .mnav-list .mnav-sub a.has-mark { padding-left: 5px; }
  .mnav-submark { width: 15px; height: 15px; flex: none; margin-right: 8px; color: #0E202F; }

  /* --- Cherry: a card that sells it, not a logo floating on its own --- */
  .mnav-finance {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 16px 0;
    padding: 14px 15px;
    background: #fff;
    border: 1px solid #E1E8F4;
    border-radius: 13px;
  }
  .mnav-finance img { width: auto; height: 21px; align-self: flex-start; }
  .mnav-finance p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #4A5468; }
  .mnav-finance .mnav-finance-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 9px;
    background: #F1F5FB;
    color: #123A72;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
  }
  .mnav-finance .mnav-finance-cta:hover { background: #E4EDF9; color: #123A72; text-decoration: none; }

  /* --- practice details --- */
  .mnav-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 16px;
    padding: 14px 15px;
    background: #F6F8FC;
    border-radius: 13px;
  }
  .mnav-scroll .mnav-card > a,
  .mnav-scroll .mnav-card > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #3C465C;
    text-decoration: none;
  }
  .mnav-scroll .mnav-card > a:hover { color: #123A72; text-decoration: none; }
  .mnav-card svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #8B95AC; }
  .mnav-card strong { color: #123A72; font-weight: 600; }
  .mnav-hours { margin: 0; padding: 0; list-style: none; }
  .mnav-hours li { display: flex; justify-content: space-between; gap: 12px; }
  .mnav-hours span:first-child { color: #8B95AC; }

  .mnav-social {
    display: flex;
    gap: 20px;
    padding: 0 16px 22px;
  }
  .mnav-social > a { color: #A6B0C4; font-size: 19px; line-height: 1; }
  .mnav-social > a:hover { color: #5585CC; }

  /* Lock the page behind the sheet. */
  body.mnav-open { overflow: hidden; }
}

/* Desktop keeps the header it has. */
@media only screen and (min-width: 1200px) {
  .mnav-toggle,
  .mnav-actionbar,
  .mnav-scrim,
  .mnav-sheet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav-sheet,
  .mnav-scrim,
  .mnav-expand svg { transition: none !important; }
}