/*
 * Christmas 2026 — seasonal layer for the Npontu site (Aine + Elementor).
 *
 * Principles:
 *  - Everything is scoped to body.ste-theme--christmas; removing the class restores the original.
 *  - Brand green stays (it doubles as evergreen). Red and gold are accents, not replacements.
 *  - Recolor through the theme's own variables (--primary_hover) and box-shadows/pseudo-elements,
 *    so we never fight Elementor's per-widget selectors with !important.
 *  - Header and footer sit on dark backgrounds, so they use gold for hover (contrast ≥ 9:1);
 *    light content areas use red (contrast ≥ 5.2:1 on #F5F7FA).
 */

/* ---------- Tokens wired into the Aine theme ---------- */
body.ste-theme--christmas {
	--primary_hover: var(--ste-red);
	--ste-ring: 0 0 0 2px var(--ste-gold);
}

body.ste-theme--christmas #masthead,
body.ste-theme--christmas #colophon,
body.ste-theme--christmas .ste-dark {
	--primary_hover: var(--ste-gold-light);
}

/* ---------- Page background: faint snowflake texture on light areas ---------- */
body.ste-theme--christmas {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23128718' stroke-opacity='.035' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M40 28v24M28 40h24M31.5 31.5l17 17M48.5 31.5l-17 17'/%3E%3Cpath d='M120 108v24M108 120h24M111.5 111.5l17 17M128.5 111.5l-17 17'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* ---------- Selection & focus ---------- */
body.ste-theme--christmas ::selection {
	background: var(--ste-red);
	color: #fff;
}

body.ste-theme--christmas a:focus-visible,
body.ste-theme--christmas button:focus-visible,
body.ste-theme--christmas input:focus-visible,
body.ste-theme--christmas select:focus-visible,
body.ste-theme--christmas textarea:focus-visible,
body.ste-theme--christmas [tabindex]:focus-visible {
	outline: 2px solid var(--ste-gold);
	outline-offset: 2px;
}

/* ---------- Header: thin gold rule under the nav, gold hover on dark ---------- */
body.ste-theme--christmas #masthead {
	position: relative;
}

body.ste-theme--christmas #masthead::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ste-gold) 20%, var(--ste-gold) 80%, transparent);
	opacity: .55;
	pointer-events: none;
}

/* Active menu item: gold underline (text-decoration needs no positioning, so it can't drift) */
body.ste-theme--christmas #masthead .current-menu-item > a,
body.ste-theme--christmas #masthead .current_page_parent > a {
	text-decoration: underline;
	text-decoration-color: var(--ste-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Mobile navigation drawer (white panel) */
body.ste-theme--christmas .aine-mobile-nav {
	border-top: 4px solid var(--ste-red);
	box-shadow: inset 0 4px 0 0 var(--ste-gold);
}

/* ---------- Buttons: keep brand green, add a gold ring and red glow on interaction ---------- */
body.ste-theme--christmas .elementor-button,
body.ste-theme--christmas .button,
body.ste-theme--christmas button[type="submit"],
body.ste-theme--christmas input[type="submit"],
body.ste-theme--christmas .more-link {
	box-shadow: var(--ste-ring);
	transition: box-shadow .2s ease, transform .2s ease;
}

body.ste-theme--christmas .elementor-button:hover,
body.ste-theme--christmas .button:hover,
body.ste-theme--christmas button[type="submit"]:hover,
body.ste-theme--christmas input[type="submit"]:hover,
body.ste-theme--christmas .more-link:hover,
body.ste-theme--christmas .elementor-button:focus-visible,
body.ste-theme--christmas .more-link:focus-visible {
	box-shadow: var(--ste-ring), 0 6px 18px -6px var(--ste-red);
}

/* Elementor text-only buttons (no background) should not get a ring */
body.ste-theme--christmas .elementor-button[style*="background: none"],
body.ste-theme--christmas .elementor-widget-aine-nav-menu .elementor-button {
	box-shadow: none;
}

/* ---------- Cards: blog listing, sidebar widgets, Elementor icon boxes ---------- */
body.ste-theme--christmas .site-main article .post-inner,
body.ste-theme--christmas .widget-area .widget {
	position: relative;
}

body.ste-theme--christmas .site-main article .post-inner::before,
body.ste-theme--christmas .widget-area .widget::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(90deg, var(--ste-red) 0 33%, var(--ste-gold) 33% 66%, var(--ste-evergreen) 66% 100%);
	z-index: 1;
	pointer-events: none;
}

body.ste-theme--christmas .elementor-widget-icon-box .elementor-icon {
	filter: drop-shadow(0 0 6px rgba(217, 180, 90, .45));
}

body.ste-theme--christmas .elementor-widget-counter .elementor-counter-number-wrapper {
	text-shadow: 0 0 18px rgba(217, 180, 90, .35);
}

/* ---------- Text links in content (light backgrounds) ---------- */
body.ste-theme--christmas .entry-content a:not(.elementor-button):hover,
body.ste-theme--christmas .elementor-widget-text-editor a:hover,
body.ste-theme--christmas .widget-area a:hover,
body.ste-theme--christmas .entry-meta a:hover {
	color: var(--ste-red);
	text-decoration-color: var(--ste-gold);
}

/* ---------- Forms: search, Contact Form 7, Mailchimp, comments ---------- */
body.ste-theme--christmas input[type="text"]:focus,
body.ste-theme--christmas input[type="email"]:focus,
body.ste-theme--christmas input[type="search"]:focus,
body.ste-theme--christmas input[type="tel"]:focus,
body.ste-theme--christmas input[type="url"]:focus,
body.ste-theme--christmas textarea:focus,
body.ste-theme--christmas select:focus {
	border-color: var(--ste-red);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .15);
}

body.ste-theme--christmas .wpcf7-not-valid-tip,
body.ste-theme--christmas .mc4wp-error {
	/* keep validation red-on-light readable and distinct from decoration */
	font-weight: 600;
}

/* ---------- Pagination ---------- */
body.ste-theme--christmas .pagination .page-numbers.current {
	box-shadow: var(--ste-ring);
}

/* ---------- Footer: gold rule with a row of ornaments ---------- */
body.ste-theme--christmas #colophon {
	position: relative;
}

body.ste-theme--christmas #colophon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 26px;
	z-index: 2;
	pointer-events: none;
	background:
		/* ornaments */
		radial-gradient(circle 6px at 40px 16px, var(--ste-red) 85%, transparent 100%) 0 0 / 240px 26px repeat-x,
		radial-gradient(circle 5px at 120px 14px, var(--ste-gold) 85%, transparent 100%) 0 0 / 240px 26px repeat-x,
		radial-gradient(circle 6px at 200px 16px, var(--ste-evergreen) 85%, transparent 100%) 0 0 / 240px 26px repeat-x,
		/* rule */
		linear-gradient(90deg, transparent, var(--ste-gold) 15%, var(--ste-gold) 85%, transparent) 0 0 / 100% 2px no-repeat;
}

body.ste-theme--christmas #colophon a:hover {
	color: var(--ste-gold-light);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	body.ste-theme--christmas #colophon::before {
		background-size: 160px 26px, 160px 26px, 160px 26px, 100% 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ste-theme--christmas .elementor-button,
	body.ste-theme--christmas .more-link {
		transition: none;
	}
}