/* =============================================================================
   BARBER-THEME.CSS — loaded ONLY on barber.html, after style.css.
   Gives the Barbershop page its own dark, masculine, luxury look while
   leaving every other page (and style.css itself) completely untouched.
   Shared components (header, footer, buttons, nav) are explicitly
   re-colored here rather than by redefining style.css's variables, since
   many of its rules use fixed color values rather than variables — safer
   to override directly than to assume a variable swap reaches everywhere.
   ============================================================================= */

:root{
  --bb-bg:        #121110;
  --bb-bg-alt:    #1B1815;
  --bb-card:      #201C17;
  --bb-border:    rgba(201,162,39,0.16);
  --bb-gold:      #C9A227;
  --bb-gold-deep: #9C7D1C;
  --bb-text:      #F3EDE0;
  --bb-text-dim:  rgba(243,237,224,0.62);
  --bb-text-faint:rgba(243,237,224,0.4);
}

/* ---------- Base page ---------- */
body{
  background:var(--bb-bg) !important;
  color:var(--bb-text) !important;
}
h1, h2, h3{
  color:var(--bb-text) !important;
  font-family:'Bebas Neue', 'Fraunces', serif !important;
  letter-spacing:0.03em;
}
.eyebrow{ color:var(--bb-gold) !important; }
.eyebrow::before{ background:var(--bb-gold) !important; }

/* ---------- Header / nav ---------- */
header{
  background:rgba(18,17,16,0.88) !important;
  border-bottom:1px solid var(--bb-border) !important;
}
.nav-links a::after{ background:var(--bb-gold) !important; }
.nav-links a.is-active{ color:var(--bb-gold) !important; }
@media (max-width:900px){
  .nav-links{ background:var(--bb-bg-alt) !important; }
  .nav-links a{ border-bottom:1px solid var(--bb-border) !important; }
}
.staff-login-btn{ border-color:var(--bb-border) !important; color:var(--bb-text-dim) !important; }
/* The hamburger icon had no barber-theme override at all, so it was
   still using the base (dark) menu-toggle color on this dark background
   — effectively invisible. Bright yellow/gold fixes both the contrast
   and matches the page's existing gold accent. */
.menu-toggle span{ background:#F5C518 !important; }
.staff-login-btn:hover{ border-color:var(--bb-gold) !important; color:var(--bb-gold) !important; background:rgba(201,162,39,0.08) !important; }

/* Switch bar: keep it dark, but the active pill should read gold here, not the salon's raspberry */
.site-switch-bar{ background:#0D0C0B !important; }
.site-switch-bar a.is-active{ background:var(--bb-gold) !important; color:#15130F !important; }
.site-switch-bar a:not(.is-active):hover{ color:var(--bb-text) !important; }

/* ---------- Buttons ---------- */
.btn{
  background:var(--bb-gold) !important; border-color:var(--bb-gold) !important; color:#15130F !important;
}
.btn:hover{ background:var(--bb-gold-deep) !important; border-color:var(--bb-gold-deep) !important; }
.btn-outline{ background:transparent !important; border-color:rgba(243,237,224,0.3) !important; color:var(--bb-text) !important; }
.btn-outline:hover{ background:transparent !important; border-color:var(--bb-gold) !important; color:var(--bb-gold) !important; }

/* ---------- Rating pill (if reused) ---------- */
.rating-pill{ border-color:rgba(243,237,224,0.22) !important; color:var(--bb-text) !important; }
.rating-pill .stars{ color:var(--bb-gold) !important; }
.rating-pill .ring::after{ background:var(--bb-bg) !important; }

/* ---------- Footer ---------- */
footer.site-footer{ border-top:1px solid var(--bb-border) !important; }
.footer-note{ color:var(--bb-text-dim) !important; }
.footer-links a{ color:var(--bb-text) !important; }
.footer-credit{ border-top:1px solid var(--bb-border) !important; }
.footer-credit a{ color:var(--bb-text-faint) !important; }
.footer-credit .dg-brand{ color:var(--bb-text-dim) !important; }
.footer-credit a:hover{ color:var(--bb-text) !important; }
.footer-credit a:hover .dg-brand{ color:var(--bb-gold) !important; }

/* =============================================================================
   PAGE-SPECIFIC SECTIONS (all new classes, only used on barber.html)
   ============================================================================= */

.bb-hero{ padding:70px 0 90px; }
.bb-hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.bb-hero h1{ font-size:clamp(42px,5.5vw,72px); line-height:0.98; margin:18px 0 22px; }
.bb-hero .bb-lede{ font-size:18px; line-height:1.6; color:var(--bb-text-dim); max-width:460px; margin-bottom:32px; }
.bb-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.bb-hero-visual{
  position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
  border:1px solid var(--bb-border);
}
.bb-hero-visual img{ width:100%; height:100%; object-fit:cover; filter:grayscale(20%); }
.bb-hero-visual-shade{
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(201,162,39,0.12) 0%, transparent 45%), linear-gradient(0deg, rgba(18,17,16,0.35) 0%, transparent 35%);
}
@media (max-width:800px){
  .bb-hero-grid{ grid-template-columns:1fr; }
  .bb-hero-visual{ order:-1; max-width:380px; margin:0 auto; }
}

.bb-section{ padding:80px 0; }
.bb-section.alt{ background:var(--bb-bg-alt); }
.bb-section-head{ margin-bottom:40px; max-width:600px; }
.bb-section-head p.bb-sub{ color:var(--bb-text-dim); font-size:15px; margin-top:12px; line-height:1.6; }

.bb-shop-photo{
  border-radius:4px; overflow:hidden; border:1px solid var(--bb-border);
  box-shadow:0 30px 70px -36px rgba(0,0,0,0.6);
}
.bb-shop-photo img{ width:100%; height:auto; display:block; filter:grayscale(15%); }

.bb-service-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.bb-service-card{
  background:var(--bb-card); border:1px solid var(--bb-border); border-radius:4px;
  padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bb-service-card h3{ font-size:19px; letter-spacing:0.02em; margin-bottom:4px; font-family:'Manrope',sans-serif !important; font-weight:700; color:var(--bb-text) !important; }
.bb-service-card p{ font-size:13px; color:var(--bb-text-faint); }
.bb-service-card .bb-dur{ font-size:12px; font-weight:700; color:var(--bb-gold); white-space:nowrap; letter-spacing:0.04em; text-transform:uppercase; }
@media (max-width:700px){ .bb-service-grid{ grid-template-columns:1fr; } }

.bb-spotlight{ display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
.bb-spotlight-badge{
  width:120px; height:120px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, var(--bb-gold) 0%, var(--bb-gold-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue', serif; font-size:44px; color:#15130F;
}
.bb-spotlight h3{ font-size:26px; margin-bottom:6px; }
.bb-spotlight .bb-title{ color:var(--bb-gold); font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; }
.bb-spotlight p{ color:var(--bb-text-dim); font-size:15px; line-height:1.65; max-width:520px; }
@media (max-width:600px){ .bb-spotlight{ grid-template-columns:1fr; text-align:center; } .bb-spotlight-badge{ margin:0 auto; } }

.bb-photo-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.bb-photo-grid .bb-photo{ position:relative; aspect-ratio:3/4; border-radius:4px; overflow:hidden; }
.bb-photo-grid .bb-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(20%); transition:filter .3s ease, transform .5s ease; }
.bb-photo-grid .bb-photo:hover img{ filter:grayscale(0%); transform:scale(1.05); }
@media (max-width:900px){ .bb-photo-grid{ grid-template-columns:repeat(2, 1fr); } }

.bb-cta{
  text-align:center; padding:90px 0;
  background:linear-gradient(160deg, var(--bb-bg-alt) 0%, var(--bb-bg) 100%);
}
.bb-cta h2{ font-size:clamp(34px,4.5vw,56px); margin-bottom:18px; }
.bb-cta p{ color:var(--bb-text-dim); font-size:16px; margin-bottom:30px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ===== BOOK: PICK YOUR BARBER (barber-book.html) ===== */
.book-pick-card{
  background:var(--bb-card) !important; border-color:var(--bb-border) !important;
}
.book-pick-card:hover{ border-color:var(--bb-gold) !important; box-shadow:0 24px 48px -28px rgba(0,0,0,0.5) !important; }
.book-pick-card h3{ color:var(--bb-text) !important; font-family:'Manrope',sans-serif !important; letter-spacing:normal !important; }
.bpc-role{ color:var(--bb-text-faint) !important; }
.bpc-cta{ color:var(--bb-gold) !important; }
.book-pick-card.is-gg .bpc-cta{ background:var(--bb-gold) !important; color:#15130F !important; }

.book-modal-card{ background:var(--bb-card) !important; border:1px solid var(--bb-border); }
.book-modal-close{ background:var(--bb-bg-alt) !important; color:var(--bb-text-dim) !important; }
.book-modal-close:hover{ color:var(--bb-gold) !important; }
.book-modal-card h3{ color:var(--bb-text) !important; font-family:'Manrope',sans-serif !important; letter-spacing:normal !important; }
.book-modal-role{ color:var(--bb-gold) !important; }
.book-modal-bio{ color:var(--bb-text-dim) !important; }
.book-modal-actions a{ border-color:var(--bb-border) !important; color:var(--bb-text-dim) !important; }
.book-modal-actions a:hover{ border-color:var(--bb-gold) !important; color:var(--bb-gold) !important; background:rgba(201,162,39,0.08) !important; }
.book-modal-actions a.btn{ background:var(--bb-gold) !important; border-color:var(--bb-gold) !important; color:#15130F !important; }
.book-modal-actions a.btn:hover{ background:var(--bb-gold-deep) !important; border-color:var(--bb-gold-deep) !important; color:#15130F !important; }

/* ===== REVIEWS (barber.html) ===== */
.bb-review-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.bb-review-card{
  background:var(--bb-card); border:1px solid var(--bb-border); border-radius:4px; padding:26px;
}
.bb-stars{ color:var(--bb-gold); letter-spacing:2px; font-size:15px; margin-bottom:14px; }
.bb-review-card p{ font-size:15px; line-height:1.55; color:var(--bb-text); margin-bottom:16px; }
.bb-review-name{ font-size:12.5px; font-weight:700; color:var(--bb-text-faint); text-transform:uppercase; letter-spacing:0.03em; }
@media (max-width:700px){ .bb-review-grid{ grid-template-columns:1fr; } }

/* ===== VISIT (barber.html) ===== */
.bb-visit-info{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-bottom:36px;
}
.bb-visit-label{ font-size:12px; font-weight:700; color:var(--bb-gold); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.bb-visit-val{ font-size:15px; line-height:1.5; color:var(--bb-text); }
.bb-visit-val a{ color:var(--bb-text); }
.bb-visit-val a:hover{ color:var(--bb-gold); }
.bb-visit-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:700px){ .bb-visit-info{ grid-template-columns:1fr; gap:20px; } }