/* ==== tbh-mobile-cta-hierarchy ==== */

/* ============================================================
   MOBILE HEADER — CTA HIERARCHY
   1. Book Now  — primary, stretches to fill the free width
   2. Call      — secondary 46px square icon button
   3. Menu      — secondary 46px square icon button

   Selectors use `a.nav-cta[href]` deliberately. An earlier block
   (#tbh-ds) sets `header.nav .nav-right>a.nav-cta .book-short
   {display:none!important}` at specificity (0,4,2); a rule written
   as `.nav-right > .nav-cta …` is only (0,4,1) and silently loses
   however late it appears. The attribute selector buys the margin.

   `display` is deliberately NOT set on .nav-cta here, so the
   existing "hide header CTAs while the menu is open" rules keep
   working. Those are re-asserted below at matching specificity.
   ============================================================ */
@media (max-width:979px){

  /* the container must be allowed to grow, or a flex child inside it
     cannot stretch. An earlier block pins this to flex:0 0 auto. */
  header.nav .nav-right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin-left:auto !important;
  }

  /* ---------- 1. PRIMARY: Book Now ---------- */
  header.nav .nav-right > a.nav-cta[href]{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:118px !important;   /* never shrinks below a legible label */
    max-width:none !important;
    overflow:hidden !important;   /* clip rather than let nowrap text escape */
    height:46px !important;
    min-height:46px !important;
    padding:0 16px !important;
    border-radius:12px!important;
    background:#0B63CE !important;
    border:1px solid #0B63CE !important;
    box-shadow:0 4px 12px -2px rgba(11,99,206,.34) !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
  }
  header.nav .nav-right > a.nav-cta[href] .book-short{
    display:inline !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-weight:800 !important;
    font-size:16px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  header.nav .nav-right > a.nav-cta[href] .book-long{ display:none !important; }
  header.nav .nav-right > a.nav-cta[href] svg{ display:none !important; }
  header.nav .nav-right > a.nav-cta[href]::before{
    width:19px !important; height:19px !important;
    flex:0 0 19px !important; margin:0 !important;
  }
  header.nav .nav-right > a.nav-cta[href]::after{ content:none !important; display:none !important; }
  header.nav .nav-right > a.nav-cta[href]:active{
    transform:scale(.985) !important;
    box-shadow:0 2px 6px -2px rgba(11,99,206,.42) !important;
  }

  /* ---------- the logo must yield before anything can collide ----------
     .brand carries an inline padding:7px 13px, and .brand-logo is
     flex-shrink:0 in the base sheet. Together that made the row
     unshrinkable, so at narrow widths the buttons had nowhere to go. */
  header.nav .brand{
    flex:0 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  header.nav .brand-logo{
    flex-shrink:1 !important;
    min-width:0 !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  /* ---------- 2 & 3. SECONDARY: square icon buttons ---------- */
  header.nav .nav-right > a.nav-cta-call[href],
  header.nav .nav-right > #navToggle,
  header.nav .nav-right > .nav-toggle{
    flex:0 0 46px !important;
    width:46px !important; min-width:46px !important;
    height:46px !important; min-height:46px !important;
    padding:0 !important; margin:0 !important;
    border-radius:12px!important;
    align-items:center !important;
    justify-content:center !important;
    background:#FFFFFF !important;
    border:1.5px solid #C9D9E8 !important;
    box-shadow:none !important;
  }
  header.nav .nav-right > a.nav-cta-call[href] svg{
    width:20px !important; height:20px !important; margin:0 !important;
    stroke:#00214E !important; fill:none !important;
  }
  header.nav .nav-right > a.nav-cta-call[href] span{ display:none !important; }
  header.nav .nav-right > #navToggle span,
  header.nav .nav-right > .nav-toggle span{ background:#00214E !important; }
  header.nav .nav-right > a.nav-cta-call[href]:active,
  header.nav .nav-right > #navToggle:active{
    background:#EDF2F8 !important; transform:scale(.96) !important;
  }

  /* ---------- preserve: header CTAs hide while the menu is open ---------- */
  body.nav-menu-open header.nav .nav-right > a.nav-cta[href],
  body.nav-menu-open header.nav .nav-right > a.nav-cta-call[href],
  body:has(#navMenu.open) header.nav .nav-right > a.nav-cta[href],
  body:has(#navMenu.open) header.nav .nav-right > a.nav-cta-call[href],
  body:has(#navToggle[aria-expanded="true"]) header.nav .nav-right > a.nav-cta[href],
  body:has(#navToggle[aria-expanded="true"]) header.nav .nav-right > a.nav-cta-call[href]{
    display:none !important;
  }
}

@media (max-width:360px){
  header.nav .nav-right{ gap:6px !important; flex:1 1 auto !important; min-width:0 !important; }
  header.nav .nav-right > a.nav-cta[href]{
    height:42px !important; min-height:42px !important; padding:0 12px !important; gap:7px !important;
    min-width:104px !important;
  }
  header.nav .nav-right > a.nav-cta[href] .book-short{ display:inline !important; font-size:14.5px !important; }
  header.nav .nav-right > a.nav-cta[href]::before{ width:17px !important; height:17px !important; flex:0 0 17px !important; }
  header.nav .nav-right > a.nav-cta-call[href],
  header.nav .nav-right > #navToggle,
  header.nav .nav-right > .nav-toggle{
    flex:0 0 42px !important; width:42px !important; min-width:42px !important;
    height:42px !important; min-height:42px !important;
  }
}