/* ============================================================
   CharityGlow Official · Design System (v1.0.0)
   Design tokens · Utility primitives · Component classes
   ============================================================ */

/* ---------- RESET / BASE ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden !important;
}

body {
	margin: 0;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden !important;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

input,
select,
textarea,
button {
	font: inherit;
}

:focus-visible {
	outline: 2px solid #38B296;
	outline-offset: 3px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 1000;
	background: #16645A;
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 6px;
	font-weight: 600;
	font-family: "DM Sans", Inter, sans-serif;
	transition: top 200ms ease;
}
.skip-link:focus {
	top: 1rem;
}

/* ---------- DESIGN TOKENS (Custom Luxury Palette · Dark Teal + Amber Gold) ---------- */
:root {
	/* --- Primary · Deep Teal Green Family (premium foundation-grade) --- */
	--cg-primary-50:  #F2F7F5;
	--cg-primary-100: #E5EEEB;
	--cg-primary-200: #CDE0D8;
	--cg-primary-300: #9EC4BA;
	--cg-primary-400: #38B296;
	--cg-primary-500: #16645A;
	--cg-primary-600: #16645A;
	--cg-primary-700: #123A32;
	--cg-primary-800: #0E3B36;
	--cg-primary-900: #0A2B27;
	--cg-primary-950: #0A2B27;
	--cg-primary:       var(--cg-primary-600);
	--cg-primary-light: var(--cg-primary-400);
	--cg-primary-dark:  var(--cg-primary-800);

	/* --- Secondary · Amber Gold Family (luxury premium accent) --- */
	--cg-secondary-50:  #FFF8EC;
	--cg-secondary-100: #FFE3AC;
	--cg-secondary-200: #FFDFA0;
	--cg-secondary-300: #FFD98A;
	--cg-secondary-400: #FFC24D;
	--cg-secondary-500: #F5A623;
	--cg-secondary-600: #F5A623;
	--cg-secondary-700: #E89414;
	--cg-secondary-800: #D6810E;
	--cg-secondary-900: #B56800;
	--cg-secondary:     var(--cg-secondary-500);
	--cg-secondary-dark:var(--cg-secondary-700);

	/* --- Tertiary · Teal Glow Accent (premium glow highlights) --- */
	--cg-tertiary-50:  #F2F7F5;
	--cg-tertiary-100: #E5EEEB;
	--cg-tertiary-400: #38B296;
	--cg-tertiary-500: #16645A;
	--cg-tertiary-600: #123A32;

	/* --- Accent / System (consistent with teal/gold palette spirit) --- */
	--cg-accent:   #38B296;
	--cg-success:  #38B296;
	--cg-warning:  #F5A623;
	--cg-danger:   #E2574C;

	/* --- Surfaces (Pale Mint + White crisp luxury) --- */
	--cg-background:    #FFFFFF;
	--cg-surface:       #FFFFFF;
	--cg-surface-alt:   #F2F7F5;
	--cg-surface-card:  #FFFFFF;

	/* --- Ink (Teal-tinted dark neutrals — no pure black, no pure gray) --- */
	--cg-ink:         #123A32;
	--cg-ink-strong:  #17332C;
	--cg-ink-soft:    #54706A;
	--cg-ink-muted:   #7C948D;
	--cg-ink-border:  #E5EEEB;
	--cg-ink-divider: #F2F7F5;

	/* --- Typography --- */
	--cg-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cg-font-display: 'DM Sans', 'Inter', system-ui, sans-serif;

	--cg-fs-display-xl: clamp(2.5rem, 5.2vw, 4.25rem);
	--cg-fs-display-lg: clamp(2rem, 4vw, 3.25rem);
	--cg-fs-display-md: clamp(1.6rem, 3vw, 2.25rem);
	--cg-fs-h1: 2.25rem;
	--cg-fs-h2: 1.875rem;
	--cg-fs-h3: 1.5rem;
	--cg-fs-h4: 1.25rem;
	--cg-fs-h5: 1.1rem;
	--cg-fs-body-l: 1.125rem;
	--cg-fs-body: 1rem;
	--cg-fs-body-s: 0.875rem;
	--cg-fs-caption: 0.8125rem;

	--cg-lh-tight: 1.08;
	--cg-lh-snug:  1.3;
	--cg-lh-normal:1.6;
	--cg-lh-relaxed:1.75;

	/* --- Spacing Scale: 4,8,12,16,20,24,32,40,48,64,80,96,120 px --- */
	--cg-s-1: 4px;
	--cg-s-2: 8px;
	--cg-s-3: 12px;
	--cg-s-4: 16px;
	--cg-s-5: 20px;
	--cg-s-6: 24px;
	--cg-s-8: 32px;
	--cg-s-10: 40px;
	--cg-s-12: 48px;
	--cg-s-16: 64px;
	--cg-s-20: 80px;
	--cg-s-24: 96px;
	--cg-s-30: 120px;

	/* --- Radius --- */
	--cg-r-sm: 6px;
	--cg-r-md: 8px;
	--cg-r-lg: 10px;
	--cg-r-xl: 14px;
	--cg-r-2xl: 20px;
	--cg-r-3xl: 28px;
	--cg-r-pill: 999px;

	/* --- Shadows (Deep Teal + Amber Gold depth — premium foundation-grade) --- */
	--cg-shadow-xs: 0 1px 2px rgba(18,58,50,0.04);
	--cg-shadow-sm: 0 1px 0 rgba(18,58,50,0.03), 0 6px 18px -6px rgba(18,58,50,0.09);
	--cg-shadow-card: 0 1px 0 rgba(18,58,50,0.03), 0 6px 18px -6px rgba(18,58,50,0.09);
	--cg-shadow-soft: 0 1px 2px rgba(18,58,50,0.04), 0 8px 24px rgba(18,58,50,0.05);
	--cg-shadow-md: 0 10px 30px -10px rgba(10,43,39,0.2);
	--cg-shadow-lg: 0 24px 60px -20px rgba(10,43,39,0.3);
	--cg-shadow-glow: 0 0 0 1px rgba(56,178,150,0.28), 0 10px 40px -10px rgba(56,178,150,0.35);
	--cg-shadow-gold-glow: 0 0 0 1px rgba(245,166,35,0.32), 0 10px 40px -10px rgba(245,166,35,0.45);
	--cg-shadow-focus: 0 0 0 3px rgba(56,178,150,0.22);

	/* --- Containers --- */
	--cg-container: 1160px;
	--cg-container-wide: 1320px;
	--cg-container-narrow: 720px;

	/* --- Section Padding --- */
	--cg-section-py: clamp(3rem, 8vw, 6rem);
	--cg-section-py-tight: clamp(1.75rem, 4.5vw, 3.25rem);
	--cg-section-px: clamp(1rem, 3vw, 2rem);
}

/* ---------- CONTAINERS ---------- */
.cg-container-fluid,
.cg-container,
.cg-container-wide,
.cg-container-narrow {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--cg-section-px);
	padding-right: var(--cg-section-px);
}
.cg-container-fluid { max-width: none; }
.cg-container { max-width: var(--cg-container); }
.cg-container-wide { max-width: var(--cg-container-wide); }
.cg-container-narrow { max-width: var(--cg-container-narrow); }

/* ---------- SECTIONS ---------- */
.cg-section {
	padding-top: var(--cg-section-py);
	padding-bottom: var(--cg-section-py);
}
.cg-section-tight {
	padding-top: var(--cg-section-py-tight);
	padding-bottom: var(--cg-section-py-tight);
}

/* ---------- TYPOGRAPHY ---------- */
.cg-display-xl,
.cg-display-lg,
.cg-display-md,
.cg-h1, .cg-h2, .cg-h3, .cg-h4, .cg-h5 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink);
	letter-spacing: -0.02em;
	line-height: var(--cg-lh-tight);
	margin: 0;
}

.cg-display-xl {
	font-size: var(--cg-fs-display-xl);
	line-height: 1.05;
	letter-spacing: -0.025em;
}
.cg-display-lg {
	font-size: var(--cg-fs-display-lg);
	line-height: 1.1;
}
.cg-display-md {
	font-size: var(--cg-fs-display-md);
	line-height: 1.15;
}
.cg-h1 { font-size: var(--cg-fs-h1); line-height: 1.2; letter-spacing: -0.015em; }
.cg-h2 { font-size: var(--cg-fs-h2); line-height: 1.25; letter-spacing: -0.01em; }
.cg-h3 { font-size: var(--cg-fs-h3); line-height: 1.3; }
.cg-h4 { font-size: var(--cg-fs-h4); line-height: 1.35; }
.cg-h5 { font-size: var(--cg-fs-h5); line-height: 1.4; letter-spacing: -0.005em; color: var(--cg-ink-strong); }

.cg-body,
.cg-body-l,
.cg-body-s {
	color: var(--cg-ink-soft);
	margin: 0;
}
.cg-body-l { font-size: var(--cg-fs-body-l); line-height: var(--cg-lh-relaxed); }
.cg-body   { font-size: var(--cg-fs-body); line-height: var(--cg-lh-normal); }
.cg-body-s { font-size: var(--cg-fs-body-s); line-height: 1.65; color: var(--cg-ink-muted); }

.cg-lead {
	font-size: var(--cg-fs-body-l);
	line-height: var(--cg-lh-relaxed);
	color: var(--cg-ink-soft);
	max-width: 60ch;
}

.cg-caption {
	font-size: var(--cg-fs-caption);
	color: var(--cg-ink-muted);
	line-height: 1.5;
}

.cg-label {
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--cg-ink-soft);
	letter-spacing: 0.01em;
	display: inline-block;
}

.cg-link {
	color: var(--cg-primary-600);
	font-weight: 500;
	border-bottom: 1px solid var(--cg-primary-200);
	padding-bottom: 1px;
	transition: all 200ms ease;
}
.cg-link:hover {
	color: var(--cg-primary-700);
	border-bottom-color: var(--cg-primary-600);
}

.cg-gradient-text {
	background: linear-gradient(135deg, var(--cg-primary-500) 0%, var(--cg-primary-700) 45%, var(--cg-secondary-400) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- EYEBROW / CHIPS ---------- */
.cg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--cg-primary-50);
	color: var(--cg-primary-700);
	padding: 6px 12px;
	border-radius: var(--cg-r-pill);
}

.cg-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cg-surface);
	border: 1px solid var(--cg-ink-border);
	color: var(--cg-ink-soft);
	font-family: var(--cg-font-display);
	font-weight: 500;
	font-size: 0.875rem;
	padding: 8px 16px;
	border-radius: var(--cg-r-pill);
	transition: all 200ms ease;
}
.cg-chip:hover {
	background: var(--cg-primary-50);
	border-color: var(--cg-primary-200);
	color: var(--cg-primary-700);
}

/* ---------- BUTTONS ---------- */
.cg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--cg-font-display);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--cg-r-lg);
	border: 2px solid transparent;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;
}
.cg-btn:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px var(--cg-primary-100),
		0 0 0 5px var(--cg-primary-500);
}
.cg-btn:disabled,
.cg-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	transform: none !important;
}

/* --- Sizes --- */
/* NOTICE: Previously .cg-btn-xs was MISSING (no CSS definition at all!) which was
   the root cause of sidebar funnel buttons appearing flat with zero padding. All 4
   widget buttons use class="cg-btn cg-btn-xs ..." so we MUST define this size. */
.cg-btn-xs {
	padding: 0.65rem 1.05rem;          /* top/bottom 10.4px, left/right 16.8px = nice touch target */
	min-height: 40px;
	font-size: 0.8rem;
	gap: 6px;
	line-height: 1.1;
	border-radius: var(--cg-r-md);
}
.cg-btn-sm {
	padding: 0.55rem 0.95rem;
	font-size: 0.875rem;
	gap: 6px;
}
.cg-btn-md {
	padding: 0.8rem 1.35rem;
	font-size: 0.95rem;
}
.cg-btn-lg {
	padding: 1.05rem 1.75rem;
	font-size: 1.05rem;
	border-radius: 12px;
}

/* --- Funnel Widget Buttons (belt-and-braces padding in case Tailwind classes missed
   by CDN purge or missing from compiled CSS). This class is explicitly wired to the
   widget buttons in functions.php ($s['btn'] renders with .cg-funnel-btn). */
.cg-funnel-btn,
a.cg-funnel-btn,
button.cg-funnel-btn {
	padding: 0.65rem 1rem !important;          /* matches px-4 py-2.5 in Tailwind (16px/40px) */
	min-height: 40px !important;
	line-height: 1.15 !important;
	font-size: 0.82rem !important;
	border-radius: var(--cg-r-md) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	cursor: pointer !important;
}
/* Gold Step 4 hover-lift extra strength */
.cg-funnel-btn[class*="bg-gradient-to-b"],
.cg-funnel-btn.bg-gradient-to-b {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.6),
		0 8px 22px -12px rgba(245,166,35,0.7) !important;
}
.cg-funnel-btn[class*="bg-gradient-to-b"]:hover,
.cg-funnel-btn.bg-gradient-to-b:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.05) saturate(1.05) !important;
}

/* --- Primary Variant (Deep Teal Green) --- */
.cg-btn-primary {
	background: var(--cg-primary-600);
	color: #FFFFFF;
	border-color: var(--cg-primary-600);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,
				0 10px 22px -10px rgba(22,100,90,0.5);
}
.cg-btn-primary:hover {
	background: var(--cg-primary-700);
	border-color: var(--cg-primary-700);
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,
				0 16px 32px -12px rgba(18,58,50,0.55);
}
.cg-btn-primary:active { transform: translateY(0); }

/* --- Secondary Variant --- */
.cg-btn-secondary {
	background: #FFFFFF;
	color: var(--cg-ink);
	border-color: var(--cg-ink-border);
	box-shadow: var(--cg-shadow-xs);
}
.cg-btn-secondary:hover {
	border-color: var(--cg-primary-400);
	color: var(--cg-primary-700);
	background: var(--cg-primary-50);
	transform: translateY(-1px);
}

/* --- Ghost Variant --- */
.cg-btn-ghost {
	background: transparent;
	color: var(--cg-ink-strong);
	border-color: transparent;
}
.cg-btn-ghost:hover {
	background: var(--cg-primary-50);
	color: var(--cg-primary-700);
}

/* --- Accent Variant (Amber Gold — luxury premium) --- */
.cg-btn-accent {
	background: var(--cg-secondary-500);
	color: #17332C;
	border-color: var(--cg-secondary-500);
	box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
				0 12px 24px -12px rgba(245,166,35,0.6);
}
.cg-btn-accent:hover {
	background: var(--cg-secondary-700);
	border-color: var(--cg-secondary-700);
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* ---------- CARDS ---------- */
.cg-card {
	position: relative;
	background: var(--cg-surface);
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-xl);
	box-shadow: var(--cg-shadow-card);
	transition:
		border-color 250ms ease,
		box-shadow 250ms ease,
		transform 300ms cubic-bezier(.22,1,.36,1);
	overflow: hidden;
	z-index: 1;
}
.cg-card:hover {
	border-color: var(--cg-primary-300);
	box-shadow: var(--cg-shadow-glow);
	transform: translateY(-2px);
}

.cg-card-pad       { padding: 1.25rem; }
.cg-card-pad-sm    { padding: 1.25rem; }
.cg-card-pad-md    { padding: 1.25rem; }
.cg-card-pad-lg    { padding: 2.25rem; }
.cg-card-pad-xl    { padding: 1.5rem; }
@media (min-width: 640px)  {
	.cg-card-pad    { padding: 1.75rem; }
	.cg-card-pad-md { padding: 1.5rem 1.5rem 1.5rem 1.5rem; }
	.cg-card-pad-xl { padding: 2.25rem 2.5rem; }
}
@media (min-width: 1024px) {
	.cg-card-pad-md { padding: 1.75rem; }
	.cg-card-pad-xl { padding: 2.75rem 3rem; }
}

.cg-card-hover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg,
		rgba(56,178,150,0.07) 0%,
		rgba(245,166,35,0.055) 60%,
		transparent 100%);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
	z-index: 0;
}
.cg-card-hover:hover::before { opacity: 1; }
.cg-card-hover > * { position: relative; z-index: 1; }

/* ---------- PAGINATION ---------- */
/*
 * 🔥 FOOLPROOF / GUARANTEED-TO-WORK APPROACH 🔥
 *
 * WordPress uses the unique class .page-numbers ONLY in its pagination markup
 * (never in posts / blocks / forms / anything else).  So we style .page-numbers
 * GLOBALLY — no parent wrapper class required.  This means pagination WILL get
 * styled on:
 *
 *   • Category archives, Tag archives, Author archives, Date archives
 *   • Search results, 404 "related posts" sections
 *   • the_posts_pagination() output  (default nav.nav-links wrapper)
 *   • paginate_links() plain output
 *   • Widgets, shortcodes — literally anything WordPress renders
 *
 * Layout centering is handled on BOTH possible containers:
 *   - .navigation (WordPress default <nav> from the_posts_pagination)
 *   - .nav-links  (WordPress default inner <div>)
 *   - .cg-pagination (our own wrapper in page-blog.php / home.php)
 */

/* ================================================================
   LAYOUT — center pagination controls on the page, regardless of
   which wrapper WordPress renders.
================================================================ */
.navigation,
.navigation .nav-links,
.cg-pagination,
.cg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}

/* Spacing above pagination for each wrapper pattern.
   NOTE: Tailwind mt-12 / mt-14 on the wrapper already provides consistent spacing
   (3rem / 3.5rem) across blog / home / archives / search.  We do NOT add an
   extra margin here to avoid double-spacing.  If no Tailwind mt-* class is
   present on a given page this bare minimum keeps pagination off the grid. */
.navigation { margin-block-start: 0; }
.cg-pagination { margin-block-start: 0; }

/* ================================================================
   GLOBAL .page-numbers BASE — applies to EVERY pagination element
   (anchors, spans, prev / next / current / dots)  REGARDLESS of
   parent wrapper.  No .cg-pagination ancestry required!
================================================================ */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.85rem;
	border-radius: var(--cg-r-lg, 14px);
	background: #FFFFFF;
	color: var(--cg-ink-strong, #17332C);
	border: 1px solid var(--cg-ink-border, #E5EEEB);
	font-family: var(--cg-font-display);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	vertical-align: middle;
	transition:
		border-color 200ms ease,
		background-color 200ms ease,
		color 200ms ease,
		transform 200ms cubic-bezier(.22,1,.36,1),
		box-shadow 200ms ease;
	box-shadow: 0 1px 2px rgba(23,51,44,0.04);
}

/* ================================================================
   HOVER — only for actual links, never static spans
================================================================ */
a.page-numbers:hover {
	background: var(--cg-primary-50, #F2F7F5);
	border-color: var(--cg-primary-200, #D0E4DE);
	color: var(--cg-primary-700, #16645A);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -12px rgba(23,51,44,0.25);
	text-decoration: none;
}

/* ================================================================
   CURRENT / ACTIVE PAGE — Emerald solid fill + glow
================================================================ */
.page-numbers.current {
	background: var(--cg-primary-600, #16645A);
	color: #FFFFFF;
	border-color: var(--cg-primary-600, #16645A);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.14) inset,
		0 8px 22px -10px rgba(22,100,90,0.70);
	cursor: default;
	transform: none;
}

/* ================================================================
   PREV / NEXT arrow buttons — wider, hover: amber gradient fill
================================================================ */
.page-numbers.prev,
.page-numbers.next {
	padding: 0 1rem;
	min-width: auto;
	gap: 0.4rem;
	color: var(--cg-primary-700, #16645A);
	font-weight: 600;
}
a.page-numbers.prev:hover,
a.page-numbers.next:hover {
	color: #FFFFFF;
	background: linear-gradient(180deg, #FFD98A 0%, #F5A623 100%);
	border-color: rgba(245,166,35,0.40);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.45) inset,
		0 10px 24px -10px rgba(245,166,35,0.65);
}

/* ================================================================
   DISABLED prev/next (first page has no prev, last page has no next)
================================================================ */
.page-numbers.prev.disabled,
.page-numbers.next.disabled,
a.page-numbers.disabled {
	opacity: 0.45;
	pointer-events: none;
	background: #FFFFFF;
	color: var(--cg-ink-muted, #7C948D);
	box-shadow: none;
	transform: none;
}

/* ================================================================
   ELLIPSIS DOTS (…)
================================================================ */
.page-numbers.dots {
	min-width: 28px;
	height: 44px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
	color: var(--cg-ink-muted, #7C948D);
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ================================================================
   SCREEN-READER HEADING — the_posts_pagination() injects an <h2>
   or <span>.  Always visually hide it, regardless of wrapper.
================================================================ */
.navigation .screen-reader-text,
.cg-pagination .screen-reader-text,
h2.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================
   COMMENTS — list + avatar + meta + reply + nested children
=============================================================== */
.cg-comments-list,
.cg-comments-list ol,
.cg-comments-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual comment wrapper */
.cg-comment {
	position: relative;
	margin: 0;
	padding: 0;
}
.cg-comment + .cg-comment {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cg-primary-100, #E5EEEB);
}

/* Inner layout: avatar (left) + body (right) */
.cg-comment-inner {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: flex-start;
	gap: 1rem 1.1rem;
}
@media (max-width: 480px) {
	.cg-comment-inner {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0.9rem;
	}
}

/* ---------------- Avatar column ---------------- */
.cg-comment-avatar {
	position: sticky;
	top: 1rem;
	width: 56px;
	height: 56px;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, #16645A 0%, #38B296 55%, #F5A623 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.30) inset,
		0 8px 22px -10px rgba(22,100,90,0.45),
		0 4px 14px -8px rgba(245,166,35,0.45);
	border: 1px solid rgba(255,255,255,0.40);
}
@media (max-width: 480px) {
	.cg-comment-avatar { width: 44px; height: 44px; border-radius: 16px; }
}
.cg-comment-avatar img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cg-comment-avatar-fallback {
	color: #FFFFFF;
	font-family: var(--cg-font-display);
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0.01em;
}
@media (max-width: 480px) {
	.cg-comment-avatar-fallback { font-size: 1rem; }
}

/* ---------------- Meta (name + timestamp + actions) ---------------- */
.cg-comment-body { min-width: 0; }

.cg-comment-meta {
	margin: 0 0 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cg-comment-author-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.cg-comment-author {
	font-family: var(--cg-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--cg-ink-strong, #17332C);
}

.cg-comment-author-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	height: 22px;
	padding: 0 0.55rem;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,217,138,0.35) 0%, rgba(245,166,35,0.25) 100%);
	border: 1px solid rgba(245,166,35,0.40);
	color: var(--cg-primary-700, #16645A);
	font-family: var(--cg-font-display);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
}

.cg-comment-submeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	color: var(--cg-ink-muted, #7C948D);
	font-size: 0.8rem;
	line-height: 1.4;
}
.cg-comment-submeta > * {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.cg-comment-submeta a,
.cg-comment-submeta .cg-comment-reply a,
.cg-comment-submeta .cg-comment-edit a {
	color: var(--cg-primary-700, #16645A);
	text-decoration: none;
	font-weight: 600;
	border-radius: 8px;
	padding: 0.15rem 0.45rem;
	margin: -0.15rem -0.45rem;
	transition: background-color 180ms ease, color 180ms ease;
}
.cg-comment-submeta a:hover,
.cg-comment-submeta .cg-comment-reply a:hover,
.cg-comment-submeta .cg-comment-edit a:hover {
	background: var(--cg-primary-50, #F2F7F5);
	color: var(--cg-primary-700, #16645A);
}

/* ---------------- Awaiting moderation banner ---------------- */
.cg-comment-awaiting {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.85rem;
	margin: 0 0 0.8rem;
	border-radius: 12px;
	background: #FFF8E6;
	border: 1px solid #F5DEAD;
	color: #7A5B00;
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1.3;
}
.cg-comment-awaiting svg { flex-shrink: 0; color: #C88A00; }

/* ---------------- Comment body text ---------------- */
.cg-comment-text {
	color: var(--cg-ink-soft, #3D6358);
	font-size: 0.96rem;
	line-height: 1.75;
	word-wrap: break-word;
}
.cg-comment-text p { margin: 0 0 0.9rem; }
.cg-comment-text p:last-child { margin-bottom: 0; }

.cg-comment-text a {
	color: var(--cg-primary-700, #16645A);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--cg-primary-200, #D0E4DE);
	transition: border-color 180ms ease, color 180ms ease;
}
.cg-comment-text a:hover {
	color: var(--cg-primary-800, #0E3B36);
	border-bottom-color: var(--cg-primary-600, #16645A);
}

.cg-comment-text blockquote {
	margin: 0.9rem 0;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--cg-primary-400, #38B296);
	background: var(--cg-primary-50, #F2F7F5);
	border-radius: 0 12px 12px 0;
	color: var(--cg-ink-strong, #17332C);
	font-style: italic;
}

.cg-comment-text code {
	padding: 0.12rem 0.38rem;
	border-radius: 8px;
	background: #0A2B27;
	color: #FFDFA0;
	font-size: 0.88em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------- Nested (children) comments ---------------- */
.cg-comment .children {
	margin: 1.25rem 0 0 1.5rem !important;
	padding: 1rem 0 0 1.25rem !important;
	border-left: 2px solid var(--cg-primary-100, #E5EEEB);
	position: relative;
}
@media (max-width: 640px) {
	.cg-comment .children {
		margin-left: 0.75rem !important;
		padding-left: 0.85rem !important;
	}
}
.cg-comment .children .cg-comment + .cg-comment {
	margin-top: 1rem;
	padding-top: 1rem;
}
.cg-comment .children .cg-comment-inner {
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.8rem 0.9rem;
}
.cg-comment .children .cg-comment-avatar {
	width: 44px;
	height: 44px;
	border-radius: 16px;
}
@media (max-width: 480px) {
	.cg-comment .children .cg-comment-inner {
		grid-template-columns: 38px minmax(0, 1fr);
	}
	.cg-comment .children .cg-comment-avatar {
		width: 38px;
		height: 38px;
		border-radius: 14px;
	}
}

/* ---------------- Empty state ---------------- */
.cg-comments-empty h3 { font-size: 1.2rem !important; }
.cg-comments-empty p { color: var(--cg-ink-soft, #3D6358); font-size: 0.95rem; }
.cg-comments-closed {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1rem;
	border-radius: 12px;
	background: var(--cg-primary-50, #F2F7F5);
	border: 1px solid var(--cg-primary-100, #E5EEEB);
	color: var(--cg-ink-muted, #7C948D);
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.85rem;
}
.cg-comments-closed svg { flex-shrink: 0; color: var(--cg-primary-600, #16645A); }

/* ================================================================
   COMMENT FORM — fields, labels, layout, submit, cancel
=================================================================*/
.cg-comment-form {
	position: relative;
}

.cg-comment-form .cg-h2 {
	font-size: clamp(1.35rem, 2.3vw, 1.75rem);
	margin: 0 0 1.25rem;
}

.cg-comment-form-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Notes above form */
.cg-form-note {
	margin: 0 0 0.25rem;
	padding: 0;
	color: var(--cg-ink-muted, #7C948D);
	font-size: 0.8rem;
	font-weight: 500;
}
.cg-form-required {
	color: #E11D48;
	font-weight: 700;
	margin-left: 2px;
}

/* Logged-in / must-login notice */
.cg-comment-logged-in {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	border-radius: 14px;
	background: var(--cg-primary-50, #F2F7F5);
	border: 1px solid var(--cg-primary-100, #E5EEEB);
	color: var(--cg-ink-strong, #17332C);
	font-size: 0.88rem;
	line-height: 1.45;
}
.cg-comment-logged-in svg { flex-shrink: 0; color: var(--cg-primary-600, #16645A); }
.cg-comment-logged-in a {
	color: var(--cg-primary-700, #16645A);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--cg-primary-200, #D0E4DE);
}
.cg-comment-logged-in a:hover {
	color: var(--cg-primary-800, #0E3B36);
	border-color: var(--cg-primary-600, #16645A);
}
.cg-must-login {
	background: #FEF3F2 !important;
	border-color: #F6C9C4 !important;
	color: #912018 !important;
}
.cg-must-login svg { color: #C53030 !important; }
.cg-must-login a {
	color: #9B2C2C !important;
	border-color: #F4B8B2 !important;
}

/* Cancel-reply (inline with reply title) */
.cg-comment-cancel-wrap,
.cg-comment-cancel-wrap a,
#cancel-comment-reply-link,
.comment-reply-title small a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--cg-ink-muted, #7C948D);
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.8rem;
	text-decoration: none;
	padding: 0.2rem 0.55rem;
	margin-left: 0.6rem;
	vertical-align: middle;
	border-radius: 10px;
	transition: background 180ms ease, color 180ms ease;
}
.cg-comment-cancel-wrap a:hover,
#cancel-comment-reply-link:hover,
.comment-reply-title small a:hover {
	background: #FEF2F2;
	color: #B91C1C;
}

/* Shared comment-form field: label + input/textarea row */
.cg-comment-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}
.cg-comment-form-field label {
	color: var(--cg-ink-strong, #17332C);
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.cg-comment-form-field input[type="text"],
.cg-comment-form-field input[type="email"],
.cg-comment-form-field input[type="url"],
.cg-comment-form-field textarea,
#author, #email, #url, #comment {
	width: 100%;
	display: block;
	background: #FFFFFF;
	border: 1px solid var(--cg-ink-border, #E5EEEB);
	border-radius: 16px;
	padding: 0.9rem 1rem;
	color: var(--cg-ink-strong, #17332C);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.55;
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background-color 200ms ease;
	box-shadow: 0 1px 2px rgba(23,51,44,0.04);
}
.cg-comment-form-field textarea,
#comment {
	resize: vertical;
	min-height: 140px;
	padding: 1rem 1.1rem;
}
.cg-comment-form-field input::placeholder,
.cg-comment-form-field textarea::placeholder {
	color: var(--cg-ink-muted, #7C948D);
	opacity: 0.9;
	font-weight: 500;
}
.cg-comment-form-field input:focus,
.cg-comment-form-field textarea:focus,
#author:focus, #email:focus, #url:focus, #comment:focus {
	outline: none;
	border-color: rgba(245,166,35,0.55);
	box-shadow:
		0 0 0 4px rgba(245,166,35,0.15),
		0 8px 20px -12px rgba(23,51,44,0.20);
	background: #FFFEFB;
}

/* Row: Name + Email side by side on desktop */
.cg-comment-fields-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (max-width: 640px) {
	.cg-comment-fields-row { grid-template-columns: 1fr; }
}

/* Submit button wrapper + gold gradient submit button */
.cg-form-submit-wrap {
	margin: 0.25rem 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.cg-comment-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 54px;
	padding: 0 1.5rem;
	border-radius: 18px;
	border: 1px solid rgba(245,166,35,0.40);
	background: linear-gradient(180deg, #FFD98A 0%, #FDBA3B 50%, #F5A623 100%);
	color: #17332C;
	font-family: var(--cg-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.45) inset,
		0 10px 28px -10px rgba(245,166,35,0.65),
		0 2px 4px rgba(23,51,44,0.06);
	transition:
		transform 200ms cubic-bezier(.22,1,.36,1),
		box-shadow 200ms ease,
		filter 200ms ease;
}
.cg-comment-submit:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.55) inset,
		0 16px 34px -12px rgba(245,166,35,0.75),
		0 2px 4px rgba(23,51,44,0.08);
	filter: saturate(1.05) brightness(1.03);
}
.cg-comment-submit:active {
	transform: translateY(0);
}
.cg-comment-submit:disabled,
.cg-comment-submit[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}
.cg-comment-submit svg { flex-shrink: 0; }

/* Remove default WP comment form p margins when our layout takes over */
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.form-submit {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- FORM ELEMENTS ---------- */
.cg-input,
.cg-select,
.cg-textarea {
	width: 100%;
	display: block;
	background: #FFFFFF;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-md);
	padding: 12px 16px;
	font-family: var(--cg-font-sans);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--cg-ink);
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background-color 200ms ease;
}
.cg-textarea { resize: vertical; min-height: 120px; padding-top: 14px; }
.cg-input::placeholder,
.cg-select::placeholder,
.cg-textarea::placeholder {
	color: var(--cg-ink-muted);
}
.cg-input:hover,
.cg-select:hover,
.cg-textarea:hover {
	border-color: var(--cg-primary-300);
}
.cg-input:focus,
.cg-select:focus,
.cg-textarea:focus {
	outline: none;
	border-color: var(--cg-primary-500);
	box-shadow: 0 0 0 3px rgba(56,178,150,0.22);
	background: #FFFFFF;
}
.cg-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C948D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

/* ---------- wp_login_form() / Account page direct styling ---------- */
/* Fix wp_login_form not applying class_input: apply explicit styles via the IDs we pass */
#cg-user-login,
#cg-user-pass {
	width: 100%;
	display: block;
	background: #FFFFFF;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-md);
	padding: 12px 16px;
	font-family: var(--cg-font-sans);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--cg-ink);
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background-color 200ms ease;
	margin: 0;
	box-sizing: border-box;
}
#cg-user-login::placeholder,
#cg-user-pass::placeholder {
	color: var(--cg-ink-muted);
}
#cg-user-login:hover,
#cg-user-pass:hover {
	border-color: var(--cg-primary-300);
}
#cg-user-login:focus,
#cg-user-pass:focus {
	outline: none;
	border-color: var(--cg-primary-500);
	box-shadow: 0 0 0 3px rgba(56,178,150,0.22);
	background: #FFFFFF;
}
/* Remember-me checkbox — visible + same line alignment */
#cg-rememberme {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	margin-top: 0;
	accent-color: #16645A;
	border: 1px solid #CFDBD6;
	border-radius: 5px;
	cursor: pointer;
	vertical-align: middle;
	display: inline-block;
}
/* Sign-in Submit button — wp_login_form class_button ignored, style directly via ID */
#cg-wp-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: linear-gradient(90deg,#FFC24D 0%,#FDBA3B 50%,#F5A623 100%) !important;
	color: #17332C !important;
	font-family: var(--cg-font-display);
	font-weight: 700;
	font-size: 1rem !important;
	line-height: 1.1;
	padding: 16px 28px !important;
	border: 0 !important;
	border-radius: 16px !important;
	box-shadow: 0 16px 40px -14px rgba(245,166,35,0.65) !important;
	transition: transform 250ms ease, box-shadow 250ms ease !important;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	width: 100%;
}
@media (min-width: 768px) {
	#cg-wp-submit {
		width: auto;
	}
}
#cg-wp-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 22px 50px -14px rgba(245,166,35,0.8) !important;
}
#cg-loginform .login-remember,
#cg-loginform .cg-remember-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem;
	cursor: pointer;
	user-select: none;
	flex-direction: row;
}
#cg-loginform .cg-remember-wrap span {
	font-size: 0.9rem;
	color: #54706A;
	line-height: 1.4;
	flex: 1;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

/* ---------- SCROLL REVEAL ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cg-reveal {
		opacity: 0;
		transform: translateY(22px);
		will-change: opacity, transform;
	}
	.cg-reveal.cg-reveal-in {
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity 650ms cubic-bezier(.22,1,.36,1),
			transform 650ms cubic-bezier(.22,1,.36,1);
	}
	.cg-reveal[data-cg-delay="1"] { transition-delay: 80ms; }
	.cg-reveal[data-cg-delay="2"] { transition-delay: 160ms; }
	.cg-reveal[data-cg-delay="3"] { transition-delay: 240ms; }
	.cg-reveal[data-cg-delay="4"] { transition-delay: 320ms; }
	.cg-reveal[data-cg-delay="5"] { transition-delay: 400ms; }
}
@media (prefers-reduced-motion: reduce) {
	.cg-reveal,
	.cg-card,
	.cg-btn,
	.cg-chip,
	* {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
	.cg-reveal { opacity: 1 !important; }
	html { scroll-behavior: auto; }
}

/* ---------- HEADER ---------- */
.cg-header-scrolled {
	background: rgba(255,255,255,0.92) !important;
	border-bottom-color: var(--cg-ink-divider) !important;
	box-shadow: 0 4px 24px -8px rgba(17,74,39,0.1) !important;
}

.cg-header-nav > li > a,
.cg-header-nav > li > .cg-mega-trigger {
	font-family: var(--cg-font-display);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--cg-ink-strong);
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
	transition: color 200ms ease;
}
.cg-header-nav > li > a::after,
.cg-header-nav > li > .cg-mega-trigger::after {
	content: "";
	position: absolute;
	left: 10px; right: 10px; bottom: -4px;
	height: 2px;
	background: var(--cg-primary-500);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 250ms cubic-bezier(.22,1,.36,1);
}
.cg-header-nav > li > a:hover,
.cg-header-nav > li:hover > .cg-mega-trigger,
.cg-header-nav > li.is-open > .cg-mega-trigger {
	color: var(--cg-primary-700);
}
.cg-header-nav > li:hover > a::after,
.cg-header-nav > li:hover > .cg-mega-trigger::after,
.cg-header-nav > li.is-open > .cg-mega-trigger::after {
	transform: scaleX(1);
}
.cg-header-nav > li.is-open > .cg-mega-trigger > svg:last-child {
	transform: rotate(180deg);
}

.cg-header-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 340px;
	background: #fff;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-xl);
	box-shadow: var(--cg-shadow-lg);
	padding: 12px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 200ms ease,
		transform 250ms cubic-bezier(.22,1,.36,1),
		visibility 0ms linear 250ms;
}
.cg-header-nav > li:hover .cg-header-mega,
.cg-header-nav > li.is-open .cg-header-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition-delay: 0ms;
}
.cg-header-mega a {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: var(--cg-r-lg);
	transition: background 180ms ease;
}
.cg-header-mega a:hover { background: var(--cg-primary-50); }
.cg-header-mega .cg-mega-icon {
	width: 40px; height: 40px; flex: 0 0 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--cg-primary-50);
	color: var(--cg-primary-700);
}
.cg-header-mega a strong {
	display: block;
	font-family: var(--cg-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--cg-ink);
	margin-bottom: 2px;
}
.cg-header-mega a span {
	display: block;
	font-size: 0.8125rem;
	color: var(--cg-ink-muted);
	line-height: 1.5;
}

/* ---------- FOOTER ---------- */
.cg-footer-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.cg-footer-blobs::before,
.cg-footer-blobs::after {
	content: "";
	position: absolute;
	width: 560px; height: 560px;
	filter: blur(120px);
	border-radius: 50%;
	opacity: 0.07;
}
.cg-footer-blobs::before {
	top: -240px; left: -160px;
	background: radial-gradient(circle, var(--cg-primary-400) 0%, transparent 60%);
}
.cg-footer-blobs::after {
	bottom: -260px; right: -140px;
	background: radial-gradient(circle, var(--cg-secondary-400) 0%, transparent 60%);
}

/* ---------- UTILS ---------- */
.cg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	vertical-align: middle;
}

.cg-grid-stack {
	display: grid;
	gap: var(--cg-s-6);
}

@media (min-width: 768px) {
	.cg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cg-divider {
	height: 1px;
	background: var(--cg-ink-divider);
	border: 0;
	margin: 0;
}

/* ========================================================================
   PROSE TYPOGRAPHY — .cg-prose / .prose-lg / .prose-ink
   Used by default page / single post templates for WordPress default
   "the_content()" output (Sample Page, blog posts, docs, etc.).
   Margin rhythm matches design-system spacing tokens (cg-s-*).
   ======================================================================== */

.cg-prose,
.prose-lg,
.prose-ink {
	color: var(--cg-ink);
	font-family: var(--cg-font-body);
	line-height: var(--cg-lh-relaxed);
	font-size: var(--cg-fs-body);
}

/* ——— Generic block-level rhythm ——— */
.cg-prose > * + *,
.prose-lg > * + *,
.prose-ink > * + * {
	margin-top: var(--cg-s-5);
}
.cg-prose > * + h1, .prose-lg > * + h1 { margin-top: var(--cg-s-10); }
.cg-prose > * + h2, .prose-lg > * + h2 { margin-top: var(--cg-s-9); }
.cg-prose > * + h3, .prose-lg > * + h3 { margin-top: var(--cg-s-8); }
.cg-prose > * + h4, .prose-lg > * + h4 { margin-top: var(--cg-s-7); }

/* ——— Headings (use design-system display font, ink-strong) ——— */
.cg-prose h1, .prose-lg h1, .prose-ink h1 {
	font-family: var(--cg-font-display);
	font-weight: 800;
	color: var(--cg-ink-strong);
	font-size: var(--cg-fs-h1);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.cg-prose h2, .prose-lg h2, .prose-ink h2 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: var(--cg-fs-h2);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.cg-prose h3, .prose-lg h3, .prose-ink h3 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: var(--cg-fs-h3);
	line-height: 1.3;
}
.cg-prose h4, .prose-lg h4, .prose-ink h4 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: var(--cg-fs-h4);
	line-height: 1.35;
}
.cg-prose h5, .prose-lg h5, .prose-ink h5 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: var(--cg-fs-h5);
	line-height: 1.4;
}
.cg-prose h6, .prose-lg h6, .prose-ink h6 {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink);
	font-size: var(--cg-fs-h6, 1rem);
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ——— Paragraphs ——— */
.cg-prose p, .prose-lg p, .prose-ink p {
	margin: 0;
	color: var(--cg-ink-soft);
	line-height: var(--cg-lh-relaxed);
}
.prose-lg p { font-size: var(--cg-fs-body-l); }

/* ——— Links ——— */
.cg-prose a, .prose-lg a, .prose-ink a {
	color: var(--cg-primary-600);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--cg-primary-200);
	transition: color .18s ease, border-color .18s ease;
}
.cg-prose a:hover, .prose-lg a:hover, .prose-ink a:hover {
	color: var(--cg-primary-700);
	border-color: var(--cg-primary-600);
}

/* ——— Strong / Em / Del ——— */
.cg-prose strong, .prose-lg strong, .prose-ink strong { color: var(--cg-ink-strong); font-weight: 700; }
.cg-prose em,     .prose-lg em,     .prose-ink em     { color: var(--cg-ink-strong); }
.cg-prose del,    .prose-lg del,    .prose-ink del    { color: var(--cg-ink-muted); }

/* ——— Lists (ul / ol) ——— */
.cg-prose ul, .prose-lg ul, .prose-ink ul {
	list-style: disc;
	padding-left: 1.6rem;
	color: var(--cg-ink-soft);
}
.cg-prose ol, .prose-lg ol, .prose-ink ol {
	list-style: decimal;
	padding-left: 1.6rem;
	color: var(--cg-ink-soft);
}
.cg-prose li, .prose-lg li, .prose-ink li {
	margin-top: var(--cg-s-2);
	padding-left: .2rem;
}
.cg-prose li::marker, .prose-lg li::marker, .prose-ink li::marker {
	color: var(--cg-primary-500);
}
.cg-prose li + li, .prose-lg li + li, .prose-ink li + li { margin-top: var(--cg-s-2); }

/* Nested lists */
.cg-prose ul ul, .cg-prose ul ol, .cg-prose ol ul, .cg-prose ol ol,
.prose-lg ul ul, .prose-lg ul ol, .prose-lg ol ul, .prose-lg ol ol,
.prose-ink ul ul, .prose-ink ul ol, .prose-ink ol ul, .prose-ink ol ol {
	margin-top: var(--cg-s-3);
}

/* ——— Blockquote ——— */
.cg-prose blockquote, .prose-lg blockquote, .prose-ink blockquote {
	position: relative;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var(--cg-primary-500);
	border-radius: 0 var(--cg-r-2xl) var(--cg-r-2xl) 0;
	background: linear-gradient(90deg, rgba(56,178,150,0.08), transparent 90%);
	font-family: var(--cg-font-display);
	font-size: 1.1rem;
	color: var(--cg-ink-strong);
	font-style: italic;
	line-height: 1.55;
	margin: var(--cg-s-8) 0;
}
.cg-prose blockquote::before, .prose-lg blockquote::before, .prose-ink blockquote::before {
	content: "\201C";
	position: absolute;
	top: .15rem;
	left: .6rem;
	font-family: Georgia, serif;
	font-size: 3.2rem;
	color: var(--cg-primary-400);
	line-height: 1;
	opacity: .6;
	pointer-events: none;
}
.cg-prose blockquote cite, .prose-lg blockquote cite, .prose-ink blockquote cite {
	display: block;
	margin-top: .8rem;
	font-family: var(--cg-font-body);
	font-style: normal;
	font-size: .85rem;
	color: var(--cg-ink-muted);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* ——— Code / Inline code / Pre ——— */
.cg-prose code, .prose-lg code, .prose-ink code,
.cg-prose kbd,  .prose-lg kbd,  .prose-ink kbd,
.cg-prose samp, .prose-lg samp, .prose-ink samp {
	font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: .9em;
	color: var(--cg-primary-700);
	background: var(--cg-primary-50);
	padding: .18em .5em;
	border-radius: .4rem;
	border: 1px solid var(--cg-primary-100);
	font-weight: 600;
}
.cg-prose pre, .prose-lg pre, .prose-ink pre {
	background: linear-gradient(135deg, #0E3B36 0%, #123A32 100%);
	color: #E8F3EF;
	padding: 1.5rem 1.75rem;
	border-radius: var(--cg-r-2xl);
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
	font-size: .9rem;
	line-height: 1.65;
	box-shadow: inset 0 0 0 1px rgba(56,178,150,0.15);
}
.cg-prose pre code, .prose-lg pre code, .prose-ink pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 500;
}

/* ——— Horizontal Rule / Separator ——— */
.cg-prose hr, .prose-lg hr, .prose-ink hr {
	height: 1px;
	border: 0;
	background: var(--cg-ink-divider);
	margin: var(--cg-s-10) 0;
}
.cg-prose hr.wp-block-separator, .prose-lg hr.wp-block-separator, .prose-ink hr.wp-block-separator {
	max-width: 120px;
	margin-left: auto;
	margin-right: auto;
	background: var(--cg-primary-300);
	height: 3px;
	border-radius: 3px;
}

/* ——— Images + Captions ——— */
.cg-prose img, .prose-lg img, .prose-ink img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cg-r-2xl);
	border: 1px solid var(--cg-ink-border);
	box-shadow: var(--cg-shadow-card);
}
.cg-prose figure, .prose-lg figure, .prose-ink figure {
	margin: var(--cg-s-8) 0;
}
.cg-prose figcaption, .prose-lg figcaption, .prose-ink figcaption,
.cg-prose .wp-caption-text, .prose-lg .wp-caption-text, .prose-ink .wp-caption-text {
	text-align: center;
	font-size: .85rem;
	color: var(--cg-ink-muted);
	margin-top: var(--cg-s-3);
	font-style: italic;
}
.cg-prose a img, .prose-lg a img, .prose-ink a img {
	border: 1px solid var(--cg-primary-200);
}
.cg-prose a:hover img, .prose-lg a:hover img, .prose-ink a:hover img {
	border-color: var(--cg-primary-500);
	box-shadow: var(--cg-shadow-glow);
}

/* ——— Tables ——— */
.cg-prose table, .prose-lg table, .prose-ink table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-2xl);
	overflow: hidden;
	font-size: .95rem;
	margin: var(--cg-s-8) 0;
}
.cg-prose thead th, .prose-lg thead th, .prose-ink thead th {
	background: linear-gradient(90deg, var(--cg-primary-50), var(--cg-primary-100));
	color: var(--cg-ink-strong);
	font-family: var(--cg-font-display);
	font-weight: 700;
	padding: .9rem 1.1rem;
	text-align: left;
	border-bottom: 2px solid var(--cg-primary-300);
}
.cg-prose tbody td, .prose-lg tbody td, .prose-ink tbody td {
	padding: .8rem 1.1rem;
	color: var(--cg-ink-soft);
	border-top: 1px solid var(--cg-ink-border);
	background: var(--cg-surface);
}
.cg-prose tbody tr:nth-child(even) td,
.prose-lg tbody tr:nth-child(even) td,
.prose-ink tbody tr:nth-child(even) td {
	background: var(--cg-surface-alt, #FAFDFC);
}

/* ——— Superscript / Subscript (don't break line-height) ——— */
.cg-prose sup, .prose-lg sup, .prose-ink sup,
.cg-prose sub, .prose-lg sub, .prose-ink sub {
	font-size: .75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
.cg-prose sup, .prose-lg sup, .prose-ink sup { top: -0.4em; }
.cg-prose sub, .prose-lg sub, .prose-ink sub { bottom: -0.25em; }

/* ——— Address ——— */
.cg-prose address, .prose-lg address, .prose-ink address {
	font-style: normal;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--cg-secondary-400);
	background: var(--cg-secondary-50);
	color: var(--cg-ink-strong);
	border-radius: 0 var(--cg-r-2xl) var(--cg-r-2xl) 0;
	font-size: .95rem;
	line-height: 1.7;
}

/* ——— Details / Summary (Accordion-like) ——— */
.cg-prose details, .prose-lg details, .prose-ink details {
	padding: 1rem 1.25rem;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-2xl);
	background: var(--cg-surface);
}
.cg-prose summary, .prose-lg summary, .prose-ink summary {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	cursor: pointer;
	list-style: none;
}
.cg-prose summary::-webkit-details-marker,
.prose-lg summary::-webkit-details-marker,
.prose-ink summary::-webkit-details-marker { display: none; }

/* ========================================================================
   NATIVE GUTENBERG BLOCKS — wp-block-* visual polish
   These only fire inside a .cg-prose wrapper (page.php / single.php).
   Locked CharityGlow patterns (cg-pattern-root) are EXCLUDED on purpose
   so the pattern's own inline/utility classes are not overridden.
   ======================================================================== */

/* Pullquote */
.cg-prose .wp-block-pullquote,
.prose-lg .wp-block-pullquote {
	border: 0;
	padding: 2rem 2.25rem;
	text-align: center;
	border-radius: var(--cg-r-3xl);
	background:
		radial-gradient(ellipse at top left, rgba(56,178,150,0.15), transparent 50%),
		linear-gradient(135deg, #F2F7F5 0%, #FFFFFF 100%);
	box-shadow: inset 0 0 0 1px var(--cg-primary-100);
}
.cg-prose .wp-block-pullquote blockquote,
.prose-lg .wp-block-pullquote blockquote {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 1.35rem;
}
.cg-prose .wp-block-pullquote cite,
.prose-lg .wp-block-pullquote cite {
	margin-top: 1rem;
	color: var(--cg-primary-700);
}

/* Buttons block inline with design system */
.cg-prose .wp-block-buttons, .prose-lg .wp-block-buttons {
	margin-top: var(--cg-s-6) !important;
	gap: var(--cg-s-3);
}
.cg-prose .wp-block-button__link,
.prose-lg .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--cg-font-display);
	font-weight: 700;
	border-radius: var(--cg-r-full);
	padding: .75rem 1.35rem;
	line-height: 1.15;
	border: 1px solid var(--cg-primary-600);
	background: var(--cg-primary-600);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--cg-shadow-soft);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cg-prose .wp-block-button__link:hover,
.prose-lg .wp-block-button__link:hover {
	background: var(--cg-primary-700);
	border-color: var(--cg-primary-700);
	transform: translateY(-1px);
	box-shadow: var(--cg-shadow-glow);
}
.cg-prose .is-style-outline .wp-block-button__link,
.prose-lg .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cg-primary-700);
	border-color: var(--cg-primary-300);
}
.cg-prose .is-style-outline .wp-block-button__link:hover,
.prose-lg .is-style-outline .wp-block-button__link:hover {
	background: var(--cg-primary-50);
	border-color: var(--cg-primary-500);
	box-shadow: var(--cg-shadow-soft);
	transform: none;
}

/* Gallery + Cover */
.cg-prose .wp-block-gallery, .prose-lg .wp-block-gallery { gap: var(--cg-s-3); }
.cg-prose .wp-block-cover,   .prose-lg .wp-block-cover {
	border-radius: var(--cg-r-3xl);
	overflow: hidden;
	border: 1px solid var(--cg-ink-border);
	box-shadow: var(--cg-shadow-card);
}
.cg-prose .wp-block-cover h1,
.cg-prose .wp-block-cover h2,
.cg-prose .wp-block-cover h3,
.prose-lg .wp-block-cover h1,
.prose-lg .wp-block-cover h2,
.prose-lg .wp-block-cover h3 { color: #fff; }

/* Group + Columns polish inside prose */
.cg-prose .wp-block-columns, .prose-lg .wp-block-columns { gap: var(--cg-s-6); }
.cg-prose .wp-block-group,   .prose-lg .wp-block-group   {
	padding: 0;
}

/* ——— Alignments (alignwide / alignfull inside prose wrapper) ——— */
.cg-prose .alignwide, .prose-lg .alignwide {
	max-width: 120%;
	margin-left: -10%;
	margin-right: -10%;
}
.cg-prose .alignfull, .prose-lg .alignfull {
	max-width: none;
	width: calc(100% + 3rem);
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}
@media (max-width: 640px) {
	.cg-prose .alignwide, .prose-lg .alignwide,
	.cg-prose .alignfull, .prose-lg .alignfull {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

/* ========================================================================
   FULL-WIDTH TEMPLATE: remove default cg-section verticals that would
   double-stack against pattern section padding on pages that use
   page-fullwidth.php + pattern-only content (homepage, landing, etc.)
   ======================================================================== */
.cg-template-fullwidth .cg-main-fullwidth > .cg-page-fullwidth > .cg-section:first-child {
	padding-top: 0;
}
.cg-template-fullwidth .cg-main-fullwidth .cg-pattern-root {
	display: block;
}
/* Ensure no prose margin-rhythm leaks into locked-pattern-only content.
   page-fullwidth.php deliberately does not apply .cg-prose class, so
   locked patterns render 1:1. This defensive guard just in case. */
.cg-template-fullwidth .cg-pattern-root :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,pre,figure,table,hr) {
	margin-top: revert;
}
.cg-template-fullwidth .cg-main-fullwidth {
	overflow-x: clip;
}

/* ========================================================================
   §29 SIDEBAR WIDGETS — Professional FinTech/SaaS polish for all
   WordPress core widgets on Primary Sidebar.
   Each widget is already wrapped by register_sidebar() as:
   <section class="cg-card cg-card-pad widget mb-6 ...">
   so all card visual (border, shadow, radius, padding) is inherited.
   This section only handles title iconography, list structure,
   count badges, hover micro-interactions, and per-widget specifics.
   ======================================================================== */

/* ---------- Widget title (eyebrow + icon convention) ---------- */
.widget > .widget-title {
	position: relative;
	padding-bottom: 0.9rem;
	margin-bottom: 1.25rem !important;
	border-bottom: 1px solid var(--cg-ink-divider);
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--cg-ink-strong);
	letter-spacing: -0.005em;
}
/* Small eyebrow-bar accent under the title (Emerald left, Gold right) */
.widget > .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 48px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cg-primary-500) 0%, var(--cg-secondary-500) 100%);
}
/* Icon prefix for title if we have :before content (enabled per widget below) */
.widget > .widget-title.cg-wt-icon::before {
	content: "";
	display: inline-block;
	width: 1.02rem;
	height: 1.02rem;
	margin-right: 0.45rem;
	vertical-align: -2px;
	background: var(--cg-primary-500);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- Base list reset for ALL ul/ol widgets ---------- */
.widget ul,
.widget ol {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.widget li {
	padding: 0.65rem 0;
	margin: 0;
	border-bottom: 1px dashed var(--cg-ink-divider);
	line-height: 1.45;
}
.widget li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.widget li a {
	color: var(--cg-ink-strong);
	font-weight: 500;
	text-decoration: none;
	transition: color 160ms ease, padding-left 160ms ease;
	display: inline-flex;
	align-items: flex-start;
	gap: 0.35rem;
	width: 100%;
}
.widget li a::before {
	content: "";
	flex-shrink: 0;
	margin-top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cg-primary-300);
	transition: background 160ms ease, transform 160ms ease;
}
.widget li a:hover {
	color: var(--cg-primary-600);
	padding-left: 0.15rem;
}
.widget li a:hover::before {
	background: var(--cg-secondary-500);
	transform: translateX(2px);
}
/* Current item (categories / archives active category if query var matches) */
.widget li.current-cat > a,
.widget li.current_page_item > a,
.widget li.current-menu-item > a {
	color: var(--cg-primary-700);
	font-weight: 700;
}
.widget li.current-cat > a::before,
.widget li.current_page_item > a::before,
.widget li.current-menu-item > a::before {
	background: var(--cg-primary-600);
	box-shadow: 0 0 0 3px rgba(22, 100, 90, 0.12);
}

/* ---------- Post count badges (Archives / Categories / Pages with count) ---------- */
.widget_archive li .post-count,
.widget_categories li .post-count,
.widget_pages li .post-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.8rem;
	height: 1.35rem;
	padding: 0 0.45rem;
	margin-left: auto;
	border-radius: 999px;
	background: var(--cg-primary-50);
	color: var(--cg-primary-600);
	font-size: 0.72rem;
	font-weight: 700;
	font-family: var(--cg-font-display);
	letter-spacing: 0.01em;
	flex-shrink: 0;
}
/* Flexify list items so badge is at right edge */
.widget_archive li,
.widget_categories li,
.widget_pages li {
	display: flex;
	align-items: center;
}
.widget_archive li > a,
.widget_categories li > a,
.widget_pages li > a {
	width: auto;
	flex: 1;
}

/* ---------- Widget: SEARCH (uses searchform.php template) ---------- */
/* CRITICAL FIX:
  Previously this had padding:0 + overflow:hidden. Padding:0 removed the card's padding
  so search box BREATHING room (left/right touching walls). Overflow:hidden clipped ANY
  content taller than 52px (bottom part of label+form together). Fix both: */
.widget_search {
	padding: 0.9rem 1rem !important;   /* 1rem L/R space → no wall touch */
	overflow: visible !important;   /* NO content clip */
}
/* Remove card padding because searchform.php already has own 56px tall wrapper.
   Keep top/bottom internal spacing via padding on its own wrapper. */
.widget_search .search-form {
	margin: 0;
	padding: 0;
}
/* If sidebar search is rendered WITHOUT our template (fallback) style the plain form too */
.widget_search form[role="search"]:not(.search-form),
.widget_search > form:not([class]) {
	display: flex;
	/* FIX: align-items center so input+button stop stretching & caret lands middle */
	align-items: center;
	justify-content: space-between;
	/* FIX #1: user suggestion (height ~100px — we give 64px min (enough for label + input; no fixed) */
	min-height: 64px;
	height: auto;
	/* margin: 0.25rem 0 0 0;  /* tiny top standoff; use outer padding instead of inner for horizontal */
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-2xl);
	background: var(--cg-surface);
	overflow: hidden;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.widget_search form[role="search"]:not(.search-form):focus-within,
.widget_search > form:not([class]):focus-within {
	border-color: var(--cg-secondary-500);
	box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12);
}
.widget_search form[role="search"]:not(.search-form) label,
.widget_search > form:not([class]) label {
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0;
}
.widget_search form[role="search"]:not(.search-form) .screen-reader-text,
.widget_search > form:not([class]) .screen-reader-text {
	display: none;
}
.widget_search form[role="search"]:not(.search-form) input[type="search"],
.widget_search > form:not([class]) input[type="search"] {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	/* SAME vertical center technique: height:auto, balanced top/bottom pad, line-height=1 */
	width: 1% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 1.25rem 1rem 1.25rem 1.05rem !important;
	margin: 0 0 0 0.7rem !important;
	line-height: 1 !important;
	color: var(--cg-ink-strong);
	font-family: var(--cg-font-body);
	font-size: 0.95rem;
	-webkit-appearance: none;
	appearance: none;
}
.widget_search form[role="search"]:not(.search-form) input[type="search"]::placeholder {
	color: var(--cg-ink-muted);
	line-height: 1;
}
.widget_search form[role="search"]:not(.search-form) input[type="submit"],
.widget_search > form:not([class]) input[type="submit"] {
	/* Since parent align-items:center, submit no longer stretches; so give it fixed 56px tall box */
	min-width: 56px !important;
	width: auto !important;
	height: 56px !important;
	margin: 0 4px 0 0 !important;  /* small right breathing inside wrapper */
	padding: 0 1rem 0 1rem;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	border-radius: calc(var(--cg-r-2xl) - 4px) !important;
	border: 1px solid rgba(245, 166, 35, 0.4);
	background: linear-gradient(180deg, #FFD98A 0%, #FDBA3B 50%, #F5A623 100%);
	color: #17332C;
	font-family: var(--cg-font-display);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: transform 160ms ease, filter 160ms ease;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 10px 28px -14px rgba(245, 166, 35, 0.6) !important;
}
.widget_search form[role="search"]:not(.search-form) input[type="submit"]:hover,
.widget_search > form:not([class]) input[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.05) saturate(1.05);
}

/* ---------- Widget: SEARCH (Gutenberg wp-block-search block inside sidebar)
   WordPress Gutenberg Search widget outputs distinct markup — THREE layers we must hard-override:
   Layer 1 (block container): <div class="wp-block-search [is-layout-flex]">  ← WP's flex layout breaks label positioning
   Layer 2 (label):           <label class="wp-block-search__label">Search</label>  ← Must be ABOVE the form, NOT inside flex row
   Layer 3 (form wrapper):    <form class="wp-block-search__inside-wrapper">
                                <input class="wp-block-search__input" ...>
                                <button type="reset" ...>❌</button>               ← WP's Clear button - HIDE entirely
                                <button type="submit" class="wp-block-search__button ...">Search</button>
   We OVERRIDE ALL LAYOUTS because Gutenberg applies:
     - `is-layout-flex` on the container (renders label+form on same row)
     - random border styles / rounded corners via theme.json or block styles
   Goal: Label ON TOP (standalone line, own styling), then 52px tall wrapper = input + icon-only gold button.
   ---------- */

/* ==============================
   LAYER 1: Outer .wp-block-search
   ============================== */
/* Force BLOCK layout (NOT flex). This single line fixes the "label is inside input row" bug. */
.widget .wp-block-search,
.widget .wp-block-search.is-layout-flex,
.widget .wp-block-search:where(.is-layout-flex),
.widget div.wp-block-search {
	display: block !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	align-items: unset !important;
	gap: 0 !important;
	/* More HORIZONTAL + vertical padding so label+form DO NOT touch left/right card walls */
	padding: 0.9rem 1rem 0.95rem 1rem !important;
	margin: 0 !important;
	/* Wipe any accidental block styles (borders, radii, backgrounds on container) */
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
/* Some WP versions add a 2nd wrapping div: <div class="wp-block-search__button-inside">..</div> */
.widget .wp-block-search__button-inside,
.widget .wp-block-search__button-outside {
	display: block !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

/* ==============================
   LAYER 2: LABEL — standalone line ABOVE form, no border, no background
   ============================== */
.widget .wp-block-search__label {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	/* TEXT POSITIONING FIX: left padding so it does NOT touch the card wall */
	padding: 0.2rem 0.75rem 0.45rem 0.85rem !important;
	margin: 0 0 0.15rem 0 !important;
	color: var(--cg-ink-strong);
	font-family: var(--cg-font-display) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	text-align: left !important;
	/* Wipe any accidental block editor-added label borders/radii */
	border: none !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px dashed var(--cg-ink-divider) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.widget .wp-block-search__label::before {
	content: "";
	display: inline-block;
	width: 0.82rem;
	height: 0.82rem;
	vertical-align: -2px;
	margin-right: 0.4rem;
	background: var(--cg-primary-500);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
/* In some patterns, WP creates label > input sibling as flex. Nuke. */
.widget .wp-block-search__label + * {
	margin-top: 0.35rem;
}

/* ==============================
   LAYER 3: FORM (inside-wrapper) — flexible min-height row
   ============================== */
.widget form.wp-block-search__inside-wrapper,
.widget .wp-block-search__inside-wrapper,
.widget form.wp-block-search__inside-wrapper.is-layout-flex {
	display: flex !important;
	/* ROOT CAUSE of caret-at-top: was align-items: stretch which FORCES child
	   elements (input, button) to fill the full 64px wrapper height. Since native
	   <input> replaced elements cannot flex-center their own text internally, the
	   single line of text just sits at the TOP of the stretched box.
	   FIX: align-items:center — children keep their intrinsic height, centered. */
	align-items: center !important;
	justify-content: space-between !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	/* FIX: removed strict height:52px / max-height:52px (cuts off bottom if label tall).
	   Now flexible min-height 64px so it never clips. */
	height: auto !important;
	min-height: 64px !important;
	max-height: none !important;
	border: 1px solid var(--cg-ink-border) !important;
	border-radius: var(--cg-r-2xl) !important;
	background: var(--cg-surface) !important;
	overflow: hidden !important;
	transition: border-color 180ms ease, box-shadow 180ms ease !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.widget .wp-block-search__inside-wrapper:focus-within,
.widget form.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--cg-secondary-500) !important;
	box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12) !important;
}
/* Wipe any WP pseudo-elements inside wrapper (search icon SVG, WP puts ::before on some versions) */
.widget .wp-block-search__inside-wrapper::before,
.widget .wp-block-search__inside-wrapper::after {
	display: none !important;
	content: none !important;
}

/* ==============================
   INPUT — Vertically centered text caret
   ============================== */
.widget .wp-block-search__input,
.widget input.wp-block-search__input {
	flex: 1 1 auto !important;
	width: 1% !important;      /* flex 1% trick to respect flex:1 */
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 0 0 0.7rem !important;
	/* ROOT FIX 2: height:auto + BALANCED top/bottom padding (EQUAL values).
	   Native <input> text caret lines up perfectly in the MIDDLE of
	   padding-top == padding-bottom + line-height equals font size. */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	/* VERTICAL CENTER: padding-top === padding-bottom = 18px each.
	   (wrapper min-height 64px → 64 - 8 (border top/bottom visually) = 56px
	   → 56px / 2 = 28px; but we let the wrapper align center, so just need
	   padding top==bottom so single-line caret is centered inside its own box.
	   Use 1.25rem (20px) top & bottom → text has breathing room. */
	padding: 1.25rem 1rem 1.25rem 1.05rem !important;
	/* line-height = 1 so text glyph sits on baseline w/o leading;
	   with equal top/bottom padding the caret ends up EXACTLY middle. */
	line-height: 1 !important;
	/* CRITICAL WIPE: remove any default borders, radii, shadows that create
	   the "onion nested rounded corners" look in your screenshot */
	border: none !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--cg-ink-strong) !important;
	font-family: var(--cg-font-body) !important;
	font-size: 0.95rem !important;
	vertical-align: middle !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.widget .wp-block-search__input::placeholder {
	color: var(--cg-ink-muted) !important;
	opacity: 1 !important;
	/* placeholder also vertically centered */
	line-height: 1 !important;
}

/* ==============================
   HIDDEN: WP Reset button ("❌" X icon that appeared between input + submit)
   ============================== */
.widget .wp-block-search__button[type="reset"],
.widget form.wp-block-search__inside-wrapper button[type="reset"],
.widget .wp-block-search button[type="reset"],
.widget .wp-block-search__reset,
.widget .wp-block-search__clear {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* ==============================
   SUBMIT BUTTON — Icon-only, flexible tall, Gold gradient, no text visible
   ============================== */
.widget .wp-block-search__button[type="submit"],
.widget .wp-block-search__button,
.widget button.wp-block-search__button,
.widget form.wp-block-search__inside-wrapper .wp-block-search__button {
	position: relative;
	flex: 0 0 auto !important;
	order: 999 !important;            /* always last in the flex row */
	width: 56px !important;           /* +4px extra breathing */
	min-width: 56px !important;
	max-width: 56px !important;
	/* FIX for align-items:center wrapper: Previously calc(100%-8px) relied on
	   stretch (parent align-items:stretch). Now wrapper uses align-items:center so
	   child height is intrinsic. Hence use EXPLICIT fixed 56px square box. */
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	margin: 4px 4px 4px 0 !important;  /* 4px uniform margin (was 3px) */
	padding: 0 !important;
	border-radius: calc(var(--cg-r-2xl) - 4px) !important;
	border: 1px solid rgba(245, 166, 35, 0.4) !important;
	background: linear-gradient(180deg, #FFD98A 0%, #FDBA3B 50%, #F5A623 100%) !important;
	background-image: linear-gradient(180deg, #FFD98A 0%, #FDBA3B 50%, #F5A623 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 10px 28px -14px rgba(245, 166, 35, 0.65) !important;
	cursor: pointer !important;
	transition: transform 160ms ease, filter 160ms ease !important;
	overflow: visible !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* a11y hide "Search" TEXT but keep for screen readers — solves cut-off text bug */
	color: transparent !important;
	text-indent: 100% !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	/* Wipe any block-level borders */
	border-top: 1px solid rgba(255, 217, 138, 0.6) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid rgba(245, 166, 35, 0.55) !important;
	text-shadow: none !important;
}
.widget .wp-block-search__button:hover,
.widget button.wp-block-search__button:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.05) saturate(1.05) !important;
}
.widget .wp-block-search__button:active,
.widget button.wp-block-search__button:active {
	transform: translateY(0) !important;
}
/* Inject SVG search icon — CENTERED absolute + mask layer over ink-strong fill */
.widget .wp-block-search__button[type="submit"]::before,
.widget .wp-block-search__button::before,
.widget button.wp-block-search__button::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: auto !important;
	width: 19px !important;
	height: 19px !important;
	display: block !important;
	background: #17332C !important;
	background-color: #17332C !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") !important;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
	-webkit-mask-size: 19px 19px !important;
	mask-size: 19px 19px !important;
	/* Cancel any a11y indent so icon renders */
	text-indent: 0 !important;
	color: #17332C !important;
	line-height: 1 !important;
	font-size: 19px !important;
	text-align: center !important;
}
/* Nuke any inner spans, svg, text nodes that WP renders inside the button */
.widget .wp-block-search__button > *,
.widget .wp-block-search__button span,
.widget .wp-block-search__button svg,
.widget .wp-block-search__button strong,
.widget .wp-block-search__button em {
	display: none !important;
	visibility: hidden !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: 0 !important;
}

/* Some Gutenberg variations put the label INSIDE the form wrapper.
   If so — extract it to top via block layout + full width + standoff. */
.widget .wp-block-search__inside-wrapper .wp-block-search__label {
	position: static !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	order: -999 !important;
	margin: 0 0 0.5rem 0 !important;
}

/* ==============================
   searchform.php template: .cg-search-input (used in sidebar widgets AND hero search)
   Fix the SAME caret vertical center issue: same 2-part fix as above
   (outer wrapper already uses align-items:center, so the input just needs
   balanced top/bottom padding + height auto + line-height 1.)
   ============================== */
.cg-search-form .cg-search-input,
.widget .cg-search-form .cg-search-input,
.widget_search .cg-search-input {
	/* Same core vertical centering */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	/* Balanced 1.25rem (20px) top & bottom padding — padding left/right small 0 */
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	line-height: 1 !important;
	/* Neutralize any browser defaults */
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	vertical-align: middle !important;
}
.cg-search-form .cg-search-input::placeholder {
	line-height: 1 !important;
}
/* Also ensure outer wrapper in sidebar widget context has proper breathing */
.widget .cg-search-form {
	margin: 0.15rem 0 0 0;
}

/* ---------- Widget: RECENT POSTS (.widget_recent_entries) ---------- */
.widget_recent_entries li {
	display: block;
}
.widget_recent_entries li > a {
	width: 100%;
	gap: 0.55rem;
}
.widget_recent_entries li > a::before {
	/* Replace generic dot with chevron */
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-top: 0.3rem;
	background: var(--cg-primary-50);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316645A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316645A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
	-webkit-mask-size: 75%;
	mask-size: 75%;
}
.widget_recent_entries li .post-date {
	display: block;
	margin: 0.35rem 0 0 1.2rem;
	color: var(--cg-ink-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Widget: RECENT COMMENTS (.widget_recent_comments) ---------- */
.widget_recent_comments li.recentcomments {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.8rem 0;
}
.widget_recent_comments li.recentcomments:first-child {
	padding-top: 0;
}
.widget_recent_comments li.recentcomments:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.widget_recent_comments li.recentcomments .avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--cg-ink-border);
	background: linear-gradient(135deg, var(--cg-primary-500) 0%, var(--cg-primary-400) 60%, var(--cg-secondary-500) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-family: var(--cg-font-display);
	font-weight: 800;
	font-size: 0.85rem;
	object-fit: cover;
	box-shadow: 0 2px 6px rgba(22, 100, 90, 0.12);
}
.widget_recent_comments li.recentcomments > a:first-of-type {
	width: 36px !important;
	height: 36px !important;
	flex-shrink: 0;
	flex: 0 0 36px !important;
	margin: 0;
	padding: 0 !important;
	align-self: flex-start;
}
.widget_recent_comments li.recentcomments > a:first-of-type::before {
	display: none;
}
.widget_recent_comments li.recentcomments .comment_text_wrapper {
	flex: 1;
	min-width: 0;
}
/* Recent comments default markup is a single <li> containing mixed content:
   "Author on <a>Post Title</a><br><span>comment excerpt</span>"
   We target the <a> for post title, <br>+span for comment body. */
.widget_recent_comments li.recentcomments a:not(:first-of-type) {
	display: inline;
	color: var(--cg-ink-strong);
	font-weight: 700;
	font-family: var(--cg-font-display);
	font-size: 0.9rem;
	width: auto;
	padding: 0 !important;
	gap: 0;
}
.widget_recent_comments li.recentcomments a:not(:first-of-type)::before {
	display: none;
}
.widget_recent_comments li.recentcomments a:not(:first-of-type):hover {
	color: var(--cg-primary-600);
}
/* If a standalone URL wrapper wraps the commenter name itself: */
.widget_recent_comments li.recentcomments .comment-author-link {
	color: var(--cg-primary-700);
	font-weight: 700;
	font-size: 0.82rem;
}
/* Comment excerpt block (in older WP: a <span class="comment-excerpt"> or just text) */
.widget_recent_comments li.recentcomments .comment-excerpt,
.widget_recent_comments li.recentcomments span:not([class]) {
	display: block;
	margin-top: 0.25rem;
	color: var(--cg-ink-soft);
	font-size: 0.82rem;
	line-height: 1.5;
}
/* "Post author on" text fragment styling */
.widget_recent_comments li.recentcomments {
	font-size: 0.82rem;
	color: var(--cg-ink-muted);
}

/* ---------- Widget: CATEGORIES (.widget_categories) ---------- */
.widget_categories li.current-cat > .post-count {
	background: var(--cg-primary-600);
	color: #FFFFFF;
}

/* ---------- Widget: TAG CLOUD (.widget_tag_cloud) ---------- */
.widget_tag_cloud .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.widget_tag_cloud .tagcloud a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--cg-primary-50);
	border: 1px solid var(--cg-primary-100);
	color: var(--cg-ink-strong);
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-decoration: none;
	transition: all 160ms ease;
	line-height: 1.2;
}
.widget_tag_cloud .tagcloud a:hover {
	background: linear-gradient(180deg, #FFD98A 0%, #FDBA3B 50%, #F5A623 100%);
	border-color: rgba(245, 166, 35, 0.4);
	color: #17332C;
	box-shadow: var(--cg-shadow-card);
	transform: translateY(-1px);
}

/* ---------- Widget: PAGES / META / CUSTOM MENU ---------- */
.widget_pages li,
.widget_meta li,
.widget_nav_menu li {
	display: flex;
	align-items: center;
}
.widget_pages li > a,
.widget_meta li > a,
.widget_nav_menu li > a {
	width: auto;
	flex: 1;
}

/* ---------- Widget: CALENDAR (.widget_calendar) ---------- */
.widget_calendar #calendar_wrap {
	overflow-x: auto;
}
.widget_calendar table#wp-calendar {
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	font-size: 0.82rem;
}
.widget_calendar table#wp-calendar caption {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: 0.95rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.25rem;
}
.widget_calendar table#wp-calendar thead th {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-muted);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.3rem 0;
}
.widget_calendar table#wp-calendar tbody td {
	text-align: center;
	padding: 0;
	height: 2.1rem;
	border-radius: 10px;
	transition: background 140ms ease, color 140ms ease;
}
.widget_calendar table#wp-calendar tbody td a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	border-radius: 10px;
	color: var(--cg-primary-700);
	font-weight: 700;
	background: var(--cg-primary-50);
	text-decoration: none;
}
.widget_calendar table#wp-calendar tbody td a:hover {
	background: var(--cg-primary-100);
	color: var(--cg-primary-700);
}
.widget_calendar table#wp-calendar tbody td#today {
	background: linear-gradient(180deg, #FFD98A 0%, #F5A623 100%);
	color: #17332C;
	font-weight: 800;
	box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}
.widget_calendar #calendar_wrap tfoot {
	display: none; /* Prev/Next links below cal — hide (we use #prev/#next in caption instead) */
}
.widget_calendar #wp-calendar #prev a,
.widget_calendar #wp-calendar #next a {
	color: var(--cg-ink-muted);
	font-weight: 600;
	text-decoration: none;
	transition: color 140ms ease;
}
.widget_calendar #wp-calendar #prev a:hover,
.widget_calendar #wp-calendar #next a:hover {
	color: var(--cg-primary-600);
}

/* ---------- Widget: TEXT / HTML / CUSTOM HTML (.widget_text) ---------- */
.widget_text {
	color: var(--cg-ink-soft);
	font-size: 0.9rem;
	line-height: 1.6;
}
.widget_text p {
	margin: 0.6rem 0;
}
.widget_text p:first-child { margin-top: 0; }
.widget_text p:last-child  { margin-bottom: 0; }

/* ---------- Widget: RSS (.widget_rss) ---------- */
.widget_rss li {
	padding: 0.8rem 0 !important;
}
.widget_rss li a.rsswidget {
	font-family: var(--cg-font-display);
	font-weight: 700;
	color: var(--cg-ink-strong);
	font-size: 0.92rem;
	display: block;
	margin-bottom: 0.3rem;
}
.widget_rss li a.rsswidget:hover {
	color: var(--cg-primary-600);
}
.widget_rss li .rss-date {
	display: block;
	font-size: 0.7rem;
	color: var(--cg-ink-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0.25rem 0 0.4rem;
}
.widget_rss li .rss-summary {
	color: var(--cg-ink-soft);
	font-size: 0.85rem;
	line-height: 1.55;
	margin-top: 0.25rem;
}

/* ---------- Widget: Dropdown SELECT (<select>) for Archives / Categories ---------- */
.widget_archive > select,
.widget_categories > select {
	width: 100%;
	height: 46px;
	padding: 0 2.5rem 0 1rem;
	border: 1px solid var(--cg-ink-border);
	border-radius: var(--cg-r-xl);
	background-color: var(--cg-surface);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316645A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1.1rem;
	-webkit-appearance: none;
	appearance: none;
	color: var(--cg-ink-strong);
	font-family: var(--cg-font-body);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.widget_archive > select:focus,
.widget_categories > select:focus {
	outline: none;
	border-color: var(--cg-secondary-500);
	box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12);
}