/* ==========================================================================
   Passport Pro — theme overrides
   Handles things the compiled Tailwind bundle does not cover:
   header nav colours + dropdowns, mobile menu, TOC, and prose/article styling
   for real WordPress post content (Tailwind Typography "prose" is NOT bundled).
   ========================================================================== */

:root {
	--pp-navy: #1a2744;
	--pp-fg-700: oklch(.28 .02 260);
	--pp-fg-950: oklch(.12 .02 260);
}

body { font-family: "Public Sans", system-ui, sans-serif; }

/* Safety gap between hero meta items (category pill / date / read time) in
   case the gap-x-4 utility isn't in the compiled Tailwind bundle. */
.pp-post-meta span + span { margin-left: 1rem; }

/* Keep the fixed header from being hidden under admin bar */
body.admin-bar .pp-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .pp-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   HEADER / NAV
   -------------------------------------------------------------------------- */
.pp-header--solid {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid oklch(.93 .015 94 / .6);
}

.pp-header--transparent { background: transparent; }
.pp-header--transparent.pp-scrolled {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid oklch(.93 .015 94 / .6);
}
.pp-header--transparent.pp-scrolled .pp-header__scrim { opacity: 0; }
/* Un-invert the (white) logo once the header turns solid on scroll */
.pp-header--transparent.pp-scrolled .pp-logo { filter: none !important; }

/* Nav list layout */
.pp-nav-list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-nav-item { position: relative; }

.pp-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .2s, background-color .2s;
	cursor: pointer;
}

/* Link colours per header variant */
.pp-header--solid .pp-nav-link { color: oklch(.28 .02 260); }
.pp-header--solid .pp-nav-link:hover { color: oklch(.12 .02 260); }
.pp-header--transparent .pp-nav-link { color: rgba(255, 255, 255, .9); }
.pp-header--transparent .pp-nav-link:hover { color: #fff; }
.pp-header--transparent.pp-scrolled .pp-nav-link { color: oklch(.28 .02 260); }
.pp-header--transparent.pp-scrolled .pp-nav-link:hover { color: oklch(.12 .02 260); }

/* Gold CTA pill (Free Guides) */
.pp-nav-cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: oklch(.52 .14 45);
	transition: background-color .2s;
	cursor: pointer;
}
.pp-nav-cta:hover { background: oklch(.44 .12 43); color: #fff; }

.pp-caret { font-size: 14px; transition: transform .2s; }

/* Desktop dropdowns */
.pp-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 232px;
	margin-top: 6px;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid oklch(.93 .015 94 / .8);
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(20, 28, 18, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 60;
}
.pp-nav-item.pp-has-children:hover > .pp-dropdown,
.pp-nav-item.pp-has-children:focus-within > .pp-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pp-nav-item.pp-has-children:hover > .pp-nav-link .pp-caret { transform: rotate(180deg); }

.pp-dropdown-item { list-style: none; }
.pp-dropdown-link {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: oklch(.28 .02 260);
	transition: background-color .15s, color .15s;
}
.pp-dropdown-link:hover {
	background: oklch(.97 .008 95);
	color: oklch(.44 .12 43);
}

/* --------------------------------------------------------------------------
   MOBILE MENU
   -------------------------------------------------------------------------- */
.pp-menu-toggle { color: #fff; }
.pp-header--solid .pp-menu-toggle,
.pp-header--transparent.pp-scrolled .pp-menu-toggle { color: oklch(.28 .02 260); }
.pp-menu-toggle:hover { background: rgba(255, 255, 255, .12); }
.pp-header--solid .pp-menu-toggle:hover,
.pp-header--transparent.pp-scrolled .pp-menu-toggle:hover { background: oklch(.97 .008 95); }

.pp-mobile-menu {
	background: #ffffff;
	background-color: #ffffff !important;
	opacity: 1;
	border-top: 1px solid oklch(.93 .015 94 / .8);
	border-bottom: 1px solid oklch(.93 .015 94 / .8);
	padding: 10px 16px 16px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}
.pp-mobile-list { list-style: none; margin: 0; padding: 0; }
.pp-mobile-list .pp-nav-item { display: block; }
.pp-mobile-list .pp-nav-link,
.pp-mobile-list .pp-nav-cta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: oklch(.28 .02 260);
	padding: 12px 8px;
	border-radius: 8px;
	font-size: 16px;
}
.pp-mobile-list .pp-nav-cta {
	justify-content: center;
	color: #fff;
	background: oklch(.52 .14 45);
	margin: 6px 0;
}
.pp-mobile-list .pp-dropdown {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: none;
	min-width: 0;
	padding: 0 0 6px 14px;
	margin: 0;
	display: none;
}
.pp-mobile-list .pp-nav-item.pp-open > .pp-dropdown { display: block; }
.pp-mobile-list .pp-dropdown-link { padding: 10px 8px; }

/* --------------------------------------------------------------------------
   TABLE OF CONTENTS (injected on single posts)
   -------------------------------------------------------------------------- */
.pp-toc {
	background: oklch(.97 .008 95);
	border: 1px solid oklch(.93 .015 94 / .8);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 34px;
}
.pp-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: 18px;
	color: oklch(.12 .02 260);
	cursor: pointer;
	list-style: none;
}
.pp-toc__summary::-webkit-details-marker { display: none; }
.pp-toc__chev { transition: transform .2s; }
.pp-toc[open] .pp-toc__chev { transform: rotate(180deg); }
.pp-toc__nav { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pp-toc__nav a {
	font-size: 14px;
	color: oklch(.35 .02 260);
	text-decoration: none;
	transition: color .15s;
}
.pp-toc__nav a:hover { color: oklch(.44 .12 43); }

/* Sticky sidebar TOC (desktop) — active-section highlight */
.pp-toc-nav .pp-toc-link {
	border-left: 2px solid transparent;
	padding-left: 10px;
	margin-left: -12px;
	line-height: 1.4;
}
.pp-toc-nav .pp-toc-link.pp-active {
	color: #2563eb;
	font-weight: 600;
	border-left-color: #2563eb;
}

/* --------------------------------------------------------------------------
   WPForms — match the Readdy contact input styling (used if a form id is set)
   -------------------------------------------------------------------------- */
.pp-contact-form .wpforms-field-label {
	font-size: 14px;
	font-weight: 500;
	color: oklch(.35 .02 260);
	margin-bottom: 6px;
}
.pp-contact-form .wpforms-field input[type="text"],
.pp-contact-form .wpforms-field input[type="email"],
.pp-contact-form .wpforms-field input[type="tel"],
.pp-contact-form .wpforms-field select,
.pp-contact-form .wpforms-field textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid oklch(.90 .015 94);
	background: #fff;
	font-size: 14px;
	color: oklch(.20 .02 260);
}
.pp-contact-form .wpforms-field input:focus,
.pp-contact-form .wpforms-field select:focus,
.pp-contact-form .wpforms-field textarea:focus {
	outline: none;
	border-color: transparent;
	box-shadow: 0 0 0 2px oklch(.70 .10 250);
}
.pp-contact-form .wpforms-submit {
	background: oklch(.52 .14 250);
	color: #fff;
	border: none;
	padding: 14px 32px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background .15s;
}
.pp-contact-form .wpforms-submit:hover { background: oklch(.46 .14 250); }

/* --------------------------------------------------------------------------
   PROSE / ARTICLE BODY (real WP content)
   Mirrors the prototype's inline post typography for plain <h2>/<p>/<ul> etc.
   -------------------------------------------------------------------------- */
.pp-prose {
	font-size: 18px;
	line-height: 1.75;
	color: oklch(.28 .02 260);
}
.pp-prose > * + * { margin-top: 1.15em; }

.pp-prose h2 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 700;
	font-size: 1.85rem;
	line-height: 1.25;
	color: oklch(.12 .02 260);
	margin-top: 2em;
	margin-bottom: .6em;
	scroll-margin-top: 100px;
}
.pp-prose h3 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: 1.4rem;
	color: oklch(.12 .02 260);
	margin-top: 1.6em;
	margin-bottom: .5em;
}
.pp-prose h4 {
	font-weight: 700;
	font-size: 1.15rem;
	color: oklch(.18 .02 260);
	margin-top: 1.4em;
	margin-bottom: .4em;
}
.pp-prose p { margin: 1.15em 0; }
.pp-prose a {
	color: oklch(.44 .12 43);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pp-prose a:hover { color: oklch(.36 .1 40); }
.pp-prose strong { color: oklch(.12 .02 260); font-weight: 700; }
.pp-prose ul,
.pp-prose ol { margin: 1.15em 0; padding-left: 1.5em; }
.pp-prose ul { list-style: disc; }
.pp-prose ol { list-style: decimal; }
.pp-prose li { margin: .5em 0; }
.pp-prose li > ul,
.pp-prose li > ol { margin: .4em 0; }
.pp-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 1.6em 0;
}
.pp-prose figure { margin: 1.6em 0; }
.pp-prose figcaption {
	font-size: 14px;
	color: oklch(.45 .02 260);
	text-align: center;
	margin-top: .5em;
}
.pp-prose blockquote {
	border-left: 4px solid oklch(.52 .14 45);
	background: oklch(.97 .008 95);
	margin: 1.6em 0;
	padding: 12px 20px;
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: oklch(.28 .02 260);
}
.pp-prose blockquote p { margin: .4em 0; }
.pp-prose code {
	background: oklch(.93 .015 94);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: .9em;
}
.pp-prose pre {
	background: var(--pp-navy);
	color: #f7f9fc;
	padding: 18px 20px;
	border-radius: 12px;
	overflow-x: auto;
	margin: 1.6em 0;
}
.pp-prose pre code { background: none; padding: 0; }
.pp-prose hr {
	border: 0;
	border-top: 1px solid oklch(.93 .015 94);
	margin: 2.2em 0;
}
.pp-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 16px;
	display: block;
	overflow-x: auto;
}
.pp-prose th,
.pp-prose td {
	border: 1px solid oklch(.93 .015 94);
	padding: 10px 14px;
	text-align: left;
}
.pp-prose th { background: oklch(.97 .008 95); font-weight: 700; }

/* Blue callout box that appears in existing post content */
.pp-prose .related-posts-internal,
.pp-prose .wp-block-group.is-style-callout,
.pp-prose .callout {
	background: #eaf1fb;
	border-left: 4px solid #2980b9;
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
	margin: 1.6em 0;
}

/* Keep any legacy Additional CSS body rules from shrinking our headings:
   we out-specify with .pp-prose above. Buttons injected in content stay usable. */
.pp-prose .wp-block-button__link {
	display: inline-block;
	background: oklch(.52 .14 45);
	color: #fff;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

/* WP alignment helpers inside prose */
.pp-prose .alignright { float: right; margin: 0 0 1em 1.5em; max-width: 50%; }
.pp-prose .alignleft { float: left; margin: 0 1.5em 1em 0; max-width: 50%; }
.pp-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.pp-prose .wp-caption { max-width: 100%; }

.pp-page-links { margin-top: 2em; font-weight: 600; }
.pp-page-links a { color: oklch(.44 .12 43); padding: 0 6px; }

/* Pacifico accent utility if needed */
.pp-accent-font { font-family: "Pacifico", cursive; }