/*
Theme Name: Zodiac Routine
Theme URI: https://example.com/zodiac-routine
Author: Leon
Author URI: https://example.com
Description: A modern, white-background WordPress theme for horoscope and astrology publications. Card-based layout, Zodiac Signs navigation dropdown with per-sign archives, and a current-sign widget.
Version: 1.4.0
Requires at least: 5.9
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-routine
Tags: blog, one-column, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--zr-bg: #f5f5f5;
	--zr-ink: #17172b;
	--zr-muted: #64748b;
	--zr-primary: #2563eb;
	--zr-primary-soft: #e9f0fd;
	--zr-primary-dark: #0f1a33;
	--zr-accent: #b45309;
	--zr-accent-soft: #fdf3e3;
	--zr-surface: #ececf1;
	--zr-border: #e2e2ea;
	--zr-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	--zr-radius: 18px;
	--zr-radius-sm: 10px;
	--zr-shadow: 0 1px 2px rgba(23, 23, 43, 0.05), 0 4px 16px rgba(23, 23, 43, 0.05);
	--zr-shadow-lift: 0 12px 32px rgba(37, 99, 235, 0.14);
	--zr-max-width: 1160px;
	--zr-content-width: 760px;
	--zr-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--zr-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--zr-bg);
	color: var(--zr-ink);
	font-family: var(--zr-font);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	/* Sticky footer: keep the footer at the bottom on short pages */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* The main content wrapper grows to fill leftover space */
#zr-content {
	flex: 1 0 auto;
	width: 100%;
}

.zr-footer {
	flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--zr-ink);
	line-height: 1.2;
	margin: 1.5em 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.4em; }

a {
	color: var(--zr-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: #1d4ed8;
}

.zr-entry-content a {
	text-decoration: underline;
	text-decoration-color: rgba(37, 99, 235, 0.35);
	text-underline-offset: 3px;
}

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

blockquote {
	margin: 2em 0;
	padding: 20px 28px;
	background: var(--zr-surface);
	border-left: 4px solid var(--zr-primary);
	border-radius: 0 var(--zr-radius-sm) var(--zr-radius-sm) 0;
	color: var(--zr-muted);
	font-size: 1.05em;
}

blockquote p:last-child { margin-bottom: 0; }

code, pre {
	font-family: Consolas, Menlo, monospace;
	font-size: 0.9em;
	background: var(--zr-surface);
	border-radius: 6px;
}

code { padding: 0.15em 0.4em; }

pre {
	padding: 1em 1.25em;
	overflow-x: auto;
}

pre code { padding: 0; background: none; }

hr {
	border: 0;
	height: 1px;
	background: var(--zr-border);
	margin: 3em 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.95rem;
}

th, td {
	padding: 0.7em 1em;
	border-bottom: 1px solid var(--zr-border);
	text-align: left;
}

th { font-weight: 700; }

/* Zodiac glyphs: always monochrome text symbols, never emoji */
.zr-glyph {
	font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", serif;
	font-style: normal;
	font-weight: 400;
}

/* Screen-reader text (required by WP) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--zr-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--zr-primary);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.zr-container {
	max-width: var(--zr-max-width);
	margin: 0 auto;
	padding: 0 28px;
}

.zr-site-main {
	padding: 48px 0 96px;
}

/* Centered reading column (single posts, pages) */
.zr-site-main.zr-no-sidebar {
	max-width: var(--zr-content-width);
	margin: 0 auto;
}

/* ==========================================================================
   4. Header (sticky, frosted)
   ========================================================================== */

.zr-header {
	position: relative;
	background: #ffffff;
	border-bottom: 1px solid var(--zr-border);
}

.zr-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.zr-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.zr-branding .custom-logo {
	max-height: 44px;
	width: auto;
	border-radius: 10px;
}

.zr-site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.zr-site-title a {
	color: var(--zr-ink);
}

.zr-site-title a:hover { color: var(--zr-primary); }

.zr-tagline {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--zr-muted);
}

/* Navigation */
.zr-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.zr-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.zr-nav li { position: relative; }

.zr-nav a {
	display: block;
	padding: 9px 16px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--zr-ink);
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease;
}

.zr-nav a:hover,
.zr-nav .current-menu-item > a {
	color: var(--zr-primary);
	background: var(--zr-primary-soft);
}

/* Dropdown caret */
.zr-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

.zr-nav li:hover > a::after,
.zr-nav li:focus-within > a::after {
	transform: rotate(225deg) translateY(-1px);
}

/* Dropdown panel — two-column sign grid */
.zr-nav ul ul {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 340px;
	background: #fff;
	border: 1px solid var(--zr-border);
	border-radius: var(--zr-radius);
	box-shadow: 0 20px 48px rgba(23, 23, 43, 0.14);
	padding: 10px;
	z-index: 50;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

/* Bridge the hover gap between the link and the panel */
.zr-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	height: 12px;
}

.zr-nav li:hover > ul,
.zr-nav li:focus-within > ul {
	display: grid;
}

.zr-nav ul ul li { width: auto; }

.zr-nav ul ul a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: var(--zr-radius-sm);
	color: var(--zr-ink);
}

.zr-nav ul ul a::after { display: none !important; }

/* Each sign link carries a zr-sign-* class, so --sign/--sign-soft resolve
   to that sign's color; items without one fall back to theme blue. */
.zr-nav ul ul .zr-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--sign-soft, var(--zr-primary-soft));
	color: var(--sign, var(--zr-primary));
	font-size: 0.95rem;
	flex-shrink: 0;
}

.zr-nav ul ul a:hover .zr-glyph {
	background: var(--sign, var(--zr-primary));
	color: #fff;
}

.zr-nav ul ul a:hover {
	background: var(--sign-soft, var(--zr-primary-soft));
	color: var(--sign, var(--zr-primary));
}

/* --- Traditional per-sign colors ---
   --sign / --sign-soft for light backgrounds, --sign-bright for dark ones. */
.zr-sign-aries       { --sign: #d32f2f; --sign-soft: #fdecec; --sign-bright: #ff6b6b; } /* red */
.zr-sign-taurus      { --sign: #2e7d43; --sign-soft: #e9f4ec; --sign-bright: #6cc98a; } /* green */
.zr-sign-gemini      { --sign: #b8860b; --sign-soft: #fbf3d9; --sign-bright: #f2cf4a; } /* yellow */
.zr-sign-cancer      { --sign: #78889b; --sign-soft: #f0f3f7; --sign-bright: #d7dee8; } /* silver / white */
.zr-sign-leo         { --sign: #c8961e; --sign-soft: #fcf2da; --sign-bright: #e8b93f; } /* gold */
.zr-sign-virgo       { --sign: #8a6642; --sign-soft: #f5eee6; --sign-bright: #c2a07a; } /* brown / beige */
.zr-sign-libra       { --sign: #d1568c; --sign-soft: #fceef4; --sign-bright: #f18ab6; } /* pink & blue */
.zr-sign-scorpio     { --sign: #8e1f2f; --sign-soft: #f8e9eb; --sign-bright: #e05a6d; } /* dark red */
.zr-sign-sagittarius { --sign: #7b3fb5; --sign-soft: #f2eafb; --sign-bright: #b78af0; } /* purple */
.zr-sign-capricorn   { --sign: #6b6660; --sign-soft: #f1f0ee; --sign-bright: #b4aea6; } /* grey / dark brown */
.zr-sign-aquarius    { --sign: #1f74c4; --sign-soft: #e8f2fc; --sign-bright: #62b0f5; } /* blue */
.zr-sign-pisces      { --sign: #10908c; --sign-soft: #e6f5f4; --sign-bright: #4fd1cb; } /* turquoise */


/* Mobile nav toggle — hamburger */
.zr-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.zr-burger {
	display: block;
	position: relative;
	width: 18px;
	height: 14px;
}

.zr-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--zr-ink);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.zr-burger span:nth-child(1) { top: 0; }
.zr-burger span:nth-child(2) { top: 6px; }
.zr-burger span:nth-child(3) { top: 12px; }

/* Animate to an X when open */
.zr-nav-toggle[aria-expanded="true"] .zr-burger span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.zr-nav-toggle[aria-expanded="true"] .zr-burger span:nth-child(2) {
	opacity: 0;
}

.zr-nav-toggle[aria-expanded="true"] .zr-burger span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

@media (max-width: 860px) {
	.zr-nav-toggle { display: inline-flex; }

	.zr-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 12px;
		right: 12px;
		background: #fff;
		border: 1px solid var(--zr-border);
		border-radius: var(--zr-radius);
		box-shadow: 0 24px 48px rgba(23, 23, 43, 0.16);
		padding: 12px;
		z-index: 60;
	}

	.zr-nav.is-open { display: block; }

	.zr-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }

	.zr-nav a { border-radius: var(--zr-radius-sm); }

	.zr-nav ul ul {
		display: grid;
		position: static;
		width: auto;
		border: 0;
		box-shadow: none;
		padding: 4px 0 4px 12px;
	}
}

/* ==========================================================================
   5. Star band + zodiac wheel
   ========================================================================== */

.zr-starband {
	position: relative;
	margin-top: 28px;
	border-radius: 28px;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(700px 380px at 80% -10%, rgba(59, 130, 246, 0.35), transparent 60%),
		radial-gradient(600px 400px at 10% 110%, rgba(37, 99, 235, 0.30), transparent 60%),
		#0b1220;
}

/* Starfield */
.zr-starband::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 15% 25%, rgba(255, 255, 255, 0.7), transparent 55%),
		radial-gradient(1px 1px at 32% 68%, rgba(255, 255, 255, 0.5), transparent 55%),
		radial-gradient(2px 2px at 48% 18%, rgba(212, 175, 55, 0.8), transparent 55%),
		radial-gradient(1px 1px at 62% 52%, rgba(255, 255, 255, 0.55), transparent 55%),
		radial-gradient(1.5px 1.5px at 78% 30%, rgba(255, 255, 255, 0.6), transparent 55%),
		radial-gradient(1px 1px at 88% 72%, rgba(212, 175, 55, 0.7), transparent 55%),
		radial-gradient(1px 1px at 22% 88%, rgba(255, 255, 255, 0.45), transparent 55%),
		radial-gradient(1.5px 1.5px at 70% 85%, rgba(255, 255, 255, 0.5), transparent 55%);
	pointer-events: none;
}

.zr-starband-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 48px;
	padding-top: 56px;
	padding-bottom: 56px;
}

.zr-starband-eyebrow {
	margin: 0 0 12px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #d4af37;
}

.zr-starband-title {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 4.5vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}

.zr-starband-sub {
	margin: 0 0 28px;
	max-width: 420px;
	font-size: 1.02rem;
	color: rgba(255, 255, 255, 0.72);
}

.zr-button-light {
	background: #fff;
	color: var(--zr-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.zr-button-light:hover { color: var(--zr-primary-dark); }

/* --- The wheel --- */
/* --zr-wheel is both the wheel's size and the basis for the hub's type
   scale, so it has to equal the width actually rendered. The min() keeps
   it honest when the viewport is narrower than the nominal size --
   otherwise max-width shrinks the box while the variable stays large and
   the hub text overflows the circle. */
.zr-wheel {
	--zr-wheel-max: 360px;
	--zr-wheel: min(var(--zr-wheel-max), 100vw - 32px);
	position: relative;
	width: var(--zr-wheel);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	margin: 0 auto;
	max-width: 100%;
}

.zr-wheel-ring {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.22);
}

.zr-wheel-ring::after {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.zr-wheel-badge {
	position: absolute;
	width: 21%;
	height: 21%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.zr-wheel-badge:hover,
.zr-wheel-badge:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(212, 175, 55, 0.7);
	transform: translate(-50%, -50%) scale(1.08);
	color: #fff;
	z-index: 3;
}

.zr-wheel-glyph {
	font-size: 1.35rem;
	line-height: 1;
	color: #d4af37;
}

/* On the dark wheel every glyph rests in gold; each sign's own bright
   tint appears on hover/focus and on the in-season badge.
   Hover / keyboard focus: reveal the sign's own color */
.zr-wheel-badge:hover .zr-wheel-glyph,
.zr-wheel-badge:focus .zr-wheel-glyph {
	color: var(--sign-bright, #d4af37);
}

.zr-wheel-badge:hover,
.zr-wheel-badge:focus {
	border-color: var(--sign-bright, rgba(212, 175, 55, 0.7));
}

.zr-wheel-name {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.85);
}

/* The sign currently in season is filled with its own color. */
.zr-wheel-badge.is-current {
	background: var(--sign-bright, var(--zr-primary));
	border-color: transparent;
	z-index: 2;
}

.zr-wheel-badge.is-current .zr-wheel-glyph,
.zr-wheel-badge.is-current:hover .zr-wheel-glyph,
.zr-wheel-badge.is-current .zr-wheel-name {
	color: #16203a;
}

.zr-wheel-badge.is-current:hover { border-color: transparent; }

/* Center hub */
.zr-wheel-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* Badges orbit at radius 42% with a 21% diameter, so their inner edge
	   sits at 31.5% -- a 48% hub (24% radius) still leaves a 7.5% gap and
	   gives the four stacked lines room to breathe inside the circle. */
	width: 48%;
	height: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: transform 0.15s ease;
	/* Reserve the corners the circle cuts off, so text never touches the
	   curve. 8% is enough now that the hub holds three short lines; the
	   tighter value was there to contain a wrapping date range. */
	padding: 0 8%;
	box-sizing: border-box;
}

.zr-wheel-hub:hover { transform: translate(-50%, -50%) scale(1.04); color: #fff; }

/* Hub type scales with the wheel rather than sitting at fixed rem sizes,
   which overflowed the circle once the wheel shrank on phones. */
.zr-wheel-hub-label {
	font-size: calc(var(--zr-wheel) * 0.038);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #d4af37;
	/* Keep "In season" on one line. The trailing letter-spacing on the last
	   glyph would otherwise push it over and wrap a two-word label. */
	white-space: nowrap;
	margin-right: -0.16em;
}

.zr-wheel-hub-glyph {
	font-size: calc(var(--zr-wheel) * 0.13);
	line-height: 1.1;
	color: var(--sign-bright, #fff);
}

/* "Sagittarius" is the longest sign name and just exceeds the hub's inner
   width at 0.07; the slightly smaller size keeps every sign on one line.
   Checked against all twelve names, not just the current one. */
.zr-wheel-hub-name {
	font-size: calc(var(--zr-wheel) * 0.065);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
}

/* Tablet / mobile: stack intro above wheel, shrink wheel */
@media (max-width: 860px) {
	.zr-starband-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: 40px;
	}

	.zr-starband-intro { max-width: 480px; }

	.zr-starband-sub { margin-left: auto; margin-right: auto; }

	.zr-wheel {
		--zr-wheel-max: 340px;
		height: auto;
		aspect-ratio: 1 / 1;
		justify-self: center;
	}
}

/* Narrow phones: the band sits inside an already-padded container, so trim
   its own side padding to give the wheel room and keep it centered. */
@media (max-width: 480px) {
	.zr-starband-inner {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 400px) {
	.zr-wheel-glyph { font-size: 1.15rem; }
	.zr-wheel-name { font-size: 0.52rem; }
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.zr-button,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	background: var(--zr-gradient);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 30px;
	font-family: var(--zr-font);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.30);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zr-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(37, 99, 235, 0.38);
}

/* ==========================================================================
   7. Post cards
   ========================================================================== */

.zr-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 900px) {
	.zr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.zr-post-grid { grid-template-columns: minmax(0, 1fr); }
}

.zr-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zr-border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zr-card:hover {
	border-color: #d3dae6;
	box-shadow: 0 8px 24px rgba(23, 23, 43, 0.07);
}

.zr-card-media {
	display: block;
	aspect-ratio: 850 / 445;
	overflow: hidden;
	background: var(--zr-surface);
}

.zr-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.zr-card:hover .zr-card-media img {
	transform: scale(1.04);
}

/* Quiet fallback for the rare post with no featured image. */
.zr-card-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 18px 12px 0;
	background: var(--zr-surface);
	color: rgba(23, 23, 43, 0.07);
	font-size: 4rem;
}

.zr-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}

.zr-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--zr-muted);
	margin-bottom: 12px;
}

.zr-post-meta time { color: var(--zr-muted); }

.zr-reading-time::before {
	content: "\00B7";
	margin-right: 8px;
	color: var(--zr-border);
}

.zr-post-meta a {
	display: inline-block;
	padding: 3px 12px;
	background: var(--sign-soft, var(--zr-primary-soft));
	color: var(--sign, var(--zr-primary));
	border-radius: 999px;
	font-weight: 700;
}

.zr-post-meta a:hover {
	background: var(--sign, var(--zr-primary));
	color: #fff;
}

/* On feed cards, category/sign are plain text links, not pills,
   so the feed isn't wall-to-wall pills. */
.zr-card .zr-post-meta a {
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--sign, var(--zr-primary));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.zr-card .zr-post-meta a:hover {
	background: none;
	color: var(--sign, var(--zr-primary-dark));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Section-label "kicker" above card/lead titles — reads like a real byline.
   Sign-named kickers pick up the sign's color via --sign. */
.zr-kicker {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sign, var(--zr-primary));
	text-decoration: none;
}

.zr-kicker::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	margin-right: 8px;
	vertical-align: middle;
	background: var(--sign, var(--zr-primary));
}

.zr-kicker:hover {
	color: var(--sign, var(--zr-primary-dark));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zr-card .zr-post-title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.zr-card .zr-post-meta {
	margin-bottom: 12px;
	font-size: 0.76rem;
}

.zr-post-title a { color: var(--zr-ink); }
.zr-post-title a:hover { color: var(--sign, var(--zr-primary)); }

.zr-card .zr-excerpt {
	font-size: 0.92rem;
	color: var(--zr-muted);
	margin: 0 0 16px;
}

.zr-card .zr-excerpt p { margin: 0; }

.zr-read-more {
	margin-top: auto;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--zr-primary);
}

.zr-read-more:hover { color: #1d4ed8; }

/* ==========================================================================
   8. Single post / page
   ========================================================================== */

.zr-single .zr-post-title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	margin: 0 0 16px;
}

.zr-single .zr-post-thumb {
	display: block;
	margin: 8px 0 28px;
	border-radius: var(--zr-radius);
	overflow: hidden;
}

.zr-single .zr-post-title {
	margin-bottom: 8px;
}

.zr-single .zr-post-meta {
	margin-bottom: 24px;
}

.zr-single .zr-post-thumb img { display: block; width: 100%; }

.zr-entry-content {
	font-size: 1.05rem;
	line-height: 1.8;
}

/* The first block in a post shouldn't push itself down */
.zr-entry-content > *:first-child {
	margin-top: 0;
}

/* Multi-page post navigation (<!--nextpage-->) */
.zr-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 8px;
	padding-top: 24px;
	border-top: 1px solid var(--zr-border);
	font-family: var(--zr-font);
	font-size: 0.9rem;
}

.zr-page-links-label {
	font-weight: 700;
	color: var(--zr-muted);
	margin-right: 6px;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.zr-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var(--zr-surface);
	border-radius: 999px;
	font-weight: 700;
	color: var(--zr-ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.zr-page-links a.post-page-numbers:hover {
	background: var(--zr-primary-soft);
	color: var(--zr-primary);
}

.zr-page-links .post-page-numbers.current {
	background: var(--zr-gradient);
	color: #fff;
}

.zr-entry-footer {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--zr-border);
}

/* Hide the tag footer border when page links already drew one */
.zr-page-links + .zr-entry-footer,
.zr-entry-footer:empty {
	border-top: 0;
	padding-top: 0;
	margin-top: 24px;
}

.zr-tag-links a {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 16px;
	background: var(--zr-surface);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--zr-muted);
}

.zr-tag-links a:hover {
	background: var(--zr-primary-soft);
	color: var(--zr-primary);
}

/* Related posts */
.zr-related {
	padding: 0 0 96px;
}

.zr-related-title {
	margin: 0 0 24px;
	font-size: 1.5rem;
}

.zr-related .zr-post-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.zr-related .zr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.zr-related .zr-post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Single posts reduce bottom padding so related posts sit closer */
.zr-site-main.zr-no-sidebar {
	padding-bottom: 64px;
}

/* Prev/next navigation */
.zr-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	font-size: 0.92rem;
	font-weight: 600;
}

.zr-post-nav a {
	display: inline-block;
	padding: 12px 20px;
	background: var(--zr-surface);
	border-radius: 999px;
	color: var(--zr-ink);
}

.zr-post-nav a:hover {
	background: var(--zr-primary-soft);
	color: var(--zr-primary);
}

/* ==========================================================================
   9. Archive headers
   ========================================================================== */

.zr-archive-header {
	margin-bottom: 40px;
}

.zr-archive-header h1 {
	margin: 0 0 8px;
	font-size: 2.1rem;
}

.zr-archive-header > p {
	margin: 0;
	color: var(--zr-muted);
}

/* Zodiac sign archive header */
.zr-sign-header {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	background: var(--sign-soft, var(--zr-surface));
	border: 1px solid var(--zr-border);
	border-radius: var(--zr-radius);
}

.zr-sign-header .zr-sign-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--sign, var(--zr-primary));
	border-radius: 20px;
	color: #fff;
	font-size: 2.1rem;
	flex-shrink: 0;
}

.zr-sign-header h1 { margin: 0; font-size: 1.9rem; }

.zr-sign-header .zr-sign-dates {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--sign, var(--zr-primary));
	margin: 0 0 2px;
}

/* Pagination */
.zr-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	font-size: 0.9rem;
}

.zr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	background: var(--zr-surface);
	border-radius: 999px;
	font-weight: 700;
	color: var(--zr-ink);
}

.zr-pagination .page-numbers.current,
.zr-pagination .page-numbers:hover {
	/* On sign archives <body> carries the sign class, so pagination
	   takes the sign color; everywhere else it falls back to blue. */
	background: var(--sign, var(--zr-gradient));
	color: #fff;
}

/* ==========================================================================
   10. Widgets (footer columns)
   ========================================================================== */

.zr-widget {
	margin-bottom: 28px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--zr-border);
	border-radius: var(--zr-radius);
	box-shadow: var(--zr-shadow);
}

.zr-widget .widget-title,
.zr-widget h2 {
	margin: 0 0 16px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.zr-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zr-widget ul li {
	padding: 9px 0;
	border-bottom: 1px solid var(--zr-border);
}

.zr-widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.zr-widget ul li:first-child { padding-top: 0; }

.zr-widget a { color: var(--zr-ink); font-weight: 600; }
.zr-widget a:hover { color: var(--zr-primary); }

/* Current sign widget — gradient card */
.zr-widget.zr-widget-sign {
	background: var(--zr-gradient);
	border: 0;
	color: #fff;
}

.zr-sign-of-day { text-align: center; }

.zr-sign-of-day .widget-title {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.zr-sign-of-day .zr-sign-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	color: #fff;
	font-size: 1.9rem;
	margin-bottom: 14px;
}

.zr-sign-of-day .zr-sign-name {
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 2px;
}

.zr-sign-of-day .zr-sign-dates {
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 10px;
}

.zr-sign-of-day .zr-sign-blurb {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 18px;
}

.zr-sign-of-day .zr-sign-link {
	display: inline-block;
	padding: 9px 22px;
	background: #fff;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--zr-primary);
}

.zr-sign-of-day .zr-sign-link:hover {
	color: #1d4ed8;
	transform: translateY(-1px);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.zr-footer {
	background: var(--zr-primary-dark);
	color: #9db1cf;
	font-size: 0.92rem;
	margin-top: 0;
}

/* Built-in zodiac sign links: three columns of four */
.zr-footer-signs {
	padding: 48px 0 40px;
}

.zr-footer-signs-title {
	margin: 0 0 18px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.zr-footer-signs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 4px 24px;
}

.zr-footer-signs a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: #c6d4ea;
	text-decoration: none;
}

.zr-footer-signs .zr-glyph {
	width: 20px;
	text-align: center;
	font-size: 1rem;
	color: var(--sign-bright, #d4af37);
	flex-shrink: 0;
}

.zr-footer-signs a:hover {
	color: var(--sign-bright, #fff);
}

@media (max-width: 480px) {
	.zr-footer-signs ul {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, auto);
	}
}

.zr-footer-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding: 0 0 40px;
}

.zr-footer .zr-widget {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.zr-footer .zr-widget .widget-title,
.zr-footer .zr-widget h2 {
	color: #fff;
}

.zr-footer a { color: #c6d4ea; }
.zr-footer a:hover { color: #fff; }

.zr-footer .zr-widget a { color: #c6d4ea; }
.zr-footer .zr-widget a:hover { color: #fff; }

.zr-footer .zr-widget ul li { border-bottom-color: rgba(255, 255, 255, 0.08); }

.zr-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 24px 0;
	font-size: 0.82rem;
}

/* Footer no widgets: keep some top padding above the bottom bar */
.zr-footer > .zr-container > .zr-footer-bottom:first-child {
	border-top: 0;
}

.zr-footer-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.zr-footer-links a {
	color: #c6d4ea;
	font-weight: 600;
}

.zr-footer-links a:hover { color: #fff; }

/* ==========================================================================
   14. Advertisements
   ========================================================================== */

.zr-ad {
	display: block;
	margin: 40px auto;
	text-align: center;
	/* Reserve height before the unit fills so the page doesn't jump when
	   AdSense injects the iframe. A blank unit collapses to the label. */
	min-height: 100px;
	clear: both;
}

.zr-ad .adsbygoogle {
	/* Never let a unit push the layout wider than the viewport. */
	max-width: 100%;
	overflow: hidden;
}

/* Ads are not content: label them quietly so readers can tell them apart,
   as AdSense policy requires when placement is close to article text. */
.zr-ad-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zr-muted);
	opacity: 0.75;
}

/* In-content: sits between paragraphs, so it needs clear air on both sides
   to read as a break rather than as part of the article. */
.zr-ad-in-content {
	margin: 44px auto;
	padding: 4px 0;
	border-top: 1px solid var(--zr-border);
	border-bottom: 1px solid var(--zr-border);
}

.zr-ad-in-content .zr-ad-label { margin-top: 10px; }

/* Above the first paragraph: sits between the post meta and the body, so
   it keeps tighter margins than the mid-article unit — too much air here
   detaches the title from the article it belongs to. */
.zr-ad-before-content {
	margin: 28px auto 32px;
}

.zr-ad-after-content {
	margin: 48px auto 8px;
}

/* Above the post grid, below the hero wheel on the homepage. */
.zr-ad-before-grid {
	margin: 0 auto 40px;
}

/* Between the post grid and pagination: the grid already has 28px gaps,
   so a little more separation keeps the ad from reading as a card. */
.zr-ad-after-grid {
	margin: 48px auto 0;
}

/* The fixed 300x250 cannot shrink, so on phones it is centered and the
   container is allowed to scroll rather than widen the page. */
.zr-ad-box {
	max-width: 100%;
}

.zr-ad-box .adsbygoogle {
	width: 300px;
	height: 250px;
}

@media (max-width: 340px) {
	/* Narrower than the unit itself: scale the whole box down so it still
	   fits instead of spilling past the screen edge. */
	.zr-ad-box .adsbygoogle {
		transform: scale(0.9);
		transform-origin: top center;
	}
}

@media (max-width: 560px) {
	.zr-ad { margin: 32px auto; }
	.zr-ad-in-content { margin: 36px auto; }
	.zr-ad-before-content { margin: 20px auto 24px; }
	.zr-ad-before-grid { margin: 0 auto 28px; }
}

/* ==========================================================================
   15. WordPress core classes (required)
   ========================================================================== */

.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.aligncenter { display: block; margin: 1.5em auto; }
.alignwide { margin-left: -80px; margin-right: -80px; max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

@media (max-width: 960px) {
	.alignwide { margin-left: 0; margin-right: 0; }
}

.wp-caption { max-width: 100%; margin-bottom: 1.5em; }

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 0.85rem;
	color: var(--zr-muted);
	text-align: center;
	margin-top: 8px;
}

.sticky { display: block; }
.bypostauthor { display: block; }
.gallery-caption { font-size: 0.85rem; }

/* ==========================================================================
   14b. Scroll-to-top button
   ========================================================================== */

.zr-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--zr-gradient);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.zr-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.zr-to-top:hover {
	transform: translateY(-3px);
}

/* ==========================================================================
   15. 404 / no results
   ========================================================================== */

.zr-empty-state {
	text-align: center;
	padding: 72px 32px;
	background: var(--zr-surface);
	border-radius: 28px;
}

.zr-empty-state h1 { margin-top: 0; }
.zr-empty-state p { color: var(--zr-muted); }

.zr-empty-state .zr-search-form {
	max-width: 440px;
	margin: 32px auto 0;
}