/**
 * Kreynova Brand Styles — the "personality" layer (DESIGN_SYSTEM.md section 11).
 *
 * Palettes decide color and font pairs decide voice. A brand style decides
 * SHAPE LANGUAGE: corner radius, button shape, shadow character, heading
 * treatment, section-title ornament, page tint, and hero overlay tint.
 * That's the layer that makes a barber shop feel different from a dental
 * clinic even when both use a blue palette.
 *
 * Every rule is scoped under body.brand--{name} (class added in
 * inc/helpers.php → kreynova_body_classes), and every color is derived from the
 * active palette's CSS variables, so any style works with any palette.
 * 'classic' has no rules on purpose: it's the original neutral look.
 *
 * This file is always loaded (it's small) so Customize → Kreynova Design → Brand
 * style can swap the body class instantly without a refresh.
 * Skin CSS files (assets/css/skins/{skin}.css) load after this one and win
 * on any conflict.
 */

/* Shared: every style except classic draws a small ornament under section
   titles. The per-style blocks below only set its shape. :where() keeps this
   at zero specificity so each style's own content/size always wins. */
:where(body[class*="brand--"]:not(.brand--classic)) .section__title > h2::after {
  content: '';
  display: block;
  margin: 0.75rem auto 0;
}

/* ============================================================
   WARM: restaurant, bakery, artisan / natural products
   Cream-tinted page, soft big radius, pill buttons, shadows tinted with
   the palette's brown/secondary instead of neutral grey, hand-drawn
   squiggle under section titles, big display-font quote marks.
   ============================================================ */
body.brand--warm {
  --radius: 16px;
  --radius-btn: 999px;
  --shadow: 0 4px 14px color-mix(in srgb, var(--kreynova-secondary) 10%, transparent);
  --shadow-lg: 0 14px 30px color-mix(in srgb, var(--kreynova-secondary) 18%, transparent);
  --kreynova-page-bg: color-mix(in srgb, var(--kreynova-accent) 55%, #fff);
  --kreynova-muted: color-mix(in srgb, var(--kreynova-secondary) 70%, #fff);
  --kreynova-hero-overlay: linear-gradient(color-mix(in srgb, var(--kreynova-secondary) 40%, transparent), color-mix(in srgb, var(--kreynova-secondary) 75%, transparent));
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 35%, color-mix(in srgb, var(--kreynova-secondary) 85%, transparent));
}
body.brand--warm .section--light { background: color-mix(in srgb, var(--kreynova-accent) 85%, #fff); }
body.brand--warm .section__title > h2::after {
  width: 64px;
  height: 10px;
  background: var(--kreynova-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M2 5 Q9.5 0 17 5 T32 5 T47 5 T62 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M2 5 Q9.5 0 17 5 T32 5 T47 5 T62 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.brand--warm .item-card:not(.item-card--overlay) { border-color: color-mix(in srgb, var(--kreynova-primary) 15%, var(--kreynova-border)); }
body.brand--warm .item-card__price,
body.brand--warm .spotlight__price { font-family: var(--kreynova-font-display); }
body.brand--warm .testimonial {
  position: relative;
  border-left: none;
  border: 1px solid color-mix(in srgb, var(--kreynova-primary) 15%, var(--kreynova-border));
  padding-top: var(--sp-lg);
}
body.brand--warm .testimonial::before {
  content: '\201C';
  position: absolute;
  top: -0.35em;
  left: var(--sp-md);
  font-family: var(--kreynova-font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--kreynova-primary);
}
body.brand--warm .zone { border-radius: 999px; }
body.brand--warm .hours__item { border-left: none; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ============================================================
   SOFT: hair salon, nail bar, lash / spa, beauty
   Pastel-tinted page, very round corners, pill buttons, glowing shadows
   tinted with the primary color, sparkle ornament, speech-bubble
   testimonials, ringed team photos.
   ============================================================ */
body.brand--soft {
  --radius: 22px;
  --radius-btn: 999px;
  --shadow: 0 6px 20px color-mix(in srgb, var(--kreynova-primary) 12%, transparent);
  --shadow-lg: 0 16px 36px color-mix(in srgb, var(--kreynova-primary) 22%, transparent);
  --kreynova-page-bg: color-mix(in srgb, var(--kreynova-accent) 45%, #fff);
  --kreynova-muted: color-mix(in srgb, var(--kreynova-secondary) 65%, #fff);
  --kreynova-hero-overlay: linear-gradient(135deg, color-mix(in srgb, var(--kreynova-secondary) 70%, transparent), color-mix(in srgb, var(--kreynova-primary) 25%, transparent));
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 30%, color-mix(in srgb, var(--kreynova-secondary) 80%, transparent));
}
body.brand--soft .section--light { background: var(--kreynova-accent); }
body.brand--soft .section__title > h2::after {
  content: '\2726';
  width: auto;
  height: auto;
  font-size: 0.85rem;
  letter-spacing: 0.6em;
  padding-left: 0.6em; /* balance trailing letter-spacing so it stays centered */
  color: var(--kreynova-primary);
}
body.brand--soft .btn { padding: 0.8rem 1.75rem; }
body.brand--soft .item-card:not(.item-card--overlay) { border: none; }
body.brand--soft .testimonial {
  border-left: none;
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
}
body.brand--soft .team-card__photo { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--kreynova-primary); }
body.brand--soft .zone { border-radius: 999px; background: #fff; color: var(--kreynova-secondary); font-weight: 600; box-shadow: var(--shadow); }
body.brand--soft .hours__item { border-left: none; border-radius: 14px; }
body.brand--soft .form-group input,
body.brand--soft .form-group textarea { border-radius: 14px; }

/* ============================================================
   BOLD: barber, transport, construction, auto, trades
   Hard square corners, uppercase heavy headings, thick accent bar under
   titles, hard offset "stamp" shadows instead of blur, striped CTA,
   directional hero shading, navbar underlined in the primary color.
   ============================================================ */
body.brand--bold {
  --radius: 2px;
  --radius-btn: 0;
  --shadow: none;
  --shadow-lg: 5px 5px 0 var(--kreynova-secondary);
  --kreynova-hero-overlay: linear-gradient(100deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.3) 100%);
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 25%, rgba(0,0,0,0.85));
}
body.brand--bold h1,
body.brand--bold h2 { text-transform: uppercase; letter-spacing: 0.02em; }
body.brand--bold .section__title > h2::after { width: 56px; height: 5px; background: var(--kreynova-primary); }
body.brand--bold .navbar--top { border-bottom: 4px solid var(--kreynova-primary); }
body.brand--bold .btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
body.brand--bold .btn--primary:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--kreynova-dark); }
body.brand--bold .item-card:not(.item-card--overlay) { border-width: 2px; }
body.brand--bold .item-card:hover { box-shadow: 5px 5px 0 var(--kreynova-primary); }
body.brand--bold .item-card--flat:hover { box-shadow: none; }
body.brand--bold .item-card__title { text-transform: uppercase; letter-spacing: 0.02em; }
body.brand--bold .testimonial { border: 2px solid var(--kreynova-border); border-left: 6px solid var(--kreynova-primary); }
body.brand--bold .zone {
  background: transparent;
  color: var(--kreynova-secondary);
  border: 2px solid var(--kreynova-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.9rem;
}
body.brand--bold .cta {
  background:
    repeating-linear-gradient(-45deg, transparent 0 16px, rgba(255,255,255,0.05) 16px 32px),
    var(--kreynova-secondary);
  border-top: 6px solid var(--kreynova-primary);
}
body.brand--bold .hours__item { border-left-width: 6px; }
body.brand--bold .stats-band__number { font-size: 2.75rem; }
body.brand--bold .hero-natural__card,
body.brand--bold .hero-natural__img { border-radius: var(--radius); }

/* ============================================================
   CLINICAL: dental, pharmacy, medical, clinic, lab
   Crisp 12px radius, precise layered shadows, tight modern headings,
   calm hover (no bounce), everything outlined rather than filled, cool
   hero shading that fades from the palette's dark to clear so photos of
   people stay bright.
   ============================================================ */
body.brand--clinical {
  --radius: 12px;
  --radius-btn: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.1);
  --shadow-lg: 0 12px 24px -6px rgba(16,24,40,0.14), 0 4px 8px -2px rgba(16,24,40,0.06);
  --kreynova-muted: #5B6573;
  --kreynova-hero-overlay: linear-gradient(90deg, color-mix(in srgb, var(--kreynova-secondary) 88%, transparent) 0%, color-mix(in srgb, var(--kreynova-secondary) 35%, transparent) 100%);
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 40%, color-mix(in srgb, var(--kreynova-secondary) 85%, transparent));
}
body.brand--clinical h1,
body.brand--clinical h2 { letter-spacing: -0.02em; }
body.brand--clinical .section { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
body.brand--clinical .section--light { background: var(--kreynova-accent); }
body.brand--clinical .section__title > h2::after { width: 40px; height: 3px; border-radius: 3px; background: var(--kreynova-primary); }
body.brand--clinical .btn--primary:hover { transform: none; }
body.brand--clinical .item-card:hover { transform: translateY(-2px); border-color: var(--kreynova-primary); }
body.brand--clinical .testimonial { border-left: none; border: 1px solid var(--kreynova-border); box-shadow: none; }
body.brand--clinical .zone {
  background: #fff;
  color: var(--kreynova-secondary);
  border: 1px solid var(--kreynova-border);
  font-weight: 600;
}
body.brand--clinical .hours__item { border-left: none; border: 1px solid var(--kreynova-border); border-radius: var(--radius); }
body.brand--clinical .team-card__photo { box-shadow: 0 0 0 3px var(--kreynova-accent); }

/* ============================================================
   LUXE: boutique, fashion, real estate, photography, jewelry, events
   Zero radius, no drop shadows, hairlines everywhere, lighter heading
   weight, small tracked uppercase buttons, generous whitespace, slow
   image zoom on hover instead of a card lift.
   ============================================================ */
body.brand--luxe {
  --radius: 0;
  --radius-btn: 0;
  --shadow: none;
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.08);
  --kreynova-muted: #6F6F6F;
  --kreynova-hero-overlay: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 45%, rgba(0,0,0,0.7));
}
body.brand--luxe h1,
body.brand--luxe h2 { font-weight: 500; letter-spacing: 0.01em; }
body.brand--luxe .section__title > h2::after { width: 56px; height: 1px; background: var(--kreynova-primary); margin-top: 1.1rem; }
body.brand--luxe .section__subtitle { letter-spacing: 0.02em; }
body.brand--luxe .navbar--top .navbar__menu a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; }
body.brand--luxe .btn {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  padding: 1rem 2.2rem;
}
body.brand--luxe .btn--primary { background: var(--kreynova-secondary); }
body.brand--luxe .btn--primary:hover { background: var(--kreynova-primary); transform: none; box-shadow: none; }
/* On dark surfaces (navbar, image/dark heroes) a secondary-filled button vanishes — use the accent metal instead. */
body.brand--luxe .navbar .btn--primary,
body.brand--luxe .hero:not(.hero--circle):not(.hero--natural) .btn--primary { background: var(--kreynova-primary); }
body.brand--luxe .navbar .btn--primary:hover,
body.brand--luxe .hero:not(.hero--circle):not(.hero--natural) .btn--primary:hover { background: #fff; color: var(--kreynova-secondary); }
body.brand--luxe .item-card:not(.item-card--overlay) { border-color: transparent; background: transparent; }
body.brand--luxe .item-card:hover { transform: none; }
body.brand--luxe .item-card__img { transition: transform 0.8s ease; }
body.brand--luxe .item-card:hover .item-card__img { transform: scale(1.04); }
body.brand--luxe .item-card__media { overflow: hidden; }
body.brand--luxe .item-card__title { font-weight: 500; }
body.brand--luxe .testimonial {
  border-left: none;
  border-top: 1px solid var(--kreynova-primary);
  background: transparent;
  padding: var(--sp-lg) 0 0;
}
body.brand--luxe .testimonial__text { font-family: var(--kreynova-font-display); font-size: 1.1rem; }
body.brand--luxe .zone {
  background: transparent;
  color: var(--kreynova-secondary);
  border: 1px solid var(--kreynova-border);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}
body.brand--luxe .hours__item { border-left: none; border-bottom: 1px solid var(--kreynova-border); background: transparent; padding-left: 0; }
body.brand--luxe .stats-band__number { font-weight: 500; }
body.brand--luxe .hero-natural__card,
body.brand--luxe .hero-natural__img { border-radius: 0; }
@media (min-width: 768px) {
  body.brand--luxe .section { padding: 5rem 0; }
}

/* ============================================================
   TRUST: consulting, legal, accounting, insurance, agencies
   Structured and official: small 6px radius, two-tone rule under titles,
   primary top-edge on cards, deep palette-tinted hero, solid dark CTA.
   ============================================================ */
body.brand--trust {
  --radius: 6px;
  --radius-btn: 4px;
  --kreynova-muted: #55606E;
  --kreynova-hero-overlay: linear-gradient(color-mix(in srgb, var(--kreynova-secondary) 70%, transparent), color-mix(in srgb, var(--kreynova-secondary) 88%, transparent));
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 30%, color-mix(in srgb, var(--kreynova-secondary) 92%, transparent));
}
body.brand--trust h1,
body.brand--trust h2 { letter-spacing: -0.01em; }
body.brand--trust .section__title > h2::after {
  width: 72px;
  height: 4px;
  background: linear-gradient(90deg, var(--kreynova-primary) 0 70%, var(--kreynova-secondary) 70% 100%);
}
body.brand--trust .btn--primary:hover { transform: none; }
body.brand--trust .item-card:not(.item-card--overlay) { border-top: 3px solid var(--kreynova-primary); }
body.brand--trust .testimonial { background: var(--kreynova-accent); box-shadow: none; }
body.brand--trust .zone { background: var(--kreynova-secondary); border-left: 4px solid var(--kreynova-primary); text-align: left; }
body.brand--trust .cta { background: var(--kreynova-secondary); border-bottom: 4px solid var(--kreynova-primary); }

/* ============================================================
   HERITAGE: church, school, ministry, NGO, long-established family biz
   Parchment-tinted page, classical diamond ornament flanked by rules,
   double-rule "framed" testimonials, tracked uppercase buttons,
   centered and ceremonial.
   ============================================================ */
body.brand--heritage {
  --radius: 6px;
  --radius-btn: 4px;
  --kreynova-page-bg: color-mix(in srgb, var(--kreynova-accent) 45%, #fff);
  --kreynova-muted: color-mix(in srgb, var(--kreynova-secondary) 65%, #fff);
  --kreynova-hero-overlay: linear-gradient(color-mix(in srgb, var(--kreynova-secondary) 55%, transparent), color-mix(in srgb, var(--kreynova-secondary) 82%, transparent));
  --kreynova-hero-overlay-fullbleed: linear-gradient(transparent 30%, color-mix(in srgb, var(--kreynova-secondary) 88%, transparent));
}
body.brand--heritage .section__title > h2::after {
  content: '\25C6';
  width: 180px;
  max-width: 70%;
  height: auto;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--kreynova-primary);
  background:
    linear-gradient(var(--kreynova-primary), var(--kreynova-primary)) left center / 42% 1px no-repeat,
    linear-gradient(var(--kreynova-primary), var(--kreynova-primary)) right center / 42% 1px no-repeat;
}
body.brand--heritage .btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.88rem; }
body.brand--heritage .testimonial {
  border-left: none;
  border: 1px solid var(--kreynova-border);
  outline: 1px solid var(--kreynova-border);
  outline-offset: -7px;
  padding: var(--sp-lg);
  text-align: center;
  box-shadow: none;
}
body.brand--heritage .testimonial__meta { justify-content: center; }
body.brand--heritage .testimonial__text { font-family: var(--kreynova-font-display); }
body.brand--heritage .zone { background: transparent; color: var(--kreynova-secondary); border: 1px solid var(--kreynova-primary); }
body.brand--heritage .stats-band__item + .stats-band__item { border-left: 1px solid var(--kreynova-border); }