/* ========================================================
   FONTS
   Swap these @font-face blocks for your own font files.
   Drop files into assets/fonts/ and update the src paths.
   Until then, Google Fonts placeholders are loaded below.
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@1,600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Brand fonts: Bebas Neue (all caps) + Cormorant Garamond semibold italic */
  --font-wordmark: 'Bebas Neue', Impact, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --bg: #0a0a0a;
  --surface: #141414;
  --surface-border: #2a2a2a;
  --text: #f5f5f3;
  --text-muted: #9a9a95;
  --accent: #f5f5f3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Background photo. Swap assets/images/background.jpg to change it.
   The gradient layers on top keep text readable over the image. */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to bottom,
      rgba(6, 10, 26, 0.55) 0%,
      rgba(6, 10, 26, 0.35) 35%,
      rgba(6, 10, 26, 0.80) 100%),
    url('assets/images/background.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- Brand ---------- */
.brand {
  text-align: center;
  margin-bottom: 3.5rem;
}

.brand__mark {
  width: clamp(120px, 26vw, 190px);
  height: auto;
  display: block;
  margin: 0 auto 0.75rem;
}

.brand__name {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: clamp(3.25rem, 11vw, 6rem);
  letter-spacing: 0.06em;
  line-height: 0.9;
  /* Bebas has no lowercase, but be explicit so the shape never depends on markup */
  text-transform: uppercase;
}

/* Optical centring: letter-spacing puts a trailing gap after the final
   letter, so centred text lands half that gap left of true centre. Every
   wide-tracked centred line below compensates with text-indent at half its
   own letter-spacing. */
.brand__sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0.15rem;
  text-indent: 0.11em;
}

/* Address and days share one small-caps treatment so they read as a pair
   beneath the wordmark. */
.brand__address,
.brand__days {
  font-family: var(--font-wordmark);
  font-size: 0.95rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 245, 243, 0.68);
  text-indent: 0.13em;
}

.brand__address {
  display: inline-block;
  /* Desktop breathing room; the mobile block below tightens this back up. */
  margin-top: 2.1rem;
  color: rgba(245, 245, 243, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 243, 0.28);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.brand__address:hover,
.brand__address:focus-visible {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Street and city stay intact; the address only ever breaks between them */
.addr__line {
  white-space: nowrap;
}

/* Days open only — the barbers each keep their own hours, so the booking
   pages are the source of truth for times. */
.brand__days {
  margin-top: 0.8rem;
}

/* ---------- Barber cards ---------- */
.barbers {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.barber-card {
  background: rgba(10, 14, 30, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 245, 243, 0.14);
  border-radius: 4px;
  padding: 2rem 1.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.barber-card:hover {
  background: rgba(10, 14, 30, 0.6);
  border-color: rgba(245, 245, 243, 0.4);
  transform: translateY(-4px);
}

/* Circle, but sized large enough that the whole photo still reads —
   the images are full scene shots, not tight headshots. */
.barber-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #1f1f1f;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--surface-border);
  margin-bottom: 1.25rem;
}

.barber-card__name {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.book-btn {
  display: inline-block;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-indent: 0.09em;
  transition: background 0.25s ease, color 0.25s ease;
}

.book-btn:hover {
  background: var(--text);
  color: var(--bg);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 4rem;
  font-family: var(--font-wordmark);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
}

.footer__label {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: rgba(245, 245, 243, 0.6);
  margin-bottom: 0.7rem;
  /* Letter-spacing adds a trailing gap after the last letter, so centred text
     sits half that gap to the left. Nudge back by half. See the
     "optical centring" note near the top of this file. */
  text-indent: 0.15em;
}

/* Contact links stack rather than sitting side by side: with a separator
   between two different-length items, the dot lands off-centre and the pair
   reads lopsided even when the block itself is perfectly centred.
   Reversed so the phone sits above the handle — calling is the likelier action. */
.footer__links {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.footer__social {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 243, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.footer__social:hover,
.footer__social:focus-visible {
  border-bottom-color: var(--text);
}

@media (max-width: 760px) {
  /* Tap padding supplies the spacing on phones, so close the gap back up */
  .footer__links {
    gap: 0;
  }

  /* Comfortable tap target without changing how it looks */
  .footer__social {
    display: inline-block;
    padding: 0.5rem 0.25rem;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .page {
    padding: 1.25rem 1.5rem 2rem;
  }

  .brand {
    margin-bottom: 1.1rem;
  }

  .barbers {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
    gap: 0.7rem;
  }

  /* Compact card so all three barbers fit without much scrolling */
  .barber-card {
    padding: 0.9rem 1.25rem 1rem;
  }

  .barber-card__photo {
    width: 120px;
    height: 120px;
    margin-bottom: 0.85rem;
  }

  .barber-card__name {
    font-size: 1.65rem;
    margin-bottom: 0.8rem;
  }

  .brand__mark {
    width: clamp(84px, 22vw, 120px);
    margin-bottom: 0.35rem;
  }

  .brand__address,
  .brand__days {
    font-size: 0.85rem;
    letter-spacing: 0.22em;
  }

  .brand__address {
    /* Comfortable tap target; centres the shorter second line under the first */
    margin-top: 0.55rem;
    padding: 0.3rem 0.25rem 0.35rem;
    line-height: 1.5;
    text-align: center;
  }

  /* Stack as two centred lines rather than letting the text wrap raggedly */
  .addr__line {
    display: block;
  }

  .addr__sep {
    display: none;
  }

  .brand__days {
    margin-top: 0.55rem;
  }

  .book-btn {
    padding: 0.75rem 1.25rem;
  }

  .footer {
    margin-top: 2.5rem;
  }
}