/* ==== tbh-footer-v4 ==== */

@media (max-width:979px){
  /* ---- 1. merged Patient & hospital information: balanced 2 columns ---- */
  footer .footer-nav-merged{
    columns:2 !important;
    column-gap:14px !important;
    column-fill:balance !important;
  }
  footer .footer-nav-merged li{ break-inside:avoid !important; }
  footer .footer-nav-merged .footer-subgroup{
    break-before:auto !important;
    margin-top:6px !important;
  }

  /* ---- 2/3. one compact introduction, tighter section rhythm ---- */
  footer{ padding:18px 0 10px !important; }
  footer .footer-logo{ height:62px !important; }
  footer .footer-brand{ margin-bottom:6px !important; }
  footer .footer-desc{ margin:0 0 6px !important; line-height:1.4 !important; }
  footer .footer-socials{ margin:0 0 6px !important; }
  footer .footer-socials img{ height:44px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:6px !important; }
  footer .footer-inner > div + div{ padding-top:6px !important; margin-bottom:6px !important; }

  /* ---- 9. typography: one grey token, tighter uppercase labels ---- */
  footer .footer-col-title{
    font-size:10.5px !important;
    letter-spacing:.08em !important;
    margin:0 0 5px !important;
    padding-bottom:4px !important;
  }
  footer .footer-col-title::after{ width:24px !important; }
  footer .footer-subgroup{
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    margin:4px 0 2px !important;
  }
  footer .footer-nav a{ padding:4px 0 !important; font-size:12.5px !important; line-height:1.3 !important; }
  footer .footer-nav li{ margin:0 !important; }
  footer .footer-desc,
  footer .newsletter-desc,
  footer .footer-contact-row,
  footer .legal-primary,
  footer .legal-more-body,
  footer .footer-credit{ color:#5E6A79 !important; }   /* one grey token */

  /* ---- 5. contact: perfect icon column, more icon-to-text air ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    gap:11px !important;                 /* slightly more air */
    align-items:start !important;
    margin:0 0 4px !important;
    line-height:1.35 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; margin-top:2px !important;
  }

  /* ---- 6/7/8. bottom: tighter, trust pulled up ---- */
  footer .footer-bottom{ padding-top:7px !important; margin-top:7px !important; gap:5px !important; }
  footer .legal-primary{ margin:0 0 4px !important; }
  footer .legal-more > summary,
  footer .links-more > summary{ min-height:32px !important; }
  footer .newsletter-desc{ margin:0 0 5px !important; }
  footer .newsletter-button{ min-height:40px !important; padding:8px 14px !important; margin:0 0 4px !important; }
  .footer-trust{
    padding:8px 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    gap:4px 12px !important;
  }
  .footer-trust::before{ margin-bottom:0 !important; }

  /* translate banner: restored to its original TOP position (the bottom-chip
     experiment made it float over page content everywhere — reverted). Its
     original stylesheet rules now apply unmodified. */
}

/* ==== tbh-footer-v5 ==== */

@media (max-width:979px){
  /* BRAND: one compact introduction */
  footer .footer-logo{ height:56px !important; }
  footer .footer-brand{ margin-bottom:5px !important; }
  footer .footer-desc{ font-size:12.5px !important; line-height:1.4 !important; margin:0 0 5px !important; }
  footer .footer-socials img{ height:40px !important; }
  footer .footer-socials{ margin:0 0 4px !important; }

  /* CONTACT: tighter rows on one grid */
  footer .footer-contact-row{ margin:0 0 2px !important; font-size:12.5px !important; line-height:1.32 !important; }

  /* bottom: final tighten */
  footer .footer-bottom{ padding-top:6px !important; margin-top:6px !important; }
  footer .legal-primary{ font-size:11px !important; line-height:1.45 !important; }
  footer .newsletter-desc{ font-size:11.5px !important; }
  footer .newsletter-button{ min-height:40px !important; font-size:13px !important; }
  footer .newsletter-fineprint{ font-size:10px !important; }
  .footer-trust{ padding-top:6px !important; }
}

/* ==== tbh-footer-v6 ==== */

@media (max-width:979px){
  /* ---- 1/2/9. ONE grid system for BOTH merged sections ---- */
  footer .footer-nav-services,
  footer .footer-nav-merged{
    columns:2 !important;
    column-gap:16px !important;
    column-fill:balance !important;
    margin:0 !important;
  }
  footer .footer-nav-services li,
  footer .footer-nav-merged li{
    break-inside:avoid !important;
    margin:0 !important;
  }
  /* subgroup labels behave identically in both grids */
  footer .footer-nav-services .footer-subgroup,
  footer .footer-nav-merged .footer-subgroup{
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    line-height:1.3 !important;
    margin:7px 0 3px !important;
  }
  footer .footer-nav-services li:first-child.footer-subgroup,
  footer .footer-nav-merged li:first-child.footer-subgroup{ margin-top:0 !important; }
  /* identical rows, identical baseline */
  footer .footer-nav-services a,
  footer .footer-nav-merged a{
    display:block !important;
    padding:4px 0 !important;
    font-size:12.5px !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
  }
  footer .footer-subgroup-spacer{ display:none !important; }   /* no uneven gaps */

  /* ---- 9. one heading system ---- */
  footer .footer-col-title{
    font-size:10.5px !important;
    letter-spacing:.07em !important;
    line-height:1.2 !important;
    margin:0 0 6px !important;
    padding-bottom:4px !important;
  }
  footer .footer-col-title::after{ width:24px !important; }
  /* same padding + same divider for every section */
  footer .footer-inner > div + div{
    padding-top:8px !important;
    margin-bottom:8px !important;
  }

  /* ---- 3. compact introduction ---- */
  footer{ padding:16px 0 8px !important; }
  footer .footer-logo{ height:52px !important; }
  footer .footer-brand{ margin-bottom:4px !important; }
  footer .footer-desc{ margin:0 0 4px !important; line-height:1.4 !important; }
  footer .footer-socials{ margin:0 0 2px !important; }
  footer .footer-socials img{ height:38px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:4px !important; }

  /* ---- 4. contact on one vertical grid, phones grouped ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    gap:12px !important;                 /* a touch more icon-to-text air */
    align-items:start !important;
    margin:0 0 3px !important;
    line-height:1.35 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; margin-top:2px !important;
  }

  /* ---- 6. legal 10px closer to contact ---- */
  footer .footer-bottom{ padding-top:6px !important; margin-top:0 !important; }
  footer .legal-primary{ margin:0 0 3px !important; }

  /* ---- 7. trust: less air above, evenly spaced links ---- */
  .footer-trust{
    padding:4px 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
    gap:2px 18px !important;
  }
  .footer-trust::before{ margin:0 0 1px !important; }
  .footer-trust a{ padding:4px 0 !important; }

  /* ---- 5. floating buttons never cover the newsletter ---- */
  body.footer-in-view .whatsapp-fab,
  body.footer-in-view .book-fab{
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==== tbh-footer-v7 ==== */

@media (max-width:979px){
  /* ---- 1. BRANDING: logo is the strongest element; badge shares its width ---- */
  footer .footer-logo{ height:59px !important; width:auto !important; }   /* 52 -> 59 (+13%) */
  footer .footer-brand{ margin-bottom:3px !important; }                    /* tighter under logo */
  footer .footer-desc{ margin:0 0 5px !important; }
  footer .footer-socials{ margin:0 0 2px !important; }
  /* the CQC badge is an <img> inside a bare <a>, not .footer-socials —
     target it by its alt text so it reliably matches the logo width */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{
    width:197px !important;          /* same width as the logo: one cohesive block */
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    margin-top:2px !important;
  }

  /* ---- 2/3. ONE grid system. Stop "SURGICAL PROCEDURES" wrapping,
       which was making the right column 13px heavier than the left. ---- */
  footer .footer-nav-services .footer-subgroup,
  footer .footer-nav-merged .footer-subgroup{
    font-size:10px !important;
    letter-spacing:.03em !important;
    line-height:1.35 !important;
    margin:7px 0 3px !important;
    padding-right:20px !important;   /* room for the chevron, so no wrap */
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  footer .footer-nav-services li:first-child .footer-subgroup,
  footer .footer-nav-merged li:first-child .footer-subgroup{ margin-top:0 !important; }
  /* identical rows + rhythm in BOTH sections */
  footer .footer-nav-services,
  footer .footer-nav-merged{ columns:2 !important; column-gap:16px !important; column-fill:balance !important; }
  footer .footer-nav-services a,
  footer .footer-nav-merged a{
    display:block !important;
    padding:4px 0 !important;
    font-size:12.5px !important;
    line-height:1.32 !important;
  }

  /* ---- 4. CONTACT: one grid, equal baselines, equal rows ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    column-gap:12px !important;
    align-items:start !important;
    margin:0 0 4px !important;       /* equal spacing between every row */
    line-height:1.35 !important;
  }
  footer .footer-contact-row:last-child{ margin-bottom:0 !important; }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; align-self:start !important;
    margin-top:3px !important;       /* optical baseline with the first text line */
  }

  /* ---- 6. LEGAL: lighter grey, still AA (4.56:1) ---- */
  footer .legal-primary,
  footer .footer-credit,
  footer .legal-more-body,
  footer .legal-more > summary,
  footer .links-more > summary{ color:#667283 !important; }
  footer .footer-bottom{ padding-top:5px !important; margin-top:0 !important; }

  /* ---- 7. TRUST: 12px closer, centred, evenly distributed ---- */
  .footer-trust{
    padding:0 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top:-8px !important;      /* pulls it ~12px closer to the newsletter */
    gap:2px 20px !important;
  }
  .footer-trust::before{ margin:0 !important; }

  /* ---- 5. floating controls never touch the newsletter CTA ---- */
  body.footer-in-view .book-fab{ width:44px !important; padding:0 !important; }
  body.footer-in-view .book-fab span{ display:none !important; }
}

/* ==== tbh-footer-v8 ==== */

@media (max-width:979px){
  /* ---- 3. ONE underline system.
     The heading rule was a border-bottom on an inline-block, so it
     stretched to the text: "SERVICES" got 59px, "PATIENT & HOSPITAL
     INFORMATION" got 207px — that long line under the introduction.
     Replace with a fixed-width ::after so every heading matches. ---- */
  footer .footer-col-title{
    border-bottom:0 !important;
    padding-bottom:0 !important;
    margin:0 0 7px !important;
  }
  footer .footer-col-title::after{
    content:"" !important;
    display:block !important;
    width:26px !important;
    height:2px !important;
    background:var(--tbh-cyan, #00A9CE) !important;
    border-radius:8px!important;
    margin-top:5px !important;
  }
  /* no full-width section dividers — the underlines carry the rhythm */
  footer .footer-inner > div + div{ border-top:0 !important; padding-top:10px !important; }

  /* ---- 1. logo up again, less air beneath ---- */
  footer .footer-logo{ height:66px !important; width:auto !important; }   /* 59 -> 66 (+12%) */
  footer .footer-brand{ margin-bottom:2px !important; }
  footer .footer-desc{ margin:0 0 4px !important; }

  /* ---- 2. CQC badge steps back so it supports the logo ---- */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{
    width:172px !important;         /* 197 -> 172 (-13%) */
    height:auto !important;
    display:block !important;
    margin:0 0 2px !important;
  }

  /* ---- 5. contact: +2px icon-to-text, rows still on one grid ---- */
  footer .footer-contact-row{ column-gap:14px !important; }   /* 12 -> 14 */

  /* ---- 6. "More" sits 8px closer to the newsletter ---- */
  footer .links-more{ margin-bottom:-8px !important; }
  footer .footer-bottom > div:last-child{ margin-top:0 !important; }

  /* ---- 7. trust heading 10px closer to the fine print ---- */
  .footer-trust{ margin-top:-18px !important; }

  /* DOCKED STATE: the site declares these fixed !important, which beats
     inline styles — so docking is done with a class + !important instead.
     While .fab-docked, buttons are absolute (top set by JS via CSS var)
     and scroll away with the page. */
  .book-fab.fab-docked, .whatsapp-fab.fab-docked, #toTop.fab-docked{
    position:absolute !important;
    top:var(--fab-dock-top, auto) !important;
    bottom:auto !important;
  }

  /* ---- 8. Floating controls on ONE baseline.
     Measured: Book Now sat at 19px while WhatsApp sat at 12px and
     Back-to-top at 11px — raising Book further would have deepened the
     misalignment, not fixed it. All three now share a 14px bottom and
     are optically centred on the same line. ---- */
  .book-fab, .whatsapp-fab, #toTop{
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .book-fab, .whatsapp-fab{ height:44px !important; }
  #toTop{ height:44px !important; }
}

/* ==== tbh-footer-v9 ==== */

@media (max-width:979px){
  /* 2. air below the Privacy Policy line before the trust section */
  /* margin on the <small> collapses through its ancestors' edges;
     padding on the newsletter column does not */
  footer .newsletter-fineprint{ margin-bottom:0 !important; }
  footer .newsletter-col{ padding-bottom:14px !important; }
  /* the trust strip carries INLINE styles (margin:24px 0 18px; padding:18px 0)
     — override them so the fine-print's 14px sets the gap, and the strip
     hugs the page end instead of adding 42px of its own */
  .footer-trust{
    margin:0 0 0 !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  /* 3. trust: with the fineprint spacing fixed, ease its own top gap;
        equal spacing between the three links */
  .footer-trust{
    margin-top:-6px !important;
    gap:2px 22px !important;
    justify-content:center !important;
    /* docked buttons scroll away, so the huge clearance isn't needed;
       keep a modest floor + safe area */
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 4. CQC badge -10%, still aligned to the logo's left edge */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{ width:155px !important; }   /* 172 -> 155 */
}

/* ==== tbh-footer-v10 ==== */

@media (max-width:979px){
  /* 1. CQC badge -6% */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{ width:146px !important; }   /* 155 -> 146 */

  /* 2. accordion chevrons moved 5px INWARD (right: 6px -> 11px),
        identical on every row; padding grows to match so text never
        runs beneath them */
  footer .footer-subgroup{ padding-right:30px !important; position:relative !important; }
  footer .footer-subgroup::after{ right:11px !important; }

  /* 3. contact icon-to-text +2px */
  footer .footer-contact-row{ column-gap:16px !important; }   /* 14 -> 16 */

  /* 5. trust heading 6px closer to the Privacy line */
  footer .newsletter-col{ padding-bottom:8px !important; }    /* 14 -> 8 */

  /* 6. newsletter button: more lateral breathing room, same height */
  footer .newsletter-button{
    padding-left:22px !important;   /* was 14-16 */
    padding-right:22px !important;
    min-height:40px !important;     /* unchanged */
  }
}

/* ==== tbh-nav-split ==== */

/* ============================================================
   DESKTOP NAV: label = link to category page; chevron = the
   dropdown toggle. The chevron keeps .nav-primary-btn so ALL
   existing JS (click toggle, hover-open, Escape, outside-click,
   aria-expanded) binds to it unchanged.
   ============================================================ */
.nav-primary-item{ display:inline-flex; align-items:stretch; position:relative; }
.nav-primary-link{
  display:inline-flex; align-items:center;
  font-family:'Manrope',sans-serif; font-weight:700;
  text-transform:uppercase; text-decoration:none;
  color:#FFFFFF; position:relative; cursor:pointer;
  padding:10px 4px 10px 15px; font-size:0.83rem; letter-spacing:0.07em;
  transition:color .2s ease;
}
/* the turquoise rule lives under the LABEL */
.nav-primary-link::after{
  content:''; position:absolute; bottom:5px; left:15px; right:0;
  height:1.5px; background:#00A9CE; border-radius:8px;
  transition:background .25s ease, opacity .25s ease;
}
.nav-primary-link:hover{ color:#DFF6FA; }
.nav-primary-link:hover::after{ background:#7EEAF2; }
.nav-primary-link:focus-visible{ outline:2px solid #00A9CE; outline-offset:2px; border-radius:8px; }
/* chevron button: compact tap target, no second underline */
.nav-chev-btn{ padding:10px 12px 10px 6px !important; }
.nav-chev-btn::after{ display:none !important; }
.nav-chev-btn:hover .dd-chev{ opacity:1; }
.nav-chev-btn .dd-chev{ opacity:.85; transition:opacity .2s ease, transform .25s ease; }
.nav-chev-btn:focus-visible{ outline:2px solid #00A9CE; outline-offset:2px; border-radius:8px; }
@media (max-width:1279px){
  .nav-primary-link{ padding:14px 3px 14px 11px; font-size:0.82rem; letter-spacing:0.03em; }
  .nav-primary-link::after{ left:11px; }
}
@media (max-width:1099px){
  .nav-primary-link{ padding:13px 2px 13px 8px; font-size:0.76rem; letter-spacing:0.02em; }
  .nav-primary-link::after{ left:8px; }
}

/* ==== tbh-acc-split-css ==== */

/* MOBILE MENU: category name = link to its landing page; chevron =
   the expand/collapse toggle. Two separate touch targets. */
.tbh-acc .tbh-acc-split{ display:flex !important; align-items:stretch !important; padding:0 !important; cursor:default !important; }
.tbh-acc .tbh-acc-name{
  flex:1 1 auto; display:flex; align-items:center;
  min-height:46px; padding:0 8px 0 15px;
  font:inherit; font-size:14.5px; font-weight:inherit;
  color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.tbh-acc .tbh-acc-name:active{ background:#EDF2F8; }
.tbh-acc .tbh-acc-toggle{
  flex:0 0 52px; display:flex; align-items:center; justify-content:center;
  min-height:46px; background:transparent; border:0;
  border-left:1px solid #6E8CB0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tbh-acc .tbh-acc-toggle:active{ background:#EDF2F8; }
.tbh-acc .tbh-acc-toggle .tbh-acc-chev{ width:15px; height:15px;
  transition:transform .18s cubic-bezier(.4,0,.2,1); }
.tbh-acc .tbh-acc-toggle[aria-expanded="true"] .tbh-acc-chev{ transform:rotate(180deg); }
.tbh-acc .tbh-acc-name:focus-visible,
.tbh-acc .tbh-acc-toggle:focus-visible{ outline:2px solid #005EB5; outline-offset:-2px; }