/* ==========================================================================
   SITE THEME LAYER — loads AFTER Bootstrap (assets/vendor/bootstrap).
   Part of the canonical core, overwritten on update.
   Per-site custom CSS belongs in /site (load it from a site template).

   Method:
   1. Bootstrap 5.3 is the component library — use its classes in page bodies
      (btn, card, row/col, accordion, form-control, badge, navbar, …).
   2. CMS Settings drive colors via CSS vars: --primary, --accent,
      --background, --text (emitted in the header). This file maps them onto
      Bootstrap's variables so .btn-primary etc. follow the theme.
   3. The `sl-` namespace is reserved for magic Bootstrap doesn't have:
      sl-snow, sl-drift, sl-hero-showcase, sl-btn-burst, sl-pill,
      sl-rating, sl-photo-card.
   ========================================================================== */

/* ---- Theme mapping: CMS settings → Bootstrap variables ---- */
:root {
    --bs-primary: var(--primary, #1d4ed8);
    --bs-primary-rgb: var(--primary-rgb, 29, 78, 216);
    --bs-link-color: var(--primary, #1d4ed8);
    --bs-link-hover-color: var(--primary, #1d4ed8);
    --bs-link-color-rgb: var(--primary-rgb, 29, 78, 216);
    --bs-link-hover-color-rgb: var(--primary-rgb, 29, 78, 216);
}
/* Bootstrap utilities resolve -rgb vars at the component level too. */
.text-primary { --bs-primary-rgb: var(--primary-rgb, 29, 78, 216); }
.bg-primary { --bs-primary-rgb: var(--primary-rgb, 29, 78, 216); }
.border-primary { border-color: var(--primary, #1d4ed8) !important; }
.link-primary { --bs-link-color-rgb: var(--primary-rgb, 29, 78, 216); --bs-link-hover-color-rgb: var(--primary-rgb, 29, 78, 216); }
body {
    --bs-body-bg: var(--background, #ffffff);
    --bs-body-color: var(--text, #111827);
    background: var(--background, #ffffff);
    color: var(--text, #111827);
}
.btn-primary {
    --bs-btn-bg: var(--primary, #1d4ed8);
    --bs-btn-border-color: var(--primary, #1d4ed8);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary, #1d4ed8) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary, #1d4ed8) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--primary, #1d4ed8) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary, #1d4ed8) 75%, #000);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary, #1d4ed8);
    --bs-btn-border-color: var(--primary, #1d4ed8);
    --bs-btn-hover-bg: var(--primary, #1d4ed8);
    --bs-btn-hover-border-color: var(--primary, #1d4ed8);
    --bs-btn-active-bg: var(--primary, #1d4ed8);
    --bs-btn-active-border-color: var(--primary, #1d4ed8);
}
/* Accent (second theme color) — Bootstrap has no slot for it, so add one. */
.btn-accent {
    --bs-btn-bg: var(--accent, #16a34a);
    --bs-btn-border-color: var(--accent, #16a34a);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent, #16a34a) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent, #16a34a) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--accent, #16a34a) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent, #16a34a) 75%, #000);
    --bs-btn-active-color: #fff;
}
.text-accent { color: var(--accent, #16a34a) !important; }
.bg-accent { background-color: var(--accent, #16a34a) !important; color: #fff; }
.badge.bg-accent { color: #fff; }
.bg-primary-theme { background-color: var(--primary, #1d4ed8) !important; color: #fff; }

/* ---- Site chrome (header / nav / footer) ---- */
.site-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1rem 0;
    margin-bottom: 2.5rem;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.site-title { font-size: 1.25rem; font-weight: 700; color: var(--primary, #1d4ed8); text-decoration: none; }
.site-nav a { margin-left: 1rem; color: inherit; text-decoration: none; font-size: 0.95rem; }
.site-nav a:hover, .site-nav a.active { color: var(--primary, #1d4ed8); }

.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
}

/* ---- Legacy template hooks (default/landing/sidebar templates) ---- */
.hero {
    background: var(--primary, #1d4ed8);
    color: #fff;
    padding: 4rem 0;
    margin: -2.5rem 0 2.5rem;
    text-align: center;
}
.hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.hero-tagline { font-size: 1.15rem; opacity: 0.9; }
.layout-sidebar { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.layout-sidebar .content-main { flex: 3 1 420px; min-width: 0; }
.layout-sidebar .content-aside { flex: 1 1 200px; }
.content-aside ul { list-style: none; padding-left: 0; }
.content-aside li { margin-bottom: 0.5rem; }

.page-body { margin-bottom: 3rem; }
.page-body img { max-width: 100%; height: auto; }

/* ==========================================================================
   SL MAGIC — effects Bootstrap doesn't ship. Safe on any Bootstrap section.
   ========================================================================== */

/* Falling snow — CSS-only, two parallax layers, respects reduced-motion. */
.sl-snow { position: relative; overflow: hidden; }
.sl-snow > * { position: relative; z-index: 2; }
.sl-snow::before,
.sl-snow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9) 50%, transparent 51%),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.8) 50%, transparent 51%),
        radial-gradient(3px 3px at 220px 140px, rgba(255,255,255,0.9) 50%, transparent 51%),
        radial-gradient(2px 2px at 300px 40px, rgba(255,255,255,0.7) 50%, transparent 51%),
        radial-gradient(3px 3px at 80px 190px, rgba(255,255,255,0.8) 50%, transparent 51%),
        radial-gradient(2px 2px at 360px 220px, rgba(255,255,255,0.9) 50%, transparent 51%);
    background-size: 400px 240px;
    animation: sl-snowfall 9s linear infinite;
}
.sl-snow::after {
    background-size: 300px 180px;
    opacity: 0.6;
    animation-duration: 15s;
    animation-direction: reverse;
    filter: blur(1px);
}
@keyframes sl-snowfall {
    from { background-position: 0 0; }
    to   { background-position: 40px 480px; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-snow::before, .sl-snow::after { animation: none; }
}

/* Showcase hero — bold copy left, photo card right, optional center figure. */
.sl-hero-showcase {
    /* Solid fallback first for browsers without color-mix(); gradient below. */
    background: var(--primary, #b91c1c);
    background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--primary, #b91c1c) 78%, #000 0%) 0%, color-mix(in srgb, var(--primary, #b91c1c) 82%, #000 18%) 100%);
    border-radius: 12px;
    padding: 3.5rem 3rem 6.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
    margin-bottom: 2.5rem;
}
.sl-hero-showcase h1 { color: #fff; font-size: 2.6rem; line-height: 1.15; font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.sl-hero-showcase .lead { color: rgba(255,255,255,0.95); }
.sl-hero-grid { display: grid; grid-template-columns: 1.15fr 0.6fr 1.1fr; gap: 1rem; align-items: center; position: relative; z-index: 2; }
.sl-hero-copy { text-align: left; }
.sl-hero-figure { align-self: end; margin-bottom: -6.5rem; position: relative; z-index: 3; }
.sl-hero-figure img { display: block; width: 100%; max-width: 360px; margin: 0 auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }
@media (max-width: 900px) {
    .sl-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .sl-hero-copy { text-align: center; }
    .sl-hero-figure { display: none; }
    .sl-hero-showcase { padding: 2.5rem 1.5rem 5rem; }
    .sl-hero-showcase h1 { font-size: 2rem; }
}

/* Star rating row */
.sl-rating { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; font-weight: 700; }
.sl-rating .sl-stars { color: #fbbf24; font-size: 1.3rem; letter-spacing: 2px; }
.sl-rating small { font-weight: 400; opacity: 0.85; }

/* Photo card — white-bordered tilted polaroid-style frame */
.sl-photo-card { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); transform: rotate(2deg); }
.sl-photo-card img { display: block; width: 100%; border-radius: 8px; }

/* Burst CTA — high-energy pill with dashed inner border */
.sl-btn-burst, a.sl-btn-burst {
    display: inline-block; background: #fbbf24; color: #7f1d1d; font-weight: 800; font-size: 1.15rem;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
    padding: 0.9rem 2.2rem; border-radius: 999px; border: 2px solid #fbbf24;
    box-shadow: inset 0 0 0 3px #fbbf24, inset 0 0 0 4px rgba(127,29,29,0.9), 0 6px 18px rgba(0,0,0,0.3);
    outline: 2px dashed #7f1d1d; outline-offset: -8px;
}
.sl-btn-burst:hover { transform: scale(1.03); color: #7f1d1d; }
.sl-btn-burst:focus-visible, .sl-pill:focus-visible {
    outline: 3px solid #fff; outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0,0,0,0.45);
}

/* Soft translucent pill (for colored backgrounds) */
.sl-pill, a.sl-pill {
    display: inline-block; background: rgba(255,255,255,0.16); color: #fff; text-decoration: none;
    padding: 0.55rem 1.4rem; border-radius: 999px; font-weight: 600; border: 1px solid rgba(255,255,255,0.35);
}
.sl-pill:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* Snow drift — soft white mounds along the bottom edge.
   Shares an element with sl-snow: top:auto + animation:none neutralize
   sl-snow's ::before there. */
.sl-drift::before {
    content: ""; position: absolute; top: auto; left: -5%; right: -5%; bottom: -3.5rem; height: 7rem; z-index: 2;
    animation: none; filter: none; opacity: 1;
    background:
        radial-gradient(55% 100% at 12% 0%, #fff 48%, transparent 50%),
        radial-gradient(60% 110% at 38% 12%, #fff 48%, transparent 50%),
        radial-gradient(55% 100% at 65% 0%, #fff 48%, transparent 50%),
        radial-gradient(60% 110% at 90% 10%, #fff 48%, transparent 50%),
        linear-gradient(transparent 28%, #fff 28%);
    pointer-events: none;
}

/* Accordion follows the theme instead of Bootstrap blue. */
.accordion {
    --bs-accordion-active-bg: color-mix(in srgb, var(--primary, #1d4ed8) 10%, #fff);
    --bs-accordion-active-color: var(--primary, #1d4ed8);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary, #1d4ed8) 25%, transparent);
}