/*
  Christmas themes.
  - The menu bar / banner / footer share ONE festive look on every page.
  - Every page shares ONE background, set in appsettings.json → Theme (see "Site background" below).
  Delete this file's <link> in _Layout.cshtml to go back to the plain look.
*/

:root {
    --snow: #FFFFFF;
    --night: #0B2A32;
    --candy-red: #C8102E;
    --holly: #0F5132;
    --gold-bright: #E0B654;
    --card: rgba(255, 253, 248, 0.94);

    /* Reusable snowflake (white, transparent background) */
    --snowflake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='white' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M20 4v32M6 12l28 16M6 28l28-16'/%3E%3Cpath d='M16 7l4 4 4-4M16 33l4-4 4 4'/%3E%3C/g%3E%3C/svg%3E");
    /* Same snowflake, faint - for busy backgrounds */
    --snowflake-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='white' stroke-opacity='.35' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M20 4v32M6 12l28 16M6 28l28-16'/%3E%3Cpath d='M16 7l4 4 4-4M16 33l4-4 4 4'/%3E%3C/g%3E%3C/svg%3E");
    /* Holly leaf + berries */
    --holly-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 30c-6-10-16-10-22-6 4 2 4 6 2 8 6 0 10 2 12 6 2-4 6-6 8-8z' fill='%230F5132' opacity='.35'/%3E%3Cpath d='M30 30c6-10 16-10 22-6-4 2-4 6-2 8-6 0-10 2-12 6-2-4-6-6-8-8z' fill='%230F5132' opacity='.35'/%3E%3Ccircle cx='27' cy='33' r='3' fill='%23C8102E' opacity='.5'/%3E%3Ccircle cx='33' cy='33' r='3' fill='%23C8102E' opacity='.5'/%3E%3Ccircle cx='30' cy='28' r='3' fill='%23C8102E' opacity='.5'/%3E%3C/svg%3E");
    /* Five-point star */
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z' fill='%23E0B654'/%3E%3C/svg%3E");
}

/* ---------- Common: banner, menu bar, footer ---------- */

.top-banner {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 10px, transparent 10px 20px),
        var(--candy-red);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Menu bar (top) and footer (bottom) styles, set in appsettings.json → Theme.
   The layout puts "trim-<key>" on <body>; each style only sets the variables
   below, so the /Styles preview tiles can reuse the same classes.
   To add a style: add a .trim-<key> rule here and a line in Services/SiteBackground.cs. */
:root,
.trim-classic {
    --trim-top-bg: var(--snowflake-soft) 0 0 / 46px 46px, linear-gradient(180deg, #0E4A36 0%, var(--pine) 100%);
    --trim-top-fg: var(--snow);
    --trim-bottom-bg: var(--holly-sprig) top / 60px 60px repeat-x, #FFF9EA;
    --trim-bottom-fg: var(--ink);
    --trim-bottom-link: var(--pine);
    --trim-cta: var(--cranberry);
}

/* Evergreen top and bottom */
.trim-evergreen {
    --trim-top-bg: var(--snowflake-soft) 0 0 / 46px 46px, linear-gradient(180deg, #0E4A36 0%, var(--pine) 100%);
    --trim-top-fg: var(--snow);
    --trim-bottom-bg: var(--trim-top-bg);
    --trim-bottom-fg: rgba(255, 255, 255, 0.85);
    --trim-bottom-link: var(--gold-bright);
}

/* Night sky top and bottom */
.trim-night {
    --trim-top-bg: var(--snowflake-soft) 0 0 / 46px 46px, linear-gradient(180deg, #081C24 0%, var(--night) 100%);
    --trim-top-fg: var(--snow);
    --trim-bottom-bg: var(--trim-top-bg);
    --trim-bottom-fg: rgba(255, 255, 255, 0.85);
    --trim-bottom-link: var(--gold-bright);
}

/* Candy red top and bottom */
.trim-candy {
    --trim-top-bg: var(--snowflake-soft) 0 0 / 46px 46px, linear-gradient(180deg, #D3283F 0%, #A50E25 100%);
    --trim-top-fg: var(--snow);
    --trim-bottom-bg: var(--trim-top-bg);
    --trim-bottom-fg: rgba(255, 255, 255, 0.9);
    --trim-bottom-link: #FFF3C4;
    --trim-cta: var(--holly);
}

/* Cream with holly top and bottom */
.trim-cream {
    --trim-top-bg: var(--holly-sprig) 0 100% / 28px 28px repeat-x, #FFF9EA;
    --trim-top-fg: var(--ink);
    --trim-bottom-bg: var(--holly-sprig) top / 60px 60px repeat-x, #FFF9EA;
    --trim-bottom-fg: var(--ink);
    --trim-bottom-link: var(--pine);
}

.site-header {
    background: var(--trim-top-bg);
    border-bottom: 8px solid transparent;
    border-image: repeating-linear-gradient(135deg, var(--candy-red) 0 12px, var(--snow) 12px 24px) 8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.site-header .brand { color: var(--trim-top-fg); }
.site-header nav a,
.nav-toggle-label { color: var(--trim-top-fg); }
.site-header nav a:hover,
.site-header nav a.active { border-bottom-color: var(--gold-bright); }
.nav-cta { background: var(--trim-cta); }
.site-header .nav-group .nav-cta,
.site-header .nav-menu a { color: var(--snow); }
.nav-menu a { background: var(--holly); border-left: 3px solid var(--gold-bright); }

.site-footer {
    background: var(--trim-bottom-bg);
    padding-top: 4rem;
    border-top: 4px solid var(--gold);
    color: var(--trim-bottom-fg);
}
.site-footer a { color: var(--trim-bottom-link); }

/* Page content sits on cream "cards" so text stays readable on any background */
main > section {
    background: var(--card);
    border-radius: 14px;
    margin: 1.75rem auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

main { padding: 0.5rem 1rem 2rem; }

body { background-attachment: fixed; }

/* ---------- Site background ----------
   The WHOLE site uses one background, set in appsettings.json → Theme.
   The layout puts "site-bg bg-<key>" on <body>; the /Styles page reuses the
   same .bg-<key> classes for its preview swatches.
   To add a background: add a .bg-<key> rule here and a matching line in
   Services/SiteBackground.cs. */

/* Snowy night sky */
.bg-snowy-night {
    background:
        var(--snowflake-soft) 0 0 / 120px 120px,
        var(--snowflake-soft) 60px 60px / 44px 44px,
        linear-gradient(180deg, var(--night) 0%, #123C2E 70%, #1D5A44 100%);
}

/* Warm fireplace glow */
.bg-fireplace {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(255, 170, 60, 0.75) 0%, rgba(200, 16, 46, 0.45) 35%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 52px),
        #5A1A1A;
}

/* Gift wrap stripes with gold dots */
.bg-gift-wrap {
    background:
        radial-gradient(circle, var(--gold-bright) 2px, transparent 3px) 0 0 / 28px 28px,
        repeating-linear-gradient(45deg, #8C2233 0 22px, #A3283C 22px 44px);
}

/* Twinkling string lights */
.bg-string-lights {
    background:
        radial-gradient(circle at 10% 20%, rgba(224, 182, 84, 0.8) 0 8px, transparent 40px),
        radial-gradient(circle at 30% 70%, rgba(200, 16, 46, 0.8) 0 8px, transparent 40px),
        radial-gradient(circle at 55% 15%, rgba(29, 180, 110, 0.7) 0 8px, transparent 40px),
        radial-gradient(circle at 75% 60%, rgba(90, 160, 255, 0.7) 0 8px, transparent 40px),
        radial-gradient(circle at 90% 25%, rgba(224, 182, 84, 0.8) 0 8px, transparent 40px),
        radial-gradient(circle at 20% 90%, rgba(90, 160, 255, 0.7) 0 8px, transparent 40px),
        radial-gradient(circle at 85% 90%, rgba(200, 16, 46, 0.8) 0 8px, transparent 40px),
        #0A1F1A;
}

/* Icy blue with snowflakes */
.bg-icy-blue {
    background:
        var(--snowflake-soft) 0 0 / 90px 90px,
        linear-gradient(180deg, #5E8FB5 0%, #A9CBE3 100%);
}

/* Red and green tartan */
.bg-tartan {
    background:
        repeating-linear-gradient(0deg, rgba(15, 81, 50, 0.55) 0 18px, transparent 18px 36px, rgba(224, 182, 84, 0.25) 36px 38px, transparent 38px 72px),
        repeating-linear-gradient(90deg, rgba(15, 81, 50, 0.55) 0 18px, transparent 18px 36px, rgba(224, 182, 84, 0.25) 36px 38px, transparent 38px 72px),
        #8C2233;
}

/* North Pole airmail paper */
.bg-airmail {
    background:
        repeating-linear-gradient(135deg, var(--candy-red) 0 18px, var(--snow) 18px 36px, #1F4E8C 36px 54px, var(--snow) 54px 72px) top / 100% 14px no-repeat,
        repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.08) 0 1px, transparent 1px 32px),
        #EEDFC0;
}

/* Starry night with moon */
.bg-starry-night {
    background:
        var(--star) 20px 30px / 90px 90px,
        radial-gradient(circle at 80% 15%, rgba(247, 231, 160, 0.9) 0 40px, transparent 42px),
        linear-gradient(180deg, #081C24 0%, var(--night) 55%, #123C2E 100%);
}

/* Gold stars on evergreen */
.bg-gold-stars {
    background:
        var(--star) 0 0 / 48px 48px,
        var(--star) 24px 24px / 22px 22px,
        linear-gradient(135deg, var(--holly) 0%, var(--pine) 100%);
}

/* Quiet holly on cream */
.bg-holly-cream {
    background:
        var(--holly-sprig) 0 0 / 90px 90px,
        #FBF5E6;
}

/* Illustrated scenes (wwwroot/images/backgrounds). A real photo works the same way. */
.bg-tree-lot { background: url("/images/backgrounds/bg-tree-lot.svg") center / cover no-repeat, var(--night); }
.bg-lights-scene { background: url("/images/backgrounds/bg-lights.svg") center / cover no-repeat, var(--night); }
.bg-reindeer { background: url("/images/backgrounds/bg-reindeer.svg") center / cover no-repeat, var(--night); }

/* On the site itself the background stays still while the page scrolls */
body.site-bg { background-attachment: fixed; }

/* /Styles preview page (only on this computer) */
.bg-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.bg-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
}
.bg-option.is-current { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 182, 84, 0.35); }
.bg-swatch { height: 120px; border-radius: 6px; }
.bg-option-text { display: flex; flex-direction: column; gap: 0.15rem; }
.bg-option-text span { font-size: 0.9em; opacity: 0.75; }
.bg-option-badge { font-weight: 600; color: var(--holly); }
.trim-preview { height: 120px; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: #ddd; }
.trim-preview > div { padding: 0.6rem 0.8rem; font-weight: 600; font-size: 0.9em; }
.trim-preview .tp-top { background: var(--trim-top-bg); color: var(--trim-top-fg); }
.trim-preview .tp-bottom { background: var(--trim-bottom-bg); color: var(--trim-bottom-fg); }