/* =======================================================
   Interactive elements: carousels, focus states, a11y
   Loaded after sections.css, so later rules win.
   ======================================================= */

/* ---------- Contrast corrections (all measured against WCAG AA) ---------- */
.hero__card-meta{color:rgba(255,255,255,.78);}
.cta-banner p{color:#fff;}
/* 4.76:1 on the #F9F9F9 testimonial card */
.testimonial__stars{color:#916806;letter-spacing:2px;}

/* ---------- Visible keyboard focus everywhere ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.hero a:focus-visible,.cta-banner a:focus-visible,.site-footer a:focus-visible{
  outline-color:#fff;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;}

/* ---------- Screen-reader-only text ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Carousel ---------- */
.carousel{position:relative;}
.carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  gap:var(--gap,24px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-bottom:6px;
  --gap:24px;
  --per-view:4;
}
.carousel__track::-webkit-scrollbar{display:none;}
.carousel__track > *{scroll-snap-align:start;}

.carousel__nav{display:flex;gap:10px;align-self:end;justify-self:end;}
.carousel__btn{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(28,25,23,.18);
  background:var(--surface);
  color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
.carousel__btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff;}
.carousel__btn:disabled{opacity:.35;cursor:default;}
/* display:inline-flex above would otherwise beat the UA [hidden] rule */
.carousel__btn[hidden]{display:none;}
.carousel__nav:not(:has(.carousel__btn:not([hidden]))){display:none;}

/* Testimonials carousel shows one quote at a time */
.testimonial-grid .carousel__track{--per-view:1;}
.testimonial-grid .testimonial{height:100%;}

/* Blog carousel */
#blog .carousel__track{--per-view:3;}

@media (max-width:1040px){
  #services .carousel__track{--per-view:2;}
  #blog .carousel__track{--per-view:2;}
}
@media (max-width:620px){
  #services .carousel__track,#blog .carousel__track{--per-view:1;}
}

/* The section head holds the nav buttons on the right */
.section-head--with-nav{align-items:end;}

/* ---------- Mobile navigation (the toggle previously had no styles) ---------- */
@media (max-width:900px){
  .site-header__inner{flex-wrap:wrap;}
  .primary-nav{
    display:none;
    flex-basis:100%;
    order:3;
  }
  .primary-nav.is-open{display:block;padding-top:8px;}
  .primary-nav.is-open ul{flex-direction:column;align-items:stretch;gap:2px;}
  .primary-nav.is-open a{display:block;padding:12px 16px;}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(28,25,23,.18);background:var(--surface);color:var(--ink);
  }
  .nav-toggle[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .service-card,.post-card,.btn,.carousel__btn{transition:none;}
  .service-card:hover,.post-card:hover,.btn:hover{transform:none;}
}

/* Per-carousel item counts (the track owns the layout now) */
.carousel__track--services{--per-view:4;}
.carousel__track--blog{--per-view:3;}
.carousel__track--testimonials{--per-view:1;}
@media (max-width:1040px){.carousel__track--services,.carousel__track--blog{--per-view:2;}}
@media (max-width:620px){.carousel__track--services,.carousel__track--blog{--per-view:1;}}

/* ---------- Flanking arrows + dots (testimonials) ---------- */
.carousel__btn--flank{
  position:absolute;
  top:0;bottom:34px;margin:auto 0;   /* 34px reserves the dots row so the
                                        arrows centre on the card, not the column */
  width:38px;height:38px;z-index:2;
}
.carousel__btn--prev{left:0;}
.carousel__btn--next{right:0;}
.carousel__btn--flank svg{width:15px;height:15px;}

.carousel__dots{display:flex;align-items:center;justify-content:center;gap:8px;height:12px;margin-top:22px;}
.carousel__dots button{
  width:6px;height:6px;padding:0;border:none;border-radius:50%;
  background:#D8DFDD;cursor:pointer;
  transition:width .15s ease,height .15s ease,background .15s ease;
}
.carousel__dots button[aria-current="true"]{width:8px;height:8px;background:var(--accent);}
.carousel__dots:empty{display:none;}

@media (max-width:620px){.carousel__btn--flank{width:34px;height:34px;}}