/*
Theme Name:   Patient Gardener
Theme URI:    https://woodberrymedia.com/
Description:  A custom GeneratePress child theme for Patient Gardener USA. Brand-matched to patientgardener.co.uk (teal / slate / mint, Caprasimo + Lato). Built by Woodberry Media.
Author:       Daniel / Woodberry Media
Author URI:   https://woodberrymedia.com/
Template:     generatepress
Version:      1.15.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  patient-gardener
Tags:         custom-colors, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* =========================================================================
   1. DESIGN TOKENS  (brand-matched to patientgardener.co.uk)
   Change these first — everything below inherits them.
   ========================================================================= */
:root {
	/* Brand palette */
	--pg-teal:       #028090;   /* PRIMARY — links, buttons, accents */
	--pg-teal-dark:  #016470;   /* hover / pressed */
	--pg-teal-deep:  #013b43;   /* deepest — footer */
	--pg-slate:      #2d3142;   /* headings, nav text, dark UI */
	--pg-mint:       #a6ecca;   /* soft highlight / alt sections */
	--pg-mint-soft:  #e6f8f0;   /* very light mint tint for section bands */
	--pg-cream:      #fdf7e8;   /* warm badge cream — occasional accent */

	--pg-ink:        #1a1a1a;   /* body text */
	--pg-muted:      #6b7280;   /* secondary text, meta */
	--pg-line:       #e6e8ec;   /* borders / hairlines */
	--pg-white:      #ffffff;

	/* Semantic aliases */
	--pg-bg:         var(--pg-white);
	--pg-text:       var(--pg-ink);
	--pg-heading:    var(--pg-slate);
	--pg-link:       var(--pg-teal);
	--pg-link-hover: var(--pg-teal-dark);
	--pg-accent:     var(--pg-teal);

	/* Typography — matches the UK site */
	--pg-font-body:    'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pg-font-heading: 'Caprasimo', Georgia, 'Times New Roman', serif;

	/* Rhythm */
	--pg-radius: 8px;
	--pg-shadow: 0 6px 24px rgba(45, 49, 66, 0.08);
	--pg-content-max: 1100px;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
body {
	background-color: var(--pg-bg);
	color: var(--pg-text);
	font-family: var(--pg-font-body) !important; /* beats GeneratePress inline !important */
	font-size: 19px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.main-title,
.site-title {
	font-family: var(--pg-font-heading) !important; /* beats GeneratePress inline !important */
	color: var(--pg-heading);
	font-weight: 400;          /* Caprasimo is already heavy */
	line-height: 1.15;
	letter-spacing: 0;
}
h1, .entry-title { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.45rem; }

a {
	color: var(--pg-link);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover,
a:focus {
	color: var(--pg-link-hover);
	text-decoration: underline;
}

/* =========================================================================
   3. LAYOUT
   ========================================================================= */
.site-content {
	padding-top: 1em;    /* trimmed — the nav bar already sits close above */
	padding-bottom: 2.5em;
}
/* Pull the content up under the nav (removes GeneratePress's extra top gap) */
.separate-containers .site-main,
.one-container .site-main { margin-top: 0 !important; }
.inside-article,
.entry-content {
	max-width: var(--pg-content-max);
}

/* Card treatment for archive / blog entries */
.blog .inside-article,
.archive .inside-article,
.search .inside-article,
.generate-columns .inside-article {
	background: var(--pg-white);
	border: 1px solid var(--pg-line);
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(45, 49, 66, 0.07);
	padding: 0;               /* flush image; inner padding added in section 15 */
	overflow: hidden;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* =========================================================================
   4. HEADER  (bright / white, logo-forward — like the UK site)
   ========================================================================= */
.site-header {
	background-color: var(--pg-white);
	border-bottom: 1px solid var(--pg-line);
}
.main-title a,
.site-description {
	color: var(--pg-heading);
}

/* =========================================================================
   5. PRIMARY NAVIGATION  (bold UPPERCASE, teal hover — UK style)
   ========================================================================= */
.main-navigation {
	background-color: var(--pg-white);
	border-bottom: 1px solid var(--pg-line);
}
.main-navigation .main-nav ul li a {
	color: var(--pg-slate);
	font-family: var(--pg-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
	color: var(--pg-teal);
	background-color: transparent;
}
/* Sub-menus get a solid card look */
.main-navigation ul ul {
	background-color: var(--pg-white);
	border: 1px solid var(--pg-line);
	box-shadow: var(--pg-shadow);
}
.main-navigation ul ul li a {
	color: var(--pg-slate);
}
.main-navigation ul ul li a:hover {
	color: var(--pg-teal);
	background-color: var(--pg-mint-soft);
}

/* =========================================================================
   6. BUTTONS
   ========================================================================= */
button,
.button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--pg-teal);
	color: var(--pg-white);
	border: none;
	border-radius: var(--pg-radius);
	padding: 0.7em 1.6em;
	font-family: var(--pg-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--pg-teal-dark);
	color: var(--pg-white);
	transform: translateY(-1px);
}

/* =========================================================================
   7. FOOTER
   ========================================================================= */
.site-footer,
.footer-widgets,
.site-info {
	background-color: var(--pg-teal-deep);
	color: #cfe9ec;
}
.site-footer a,
.footer-widgets a {
	color: var(--pg-mint);
}
.site-footer a:hover {
	color: var(--pg-white);
}
.footer-widgets .widget-title {
	color: var(--pg-white);
}

/* =========================================================================
   8. ACCENTS  (small brand touches)
   ========================================================================= */
/* Entry meta (date / author / categories) */
.entry-meta,
.posted-on,
.byline,
.cat-links {
	color: var(--pg-muted);
	font-size: 0.9rem;
}
/* Category / tag pills */
.entry-terms a,
.cat-links a {
	color: var(--pg-teal);
	font-weight: 700;
}
/* Sidebar widget titles */
.widget-title,
.sidebar .widget-title {
	font-family: var(--pg-font-heading);
	color: var(--pg-slate);
}

/* =========================================================================
   9. AUTHOR BAR  (single posts — "Written by" with expandable bio)
   ========================================================================= */
/* Hide GeneratePress's default date/author line — the author bar replaces it.
   (Fallback for the generate_header_entry_meta_items filter in author-bio.php.) */
.single .entry-header .entry-meta { display: none; }

.pg-author-bar {
	background: var(--pg-mint-soft);
	border: 1px solid var(--pg-line);
	border-left: 4px solid var(--pg-teal);
	border-radius: var(--pg-radius);
	padding: 0.9em 1.1em;
	margin: 0.5em 0 1.75em;
}
.pg-author-bar__main {
	display: flex;
	align-items: center;
	gap: 0.9em;
}
.pg-author-avatar {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--pg-white);
	box-shadow: 0 0 0 1px var(--pg-line);
	flex: 0 0 auto;
}
.pg-author-bar__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.pg-author-name {
	font-weight: 700;
	color: var(--pg-slate);
}
.pg-author-name a { color: var(--pg-slate); text-decoration: none; }
.pg-author-name a:hover { color: var(--pg-teal); text-decoration: underline; }
.pg-author-date {
	font-size: 0.9rem;
	color: var(--pg-muted);
}

/* Right-aligned action stack: About-the-author toggle + Add-to-Google button */
.pg-author-actions {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5em;
}

/* Toggle button (pill) */
.pg-author-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--pg-teal);
	color: var(--pg-white);
	border: none;
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-family: var(--pg-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.pg-author-toggle:hover,
.pg-author-toggle:focus {
	background: var(--pg-teal-dark);
	color: var(--pg-white);
}
.pg-author-toggle__icon { transition: transform 0.2s ease; }
.pg-author-bar.is-open .pg-author-toggle__icon { transform: rotate(180deg); }

/* "Add to Google" preferred-source button (outlined, Google-style) */
.pg-gbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--pg-white);
	color: var(--pg-slate);
	border: 1px solid #d8dbe0;
	border-radius: 999px;
	padding: 0.45em 1em;
	font-family: var(--pg-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pg-gbtn:hover,
.pg-gbtn:focus {
	color: var(--pg-slate);
	border-color: #bcc0c7;
	box-shadow: 0 1px 5px rgba(45, 49, 66, 0.12);
	text-decoration: none;
}
.pg-gbtn__icon { flex: 0 0 auto; display: block; }

/* --- Growing vine border ------------------------------------------------
   A pale "track" hints at the vine when closed. On open, a teal stem draws
   itself along the track (stroke-dashoffset) while leaves unfurl and flowers
   bloom in sequence (staggered scale pops). Purely decorative. */
.pg-vine {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.5em 0 0;
	overflow: visible;
}
.pg-vine__track {
	fill: none;
	stroke: #bfe3dd;
	stroke-width: 2.5;
	stroke-linecap: round;
}
.pg-vine__stem {
	fill: none;
	stroke: var(--pg-teal);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 100;      /* path normalized to 100 via pathLength */
	stroke-dashoffset: 100;     /* fully "un-drawn" when closed */
	transition: stroke-dashoffset 0.9s ease;
}
.pg-author-bar.is-open .pg-vine__stem { stroke-dashoffset: 0; }

/* Leaves + flowers pop in with a springy scale, staggered via --d. */
.pg-vine__pop {
	transform: scale(0);
	transform-box: fill-box;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--d, 0s);
}
.pg-author-bar.is-open .pg-vine__pop { transform: scale(1); }
.pg-vine__leaf   { transform-origin: left center; }   /* unfurl from the stem */
.pg-vine__flower { transform-origin: bottom center; } /* bloom up from the stalk */
.pg-vine .leaf      { fill: #4f9d4f; }
.pg-vine .leaf-vein { stroke: #357a35; stroke-width: 1; fill: none; }
.pg-vine .stalk     { stroke: #4f9d4f; stroke-width: 2; stroke-linecap: round; }
/* Flower petal/centre colours are set inline per flower for variety. */

/* --- H2 scroll-reveal dividers -------------------------------------------
   h2-vines.js inserts a .pg-h2-vine after each content H2 and toggles .is-in
   with an IntersectionObserver: the same vine draws + blooms as you scroll
   down to it, and retracts as you scroll back up. */
.pg-h2-vine {
	width: 100%;
	max-width: 520px;
	margin: 0.1em 0 1.1em;
}
.pg-h2-vine .pg-vine { display: block; width: 100%; height: auto; overflow: visible; }
.pg-h2-vine.is-in .pg-vine__stem { stroke-dashoffset: 0; }
.pg-h2-vine.is-in .pg-vine__pop { transform: scale(1); }

/* Expandable bio panel — animated open/close via grid-template-rows.
   Collapsed: 0fr row (height 0) + hidden from assistive tech.
   Open (.is-open): 1fr row slides it to natural height while the text fades in. */
.pg-author-bio {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	padding-top: 0;
	border-top: 0 dashed var(--pg-line);
	color: var(--pg-ink);
	font-size: 0.98rem;
	transition:
		grid-template-rows 0.3s ease,
		opacity 0.25s ease,
		margin-top 0.3s ease,
		padding-top 0.3s ease,
		visibility 0s linear 0.3s; /* delay hiding until the slide finishes */
}
.pg-author-bar.is-open .pg-author-bio {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top-width: 1px;
	transition:
		grid-template-rows 0.35s ease 0.15s, /* let the vine start growing first */
		opacity 0.35s ease 0.25s,
		margin-top 0.35s ease 0.15s,
		padding-top 0.35s ease 0.15s,
		visibility 0s linear 0s;
}
/* Inner wrapper must clip so the 0fr row can collapse it. */
.pg-author-bio__inner {
	min-height: 0;
	overflow: hidden;
}
.pg-author-bio p { margin-bottom: 0.6em; }
.pg-author-bio__more { margin-bottom: 0; }
.pg-author-bio__more a { font-weight: 700; }

/* Honor reduced-motion preferences: no slide or growth, just show/hide. */
@media (prefers-reduced-motion: reduce) {
	.pg-author-bio,
	.pg-author-bar.is-open .pg-author-bio,
	.pg-author-toggle__icon,
	.pg-vine__stem,
	.pg-vine__pop {
		transition: none;
	}
	.pg-author-bar.is-open .pg-vine__stem,
	.pg-h2-vine .pg-vine__stem { stroke-dashoffset: 0; }
	.pg-author-bar.is-open .pg-vine__pop,
	.pg-h2-vine .pg-vine__pop { transform: scale(1); }
}

@media (max-width: 600px) {
	.pg-author-bar__main { flex-wrap: wrap; }
	.pg-author-actions {
		margin-left: 0;
		margin-top: 0.5em;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* =========================================================================
   10. FEATURED IMAGE CARD  (single posts — title band + interactive butterflies)
   ========================================================================= */
/* Card-style featured image. Supports both GeneratePress markups: in-content
   (.post-image) and page-header (.featured-image); this site uses the latter.
   The image fills a rounded card and the post title sits in a solid band across
   the bottom (post-card.js moves the H1 into the band). */
.single .post-image,
.single .featured-image {
	position: relative;
	margin-bottom: 1.5em;
	border-radius: 14px;
	overflow: hidden;                  /* clip image + band to the rounded card */
	box-shadow: 0 10px 30px rgba(45, 49, 66, 0.12);
	background: var(--pg-slate);        /* shows only while the image loads */
}
.single .post-image img,
.single .featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Title band overlaid on the bottom of the image */
.pg-card-band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	background: var(--pg-teal);
	padding: 0.7em 1.1em 0.85em;
}
.pg-card-band::before {                 /* soft fade so the band doesn't hard-cut the photo */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 48px;
	background: linear-gradient( to top, rgba( 2, 128, 144, 0.7 ), rgba( 2, 128, 144, 0 ) );
	pointer-events: none;
}
.pg-card-band .entry-title {
	margin: 0;
	color: var(--pg-white);
	font-size: clamp( 1.3rem, 3.6vw, 2rem );
	line-height: 1.15;
}
.pg-card-band .entry-title a { color: var(--pg-white); }

/* Optional watercolour border image (OFF by default now). Re-enable by placing
   a file at assets/img/floral-border.png or returning a URL from the
   patient_gardener_floral_border_url filter. */
.pg-floral-border {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	width: 100%;
	height: auto;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}

/* Interactive butterflies — built and positioned by assets/js/butterflies.js.
   The script sets each butterfly's translate()+rotate() every frame (follow the
   cursor / touch, wander when idle, clamp to the frame); CSS only flaps the
   wings. Reduced-motion is handled in JS (butterflies simply aren't created). */
.pg-bfly-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 3; }
.pg-bfly { position: absolute; top: 0; left: 0; width: 34px; height: 28px; pointer-events: none; will-change: transform; }
.pg-bfly svg { display: block; overflow: visible; }
.pg-bwing { transform-box: fill-box; animation: pg-bfly-flap var(--flapdur, 0.3s) ease-in-out var(--flapdelay, 0s) infinite; }
.pg-bwing--l { transform-origin: 100% 50%; }
.pg-bwing--r { transform-origin: 0% 50%; }
@keyframes pg-bfly-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.26); } }

/* =========================================================================
   11. UTILITIES
   ========================================================================= */
.pg-section-alt   { background-color: var(--pg-mint-soft); }
.pg-section-teal  { background-color: var(--pg-teal); color: var(--pg-white); }
.pg-text-center   { text-align: center; }

/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
	body { font-size: 18px; }
	h1, .entry-title { font-size: 2rem; }
	h2 { font-size: 1.6rem; }
	.site-content { padding-top: 1.5em; padding-bottom: 1.5em; }
}

/* =========================================================================
   13. MEGA MENU  (Max Mega Menu — brand styling)
   !important is used throughout to override Max Mega Menu's own theme CSS,
   regardless of stylesheet order. Selectors verified against the live markup.
   ========================================================================= */
/* Teal bar (full width) + breathing room beneath */
.main-navigation {
	background-color: var(--pg-teal) !important;
	box-shadow: none !important;
	border: 0 !important;
	margin-bottom: 0.4em !important;   /* small gap under the bar; content padding adds the rest */
}
#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary {
	background-color: var(--pg-teal) !important;
}

/* Top-level links — Fraunces, normal case */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	height: auto !important;   /* let the links define the bar height (fixes text spilling below the bar) */
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	position: relative;
	color: var(--pg-white) !important;
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 1.02rem !important;
	line-height: 1.4 !important;
	padding: 0.85em 1.05em !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
	background-color: var(--pg-mint-soft) !important;
	color: var(--pg-slate) !important;
}

/* Dropdown panel — cream card */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
	background: var(--pg-cream) !important;
	border: 0 !important;
	border-radius: 0 0 10px 10px !important;
	box-shadow: 0 14px 30px rgba(45, 49, 66, 0.16) !important;
	padding: 1.3em 1.5em !important;
}

/* Category links — Caprasimo with dotted separators */
#mega-menu-wrap-primary .mega-menu-megamenu .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	color: var(--pg-teal) !important;
	font-family: var(--pg-font-heading) !important;
	font-weight: 400 !important;
	font-size: 1.02rem !important;
	padding: 0.55em 0 !important;
	border-bottom: 1px dotted rgba(45, 49, 66, 0.28) !important;
	transition: color 0.15s ease, padding-left 0.15s ease;
}
#mega-menu-wrap-primary .mega-menu-megamenu .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	color: var(--pg-teal-dark) !important;
	background: transparent !important;
	padding-left: 4px !important;
}

/* Optional "Block Title" column headings */
#mega-menu-wrap-primary .mega-menu-megamenu .mega-block-title {
	color: var(--pg-slate) !important;
	font-family: var(--pg-font-heading) !important;
	text-transform: none !important;
	border-bottom: 2px solid var(--pg-mint) !important;
	padding-bottom: 0.3em !important;
}

/* Featured image card (Custom HTML widget) */
#mega-menu-wrap-primary .mega-menu-megamenu .widget_custom_html img,
#mega-menu-wrap-primary .mega-menu-megamenu .textwidget img {
	border-radius: 5px !important;
	box-shadow: 0 8px 20px rgba(45, 49, 66, 0.2) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#mega-menu-wrap-primary .mega-menu-megamenu .textwidget a:hover img {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(45, 49, 66, 0.26) !important;
}

/* Up-caret linking the open tab to its panel */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-toggle-on > a.mega-menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-bottom-color: var(--pg-mint-soft);
	z-index: 1000;
	pointer-events: none;
}

/* --- Mobile: the hamburger toggle + slide-down menu -------------------------
   The toggle bar only shows on mobile, so it's styled unconditionally; the
   stacked-menu rules are wrapped in the breakpoint. If your Max Mega Menu
   "Responsive Breakpoint" isn't 768px, tell me and I'll match the media query. */

/* Toggle bar */
#mega-menu-wrap-primary .mega-menu-toggle {
	background: var(--pg-teal) !important;
	height: auto !important;
	line-height: 1 !important;
	padding: 0.85em 1em !important;
}
/* "MENU" text label, if enabled */
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label-open,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label-closed {
	color: var(--pg-white) !important;
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 600 !important;
	text-transform: none !important;
}
/* Hamburger lines */
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after {
	background-color: var(--pg-white) !important;
}

@media (max-width: 768px) {
	/* Stacked menu keeps the teal, links go full-width with soft dividers */
	#mega-menu-wrap-primary #mega-menu-primary {
		background: var(--pg-teal) !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		color: var(--pg-white) !important;
		padding: 0.9em 1.1em !important;
		font-size: 1.05rem !important;
	}
	/* Expand arrows for sub-menus */
	#mega-menu-wrap-primary #mega-menu-primary .mega-indicator::after {
		color: var(--pg-white) !important;
	}
	/* The mega panel stacks — cream inset, flat (no shadow/rounding on mobile) */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		background: var(--pg-cream) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0.4em 1.1em !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary .mega-menu-megamenu .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		color: var(--pg-teal) !important;
	}
	/* Featured image sits full width in the flow */
	#mega-menu-wrap-primary .mega-menu-megamenu .widget_custom_html { margin-top: 0.6em !important; }
}

/* =========================================================================
   14. POLAROID IMAGES  (content images — auto-framed, tilted, handwritten caption)
   Applies to Gutenberg image blocks (.wp-block-image) and classic captions
   (.wp-caption) inside post content. Full-width images and galleries opt out.
   ========================================================================= */
.entry-content .wp-block-image:not(.alignfull),
.entry-content figure.wp-caption {
	background: #fff;
	padding: 12px 12px 14px;                 /* slightly deeper bottom = polaroid strip */
	box-shadow: 0 9px 22px rgba(45, 49, 66, 0.2);
	border-radius: 2px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Centre normal images and cap the width so the tilt has room (no overflow) */
.entry-content .wp-block-image:not(.alignfull):not(.alignleft):not(.alignright),
.entry-content figure.wp-caption:not(.alignleft):not(.alignright) {
	max-width: 88%;
	margin: 1.9em auto 2.2em;
}
/* Floated images keep floating beside the text */
.entry-content .wp-block-image.alignleft  { margin: 0.4em 1.6em 1.2em 0; }
.entry-content .wp-block-image.alignright { margin: 0.4em 0 1.2em 1.6em; }

.entry-content .wp-block-image:not(.alignfull) img,
.entry-content figure.wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Handwritten ballpoint caption */
.entry-content .wp-block-image figcaption,
.entry-content figure.wp-caption .wp-caption-text {
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.15;
	color: #26418f;                          /* ballpoint blue */
	text-align: center;
	margin: 0.5em 0.2em 0.1em;
	padding: 0;
	transform: rotate(-0.6deg);              /* tiny wobble, like real handwriting */
}

/* Each photo tilts a little differently, cycling through 5 angles */
.entry-content .wp-block-image:not(.alignfull):nth-of-type(5n+1) { transform: rotate(-2.4deg); }
.entry-content .wp-block-image:not(.alignfull):nth-of-type(5n+2) { transform: rotate(1.6deg); }
.entry-content .wp-block-image:not(.alignfull):nth-of-type(5n+3) { transform: rotate(-1deg); }
.entry-content .wp-block-image:not(.alignfull):nth-of-type(5n+4) { transform: rotate(2.3deg); }
.entry-content .wp-block-image:not(.alignfull):nth-of-type(5n+5) { transform: rotate(-1.7deg); }

/* Straighten & lift on hover, like picking the photo off the page */
.entry-content .wp-block-image:not(.alignfull):hover {
	transform: rotate(0deg) scale(1.02);
	box-shadow: 0 15px 32px rgba(45, 49, 66, 0.28);
	position: relative;
	z-index: 2;
}

/* Opt gallery images out — keep grids intact */
.entry-content .wp-block-gallery .wp-block-image {
	background: none;
	padding: 0;
	box-shadow: none;
	transform: none;
	margin: 0;
	max-width: none;
}
.entry-content .wp-block-gallery .wp-block-image figcaption {
	font-family: inherit;
	color: inherit;
	font-size: inherit;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.entry-content .wp-block-image:not(.alignfull) { transition: none; }
}

/* =========================================================================
   15. HOMEPAGE & ARCHIVE  (welcome strip, 2-column post-card grid, sidebar)
   ========================================================================= */

/* Welcome card (homepage only, output by inc/homepage.php) — sits as the first
   grid cell; the photo grows to fill the card's height beside the first post. */
.pg-home-welcome {
	background: var(--pg-mint-soft);
	border-radius: 12px;
	padding: 1.5em 1.4em;
	margin: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.pg-home-welcome__title {
	font-family: var(--pg-font-heading);
	color: var(--pg-slate);
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.1;
	margin: 0 0 0.15em;
}
.pg-home-welcome__text {
	color: var(--pg-muted);
	font-size: 1.05rem;
	margin: 0 0 0.2em;
}
.pg-home-welcome__photo {
	flex: 1 1 auto;
	width: 100%;
	min-height: 220px;
	object-fit: cover;
	object-position: center top;   /* keep the face — crop from the bottom, not the middle */
	border-radius: 10px;
	margin-top: 1.1em;
	box-shadow: 0 6px 18px rgba(45, 49, 66, 0.14);
}

/* Responsive post-card grid — needs GeneratePress "Blog Columns" enabled (any
   count) to create the container; this then flows 2–3 even cards by width.
   Overrides GP's float widths. */
.generate-columns-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.6em;
	align-items: stretch;
}
.generate-columns-container > .generate-columns {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* Card hover lift */
.blog .inside-article:hover,
.archive .inside-article:hover,
.search .inside-article:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(45, 49, 66, 0.13);
}

/* Featured image flush to the top of the card */
.blog .inside-article .post-image,
.blog .inside-article .featured-image,
.archive .inside-article .post-image,
.archive .inside-article .featured-image {
	margin: 0;
}
.blog .inside-article .post-image img,
.blog .inside-article .featured-image img,
.archive .inside-article .post-image img,
.archive .inside-article .featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Inner padding for the text */
.blog .inside-article .entry-header,
.blog .inside-article .entry-summary,
.blog .inside-article .entry-content,
.archive .inside-article .entry-header,
.archive .inside-article .entry-summary,
.archive .inside-article .entry-content {
	padding-left: 1.3em;
	padding-right: 1.3em;
}
.blog .inside-article .entry-header,
.archive .inside-article .entry-header { padding-top: 0.95em; }

.blog .entry-title,
.archive .entry-title { font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.2em; }
.blog .entry-title a,
.archive .entry-title a { color: var(--pg-slate); }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--pg-teal); }

/* "Read more" as a teal button */
.blog .read-more,
.archive .read-more,
.blog .entry-summary .more-link,
.archive .entry-summary .more-link,
.blog .entry-content .more-link,
.archive .entry-content .more-link {
	display: inline-block;
	margin: 0.4em 1.3em 1.3em;
	background: var(--pg-teal);
	color: var(--pg-white) !important;
	padding: 0.5em 1.1em;
	border-radius: 8px;
	font-family: var(--pg-font-body);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.blog .read-more:hover,
.archive .read-more:hover,
.blog .more-link:hover,
.archive .more-link:hover {
	background: var(--pg-teal-dark);
	color: var(--pg-white) !important;
}

/* --- Sidebar widgets --- */
.widget-area .widget { margin-bottom: 2em; }
.widget-area .widget-title {
	font-family: var(--pg-font-heading);
	color: var(--pg-slate);
	font-size: 1.4rem;
	margin-bottom: 0.5em;
}
.widget-area .widget > ul { list-style: none; margin: 0; padding: 0; }
.widget-area .widget > ul > li {
	border-bottom: 1px solid var(--pg-line);
	padding: 0.5em 0;
	line-height: 1.35;
}
.widget-area .widget > ul > li a { color: var(--pg-teal); }
.widget-area .widget > ul > li a:hover { color: var(--pg-teal-dark); }
.widget-area .wp-block-search__button,
.widget-area .search-submit,
.widget-area #searchsubmit {
	background: var(--pg-teal) !important;
	color: var(--pg-white) !important;
	border: 0 !important;
	border-radius: 8px !important;
}

@media (max-width: 768px) {
	.generate-columns-container { grid-template-columns: 1fr; }
}