/*
Theme Name: SEOOn
Theme URI: https://seoon.page/
Author: SEOOn.page
Description: Tema hijo de Twenty Twenty-Five para SEOOn.page: marca, modo oscuro, plantillas de herramientas, estudios y glosario, y animaciones al hacer scroll.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: seoon
*/

/* ---------- modo oscuro: redefine la paleta de theme.json ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #0a1222;
		--wp--preset--color--contrast: #f2f6fb;
		--wp--preset--color--accent-1: #2ee6b5;
		--wp--preset--color--accent-2: #19c2b6;
		--wp--preset--color--accent-3: #f2f6fb;
		--wp--preset--color--accent-4: #b5c0d3;
		--wp--preset--color--accent-5: #111b30;
		--wp--preset--color--accent-6: #12332f;
		--seoon-line: #22304b;
		--seoon-surface: #111b30;
		--seoon-muted: #8a97ad;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #0a1222;
	--wp--preset--color--contrast: #f2f6fb;
	--wp--preset--color--accent-1: #2ee6b5;
	--wp--preset--color--accent-2: #19c2b6;
	--wp--preset--color--accent-3: #f2f6fb;
	--wp--preset--color--accent-4: #b5c0d3;
	--wp--preset--color--accent-5: #111b30;
	--wp--preset--color--accent-6: #12332f;
	--seoon-line: #22304b;
	--seoon-surface: #111b30;
	--seoon-muted: #8a97ad;
}
:root {
	--seoon-line: #e3e8ee;
	--seoon-surface: #ffffff;
	--seoon-muted: #6b778c;
	--seoon-radius: 16px;
}
body { background: var(--wp--preset--color--base); }

/* ---------- logo claro / oscuro ---------- */
.seoon-logo { display: inline-flex; line-height: 0; }
.seoon-logo img { height: 44px; width: auto; }
.seoon-logo .is-dark { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .seoon-logo .is-light { display: none; }
	:root:not([data-theme="light"]) .seoon-logo .is-dark { display: inline; }
}
:root[data-theme="dark"] .seoon-logo .is-light { display: none; }
:root[data-theme="dark"] .seoon-logo .is-dark { display: inline; }
.site-footer .seoon-logo img { height: 52px; }
.site-footer { border-top: 1px solid var(--seoon-line); }
.site-footer ul { list-style: none; padding-left: 0; }
.site-footer li { margin: .35em 0; }
.site-footer a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--accent-2); }

/* ---------- cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--seoon-line); }
.admin-bar .site-header { top: 32px; }
.site-header .wp-block-navigation a { font-weight: 500; text-decoration: none; }
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-2); }
.seoon-theme-toggle { background: none; border: 1px solid var(--seoon-line); color: var(--wp--preset--color--accent-4); border-radius: 99px; width: 38px; height: 38px; cursor: pointer; font-size: 16px; line-height: 1; }
.seoon-theme-toggle:hover { border-color: var(--wp--preset--color--accent-2); }

/* ---------- componentes ---------- */
.seoon-card { background: var(--seoon-surface); border: 1px solid var(--seoon-line); border-radius: var(--seoon-radius); }
.seoon-kicker { display: flex; gap: 8px; align-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent-2); }
.seoon-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent-1); }
.seoon-hero { background:
	radial-gradient(900px 420px at 90% -20%, color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent), transparent 60%),
	radial-gradient(700px 380px at -10% 120%, color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, transparent), transparent 60%); }
.seoon-front .seoon-hero { padding: clamp(48px, 8vw, 104px) clamp(20px, 4vw, 48px); border-radius: 0 0 28px 28px; }
.seoon-front .seoon-hero h1 { max-width: 16ch; }
.seoon-front .seoon-hero .has-large-font-size { max-width: 60ch; }
.seoon-front > .wp-block-post-content > .wp-block-group + .wp-block-group { margin-top: clamp(48px, 7vw, 88px); }
.wp-block-button__link { font-weight: 600; }
.is-style-seoon-cta .wp-block-button__link { background: var(--wp--preset--color--accent-1); color: #0a1b3f; }
.wp-block-post-content a:where(:not(.wp-element-button)) { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.seoon-breadcrumbs { font-size: .88rem; color: var(--seoon-muted); }
.seoon-breadcrumbs a { color: inherit; }
.wp-block-post-content :where(table) { font-size: .95rem; }
.wp-block-details { border: 1px solid var(--seoon-line); border-radius: 14px; padding: 14px 18px; background: var(--seoon-surface); }
.wp-block-details + .wp-block-details { margin-top: 10px; }
.wp-block-details summary { font-weight: 600; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 8px; }
.wp-block-post-content code { background: var(--wp--preset--color--accent-5); padding: .1em .35em; border-radius: 6px; font-size: .9em; }
.wp-block-post-content pre code { background: none; padding: 0; }
.wp-block-post-content :where(pre) { border-radius: 12px; border: 1px solid var(--seoon-line); }

/* ---------- animaciones (solo si el usuario no pide reducir movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .seoon-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
		transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s; transition-delay: calc(var(--i) * 60ms); }
	.js .seoon-words.is-visible .w { opacity: 1; transform: none; filter: none; }
	.js .seoon-fade { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
	.js .seoon-fade.is-visible { opacity: 1; transform: none; }
	.js .seoon-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .55s, transform .55s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
	.js .seoon-stagger.is-visible > * { opacity: 1; transform: none; }
	.js .seoon-mask { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
		-webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
		transition: -webkit-mask-position 1.1s cubic-bezier(.2,.7,.2,1), mask-position 1.1s cubic-bezier(.2,.7,.2,1); }
	.js .seoon-mask.is-visible { -webkit-mask-position: 0 0; mask-position: 0 0; }
	.js .seoon-clip { clip-path: inset(0 0 100% 0 round 16px); transition: clip-path 1s cubic-bezier(.2,.7,.2,1); }
	.js .seoon-clip-wrap.is-visible .seoon-clip { clip-path: inset(0 0 0 0 round 16px); }
}

@media (max-width: 781px) {
	.seoon-logo img { height: 36px; }
	.admin-bar .site-header { top: 0; }
}