/* ================================================================
   Friseur — Salon Elara
   Warm gold accent, elegant serif headings, prominent contact
   ================================================================ */

/* Nav warm tones */
.fr-nav { background: #2d2319; border-bottom: 2px solid var(--app-accent); }
.fr-nav .site-nav__logo { color: #fff; }
.fr-nav .site-nav__logo strong { color: var(--app-accent); }
.fr-nav .site-nav__link { color: rgba(255,255,255,0.7); }
.fr-nav .site-nav__link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.fr-nav .site-nav__link.active { color: var(--app-accent); background: rgba(184,134,11,0.15); }

/* Sticky contact bar — ALWAYS VISIBLE (key requirement) */
.fr-contact-bar {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 8px 20px; background: #2d2319; color: rgba(255,255,255,0.7);
  font-size: 0.82rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.fr-contact-bar__phone {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  color: var(--app-accent);
}

/* Hero with serif headings */
#tab-friseur .site-hero {
  background: linear-gradient(135deg, #3d2f1f, #2d2319);
  text-align: left; padding: 48px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
}
#tab-friseur .site-hero__title { font-family: var(--font-serif); font-size: 2rem; text-align: left; }
#tab-friseur .site-hero__sub { text-align: left; margin-left: 0; }
#tab-friseur .site-hero__actions { justify-content: flex-start; }

/* Friseur section titles use serif */
#tab-friseur .site-section__title { font-family: var(--font-serif); }

/* Quick contact block on start page */
.fr-quick-contact {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--app-border);
}
.fr-quick-contact__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px; background: var(--app-surface); text-align: center;
  cursor: pointer; transition: background var(--transition-fast);
}
.fr-quick-contact__item:hover { background: var(--app-accent-light); }
.fr-quick-contact__item strong { color: var(--app-accent); font-size: 0.95rem; }
.fr-quick-contact__item span { font-size: 0.82rem; color: var(--app-text-2); }