/*
Theme Name: CheeseWonders PP
Theme URI: https://cheesewonders.com/
Description: Child theme of Kadence. Replaces the header and footer with the ProteinPrepper layout (inline SVG menu icons, solid dark-green hover blocks, icon-led footer). Page content, Kadence body styles and all plugins are untouched.
Author: CheeseWonders
Template: kadence
Version: 1.5.2
Text Domain: cheesewonders-pp
*/

/* =========================================================================
   CheeseWonders PP — ProteinPrepper-style header & footer
   Palette: --pp-accent #2D5016 · --pp-text #141413 · --pp-brown #8B4513
   ========================================================================= */

.pp-theme {
	--pp-accent: #2D5016;
	--pp-accent-soft: #5a7647;
	--pp-text: #141413;
	--pp-muted: #575760;
	--pp-brown: #8B4513;
	--pp-cream: #F5F5DC;
	--pp-white: #ffffff;
	--pp-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--pp-font-head: 'Roboto Slab', Georgia, serif;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.pp-header {
	background-color: var(--pp-white);
	color: var(--pp-text);
	position: relative;
	z-index: 100;
	border-bottom: 1px solid rgba(20, 20, 19, 0.08);
}

.pp-inside-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
}

/* Logo / site title */
.pp-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.pp-branding img,
.pp-branding .custom-logo-link img {
	max-height: 60px;
	width: auto;
	display: block;
}

.pp-site-title {
	font-family: var(--pp-font-head);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	color: var(--pp-text);
	text-decoration: none;
	white-space: nowrap;
}

.pp-site-title:hover,
.pp-site-title:focus {
	color: var(--pp-accent);
}

/* Navigation */
.pp-navigation {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.pp-main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-main-nav li {
	position: relative;
	margin: 0;
}

.pp-main-nav li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	line-height: 60px;
	font-family: var(--pp-font-body);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
	color: var(--pp-text);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.pp-main-nav li a .pp-icon {
	flex-shrink: 0;
	position: relative;
	top: 0.125em;
}

.pp-main-nav li a:hover,
.pp-main-nav li a:focus,
.pp-main-nav li.current-menu-item > a,
.pp-main-nav li.current-menu-ancestor > a,
.pp-main-nav li.current_page_item > a,
.pp-main-nav li.current_page_parent > a {
	background-color: var(--pp-accent);
	color: var(--pp-white);
}

/* Dropdowns (depth 2) */
.pp-main-nav ul ul {
	position: absolute;
	left: -99999px;
	top: 100%;
	z-index: 99999;
	min-width: 220px;
	background: var(--pp-accent);
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	height: 0;
	overflow: hidden;
	transition: opacity 80ms linear, left 0s linear 0.15s;
}

.pp-navigation:not(.toggled) li:hover > ul,
.pp-navigation:not(.toggled) li:focus-within > ul {
	opacity: 1;
	pointer-events: auto;
	height: auto;
	left: 0;
	transition-delay: 0.15s;
}

.pp-main-nav ul ul li a {
	line-height: normal;
	padding: 10px 20px;
	font-size: 14px;
	color: var(--pp-white);
}

.pp-main-nav ul ul li a:hover,
.pp-main-nav ul ul li a:focus {
	background-color: var(--pp-accent-soft);
	color: var(--pp-white);
}

/* Mobile toggle button */
.pp-menu-toggle {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--pp-font-body);
	font-size: 15px;
	line-height: 60px;
	color: var(--pp-text);
}

.pp-menu-toggle:hover,
.pp-menu-toggle:focus {
	background-color: rgba(0, 0, 0, 0.04);
	color: var(--pp-text);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.pp-footer {
	background-color: var(--pp-white);
	color: var(--pp-text);
	padding: 40px 20px;
	text-align: center;
}

.pp-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* Row 1 — icon links */
.pp-footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-footer-menu li {
	margin: 0;
}

.pp-footer-menu a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pp-font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--pp-accent);
	transition: color 0.15s ease-in-out;
}

.pp-footer-menu a .pp-icon {
	position: relative;
	top: 0.125em;
}

.pp-footer-menu a:hover,
.pp-footer-menu a:focus {
	color: var(--pp-brown);
}

/* Row 2 — social buttons */
.pp-footer-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
}

.pp-social-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--pp-brown);
	color: var(--pp-white);
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.pp-social-button:hover,
.pp-social-button:focus {
	background-color: var(--pp-accent);
	color: var(--pp-white);
	transform: translateY(-2px);
}

/* Row 3 — copyright */
.pp-footer-copy {
	font-family: var(--pp-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pp-muted);
}

.pp-footer-copy a {
	color: var(--pp-accent);
}

/* -------------------------------------------------------------------------
 * Typography parity — Roboto Slab headings, Open Sans body
 * ---------------------------------------------------------------------- */

.pp-theme h1 {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.pp-theme h2,
.pp-theme .wp-block-heading.level-2,
.pp-theme .entry-title {
	font-family: var(--pp-font-head);
	font-weight: 600;
	text-transform: uppercase;
}

.pp-theme h3,
.pp-theme h4,
.pp-theme h5,
.pp-theme h6,
.pp-theme .wp-block-heading.level-3 {
	font-family: var(--pp-font-body);
	font-weight: 600;
}

.pp-theme .widget-title {
	font-family: var(--pp-font-head);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 17px;
}

/* -------------------------------------------------------------------------
 * Screen-reader helper (Kadence ships one; ours matches ProteinPrepper)
 * ---------------------------------------------------------------------- */

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

.pp-theme .screen-reader-text:focus {
	position: fixed !important;
	top: 5px;
	left: 5px;
	z-index: 100000;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	background-color: #f1f1f1;
	border-radius: 3px;
	color: #21759b;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: normal;
	display: block;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------
 * Responsive — collapse to a hamburger below 768px, like ProteinPrepper
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.pp-inside-header {
		padding: 10px 20px;
	}

	.pp-site-title {
		font-size: 22px;
	}

	.pp-menu-toggle {
		display: inline-flex;
	}

	.pp-navigation.toggled .pp-menu-toggle {
		background-color: rgba(0, 0, 0, 0.04);
	}

	.pp-navigation .pp-main-nav {
		flex-basis: 100%;
	}

	.pp-main-nav > ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.pp-navigation.toggled .pp-main-nav > ul {
		display: flex;
	}

	.pp-main-nav li a {
		padding: 12px 20px;
		line-height: 1.5;
	}

	.pp-main-nav ul ul {
		position: static;
		height: auto;
		opacity: 1;
		pointer-events: auto;
		display: none;
		box-shadow: none;
		background-color: var(--pp-accent-soft);
	}

	.pp-navigation.toggled .pp-main-nav li:hover > ul,
	.pp-navigation.toggled .pp-main-nav li:focus-within > ul {
		display: block;
	}

	.pp-footer-menu {
		gap: 10px 18px;
	}

	.pp-footer-menu a {
		font-size: 14px;
	}
}