/* ============================================================
   CORAL ACCENT SYSTEM (2026)
   The "bring it to life" colour layer.
   Used sparingly across /salons/, /clinics/ and salon profiles.
   ============================================================ */

:root {
  --glow-coral: #E63E48;
  --glow-coral-deep: #C32D38;
  --glow-coral-soft: #F4ACB0;
  --glow-coral-tint: #FBE0E2;
}

/* ----------------------------------------------------------------
   MANIFESTO BLOCK — bold coral full-bleed editorial statement
---------------------------------------------------------------- */
.glow-manifesto {
  background: var(--glow-coral);
  color: #fff;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.glow-manifesto__inner {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.glow-manifesto__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 2rem;
}
.glow-manifesto__eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.6);
}
.glow-manifesto__h2 {
  font-family: var(--font-display, 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0 0 2rem;
  max-width: 18ch;
}
.glow-manifesto__h2 em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.92);
}
.glow-manifesto__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glow-coral);
  background: #fff;
  padding: 1rem 1.4rem;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 220ms cubic-bezier(.2,.6,.2,1), background 220ms ease;
}
.glow-manifesto__cta:hover {
  background: #1A1613;
  color: #fff;
  transform: translateY(-2px);
}
.glow-manifesto__cta::after {
  content: "→";
  font-size: 1.05rem;
  transition: transform 220ms ease;
}
.glow-manifesto__cta:hover::after { transform: translateX(4px); }

/* tiny decorative dot in the top corner — references the reference image */
.glow-manifesto__dot {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2DBDB5; /* the teal dot from your reference */
}

/* ----------------------------------------------------------------
   CORAL SCORE CHIP — for clinic + salon list rows
---------------------------------------------------------------- */
.glow-score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  font-family: var(--font-display, 'Canela', Georgia, serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: var(--glow-coral);
  padding: 0.55rem 0.85rem 0.65rem;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.glow-score-chip__small {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-left: 0.2rem;
}

/* ----------------------------------------------------------------
   CORAL NUMBER (editorial index style)
---------------------------------------------------------------- */
.glow-coral-num {
  font-family: var(--font-display, 'Canela', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--glow-coral);
}

/* ----------------------------------------------------------------
   CITY CARD POLISH — add coral hover border + lift
---------------------------------------------------------------- */
.cl-city-tile {
  transition: transform 320ms cubic-bezier(.2,.6,.2,1), border-color 220ms ease, box-shadow 220ms ease;
  position: relative;
}
.cl-city-tile:hover {
  transform: translateY(-3px);
  border-color: var(--glow-coral) !important;
  box-shadow: 0 12px 32px rgba(214,82,79,0.18);
}

/* ----------------------------------------------------------------
   CLINIC RECOMMENDED ROW UPGRADE
---------------------------------------------------------------- */
.cl-rec-row {
  transition: transform 320ms cubic-bezier(.2,.6,.2,1), border-left-color 220ms ease, box-shadow 220ms ease;
  border-left: 3px solid transparent !important;
}
.cl-rec-row:hover {
  transform: translateX(4px);
  border-left-color: var(--glow-coral) !important;
  box-shadow: 0 8px 24px rgba(26,22,19,0.06);
}
.cl-rec-row:hover .cl-rec-rank { color: var(--glow-coral); }
.cl-rec-row .cl-rec-rank { transition: color 220ms ease; }
.cl-rec-row:hover .cl-rec-name { color: var(--glow-coral); }
.cl-rec-row .cl-rec-name { transition: color 220ms ease; }
.cl-rec-row .cl-rec-featured {
  color: var(--glow-coral) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------
   NEWSLETTER COLOUR — soft coral instead of black
---------------------------------------------------------------- */
.cl-edit__form button,
.cl-newsletter button,
.glow-coral-subscribe {
  background: var(--glow-coral) !important;
  color: #fff !important;
  transition: background 200ms ease;
}
.cl-edit__form button:hover,
.cl-newsletter button:hover,
.glow-coral-subscribe:hover {
  background: var(--glow-coral-deep) !important;
}

/* ----------------------------------------------------------------
   SALONS — coral accent on the category index numbers
---------------------------------------------------------------- */
.salon-cat__num {
  color: var(--glow-coral) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
}

/* ----------------------------------------------------------------
   FEATURED PARTNER PILL
---------------------------------------------------------------- */
.glow-pill-featured {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--glow-coral);
  padding: 5px 12px;
  border-radius: 999px;
}
.glow-pill-featured::before { content: "★"; font-size: 0.85em; }

/* ----------------------------------------------------------------
   FOOTER — full coral background, everything sits on red
---------------------------------------------------------------- */
.footer {
  background: var(--glow-coral) !important;
  color: #FBE5DC !important;
}
.footer .footer-mast {
  background: transparent !important;
  margin: 0 0 clamp(3rem, 5vw, 4.5rem) !important;
  padding: clamp(3rem, 5vw, 4.5rem) 0 0 !important;
  position: relative !important;
  width: auto !important;
}
.footer .footer-mast .footer-rule {
  background: rgba(251,229,220,0.55) !important;
}
.footer .footer-mast .footer-dek {
  color: rgba(251,229,220,0.9) !important;
  font-weight: 500 !important;
}
/* Wordmark image inside footer-mast: ensure it stays white on coral */
.footer .footer-mast .footer-wordmark-link img {
  filter: brightness(0) invert(1) !important;
}
/* Old SVG-background wordmark, if present, swaps to the white-on-transparent variant */
.footer .footer-mast .wordmark {
  background-image: url("/assets/logos/glow-wordmark-white-240h.png?v=20260526q") !important;
}
/* Column nav block */
.footer .footer-grid h5 {
  color: rgba(251,229,220,0.85) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}
.footer .footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer .footer-grid li { margin: 0; }
.footer .footer-grid a,
.footer .footer-grid li a {
  color: #FBE5DC !important;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  display: inline-block;
  padding: 0.4rem 0 !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 200ms ease, color 200ms ease !important;
}
.footer .footer-grid a:hover,
.footer .footer-grid li a:hover {
  color: #fff !important;
  border-bottom-color: rgba(251,229,220,0.7) !important;
}
/* Colophon at bottom */
.footer .colophon {
  border-top: 1px solid rgba(251,229,220,0.22) !important;
  padding-top: 1.5rem !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  color: rgba(251,229,220,0.75) !important;
}
.footer .colophon a {
  color: rgba(251,229,220,0.9) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(251,229,220,0.3);
}
.footer .colophon a:hover {
  color: #fff !important;
  border-bottom-color: #fff;
}
/* Any generic <a> inside footer that's not in the grid (catch-all) */
.footer a:not(.footer-wordmark-link):not(.glow-wordmark-link) {
  color: #FBE5DC !important;
}
.footer a:not(.footer-wordmark-link):not(.glow-wordmark-link):hover {
  color: #fff !important;
}
/* Subscribe/email blocks inside footer if present */
.footer input[type="email"],
.footer input[type="text"] {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(251,229,220,0.35) !important;
  color: #FBE5DC !important;
}
.footer input::placeholder { color: rgba(251,229,220,0.6) !important; }
.footer button[type="submit"],
.footer .subscribe-btn {
  background: #fff !important;
  color: var(--glow-coral) !important;
  border: 0 !important;
  font-weight: 500 !important;
}
.footer button[type="submit"]:hover {
  background: #1A1613 !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------
   MOBILE polish
---------------------------------------------------------------- */
@media (max-width: 760px) {
  .glow-manifesto { padding: 3.5rem 1.25rem; }
  .glow-manifesto__dot { width: 10px; height: 10px; }
  .glow-score-chip { font-size: 1.25rem; padding: 0.45rem 0.7rem 0.5rem; }
}