/* ================================================================
   bebop · site.css
   shared by every page. each page links this AFTER its own <style>,
   so rules here win when two rules are equally specific.
   if you change this file, bump ?v= in every page's link so
   browsers fetch the new version (e.g. site.css?v=2).
   ================================================================ */


/* ---- scrolling banner ----
   the text itself lives in site.js (BANNER_TEXT) */
.top-banner {
  position: fixed; top: 0; left: 0; z-index: 1050;
  width: 100%; height: 34px; line-height: 34px;
  padding: 0 1rem 0 44px;
  background-color: #0000cc; color: #ffffff;
  font-family: Arial, sans-serif; font-size: 1.2rem;
  overflow: hidden; white-space: nowrap;
}
.scrolling-text {
  display: inline-block; white-space: nowrap; color: #ffffff;
  animation: scroll-left 30s linear infinite;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* space either side of each star */
.banner-star { display: inline-block; margin: 0 1.1em; }
.top-banner:hover .scrolling-text,
.top-banner.is-paused .scrolling-text { animation-play-state: paused; }

/* blue strip behind the pause button, so the moving text fades out under it */
.top-banner::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: 48px; height: 34px;
  background: linear-gradient(to right, #0000cc 36px, rgba(0, 0, 204, 0));
}
/* round acid green pause / play button (people need a way to stop moving text) */
.banner-pause {
  position: absolute; left: 10px; top: 5px; z-index: 2;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: #ccff00; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.banner-pause svg { display: block; }
.banner-pause .icon-play { display: none; }
.top-banner.is-paused .banner-pause .icon-pause { display: none; }
.top-banner.is-paused .banner-pause .icon-play { display: block; }
.banner-pause:hover { background: #ffffff; }

/* nothing moves for people who turn off motion, so no button needed */
@media (prefers-reduced-motion: reduce) {
  .scrolling-text { animation: none !important; }
  .banner-pause, .top-banner::before { display: none; }
  .top-banner { padding-left: 1rem; }
}


/* ---- text only screen readers hear ---- */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}


/* ---- keyboard focus ----
   a clear ring for people using Tab; mouse and touch users never see it */
a:focus-visible,
button:focus-visible,
.accordion .accordion-button:focus-visible {
  outline: 3px solid #0000cc !important;
  outline-offset: 3px !important;
}
/* on blue backgrounds the ring is green or white so it shows */
.cookie-banner a:focus-visible,
.cookie-banner button:focus-visible { outline-color: #ccff00 !important; }
/* the banner clips anything outside it, so this ring sits close */
.top-banner .banner-pause:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px !important; }
/* keep whatever has focus clear of the fixed banner and header */
html { scroll-padding-top: 120px; }
@media (max-width: 768px) { html { scroll-padding-top: 180px; } }


/* ---- cookie banner ---- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  background: #0000cc; color: #ffffff; border-radius: 20px;
  font-size: 1rem; line-height: 1.5;
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner p { margin: 0; padding: 0; flex: 1; color: #ffffff; }
.cookie-banner a { color: #ccff00 !important; text-decoration: underline; }
.cookie-banner a:hover { color: #ffffff !important; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner .booking-link {
  font-size: 1rem !important; padding: 0.35rem 1.2rem !important; cursor: pointer;
  border-color: #ffffff; box-shadow: 2px 2px 0 #ffffff; color: #0000cc;
  background: #ffffff;
}
.cookie-settings { cursor: pointer; }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; left: 12px; right: 12px; bottom: 12px; }
  .cookie-actions .booking-link { flex: 1; text-align: center; }
}


/* ---- text sizes ----
   two sizes for words people read; headings and buttons are unchanged.
   the root is 75% (12px for most people) instead of a fixed 12px, so anyone
   who has set bigger text in their browser or phone settings gets it */
html { font-size: 75%; }

/* reading text: 16px */
.profile-bio,
.legal p,
.legal li,
.cookie-banner p { font-size: 1.3333rem !important; line-height: 1.5 !important; }

/* small print: 14px */
.notes-plain .info-box-wide,
.footer-legal,
.legal .updated { font-size: 1.1667rem !important; line-height: 1.45 !important; }
.tag,
.contact-info { font-size: 1.1667rem !important; }
@media (max-width: 768px) {
  .team-name { font-size: 1.1667rem !important; }
}


/* ---- price list ---- */
/* reading size, like the rest of the site */
.accordion-body { font-size: 1.3333rem !important; line-height: 1.4 !important; }

/* each price gets a fixed width instead of a share of the screen,
   so 3-digit prices never touch; the service name takes the rest */
.accordion-body .row.no-gutters > .col-8,
.accordion-body .row.no-gutters > .col-auto { flex: 1 1 0; max-width: none; min-width: 0; padding-right: 0.5em; }
.accordion-body .row.no-gutters > .col-1 { flex: 0 0 2.9em; max-width: 2.9em; }
.accordion-body .row.no-gutters > .col-2 { flex: 0 0 5.8em; max-width: 5.8em; }
.accordion-body .row.no-gutters > .col-4 { flex: 0 0 11.6em; max-width: 11.6em; }
/* a little air between services */
.accordion-body .row.no-gutters { margin-bottom: 0.35em !important; }
/* service names a little heavier than the prices. Arial only comes in
   regular and bold, so "medium" is regular with a hairline outline */
.accordion-body .service-name { font-weight: 400; -webkit-text-stroke: 0.3px currentColor; }
/* "STYLIST LEVEL 1 2 3 4" in a blue pill. the negative margins keep the
   numbers exactly above the price columns while the pill sticks out a bit */
.accordion-body .row.no-gutters:has(> .col-auto) {
  background: #0000cc; color: #ffffff; border-radius: 999px;
  margin: 0 -0.9em 0.7em !important; padding: 0.3em 0.9em;
}

/* phones: services priced by level get the name on its own line and the
   prices underneath, lined up with the 1 2 3 4 heading */
@media (max-width: 768px) {
  .accordion-body .row.no-gutters:has(> .col-1),
  .accordion-body .row.no-gutters:has(> .col-2) { justify-content: flex-end; margin-bottom: 0.3em !important; }
  /* smaller gap between groups of services (e.g. cuts vs curly cuts) */
  .accordion-body .w-100.my-3 { margin-top: 0.35em !important; margin-bottom: 0.35em !important; }
  .accordion-body .row.no-gutters:has(> .col-1) > .col-8,
  .accordion-body .row.no-gutters:has(> .col-2) > .col-8 { flex: 0 0 100%; padding-right: 0; }
  /* single-price services (nails, treatments): name and price on one line,
     the price only as wide as it needs */
  .accordion-body .row.no-gutters > .col-4 { flex: 0 0 auto; width: auto; max-width: none; padding-left: 0.75em; text-align: right !important; }
  /* in a list priced by level, a single price ("Complimentary") goes on the
     line under the name, centred under the 1 2 3 4 columns */
  .accordion-body:has(.col-auto) .row.no-gutters:has(> .col-4) { justify-content: flex-end; margin-bottom: 0.3em !important; }
  .accordion-body:has(.col-auto) .row.no-gutters:has(> .col-4) > .col-8 { flex: 0 0 100%; padding-right: 0; }
  .accordion-body:has(.col-auto) .row.no-gutters > .col-4 { flex: 0 0 10.4em; width: 10.4em; padding-left: 0; text-align: center !important; }
  /* slightly narrower price columns, and "STYLIST LEVEL" a touch smaller,
     so the heading fits on one line in the pill */
  .accordion-body .row.no-gutters > .col-1 { flex: 0 0 2.6em; max-width: 2.6em; }
  .accordion-body .row.no-gutters > .col-2 { flex: 0 0 5.2em; max-width: 5.2em; }
  .accordion-body .row.no-gutters > .col-auto { font-size: 0.875em; }
}

/* phones: the price heading says just "LEVEL" so it fits on one line */
@media (max-width: 768px) {
  .level-word { display: none; }
}


/* ---- homepage intro ----
   sits at the top of the white box. the gap below it matches the gap
   between every other section (56px desktop, 40px phone) */
.intro {
  font-size: 2.3rem; line-height: 1.3; color: #0000cc;
  -webkit-text-stroke: 0.3px currentColor;
  margin: 0 0 56px; padding: 0;
}
@media (max-width: 768px) {
  .intro { font-size: 1.6rem; margin-bottom: 40px; }
}

/* ---- homepage first screen ----
   the reviews only load after "accept". until then the line-up area is
   shorter, so the white box (and the intro) rises into the first screen
   instead of leaving it empty. site.js adds .reviews-on after "accept" */
html:not(.reviews-on) .hero {
  min-height: 0 !important;
  height: max(0px, calc(72vh - 260px));
  padding: 0 !important;
}
@media (max-width: 768px) {
  html:not(.reviews-on) .hero { height: max(0px, calc(72vh - 310px)); }
}


/* ---- stylist levels (match the LEVEL columns in the price list) ---- */
.team-level {
  color: #ccff00; font-size: 1.1667rem; line-height: 1.3;
  margin: 0 0 6px;
}
.team-card:hover .team-level { color: #0000cc; }
.profile-role:has(+ .profile-level) { margin-bottom: 2px !important; }
.profile-level {
  font-size: 1.3333rem; line-height: 1.4; color: #0000cc;
  margin: 0 0 16px; padding: 0;
}
@media (min-width: 768px) {
  .profile-wrapper .col-md-7 .profile-level { text-align: center; }
}
@media (max-width: 768px) {
  .profile-header .profile-level { text-align: center; }
}