/* ============================================================
   site.css — The Clip Joint Barber Shop, page-specific layout.
   Reuses framework components; adds only what's unique to this
   site. Custom classes are prefixed .c- to stay out of the
   shared component namespace. Every value still a token.
   ============================================================ */

/* Display face on headings + the brand wordmark. */
h1, h2, h3, .c-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.nav__brand { 
  font-family: var(--font-display); 
  font-weight: 700; 
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* The copper accent in the wordmark */
.c-mark { color: var(--brand-copper); }

/* Eyebrow tuned for this brand: copper, with a scissor icon. */
.eyebrow { 
  color: var(--color-brand); 
  display: inline-flex; 
  align-items: center; 
  gap: var(--space-2);
  text-transform: uppercase; 
  letter-spacing: 0.12em; 
  font-size: var(--text-xs); 
  font-weight: var(--weight-bold); 
}
.eyebrow::before { 
  content: "✂"; 
  color: var(--brand-copper);
}

/* ---- Clip stroke: the signature divider --------------------
   A sharp, clean line echoing a straight razor. */
.c-stroke { 
  display: block; 
  width: 100%; 
  height: 2px; 
  margin: var(--space-8) 0; 
  background: linear-gradient(to right, var(--brand-copper), var(--brand-leather), var(--brand-copper));
}

/* ---- Hero --------------------------------------------------
   Text left; a sharp SVG of scissors/razor right.
   Stacks on mobile with the art behind the words. */
.c-hero {
  position: relative; 
  overflow: hidden;
  background: 
    radial-gradient(120% 90% at 85% 8%, var(--brand-copper) 0%, transparent 45%),
    linear-gradient(180deg, #2A2A2A 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
}
.c-hero__inner {
  display: grid; 
  gap: var(--space-12); 
  align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: var(--space-24) var(--space-16);
}
.c-hero__title { font-size: clamp(2.6rem, 6vw, var(--text-4xl)); margin: var(--space-4) 0; }
.c-hero__title em { font-style: italic; color: var(--brand-copper); }
.c-hero__lead { 
  font-size: var(--text-lg); 
  color: var(--color-text-muted); 
  max-width: 34rem; 
}
.c-hero__actions { 
  display: flex; 
  gap: var(--space-4); 
  flex-wrap: wrap; 
  margin-top: var(--space-8); 
}
.c-hero__art { 
  position: relative; 
  display: grid; 
  place-items: center; 
  min-height: 18rem; 
}
.c-hero__art svg { width: 100%; max-width: 28rem; height: auto; }
@media (max-width: 820px) {
  .c-hero__inner { 
    grid-template-columns: 1fr; 
    padding-block: var(--space-16) var(--space-12); 
  }
  .c-hero__art { order: -1; opacity: 0.95; }
}

/* A quiet line of what's on offer */
.c-offer { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--space-3) var(--space-6); 
  align-items: center;
  color: var(--color-text-muted); 
  font-size: var(--text-sm); 
}
.c-offer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-offer .ico { color: var(--color-brand); }

/* ---- Section scaffolding ----------------------------------- */
.c-section { padding-block: var(--space-16); }
.c-section__head { max-width: var(--max-width-prose); margin-bottom: var(--space-12); }
.c-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- Services cards --------------------------------------- */
.c-services { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.c-service { display: grid; gap: var(--space-3); align-content: start; }
.c-service__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-service__name { font-family: var(--font-display); font-size: var(--text-xl); }
.c-service__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Price menu -------------------------------------------- */
.c-menu { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.c-menu caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.c-menu th, .c-menu td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.c-menu thead th { 
  font-family: var(--font-sans); 
  font-weight: var(--weight-medium); 
  color: var(--color-text-muted);
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  font-size: var(--text-xs); 
}
.c-menu tbody tr:hover { background: var(--color-surface); }
.c-menu__price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: var(--weight-medium); }
.c-menu__time { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.c-menu__name { font-weight: var(--weight-medium); }
@media (max-width: 640px) { .c-menu .c-hide-sm { display: none; } }

/* ---- Booking form ----------------------------------------- */
.c-booking { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .c-booking { grid-template-columns: 1fr; gap: var(--space-8); } }

.c-booking__info { 
  background: var(--color-surface); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-md); 
  padding: var(--space-6); 
}
.c-booking__info h3 { margin-bottom: var(--space-4); color: var(--brand-copper); }
.c-booking__info p { color: var(--color-text-muted); margin-bottom: var(--space-2); }

.c-form { display: grid; gap: var(--space-6); }
.c-form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .c-form__row { grid-template-columns: 1fr; } }

/* ---- Team -------------------------------------------------- */
.c-team { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.c-barber { display: grid; gap: var(--space-3); justify-items: start; }
.c-barber__avatar {
  width: 4.5rem; 
  height: 4.5rem; 
  border-radius: var(--radius-full); 
  display: grid; 
  place-items: center;
  font-family: var(--font-display); 
  font-size: var(--text-2xl); 
  color: var(--color-text);
  background: var(--brand-leather);
  border: 2px solid var(--brand-copper);
}
.c-barber__name { font-family: var(--font-display); font-size: var(--text-lg); }
.c-barber__role { color: var(--color-brand); font-size: var(--text-sm); }
.c-barber__bio { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Visit ------------------------------------------------- */
.c-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .c-visit { grid-template-columns: 1fr; } }
.c-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.c-hours div { 
  display: flex; 
  justify-content: space-between; 
  gap: var(--space-6); 
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border); 
}
.c-hours dt { color: var(--color-text); }
.c-hours dd { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Motion: pre-hide animated elements --------------------- */
html.anim [data-reveal],
html.anim [data-reveal-group] > *,
html.anim [data-reveal-load] > * { opacity: 0; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Footer branding ---------------------------------------- */
.c-footer-brandname { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }