/* bcs-2026.css — accessibility, Core Web Vitals and modern-browser layer.
   Loads AFTER global.css and responsiveness.css. Additive only: no existing rule is overridden
   except where it is required to fix a measurable defect (CLS, focus visibility, tap targets). */

:root{
  --bcs-red:#8A0000;
  --bcs-red-dark:#6b0000;
  --bcs-gold:#BF9F32;
  --bcs-ink:#1a1a1a;
  --bcs-focus:#0b5fff;
}

/* ---------- Skip link (WCAG 2.2 bypass blocks) ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--bcs-red);color:#fff;padding:.75rem 1.25rem;
  font-weight:600;text-decoration:none;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;outline:3px solid var(--bcs-gold);outline-offset:2px;}

/* ---------- Visible focus for keyboard users (WCAG 2.4.11) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--bcs-focus);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- Layout shift guards (CLS) ---------- */
img,video,iframe{max-width:100%;height:auto;}
img[width][height]{height:auto;}
.card-loc img,.fleet-slide img,.blog-slide img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.partner-col img{aspect-ratio:2/1;object-fit:contain;}
.testimonial-card{min-height:180px;}

/* ---------- Menu toggle buttons (were <i role=button>) ----------
   Position/colour/size stay with #openMenu and #closeMenu in responsivness.css;
   this only strips default <button> chrome so they look identical to the old <i>. */
.menu-toggle,.menu-close{
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
  font:inherit;line-height:1;-webkit-appearance:none;appearance:none;
}

/* Touch-opened dropdowns (CSS-only version relies on :hover / :focus-within) */
.submenu-open > .submenu{display:block!important;}

/* ---------- Tap targets (min 44x44, WCAG 2.5.8) ---------- */
.navbar a,.footer-list a,.social-icons a{display:inline-block;min-height:32px;}
.social-icons a{min-width:44px;min-height:44px;line-height:44px;text-align:center;}

/* ---------- Service-promise cards replacing the old testimonial slots ---------- */
.testimonial-card h4{color:var(--bcs-red);margin:0 0 .5rem;font-size:1.05rem;}
.testimonial-card p{margin:0;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- Forced colours / high contrast ---------- */
@media (forced-colors:active){
  .skip-link,.btn,.btn-brown{border:1px solid ButtonText;}
}

/* ---------- Print ---------- */
@media print{
  header,.header,footer,.footer,.partners,#scroll-to-top-btn,.btn-box{display:none!important;}
  body{background:#fff;color:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
}

/* ---------- Content-visibility for long pages (paint cost) ---------- */
.partners,.blog-sec,.testimonials{content-visibility:auto;contain-intrinsic-size:1px 600px;}


/* ---------- Hub pages (/charters/, /locations/) ---------- */
.bcs-hub-intro{padding:2.5rem 0 1rem;}
.bcs-hub-intro h1{color:var(--bcs-red);margin:.5rem 0 1rem;}
.bcs-crumb{font-size:.85rem;margin-bottom:.5rem;opacity:.8;}
.bcs-crumb a{color:var(--bcs-red);}
.bcs-hub{padding:1rem 0 3rem;}
.bcs-hub-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.bcs-hub-card{border:1px solid #e6e6e6;border-top:4px solid var(--bcs-gold);border-radius:8px;
  padding:1.25rem;background:#fff;display:flex;flex-direction:column;gap:.6rem;}
.bcs-hub-card h2{font-size:1.15rem;margin:0;}
.bcs-hub-card h2 a{color:var(--bcs-red);text-decoration:none;}
.bcs-hub-card h2 a:hover{text-decoration:underline;}
.bcs-hub-card p{margin:0;flex:1;font-size:.95rem;line-height:1.55;}
.bcs-hub-card .outline-btn{align-self:flex-start;}

/* ---------- Related / internal-link blocks ---------- */
.bcs-related{padding:2rem 0;border-top:1px solid #ececec;}
.bcs-related h2{font-size:1.2rem;color:var(--bcs-red);margin:0 0 .4rem;}
.bcs-related > .container > p{margin:0 0 1rem;font-size:.95rem;}
.bcs-related-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.bcs-related-list li a{display:block;padding:.7rem .9rem;border-left:3px solid var(--bcs-gold);
  background:#faf9f6;color:var(--bcs-ink);text-decoration:none;font-size:.92rem;line-height:1.45;border-radius:0 4px 4px 0;}
.bcs-related-list li a:hover{background:#f3efe4;}
.bcs-related-list li a strong{color:var(--bcs-red);display:block;}

/* ---------- Footer column layout ----------
   global.css/responsivness.css assume these are flex containers (gap, flex-basis,
   flex-grow, and a max-1080px flex-direction:column) but never declare display:flex.
   The .flex utility class is now on the markup; these rules cover wrapping and the
   breakpoints the original stylesheets don't reach. */
#footer .footer-head{flex-wrap:wrap;}
/* base flex-basis (23/23/31/23) plus three 2% gaps overflows to 106% and wraps the
   4th column onto its own row -- trim the basis so all four sit on one line. */
@media (min-width:1081px){
  #footer .footer-head > div:not(:nth-child(3n+0)){flex-basis:21%;}
  #footer .footer-head > div:nth-child(3n+0){flex-basis:29%;}
}
#footer .footer-wrapper-col{flex-wrap:wrap;}
#footer .wrapper-left{gap:8%;flex-wrap:wrap;}
#footer .wrapper-left > .wrapper-col{flex:1 1 28%;min-width:150px;}
#footer .wrapper-div{gap:8%;flex-wrap:wrap;}
#footer .wrapper-div > .wrapper-col{flex:1 1 40%;min-width:150px;}
#footer .icon-div{align-items:flex-start;}
#footer .footer-bottom-wrapper{flex-wrap:wrap;gap:1rem;}
/* "Do it the Cooee Way!" sits in .footer-bottom, which no rule colours -- it was
   rendering in the default dark text on the near-black footer, i.e. invisible. */
#footer .footer-bottom h4{color:var(--secondery);}
@media (max-width:767px){
  #footer .wrapper-left,#footer .wrapper-div{flex-direction:column;gap:0;}
}

/* ---------- Location planning + FAQ sections ---------- */
.bcs-local{padding:2.25rem 0;}
.bcs-local .container{max-width:900px;}
.bcs-local h2{color:var(--bcs-red);font-size:1.4rem;margin:0 0 .75rem;}
.bcs-local h3{font-size:1.05rem;margin:1.5rem 0 .4rem;color:var(--bcs-ink);}
.bcs-local p{margin:0;line-height:1.65;}
.bcs-faq{background:#faf9f6;border-top:1px solid #ececec;border-bottom:1px solid #ececec;}
.bcs-faq h3{color:var(--bcs-red);}