/* BroadbandSwitch.uk chrome v10.1 (8 November 2026): phone bottom bar, docked accessibility
   launcher, homepage hero label, footer folds on phones.
   Loaded by nav-v8.js on every page; most pages also link it in <head>. */

/* ---------- bottom bar (phones only; bbs-chrome.js shows and hides it) ---------- */
.bbs-bar{position:fixed;left:0;right:0;bottom:0;z-index:390;display:flex;align-items:center;gap:6px;
  padding:6px max(10px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(255,251,247,0) 0%,rgba(255,251,247,.92) 30%,#FFFBF7 100%);
  pointer-events:none}
.bbs-bar[hidden]{display:none!important}
.bbs-bar > *{pointer-events:auto}
.bbs-bar .bsw-pc2--bar{flex:1 1 auto;min-width:0;margin:0}
/* The AA disc docks over this gap.  bsw-pc2.css sizes the slot 38px for other bars; this bar's
   disc is 44px and sits at left:21px, so the slot is 54px and the field starts clear of it.
   (Three classes here so this wins over the two-class rule in bsw-pc2.css, which loads later.) */
.bbs-bar .bsw-pc2--bar .bsw-pc2__slot{width:54px;height:38px;flex:none}
.bbs-bar .bsw-pc2--bar .bsw-pc2__field{padding-left:2px}
.bbs-bar .bsw-pc2--bar .bsw-pc2__input{min-width:0}
.bbs-bar__close{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #EFDCE6;background:#fff;color:#6B5E6D;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 6px 16px -8px rgba(18,10,20,.4)}
.bbs-bar__close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.bbs-bar__close:focus-visible{outline:3px solid rgba(229,5,113,.45);outline-offset:2px}
@media (max-width: 359px){
  /* 320px phones: a few pixels back from everything else so a full postcode still fits the field at 16px */
  .bbs-bar{gap:4px}
  .bbs-bar .bsw-pc2--bar{gap:4px}
  .bbs-bar .bsw-pc2--bar .bsw-pc2__btn{padding:11px 10px;font-size:13px}
  .bbs-bar .bsw-pc2--bar .bsw-pc2__slot{width:46px}
  .bbs-bar .bsw-pc2--bar .bsw-pc2__input{letter-spacing:0}
  .bbs-bar__close{width:32px;height:32px}
}
@media (min-width: 768px){ .bbs-bar{display:none!important} }
@media (prefers-reduced-motion: reduce){ .bbs-bar{transition:none} }
/* the site search overlay sits inside the header's stacking context, so the bar would float
   over it; keep the bar out of the way while the search is open */
html.bsu-search-open .bbs-bar{display:none!important}

/* ---------- homepage "Meet the editors" bubble: not on phones ---------- */
@media (max-width: 767px){ #editorBubble{display:none!important} }

/* ---------- footer link columns fold on phones (bbs-chrome.js adds the buttons) ----------
   120 footer links stacked one column deep made the footer 7,000px tall on a phone.  Each
   column keeps its links in the page (crawlers and find-in-page see them) and opens on tap. */
@media (max-width: 767px){
  footer .footer-main .footer-grid{gap:0}
  footer .footer-main .footer-grid + .footer-grid{margin-top:10px}
  footer .footer-col.bbs-fold > .footer-col-head{margin-bottom:0;padding-bottom:0}
  footer .footer-col.bbs-fold .bbs-fold__btn{display:flex;align-items:center;gap:9px;width:100%;padding:15px 0;margin:0;
    background:none;border:0;font:inherit;font-size:11.5px;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:pointer}
  footer .footer-col.bbs-fold .bbs-fold__btn::after{content:"";flex:none;margin-left:auto;margin-right:6px;width:9px;height:9px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.75;transition:transform .2s ease}
  footer .footer-col.bbs-fold.is-open .bbs-fold__btn::after{transform:rotate(225deg)}
  footer .footer-col.bbs-fold .bbs-fold__btn:focus-visible{outline:3px solid rgba(255,184,211,.6);outline-offset:-3px;border-radius:6px}
  footer .footer-col.bbs-fold:not(.is-open) > ul{display:none}
  footer .footer-col.bbs-fold.is-open > ul{padding:6px 0 14px}
}
/* footer trust strip on phones: footer-v8.css squeezes the accountability sentence into one row with
   an ellipsis below 391px, so on a 375px or 390px phone it read "Editorial acc...".  Let it wrap. */
@media (max-width: 390px){
  footer .footer-trust-inner{flex-wrap:wrap}
  footer .trust-lead{align-items:flex-start}
  footer .trust-lead > div:last-child{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ---------- homepage hero box (form.bsw-pc inside .bsw-hero): label always visible ----------
   The homepage keeps its own form and script (it drives the Stickee widget on the page).
   This only changes how the field reads: the instruction becomes a label that sits
   above the field inside the same box, the placeholder shows the format, and the
   button drops under the field when the box is narrow.

   Selectors use .bsw-pc in the chain so they beat the homepage's later inline rules
   (.bsw-hero .bsw-pc__field { display:flex } and absolute pin), which otherwise leave
   the visible label sitting on top of the pin. */
.bsw-hero .bsw-pc .bsw-pc__field{display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"label label label" "pin input clear";align-items:center;column-gap:10px;padding:8px 10px 2px 14px}
.bsw-hero .bsw-pc .bsw-pc__field > svg{grid-area:pin;position:static;left:auto;width:20px;height:20px}
.bsw-hero .bsw-pc .bsw-pc__label{grid-area:label;display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--h-accent,#C10460);line-height:1.2;margin:0 0 2px}
.bsw-hero .bsw-pc .bsw-pc__input{grid-area:input;padding:6px 0 10px 0;font-size:1.12rem}
.bsw-hero .bsw-pc .bsw-pc__clear{grid-area:clear;margin-right:0}
.bsw-hero .bsw-pc{container-type:inline-size}
@container (max-width: 470px){
  .bsw-hero .bsw-pc .bsw-pc__row{flex-direction:column;align-items:stretch}
  .bsw-hero .bsw-pc .bsw-pc__btn{padding:16px 22px}
}
@media (max-width: 767px){ .bsw-hero .bsw-pc .bsw-pc__input{font-size:18px} }