/* ==========================================================================
   Bea Nails — shared header + footer (used by index.html and booking.html)
   Layout follows tequilabeauty.com: wordmark left, nav beside it, outlined
   booking button right; dark multi-column footer with centred copyright.
   Header is the white version.
   ========================================================================== */
:root {
  --bn-ink: #1a1614;
  --bn-muted: #5c5652;
  --bn-red: #7d1f1f;
  --bn-red-hover: #5d1614;
  --bn-line: rgba(26, 22, 20, 0.12);
  --bn-foot: #211d1c;
  --bn-header-h: 76px;
  --bn-serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --bn-sans: "Outfit", "Segoe UI", "Avenir Next", sans-serif;
}

/* ---------- header ---------- */
.bn-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--bn-line);
  font-family: var(--bn-sans);
  transition: box-shadow 0.25s ease;
}
.bn-header.is-scrolled { box-shadow: 0 6px 24px rgba(26, 22, 20, 0.08); }

.bn-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  min-height: var(--bn-header-h);
  padding: 0.55rem clamp(1rem, 3vw, 2.75rem);
}

.bn-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  color: var(--bn-ink);
  text-decoration: none;
}
.bn-brand img { display: block; height: 2.7rem; width: auto; }
.bn-brand span {
  font-family: var(--bn-serif);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.bn-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.9vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bn-nav a {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--bn-ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.bn-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.bn-nav a:hover::after,
.bn-nav a:focus-visible::after,
.bn-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* booking button: outlined like the reference, fills on hover */
.bn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.85rem 1.4rem;
  border: 1.5px solid var(--bn-ink);
  border-radius: 6px;
  background: transparent;
  color: var(--bn-ink);
  font-family: var(--bn-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bn-cta svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.bn-cta:hover,
.bn-cta:focus-visible { background: var(--bn-red); border-color: var(--bn-red); color: #fff; }
.bn-cta:hover svg { transform: translateX(3px); }
.bn-cta__short { display: none; }

.bn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bn-ink);
  cursor: pointer;
}
.bn-menu span,
.bn-menu span::before,
.bn-menu span::after {
  display: block;
  position: relative;
  width: 1.4rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, background 0.25s ease;
}
.bn-menu span::before,
.bn-menu span::after { content: ""; position: absolute; left: 0; }
.bn-menu span::before { top: -7px; }
.bn-menu span::after { top: 7px; }
.bn-header.is-open .bn-menu span { background: transparent; }
.bn-header.is-open .bn-menu span::before { transform: translateY(7px) rotate(45deg); }
.bn-header.is-open .bn-menu span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .bn-menu { display: inline-flex; order: 3; }
  .bn-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--bn-line);
    box-shadow: 0 14px 28px rgba(26, 22, 20, 0.08);
    display: none;
  }
  .bn-header.is-open .bn-nav { display: block; }
  .bn-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem clamp(1rem, 3vw, 2.75rem) 1rem; }
  .bn-nav li + li { border-top: 1px solid var(--bn-line); }
  .bn-nav a { display: block; padding: 0.95rem 0; font-size: 1.05rem; }
  .bn-nav a::after { display: none; }
}
@media (max-width: 560px) {
  :root { --bn-header-h: 64px; }
  .bn-header__inner { gap: 0.6rem; }
  .bn-brand img { height: 2.2rem; }
  .bn-brand span { font-size: 1.35rem; }
  .bn-cta { padding: 0.7rem 0.95rem; }
  .bn-cta__long { display: none; }
  .bn-cta__short { display: inline; }
}

/* ---------- footer ---------- */
.bn-footer {
  background: var(--bn-foot);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--bn-sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
}
.bn-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 4.5rem) 3rem;
}
.bn-footer p,
.bn-footer ul,
.bn-footer address { margin: 0; padding: 0; font-style: normal; }
.bn-footer ul { list-style: none; }
.bn-footer li + li { margin-top: 0.7rem; }

.bn-footer__name {
  color: #fff;
  font-family: var(--bn-serif);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.bn-footer__tag { margin-top: 0.6rem !important; color: rgba(255, 255, 255, 0.72); }
.bn-footer .bn-cta {
  margin: 1.6rem 0 0;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}
.bn-footer .bn-cta:hover,
.bn-footer .bn-cta:focus-visible { background: #fff; border-color: #fff; color: var(--bn-ink); }

.bn-footer h2 {
  margin: 0 0 1.1rem;
  padding: 0;
  color: #fff;
  font-family: var(--bn-serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}
.bn-footer a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.bn-footer a:hover,
.bn-footer a:focus-visible { text-decoration-color: #fff; }

.bn-hours li { display: flex; flex-direction: column; }
.bn-hours span { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }

.bn-social { display: flex !important; gap: 0.7rem; flex-wrap: wrap; }
.bn-social li + li { margin-top: 0; }
.bn-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bn-social a:hover,
.bn-social a:focus-visible { background: #fff; border-color: #fff; color: var(--bn-ink); }
.bn-social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.bn-social-note { margin-top: 1rem !important; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }

.bn-footer__legal {
  margin: 0 auto !important;
  max-width: 1320px;
  padding: 1.4rem clamp(1.25rem, 5vw, 4.5rem) 1.8rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 1020px) {
  .bn-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .bn-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bn-footer__grid { grid-template-columns: 1fr; }
}

/* header booking button: solid brand red (same red as the other booking buttons) */
.bn-header .bn-cta { background: var(--bn-red); border-color: var(--bn-red); color: #fff; }
.bn-header .bn-cta:hover,
.bn-header .bn-cta:focus-visible { background: var(--bn-red-hover); border-color: var(--bn-red-hover); color: #fff; }