/* ============================================================
   The phone number and the booking button are present at every
   width, and the client portal sits directly under the booking
   button as a matching secondary button.

   The bug this started from: extra.css hid the button below
   1359px, and the fixed call bar that carries it only appears at
   640px and below, so 641 to 1359 had no booking CTA anywhere in
   the chrome. On a 1440px display that band starts at 110% zoom;
   on a 1280px laptop it was broken with no zoom at all.

   Keeping both means the four-part row has to genuinely fit.
   Measured on the live header: brand 351, nav 468, phone 151,
   button 222, toggle 44, gaps 24. Every breakpoint below comes
   out of those numbers rather than a guess.
   ============================================================ */

/* ---- 1. The full navigation needs 1264px of row.
   The header content box is the window minus its gutter, capped
   at 1520px. 1264 is available at 1440 exactly, with zero to
   spare, so the nav collapses to the menu button below 1520 and
   the phone and button take the space instead. This is the one
   real cost of the change: between 1360 and 1519 the menu is now
   a hamburger where it used to be a full nav. ---- */
@media(max-width:1519px){
  .navtoggle{display:inline-flex;order:3}
  .site-nav{display:none;width:100%;order:4}
  .site-nav[data-open="true"]{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:0;
    border-top:1px solid var(--rule);padding-top:var(--s-3)}
  .site-nav li{width:100%}
  .site-nav a{display:block;width:100%;padding:var(--s-4) 0;min-height:var(--touch-min)}
  .hdr-call{order:2}
}

/* ---- 2. Both, every width down to the call bar. Neither may
   shrink and neither may be dropped. ---- */
@media(min-width:641px){
  .hdr-call{display:flex}
  .hdr-call .tel{display:flex}
  .hdr-call .btn{display:inline-flex}
  .hdr-call,.navtoggle{flex:none}
}

/* ---- 3. Below 1024 the row is monogram 82 + phone 151 +
   button 190 + toggle 44 + gaps. The wordmark is the only part
   that can give, so it does, and the TPA monogram carries the
   brand from here down. ---- */
@media(min-width:641px) and (max-width:1023px){
  .brand__name{display:none}
  .hdr-call .btn{padding-left:var(--s-4);padding-right:var(--s-4);font-size:var(--t-s)}
  .brand__mark svg{height:30px}
}

/* ---- 4. At 641 the 48px gutter leaves 6px. It comes in to 24,
   which puts 61px back. The portal strip takes the same gutter,
   or the two rows stop lining up. ---- */
@media(min-width:641px) and (max-width:767px){
  .hdr,.tpa-portalbar .wrap{padding-left:24px;padding-right:24px}
}

/* ---- 5. At 640 and below the theme's fixed call bar takes over
   and carries both actions, pinned to the bottom of the screen
   where a thumb reaches them. Untouched here on purpose. ---- */


/* ============================================================
   The client portal strip.

   Hangs off the bottom of the header and is pinned with it, so it
   is on every page at every width and never scrolls away. Header
   and strip sit in one sticky box rather than two, which is what
   keeps them from coming unglued mid-scroll.

   The link is given the booking button's exact width and sits
   directly beneath it, so the two read as a deliberate stacked
   pair rather than a loose link in a band. Two numbers do that:

     --tpa-btnw   the booking button's width, 222 or 190 once it
                  tightens below 1024
     --tpa-btnoff how far the button's right edge sits in from the
                  content edge. Zero while the button is last in
                  the row, 68 once the menu button is beside it,
                  which is the toggle's 44 plus the row's 24 gap

   The strip's container has to match the header's on both counts,
   max-width and gutter, or the columns drift apart. That is why
   max-width is restated here and why the 24px gutter above names
   both. Measured centre to centre at 1560, 1520, 1519, 1023 and
   641: zero pixels out at every one.
   ============================================================ */

:root{--tpa-btnw:222px;--tpa-btnoff:0px}
@media(max-width:1519px){:root{--tpa-btnoff:68px}}
@media(max-width:1023px){:root{--tpa-btnw:190px}}

.tpa-stickytop{position:sticky;top:0;z-index:40;background:var(--ground)}
.site-header{position:static;border-bottom:0}

.tpa-portalbar{background:var(--ink-100);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tpa-portalbar .wrap{max-width:1520px;display:flex;justify-content:flex-end;
  align-items:center;padding-top:6px;padding-bottom:6px}

.tpa-portalbar__link{
  width:var(--tpa-btnw);margin-right:var(--tpa-btnoff);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--sans);font-size:var(--t-m);font-weight:600;
  letter-spacing:var(--ls-m);text-transform:uppercase;
  color:var(--green-700);text-decoration:none;
  border:1px solid var(--green-500);border-radius:var(--radius);
  background:transparent;min-height:30px;
  /* the same three properties, duration and easing the theme's own
     .btn transitions on, so it moves like the rest of the system */
  transition:background-color var(--m-quick) var(--e-out),
             border-color var(--m-quick) var(--e-out),
             color var(--m-quick) var(--e-out)}
.tpa-portalbar__link svg{transition:transform var(--m-quick) var(--e-out)}
.tpa-portalbar__link:hover{background:var(--green-700);
  border-color:var(--green-700);color:var(--ground)}
.tpa-portalbar__link:hover svg{transform:translateX(3px)}
/* .btn-primary presses 1px on active. This does the same. */
.tpa-portalbar__link:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){
  .tpa-portalbar__link,.tpa-portalbar__link svg{transition:none}
  .tpa-portalbar__link:hover svg{transform:none}
}

/* Contrast, measured on the strip's own background:
   green-700 label 8.1:1, green-500 border 3.48:1, and cream on
   green-700 when filled 9.07:1. Against 4.5 for the text and 3
   for the border. --rule-strong was the first choice for the
   border and came in at 1.82:1, which is why it is not used. */

/* No booking button to sit under once the call bar has it, so the
   portal centres in the strip and takes a full touch target. */
@media(max-width:640px){
  .tpa-portalbar .wrap{justify-content:center}
  .tpa-portalbar__link{width:auto;margin-right:0;
    padding:0 var(--s-5);min-height:var(--touch-min)}
}