/*
 * Snow Clearinghouse appearance: season (data-season) x light/dark (data-theme), both on <html>.
 * Tokens per design handoff v3 §3. Elementor's global color variables are remapped onto these tokens,
 * so widgets that pick kit globals follow the mode without per-widget colors.
 */

/* Winter, light (default) */
:root {
	--sch-control-border: #6B7C88; /* 3:1+ for form fields and buttons */
	--sch-heading: #1F3A4D;
	--sch-bg: #FFFFFF;
	--sch-surface: #E9F0F4;
	--sch-text: #22272B;
	--sch-muted: #4A5A66;
	--sch-link: #1F3A4D;
	--sch-accent: #A4501A;
	--sch-accent-text: #FFFFFF;
	--sch-border: #C9D4DC;
	--sch-focus: #A4501A;
	--sch-footer-bg: #1F3A4D;
	--sch-footer-text: #E9F0F4;
	--sch-footer-link: #FFFFFF;
	--sch-hero-scrim: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .88) 42%, rgba(255, 255, 255, 0) 70%);
	--sch-banner-scrim: linear-gradient(180deg, rgba(10, 24, 34, .35) 0%, rgba(10, 24, 34, .65) 100%);
	--sch-display: "Overpass", "Arial Narrow", Arial, sans-serif;
	--sch-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	color-scheme: light;
}
/* Off-season, light */
html[data-season="offseason"] {
	--sch-control-border: #6E7D71; /* 3:1+ for form fields and buttons */
	--sch-heading: #2D4B40;
	--sch-surface: #EDF1E9;
	--sch-text: #252D28;
	--sch-muted: #4F5D53;
	--sch-link: #2D4B40;
	--sch-accent: #89501F;
	--sch-border: #CDD9CE;
	--sch-focus: #89501F;
	--sch-footer-bg: #2D4B40;
	--sch-footer-text: #EDF1E9;
}
/* Winter, dark */
html[data-theme="dark"] {
	--sch-control-border: #6F8A99; /* 3:1+ for form fields and buttons */
	--sch-heading: #F3F6F8;
	--sch-bg: #101D27;
	--sch-surface: #1B303D;
	--sch-text: #C3D1D9;
	--sch-muted: #9FB2BE;
	--sch-link: #A9D8F3;
	--sch-accent: #F2A23A;
	--sch-accent-text: #17212A;
	--sch-border: #405663;
	--sch-focus: #F2A23A;
	--sch-footer-bg: #0A141B;
	--sch-footer-text: #C3D1D9;
	--sch-footer-link: #F3F6F8;
	--sch-hero-scrim: linear-gradient(90deg, rgba(16, 29, 39, .97) 0%, rgba(16, 29, 39, .9) 42%, rgba(16, 29, 39, .15) 72%);
	--sch-banner-scrim: linear-gradient(180deg, rgba(5, 12, 17, .45) 0%, rgba(5, 12, 17, .75) 100%);
	color-scheme: dark;
}
/* Off-season, dark */
html[data-theme="dark"][data-season="offseason"] {
	--sch-control-border: #76907B; /* 3:1+ for form fields and buttons */
	--sch-heading: #F1F4EE;
	--sch-bg: #151F1B;
	--sch-surface: #24352D;
	--sch-text: #CCD8CD;
	--sch-muted: #A8B8AA;
	--sch-link: #B1D9C1;
	--sch-accent: #DFA05A;
	--sch-accent-text: #17221B;
	--sch-border: #435649;
	--sch-focus: #DFA05A;
	--sch-footer-bg: #0D1411;
	--sch-footer-text: #CCD8CD;
	--sch-hero-scrim: linear-gradient(90deg, rgba(21, 31, 27, .97) 0%, rgba(21, 31, 27, .9) 42%, rgba(21, 31, 27, .15) 72%);
}

/* Remap Elementor kit globals (the kit class sits on <body>) and theme surfaces onto the tokens. */
html [class*="elementor-kit-"] {
	--e-global-color-primary: var(--sch-heading);
	--e-global-color-secondary: var(--sch-surface);
	--e-global-color-text: var(--sch-text);
	--e-global-color-accent: var(--sch-accent);
	background-color: var(--sch-bg);
	color: var(--sch-text);
}
html body,
html #page,
html .zak-content,
html .site-content { background-color: var(--sch-bg); color: var(--sch-text); }
html [class*="elementor-kit-"] a { color: var(--sch-link); text-underline-offset: .15em; }
html [class*="elementor-kit-"] a:hover { color: var(--sch-accent); }
html [class*="elementor-kit-"] h1,
html [class*="elementor-kit-"] h2,
html [class*="elementor-kit-"] h3,
html [class*="elementor-kit-"] .elementor-heading-title { color: var(--sch-heading); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--sch-focus); outline-offset: 2px; }
input, select, textarea { color: var(--sch-text); background-color: var(--sch-bg); border: 1px solid var(--sch-control-border); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Skip link */
.sch-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--sch-bg); color: var(--sch-link); padding: 8px 12px; }
.sch-skip:focus { left: 8px; }

/* ---------- header ---------- */
.sch-header { background: var(--sch-bg); border-bottom: 1px solid var(--sch-border); }
.sch-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--sch-heading) !important; min-width: 0; }
.sch-brand svg { width: 56px; height: 56px; flex: none; }
.sch-brand__text { display: grid; line-height: 1.05; min-width: 0; }
.sch-brand__name { font: 800 24.8px/1 var(--sch-display); letter-spacing: .01em; text-transform: uppercase; }
.sch-brand__tag { font: 600 12px/1.3 var(--sch-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sch-muted); margin-top: 4px; }
.sch-footer .sch-brand { color: var(--sch-footer-link) !important; }
.sch-footer .sch-brand__tag { color: var(--sch-footer-text); }
@media (max-width: 479px) {
	.sch-brand { gap: 8px; }
	.sch-brand svg { width: 36px; height: 36px; }
	.sch-brand__name { font-size: 15px; letter-spacing: 0; }
	.sch-brand__tag { display: none; }
}
.sch-header .elementor-nav-menu--main .elementor-item { color: var(--sch-heading); font: 600 16px var(--sch-body); }
.sch-header .elementor-nav-menu--main .elementor-item:hover,
.sch-header .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--sch-accent); }
.sch-header .elementor-nav-menu--dropdown { background: var(--sch-surface); }
.sch-header .elementor-nav-menu--dropdown a { color: var(--sch-heading) !important; background: transparent !important; min-height: 44px; }
.sch-header .elementor-menu-toggle { color: var(--sch-heading); background: transparent; min-width: 44px; min-height: 44px; }
.sch-header .elementor-menu-toggle svg { fill: var(--sch-heading); }

/* Light/dark switch */
.sch-mode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--sch-control-border); border-radius: 4px; background: transparent; color: var(--sch-heading); cursor: pointer; }
.sch-mode svg { width: 22px; height: 22px; }
.sch-mode .sch-mode__moon { display: none; }
html[data-theme="dark"] .sch-mode .sch-mode__sun { display: none; }
html[data-theme="dark"] .sch-mode .sch-mode__moon { display: block; }
.sch-mode:hover { border-color: var(--sch-accent); }

/* ---------- footer ---------- */
.sch-footer { background: var(--sch-footer-bg); color: var(--sch-footer-text); }
.sch-footer a { color: var(--sch-footer-link) !important; }
.sch-footer .elementor-nav-menu a { color: var(--sch-footer-link) !important; padding: 6px 10px !important; }
.sch-footer p { margin: 0; color: var(--sch-footer-text); font-size: 15.2px; }
.sch-footer .sch-disclosure { max-width: 34ch; border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 20px; }
@media (max-width: 767px) { .sch-footer .sch-disclosure { border-left: 0; padding-left: 0; } }

/* Utility: visually hidden text */
.sch-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header row: brand keeps its size, the nav + switch take the rest (Elementor gives shortcode widgets full width otherwise). */
.sch-header .e-con-inner { flex-wrap: nowrap; }
.sch-header .e-con-inner > .elementor-widget-shortcode { flex: 0 0 auto; width: auto; }
.sch-header .e-con-inner > .e-con { flex: 1 1 auto; width: auto; min-width: 0; }
.sch-header .elementor-widget-nav-menu { flex: 1 1 auto; width: auto; }
.sch-header .elementor-widget-shortcode:has(.sch-mode) { flex: 0 0 auto; width: auto; }
.sch-footer .e-con-inner > .elementor-widget { width: auto; }
.sch-header .e-con-inner > .e-con { flex-wrap: nowrap !important; justify-content: flex-end; gap: 6px !important; }
@media (max-width: 1024px) { .sch-header .elementor-widget-nav-menu { flex: 0 0 auto; } }
@media (max-width: 359px) {
	.sch-brand svg { width: 28px; height: 28px; }
	.sch-brand__name { font-size: 13px; }
	.sch-header .e-con-inner { gap: 4px !important; }
}

/* Elementor owns content width (kit: 1120 px boxed); Zakra's page container must not cap full-width sections at 1170 px. */
.zak-content > .zak-container { max-width: none; padding-left: 0; padding-right: 0; }
.zak-content > .zak-container > .zak-row { margin: 0; }