/*
Theme Name:  PP Theme
Description: Perfect Publishing theme - thin presentation layer for Elementor. All functionality lives in the PP Engine plugin, and every design token is shared with it.
Version:     0.3.1
Author:      Faizan Media
Text Domain: pp-theme
Requires PHP: 7.4
*/

/*
 * FALLBACK TOKENS ONLY.
 *
 * PP Engine's pp.css is the source of truth and loads before this file, so
 * these values only apply if the plugin is deactivated. They are duplicated
 * here so the theme is not left unstyled in that case.
 *
 * They MUST match assets/css/pp.css in PP Engine exactly. check-tokens.py
 * compares the two and fails the build when they drift - which they already
 * had, --pp-navy-card was missing and the sans stack differed.
 *
 * ASCII only in this file, same rule as the plugin.
 */
:root {
	--pp-navy: #131A2B;
	--pp-navy-deep: #0D1322;
	--pp-navy-card: #1E2A45;
	--pp-gold: #B4892E;
	--pp-cream: #FBF8F1;
	--pp-cream-2: #F2ECDD;
	--pp-ink: #131A2B;
	--pp-muted: #4A5164;
	--pp-line: #E6DFCF;
	--pp-serif: "Fraunces", Georgia, serif;
	--pp-sans: "Inter", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pp-cream);
	color: var(--pp-ink);
	font-family: var(--pp-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: var(--pp-serif);
	font-weight: 500;
	color: var(--pp-ink);
	line-height: 1.2;
}

a { color: var(--pp-gold); }
img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 2px solid var(--pp-gold);
	outline-offset: 2px;
}

.pp-skip {
	position: absolute;
	left: -9999px;
}
.pp-skip:focus {
	left: 12px;
	top: 12px;
	z-index: 999;
	background: var(--pp-navy);
	color: var(--pp-cream);
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
}

/* ---- Announcement bar ---- */
.pp-announce {
	background: var(--pp-gold);
	color: var(--pp-navy);
	text-align: center;
	font-size: 13.5px;
	font-weight: 500;
	padding: 9px 16px;
}

/* ---- Header ---- */
.pp-header {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 18px 24px;
}
/* Nav sits centred between the logo and the button rather than crowding it. */
.pp-header .pp-nav { margin: 0 auto; }
.pp-brand {
	font-family: var(--pp-serif);
	font-size: 21px;
	color: var(--pp-ink);
	text-decoration: none;
	white-space: nowrap;
}
.pp-brand span { color: var(--pp-gold); }
.pp-brand img { max-height: 46px; width: auto; display: block; }

.pp-header-bar {
	background: var(--pp-cream);
	border-bottom: 1px solid var(--pp-line);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* Set by pp-theme.js once the page scrolls, so the header lifts off content. */
.pp-header-bar.is-stuck {
	box-shadow: 0 6px 22px rgba(19, 26, 43, 0.09);
	background: rgba(251, 248, 241, 0.96);
	backdrop-filter: saturate(140%) blur(8px);
}
.admin-bar .pp-header-bar { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .pp-header-bar { top: 46px; }
}

.pp-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
}
.pp-nav a {
	position: relative;
	font-size: 14.5px;
	color: var(--pp-muted);
	text-decoration: none;
	padding-bottom: 3px;
}
/* Gold underline grows from the centre. Tells the visitor where they are. */
.pp-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--pp-gold);
	transform: translateX(-50%);
	transition: width 0.2s ease;
}
.pp-nav a:hover { color: var(--pp-ink); }
.pp-nav a:hover::after,
.pp-nav .current-menu-item > a::after,
.pp-nav .current_page_parent > a::after { width: 100%; }
.pp-nav .current-menu-item > a { color: var(--pp-ink); font-weight: 500; }

.pp-header-cta {
	background: var(--pp-navy);
	color: var(--pp-cream);
	font-size: 14px;
	font-weight: 500;
	padding: 11px 22px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, background 0.15s ease;
}
.pp-header-cta:hover { background: #1F2A44; color: #FFFFFF; transform: translateY(-1px); }

.pp-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.pp-burger span {
	display: block;
	height: 2px;
	background: var(--pp-ink);
	border-radius: 2px;
}

@media (max-width: 900px) {
	.pp-burger { display: flex; }
	.pp-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--pp-cream);
		border-bottom: 1px solid var(--pp-line);
		padding: 12px 24px 18px;
		z-index: 90;
	}
	.pp-nav.is-open { display: block; }
	.pp-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.pp-nav li { width: 100%; }
	.pp-nav a { display: block; padding: 11px 0; border-bottom: 1px solid var(--pp-line); }
	.pp-header-cta { padding: 10px 16px; font-size: 13px; }
}

/* ---- Footer ---- */
.pp-footer {
	background: var(--pp-navy-deep);
	color: #8891A6;
	font-size: 14px;
	margin-top: 0;
}
.pp-footer-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 32px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 24px 34px;
}
.pp-footer-brand {
	font-family: var(--pp-serif);
	font-size: 21px;
	color: var(--pp-cream);
	text-decoration: none;
}
.pp-footer-brand span { color: var(--pp-gold); }
.pp-footer-tag {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	max-width: 280px;
}
.pp-footer h3 {
	font-family: var(--pp-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pp-cream);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--pp-gold);
	display: inline-block;
}
.pp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-footer li { margin-bottom: 8px; }
.pp-footer a { color: #8891A6; text-decoration: none; }
.pp-footer a:hover { color: var(--pp-cream); }

.pp-footer-bottom {
	border-top: 1px solid #1C2438;
	font-size: 12.5px;
}
.pp-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1140px;
	margin: 0 auto;
	padding: 18px 24px;
}

@media (max-width: 760px) {
	.pp-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.pp-footer-bottom-inner { justify-content: flex-start; }
}

/* ---- Footer polish ---- */
/*
 * The footer closes every page, so it carries the same rhythm as the new
 * homepage: gold rule under each heading, generous spacing, a top hairline
 * in gold rather than a hard edge.
 */
.pp-footer { border-top: 3px solid var(--pp-gold); }
.pp-footer-inner { padding: 56px 24px 40px; }
.pp-footer-brand { font-size: 23px; }
.pp-footer-tag { max-width: 300px; font-size: 14px; }
.pp-footer li { margin-bottom: 10px; }
.pp-footer a { transition: color 0.15s ease, padding-left 0.15s ease; }
.pp-footer a:hover { padding-left: 3px; }

/* ---- Typography inside Elementor content ---- */
/*
 * Elementor pages can hold plain headings and text alongside the PP widgets.
 * Without this they fall back to browser defaults and look nothing like the
 * rest of the site.
 */
.pp-app-page .elementor h1,
.elementor h1, .elementor h2, .elementor h3, .elementor h4 {
	font-family: var(--pp-serif);
	font-weight: 500;
	color: var(--pp-ink);
}
.elementor p { font-family: var(--pp-sans); }

/*
 * Link colour is scoped to TEXT CONTENT only, never ".elementor a".
 *
 * A blanket ".elementor a" is 0,1,1 and beat ".pp-btn-gold" at 0,1,0, which
 * painted gold text onto gold buttons and made them look empty. Anything
 * that styles links inside Elementor must stay narrower than the button
 * classes, or use :where() to keep specificity at zero.
 */
.elementor-widget-text-editor a,
.elementor-widget-heading a { color: var(--pp-gold); }

/* Elementor's own button, so a stray core button still looks like ours. */
.elementor-button {
	font-family: var(--pp-sans);
	font-weight: 500;
	border-radius: 8px;
}

/* ---- Full-width and canvas templates ---- */
/*
 * elementor_header_footer keeps this theme's header and footer. Canvas drops
 * them, which is correct for the manager and the author dashboard only. If a
 * public page ever loses its chrome, the page template is the thing to check.
 */
.elementor-template-full-width .pp-header-bar,
.elementor-template-full-width .pp-footer { display: block; }

/* ---- Selection and scrollbar ---- */
::selection { background: var(--pp-gold); color: var(--pp-navy); }

@media (prefers-reduced-motion: reduce) {
	.pp-header-bar,
	.pp-header-cta,
	.pp-nav a::after,
	.pp-footer a { transition: none; }
	.pp-header-cta:hover { transform: none; }
}