/*
Theme Name: theopcards
Theme URI: https://dbzkaarten.nl
Description: Dragon Ball TCG price-comparison child theme for Twenty Twenty-Five. "Ki / Energy" identity: warm light and deep space-dark themes with an aura/energy feel, ki-orange + energy-blue + aura-gold accents. Full dark/light switch, WCAG-AA contrast throughout.
Author: dbzkaarten.nl
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: theopcards
*/

/* =====================================================================
   DESIGN TOKENS — single source of truth for ALL colours (theme + plugin).
   :root = light ("daylight"); html[data-theme="dark"] = dark ("deep space").
   Every text/background pair below is verified against WCAG-AA
   (see scratchpad contrast audit). The plugin's opcards.css consumes the
   same --opc-* variables, so light + dark stay in sync everywhere.
   ===================================================================== */
:root {
	color-scheme: light;

	/* Surfaces */
	--opc-bg: #fbf4e8;          /* page (warm daylight) */
	--opc-surface: #fffdf7;     /* raised card / panel (warm white) */
	--opc-surface-2: #f2e6d1;   /* sunken / filled panel */
	--opc-media: #f4ead6;       /* card-image placeholder */
	--opc-header-bg: rgba(251, 244, 232, .85);

	/* Text */
	--opc-text: #241c12;        /* body + headings */
	--opc-muted: #6b5c48;       /* secondary text */
	--opc-border: #e0cdaa;      /* hairlines */

	/* Brand + accents (ki-orange; nudged darker than the base #e0620f so
	   white text on --opc-brand and orange text on --opc-bg both clear WCAG-AA) */
	--opc-brand: #c2530c;       /* button / strong fill (white text passes AA) */
	--opc-brand-hover: #a8480a;
	--opc-on-brand: #ffffff;
	--opc-accent: #b34a08;      /* links + orange text on the page */
	--opc-eyebrow: #b34a08;     /* kicker/eyebrow text */
	--opc-teal: #2563cf;        /* secondary accent (energy blue) */
	--opc-teal-strong: #1f56b4; /* blue as fill w/ white text */
	--opc-brass: #e0a11c;       /* aura-gold accent */

	/* Semantic */
	--opc-up: #1c7a50;          /* price up */
	--opc-down: #b23125;        /* price down */
	--opc-ok-bg: #e7f4ec;  --opc-ok-fg: #12603f;  --opc-ok-bd: #bfe3cd;
	--opc-err-bg: #f9e6e1; --opc-err-fg: #8a2f1e; --opc-err-bd: #edc3b8;

	/* Effects */
	--opc-ring: #2563cf;        /* focus ring */
	--opc-shadow: 0 8px 24px rgba(36, 28, 18, .12);
	--opc-shadow-sm: 0 2px 8px rgba(36, 28, 18, .10);
	--opc-hero-grid: rgba(36, 28, 18, .05);
	--opc-glow-teal: rgba(37, 99, 207, .16);
	--opc-glow-brass: rgba(224, 161, 28, .18);

	/* Shape */
	--opc-radius-sm: 8px;
	--opc-radius: 12px;
	--opc-radius-pill: 999px;

	/* Decorative motif icons (original energy/aura shapes, theme-agnostic; used as
	   mask-image so they take a token colour and adapt to light/dark). */
	/* --opc-ico-hat: 4-point energy spark/starburst (footer flourish). */
	--opc-ico-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 14 9.6 22.5 12 14 14.4 12 22.5 10 14.4 1.5 12 10 9.6Z'/%3E%3C/svg%3E");
	/* --opc-ico-compass: small spark/star (section-title marker). */
	--opc-ico-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 13.5 10.5 21.5 12 13.5 13.5 12 21.5 10.5 13.5 2.5 12 10.5 10.5Z'/%3E%3C/svg%3E");
	/* --opc-ico-compass-rose: radiant 8-point starburst. */
	--opc-ico-compass-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 13.2 10.8 23 12 13.2 13.2 12 23 10.8 13.2 1 12 10.8 10.8Z'/%3E%3Cpath d='M12 4 12.8 11.2 20 12 12.8 12.8 12 20 11.2 12.8 4 12 11.2 11.2Z' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
	/* --opc-ico-chest: glowing energy orb (core + short aura rays), empty-state. */
	--opc-ico-chest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Crect x='11.1' y='0.6' width='1.8' height='3.4' rx='.9'/%3E%3Crect x='11.1' y='20' width='1.8' height='3.4' rx='.9'/%3E%3Crect x='0.6' y='11.1' width='3.4' height='1.8' rx='.9'/%3E%3Crect x='20' y='11.1' width='3.4' height='1.8' rx='.9'/%3E%3C/svg%3E");
	/* --opc-wave: aura-ripple / energy-streak crest (repeats along footer top). */
	--opc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 0 9 15 3 30 9 45 3 60 9 75 3 90 9 105 3 120 9 120 18Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
	color-scheme: dark;

	--opc-bg: #0e1220;
	--opc-surface: #171c2e;
	--opc-surface-2: #232a42;
	--opc-media: #1a2036;
	--opc-header-bg: rgba(14, 18, 32, .82);

	--opc-text: #f2ede2;
	--opc-muted: #b0a794;
	--opc-border: #37405e;

	/* Ki-orange on dark; nudged darker than the base #f0771a so white text on
	   --opc-brand still clears WCAG-AA. */
	--opc-brand: #c2530c;
	--opc-brand-hover: #ad490a;
	--opc-on-brand: #ffffff;
	--opc-accent: #ff9a3a;
	--opc-eyebrow: #f4c23a;
	--opc-teal: #4f9dff;
	--opc-teal-strong: #4f9dff;
	--opc-brass: #f4c23a;

	--opc-up: #37c98d;
	--opc-down: #ff6b5b;
	--opc-ok-bg: #10331f;  --opc-ok-fg: #7fe0ab;  --opc-ok-bd: #1f5637;
	--opc-err-bg: #3a1712; --opc-err-fg: #ff9d8a; --opc-err-bd: #6a2c22;

	--opc-ring: #4f9dff;
	--opc-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--opc-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40);
	--opc-hero-grid: rgba(242, 237, 226, .05);
	--opc-glow-teal: rgba(79, 157, 255, .16);
	--opc-glow-brass: rgba(244, 194, 58, .12);
}

/* Smooth, non-janky theme switch (colours only). */
body,
.opc-siteheader,
.opc-sitefooter,
.opc-hero,
.opc-tile,
.opc-mover,
.opc-price,
.opc-chip {
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Base */
body { background: var(--opc-bg); color: var(--opc-text); }
::selection { background: var(--opc-teal); color: #fff; }
:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible,
.opc-themetoggle:focus-visible {
	outline: 2px solid var(--opc-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Site header (translucent chrome bar) ---------- */
.opc-siteheader {
	width: 100%;
	background: var(--opc-header-bg);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--opc-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.opc-siteheader__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .8rem 1.25rem;
}
.opc-headertools { display: flex; align-items: center; gap: 1rem; }

/* ---------- Brand logo (ki-orb emblem + wordmark) ---------- */
.opc-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.opc-logo__mark { width: 38px; height: 38px; flex: 0 0 auto; display: block; transition: transform .2s ease; }
.opc-logo:hover .opc-logo__mark { transform: rotate(-5deg) scale(1.03); }
.opc-logo__word {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.015em;
	color: var(--opc-text);
	line-height: 1;
}
.opc-logo__op { color: var(--opc-accent); }   /* "Kaarten" accent = Dragon Ball */
.opc-logo__tld { color: var(--opc-muted); font-size: .58em; font-weight: 600; letter-spacing: 0; margin-left: .06em; }
@media (max-width: 480px) { .opc-logo__word { font-size: 1.3rem; } .opc-logo__mark { width: 33px; height: 33px; } }

/* Close the theme's default gap between the sticky header and the hero/main */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* Nav */
.opc-nav .wp-block-navigation-item__content { color: var(--opc-text); text-decoration: none; opacity: .9; }
.opc-nav .wp-block-navigation-item__content:hover,
.opc-nav .current-menu-item .wp-block-navigation-item__content { opacity: 1; color: var(--opc-accent); }
.opc-nav a:hover { color: var(--opc-accent) !important; }
/* mobile overlay */
.opc-nav .wp-block-navigation__responsive-container-open,
.opc-nav .wp-block-navigation__responsive-container-close { color: var(--opc-text); }
.opc-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--opc-surface); }
.opc-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--opc-text); }

/* ---------- Theme toggle ---------- */
.opc-themetoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--opc-border);
	border-radius: var(--opc-radius-pill);
	background: var(--opc-surface);
	color: var(--opc-text);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	flex: 0 0 auto;
}
.opc-themetoggle:hover { border-color: var(--opc-teal); color: var(--opc-teal); }
.opc-themetoggle svg { width: 20px; height: 20px; display: block; }
/* Show the icon for the mode you'll switch TO. */
.opc-themetoggle__sun { display: none; }
.opc-themetoggle__moon { display: block; }
html[data-theme="dark"] .opc-themetoggle__sun { display: block; }
html[data-theme="dark"] .opc-themetoggle__moon { display: none; }

/* ---------- Hero (energy-field band, theme-aware) ---------- */
.opc-hero {
	width: 100%;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(120% 130% at 85% -20%, var(--opc-glow-teal) 0%, transparent 55%),
		radial-gradient(120% 130% at 5% 120%, var(--opc-glow-brass) 0%, transparent 55%),
		var(--opc-bg);
	color: var(--opc-text);
	text-align: center;
	padding: clamp(3.25rem, 8vw, 6rem) 1.25rem clamp(3.5rem, 9vw, 6.5rem);
	overflow: hidden;
}
/* faint energy-field grid */
.opc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--opc-hero-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--opc-hero-grid) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%);
	mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%);
}
.opc-hero__inner { max-width: 820px; margin-inline: auto; position: relative; }
.opc-hero__eyebrow {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: .8rem; letter-spacing: .18em; font-weight: 700;
	text-transform: uppercase;
	color: var(--opc-eyebrow); margin: 0 0 1rem;
}
.opc-hero__title {
	color: var(--opc-text);
	font-family: "Fraunces", Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 5.4vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0 0 1.1rem;
	text-wrap: balance;
}
.opc-hero__lede {
	color: var(--opc-muted); font-size: 1.18rem; line-height: 1.6;
	max-width: 46ch; margin: 0 auto 1.9rem;
}
.opc-hero__cta { gap: .75rem; }
.opc-hero__cta .wp-block-button__link { padding: .82rem 1.5rem; font-weight: 700; }
.opc-hero__cta .is-style-outline .wp-block-button__link {
	background: transparent; color: var(--opc-text);
	border: 2px solid color-mix(in srgb, var(--opc-text) 40%, transparent);
}
.opc-hero__cta .is-style-outline .wp-block-button__link:hover {
	border-color: var(--opc-teal); color: var(--opc-teal);
}

/* ---------- Home sections ---------- */
.opc-home__movers { padding: clamp(2.5rem, 6vw, 4rem) 1.25rem 0; }
.opc-home__browse { padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(2.5rem, 6vw, 4rem); }
.opc-section-title { margin: 0 0 1.5rem; position: relative; }

/* ---------- Footer ---------- */
.opc-sitefooter {
	width: 100%;
	background: var(--opc-surface);
	color: var(--opc-muted);
	border-top: 1px solid var(--opc-border);
	margin-top: 4rem;
	padding: 2.5rem 1.25rem;
}
.opc-sitefooter__inner { max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; }
.opc-footernav a { color: var(--opc-text) !important; text-decoration: none; font-weight: 600; opacity: .85; }
.opc-footernav a:hover { color: var(--opc-accent) !important; opacity: 1; }
.opc-sitefooter .opc-disclaimer { color: var(--opc-muted); max-width: 70ch; margin: 0 auto; font-size: .8rem; }
.opc-copyright { color: var(--opc-muted); font-size: .82rem; margin: 0; opacity: .8; }

/* ---------- Dragon Ball "ki / energy" decorative motifs (original, non-infringing) ---------- */
/* Spark marker before each home section title. */
.opc-section-title { display: flex; align-items: center; gap: .6rem; }
.opc-section-title::before {
	content: ""; flex: 0 0 auto;
	width: .78em; height: .78em;
	background: var(--opc-brass);
	-webkit-mask: var(--opc-ico-compass) center / contain no-repeat;
	mask: var(--opc-ico-compass) center / contain no-repeat;
}

/* Hero decor layer: starburst (corner), ki-orb + energy streaks along the bottom. */
.opc-hero__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.opc-decor-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 74px; display: block; }
.opc-decor-ship { position: absolute; right: 6%; bottom: 24px; width: 164px; height: 164px; }
.opc-decor-compass { position: absolute; left: 3.5%; top: 15%; width: 132px; height: 132px; }
@media (max-width: 1024px) { .opc-decor-compass { display: none; } }
@media (max-width: 640px) { .opc-decor-ship { width: 116px; bottom: 16px; right: 3%; } }

/* Footer energy-spark flourish above the nav. */
.opc-footermark {
	width: 30px; height: 30px; margin: 0 auto;
	background: var(--opc-brass);
	-webkit-mask: var(--opc-ico-hat) center / contain no-repeat;
	mask: var(--opc-ico-hat) center / contain no-repeat;
	opacity: .9;
}

/* Aura-ripple crest along the top edge of the footer. */
.opc-sitefooter { position: relative; }
.opc-sitefooter::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 15px; transform: translateY(-100%);
	background: var(--opc-teal); opacity: .5;
	-webkit-mask: var(--opc-wave) repeat-x bottom / 120px 15px;
	mask: var(--opc-wave) repeat-x bottom / 120px 15px;
	pointer-events: none;
}

/* ---------- Language switcher ---------- */
.opc-langsel { position: relative; }
.opc-langsel > summary {
	list-style: none;
	display: inline-flex; align-items: center; gap: .4rem;
	height: 40px; padding: 0 .7rem;
	border: 1px solid var(--opc-border); border-radius: var(--opc-radius-pill);
	background: var(--opc-surface); color: var(--opc-text);
	cursor: pointer; font-size: .9rem; font-weight: 600;
}
.opc-langsel > summary::-webkit-details-marker { display: none; }
.opc-langsel > summary:hover { border-color: var(--opc-teal); color: var(--opc-teal); }
.opc-langsel > summary:focus-visible { outline: 2px solid var(--opc-ring); outline-offset: 2px; }
.opc-langsel__menu {
	position: absolute; inset-inline-end: 0; top: calc(100% + .45rem); z-index: 200;
	background: var(--opc-surface); border: 1px solid var(--opc-border);
	border-radius: var(--opc-radius); box-shadow: var(--opc-shadow);
	padding: .4rem; min-width: 300px; max-height: 62vh; overflow: auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: .1rem;
}
.opc-langsel__menu a {
	display: block; padding: .42rem .6rem; border-radius: var(--opc-radius-sm);
	text-decoration: none; color: var(--opc-text); font-size: .88rem; font-weight: 500; white-space: nowrap;
}
.opc-langsel__menu a:hover { background: var(--opc-surface-2); }
.opc-langsel__menu a.is-active { color: var(--opc-accent); font-weight: 700; }
@media (max-width: 520px) {
	.opc-langsel > summary span { display: none; }
	.opc-langsel__menu { position: fixed; inset-inline: 1rem; top: 64px; }
}

/* SEO-safe "available in your language" suggestion bar (dismissible, no redirect). */
.opc-langbanner {
	display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
	background: var(--opc-surface-2); color: var(--opc-text);
	border-bottom: 1px solid var(--opc-border);
	padding: .5rem 1rem; font-size: .9rem; text-align: center;
}
.opc-langbanner__go { color: var(--opc-accent); font-weight: 700; text-decoration: underline; }
.opc-langbanner__go:hover { color: var(--opc-teal); }
.opc-langbanner__x { border: 0; background: none; color: var(--opc-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.opc-langbanner__x:hover { color: var(--opc-text); }