/*
Theme Name: Zodiacs Glow
Theme URI: https://zodiacsglow.com
Author: Zodiacs Glow
Author URI: https://zodiacsglow.com
Description: Zodiacs Glow is a light, friendly astrology portal theme: free birth chart and numerology tools, a Learn section, twelve sign pages and long-form guides, all in a soft purple design that is quick to load and easy to read.
Version: 5.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zodiac
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   The Customizer writes the colors into an inline :root rule, which wins over
   these fallbacks. Everything below reads from the variables, never from a
   hard-coded color, so a scheme change restyles the whole site.
   ========================================================================== */
:root {
	--zdc-bg: #faf8ff;
	--zdc-surface: #ffffff;
	--zdc-surface-2: #f3eefc;
	--zdc-text: #2c2542;
	--zdc-text-muted: #5d5677;
	--zdc-heading: #1d1535;
	--zdc-accent: #762ccb;
	--zdc-accent-2: #4d1a93;
	--zdc-accent-rgb: 118, 44, 203;
	--zdc-link: #762ccb;
	--zdc-link-hover: #521b8f;
	--zdc-border: #e5dcf6;
	--zdc-header-bg: #ffffff;
	--zdc-header-text: #2c2542;
	--zdc-footer-bg: #1d1535;
	--zdc-footer-text: #d8cdef;
	--zdc-button-bg: #762ccb;
	--zdc-button-text: #ffffff;

	--zdc-wash: rgba(var(--zdc-accent-rgb), 0.08);
	--zdc-wash-strong: rgba(var(--zdc-accent-rgb), 0.16);
	--zdc-glow: rgba(var(--zdc-accent-rgb), 0.35);
	--zdc-gradient: linear-gradient(135deg, var(--zdc-accent) 0%, #a15de8 100%);
	--zdc-shadow: 0 1px 2px rgba(45, 27, 90, 0.05), 0 8px 24px rgba(45, 27, 90, 0.07);
	--zdc-shadow-lift: 0 2px 6px rgba(45, 27, 90, 0.08), 0 18px 40px rgba(45, 27, 90, 0.14);

	--zdc-radius: 18px;
	--zdc-container: 1200px;
	--zdc-content: 740px;
	--zdc-title-size: 22px;

	--zdc-el-fire: #c2410c;
	--zdc-el-earth: #4d7c0f;
	--zdc-el-air: #0e7490;
	--zdc-el-water: #4338ca;

	--zdc-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body.zdc-scheme-dark {
	--zdc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
	--zdc-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.45);
	--zdc-el-fire: #fb923c;
	--zdc-el-earth: #a3e635;
	--zdc-el-air: #22d3ee;
	--zdc-el-water: #a5b4fc;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	margin: 0;
	background-color: var(--zdc-bg);
	color: var(--zdc-text);
	font-family: var(--zdc-font);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-x: clip;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zdc-font);
	color: var(--zdc-heading);
	line-height: 1.2;
	margin: 0 0 0.6em;
	font-weight: 600;
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }

a { color: var(--zdc-link); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus { color: var(--zdc-link-hover); }

:focus-visible {
	outline: 3px solid rgba(var(--zdc-accent-rgb), 0.55);
	outline-offset: 2px;
	border-radius: 6px;
}

blockquote {
	margin: 1.6em 0;
	padding: 1em 1.5em;
	border-left: 4px solid var(--zdc-accent);
	background: var(--zdc-surface-2);
	border-radius: 0 var(--zdc-radius) var(--zdc-radius) 0;
	color: var(--zdc-text-muted);
}

pre, code {
	background: var(--zdc-surface-2);
	border-radius: 6px;
	font-size: 0.9em;
}
code { padding: 0.15em 0.4em; }
pre { padding: 1em; overflow-x: auto; }

table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: 0.96em; }
th, td { border: 1px solid var(--zdc-border); padding: 0.65em 0.9em; text-align: left; vertical-align: top; }
th { background: var(--zdc-surface-2); color: var(--zdc-heading); }

hr {
	border: none;
	height: 1px;
	background: var(--zdc-border);
	margin: 2.5em 0;
}

::selection { background: rgba(var(--zdc-accent-rgb), 0.85); color: #fff; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--zdc-surface);
	clip: auto !important; clip-path: none;
	color: var(--zdc-accent);
	display: block; font-size: 0.9rem; font-weight: 600;
	height: auto; left: 8px; top: 8px; width: auto;
	padding: 14px 22px; z-index: 100000;
	border-radius: 10px;
	box-shadow: var(--zdc-shadow-lift);
}

/* Soft glow behind the page. Light scheme: a faint lavender haze. Dark
   scheme: a scatter of stars. Both sit behind the content at z-index 0. */
body.zdc-stars::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(52rem 34rem at 8% -8%, rgba(var(--zdc-accent-rgb), 0.11), transparent 62%),
		radial-gradient(44rem 30rem at 96% 6%, rgba(161, 93, 232, 0.10), transparent 62%),
		radial-gradient(48rem 34rem at 50% 112%, rgba(var(--zdc-accent-rgb), 0.08), transparent 60%);
}

body.zdc-stars.zdc-scheme-dark::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
		radial-gradient(1px 1px at 38% 62%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
		radial-gradient(2px 2px at 62% 14%, rgba(199, 170, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 80% 54%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 90% 86%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 24% 88%, rgba(199, 170, 255, 0.5) 50%, transparent 51%);
	animation: zdc-twinkle 8s ease-in-out infinite alternate;
}

@keyframes zdc-twinkle { from { opacity: 0.45; } to { opacity: 1; } }

body > * { position: relative; z-index: 1; }

/* Overlay ads are exempt from the rule above.

   `body > *` gives every direct child of <body> its OWN stacking context at
   z-index: 1. The overlay prints from wp_footer(), so it is a direct child of
   <body> too and would trap everything inside it at that level.

   NOTE: this only removes a needless stacking context. It is NOT the fix for
   the ad that was cut off behind the header. MGID positions that one itself,
   with `position: fixed` on its own element, so it is moved from JS: see
   zodiac_adskeeper_overlay_offset_js() in inc/adskeeper.php. */
body > .zdc-ad-overlay { z-index: auto; }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.zdc-container {
	max-width: var(--zdc-container);
	margin: 0 auto;
	padding: 0 24px;
}
.zdc-narrow { max-width: var(--zdc-content); }
.zdc-container.zdc-narrow { max-width: calc(var(--zdc-content) + 48px); }

.site-main { padding: 48px 0 72px; }
.site-main.zdc-portal,
.site-main.zdc-sign-landing { padding: 0; }

.zdc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
body.zdc-has-sidebar .zdc-layout { grid-template-columns: minmax(0, 1fr) 320px; }

/* ==========================================================================
   4. Buttons and form controls
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input[type="search"], input[type="password"], textarea, select {
	width: 100%;
	background: var(--zdc-surface);
	border: 1.5px solid var(--zdc-border);
	border-radius: 12px;
	color: var(--zdc-text);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23762ccb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--zdc-accent);
	box-shadow: 0 0 0 4px rgba(var(--zdc-accent-rgb), 0.18);
}
input[type="number"] { -moz-appearance: textfield; }

button, input[type="submit"], .zdc-button, .wp-block-button__link {
	display: inline-block;
	background: var(--zdc-button-bg);
	color: var(--zdc-button-text);
	border: none;
	border-radius: 999px;
	padding: 12px 26px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
button:hover, input[type="submit"]:hover, .zdc-button:hover { filter: brightness(1.08); }

.zdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.zdc-btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.zdc-btn-primary {
	background: var(--zdc-button-bg);
	color: var(--zdc-button-text);
	box-shadow: 0 8px 22px -6px var(--zdc-glow);
}
.zdc-btn-primary:hover, .zdc-btn-primary:focus {
	color: var(--zdc-button-text);
	filter: none;
	background: var(--zdc-accent-2);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -6px var(--zdc-glow);
}
.zdc-btn-ghost {
	background: transparent;
	color: var(--zdc-accent);
	border-color: rgba(var(--zdc-accent-rgb), 0.4);
}
.zdc-btn-ghost:hover, .zdc-btn-ghost:focus {
	background: var(--zdc-wash);
	color: var(--zdc-link-hover);
	border-color: var(--zdc-accent);
	filter: none;
}
.zdc-btn-light { background: #fff; color: #4d1a93; }
.zdc-btn-light:hover, .zdc-btn-light:focus { background: #f3eefc; color: #3a1275; filter: none; transform: translateY(-2px); }

.zdc-search-form { display: flex; gap: 10px; }
.zdc-search-form input[type="search"] { flex: 1; border-radius: 999px; padding-left: 20px; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header {
	background: var(--zdc-header-bg);
	color: var(--zdc-header-text);
	border-bottom: 1px solid var(--zdc-border);
	position: relative;
	z-index: 100;
}
body.zdc-sticky-header .site-header { position: sticky; top: 0; }
body.admin-bar.zdc-sticky-header .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.zdc-sticky-header .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar.zdc-sticky-header .site-header { top: 0; } body.admin-bar.zdc-sticky-header .zdc-sign-nav { top: 64px; } }

.zdc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
	padding: 8px 0;
}
.site-branding { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zdc-header-nav-row { display: flex; align-items: center; gap: 6px; }

.zdc-logo { flex-shrink: 0; display: block; line-height: 0; }
.zdc-logo img, .custom-logo-link img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 4px 14px -2px var(--zdc-glow);
}

.site-title {
	margin: 0;
	font-size: var(--zdc-title-size);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.site-title a { color: var(--zdc-heading); }
.site-title a:hover { color: var(--zdc-accent); }
.site-description {
	margin: 3px 0 0;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--zdc-text-muted);
	line-height: 1.2;
}

/* Main navigation */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;
	align-items: center;
	flex-wrap: nowrap;
}
.main-navigation > ul > li { flex: 0 0 auto; }
.main-navigation li { position: relative; }
.main-navigation > ul > li > a { white-space: nowrap; }
.main-navigation a {
	display: block;
	padding: 9px 13px;
	color: var(--zdc-header-text);
	font-size: 0.93rem;
	font-weight: 600;
	border-radius: 999px;
	transition: color 0.2s ease, background 0.2s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a {
	color: var(--zdc-accent);
	background: var(--zdc-wash);
}
.main-navigation .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	opacity: 0.6;
}

/* Dropdown submenus */
.main-navigation .sub-menu {
	display: block;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 16px;
	box-shadow: var(--zdc-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.main-navigation .sub-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-navigation .sub-menu li { display: block; width: 100%; }
.main-navigation .sub-menu a {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-size: 0.93rem;
	font-weight: 500;
	white-space: nowrap;
	border-radius: 10px;
}
.main-navigation .zdc-menu-signs > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-width: 330px;
}
.main-navigation .zdc-menu-signs > .sub-menu li { width: auto; }

.zdc-menu-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; list-style: none; }
.main-navigation.zdc-wrapped ul { justify-content: center; row-gap: 2px; }

.zdc-header-cta {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 10px 20px;
	background: var(--zdc-button-bg);
	color: var(--zdc-button-text);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 999px;
	box-shadow: 0 6px 18px -6px var(--zdc-glow);
	transition: transform 0.15s ease, background 0.2s ease;
}
.zdc-header-cta:hover, .zdc-header-cta:focus { background: var(--zdc-accent-2); color: var(--zdc-button-text); transform: translateY(-1px); }

/* Header with two rows */
@media (min-width: 1041px) {
	body.zdc-header-2rows .zdc-header-inner {
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		padding: 16px 0 10px;
	}
	body.zdc-header-2rows .zdc-header-nav-row { justify-content: center; width: 100%; }
	body.zdc-header-2rows .main-navigation ul { justify-content: center; }
}

/* Social icons */
.zdc-social { display: flex; align-items: center; gap: 2px; }
.zdc-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--zdc-header-text);
	transition: color 0.2s ease, background 0.2s ease;
}
.zdc-social-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zdc-social-link:hover { color: var(--zdc-accent); background: var(--zdc-wash); }
@media (max-width: 1280px) { .zdc-social-header { display: none; } }

/* Header search */
.zdc-search { position: relative; }
.zdc-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	color: var(--zdc-header-text);
	border-radius: 50%;
	box-shadow: none;
}
.zdc-search-toggle:hover, .zdc-search-toggle[aria-expanded="true"] { background: var(--zdc-wash); color: var(--zdc-accent); filter: none; }
.zdc-search-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: min(380px, 88vw);
	padding: 14px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 18px;
	box-shadow: var(--zdc-shadow-lift);
	z-index: 120;
}
.zdc-search-panel[hidden] { display: none; }
.zdc-search-results { margin-top: 8px; display: flex; flex-direction: column; }
.zdc-search-results:empty { display: none; }
.zdc-search-result {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--zdc-text);
}
.zdc-search-result:hover { background: var(--zdc-wash); color: var(--zdc-accent); }
.zdc-search-result-title { font-weight: 500; font-size: 0.95rem; }
.zdc-search-result-type { font-size: 0.75rem; color: var(--zdc-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.zdc-search-empty { margin: 8px 4px 2px; font-size: 0.9rem; color: var(--zdc-text-muted); }

/* Side menu (off-canvas) */
.zdc-side-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--zdc-border);
	border-radius: 14px;
	color: var(--zdc-header-text);
	box-shadow: none;
	flex-shrink: 0;
}
.zdc-side-toggle:hover { border-color: var(--zdc-accent); color: var(--zdc-accent); background: var(--zdc-wash); filter: none; }
body.zdc-side-enabled .zdc-side-toggle { display: inline-flex; }

.zdc-side-overlay {
	position: fixed;
	inset: 0;
	background: rgba(29, 21, 53, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 998;
}
body.zdc-side-open .zdc-side-overlay { opacity: 1; pointer-events: auto; }

.zdc-side-menu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 360px;
	max-width: 90vw;
	background: var(--zdc-surface);
	border-left: 1px solid var(--zdc-border);
	box-shadow: -16px 0 48px rgba(29, 21, 53, 0.25);
	z-index: 999;
	transform: translateX(102%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0.3s ease;
	overflow-y: auto;
	padding: 72px 26px 32px;
}
body.zdc-side-open .zdc-side-menu { transform: none; visibility: visible; }

.zdc-side-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--zdc-border);
	border-radius: 50%;
	color: var(--zdc-heading);
	box-shadow: none;
}
.zdc-side-close:hover { border-color: var(--zdc-accent); color: var(--zdc-accent); background: var(--zdc-wash); filter: none; }

.zdc-side-cta { width: 100%; margin-bottom: 22px; }
.zdc-side-primary { display: none; }
.zdc-side-nav ul { list-style: none; margin: 0 0 26px; padding: 0; }
.zdc-side-nav a {
	display: block;
	padding: 12px 4px;
	color: var(--zdc-heading);
	font-size: 1.1rem;
	font-weight: 600;
	border-bottom: 1px solid var(--zdc-border);
}
.zdc-side-nav a:hover { color: var(--zdc-accent); padding-left: 10px; transition: all 0.2s ease; }
.zdc-side-nav ul ul { margin: 0 0 6px 16px; }
.zdc-side-nav ul ul a { font-size: 0.98rem; font-weight: 500; color: var(--zdc-text); }
.zdc-side-nav .zdc-menu-signs > .sub-menu { display: none; }

.zdc-side-heading {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zdc-text-muted);
}
.zdc-side-signs { margin-top: 26px; }
.zdc-side-signs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.zdc-side-sign {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1.5px solid var(--zdc-border);
	border-radius: 12px;
	color: var(--zdc-text);
	font-size: 0.93rem;
	font-weight: 600;
}
.zdc-side-sign:hover { border-color: var(--zdc-accent); background: var(--zdc-wash); color: var(--zdc-accent); }

.zdc-side-widgets .widget { margin-bottom: 26px; }
.zdc-side-widgets .widget-title { font-size: 0.8rem; color: var(--zdc-accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.zdc-side-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.zdc-side-widgets .widget li { padding: 6px 0; border-bottom: 1px solid var(--zdc-border); font-size: 0.92rem; }
.zdc-side-widgets .widget a { color: var(--zdc-text-muted); }
.zdc-side-widgets .widget a:hover { color: var(--zdc-accent); }

/* Reading progress, back to top */
.zdc-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	width: 0;
	background: var(--zdc-gradient);
	z-index: 1001;
	pointer-events: none;
}
.zdc-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	z-index: 900;
	box-shadow: 0 10px 26px -6px var(--zdc-glow);
}
.zdc-top[hidden] { display: none; }

/* The switch to the slide-out menu */
@media (max-width: 1040px) {
	.main-navigation { display: none; }
	.zdc-header-cta { display: none; }
	.zdc-side-toggle { display: inline-flex; }
	.zdc-side-primary { display: block; }
}

/* ==========================================================================
   6. Section scaffolding
   ========================================================================== */
.zdc-section { padding: 72px 0; }
.zdc-section-tight { padding: 40px 0; }
.zdc-section-alt {
	background: var(--zdc-surface-2);
	border-top: 1px solid var(--zdc-border);
	border-bottom: 1px solid var(--zdc-border);
}

.zdc-eyebrow {
	margin: 0 0 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zdc-accent);
}

.zdc-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}
.zdc-section-title {
	font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.025em;
}
.zdc-section-lead {
	margin: 12px 0 0;
	color: var(--zdc-text-muted);
	max-width: 62ch;
	font-size: 1.05rem;
}
.zdc-section-link {
	flex: 0 0 auto;
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--zdc-accent);
}
.zdc-section-link:hover { color: var(--zdc-link-hover); }

/* ==========================================================================
   7. Homepage hero
   ========================================================================== */
.zdc-hero {
	padding: 64px 0 56px;
	background:
		radial-gradient(60rem 28rem at 15% -10%, rgba(var(--zdc-accent-rgb), 0.16), transparent 62%),
		radial-gradient(40rem 26rem at 95% 10%, rgba(161, 93, 232, 0.14), transparent 62%),
		var(--zdc-bg);
	border-bottom: 1px solid var(--zdc-border);
	overflow: hidden;
}
.zdc-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 40px;
}
.zdc-hero-eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--zdc-accent);
	background: var(--zdc-wash);
	border: 1px solid rgba(var(--zdc-accent-rgb), 0.22);
	border-radius: 999px;
}
.zdc-hero-title {
	font-weight: 600;
	font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
	margin: 0 0 20px;
}
.zdc-hero-lead {
	margin: 0 0 30px;
	max-width: 56ch;
	font-size: 1.18rem;
	color: var(--zdc-text-muted);
}
.zdc-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.zdc-hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--zdc-text-muted);
}
.zdc-hero-points li::before {
	content: "✓";
	display: inline-block;
	margin-right: 8px;
	color: var(--zdc-accent);
	font-weight: 600;
}
.zdc-hero-art { display: flex; justify-content: center; }
.zdc-hero-orb { position: relative; width: min(420px, 100%); aspect-ratio: 1; }
.zdc-hero-orb::before {
	content: "";
	position: absolute;
	inset: -8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--zdc-accent-rgb), 0.35), transparent 66%);
	filter: blur(18px);
}
.zdc-hero-orb img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(var(--zdc-accent-rgb), 0.35));
	animation: zdc-spin 140s linear infinite;
}
@keyframes zdc-spin { to { transform: rotate(360deg); } }

/* Sky right now */
.zdc-sky-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 44px;
}
.zdc-sky-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 18px;
	box-shadow: var(--zdc-shadow);
}
.zdc-sky-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	font-size: 1.7rem;
	line-height: 1;
	background: var(--zdc-wash);
	border-radius: 14px;
	color: var(--zdc-accent);
}
.zdc-sky-glyph { font-size: 1.5rem; }
.zdc-sky-text { min-width: 0; }
.zdc-sky-title {
	margin: 0 0 2px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zdc-text-muted);
}
.zdc-sky-value { margin: 0; font-size: 1.12rem; font-weight: 500; color: var(--zdc-heading); line-height: 1.25; }
.zdc-sky-note { margin: 2px 0 0; font-size: 0.83rem; color: var(--zdc-text-muted); line-height: 1.35; }
.zdc-sky-foot { margin: 18px 0 0; color: var(--zdc-text-muted); }

/* Welcome back */
.zdc-your-sign { padding: 32px 0 0; }
.zdc-your-sign-card {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 26px 30px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-left: 6px solid var(--zdc-el, var(--zdc-accent));
	border-radius: 24px;
	box-shadow: var(--zdc-shadow);
	flex-wrap: wrap;
}
.zdc-your-sign-art { margin: 0; flex: 0 0 auto; }
.zdc-your-sign-art img { width: 110px; height: 110px; object-fit: contain; display: block; }
.zdc-your-sign-text { flex: 1 1 260px; }
.zdc-your-sign-label { margin: 0 0 2px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-your-sign-name { margin: 0 0 4px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.zdc-your-sign-dates { margin: 0 0 14px; color: var(--zdc-text-muted); font-size: 0.95rem; }
.zdc-your-sign-lucky { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-bottom: 18px; font-size: 0.9rem; color: var(--zdc-text-muted); }
.zdc-your-sign-lucky strong { color: var(--zdc-heading); }

/* Three ways in */
.zdc-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zdc-way {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 26px;
	background: var(--zdc-surface);
	border: 1.5px solid var(--zdc-border);
	border-radius: 22px;
	color: var(--zdc-text);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.zdc-way:hover, .zdc-way:focus-visible {
	transform: translateY(-4px);
	border-color: var(--zdc-accent);
	box-shadow: var(--zdc-shadow-lift);
	color: var(--zdc-text);
}
.zdc-way-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 6px;
	font-size: 1.5rem;
	color: #fff;
	background: var(--zdc-gradient);
	border-radius: 14px;
}
.zdc-way-name { font-size: 1.18rem; font-weight: 500; color: var(--zdc-heading); letter-spacing: -0.01em; }
.zdc-way-desc { font-size: 0.95rem; color: var(--zdc-text-muted); line-height: 1.5; }

/* ==========================================================================
   8. Cards: astro cards, sign cards, feature card
   ========================================================================== */
.zdc-astro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zdc-astro-grid-lg { grid-template-columns: repeat(2, 1fr); gap: 20px; }

.zdc-astro-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: var(--zdc-radius);
	box-shadow: var(--zdc-shadow);
	color: var(--zdc-text);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
a.zdc-astro-card:hover, a.zdc-astro-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(var(--zdc-accent-rgb), 0.55);
	box-shadow: var(--zdc-shadow-lift);
	color: var(--zdc-text);
}
.zdc-astro-card-static { cursor: default; }
.zdc-astro-card.is-current { border-color: var(--zdc-accent); background: var(--zdc-wash); }
.zdc-astro-card-lg { padding: 34px 30px; }

.zdc-astro-card-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--zdc-accent);
	background: var(--zdc-wash);
	border-radius: 16px;
	transition: background 0.2s ease, color 0.2s ease;
}
a.zdc-astro-card:hover .zdc-astro-card-glyph { background: var(--zdc-accent); color: #fff; }
.zdc-astro-card-lg .zdc-astro-card-glyph { width: 62px; height: 62px; font-size: 2rem; }
.zdc-astro-card-name { display: block; font-size: 1.15rem; font-weight: 500; color: var(--zdc-heading); margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.25; }
.zdc-astro-card-lg .zdc-astro-card-name { font-size: 1.45rem; }
.zdc-astro-card-desc { display: block; font-size: 0.93rem; line-height: 1.55; color: var(--zdc-text-muted); }
.zdc-quiz-count { margin-top: 14px; font-size: 0.8rem; font-weight: 600; color: var(--zdc-accent); }

/* Sign cards */
.zdc-signs-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.zdc-sign-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px 10px 16px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 20px;
	text-align: center;
	color: var(--zdc-text);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.zdc-sign-card:hover, .zdc-sign-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--zdc-el, var(--zdc-accent));
	box-shadow: var(--zdc-shadow-lift);
	color: var(--zdc-text);
}
.zdc-sign-art { display: block; width: 100%; max-width: 132px; margin: 0 auto 6px; }
.zdc-sign-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; transition: transform 0.3s ease; }
.zdc-sign-card:hover .zdc-sign-art img { transform: scale(1.06) rotate(-2deg); }
.zdc-sign-card-name { font-size: 1.05rem; font-weight: 500; color: var(--zdc-heading); line-height: 1.2; }
.zdc-sign-card-dates, .zdc-sign-card-tagline { font-size: 0.78rem; color: var(--zdc-text-muted); line-height: 1.35; }
.zdc-sign-card-sm { padding: 14px 8px; border-radius: 16px; }
.zdc-sign-card-sm .zdc-sym-card { width: 34px; height: 34px; }

/* Sign glyphs: one color rule tints every glyph (CSS mask) */
.zdc-sym {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--zdc-sym-url) center / contain no-repeat;
	mask: var(--zdc-sym-url) center / contain no-repeat;
}
.zdc-sym-card { width: 40px; height: 40px; color: var(--zdc-el, var(--zdc-accent)); margin-bottom: 4px; }
.zdc-sym-inline { width: 1.15rem; height: 1.15rem; color: var(--zdc-el, var(--zdc-accent)); }
.zdc-sym-sky { width: 1.6rem; height: 1.6rem; color: var(--zdc-accent); }
.zdc-el-fire  { --zdc-el: var(--zdc-el-fire); }
.zdc-el-earth { --zdc-el: var(--zdc-el-earth); }
.zdc-el-air   { --zdc-el: var(--zdc-el-air); }
.zdc-el-water { --zdc-el: var(--zdc-el-water); }
.zdc-signs-inline { margin-top: 16px; grid-template-columns: repeat(3, 1fr); }

/* Simple signs picker (blog home, shortcode) */
.zdc-signs { margin-bottom: 52px; }
.zdc-signs-title { text-align: center; font-size: 1.9rem; margin-bottom: 26px; }
.zdc-signs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 12px; }
.zdc-sign { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.zdc-sign img { width: 100%; max-width: 110px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--zdc-border); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
a.zdc-sign:hover img { border-color: var(--zdc-accent); box-shadow: 0 10px 24px -6px var(--zdc-glow); transform: translateY(-3px); }
.zdc-sign-name { font-weight: 500; font-size: 0.98rem; color: var(--zdc-heading); }
a.zdc-sign:hover .zdc-sign-name { color: var(--zdc-accent); }
.zdc-sign-static { cursor: default; }

/* Feature card */
.zdc-feature-card {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 34px 38px;
	color: #fff;
	background:
		radial-gradient(28rem 14rem at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
		linear-gradient(135deg, var(--zdc-accent-2) 0%, var(--zdc-accent) 60%, #a15de8 100%);
	border-radius: 28px;
	box-shadow: 0 24px 50px -18px var(--zdc-glow);
	transition: transform 0.2s ease;
}
.zdc-feature-card:hover, .zdc-feature-card:focus-visible { transform: translateY(-3px); color: #fff; }
.zdc-feature-glyph { font-size: 3.2rem; line-height: 1; flex: 0 0 auto; }
.zdc-feature-text { display: flex; flex-direction: column; gap: 8px; }
.zdc-feature-name { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.zdc-feature-desc { max-width: 62ch; opacity: 0.94; }
.zdc-feature-cta {
	align-self: flex-start;
	margin-top: 6px;
	padding: 11px 24px;
	font-weight: 600;
	color: var(--zdc-accent-2);
	background: #fff;
	border-radius: 999px;
}

/* ==========================================================================
   9. Virtual-page hero and breadcrumbs
   ========================================================================== */
.zdc-page-hero {
	padding: 40px 0 44px;
	background:
		radial-gradient(44rem 20rem at 10% -20%, rgba(var(--zdc-accent-rgb), 0.15), transparent 64%),
		var(--zdc-bg);
	border-bottom: 1px solid var(--zdc-border);
}
.zdc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 22px;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--zdc-text-muted);
}
.zdc-breadcrumb a { color: var(--zdc-text-muted); }
.zdc-breadcrumb a:hover { color: var(--zdc-accent); }
.zdc-page-hero-row { display: flex; align-items: center; gap: 24px; }
.zdc-page-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	font-size: 2.6rem;
	line-height: 1;
	color: #fff;
	background: var(--zdc-gradient);
	border-radius: 26px;
	box-shadow: 0 14px 30px -10px var(--zdc-glow);
}
.zdc-page-hero-title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); line-height: 1.1; margin: 0; letter-spacing: -0.03em; }
.zdc-page-hero-sub { display: block; margin-top: 8px; font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--zdc-accent); }
.zdc-page-hero-lead { margin: 14px 0 0; max-width: 64ch; color: var(--zdc-text-muted); font-size: 1.12rem; }

/* Entry pages */
.zdc-astro-glyph { font-size: 3.6rem; line-height: 1; margin: 0 0 22px; color: var(--zdc-accent); }
.zdc-astro-h2 { font-size: 1.4rem; margin: 38px 0 10px; }
.zdc-astro-p { margin: 0 0 16px; line-height: 1.75; }
.zdc-sign-intro { font-size: 1.2rem; line-height: 1.75; color: var(--zdc-text); margin: 0; }
.zdc-facts-inline { margin: 30px 0 0; }
.zdc-dream-readings { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 12px; }
.zdc-dream-readings li {
	position: relative;
	padding: 18px 20px 18px 54px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 16px;
	line-height: 1.6;
}
.zdc-dream-readings li::before {
	content: "✦";
	position: absolute;
	left: 18px;
	top: 16px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	color: var(--zdc-accent);
	background: var(--zdc-wash);
	border-radius: 50%;
}
.zdc-sample-notice {
	margin: 28px 0 0;
	padding: 16px 20px;
	font-size: 0.95rem;
	color: var(--zdc-text-muted);
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-left: 4px solid var(--zdc-accent);
	border-radius: 0 14px 14px 0;
}

/* ==========================================================================
   10. Sign pages
   ========================================================================== */
.zdc-sign-hero {
	padding: 36px 0 40px;
	background:
		radial-gradient(44rem 22rem at 90% -10%, rgba(var(--zdc-accent-rgb), 0.18), transparent 62%),
		radial-gradient(34rem 18rem at 0% 110%, rgba(var(--zdc-accent-rgb), 0.10), transparent 62%),
		var(--zdc-bg);
	border-bottom: 1px solid var(--zdc-border);
}
.zdc-sign-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	align-items: center;
	gap: 32px;
}
.zdc-sign-hero-title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.035em; }
.zdc-sign-hero-tagline { margin: 0 0 6px; font-size: 1.2rem; font-weight: 500; color: var(--zdc-text); }
.zdc-sign-hero-keywords {
	display: inline-block;
	margin: 10px 0 0;
	padding: 6px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--zdc-accent);
	background: var(--zdc-wash);
	border-radius: 999px;
}
.zdc-sign-hero-art { margin: 0; justify-self: end; }
.zdc-sign-hero-art img { width: 280px; height: 280px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(var(--zdc-accent-rgb), 0.3)); }

.zdc-sign-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0 0; }
.zdc-sign-facts > div {
	padding: 14px 18px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 16px;
}
.zdc-sign-facts dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-text-muted); margin-bottom: 3px; }
.zdc-sign-facts dd { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--zdc-heading); }

.zdc-sign-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--zdc-surface);
	border-bottom: 1px solid var(--zdc-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
body.zdc-sticky-header .zdc-sign-nav { top: 76px; }
body.admin-bar.zdc-sticky-header .zdc-sign-nav { top: 108px; }
.zdc-sign-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.zdc-sign-nav a {
	display: block;
	padding: 14px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--zdc-text-muted);
	border-bottom: 3px solid transparent;
}
.zdc-sign-nav a:hover { color: var(--zdc-accent); border-bottom-color: var(--zdc-accent); }

.zdc-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zdc-trait-col {
	padding: 28px;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: 22px;
	box-shadow: var(--zdc-shadow);
}
.zdc-trait-title { margin: 0 0 18px; font-size: 1.3rem; padding-bottom: 12px; }
.zdc-trait-strength { border-bottom: 3px solid var(--zdc-el-earth); }
.zdc-trait-weakness { border-bottom: 3px solid var(--zdc-el-fire); }
.zdc-trait-list { margin: 0; padding: 0; list-style: none; }
.zdc-trait-list li { position: relative; margin-bottom: 12px; padding-left: 26px; line-height: 1.55; }
.zdc-trait-list li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--zdc-accent); font-size: 0.85rem; }

.zdc-life-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zdc-life-card { padding: 28px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 22px; box-shadow: var(--zdc-shadow); scroll-margin-top: 140px; }
.zdc-life-title { margin: 0 0 12px; font-size: 1.3rem; }
.zdc-life-card p { margin: 0; line-height: 1.7; color: var(--zdc-text-muted); }

.zdc-lucky-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zdc-lucky-card { padding: 24px 18px; text-align: center; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 20px; }
.zdc-lucky-label { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-text-muted); }
.zdc-lucky-value { display: block; font-size: 1.45rem; font-weight: 500; color: var(--zdc-accent); line-height: 1.2; }

.zdc-match-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 8px; }
.zdc-match-title { margin: 0 0 14px; font-size: 1.15rem; }
.zdc-match-signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.zdc-empty { color: var(--zdc-text-muted); }
.zdc-load-more-wrap { text-align: center; margin-top: 36px; }
.zdc-load-more-count { margin: 12px 0 0; font-size: 0.88rem; color: var(--zdc-text-muted); }
.zdc-load-more:disabled { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   11. Posts: cards, single, widgets, pagination
   ========================================================================== */
.zdc-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
body.zdc-list-layout .zdc-posts-grid { grid-template-columns: 1fr; }

.zdc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--zdc-surface);
	border: 1px solid var(--zdc-border);
	border-radius: var(--zdc-radius);
	overflow: hidden;
	box-shadow: var(--zdc-shadow);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.zdc-card:hover { transform: translateY(-4px); border-color: rgba(var(--zdc-accent-rgb), 0.5); box-shadow: var(--zdc-shadow-lift); }
/* The whole card is clickable: the title link stretches over it while the
   badge and other inner links stay above. */
.zdc-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zdc-card .zdc-cat-badge, .zdc-card .zdc-read-more, .zdc-card .zdc-meta a { position: relative; z-index: 2; }
.zdc-card-thumb { display: block; overflow: hidden; aspect-ratio: 1200 / 628; }
.zdc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.zdc-card:hover .zdc-card-thumb img { transform: scale(1.05); }
.zdc-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.zdc-card-title { font-size: 1.3rem; margin-bottom: 0.45em; line-height: 1.25; }
.zdc-card-title a { color: var(--zdc-heading); }
.zdc-card-title a:hover { color: var(--zdc-accent); }
.zdc-card-excerpt { flex: 1; color: var(--zdc-text-muted); font-size: 0.96rem; line-height: 1.6; }
.zdc-card-excerpt p { margin: 0 0 4px; }
.zdc-card-date { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--zdc-text-muted); }
.zdc-read-more { align-self: flex-start; margin-top: 14px; font-size: 0.9rem; font-weight: 500; color: var(--zdc-accent); }

.zdc-cat-badge {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 4px 13px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zdc-accent);
	background: var(--zdc-wash);
	border-radius: 999px;
}
a.zdc-cat-badge:hover { background: var(--zdc-accent); color: #fff; }

.zdc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: 14px;
	padding-top: 14px;
	font-size: 0.83rem;
	color: var(--zdc-text-muted);
	border-top: 1px solid var(--zdc-border);
}
.zdc-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.zdc-meta-item svg { width: 15px; height: 15px; fill: none; stroke: var(--zdc-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.zdc-avatar { width: 24px; height: 24px; border-radius: 50%; }

/* Single post */
.zdc-single { max-width: var(--zdc-content); margin: 0 auto; }
.zdc-single-header { text-align: center; margin-bottom: 30px; }
.zdc-single-header .zdc-cat-badge { align-self: center; }
.zdc-single-header .zdc-meta { justify-content: center; border-top: none; }
.zdc-single-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; }
.zdc-single-thumb { margin: 0 0 34px; }
.zdc-single-thumb img { width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: 24px; box-shadow: var(--zdc-shadow-lift); }

.zdc-content { font-size: 1.08rem; }
.zdc-content > *:first-child { margin-top: 0; }
.zdc-content > *:last-child { margin-bottom: 0; }
.zdc-content a { text-decoration: underline; text-decoration-color: rgba(var(--zdc-accent-rgb), 0.4); text-underline-offset: 3px; }
.zdc-content a:hover { text-decoration-color: currentColor; }
.zdc-content img { border-radius: 14px; }
.zdc-content p, .zdc-page-content p { margin: 0 0 1.4em; }
.zdc-content ul, .zdc-content ol, .zdc-page-content ul, .zdc-page-content ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.zdc-content li, .zdc-page-content li { margin-bottom: 0.45em; }
.zdc-content h2, .zdc-page-content h2 { margin: 1.8em 0 0.6em; }
.zdc-content h3, .zdc-content h4, .zdc-page-content h3, .zdc-page-content h4 { margin: 1.5em 0 0.5em; }
.zdc-content strong { color: var(--zdc-heading); font-weight: 600; }
.zdc-content br, .zdc-page-content br { display: block; content: ""; margin-top: 0.9em; }
.zdc-updated { color: var(--zdc-text-muted); font-size: 0.92rem; }
.site-main div[class*="paragraph"] { margin: 0; }
.site-main div[class*="heading"] { margin: 1.5em 0 0.5em; }
.site-main div[class*="space"], .zdc-content div:empty, .zdc-page-content div:empty { height: 1.05em; }

.zdc-page-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--zdc-border); }
.zdc-page-links-label { margin-right: 4px; color: var(--zdc-text-muted); font-size: 0.95rem; }
.zdc-page-links .zdc-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1.5px solid var(--zdc-border); border-radius: 50%; color: var(--zdc-heading); font-size: 0.88rem; font-weight: 600; }
.zdc-page-links a { text-decoration: none !important; }
.zdc-page-links a:hover .zdc-page-num { border-color: var(--zdc-accent); color: var(--zdc-accent); }
.zdc-page-links > .zdc-page-num { background: var(--zdc-accent); border-color: var(--zdc-accent); color: #fff; }

.zdc-divider { display: flex; align-items: center; gap: 16px; margin: 44px 0 28px; user-select: none; }
.zdc-divider::before, .zdc-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--zdc-border)); }
.zdc-divider::after { background: linear-gradient(90deg, var(--zdc-border), transparent); }
.zdc-divider-star { color: var(--zdc-accent); font-size: 1rem; }
.zdc-divider-text { color: var(--zdc-accent); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }

.zdc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.zdc-tags a { padding: 5px 14px; font-size: 0.8rem; font-weight: 600; color: var(--zdc-text-muted); background: var(--zdc-surface-2); border-radius: 999px; }
.zdc-tags a:hover { background: var(--zdc-accent); color: #fff; }

.zdc-author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 40px; padding: 26px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 22px; }
.zdc-author-box img { border-radius: 50%; flex-shrink: 0; }
.zdc-author-box h3 { margin-bottom: 0.3em; font-size: 1.2rem; }
.zdc-author-box p { margin: 0; color: var(--zdc-text-muted); font-size: 0.95rem; }

.zdc-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.zdc-post-nav a { display: block; padding: 18px 22px; background: var(--zdc-surface); border: 1.5px solid var(--zdc-border); border-radius: 18px; transition: border-color 0.2s ease, transform 0.2s ease; }
.zdc-post-nav a:hover { border-color: var(--zdc-accent); transform: translateY(-2px); }
.zdc-post-nav .zdc-nav-label { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-post-nav .zdc-nav-title { color: var(--zdc-heading); font-weight: 500; line-height: 1.3; }
.zdc-post-nav .zdc-nav-next { text-align: right; }

.zdc-related { margin-top: 52px; }
.zdc-related-title { font-size: 1.5rem; text-align: center; margin-bottom: 24px; }
.zdc-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.zdc-related-card .zdc-card-title { font-size: 1.1rem; margin-bottom: 6px; }
.zdc-related-card .zdc-card-body { padding: 16px 18px 18px; }
.zdc-related-date { font-size: 0.8rem; color: var(--zdc-text-muted); }

/* Sidebar and widgets */
.zdc-sidebar .widget { padding: 24px; margin-bottom: 26px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 20px; }
.zdc-sidebar .widget-title { font-size: 1.1rem; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--zdc-border); }
.zdc-sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.zdc-sidebar .widget li { padding: 8px 0; border-bottom: 1px solid var(--zdc-border); font-size: 0.93rem; }
.zdc-sidebar .widget li:last-child { border-bottom: none; }
.zdc-sidebar .widget a { color: var(--zdc-text-muted); }
.zdc-sidebar .widget a:hover { color: var(--zdc-accent); }
.zdc-popular-list { list-style: none; margin: 0; padding: 0; }
.zdc-popular-item { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0 !important; }
.zdc-popular-rank { min-width: 28px; font-size: 1.4rem; font-weight: 600; line-height: 1.1; color: var(--zdc-accent); text-align: center; flex-shrink: 0; }
.zdc-popular-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zdc-popular-text a { color: var(--zdc-heading) !important; font-weight: 500; line-height: 1.4; }
.zdc-popular-text a:hover { color: var(--zdc-accent) !important; }
.zdc-popular-views { font-size: 0.78rem; color: var(--zdc-text-muted); }

/* Pagination */
.zdc-pagination { margin-top: 48px; text-align: center; }
.zdc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 44px; height: 44px; padding: 0 12px; margin: 0 3px; border: 1.5px solid var(--zdc-border); border-radius: 50%; color: var(--zdc-text-muted); font-size: 0.92rem; font-weight: 600; background: var(--zdc-surface); }
.zdc-pagination .page-numbers.current, .zdc-pagination .page-numbers:hover { background: var(--zdc-accent); border-color: var(--zdc-accent); color: #fff; }

/* Page headers, static pages, 404 */
.zdc-page-header { text-align: center; margin-bottom: 44px; }
.zdc-page-header .zdc-page-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); margin-bottom: 0.2em; }
.zdc-page-header .zdc-page-desc { max-width: 640px; margin: 0 auto; color: var(--zdc-text-muted); }
.zdc-page-content { max-width: var(--zdc-content); margin: 0 auto; }
.zdc-404 { text-align: center; padding: 70px 0; }
.zdc-404-code { font-size: clamp(4.5rem, 3rem + 7vw, 8rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; background: var(--zdc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zdc-404 h1 { margin: 0.3em 0; }
.zdc-404 p { max-width: 480px; margin: 0 auto 28px; color: var(--zdc-text-muted); }
.zdc-404 .zdc-search-form { max-width: 440px; margin: 0 auto; }
.zdc-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.sticky { border-color: var(--zdc-accent); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { margin-top: 8px; color: var(--zdc-text-muted); font-size: 0.85rem; text-align: center; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto; }

/* Comments (pages only) */
.comments-area { max-width: var(--zdc-content); margin: 48px auto 0; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 18px 0; border-bottom: 1px solid var(--zdc-border); }

/* ==========================================================================
   12. Long-form copy, FAQ, split layout
   ========================================================================== */
.zdc-longform { background: var(--zdc-surface); border-top: 1px solid var(--zdc-border); border-bottom: 1px solid var(--zdc-border); }
.zdc-longform-inner { max-width: var(--zdc-content); margin: 0 auto; }
.zdc-longform-heading { margin: 2.1em 0 0.6em; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); scroll-margin-top: 110px; }
.zdc-longform-inner > .zdc-longform-heading:first-child,
.zdc-toc + .zdc-longform-heading { margin-top: 0; }
.zdc-longform-inner p { margin: 0 0 1.25em; font-size: 1.06rem; line-height: 1.8; }
.zdc-longform-inner ul { margin: 0 0 1.25em; padding-left: 1.4em; }
.zdc-toc { margin: 0 0 40px; padding: 22px 26px; background: var(--zdc-surface-2); border: 1px solid var(--zdc-border); border-radius: 20px; }
.zdc-toc-title { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-toc ol { margin: 0; padding-left: 1.3em; }
.zdc-toc li { margin: 4px 0; }
.zdc-toc a { font-weight: 600; }

.zdc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.zdc-split-text p { color: var(--zdc-text-muted); font-size: 1.04rem; }
.zdc-faq-heading { font-size: 1.4rem; margin-bottom: 16px; }
.zdc-faq { display: grid; gap: 10px; }
.zdc-faq-item { background: var(--zdc-surface); border: 1.5px solid var(--zdc-border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s ease; }
.zdc-faq-item[open] { border-color: rgba(var(--zdc-accent-rgb), 0.5); box-shadow: var(--zdc-shadow); }
.zdc-faq-q { position: relative; display: block; padding: 16px 52px 16px 20px; font-weight: 500; color: var(--zdc-heading); cursor: pointer; list-style: none; line-height: 1.4; }
.zdc-faq-q::-webkit-details-marker { display: none; }
.zdc-faq-q::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 600; line-height: 1; color: var(--zdc-accent); background: var(--zdc-wash); border-radius: 50%; }
.zdc-faq-item[open] .zdc-faq-q::after { content: "–"; background: var(--zdc-accent); color: #fff; }
.zdc-faq-a { padding: 0 20px 18px; color: var(--zdc-text-muted); }
.zdc-faq-a p { margin: 0; }
.zdc-hub-legal { margin-top: 24px; padding-top: 18px; font-size: 0.92rem; color: var(--zdc-text-muted); border-top: 1px solid var(--zdc-border); }
.zdc-hub-legal a { color: var(--zdc-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.zdc-hub-legal a:hover { color: var(--zdc-accent); }

/* ==========================================================================
   13. Tools, results, quizzes, tarot
   ========================================================================== */
.zdc-tool { padding: 34px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 26px; box-shadow: var(--zdc-shadow); }
.zdc-tool-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 4px; }
.zdc-tool-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.zdc-tool-legend { padding: 0; margin-bottom: 10px; font-size: 0.95rem; font-weight: 600; color: var(--zdc-heading); }
.zdc-tool-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 20px; }
.zdc-tool-field { display: block; }
.zdc-tool-field > span { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--zdc-text-muted); }
.zdc-tool-field-wide { grid-column: 1 / -1; }
.zdc-tool-go { min-width: 200px; }
.zdc-tool-privacy { margin: 18px 0 0; font-size: 0.85rem; color: var(--zdc-text-muted); }
.zdc-tool-privacy::before { content: "🔒 "; }
.zdc-tool-result { margin-top: 26px; }
.zdc-tool-result:empty { display: none; }

.zdc-result-hero { display: flex; align-items: center; gap: 24px; padding: 26px; margin-bottom: 18px; background: var(--zdc-wash); border: 1px solid rgba(var(--zdc-accent-rgb), 0.25); border-radius: 22px; }
.zdc-result-hero-alt { background: var(--zdc-surface-2); border-color: var(--zdc-border); }
.zdc-result-art { margin: 0; flex: 0 0 auto; }
.zdc-result-art img { width: 120px; height: 120px; object-fit: contain; display: block; }
.zdc-result-glyph { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; font-size: 2.6rem; font-weight: 600; line-height: 1; color: #fff; background: var(--zdc-gradient); border-radius: 26px; box-shadow: 0 12px 26px -8px var(--zdc-glow); }
.zdc-result-glyph-xl { width: 110px; height: 110px; font-size: 3.6rem; background: var(--zdc-surface); box-shadow: var(--zdc-shadow); }
.zdc-result-label { display: block; margin-bottom: 4px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-result-big { display: block; margin-bottom: 6px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--zdc-heading); }
.zdc-result-note { margin: 0 0 10px; font-size: 0.98rem; line-height: 1.65; color: var(--zdc-text-muted); }
.zdc-result-lead { display: block; margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--zdc-text-muted); }
.zdc-result-steps { font-size: 0.9rem; }
.zdc-result-reassure { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--zdc-border); font-size: 0.9rem; }
.zdc-result-cusp { margin: 0 0 16px; padding: 14px 18px; font-size: 0.94rem; line-height: 1.6; color: var(--zdc-text); background: var(--zdc-surface-2); border-left: 4px solid var(--zdc-accent); border-radius: 0 14px 14px 0; }
.zdc-result-error { margin: 0; padding: 14px 18px; color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 14px; }
body.zdc-scheme-dark .zdc-result-error { color: #fda4af; background: rgba(159, 18, 57, 0.18); border-color: rgba(253, 164, 175, 0.35); }
.zdc-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.zdc-result-grid-3 { grid-template-columns: repeat(3, 1fr); }
.zdc-result-card { padding: 20px 22px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 18px; }
.zdc-result-card-num { text-align: center; }
.zdc-result-value { display: block; margin-bottom: 6px; font-size: 1.12rem; font-weight: 500; color: var(--zdc-heading); line-height: 1.3; }
.zdc-result-bignum { display: block; margin: 4px 0 6px; font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--zdc-accent); letter-spacing: -0.04em; }
.zdc-result-card-num .zdc-result-note { text-align: left; }
.zdc-match-pair { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 22px; }
.zdc-match-pair .zdc-sign-card { min-width: 140px; }
.zdc-match-and { font-weight: 600; color: var(--zdc-accent); }
.zdc-balance-track { display: block; height: 10px; margin: 8px 0 12px; overflow: hidden; background: var(--zdc-surface); border-radius: 999px; }
.zdc-balance-fill { display: block; height: 100%; background: var(--zdc-gradient); border-radius: 999px; }
.zdc-saturn-track { max-width: 360px; }

/* Compatibility (homepage, sign pages, love match tool) */
.zdc-compat { padding: 30px; margin-top: 24px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 26px; box-shadow: var(--zdc-shadow); }
.zdc-compat-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.zdc-compat-field { flex: 1 1 200px; }
.zdc-compat-field span { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--zdc-text-muted); }
.zdc-compat-amp { padding-bottom: 12px; font-size: 1.6rem; font-weight: 600; color: var(--zdc-accent); }
.zdc-compat-result:empty { display: none; }
.zdc-compat-result { margin-top: 26px; }
.zdc-compat-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.zdc-compat-score-num { font-size: 3.2rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; background: var(--zdc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zdc-compat-verdict { font-size: 1.25rem; font-weight: 500; color: var(--zdc-heading); }
.zdc-compat-summary { margin: 0 0 22px; max-width: 68ch; color: var(--zdc-text-muted); line-height: 1.7; }
.zdc-compat-bar { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 12px; margin-bottom: 10px; }
.zdc-compat-bar-label { font-size: 0.9rem; font-weight: 500; color: var(--zdc-text-muted); }
.zdc-compat-bar-track { height: 10px; overflow: hidden; background: var(--zdc-surface-2); border-radius: 999px; }
.zdc-compat-bar-fill { display: block; height: 100%; background: var(--zdc-gradient); border-radius: 999px; }
.zdc-compat-bar-num { font-size: 0.85rem; font-weight: 600; text-align: right; color: var(--zdc-text-muted); }
.zdc-compat-tip { margin: 20px 0 0; padding: 14px 18px; background: var(--zdc-wash); border-radius: 14px; font-size: 0.96rem; }
.zdc-compat-foot { margin: 20px 0 0; font-size: 0.9rem; color: var(--zdc-text-muted); }

/* Quizzes */
.zdc-quiz { padding: 34px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 26px; box-shadow: var(--zdc-shadow); }
.zdc-quiz-progress { height: 8px; margin-bottom: 26px; overflow: hidden; background: var(--zdc-surface-2); border-radius: 999px; }
.zdc-quiz-progress-bar { display: block; width: 0; height: 100%; background: var(--zdc-gradient); border-radius: 999px; transition: width 0.3s ease; }
.zdc-quiz-step { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-quiz-q { margin: 0 0 22px; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); line-height: 1.3; }
.zdc-quiz-answers { display: grid; gap: 12px; }
.zdc-quiz-a { display: block; width: 100%; padding: 16px 20px; text-align: left; font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--zdc-text); background: var(--zdc-surface); border: 1.5px solid var(--zdc-border); border-radius: 16px; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.zdc-quiz-a:hover, .zdc-quiz-a:focus-visible { border-color: var(--zdc-accent); background: var(--zdc-wash); color: var(--zdc-text); filter: none; transform: translateX(3px); }
.zdc-quiz-result { text-align: center; }
.zdc-quiz-result-art { margin: 0 auto 10px; }
.zdc-quiz-result-art img { width: 180px; height: 180px; object-fit: contain; }
.zdc-quiz-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 10px; font-size: 3rem; color: #fff; background: var(--zdc-gradient); border-radius: 30px; }
.zdc-quiz-result-label { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-quiz-result-name { margin: 0 0 12px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.zdc-quiz-result-summary { max-width: 58ch; margin: 0 auto 22px; color: var(--zdc-text-muted); line-height: 1.7; }
.zdc-quiz-result-signs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.zdc-quiz-result-signs .zdc-sign-card { min-width: 120px; }
.zdc-quiz-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Tarot */
.zdc-tarot-daily, .zdc-tarot-three { display: grid; gap: 18px; }
.zdc-tarot-three { grid-template-columns: repeat(3, 1fr); margin-top: 26px; }
.zdc-tarot-three:empty { display: none; }
.zdc-tarot-spread { text-align: center; }
.zdc-tarot-draw { position: relative; padding: 28px 24px; text-align: center; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 24px; box-shadow: var(--zdc-shadow); }
.zdc-tarot-draw.is-reversed .zdc-tarot-draw-icon { transform: rotate(180deg); }
.zdc-tarot-position { display: block; margin-bottom: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-tarot-draw-icon { display: inline-block; font-size: 3.6rem; line-height: 1; margin-bottom: 8px; transition: transform 0.3s ease; }
.zdc-tarot-draw-name { margin: 0 0 4px; font-size: 1.4rem; }
.zdc-tarot-draw-orient { display: block; margin-bottom: 12px; font-size: 0.82rem; font-weight: 600; color: var(--zdc-accent); }
.zdc-tarot-draw-text { margin: 0; color: var(--zdc-text-muted); line-height: 1.65; text-align: left; }
.zdc-tarot-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zdc-tarot-card { padding: 22px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 20px; }
.zdc-tarot-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.zdc-tarot-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; font-size: 1.7rem; background: var(--zdc-wash); border-radius: 16px; }
.zdc-tarot-card-name { margin: 0; font-size: 1.1rem; }
.zdc-tarot-card-num { font-size: 0.78rem; font-weight: 600; color: var(--zdc-text-muted); }
.zdc-tarot-meaning { margin: 0 0 8px; font-size: 0.93rem; line-height: 1.55; color: var(--zdc-text-muted); }
.zdc-tarot-meaning strong { color: var(--zdc-heading); }

/* Moon now, retrogrades */
.zdc-moon-now { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 36px 38px; background: linear-gradient(135deg, var(--zdc-surface) 0%, var(--zdc-surface-2) 100%); border: 1px solid var(--zdc-border); border-radius: 30px; box-shadow: var(--zdc-shadow); }
.zdc-moon-now-icon { font-size: 5.2rem; line-height: 1; filter: drop-shadow(0 10px 18px var(--zdc-glow)); }
.zdc-moon-now-label { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-moon-now-name { margin: 0 0 10px; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.1; }
.zdc-moon-now-meaning { max-width: 56ch; margin: 0 0 8px; }
.zdc-moon-now-age { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--zdc-text-muted); }
.zdc-moon-now-next { margin: 6px 0 0; font-size: 0.88rem; color: var(--zdc-text-muted); }

.zdc-retro-list { display: grid; gap: 18px; }
.zdc-retro-card { padding: 30px 30px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 24px; box-shadow: var(--zdc-shadow); scroll-margin-top: 110px; }
.zdc-retro-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.zdc-retro-glyph { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 58px; height: 58px; font-size: 1.9rem; color: #fff; background: var(--zdc-gradient); border-radius: 18px; }
.zdc-retro-title { margin: 0 0 2px; font-size: 1.45rem; }
.zdc-retro-freq { margin: 0; font-size: 0.88rem; color: var(--zdc-text-muted); }
.zdc-retro-summary { max-width: 70ch; margin: 0 0 20px; line-height: 1.75; }
.zdc-retro-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.zdc-retro-sub { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-accent); }
.zdc-retro-cols p { margin: 0; color: var(--zdc-text-muted); line-height: 1.6; }
.zdc-retro-note { margin: 0 0 16px; padding: 14px 18px; font-size: 0.94rem; line-height: 1.6; color: var(--zdc-text-muted); background: var(--zdc-surface-2); border-radius: 14px; }

/* ==========================================================================
   14. Birth chart studio
   ========================================================================== */
.zdc-natal-form { padding: 34px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 26px; box-shadow: var(--zdc-shadow); }
.zdc-natal-when { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.zdc-natal-dmy { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 10px; }
.zdc-natal-clock { display: grid; grid-template-columns: 1fr auto 1fr 0.9fr; align-items: center; gap: 8px; }
.zdc-natal-clock-sep { font-weight: 600; color: var(--zdc-text-muted); }
.zdc-natal-hint { margin: 10px 0 18px; font-size: 0.88rem; color: var(--zdc-text-muted); }
.zdc-natal-place { position: relative; }
.zdc-natal-place-status { min-height: 1.3em; margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--zdc-accent); }
.zdc-natal-suggest { position: absolute; left: 0; right: 0; z-index: 30; max-height: 280px; margin: 4px 0 0; padding: 6px; overflow-y: auto; list-style: none; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 16px; box-shadow: var(--zdc-shadow-lift); }
.zdc-natal-suggest[hidden] { display: none; }
.zdc-natal-suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.zdc-natal-suggest-item:hover, .zdc-natal-suggest-item.is-active { background: var(--zdc-wash); }
.zdc-natal-suggest-city { font-weight: 600; color: var(--zdc-heading); }
.zdc-natal-suggest-country { font-size: 0.83rem; color: var(--zdc-text-muted); }
.zdc-natal-suggest-empty { padding: 12px; font-size: 0.92rem; color: var(--zdc-text-muted); }
.zdc-natal-manual { margin: 0 0 22px; padding: 14px 18px; background: var(--zdc-surface-2); border-radius: 16px; }
.zdc-natal-manual summary { cursor: pointer; font-weight: 600; color: var(--zdc-accent); }
.zdc-natal-manual .zdc-tool-fields { margin-top: 16px; }
.zdc-natal-submit { width: 100%; padding: 16px; font-size: 1.05rem; }
.zdc-natal-privacy { margin: 14px 0 0; font-size: 0.86rem; color: var(--zdc-text-muted); text-align: center; }
.zdc-natal-result { margin-top: 34px; }
.zdc-natal-result:empty { display: none; }
.zdc-natal-result section { margin-bottom: 40px; }
.zdc-big3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zdc-big3-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 12px; text-align: center; background: var(--zdc-surface); border: 1.5px solid var(--zdc-border); border-radius: 20px; color: var(--zdc-text); transition: transform 0.2s ease, border-color 0.2s ease; }
.zdc-big3-card:hover { transform: translateY(-3px); border-color: var(--zdc-el, var(--zdc-accent)); color: var(--zdc-text); }
.zdc-big3-card .zdc-sym-card { width: 48px; height: 48px; }
.zdc-big3-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zdc-text-muted); }
.zdc-big3-sign { font-size: 1.25rem; font-weight: 500; color: var(--zdc-heading); }
.zdc-natal-summary { margin: 18px 0 0; padding: 18px 22px; background: var(--zdc-wash); border-radius: 16px; line-height: 1.7; }
.zdc-natal-wheel-wrap { text-align: center; }
.zdc-wheel { width: 100%; max-width: 520px; height: auto; }
.zdc-wheel-ring { fill: none; stroke: var(--zdc-border); stroke-width: 1.5; }
.zdc-wheel-tick, .zdc-wheel-cusp { stroke: var(--zdc-border); stroke-width: 1; }
.zdc-wheel-cusp.is-major { stroke: var(--zdc-accent); stroke-width: 2; }
.zdc-wheel-point { stroke: var(--zdc-accent); stroke-width: 1.5; }
.zdc-wheel-sign { font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: var(--zdc-el, var(--zdc-accent)); }
.zdc-wheel-house { font-size: 10px; text-anchor: middle; dominant-baseline: central; fill: var(--zdc-text-muted); }
.zdc-wheel-planet { font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: var(--zdc-heading); }
.zdc-wheel-retro { font-size: 10px; fill: var(--zdc-accent); }
.zdc-wheel-angle { font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: central; fill: var(--zdc-accent); }
.zdc-table-wrap { overflow-x: auto; }
.zdc-natal-table { margin: 0; }
.zdc-natal-glyph { color: var(--zdc-accent); font-size: 1.2em; }
.zdc-retro-mark { color: var(--zdc-accent); text-decoration: none; }
.zdc-natal-reading { padding: 22px 24px; margin-bottom: 14px; background: var(--zdc-surface); border: 1px solid var(--zdc-border); border-radius: 18px; }
.zdc-natal-reading-title { margin: 0 0 8px; font-size: 1.15rem; }
.zdc-natal-reading p { margin: 0; color: var(--zdc-text-muted); line-height: 1.7; }

/* ==========================================================================
   15. Footer
   ========================================================================== */
.site-footer { margin-top: 0; background: var(--zdc-footer-bg); color: var(--zdc-footer-text); }
.zdc-footer-cta { background: linear-gradient(135deg, var(--zdc-accent-2) 0%, var(--zdc-accent) 70%, #a15de8 100%); color: #fff; }
.zdc-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 44px 0; }
.zdc-footer-cta-title { margin: 0 0 6px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); color: #fff; }
.zdc-footer-cta-text { margin: 0; max-width: 56ch; opacity: 0.92; }

.zdc-footer-main { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr 1.1fr; gap: 40px; padding: 60px 0 44px; }
.zdc-footer-brand-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.zdc-footer-logo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 6px 20px -4px rgba(var(--zdc-accent-rgb), 0.7); }
.zdc-footer-title { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.zdc-footer-title:hover { color: #fff; opacity: 0.85; }
.zdc-footer-desc { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.7; }
.zdc-footer-mail { margin: 0 0 14px; font-weight: 500; }
.zdc-footer-mail a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.zdc-footer-note { margin: 16px 0 0; font-size: 0.83rem; line-height: 1.6; opacity: 0.8; }
.zdc-footer-heading { margin: 0 0 16px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.zdc-footer-signs, .zdc-footer-links { margin: 0; padding: 0; list-style: none; }
.zdc-footer-signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.zdc-footer-signs a, .zdc-footer-links a { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.93rem; color: var(--zdc-footer-text); }
.zdc-footer-signs a:hover, .zdc-footer-links a:hover { color: #fff; }
.zdc-footer-signs .zdc-sym-inline { color: #c8a2f7; }
.site-footer .zdc-social-footer { margin: 0 0 4px; }
.site-footer .zdc-social-link { color: var(--zdc-footer-text); }
.site-footer .zdc-social-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-footer .widget-title { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }

.zdc-footer-bottom { padding: 22px 0; font-size: 0.86rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.zdc-footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; }
.zdc-copyright { margin: 0; }
.zdc-footer-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.zdc-footer-menu a { color: var(--zdc-footer-text); }
.zdc-footer-menu a:hover { color: #fff; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.zdc-footer-main { grid-template-columns: 1fr 1fr 1fr; }
	.zdc-footer-brand { grid-column: 1 / -1; }
	.zdc-signs-cards { grid-template-columns: repeat(4, 1fr); }
	.zdc-astro-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
	body.zdc-has-sidebar .zdc-layout { grid-template-columns: minmax(0, 1fr); }
	.zdc-hero-grid { grid-template-columns: 1fr; }
	.zdc-hero-art { order: -1; }
	.zdc-hero-orb { width: min(260px, 70%); }
	.zdc-sky-grid { grid-template-columns: repeat(2, 1fr); }
	.zdc-ways { grid-template-columns: 1fr; }
	.zdc-split { grid-template-columns: 1fr; gap: 36px; }
	.zdc-life-grid { grid-template-columns: 1fr; }
	.zdc-lucky-grid { grid-template-columns: repeat(2, 1fr); }
	.zdc-sign-facts { grid-template-columns: repeat(2, 1fr); }
	.zdc-sign-hero-inner { grid-template-columns: 1fr; }
	.zdc-sign-hero-art { order: -1; justify-self: start; }
	.zdc-sign-hero-art img { width: 200px; height: 200px; }
	.zdc-signs-grid { grid-template-columns: repeat(4, 1fr); }
	.zdc-astro-grid { grid-template-columns: repeat(2, 1fr); }
	.zdc-tarot-three, .zdc-tarot-deck { grid-template-columns: repeat(2, 1fr); }
	.zdc-result-grid-3 { grid-template-columns: 1fr; }
	.zdc-footer-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 820px) {
	.zdc-section { padding: 52px 0; }
	.zdc-section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
	.zdc-traits, .zdc-match-groups { grid-template-columns: 1fr; }
	.zdc-astro-grid-lg { grid-template-columns: 1fr; }
	.zdc-retro-cols { grid-template-columns: 1fr; gap: 14px; }
	.zdc-moon-now { gap: 18px; padding: 26px 22px; }
	.zdc-moon-now-icon { font-size: 3.8rem; }
	.zdc-compat { padding: 22px; }
	.zdc-compat-controls { flex-direction: column; align-items: stretch; gap: 12px; }
	.zdc-compat-amp { display: none; }
	.zdc-compat-bar { grid-template-columns: 100px 1fr 44px; gap: 8px; }
	.zdc-tool, .zdc-quiz, .zdc-natal-form { padding: 24px 20px; }
	.zdc-tool-pair { grid-template-columns: 1fr; }
	.zdc-natal-when { grid-template-columns: 1fr; }
	.zdc-result-hero { flex-direction: column; align-items: flex-start; }
	.zdc-feature-card { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
	.zdc-post-nav { grid-template-columns: 1fr; }
	.zdc-related-grid { grid-template-columns: 1fr; }
	.zdc-page-hero-row { flex-direction: column; align-items: flex-start; gap: 16px; }
	.zdc-page-hero-icon { width: 66px; height: 66px; font-size: 2rem; border-radius: 20px; }
	.zdc-footer-main { grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 0 32px; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.zdc-container { padding: 0 16px; }
	.site-main { padding: 28px 0 48px; }
	.zdc-header-inner { min-height: 64px; gap: 10px; }
	.zdc-logo img { width: 40px; height: 40px; }
	.site-title { font-size: calc(var(--zdc-title-size) * 0.85); }
	.site-description { display: none; }
	.zdc-hero { padding: 40px 0 36px; }
	.zdc-hero-actions .zdc-btn { width: 100%; }
	.zdc-posts-grid { grid-template-columns: 1fr; gap: 18px; }
	.zdc-card-body { padding: 18px 20px 20px; }
	.zdc-card-title { font-size: 1.22rem; }
	.zdc-meta { gap: 6px 14px; font-size: 0.8rem; }
	.zdc-single-thumb { margin-bottom: 24px; }
	.zdc-content { font-size: 1rem; }
	.zdc-author-box { flex-direction: column; padding: 20px; }
	.zdc-divider { margin: 32px 0 20px; }
	.alignleft, .alignright { float: none; margin: 16px 0; }
	.zdc-pagination .page-numbers { min-width: 44px; height: 44px; }
	.zdc-top { right: 16px; bottom: 16px; }
	.zdc-side-menu { padding: 68px 20px 28px; }
	.zdc-signs-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.zdc-sign-card { padding: 14px 10px; }
	.zdc-signs-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
	.zdc-sky-grid { grid-template-columns: 1fr; }
	.zdc-astro-grid { grid-template-columns: 1fr; gap: 14px; }
	.zdc-signs-inline { grid-template-columns: repeat(2, 1fr); }
	.zdc-lucky-grid { grid-template-columns: 1fr 1fr; }
	.zdc-sign-facts { grid-template-columns: 1fr; }
	.zdc-match-signs { grid-template-columns: repeat(2, 1fr); }
	.zdc-compat-score-num { font-size: 2.5rem; }
	.zdc-tarot-three, .zdc-tarot-deck { grid-template-columns: 1fr; }
	.zdc-big3-grid { grid-template-columns: 1fr; }
	.zdc-natal-dmy { grid-template-columns: 1fr 1fr 1fr; }
	.zdc-footer-main { grid-template-columns: 1fr; }
	.zdc-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
	.zdc-sign-nav a { padding: 12px 13px; }
	body.zdc-sticky-header .zdc-sign-nav { top: 64px; }
	.zdc-faq-q { padding: 14px 48px 14px 16px; }
}

/* ==========================================================================
   17. MGID ad slots
   ========================================================================== */
.zdc-ad {
	display: block;
	clear: both;
	width: 100%;
	text-align: center;
	position: relative;
}
.zdc-ad .zdc-ad-widget { display: block; width: 100%; position: relative; }

/* Overlay formats (swipe-up, notification, exit).
   MGID positions these over the content itself, so their container must not
   take up room in the page flow, or it would push the real content down by
   the height of an ad that is not sitting there. No display:none: a hidden
   subtree is not rendered, so the format would never start. */
.zdc-ad-overlay {
	position: absolute;
	width: 0;
	height: 0;
	overflow: visible;
}

/* In-site notification and exit: fully BELOW the header, no overlap.

   MGID renders its unit as its OWN element with position: fixed. A fixed
   element is positioned against the viewport, not its parent, so moving the
   `.zdc-ad-overlay` wrapper (which is 0x0 anyway) does nothing to that ad.
   It would otherwise come out under the header, cut off at the top: the X
   button is not visible and cannot be clicked.

   So a CSS custom property holds the offset here, and the JS in
   inc/adskeeper.php (zodiac_adskeeper_overlay_offset_js) applies it to the
   MGID element itself and re-applies it when the network rewrites the inline
   style.

   --zdc-overlay-top follows the .zdc-header-inner min-height (76px desktop,
   64px mobile) plus ~9% of the viewport height. Because of the vh the gap
   grows with the screen instead of being a fixed few pixels.

   THIS IS THE VALUE TO TUNE the height of the notification/exit unit: JS sets
   it as `top` on the MGID element itself (see place() in
   zodiac_adskeeper_overlay_offset_js). More vh = unit lower, less = closer to
   the header. Change the vh part, not the px part: px follows the header. */
:root {
	--zdc-overlay-top: calc(76px + 9vh);

	/* Gap between the bottom of the header and the top of the MGID
	   exit/notification unit.

	   The header height is MEASURED from JS, so this is the only value to
	   tune: less = closer to the header, more = further. 1vh is 1% of the
	   window height.

	   Applied together with flex-start alignment on the container. Without
	   it the unit is centred, so the gap would depend on the creative's
	   height, which changes from one impression to the next. */
	--zdc-overlay-gap: 1vh;
}

@media (max-width: 640px) {
	:root {
		--zdc-overlay-top: calc(64px + 9vh);
		/* The header height is measured, so the gap alone is enough here. */
		--zdc-overlay-gap: 1vh;
	}
}

/* The wrapper stays 0x0 and out of flow; it does not try to position the ad. */
.zdc-ad-notification,
.zdc-ad-exit {
	position: static;
}

/* Safety net: if MGID renders its unit as a plain child (no shadow root) and
   without its own `top`, this drops it below the header straight away. Once
   it sets its inline `top`, the JS takes over. */
.zdc-ad-notification > [data-type="_mgwidget"],
.zdc-ad-exit > [data-type="_mgwidget"] {
	position: relative;
	z-index: 99;
}

/* Article content is a flex column: every block (paragraph, heading, ad) is
   its own row. In a flex container items CANNOT overlap: a row always starts
   below the previous one, however tall the ad grows. That fixes the overlap
   on phones too, where MGID stacks the cards vertically and the ad is much
   taller than on desktop. */
.zdc-content {
	display: flex;
	flex-direction: column;
}
/* flex-basis: auto, so every block is exactly as tall as it needs to be. */
.zdc-content > * { flex: 0 0 auto; min-width: 0; }

/* In-article ad: its own row, with no reserved pixel height. The height is
   set only by the footer JS (zodiac_adskeeper_autosize_js) from the ad that
   actually rendered, so it works on every device without guessing values. An
   empty slot stays at zero, so there is no hole when MGID does not serve. */
.zdc-content > .zdc-ad-inarticle {
	width: 100%;
	min-height: 0;
	/* When a paragraph follows the ad, that <p> has no margin-top (paragraphs
	   in this theme space themselves with margin-bottom only), so without a
	   bottom margin of its own the ad sits almost glued to the text below. */
	margin-bottom: 32px;
}
.zdc-ad.zdc-ad-inarticle.is-filled {
	margin-bottom: 32px;
}

/* The ads sit ABOVE an H2, so the ad's bottom margin and that H2's top margin
   (1.8em) add up: .zdc-content is a flex column, where margins do not
   collapse. So an H2 right after the slot adds no top margin of its own; the
   ad already provides the gap. */
.zdc-content > .zdc-ad-inarticle + h2 {
	margin-top: 0;
}

/* An empty (unfilled) slot must not eat the gap the H2 would otherwise have:
   there is no ad there to make up for it. */
.zdc-content > .zdc-ad-inarticle:not(.is-filled) {
	margin-bottom: 0;
}
.zdc-content > .zdc-ad-inarticle:not(.is-filled) + h2 {
	margin-top: 1.8em;
}

/* Note: MGID renders the ad in a shadow root, which styles from here cannot
   reach. That is why the slot height is set by the footer JS, which walks
   into the shadow root and measures the real ad: see
   zodiac_adskeeper_autosize_js() in inc/adskeeper.php. */

.zdc-ad-widget { margin: 20px auto 28px; max-width: var(--zdc-container); }
.zdc-ad-top { margin: 0 auto 20px; max-width: var(--zdc-container); }

/* Header ad: no reserved gap.
   The MGID snippet sets min-height: 300px on the container, which would leave
   a large blank band under the header on every page when the ad does not
   fill. So the slot starts with no height and the JS gives it one only once
   an ad actually arrives, same as the other slots. */
.zdc-ad-header {
	margin: 0 auto;
	max-width: var(--zdc-container);
	min-height: 0;
}
.zdc-ad-header.is-filled { margin: 20px auto; }

/* Footer ad inside the post (after the "Pages" nav): like the in-article
   slot, no reserved height; the JS sets the real measured value. The padding
   is the same in both states, so filling does not shift the content below. */
.zdc-ad-footer {
	margin: 0;
	padding: 24px 16px;
	width: 100%;
	min-height: 0;
}

/* Touch devices: no hover lifts (saves GPU and avoids stuck hover states) */
@media (hover: none) {
	.zdc-card:hover, .zdc-astro-card:hover, .zdc-way:hover, .zdc-sign-card:hover { transform: none; }
	.zdc-card:hover .zdc-card-thumb img, .zdc-sign-card:hover .zdc-sign-art img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}