/*
Theme Name: Edyzoa Spark
Theme URI: https://edyzoa.com/
Author: Edyzoa
Author URI: https://edyzoa.com/
Description: A colourful, fast and accessible kids-learning theme for Edyzoa. Includes an original owl identity, playful learning-world homepage, calm article layouts, local assets and clearly labelled ad areas.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edyzoa-spark
Tags: blog, education, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready
*/

:root {
	--navy-950: #071d38;
	--navy-900: #0b2e59;
	--navy-800: #123d70;
	--navy-700: #18538d;
	--sky-500: #129ed0;
	--sky-300: #84d7ef;
	--sky-100: #dff6fc;
	--leaf-600: #3a9d35;
	--leaf-100: #e7f7e4;
	--sun-500: #ffb51b;
	--sun-100: #fff4cf;
	--coral-500: #ef4b3e;
	--coral-100: #ffebe8;
	--violet-500: #755ac6;
	--violet-100: #eee9ff;
	--ink: #17283a;
	--muted: #607286;
	--line: #dce7ef;
	--paper: #ffffff;
	--wash: #f5faff;
	--shadow-sm: 0 8px 28px rgba( 7, 41, 72, .08 );
	--shadow-md: 0 22px 60px rgba( 7, 41, 72, .14 );
	--radius-sm: 12px;
	--radius-md: 22px;
	--radius-lg: 36px;
	--shell: 1220px;
	--reading: 780px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

body.nav-open {
	overflow: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

a {
	color: var(--navy-800);
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
}

a:hover {
	color: var(--coral-500);
}

button,
input,
textarea,
select {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 3px solid var(--sun-500);
	outline-offset: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 .55em;
	color: var(--navy-950);
	font-family: ui-rounded, "Nunito Sans", Inter, ui-sans-serif, sans-serif;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.14;
}

h1 {
	font-size: clamp( 2.65rem, 6vw, 5rem );
}

h2 {
	font-size: clamp( 2rem, 4vw, 3.15rem );
}

h3 {
	font-size: clamp( 1.25rem, 2vw, 1.55rem );
}

p {
	margin: 0 0 1.25em;
}

.site-shell {
	width: min( calc( 100% - 40px ), var(--shell) );
	margin-inline: auto;
}

.narrow-shell {
	max-width: var(--reading);
}

.section-space {
	padding-block: clamp( 68px, 8vw, 112px );
}

.section-tint {
	background: var(--wash);
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 99999;
	top: 12px;
	left: 12px;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--paper);
	box-shadow: var(--shadow-md);
	font-weight: 800;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--navy-700);
	font-size: .77rem;
	font-weight: 900;
	letter-spacing: .13em;
	line-height: 1.3;
	text-transform: uppercase;
}

.eyebrow span {
	color: var(--sun-500);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: .94rem;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover {
	transform: translateY( -2px );
}

.button--primary {
	background: var(--navy-900);
	box-shadow: 0 10px 24px rgba( 11, 46, 89, .22 );
	color: var(--paper);
}

.button--primary:hover {
	background: var(--navy-700);
	color: var(--paper);
}

.button--ghost {
	border-color: rgba( 11, 46, 89, .22 );
	background: rgba( 255, 255, 255, .66 );
	color: var(--navy-900);
}

.button--small {
	min-height: 42px;
	padding: 10px 17px;
	background: var(--navy-900);
	color: var(--paper);
}

.button--small:hover {
	color: var(--paper);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .92rem;
	font-weight: 900;
	text-decoration: none;
}

/* Header */
.site-header {
	position: sticky;
	z-index: 1000;
	top: 0;
	border-bottom: 1px solid rgba( 11, 46, 89, .09 );
	background: rgba( 255, 255, 255, .94 );
	box-shadow: 0 4px 18px rgba( 7, 41, 72, .04 );
	backdrop-filter: blur( 14px );
}

.admin-bar .site-header {
	top: 32px;
}

.trust-bar {
	background: var(--navy-950);
	color: #dfeeff;
	font-size: .75rem;
	font-weight: 700;
}

.trust-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 34px;
}

.trust-bar p {
	margin: 0;
}

.trust-bar p span {
	color: var(--sun-500);
}

.trust-bar nav {
	display: flex;
	gap: 18px;
}

.trust-bar a {
	color: #dfeeff;
	text-decoration: none;
}

.trust-bar a:hover {
	color: var(--sun-500);
}

.header-main {
	display: grid;
	grid-template-columns: minmax( 175px, 230px ) 1fr 44px;
	align-items: center;
	gap: 24px;
	min-height: 88px;
}

.site-branding {
	min-width: 0;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	max-width: 218px;
}

.custom-logo {
	width: auto;
	max-width: 218px;
	height: 70px;
	object-fit: contain;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--navy-950);
	text-decoration: none;
}

.brand-mark:hover {
	color: var(--navy-950);
}

.brand-mark__symbol {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 16px 16px 16px 5px;
	background: linear-gradient( 145deg, var(--sky-500), var(--navy-700) );
	box-shadow: 0 9px 20px rgba( 18, 158, 208, .22 );
	color: var(--paper);
	font-size: 1.5rem;
	font-weight: 900;
}

.brand-mark strong,
.brand-mark small {
	display: block;
}

.brand-mark strong {
	font-size: 1.35rem;
	letter-spacing: -.045em;
	line-height: 1;
}

.brand-mark small {
	margin-top: 5px;
	color: var(--muted);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.primary-navigation {
	justify-self: center;
}

.primary-menu,
.primary-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 11px;
	border-radius: 12px;
	color: var(--ink);
	font-size: .82rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	background: var(--sky-100);
	color: var(--navy-900);
}

.primary-menu .sub-menu {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	visibility: hidden;
	width: 250px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY( -5px );
	transition: .2s ease;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY( 0 );
}

.search-toggle,
.menu-toggle,
.back-to-top {
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--navy-900);
	color: var(--paper);
	cursor: pointer;
}

.search-toggle svg {
	width: 21px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
}

.menu-toggle {
	display: none;
}

.header-search {
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.header-search .site-shell {
	padding-block: 18px;
}

.search-form {
	display: flex;
	width: min( 100%, 560px );
	gap: 8px;
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	height: 50px;
	padding: 0 17px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	color: var(--ink);
}

.search-field:focus {
	border-color: var(--sky-500);
	box-shadow: 0 0 0 4px rgba( 18, 158, 208, .12 );
	outline: 0;
}

.search-submit {
	padding-inline: 20px;
	border: 0;
	border-radius: 14px;
	background: var(--navy-900);
	color: var(--paper);
	font-weight: 800;
	cursor: pointer;
}

/* Ad regions remain invisible until the owner adds a widget. */
.ad-region {
	margin-block: 30px;
	text-align: center;
}

.edy-ad-widget {
	min-height: 90px;
	padding: 10px;
	border: 1px dashed #c9d6df;
	border-radius: var(--radius-sm);
	background: #fbfcfd;
}

.ad-label {
	display: block;
	margin-bottom: 7px;
	color: #768593;
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Homepage hero */
.hero-section {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( circle at 8% 18%, rgba( 255, 181, 27, .20 ), transparent 25% ),
		radial-gradient( circle at 92% 20%, rgba( 18, 158, 208, .20 ), transparent 30% ),
		linear-gradient( 140deg, #f7fdff 0%, #f4fbff 48%, #fff9ec 100% );
}

.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax( 0, .95fr ) minmax( 440px, .85fr );
	align-items: center;
	gap: clamp( 52px, 7vw, 100px );
	min-height: 670px;
	padding-block: clamp( 70px, 9vw, 125px );
}

.hero-copy h1 {
	max-width: 800px;
}

.hero-copy h1::after {
	display: block;
	width: 110px;
	height: 8px;
	margin-top: 22px;
	border-radius: 99px;
	background: linear-gradient( 90deg, var(--sun-500) 0 34%, var(--leaf-600) 34% 66%, var(--coral-500) 66% );
	content: "";
}

.hero-intro {
	max-width: 650px;
	margin: 25px 0 30px;
	color: #43586d;
	font-size: clamp( 1.05rem, 2vw, 1.25rem );
	line-height: 1.65;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-proof {
	display: flex;
	gap: 24px;
	margin-top: 38px;
}

.hero-proof span {
	padding-right: 24px;
	border-right: 1px solid rgba( 11, 46, 89, .16 );
	color: var(--muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1.35;
	text-transform: uppercase;
}

.hero-proof span:last-child {
	padding-right: 0;
	border: 0;
}

.hero-proof strong {
	display: block;
	margin-bottom: 3px;
	color: var(--navy-900);
	font-size: 1.4rem;
	letter-spacing: -.03em;
	line-height: 1;
}

.hero-feature {
	position: relative;
	margin: 20px;
}

.hero-feature::before,
.hero-feature::after {
	position: absolute;
	z-index: -1;
	border-radius: var(--radius-lg);
	content: "";
}

.hero-feature::before {
	inset: -18px 20px 25px -20px;
	background: var(--sun-100);
	transform: rotate( -4deg );
}

.hero-feature::after {
	inset: 25px -23px -20px 35px;
	background: var(--sky-100);
	transform: rotate( 4deg );
}

.hero-feature__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 10px solid var(--paper);
	border-radius: var(--radius-lg);
	background: var(--sky-100);
	box-shadow: var(--shadow-md);
}

.hero-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.hero-feature:hover .hero-feature__media img {
	transform: scale( 1.035 );
}

.hero-placeholder {
	display: grid;
	height: 100%;
	place-items: center;
	background: linear-gradient( 145deg, var(--sky-100), var(--leaf-100) );
}

.hero-placeholder svg {
	width: 35%;
	fill: none;
	stroke: var(--navy-700);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.hero-feature__card {
	position: relative;
	z-index: 3;
	width: calc( 100% - 60px );
	margin: -86px auto 0;
	padding: 22px 25px;
	border: 1px solid rgba( 255, 255, 255, .9 );
	border-radius: 22px;
	background: rgba( 255, 255, 255, .96 );
	box-shadow: var(--shadow-md);
}

.hero-feature__label {
	margin: 10px 0 4px;
	color: var(--coral-500);
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hero-feature__card h2 {
	margin-bottom: 9px;
	font-size: clamp( 1.25rem, 2.2vw, 1.75rem );
}

.hero-feature__card h2 a,
.post-card__title a {
	color: inherit;
	text-decoration: none;
}

.float-badge {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 13px;
	border: 4px solid var(--paper);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
	font-size: .72rem;
	font-weight: 900;
}

.float-badge strong {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .7 );
}

.float-badge--safe {
	top: 12%;
	left: -42px;
	background: var(--leaf-100);
	color: #286d25;
}

.float-badge--fun {
	top: 36%;
	right: -42px;
	background: var(--sun-100);
	color: #855900;
}

.hero-orb {
	position: absolute;
	border: 2px dashed rgba( 11, 46, 89, .12 );
	border-radius: 50%;
}

.hero-orb--one {
	top: 70px;
	right: -90px;
	width: 300px;
	height: 300px;
}

.hero-orb--two {
	bottom: -120px;
	left: -100px;
	width: 270px;
	height: 270px;
}

/* Sections and cards */
.section-heading {
	margin-bottom: 36px;
}

.section-heading > p:not(.eyebrow) {
	max-width: 620px;
	color: var(--muted);
}

.section-heading--center {
	max-width: 760px;
	margin: 0 auto 42px;
	text-align: center;
}

.section-heading--center .eyebrow {
	justify-content: center;
}

.section-heading--split {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
}

.section-heading--split > p,
.section-heading--split > .search-form {
	width: min( 100%, 420px );
	margin-bottom: 8px;
}

.topic-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 14px;
}

.topic-card {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: 270px;
	padding: 24px;
	flex-direction: column;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--navy-950);
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}

.topic-card::after {
	position: absolute;
	right: -32px;
	bottom: -32px;
	width: 120px;
	height: 120px;
	border: 1px dashed currentColor;
	border-radius: 50%;
	opacity: .14;
	content: "";
}

.topic-card:hover {
	color: var(--navy-950);
	box-shadow: var(--shadow-md);
	transform: translateY( -6px );
}

.topic-card--sky {
	border-color: #bdeaf5;
	background: var(--sky-100);
}

.topic-card--sun {
	border-color: #f8dfa0;
	background: var(--sun-100);
}

.topic-card--leaf {
	border-color: #c9e9c5;
	background: var(--leaf-100);
}

.topic-card--berry {
	border-color: #f8cbc6;
	background: var(--coral-100);
}

.topic-card--violet {
	border-color: #dcd2ff;
	background: var(--violet-100);
}

.topic-card__icon {
	display: grid;
	width: 64px;
	height: 64px;
	margin-bottom: auto;
	place-items: center;
	border-radius: 20px;
	background: rgba( 255, 255, 255, .72 );
	box-shadow: 0 8px 20px rgba( 7, 41, 72, .07 );
}

.topic-card__icon svg,
.page-hero__icon svg,
.not-found-illustration svg,
.empty-state > span svg {
	width: 38px;
	height: 38px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.topic-card__count {
	margin: 22px 0 4px;
	color: var(--muted);
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.topic-card strong {
	font-size: 1.18rem;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.topic-card > span:last-child {
	margin-top: 16px;
	font-size: .82rem;
	font-weight: 900;
}

.featured-grid,
.latest-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.post-card {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY( -5px );
}

.post-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--sky-100);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.post-card:hover .post-card__media img {
	transform: scale( 1.04 );
}

.post-card__placeholder {
	display: grid;
	height: 100%;
	place-items: center;
	background: linear-gradient( 145deg, var(--sky-100), var(--sun-100) );
}

.post-card__placeholder svg {
	width: 28%;
	fill: none;
	stroke: var(--navy-700);
	stroke-width: 3;
}

.post-card__body {
	padding: 25px;
}

.topic-pill {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--sky-100);
	color: var(--navy-700);
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .07em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.topic-pill:hover {
	background: var(--navy-900);
	color: var(--paper);
}

.post-card__title {
	margin: 15px 0 10px;
	font-size: clamp( 1.2rem, 2vw, 1.48rem );
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	color: #708092;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.4;
}

.post-meta a {
	color: inherit;
	text-decoration: none;
}

.post-card__body > p {
	margin: 17px 0;
	color: var(--muted);
	font-size: .91rem;
	line-height: 1.65;
}

.promise-section {
	background: var(--navy-950);
	color: #d9e9f8;
}

.promise-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	align-items: center;
	gap: clamp( 45px, 8vw, 110px );
}

.promise-copy h2 {
	color: var(--paper);
}

.promise-copy .eyebrow {
	color: var(--sky-300);
}

.promise-copy p:last-child {
	color: #b9cde0;
	font-size: 1.05rem;
}

.promise-list {
	display: grid;
	gap: 12px;
}

.promise-list > div {
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: 18px;
	padding: 21px 24px;
	border: 1px solid rgba( 255, 255, 255, .11 );
	border-radius: 18px;
	background: rgba( 255, 255, 255, .055 );
}

.promise-list span {
	grid-row: 1 / 3;
	display: grid;
	width: 45px;
	height: 45px;
	place-items: center;
	border-radius: 14px;
	background: var(--sun-500);
	color: var(--navy-950);
	font-size: .76rem;
	font-weight: 900;
}

.promise-list div:nth-child( 2 ) span {
	background: var(--sky-300);
}

.promise-list div:nth-child( 3 ) span {
	background: #8fd685;
}

.promise-list h3 {
	margin-bottom: 4px;
	color: var(--paper);
}

.promise-list p {
	margin: 0;
	color: #b9cde0;
	font-size: .88rem;
}

.latest-section .section-heading .search-form {
	width: 410px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin-top: 45px;
}

.page-numbers {
	display: grid;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
	font-size: .85rem;
	font-weight: 800;
	text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
	border-color: var(--navy-900);
	background: var(--navy-900);
	color: var(--paper);
}

/* Listing headers */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp( 70px, 8vw, 105px );
	background: linear-gradient( 140deg, #f4fbff, var(--sky-100) );
}

.page-hero::after {
	position: absolute;
	right: -80px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border: 2px dashed rgba( 11, 46, 89, .12 );
	border-radius: 50%;
	content: "";
}

.page-hero--compact h1 {
	max-width: 900px;
	font-size: clamp( 2.5rem, 5vw, 4.2rem );
}

.page-hero--compact p:not(.eyebrow) {
	max-width: 700px;
	color: var(--muted);
}

.page-hero--compact .search-form {
	margin-top: 24px;
}

.page-hero__grid {
	display: grid;
	grid-template-columns: 1fr 150px;
	align-items: center;
	gap: 40px;
}

.page-hero__icon {
	display: grid;
	width: 140px;
	height: 140px;
	place-items: center;
	border: 8px solid rgba( 255, 255, 255, .72 );
	border-radius: 42px 42px 42px 10px;
	background: rgba( 255, 255, 255, .64 );
	box-shadow: var(--shadow-md);
	color: var(--navy-700);
	transform: rotate( 4deg );
}

.page-hero__icon svg {
	width: 70px;
	height: 70px;
}

.page-hero--sun { background: linear-gradient( 140deg, #fffaf0, var(--sun-100) ); }
.page-hero--leaf { background: linear-gradient( 140deg, #f8fff6, var(--leaf-100) ); }
.page-hero--berry { background: linear-gradient( 140deg, #fff8f7, var(--coral-100) ); }
.page-hero--violet { background: linear-gradient( 140deg, #fbf9ff, var(--violet-100) ); }

.archive-description {
	max-width: 720px;
	color: var(--muted);
	font-size: 1.06rem;
}

.archive-description p:last-child {
	margin-bottom: 0;
}

.breadcrumbs {
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 25px;
	color: var(--muted);
	font-size: .72rem;
	font-weight: 700;
}

.breadcrumbs a {
	color: var(--navy-700);
	text-decoration: none;
}

.breadcrumbs span:last-child {
	overflow: hidden;
	max-width: 480px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listing-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 35px;
}

.listing-tools > p {
	margin: 0;
	color: var(--muted);
	font-weight: 700;
}

/* Article */
.article-header {
	padding-block: clamp( 60px, 8vw, 100px ) clamp( 42px, 6vw, 70px );
	background:
		radial-gradient( circle at 85% 12%, rgba( 255, 181, 27, .18 ), transparent 28% ),
		linear-gradient( 140deg, #f7fdff, #f2faff );
}

.article-header__inner {
	max-width: 990px;
	text-align: center;
}

.article-header__inner .breadcrumbs,
.article-header__inner .post-meta {
	justify-content: center;
}

.article-header h1 {
	margin: 18px auto 22px;
	font-size: clamp( 2.5rem, 5.2vw, 4.65rem );
}

.article-deck {
	max-width: 760px;
	margin: 0 auto 24px;
	color: var(--muted);
	font-size: 1.16rem;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax( 0, var(--reading) ) 270px;
	align-items: start;
	justify-content: center;
	gap: clamp( 45px, 6vw, 84px );
	padding-block: clamp( 58px, 7vw, 94px );
}

.article-featured-image {
	overflow: hidden;
	margin: 0 0 38px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.article-featured-image img {
	width: 100%;
}

.article-note {
	display: grid;
	grid-template-columns: 185px 1fr;
	gap: 18px;
	margin-bottom: 35px;
	padding: 18px 20px;
	border-left: 5px solid var(--sun-500);
	border-radius: 4px 14px 14px 4px;
	background: var(--sun-100);
	font-size: .86rem;
}

.article-note strong {
	color: var(--navy-900);
}

.entry-content {
	font-size: 1.06rem;
}

.entry-content > * {
	max-width: 100%;
}

.entry-content p,
.entry-content li {
	color: #2c3e50;
}

.entry-content h2 {
	margin-top: 1.65em;
	padding-top: .15em;
	font-size: clamp( 1.75rem, 3vw, 2.3rem );
}

.entry-content h3 {
	margin-top: 1.55em;
	font-size: clamp( 1.35rem, 2vw, 1.7rem );
}

.entry-content h2::before {
	display: inline-block;
	width: 28px;
	height: 7px;
	margin-right: 11px;
	border-radius: 99px;
	background: var(--sky-500);
	content: "";
	vertical-align: .23em;
}

.entry-content a {
	font-weight: 650;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: .5em;
	padding-left: .25em;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 22px 28px;
	border-left: 5px solid var(--leaf-600);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--leaf-100);
	font-size: 1.08rem;
}

.entry-content img {
	border-radius: 16px;
}

.entry-content figure {
	margin-block: 2em;
}

.entry-content figcaption {
	margin-top: 8px;
	color: var(--muted);
	font-size: .78rem;
	text-align: center;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.entry-content th,
.entry-content td {
	padding: 12px 14px;
	border: 1px solid var(--line);
	text-align: left;
}

.entry-content th {
	background: var(--sky-100);
	color: var(--navy-900);
}

.alignwide {
	width: min( 100vw - 40px, 1050px );
	max-width: none !important;
	margin-left: 50%;
	transform: translateX( -50% );
}

.alignfull {
	width: 100vw;
	max-width: none !important;
	margin-left: 50%;
	transform: translateX( -50% );
}

.article-rail {
	position: sticky;
	top: 150px;
	display: grid;
	gap: 16px;
}

.admin-bar .article-rail {
	top: 182px;
}

.rail-card {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
}

.rail-card p:not(.eyebrow) {
	color: var(--muted);
	font-size: .82rem;
}

.rail-card--topic {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--sky-100);
}

.rail-card--topic .topic-card__icon {
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
}

.rail-card--topic .topic-card__icon svg {
	width: 30px;
	height: 30px;
}

.rail-card--topic strong {
	line-height: 1.3;
}

.rail-card--topic a {
	margin-top: 12px;
	font-size: .78rem;
	font-weight: 900;
	text-decoration: none;
}

.article-footer {
	margin-top: 55px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

.author-card {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 22px;
	padding: 25px;
	border-radius: var(--radius-md);
	background: var(--wash);
}

.author-card img {
	border-radius: 22px;
}

.author-card h2 {
	font-size: 1.35rem;
}

.author-card p:not(.eyebrow) {
	margin-bottom: 10px;
	color: var(--muted);
	font-size: .86rem;
}

.article-updated {
	margin-top: 16px;
	color: var(--muted);
	font-size: .76rem;
}

.ad-region--article {
	margin-block: 42px;
}

/* Pages and states */
.page-article {
	padding: clamp( 28px, 5vw, 52px );
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.not-found-page {
	padding-block: clamp( 70px, 10vw, 130px );
	background: var(--wash);
}

.not-found-card,
.empty-state {
	max-width: 720px;
	padding: clamp( 35px, 7vw, 70px );
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: var(--shadow-md);
	text-align: center;
}

.not-found-illustration,
.empty-state > span {
	display: grid;
	width: 90px;
	height: 90px;
	margin: 0 auto 25px;
	place-items: center;
	border-radius: 30px 30px 30px 8px;
	background: var(--sun-100);
	color: var(--navy-700);
}

.not-found-card .eyebrow {
	justify-content: center;
}

.not-found-card h1 {
	font-size: clamp( 2.2rem, 5vw, 3.7rem );
}

.not-found-card > p:not(.eyebrow) {
	color: var(--muted);
}

.not-found-card .search-form,
.empty-state .search-form {
	margin: 28px auto;
}

.empty-state {
	margin: 0 auto;
}

/* Comments */
.comments-area {
	border-top: 1px solid var(--line);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	margin: 22px 0;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
}

.comment-author img {
	display: inline-block;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: middle;
}

.comment-form label {
	display: block;
	font-weight: 800;
}

.comment-form input:not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
}

.form-submit .submit {
	padding: 12px 20px;
	border: 0;
	border-radius: 99px;
	background: var(--navy-900);
	color: var(--paper);
	font-weight: 800;
}

/* Footer */
.site-footer {
	background: var(--navy-950);
	color: #bed0e1;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr .8fr .8fr;
	gap: clamp( 45px, 7vw, 95px );
	padding-block: clamp( 65px, 8vw, 100px );
}

.brand-mark--footer {
	color: var(--paper);
}

.brand-mark--footer:hover {
	color: var(--paper);
}

.brand-mark--footer small {
	color: #a9c0d5;
}

.footer-brand > p {
	max-width: 450px;
	margin-top: 24px;
	font-size: .9rem;
}

.adult-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 9px;
	background: rgba( 255, 255, 255, .07 );
	color: #dfeeff;
	font-size: .76rem !important;
	font-weight: 800;
}

.adult-note span {
	color: #8fd685;
}

.site-footer h2 {
	margin-top: 5px;
	color: var(--paper);
	font-size: 1rem;
	letter-spacing: 0;
}

.footer-links {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.footer-links li {
	margin: 8px 0;
}

.footer-links a {
	color: #bed0e1;
	font-size: .84rem;
	text-decoration: none;
}

.footer-links a:hover {
	color: var(--sun-500);
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 22px;
	border-top: 1px solid rgba( 255, 255, 255, .1 );
	font-size: .7rem;
}

.footer-bottom p {
	margin: 0;
}

.back-to-top {
	position: fixed;
	z-index: 900;
	right: 22px;
	bottom: 22px;
	box-shadow: var(--shadow-md);
	font-size: 1.2rem;
}

/* Core WordPress alignment helpers */
.sticky,
.bypostauthor {
	display: block;
}

.wp-caption {
	max-width: 100%;
}

.gallery-caption,
.wp-caption-text {
	color: var(--muted);
	font-size: .78rem;
}

.alignleft {
	float: left;
	margin: .4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: .4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* Responsive */
@media ( max-width: 1120px ) {
	.header-main {
		grid-template-columns: minmax( 170px, 210px ) 1fr 44px;
		gap: 14px;
	}

	.primary-menu a {
		padding-inline: 7px;
		font-size: .76rem;
	}

	.hero-grid {
		grid-template-columns: .95fr .85fr;
		gap: 50px;
	}

	.topic-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.topic-card:nth-child( 4 ),
	.topic-card:nth-child( 5 ) {
		min-height: 230px;
	}
}

@media ( max-width: 900px ) {
	.admin-bar .site-header {
		top: 32px;
	}

	.trust-bar nav {
		display: none;
	}

	.trust-bar__inner {
		justify-content: center;
		text-align: center;
	}

	.header-main {
		grid-template-columns: 1fr 44px 44px;
		min-height: 76px;
	}

	.custom-logo {
		height: 60px;
	}

	.menu-toggle {
		display: grid;
	}

	.menu-toggle__bars {
		display: grid;
		gap: 4px;
	}

	.menu-toggle__bars i {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 9px;
		background: currentColor;
	}

	.primary-navigation {
		position: fixed;
		top: 110px;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		overflow-y: auto;
		padding: 24px 20px 50px;
		background: var(--paper);
	}

	.admin-bar .primary-navigation {
		top: 142px;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-menu {
		width: min( 100%, 680px );
		margin-inline: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 7px;
	}

	.primary-menu a {
		justify-content: space-between;
		min-height: 52px;
		padding: 12px 16px;
		background: var(--wash);
		font-size: .96rem;
		text-align: left;
	}

	.primary-menu .sub-menu {
		position: static;
		visibility: visible;
		width: auto;
		padding: 8px 0 0 18px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 70px;
		padding-bottom: 105px;
	}

	.hero-copy {
		max-width: 720px;
		text-align: center;
	}

	.hero-copy .eyebrow,
	.hero-actions,
	.hero-proof {
		justify-content: center;
	}

	.hero-copy h1::after {
		margin-inline: auto;
	}

	.hero-intro {
		margin-inline: auto;
	}

	.hero-feature {
		width: min( 100% - 30px, 620px );
		margin-inline: auto;
	}

	.topic-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.topic-card:last-child {
		grid-column: 1 / -1;
		min-height: 220px;
	}

	.featured-grid,
	.latest-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.promise-grid {
		grid-template-columns: 1fr;
	}

	.article-layout {
		grid-template-columns: minmax( 0, var(--reading) );
	}

	.article-rail {
		position: static;
		grid-template-columns: repeat( 2, 1fr );
		order: -1;
	}

	.footer-grid {
		grid-template-columns: 1.2fr 1fr;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 600px ) {
	:root {
		--radius-lg: 25px;
	}

	body {
		font-size: 16px;
	}

	.site-shell {
		width: min( calc( 100% - 28px ), var(--shell) );
	}

	.admin-bar .site-header {
		top: 46px;
	}

	.primary-navigation {
		top: 110px;
	}

	.admin-bar .primary-navigation {
		top: 156px;
	}

	.trust-bar {
		font-size: .66rem;
	}

	.header-main {
		gap: 8px;
	}

	.custom-logo-link,
	.custom-logo {
		max-width: 165px;
	}

	.brand-mark small {
		display: none;
	}

	.brand-mark__symbol {
		width: 42px;
		height: 42px;
	}

	.hero-grid {
		min-height: auto;
		padding-block: 62px 90px;
	}

	.hero-actions {
		flex-direction: column;
	}

	.hero-actions .button {
		width: 100%;
	}

	.hero-proof {
		gap: 12px;
	}

	.hero-proof span {
		padding-right: 12px;
		font-size: .58rem;
	}

	.hero-proof strong {
		font-size: 1.15rem;
	}

	.hero-feature {
		width: calc( 100% - 12px );
	}

	.hero-feature__card {
		width: calc( 100% - 26px );
		margin-top: -45px;
		padding: 18px;
	}

	.float-badge {
		display: none;
	}

	.topic-grid,
	.featured-grid,
	.latest-grid,
	.article-rail,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.topic-card,
	.topic-card:nth-child( 4 ),
	.topic-card:nth-child( 5 ) {
		grid-column: auto;
		min-height: 220px;
	}

	.section-heading--split,
	.listing-tools,
	.footer-bottom {
		align-items: stretch;
		flex-direction: column;
	}

	.section-heading--split .search-form,
	.latest-section .section-heading .search-form {
		width: 100%;
	}

	.promise-list > div {
		grid-template-columns: 44px 1fr;
		padding: 18px;
	}

	.page-hero__grid {
		grid-template-columns: 1fr;
	}

	.page-hero__icon {
		display: none;
	}

	.article-header h1 {
		font-size: clamp( 2.2rem, 11vw, 3.2rem );
	}

	.article-layout {
		padding-top: 38px;
	}

	.article-note {
		grid-template-columns: 1fr;
	}

	.entry-content {
		font-size: 1rem;
	}

	.author-card {
		grid-template-columns: 64px 1fr;
		gap: 15px;
		padding: 20px;
	}

	.author-card img {
		width: 64px;
		height: 64px;
	}

	.page-article {
		padding: 22px 18px;
	}

	.search-form {
		flex-direction: column;
	}

	.search-submit {
		min-height: 48px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.article-rail,
	.related-section,
	.ad-region,
	.back-to-top,
	.comments-area {
		display: none !important;
	}

	.article-layout {
		display: block;
		padding: 0;
	}

	.article-header {
		padding: 20px 0;
		background: none;
	}

	a {
		color: inherit;
	}
}