/*!
 * Becks Beauty — home page
 * Nails and lashes, Peterborough.
 *
 * Requires bb.css, components.css and icons.css. Everything here is either
 * brand chrome the framework has no opinion about (the floating header, the
 * service menu, the editorial section rhythm) or a deliberate override of a
 * framework default. It never redefines a design token — change those in
 * bb.css so the whole site moves together.
 *
 * Contents:
 *   1. Page shell
 *   2. Floating header
 *   3. Primary navigation (purple selectors)
 *   4. Hero
 *   5. Section rhythm & editorial type
 *   6. Intro / studio
 *   7. Service menu
 *   8. Feature row
 *   9. Gallery
 *  10. Testimonials
 *  11. Booking band
 *  12. Footer
 */

/* ==========================================================================
   1. Page shell
   ========================================================================== */

body {
  background: var(--bb-bg);
}

/* The header is fixed, so the first section has to clear it by hand. The
   value is the header's own height plus its top offset — keep the three in
   step if you change the padding on .header-bar. */
:root {
  --header-h: 4.75rem;
  --header-gap: 1rem;

  /* The floating bar sits a little wider than the content it floats over, so
     its edges stand just outside the text column and it reads as chrome above
     the page rather than as one more column in the same measure.

     --content-max has to stay in step with the .size-* class the sections
     use — they are all .size-1280 at the moment. Below about 1400px the
     viewport is narrower than either value, so the two line up again on their
     own and the overhang simply stops applying. */
  --content-max: 1280px;
  --header-overhang: 2.5rem;

  /* The framework's own hook for this: bb.css applies
     `scroll-margin-top: var(--bb-scroll-offset, 0px)` to every [id] at zero
     specificity, so setting the token here is all that is needed to stop
     anchor targets landing underneath the fixed header. */
  --bb-scroll-offset: calc(var(--header-h) + var(--header-gap) + var(--bb-space-4));
}

/* Overriding --bb-max is how the framework's own .size-* classes set a
   container width, so this widens the bar without any new width machinery.
   Used in place of .size-1280 on the header's .line. */
.header-line {
  --bb-max: calc(var(--content-max) + var(--header-overhang) * 2);
}

.page-top {
  padding-top: calc(var(--header-h) + var(--header-gap));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   2. Floating header
   --------------------------------------------------------------------------
   Detached from the top edge and from both sides, so the page shows through
   underneath it. It sits above the hero rather than pushing it down.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--bb-z-nav);
  padding-block: var(--header-gap);
  pointer-events: none;   /* Let the gutters either side stay clickable. */
}

/* Only the rounded card itself takes clicks; the gutters either side of it and
   the strip above and below stay transparent to the page underneath. */
.header-bar {
  pointer-events: auto;
}

.header-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bb-space-4);
  min-height: var(--header-h);
  padding: 0.55rem 0.75rem 0.55rem 1.25rem;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--bb-shadow-1);
  transition: background var(--bb-speed) var(--bb-ease),
    box-shadow var(--bb-speed) var(--bb-ease),
    border-color var(--bb-speed) var(--bb-ease);
}

/* The blur is what makes the bar read as glass rather than as a flat panel,
   but a translucent bar over scrolling text is unreadable without it — so the
   background only goes translucent where the blur is actually supported. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header-bar {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* Added by js/home.js once the page has scrolled past the hero's first
   screenful: the bar tightens up and gains a stronger edge. */
.site-header.is-scrolled .header-bar {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-shadow-2);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-scrolled .header-bar {
    background: rgba(255, 255, 255, 0.86);
  }
}

/* --- Wordmark ------------------------------------------------------------ */

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--bb-accent);        /* Off-black charcoal. */
}

.brand:hover {
  color: var(--bb-primary);
}

.brand-mark {
  font-family: var(--bb-font-wordmark);
  font-size: 1.2rem;
  /* 700, not 600: Futura ships only Medium and Bold on macOS and is first in
     the stack, so a 600 would be synthetically emboldened there and look
     subtly wrong next to the real Bold everyone else gets. */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* letter-spacing is added after the final letter too, which leaves a gap
     that makes the lockup look mis-set. Pull it back by exactly one step. */
  margin-right: -0.3em;
}

.brand-sub {
  font-family: var(--bb-font-wordmark);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
  margin-right: -0.22em;
}

.header-cta {
  flex: 0 0 auto;
}

/* ==========================================================================
   3. Primary navigation — purple background on the selected item
   ========================================================================== */

.nav-list a {
  padding: 0.55rem 1rem;
  border-radius: var(--bb-radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--bb-speed) var(--bb-ease),
    color var(--bb-speed) var(--bb-ease);
}

/* Hover and keyboard focus get a light purple wash. */
.nav-list a:hover,
.nav-list a:focus-visible {
  background: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  color: var(--bb-primary);
}

/* The selected page gets the solid purple pill. This replaces the framework's
   underline treatment outright — the box-shadow reset is what removes it. */
.nav-list .is-active > a,
.nav-list .is-open > a {
  background: var(--bb-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

.nav-list .is-active > a:hover,
.nav-list .is-open > a:hover {
  background: var(--bb-primary-dark);
  color: #fff;
}

/* --- Dropdown ------------------------------------------------------------ */

.submenu {
  border-radius: var(--bb-radius-lg);
  padding: var(--bb-space-2);
}

.submenu a {
  border-radius: var(--bb-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.submenu a:hover,
.submenu a:focus-visible {
  background: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  color: var(--bb-primary);
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 768px) {
  /* The framework drops .top-nav-menu onto its own row; inside the floating
     bar that row needs to sit inside the rounded card, not spill out of it. */
  .top-nav-menu {
    padding-inline: 0;
    padding-top: var(--bb-space-2);
    border-top: 1px solid var(--bb-border);
    margin-top: var(--bb-space-1);
  }

  .nav-list a {
    border-radius: var(--bb-radius);
    padding: 0.7rem 0.75rem;
    border-bottom: 0;
  }

  .nav-list .is-active > a {
    box-shadow: none;
  }

  .header-cta {
    order: 2;
  }

  .brand-sub {
    display: none;
  }
}

/* ==========================================================================
   4. Hero
   --------------------------------------------------------------------------
   Light, not a photograph behind a scrim: a pale lilac wash with two soft
   radial blooms. Cheap to render, always on brand, and nothing to art-direct.
   ========================================================================== */

.hero-home {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 12% -10%,
      color-mix(in srgb, var(--bb-primary) 16%, transparent) 0%, transparent 62%),
    radial-gradient(45rem 35rem at 92% 8%,
      color-mix(in srgb, var(--bb-primary-light) 34%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bb-sand) 0%, var(--bb-bg) 78%);
  padding-block: var(--bb-space-8) var(--bb-space-8);
}

.hero-home-inner {
  display: grid;
  gap: var(--bb-space-7);
  align-items: center;
}

@media (min-width: 769px) {
  .hero-home {
    padding-block: 5.5rem 5rem;
  }

  .hero-home-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--bb-space-8);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: 0 0 var(--bb-space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bb-primary);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.eyebrow-center {
  justify-content: center;
}

.eyebrow-center::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bb-accent);
}

.hero-title em {
  display: block;
  font-style: italic;
  color: var(--bb-primary);
}

.hero-home .lead {
  max-width: 34rem;
  margin-top: var(--bb-space-5);
  font-size: 1.0625rem;
  color: var(--bb-text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  margin-top: var(--bb-space-6);
}

/* Trust row under the hero copy. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-6);
  margin-top: var(--bb-space-7);
  padding-top: var(--bb-space-5);
  border-top: 1px solid var(--bb-border);
}

.hero-meta-item {
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

.hero-meta-value {
  display: block;
  font-family: var(--bb-font-heading);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--bb-accent);
}

/* --- Hero collage -------------------------------------------------------- */

.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-space-4);
}

.hero-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-2);
}

.hero-collage-tall {
  grid-row: span 2;
  aspect-ratio: 3 / 5;
}

.hero-collage-short {
  aspect-ratio: 4 / 3;
}

/* Small floating price card over the collage. */
.hero-badge {
  position: absolute;
  left: -0.75rem;
  bottom: 1.75rem;
  padding: var(--bb-space-4) var(--bb-space-5);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-surface);
  box-shadow: var(--bb-shadow-3);
  text-align: center;
}

.hero-badge-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
}

.hero-badge-value {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--bb-font-heading);
  font-size: 1.5rem;
  color: var(--bb-primary);
}

@media (max-width: 768px) {
  .hero-badge {
    left: auto;
    right: 0.5rem;
    bottom: -1rem;
  }
}

/* ==========================================================================
   5. Section rhythm & editorial type
   ========================================================================== */

.section-narrow {
  max-width: 44rem;
  margin-inline: auto;
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--bb-space-7);
}

.section-head-center {
  margin-inline: auto;
  text-align: center;
}

.section-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bb-accent);
}

.section-head .lead {
  margin-top: var(--bb-space-4);
  margin-bottom: 0;
  color: var(--bb-text-muted);
}

.rule {
  width: 3rem;
  height: 2px;
  margin: var(--bb-space-5) 0 0;
  border: 0;
  background: var(--bb-primary);
}

.section-head-center .rule {
  margin-inline: auto;
}

/* ==========================================================================
   6. Intro / studio
   ========================================================================== */

.studio-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-2);
}

.studio-points {
  list-style: none;
  margin: var(--bb-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--bb-space-4);
}

.studio-points li {
  display: flex;
  gap: var(--bb-space-3);
  align-items: flex-start;
}

.studio-points .icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--bb-primary);
}

/* ==========================================================================
   7. Service menu
   --------------------------------------------------------------------------
   A price list, not a card grid: a high-end salon reads as a menu. Each row
   is name + description on the left, price on the right, with a hairline
   between rows rather than a box around each one.
   ========================================================================== */

.menu-card {
  height: 100%;
  padding: var(--bb-space-6);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-surface);
}

@media (min-width: 769px) {
  .menu-card {
    padding: var(--bb-space-7);
  }
}

.menu-card-head {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  padding-bottom: var(--bb-space-5);
  border-bottom: 2px solid var(--bb-primary);
}

.menu-card-head .icon {
  color: var(--bb-primary);
}

.menu-card-title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--bb-accent);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: var(--bb-space-4);
  padding-block: var(--bb-space-4);
  border-bottom: 1px solid var(--bb-border);
}

.menu-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.menu-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-item-name {
  margin: 0;
  font-family: var(--bb-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bb-text);
}

.menu-item-note {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bb-text-muted);
}

/* The leader dots. A repeating gradient rather than a row of full stops, so
   it stays put when the name or price changes length. */
.menu-item-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  align-self: flex-end;
  margin-bottom: 0.35em;
  background-image: linear-gradient(to right,
    var(--bb-border-strong) 0 2px, transparent 2px 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

.menu-item-price {
  flex: 0 0 auto;
  font-family: var(--bb-font-heading);
  font-size: 1.1875rem;
  font-variant-numeric: tabular-nums;
  color: var(--bb-primary);
}

.menu-item-price small {
  display: block;
  font-family: var(--bb-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
}

.menu-note {
  margin: var(--bb-space-6) 0 0;
  padding-top: var(--bb-space-4);
  border-top: 1px solid var(--bb-border);
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

/* ==========================================================================
   8. Feature row
   ========================================================================== */

.feature {
  text-align: center;
  padding: var(--bb-space-5) var(--bb-space-4);
}

.feature .icon-circle {
  background: color-mix(in srgb, var(--bb-primary) 10%, transparent);
  color: var(--bb-primary);
}

.feature-title {
  margin: var(--bb-space-4) 0 var(--bb-space-2);
  font-family: var(--bb-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bb-accent);
}

.feature p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
}

/* ==========================================================================
   9. Gallery
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bb-space-3);
}

@media (min-width: 769px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bb-space-4);
  }
}

.gallery-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 420ms var(--bb-ease);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}

/* Purple veil on hover, with the caption riding in under it. */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bb-primary) 72%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity var(--bb-speed) var(--bb-ease);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity: 1;
}

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--bb-space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--bb-speed) var(--bb-ease),
    transform var(--bb-speed) var(--bb-ease);
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .gallery-caption {
    transition: none;
  }

  .gallery-item:hover img,
  .gallery-item:focus-visible img {
    transform: none;
  }
}

/* ==========================================================================
   10. Testimonials
   ========================================================================== */

.quote {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.quote .icon {
  color: var(--bb-primary-light);
}

.quote blockquote {
  margin: var(--bb-space-5) 0 0;
  padding: 0;
  border: 0;
  font-family: var(--bb-font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--bb-accent);
}

.quote figcaption {
  margin-top: var(--bb-space-5);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-text-muted);
}

.stars {
  display: inline-flex;
  gap: 0.2rem;
  color: var(--bb-primary);
}

/* ==========================================================================
   11. Booking band
   ========================================================================== */

.book-band {
  border-radius: var(--bb-radius-lg);
  padding: var(--bb-space-8) var(--bb-space-6);
  background:
    radial-gradient(30rem 20rem at 85% 15%,
      color-mix(in srgb, #fff 16%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--bb-primary-dark) 0%, var(--bb-primary) 100%);
  color: #fff;
  text-align: center;
}

.book-band .section-title,
.book-band .eyebrow {
  color: #fff;
}

.book-band p {
  max-width: 34rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.85);
}

.book-band .rule {
  background: rgba(255, 255, 255, 0.5);
  margin-inline: auto;
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bb-space-3);
  margin-top: var(--bb-space-6);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.footer-brand-mark {
  display: block;
  font-family: var(--bb-font-wordmark);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-3);
}

.footer-contact .icon {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--bb-primary-light);
}

.footer-social {
  display: flex;
  gap: var(--bb-space-3);
  margin-top: var(--bb-space-5);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background var(--bb-speed) var(--bb-ease),
    border-color var(--bb-speed) var(--bb-ease);
}

.footer-social a:hover {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  text-decoration: none;
}

/* A white button on the purple band. It cannot be done with .background-white:
   that helper lives in bb.css and .button lives in components.css, which is
   loaded afterwards, so the framework's own background wins on source order. */
.button-on-dark {
  background: #fff;
  color: var(--bb-primary);
}

.button-on-dark:hover {
  background: var(--bb-sand);
  color: var(--bb-primary-dark);
}