/*
Theme Name:   Activyz Child
Theme URI:    https://activyz.com
Description:  Woodmart child theme for Activyz — seasonal token skins, poster type system.
Author:       Activyz
Template:     woodmart
Version:      1.3.0
Text Domain:  activyz-child
*/

/* Colors come exclusively from the token set enqueued in functions.php
   (tokens/<skin>.css) — never hardcode a hex in this file. */

/* ============ WOODMART MAPPING ============
   Route Activyz tokens into Woodmart's own CSS variable hooks so every
   built-in element (buttons, links, titles, widgets) follows the skin. */
html:root {
	/* type */
	--wd-text-font: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
	--wd-title-font: 'Anton', 'Arial Narrow', sans-serif;
	--wd-title-font-weight: 400;
	--wd-widget-title-font: 'Anton', 'Arial Narrow', sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-entities-title-font: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-alternative-font: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
	--wd-header-el-font: 'Rubik', -apple-system, 'Segoe UI', sans-serif;

	/* color */
	--wd-primary-color: var(--accent);
	--wd-alternative-color: var(--pop);
	--wd-text-color: var(--ink);
	--wd-title-color: var(--ink);
	--wd-entities-title-color: var(--ink);
	--wd-entities-title-color-hover: var(--accent);
	--wd-widget-title-color: var(--ink);
	--wd-link-color: var(--ink);
	--wd-link-color-hover: var(--accent);

	/* buttons — poster style: hard offset shadow, square-ish corners */
	--btn-font-family: 'Rubik', sans-serif;
	--btn-font-weight: 700;
	--btn-accented-bgcolor: var(--accent);
	--btn-accented-bgcolor-hover: var(--accent);
	--btn-accented-color: var(--accent-ink);
	--btn-accented-color-hover: var(--accent-ink);
	--btn-accented-brd-radius: 3px;
	--btn-accented-box-shadow: var(--hard) var(--ink);
	--btn-accented-box-shadow-hover: 9px 9px 0 var(--ink);
	--btn-accented-box-shadow-active: 3px 3px 0 var(--ink);
	--btn-default-bgcolor: var(--card);
	--btn-default-bgcolor-hover: var(--card);
	--btn-default-color: var(--ink);
	--btn-default-color-hover: var(--ink);
	--btn-default-brd-radius: 3px;
}

body {
	background-color: var(--paper);
	color: var(--ink);
}

h1, h2, h3 {
	text-transform: uppercase;
	letter-spacing: .015em;
	text-wrap: balance;
}

/* ============ BRAND HEADER ============ */
.az-logo {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-size: 1.8rem;
	letter-spacing: .04em;
	color: var(--ink);
	line-height: 1;
}
.az-logo b { color: var(--accent); font-weight: 400; }
.az-logo:hover { color: var(--ink); }

/* announcement bar (rendered on wp_body_open by the child theme) */
.az-announce {
	background: var(--ink);
	color: var(--paper);
	font-weight: 600;
	font-size: .85rem;
	padding: .6rem 0;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
}
.az-announce b { color: var(--support); }
html[data-skin="halloween"] .az-announce { background: var(--accent); color: var(--accent-ink); }
html[data-skin="halloween"] .az-announce b { color: var(--accent-ink); }

/* ============ STYLE LANGUAGE (ported from design/index.html v3) ============
   Utilities are az- prefixed to avoid collisions with Woodmart/WooCommerce.
   Apply them from Gutenberg "Additional CSS class(es)" on homepage blocks. */

.az-display {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	letter-spacing: .015em;
	text-transform: uppercase;
}

.az-kicker {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	border: 2px solid var(--accent);
	padding: .3rem .8rem;
	border-radius: 999px;
}

.az-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .9rem 1.7rem;
	border-radius: 3px;
	border: 2px solid var(--ink);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: var(--hard) var(--ink);
	transition: transform .16s ease, box-shadow .16s ease;
}
.az-btn::after { content: "→"; transition: transform .16s ease; }
.az-btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); color: var(--accent-ink); }
.az-btn:hover::after { transform: translateX(4px); }
.az-btn:active { transform: translate(0, 0); box-shadow: 3px 3px 0 var(--ink); }
.az-btn-ghost { background: var(--card); color: var(--ink); }
.az-btn-ghost:hover { color: var(--ink); }

/* headline treatments */
.az-hl-outline { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }
.az-hl-chip {
	display: inline-block;
	background: var(--support);
	color: var(--support-ink);
	padding: 0 .45em;
	transform: rotate(-2deg);
	box-shadow: 4px 4px 0 var(--ink);
}

/* sticker badge */
.az-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--accent);
	color: var(--accent-ink);
	border: 2px solid var(--ink);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 9px;
	transform: rotate(-3deg);
}
.az-badge.alt { background: var(--pop); color: #fff; }
html[data-skin="halloween"] .az-badge.alt { color: #12240A; }

/* grain texture overlay — add to hero + brand strip wrappers (position: relative) */
.az-grain { position: relative; }
.az-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* marquee strip */
.az-marq { overflow: hidden; white-space: nowrap; }
.az-marq-track { display: inline-flex; width: max-content; animation: az-marq 26s linear infinite; }
.az-marq-track > span { display: inline-block; padding-right: 2.6rem; }
@keyframes az-marq { to { transform: translateX(-50%); } }

.az-divider {
	border-block: 2px solid var(--ink);
	background: var(--card);
	padding: .9rem 0;
}
.az-divider .az-marq-track { animation-duration: 32s; }
.az-divider span {
	font-family: 'Anton', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.az-divider b { color: var(--accent); font-weight: 400; }

/* scroll reveal — paired with child.js IntersectionObserver */
.az-reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.az-reveal.in { opacity: 1; transform: none; }

/* prices + countdown digits */
.az-price, .az-tabular { font-weight: 700; font-variant-numeric: tabular-nums; }

/* seasonal hero photo treatment */
html[data-skin="halloween"] .az-hero-photo img { filter: grayscale(.25) contrast(1.18) brightness(.88); }
html[data-skin="holiday"] .az-hero-photo img { filter: contrast(1.05) saturate(1.15) sepia(.1); }

/* ============ FOOTER (fixed design, from mockup slot "footer") ============ */
.az-footer { border-top: 2px solid var(--ink); background: var(--card); color: var(--ink); }
.az-f-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 52px 24px 36px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
}
.az-footer h5 {
	margin: 0 0 12px;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.az-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; font-weight: 500; }
.az-footer a { color: var(--ink); }
.az-footer a:hover { color: var(--accent); }
.az-f-logo { font-size: 1.6rem; }
.az-f-blurb { color: var(--muted); font-size: .9rem; margin-top: 10px; max-width: 22rem; }
.az-f-pay { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.az-f-pay span {
	border: 1.5px solid var(--line);
	border-radius: 3px;
	padding: 2px 9px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--muted);
}
.az-f-bottom { border-top: 1.5px solid var(--line); }
.az-f-bottom-in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: .8rem;
	color: var(--muted);
}
@media (max-width: 900px) {
	.az-f-grid { grid-template-columns: 1fr 1fr; }
}

/* accessibility */
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.az-marq-track { animation: none; }
	.az-reveal { opacity: 1; transform: none; transition: none; }
	.az-btn, .az-btn::after { transition: none; }
}