/*
 * CLIENT (xlightstn.com): the night-show look, ported from allen-xlightstn site/xlightstn.css (2026-10-05).
 * A night sky with a string of coloured bulbs under the header, matching the rainbow logo.
 * Loaded on every public page after the template CSS (XlightstnServiceProvider). The admin never loads it.
 *
 * Brand colours come from config/brand.php + Theme settings (--brand-* variables):
 *   dark = night sky, primary = red, secondary = orange (button gradient), accent = gold (links, kickers).
 * The template is built for light pages, so this file maps its light tokens onto the night colours.
 * The bulb colours and the night panel tones below are decoration only (never text on their own).
 */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-display: swap; font-weight: 400 800;
    src: url(/brand/fonts/baloo2-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --xl-bg: var(--brand-dark);
    --xl-bg2: #0b1230;
    --xl-sky: #1b2a66;
    --xl-panel: #10183a;
    --xl-line: rgba(255, 255, 255, .12);
    --xl-ink: var(--brand-on-dark);
    --xl-muted: var(--brand-muted-on-dark);
    --xl-gold: var(--brand-accent);
    --xl-red: var(--brand-primary);
    --xl-orange: var(--brand-secondary);
    --xl-green: #36e39b;
    --xl-blue: #49a7ff;
    --xl-violet: #a874ff;
    --xl-radius: 16px;
    /* Buttons: the AA-safe "-text" shades keep white button text at 4.5:1 or better. */
    --xl-btn-a: var(--brand-primary-text);
    --xl-btn-b: var(--brand-secondary-text);

    /* Template tokens on a night page: light text, night panels, soft lines. */
    --brand-ink-text: var(--xl-ink);
    --brand-muted-text: var(--xl-muted);
    --brand-surface: var(--xl-panel);
    --brand-hairline: var(--xl-line);
}

@layer base {
    html { background: var(--xl-bg); }
    body {
        background: radial-gradient(1200px 600px at 50% -200px, var(--xl-sky) 0%, transparent 60%) no-repeat,
                    linear-gradient(180deg, var(--xl-bg2) 0px, var(--xl-bg) 900px) no-repeat, var(--xl-bg);
        color: var(--xl-ink); font-size: 17px; line-height: 1.6;
    }
    h1, h2, h3, h4 { color: var(--xl-ink); letter-spacing: .01em; }
    a { color: var(--xl-gold); }
    a:hover { color: #fff; }
    :focus-visible { outline: 3px solid var(--xl-gold); outline-offset: 3px; }
    input, select, textarea { color: var(--xl-ink); }
    ::placeholder { color: var(--xl-muted); opacity: 1; }
}

@layer components {
    /* ---------- template parts on a night page ---------- */
    [data-site-header] { background: rgba(7, 11, 28, .92) !important; border-bottom: 0 !important; }
    [data-site-header] > div:first-child { min-height: 84px; }
    [data-site-header] img { height: 56px !important; width: auto; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .12)); }
    /* the string of lights under the header */
    [data-site-header]::after {
        content: ""; display: block; height: 14px;
        background:
            radial-gradient(circle at 10px 7px, var(--xl-red) 0 4px, transparent 5px) 0 0 / 120px 14px repeat-x,
            radial-gradient(circle at 34px 7px, var(--xl-green) 0 4px, transparent 5px) 0 0 / 120px 14px repeat-x,
            radial-gradient(circle at 58px 7px, var(--xl-gold) 0 4px, transparent 5px) 0 0 / 120px 14px repeat-x,
            radial-gradient(circle at 82px 7px, var(--xl-blue) 0 4px, transparent 5px) 0 0 / 120px 14px repeat-x,
            radial-gradient(circle at 106px 7px, var(--xl-violet) 0 4px, transparent 5px) 0 0 / 120px 14px repeat-x,
            linear-gradient(transparent 6px, rgba(255, 255, 255, .18) 6px 7px, transparent 7px);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
        animation: xl-twinkle 2.6s ease-in-out infinite;
    }
    [data-site-header] nav a {
        font-family: var(--brand-font-display); font-weight: 600; font-size: 18px !important; letter-spacing: .02em;
        color: var(--xl-ink) !important; padding: 6px 14px !important; border-radius: 999px; border: 0 !important;
        transition: background .2s, color .2s;
    }
    [data-site-header] nav a:hover { background: rgba(255, 255, 255, .08); color: var(--xl-gold) !important; }
    [data-site-header] nav a[aria-current="page"] { background: linear-gradient(90deg, var(--xl-btn-a), var(--xl-btn-b)); color: #fff !important; }
    [data-site-header] nav ul.flex { gap: .5rem; }
    #mobile-menu { background: var(--xl-bg) !important; border-color: var(--xl-line) !important; }
    #mobile-menu a:not(.btn) { font-size: 20px; padding-left: 14px !important; }

    footer[role="contentinfo"] { background: #050816; border-top: 1px solid var(--xl-line); margin-top: 0; }
    footer[role="contentinfo"] .font-display { color: var(--xl-ink); }
    footer[role="contentinfo"] a { color: var(--xl-gold) !important; }

    main#main { padding-bottom: 24px; }

    .btn {
        border-radius: 999px; border: 0; font-family: var(--brand-font-display); font-weight: 600; font-size: 17px;
        color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
    }
    .btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    .btn-solid, .btn-light, form[data-form] button[type="submit"] {
        background: linear-gradient(90deg, var(--xl-btn-a), var(--xl-btn-b)); color: #fff; box-shadow: 0 6px 22px rgba(255, 77, 94, .3);
    }
    .btn-solid:hover, .btn-light:hover { filter: brightness(1.08); color: #fff; background: linear-gradient(90deg, var(--xl-btn-a), var(--xl-btn-b)); }
    .btn-ghost { color: var(--xl-ink); }
    .card, .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); border-color: var(--xl-line); border-radius: var(--xl-radius); }
    .bg-section-white, .bg-section-light { background: transparent; }
    .bg-section-light .wrap, .bg-section-white .wrap { color: var(--xl-ink); }
    .bg-section-brand {
        background: linear-gradient(120deg, rgba(255, 77, 94, .18), rgba(168, 116, 255, .18)); color: var(--xl-ink);
        border-top: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line);
    }
    .bg-section-dark { background: #050816; }
    .eyebrow, .eyebrow-on-dark { color: var(--xl-gold); font-weight: 700; letter-spacing: .14em; }
    .chip { color: var(--xl-ink); }
    .chip[aria-current] { background: var(--xl-btn-a); border-color: var(--xl-btn-a); color: #fff; }

    /* form fields (resources/views/forms) on night panels */
    form[data-form] input:not([type="checkbox"]):not([type="radio"]), form[data-form] select, form[data-form] textarea {
        background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .28) !important; color: var(--xl-ink);
    }
    form[data-form] input:focus, form[data-form] select:focus, form[data-form] textarea:focus { border-color: var(--xl-gold) !important; }
    form[data-form] select option { background: var(--xl-panel); color: var(--xl-ink); }

    /* the template section that holds a contact form gets the card look */
    .section .wrap.max-w-2xl:has(form[data-form]) {
        background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); border: 1px solid var(--xl-line);
        border-radius: var(--xl-radius); padding: 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    }

    /* ---------- the light show sections (config/client_blocks.php) ---------- */
    .xl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
    .xl-section { margin: 56px auto; }
    .xl-center { text-align: center; }
    .xl-kicker { font-family: var(--brand-font-body); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--xl-gold); margin: 0 0 8px; }
    .xl-lede { font-size: 19px; color: var(--xl-muted); max-width: 680px; }
    .xl-title { font-size: clamp(34px, 5vw, 54px); margin: 0 0 10px; font-weight: 800; }
    .xl-h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 14px; font-weight: 700; }

    .xl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
    .xl-btns-center { justify-content: center; }
    a.xl-btn {
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 22px; border-radius: 999px;
        font-family: var(--brand-font-display); font-weight: 600; font-size: 18px; text-decoration: none; line-height: 1.1;
        background: linear-gradient(90deg, var(--xl-btn-a), var(--xl-btn-b)); color: #fff;
        box-shadow: 0 6px 22px rgba(255, 77, 94, .35); transition: transform .15s, box-shadow .15s;
    }
    a.xl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 77, 94, .45); color: #fff; }
    a.xl-btn.ghost { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
    a.xl-btn.ghost:hover { background: rgba(255, 255, 255, .14); }

    .xl-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); border: 1px solid var(--xl-line);
        border-radius: var(--xl-radius); padding: 26px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); min-width: 0;
    }
    .xl-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 900px) { .xl-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* home banner: the house photo behind a night gradient */
    .xl-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(70px, 12vw, 150px) 0 clamp(60px, 9vw, 110px); }
    .xl-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
    .xl-hero::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(90deg, rgba(7, 11, 28, .95) 0%, rgba(7, 11, 28, .75) 45%, rgba(7, 11, 28, .25) 100%),
                    linear-gradient(0deg, var(--xl-bg) 0%, transparent 35%);
    }
    .xl-hero .xl-title { font-size: clamp(40px, 6.5vw, 72px); text-shadow: 0 0 30px rgba(168, 116, 255, .35); }
    .xl-title span {
        background: linear-gradient(90deg, var(--xl-red), var(--xl-gold), var(--xl-green), var(--xl-blue), var(--xl-violet));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .xl-hero .xl-lede { color: var(--xl-ink); opacity: .9; }
    .xl-radio {
        display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px; border-radius: 999px;
        background: rgba(255, 203, 82, .12); border: 1px solid rgba(255, 203, 82, .35); color: var(--xl-gold); font-weight: 700;
    }

    /* inner page heading */
    .xl-pagehead { position: relative; padding: 56px 0 28px; text-align: center; background: radial-gradient(700px 240px at 50% 0%, rgba(168, 116, 255, .22), transparent 70%); }
    .xl-pagehead .xl-lede { margin: 0 auto; }
    .xl-pagehead + .xl-section { margin-top: 24px; }

    .xl-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .xl-facts li { display: flex; gap: 12px; align-items: baseline; }
    .xl-facts b { color: var(--xl-gold); min-width: 92px; font-weight: 700; }

    .xl-embed { width: 100%; border: 0; display: block; background: transparent; }
    .xl-embed-link { margin-top: 10px; font-size: 15px; text-align: right; }
    .xl-map { position: relative; min-height: 260px; margin-top: 18px; border-radius: 12px; overflow: hidden; background: var(--xl-panel); }
    .xl-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9); }
    .xl-map-card { display: flex; padding: 12px; }
    .xl-map-tall { flex: 1; margin-top: 0; min-height: 320px; }

    .xl-charity { text-align: center; }
    .xl-charity .xl-logo { background: #fff; border-radius: 12px; padding: 18px; display: grid; place-items: center; min-height: 140px; margin-bottom: 18px; }
    .xl-charity .xl-logo img { max-height: 110px; width: auto; }

    /* the template video and call-to-action sections in the night look */
    [data-video-embed] { background: #000 !important; border: 1px solid var(--xl-line); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
    .wrap.max-w-4xl:has([data-video-embed]) { max-width: 1180px; }
    .bg-section-brand { margin: 56px auto; max-width: 1140px; border: 1px solid var(--xl-line); border-radius: var(--xl-radius); text-align: center; }
    .bg-section-brand .wrap { justify-content: center; flex-direction: column; align-items: center; }
    @media (max-width: 1180px) { .bg-section-brand { margin-left: 20px; margin-right: 20px; } }
    .bg-section-brand .btn-light { box-shadow: 0 6px 22px rgba(255, 77, 94, .35); }
}

@layer utilities {
    /* error and alert text uses the primary "-text" shade, made for white pages: use the light-safe shade here */
    .text-primary-text { color: var(--brand-link-on-dark); }
    .bg-white { background-color: var(--xl-panel); }
    .text-muted { color: var(--xl-muted); }
}

@keyframes xl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
    [data-site-header]::after { animation: none; }
    a.xl-btn, a.xl-btn:hover { transition: none; transform: none; }
}

/* Staff text-editing bar and dialog (signed-in staff only). They are light cards from the template, so they keep the
   template's dark ink. Without this the "Edit text" toggle was white text on a white button. */
.st-bar, .st-dialog { --brand-ink-text: #10183a; color: #10183a; }