/*
Theme Name: Jade Astrology
Theme URI: https://jadeastrology.com/
Author: Bluesio LLC
Description: Fast, mobile-first theme for Jade Astrology. Built to carry the Jade Horoscopes plugin's Rare Chart funnel and landing pages. No external fonts or scripts.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: jade-astrology
*/

:root {
	--ink: #14231F;
	--deep: #0E3B31;
	--jade: #1F6F5A;
	--soft: #E6F0EC;
	--gold: #B8902F;
	--cream: #FBF8F1;
	--line: #DCE5E1;
	--muted: #5B6B66;
	--night: #0B1F2A;
	--max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.2; color: var(--ink); }
a { color: var(--jade); }
a:hover { color: var(--deep); }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: #fff; padding: .6rem 1rem; border-radius: 8px; }

/* Header */
.site-header { background: var(--night); color: #EDEBE4; position: sticky; top: 0; z-index: 50; }
.site-header__in { max-width: var(--max); margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.site-brand:hover { color: #fff; }
.site-brand__mark { width: 30px; height: 30px; flex: none; }
.site-brand img { max-height: 40px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.site-nav a { color: #DCE3DF; text-decoration: none; font-size: .95rem; font-weight: 600; }
.site-nav a:hover, .site-nav .current-menu-item a { color: #F1D58A; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; padding: .4rem .7rem; font: inherit; font-size: .9rem; cursor: pointer; }
@media (max-width: 760px) {
	.nav-toggle { display: block; }
	.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--night); border-top: 1px solid rgba(255,255,255,.1); }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; padding: .4rem 16px 1rem; }
	.site-nav a { display: block; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
}

/* Content */
.site-main { max-width: var(--max); margin: 0 auto; padding: 1rem 16px 2rem; }
.entry { max-width: 760px; margin: 0 auto; }
.entry-title { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 1.2rem 0 1rem; }
.entry-content > * { max-width: 100%; }
.entry-content h2 { font-size: 1.4rem; margin: 2rem 0 .7rem; }
.entry-content ul { padding-left: 1.2rem; }
.jade-wrap { padding: 0; }
.site-main .jade-wrap { max-width: 760px; }

/* Posts list */
.post-list { max-width: 760px; margin: 0 auto; display: grid; gap: 1rem; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.post-card h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.pagination { max-width: 760px; margin: 1.5rem auto; display: flex; gap: .6rem; }

/* 404 */
.not-found { max-width: 640px; margin: 3rem auto; text-align: center; }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 2rem; }
.site-footer .jade-footer { border-top: 0; margin-top: 0; }
.site-footer__links { max-width: var(--max); margin: 0 auto; padding: 1.5rem 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; font-size: .9rem; }
.site-footer__links h2 { font-size: .8rem; font-family: inherit; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .5rem; }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.site-footer__links a { color: var(--deep); text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__plain { text-align: center; padding: 1.5rem 16px; font-size: .85rem; color: var(--muted); }