/* Site chrome shared by every page: header, nav, footer.
   Breakpoints for these selectors live at the bottom of this file. */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 22px var(--pad-x);
  background: #ffffff;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 800;
  line-height: 1;
}

.brand strong {
  color: var(--pink);
  font-weight: inherit;
}

.brand-mark {
  position: absolute;
  display: block;
  border-radius: 999px;
}

/* Sized in em so the confetti dot tracks the wordmark at every breakpoint
   instead of needing a per-breakpoint override. */
.brand-mark-yellow {
  width: 0.78em;
  height: 0.78em;
  top: -0.56em;
  left: 1.12em;
  background: var(--yellow);
}

/* Confetti accent anchored to the header, not to the wordmark's trailing edge,
   so it holds its place as the brand text resizes. */
.header-confetti {
  position: absolute;
  top: 14px;
  left: 48%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--purple);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 46px);
  font-family: var(--display-font);
  font-size: 1.13rem;
  font-weight: 700;
}

.site-nav a[aria-current="page"] {
  /* Current page: ink text with a pink underline (pink text at this size is
     just under the large-text contrast exemption). */
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

/* Flash messages (layouts/_flash.html.erb): booking alerts such as "those
   dates just got booked", login errors, rate-limit notices. Sits at the top
   of <main>, full width, in the site's pill/rounded language. */
.site-flash-wrap {
  padding: 18px var(--pad-x) 0;
  background: #fff;
}

.site-flash {
  max-width: 960px;
  margin: 0 auto 10px;
  padding: 14px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  line-height: 1.45;
}

.site-flash--alert {
  background: var(--no-bg);
  border-color: #ffb8c6;
  color: #b22a47;
}

.site-flash--notice {
  background: var(--ok-bg);
  border-color: #b9ecd1;
  color: #1f7a4d;
}

/* CTA band rendered by _footer.html.erb, so it appears on every page. */
.booking-section {
  display: grid;
  place-items: center;
  gap: 36px;
  min-height: 318px;
  padding: 60px 20px;
  background: var(--purple);
  color: #ffffff;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 130px;
  padding: 36px var(--pad-x);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.04rem;
  font-weight: 600;
}

.site-footer p {
  margin: 0;
}

/* The email address is a single ~287px unbreakable word. The footer's items are
   shrink-to-fit, so their width floors at min-content and overflowed the page
   below ~300px. `anywhere` (not `break-word`) is required: only `anywhere`
   reduces the intrinsic min-content size that the floor is computed from. */
.site-footer a {
  overflow-wrap: anywhere;
  text-decoration: none; /* beats base.css `p a` by specificity; underline on hover only */
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Privacy / Terms links: a third, quieter footer column. */
.site-footer-legal {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Agency credit: a separate black strip below the charcoal footer, so it reads
   as the builder's line rather than part of the client's footer. */
.site-credit {
  padding: 14px var(--pad-x);
  background: #000;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 400;
}

.site-credit p {
  margin: 0;
}

.site-credit a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-credit a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 960px) {
  /* No `align-items: flex-start` here. It dated from when the header stacked
     only below 640px and the nav could wrap beside the wordmark; in the
     761-960px band (iPad portrait) the nav is a single ~58px row, so
     top-aligning just left the wordmark visibly high. Inherit `center`. */

  .header-confetti {
    display: none;
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px 24px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 760px, not the 640px used elsewhere. Measured: the side-by-side row needs
   706px to fit the wordmark (248px) + header gap (24px) + nav row (377px)
   inside the 4vw side padding. Below that the wordmark wrapped to two lines,
   so the stacked layout runs through 760px to clear the band with headroom. */
@media (max-width: 760px) {
  /* Stack the header so the nav links below can stay visible on phones —
     side by side, the wordmark plus a full nav row will not fit. Centring
     both rows keeps the wordmark as the anchor instead of leaving it adrift
     opposite a right-shoved pill. */
  .site-header {
    align-items: center;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 24px 16px 22px;
  }

  /* The wordmark measures ~11.94x its font-size. The vw term keeps it under
     the available width (viewport minus 32px padding) down to ~320px; below
     that it wraps rather than overflowing, since .brand shrink-wraps and its
     text can break. ~1.69rem on a 375px phone, 1.45rem floor at 320px. */
  .brand {
    font-size: clamp(1.45rem, 7.2vw, 1.85rem);
    text-align: center;
  }

  /* Nav links stay reachable on phones rather than being display:none'd with
     no menu to replace them. Links plus the pill fit one centred row from
     ~360px up; narrower than that the pill wraps to its own row. */
  .site-nav {
    justify-content: center;
    gap: 14px 18px;
  }
}

/* iPhone SE class (375px): the three links + pill measure ~348px, a few px
   over the 343px available, so the pill dropped to its own row. A tighter gap
   here plus a slimmer pill (buttons.css, `.site-nav .button-pink`) bring the
   row to ~325px without touching the link size. */
@media (max-width: 400px) {
  /* Small phones (320–400px): the header was 175px tall at 320px (nav on a
     second row, the pill on a third) and ~138px at 360px, over half of the
     first screen. Tighter rows, slightly smaller nav text and a compact pill
     (buttons.css) bring the links and the pill onto one row down to 320px. */
  .site-header {
    gap: 12px;
    padding: 18px 16px 16px;
  }

  .site-nav {
    gap: 10px;
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  /* The CTA band heading reads small on phones once .section-title's clamp
     bottoms out at 2.15rem. Scoped to the band so the homepage/section titles
     keep their size; the vw term lets it breathe up to 3rem on larger phones. */
  .booking-section .section-title {
    font-size: clamp(2.5rem, 11vw, 3rem);
    line-height: 1.08;
  }
}