/*
 * Perceptions Studio Custom Styles
 * A comprehensive utility framework for GeneratePress
 */

/* ============================================================
 * CSS CUSTOM PROPERTIES (VARIABLES)
 * ============================================================ */

:root {
	/* PS Color System - Semantic color variables */
	--ps-color-primary: #215bc2;
	--ps-color-primary-dark: #1a4a9b;
	--ps-color-primary-light: #d7e2f0;

	--ps-color-secondary: #d13b3b;
	--ps-color-secondary-dark: #a61212;
	--ps-color-secondary-light: #f6d3d3;

	--ps-color-accent: #ebc53b;
	--ps-color-accent-dark: #b4931d;
	--ps-color-accent-light: #f4efcb;

	--ps-white: #ffffff;
	--ps-black: #000000;

	--ps-color-success: #28a745;
	--ps-color-info: #17a2b8;
	--ps-color-warning: #ffc107;
	--ps-color-danger: #dc3545;

	/* Spacing Scale */
	--ps-space-xs: 0.25rem;   /* 4px */
	--ps-space-sm: 0.5rem;    /* 8px */
	--ps-space-md: 1rem;      /* 16px */
	--ps-space-lg: 1.5rem;    /* 24px */
	--ps-space-xl: 2rem;      /* 32px */
	--ps-space-2xl: 3rem;     /* 48px */
	--ps-space-3xl: 4rem;     /* 64px */
	--ps-space-4xl: 5rem;     /* 80px */
	--ps-space-5xl: 6.25rem;  /* 100px */
	--ps-space-6xl: 7.5rem;   /* 120px */

	/* Section-specific spacing */
	--ps-section-h: 1.25rem;  /* 20px - horizontal padding */
	--ps-section-sm: 2.5rem;  /* 40px */

	/* Border Radius Scale */
	--ps-radius-sm: 0.125rem; /* 2px */
	--ps-radius-md: 0.25rem;  /* 4px */
	--ps-radius-lg: 0.5rem;   /* 8px */
	--ps-radius-xl: 1rem;     /* 16px */
	--ps-radius-2xl: 1.5rem;  /* 24px */
	--ps-radius-full: 9999px;

	/* Typography Scale */
	--ps-text-xs: 0.75rem;    /* 12px */
	--ps-text-sm: 0.875rem;   /* 14px */
	--ps-text-base: 1rem;     /* 16px */
	--ps-text-lg: 1.125rem;   /* 18px */
	--ps-text-xl: 1.25rem;    /* 20px */
	--ps-text-2xl: 1.5rem;    /* 24px */
	--ps-text-3xl: 1.875rem;  /* 30px */
	--ps-text-4xl: 2.25rem;   /* 36px */
	--ps-text-5xl: 3rem;      /* 48px */

	/* Line Heights */
	--ps-leading-none: 1;
	--ps-leading-tight: 1.25;
	--ps-leading-snug: 1.375;
	--ps-leading-normal: 1.5;
	--ps-leading-relaxed: 1.625;
	--ps-leading-loose: 2;

	/* Font Weights */
	--ps-font-light: 300;
	--ps-font-normal: 400;
	--ps-font-medium: 500;
	--ps-font-semibold: 600;
	--ps-font-bold: 700;
	--ps-font-extrabold: 800;

	/* Shadows */
	--ps-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--ps-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--ps-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--ps-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--ps-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--ps-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Transitions */
	--ps-transition-fast: 150ms ease-in-out;
	--ps-transition-base: 250ms ease-in-out;
	--ps-transition-slow: 350ms ease-in-out;

	/* Text Width (in ch units for optimal readability) */
	--ps-prose-sm: 45ch;
	--ps-prose-base: 65ch;
	--ps-prose-lg: 75ch;
}

/* ============================================================
 * BACKGROUND COLOR UTILITIES
 * ============================================================ */

.ps-bg-primary { background-color: var(--ps-color-primary) !important; }
.ps-bg-primary-dark { background-color: var(--ps-color-primary-dark) !important; }
.ps-bg-primary-light { background-color: var(--ps-color-primary-light) !important; }

.ps-bg-secondary { background-color: var(--ps-color-secondary) !important; }
.ps-bg-secondary-dark { background-color: var(--ps-color-secondary-dark) !important; }
.ps-bg-secondary-light { background-color: var(--ps-color-secondary-light) !important; }

.ps-bg-accent { background-color: var(--ps-color-accent) !important; }
.ps-bg-accent-dark { background-color: var(--ps-color-accent-dark) !important; }
.ps-bg-accent-light { background-color: var(--ps-color-accent-light) !important; }

.ps-bg-white { background-color: var(--ps-white) !important; }
.ps-bg-black { background-color: var(--ps-black) !important; }

.ps-bg-success { background-color: var(--ps-color-success) !important; }
.ps-bg-info { background-color: var(--ps-color-info) !important; }
.ps-bg-warning { background-color: var(--ps-color-warning) !important; }
.ps-bg-danger { background-color: var(--ps-color-danger) !important; }

.ps-bg-transparent { background-color: transparent !important; }

/* ============================================================
 * TEXT COLOR UTILITIES
 * ============================================================ */

.ps-text-primary { color: var(--ps-color-primary) !important; }
.ps-text-primary-dark { color: var(--ps-color-primary-dark) !important; }
.ps-text-primary-light { color: var(--ps-color-primary-light) !important; }

.ps-text-secondary { color: var(--ps-color-secondary) !important; }
.ps-text-secondary-dark { color: var(--ps-color-secondary-dark) !important; }
.ps-text-secondary-light { color: var(--ps-color-secondary-light) !important; }

.ps-text-accent { color: var(--ps-color-accent) !important; }
.ps-text-accent-dark { color: var(--ps-color-accent-dark) !important; }
.ps-text-accent-light { color: var(--ps-color-accent-light) !important; }

.ps-text-white { color: var(--ps-white) !important; }
.ps-text-black { color: var(--ps-black) !important; }

.ps-text-success { color: var(--ps-color-success) !important; }
.ps-text-info { color: var(--ps-color-info) !important; }
.ps-text-warning { color: var(--ps-color-warning) !important; }
.ps-text-danger { color: var(--ps-color-danger) !important; }

/* ============================================================
 * TYPOGRAPHY UTILITIES
 * ============================================================ */

/* Body Text Sizes */
.ps-body-sm {
	font-size: var(--ps-text-sm);
	line-height: var(--ps-leading-normal);
}

.ps-body-base {
	font-size: var(--ps-text-base);
	line-height: var(--ps-leading-normal);
}

.ps-body-lg {
	font-size: var(--ps-text-lg);
	line-height: var(--ps-leading-relaxed);
}

/* Overline Text */
.ps-overline {
	font-size: var(--ps-text-xs);
	font-weight: var(--ps-font-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: var(--ps-leading-tight);
}

.ps-overline a {
	color: inherit;
	text-decoration: none;
}

.ps-overline a:hover,
.ps-overline a:focus {
	color: var(--accent-2);
	text-decoration: none;
}

/* Text Width Constraints (for optimal readability) */
.ps-prose-sm {
	max-width: var(--ps-prose-sm);
}

.ps-prose,
.ps-prose-base {
	max-width: var(--ps-prose-base);
}

.ps-prose-lg {
	max-width: var(--ps-prose-lg);
}

/* Responsive Heading Styles with Clamp */
.ps-h1 {
	font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	margin-bottom: var(--ps-space-lg);
}

.ps-h2 {
	font-size: clamp(1.75rem, 4vw + 0.75rem, 2.75rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	margin-bottom: var(--ps-space-md);
}

.ps-h3 {
	font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
	line-height: var(--ps-leading-snug);
	font-weight: var(--ps-font-semibold);
	margin-bottom: var(--ps-space-md);
}

.ps-h4 {
	font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
	line-height: var(--ps-leading-snug);
	font-weight: var(--ps-font-semibold);
	margin-bottom: var(--ps-space-sm);
}

.ps-h5 {
	font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
	line-height: var(--ps-leading-normal);
	font-weight: var(--ps-font-medium);
	margin-bottom: var(--ps-space-sm);
}

.ps-h6 {
	font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
	line-height: var(--ps-leading-normal);
	font-weight: var(--ps-font-medium);
	margin-bottom: var(--ps-space-sm);
}

/* Display Headings (Extra Large) */
.ps-display-1 {
	font-size: clamp(3rem, 8vw + 1rem, 6rem);
	line-height: var(--ps-leading-none);
	font-weight: var(--ps-font-extrabold);
	letter-spacing: -0.02em;
}

.ps-display-2 {
	font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
	line-height: var(--ps-leading-none);
	font-weight: var(--ps-font-extrabold);
	letter-spacing: -0.02em;
}

.ps-display-3 {
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	letter-spacing: -0.01em;
}

/* ============================================================
 * UTILITY CLASSES
 * ============================================================ */

/* Border Radius */
.ps-rounded-sm { border-radius: var(--ps-radius-sm); }
.ps-rounded-md { border-radius: var(--ps-radius-md); }
.ps-rounded-lg { border-radius: var(--ps-radius-lg); }
.ps-rounded-xl { border-radius: var(--ps-radius-xl); }
.ps-rounded-2xl { border-radius: var(--ps-radius-2xl); }
.ps-rounded-full { border-radius: var(--ps-radius-full); }
.ps-rounded-none { border-radius: 0; }

/* Shadows */
.ps-shadow-sm { box-shadow: var(--ps-shadow-sm); }
.ps-shadow { box-shadow: var(--ps-shadow); }
.ps-shadow-md { box-shadow: var(--ps-shadow-md); }
.ps-shadow-lg { box-shadow: var(--ps-shadow-lg); }
.ps-shadow-xl { box-shadow: var(--ps-shadow-xl); }
.ps-shadow-2xl { box-shadow: var(--ps-shadow-2xl); }
.ps-shadow-none { box-shadow: none; }

/* Hover Shadows */
.ps-hover-shadow-sm:hover { box-shadow: var(--ps-shadow-sm); }
.ps-hover-shadow:hover { box-shadow: var(--ps-shadow); }
.ps-hover-shadow-md:hover { box-shadow: var(--ps-shadow-md); }
.ps-hover-shadow-lg:hover { box-shadow: var(--ps-shadow-lg); }
.ps-hover-shadow-xl:hover { box-shadow: var(--ps-shadow-xl); }
.ps-hover-shadow-2xl:hover { box-shadow: var(--ps-shadow-2xl); }

/* Transitions */
.ps-transition { transition: all var(--ps-transition-base); }
.ps-transition-fast { transition: all var(--ps-transition-fast); }
.ps-transition-slow { transition: all var(--ps-transition-slow); }

/* Text Alignment */
.ps-text-left { text-align: left; }
.ps-text-center { text-align: center; }
.ps-text-right { text-align: right; }
.ps-text-justify { text-align: justify; }

/* Font Weights */
.ps-font-light { font-weight: var(--ps-font-light); }
.ps-font-normal { font-weight: var(--ps-font-normal); }
.ps-font-medium { font-weight: var(--ps-font-medium); }
.ps-font-semibold { font-weight: var(--ps-font-semibold); }
.ps-font-bold { font-weight: var(--ps-font-bold); }
.ps-font-extrabold { font-weight: var(--ps-font-extrabold); }

/* ============================================================
 * BUTTON UTILITIES
 * ============================================================ */

/* Primary Button */
.ps-button-primary {
	align-items: center;
	background-color: var(--ps-color-primary);
	color: var(--ps-white);
	display: inline-flex;
	text-decoration: none;
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-primary:is(:hover, :focus) {
	background-color: var(--ps-color-primary-dark);
	color: var(--ps-white);
}

/* Secondary Button */
.ps-button-secondary {
	align-items: center;
	background-color: var(--ps-color-secondary);
	color: var(--ps-white);
	display: inline-flex;
	text-decoration: none;
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-secondary:is(:hover, :focus) {
	background-color: var(--ps-color-secondary-dark);
	color: var(--ps-white);
}

/* White Button */
.ps-button-white {
	align-items: center;
	background-color: var(--ps-white);
	color: var(--ps-black);
	display: inline-flex;
	text-decoration: none;
	border: 1px solid var(--ps-black);
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-white:is(:hover, :focus) {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Text-Only Button */
.ps-button-text-only {
	align-items: center;
	color: var(--ps-black);
	display: inline-flex;
	text-decoration: none;
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-text-only:is(:hover, :focus) {
	color: var(--ps-color-primary);
	text-decoration: underline;
}

/* ============================================================
 * PADDING UTILITIES
 * ============================================================ */

/* All Sides Padding */
.ps-p-0 { padding: 0; }
.ps-p-xs { padding: var(--ps-space-xs); }
.ps-p-sm { padding: var(--ps-space-sm); }
.ps-p-md { padding: var(--ps-space-md); }
.ps-p-lg { padding: var(--ps-space-lg); }
.ps-p-xl { padding: var(--ps-space-xl); }
.ps-p-2xl { padding: var(--ps-space-2xl); }
.ps-p-3xl { padding: var(--ps-space-3xl); }

/* Vertical Padding */
.ps-py-0 { padding-block: 0; }
.ps-py-xs { padding-block: var(--ps-space-xs); }
.ps-py-sm { padding-block: var(--ps-space-sm); }
.ps-py-md { padding-block: var(--ps-space-md); }
.ps-py-lg { padding-block: var(--ps-space-lg); }
.ps-py-xl { padding-block: var(--ps-space-xl); }
.ps-py-2xl { padding-block: var(--ps-space-2xl); }
.ps-py-3xl { padding-block: var(--ps-space-3xl); }

/* Horizontal Padding */
.ps-px-0 { padding-inline: 0; }
.ps-px-xs { padding-inline: var(--ps-space-xs); }
.ps-px-sm { padding-inline: var(--ps-space-sm); }
.ps-px-md { padding-inline: var(--ps-space-md); }
.ps-px-lg { padding-inline: var(--ps-space-lg); }
.ps-px-xl { padding-inline: var(--ps-space-xl); }
.ps-px-2xl { padding-inline: var(--ps-space-2xl); }
.ps-px-3xl { padding-inline: var(--ps-space-3xl); }

/* Individual Side Padding */
.ps-pt-0 { padding-top: 0; }
.ps-pt-xs { padding-top: var(--ps-space-xs); }
.ps-pt-sm { padding-top: var(--ps-space-sm); }
.ps-pt-md { padding-top: var(--ps-space-md); }
.ps-pt-lg { padding-top: var(--ps-space-lg); }
.ps-pt-xl { padding-top: var(--ps-space-xl); }
.ps-pt-2xl { padding-top: var(--ps-space-2xl); }
.ps-pt-3xl { padding-top: var(--ps-space-3xl); }

.ps-pb-0 { padding-bottom: 0; }
.ps-pb-xs { padding-bottom: var(--ps-space-xs); }
.ps-pb-sm { padding-bottom: var(--ps-space-sm); }
.ps-pb-md { padding-bottom: var(--ps-space-md); }
.ps-pb-lg { padding-bottom: var(--ps-space-lg); }
.ps-pb-xl { padding-bottom: var(--ps-space-xl); }
.ps-pb-2xl { padding-bottom: var(--ps-space-2xl); }
.ps-pb-3xl { padding-bottom: var(--ps-space-3xl); }

.ps-pl-0 { padding-left: 0; }
.ps-pl-xs { padding-left: var(--ps-space-xs); }
.ps-pl-sm { padding-left: var(--ps-space-sm); }
.ps-pl-md { padding-left: var(--ps-space-md); }
.ps-pl-lg { padding-left: var(--ps-space-lg); }
.ps-pl-xl { padding-left: var(--ps-space-xl); }
.ps-pl-2xl { padding-left: var(--ps-space-2xl); }
.ps-pl-3xl { padding-left: var(--ps-space-3xl); }

.ps-pr-0 { padding-right: 0; }
.ps-pr-xs { padding-right: var(--ps-space-xs); }
.ps-pr-sm { padding-right: var(--ps-space-sm); }
.ps-pr-md { padding-right: var(--ps-space-md); }
.ps-pr-lg { padding-right: var(--ps-space-lg); }
.ps-pr-xl { padding-right: var(--ps-space-xl); }
.ps-pr-2xl { padding-right: var(--ps-space-2xl); }
.ps-pr-3xl { padding-right: var(--ps-space-3xl); }

/* Container/Section Specific Padding */
.ps-section-sm { padding: var(--ps-section-sm) var(--ps-section-h); }
.ps-section-md { padding: var(--ps-space-4xl) var(--ps-section-h); }
.ps-section-lg { padding: var(--ps-space-5xl) var(--ps-section-h); }
.ps-section-xl { padding: var(--ps-space-6xl) var(--ps-section-h); }

.ps-section-top-heavy { padding: var(--ps-space-6xl) var(--ps-section-h) var(--ps-section-sm); }
.ps-section-bottom-heavy { padding: var(--ps-section-sm) var(--ps-section-h) var(--ps-space-6xl); }

/* ============================================================
 * MARGIN UTILITIES
 * ============================================================ */

/* All Sides Margin */
.ps-m-0 { margin: 0; }
.ps-m-auto { margin: auto; }
.ps-m-xs { margin: var(--ps-space-xs); }
.ps-m-sm { margin: var(--ps-space-sm); }
.ps-m-md { margin: var(--ps-space-md); }
.ps-m-lg { margin: var(--ps-space-lg); }
.ps-m-xl { margin: var(--ps-space-xl); }
.ps-m-2xl { margin: var(--ps-space-2xl); }
.ps-m-3xl { margin: var(--ps-space-3xl); }

/* Vertical Margin */
.ps-my-0 { margin-block: 0; }
.ps-my-auto { margin-block: auto; }
.ps-my-xs { margin-block: var(--ps-space-xs); }
.ps-my-sm { margin-block: var(--ps-space-sm); }
.ps-my-md { margin-block: var(--ps-space-md); }
.ps-my-lg { margin-block: var(--ps-space-lg); }
.ps-my-xl { margin-block: var(--ps-space-xl); }
.ps-my-2xl { margin-block: var(--ps-space-2xl); }
.ps-my-3xl { margin-block: var(--ps-space-3xl); }

/* Horizontal Margin */
.ps-mx-0 { margin-inline: 0; }
.ps-mx-auto { margin-inline: auto; }
.ps-mx-xs { margin-inline: var(--ps-space-xs); }
.ps-mx-sm { margin-inline: var(--ps-space-sm); }
.ps-mx-md { margin-inline: var(--ps-space-md); }
.ps-mx-lg { margin-inline: var(--ps-space-lg); }
.ps-mx-xl { margin-inline: var(--ps-space-xl); }
.ps-mx-2xl { margin-inline: var(--ps-space-2xl); }
.ps-mx-3xl { margin-inline: var(--ps-space-3xl); }

/* Individual Side Margin */
.ps-mt-0 { margin-top: 0; }
.ps-mt-auto { margin-top: auto; }
.ps-mt-xs { margin-top: var(--ps-space-xs); }
.ps-mt-sm { margin-top: var(--ps-space-sm); }
.ps-mt-md { margin-top: var(--ps-space-md); }
.ps-mt-lg { margin-top: var(--ps-space-lg); }
.ps-mt-xl { margin-top: var(--ps-space-xl); }
.ps-mt-2xl { margin-top: var(--ps-space-2xl); }
.ps-mt-3xl { margin-top: var(--ps-space-3xl); }

.ps-mb-0 { margin-bottom: 0; }
.ps-mb-auto { margin-bottom: auto; }
.ps-mb-xs { margin-bottom: var(--ps-space-xs); }
.ps-mb-sm { margin-bottom: var(--ps-space-sm); }
.ps-mb-md { margin-bottom: var(--ps-space-md); }
.ps-mb-lg { margin-bottom: var(--ps-space-lg); }
.ps-mb-xl { margin-bottom: var(--ps-space-xl); }
.ps-mb-2xl { margin-bottom: var(--ps-space-2xl); }
.ps-mb-3xl { margin-bottom: var(--ps-space-3xl); }

.ps-ml-0 { margin-left: 0; }
.ps-ml-auto { margin-left: auto; }
.ps-ml-xs { margin-left: var(--ps-space-xs); }
.ps-ml-sm { margin-left: var(--ps-space-sm); }
.ps-ml-md { margin-left: var(--ps-space-md); }
.ps-ml-lg { margin-left: var(--ps-space-lg); }
.ps-ml-xl { margin-left: var(--ps-space-xl); }
.ps-ml-2xl { margin-left: var(--ps-space-2xl); }
.ps-ml-3xl { margin-left: var(--ps-space-3xl); }

.ps-mr-0 { margin-right: 0; }
.ps-mr-auto { margin-right: auto; }
.ps-mr-xs { margin-right: var(--ps-space-xs); }
.ps-mr-sm { margin-right: var(--ps-space-sm); }
.ps-mr-md { margin-right: var(--ps-space-md); }
.ps-mr-lg { margin-right: var(--ps-space-lg); }
.ps-mr-xl { margin-right: var(--ps-space-xl); }
.ps-mr-2xl { margin-right: var(--ps-space-2xl); }
.ps-mr-3xl { margin-right: var(--ps-space-3xl); }

/* Centered Element (margin auto shorthand) */
.ps-centered { margin-inline: auto; }

/* ============================================================
 * POSITION UTILITIES
 * ============================================================ */

.ps-static { position: static; }
.ps-relative { position: relative; }
.ps-absolute { position: absolute; }
.ps-fixed { position: fixed; }
.ps-sticky { position: sticky; }

/* Positioning Values */
.ps-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.ps-top-0 { top: 0; }
.ps-right-0 { right: 0; }
.ps-bottom-0 { bottom: 0; }
.ps-left-0 { left: 0; }

/* ============================================================
 * STICKY UTILITIES
 * ============================================================ */

.ps-sticky-parent {
	position: relative;
	height: 100%;
}

.ps-sticky-top {
	position: sticky;
	top: 0;
	z-index: 10;
}

.ps-sticky-bottom {
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* ============================================================
 * GRID UTILITIES
 * ============================================================ */

.ps-grid {
	display: grid;
}

/* Grid with Auto-fit and Minmax */
.ps-grid-auto-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--ps-space-lg);
}

.ps-grid-auto-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--ps-space-lg);
}

.ps-grid-auto-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--ps-space-lg);
}

/* Fixed Column Grids (responsive) */
.ps-grid-cols-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.ps-grid-cols-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ps-grid-cols-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

/* Mobile: stack columns */
@media (max-width: 768px) {
	.ps-grid-cols-2,
	.ps-grid-cols-3,
	.ps-grid-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * FLEXBOX UTILITIES
 * ============================================================ */

.ps-flex { display: flex; }
.ps-inline-flex { display: inline-flex; }

/* Flex Direction */
.ps-flex-row { flex-direction: row; }
.ps-flex-row-reverse { flex-direction: row-reverse; }
.ps-flex-col { flex-direction: column; }
.ps-flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.ps-flex-wrap { flex-wrap: wrap; }
.ps-flex-nowrap { flex-wrap: nowrap; }
.ps-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.ps-justify-start { justify-content: flex-start; }
.ps-justify-end { justify-content: flex-end; }
.ps-justify-center { justify-content: center; }
.ps-justify-between { justify-content: space-between; }
.ps-justify-around { justify-content: space-around; }
.ps-justify-evenly { justify-content: space-evenly; }

/* Align Items */
.ps-items-start { align-items: flex-start; }
.ps-items-end { align-items: flex-end; }
.ps-items-center { align-items: center; }
.ps-items-baseline { align-items: baseline; }
.ps-items-stretch { align-items: stretch; }

/* Align Content */
.ps-content-start { align-content: flex-start; }
.ps-content-end { align-content: flex-end; }
.ps-content-center { align-content: center; }
.ps-content-between { align-content: space-between; }
.ps-content-around { align-content: space-around; }
.ps-content-evenly { align-content: space-evenly; }

/* Align Self */
.ps-self-auto { align-self: auto; }
.ps-self-start { align-self: flex-start; }
.ps-self-end { align-self: flex-end; }
.ps-self-center { align-self: center; }
.ps-self-stretch { align-self: stretch; }

/* Flex Grow & Shrink */
.ps-flex-1 { flex: 1 1 0%; }
.ps-flex-auto { flex: 1 1 auto; }
.ps-flex-initial { flex: 0 1 auto; }
.ps-flex-none { flex: none; }

.ps-flex-grow { flex-grow: 1; }
.ps-flex-grow-0 { flex-grow: 0; }

.ps-flex-shrink { flex-shrink: 1; }
.ps-flex-shrink-0 { flex-shrink: 0; }

/* ============================================================
 * GAP UTILITIES
 * ============================================================ */

/* Gap (for both grid and flexbox) */
.ps-gap-0 { gap: 0; }
.ps-gap-xs { gap: var(--ps-space-xs); }
.ps-gap-sm { gap: var(--ps-space-sm); }
.ps-gap-md { gap: var(--ps-space-md); }
.ps-gap-lg { gap: var(--ps-space-lg); }
.ps-gap-xl { gap: var(--ps-space-xl); }
.ps-gap-2xl { gap: var(--ps-space-2xl); }
.ps-gap-3xl { gap: var(--ps-space-3xl); }

/* Row Gap */
.ps-row-gap-0 { row-gap: 0; }
.ps-row-gap-xs { row-gap: var(--ps-space-xs); }
.ps-row-gap-sm { row-gap: var(--ps-space-sm); }
.ps-row-gap-md { row-gap: var(--ps-space-md); }
.ps-row-gap-lg { row-gap: var(--ps-space-lg); }
.ps-row-gap-xl { row-gap: var(--ps-space-xl); }
.ps-row-gap-2xl { row-gap: var(--ps-space-2xl); }
.ps-row-gap-3xl { row-gap: var(--ps-space-3xl); }

/* Column Gap */
.ps-col-gap-0 { column-gap: 0; }
.ps-col-gap-xs { column-gap: var(--ps-space-xs); }
.ps-col-gap-sm { column-gap: var(--ps-space-sm); }
.ps-col-gap-md { column-gap: var(--ps-space-md); }
.ps-col-gap-lg { column-gap: var(--ps-space-lg); }
.ps-col-gap-xl { column-gap: var(--ps-space-xl); }
.ps-col-gap-2xl { column-gap: var(--ps-space-2xl); }
.ps-col-gap-3xl { column-gap: var(--ps-space-3xl); }

/* ============================================================
 * EFFECT UTILITIES
 * ============================================================ */

/* Drop Shadow (filter-based) */
.ps-drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
.ps-drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.ps-drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.ps-drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); }
.ps-drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)); }
.ps-drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }
.ps-drop-shadow-none { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }

/* Scale */
.ps-scale-50 { transform: scale(0.5); }
.ps-scale-75 { transform: scale(0.75); }
.ps-scale-90 { transform: scale(0.9); }
.ps-scale-95 { transform: scale(0.95); }
.ps-scale-100 { transform: scale(1); }
.ps-scale-105 { transform: scale(1.05); }
.ps-scale-110 { transform: scale(1.1); }
.ps-scale-125 { transform: scale(1.25); }
.ps-scale-150 { transform: scale(1.5); }

/* Scale on Hover */
.ps-hover-scale:hover { transform: scale(1.05); }
.ps-hover-scale-lg:hover { transform: scale(1.1); }

/* Blur */
.ps-blur-none { filter: blur(0); }
.ps-blur-sm { filter: blur(4px); }
.ps-blur { filter: blur(8px); }
.ps-blur-md { filter: blur(12px); }
.ps-blur-lg { filter: blur(16px); }
.ps-blur-xl { filter: blur(24px); }
.ps-blur-2xl { filter: blur(40px); }
.ps-blur-3xl { filter: blur(64px); }


/* Header styles  */

@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(5) {
        margin-left: auto;
    }
}

/* Popular Posts Widget */

.popular-posts .wpp-cards h3 {
	font-size: 1.5rem;
    line-height: 1.3em;
}

.popular-posts .wpp-cards h3 a {
	color: var(--contrast);
}

.popular-posts .wpp-cards li {
	border-bottom: var(--accent-gold) 1px solid;
}

.separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar { height: 100%;}

@media only screen and (max-width: 991px){
.single.single-post .grid-container .site-content{
    flex-direction:column;
}

.single.single-post .site-content .content-area,
.single.single-post .is-right-sidebar{
	width: 100%;
}

.single.single-post .separate-containers .site-main{
	margin: 0;
}

}


/* ============================================================
   FLUENT FORM STYLING — "Variant A: Refined Classic"
   ------------------------------------------------------------
   Applied globally to every Fluent Form on the site:
     - Underline-only inputs (no boxed border).
     - EB Garamond 18px input text.
     - Italic serif placeholders.
     - Tracked uppercase Figtree labels above each input.
     - Segmented control for radio groups (replaces native dots).
     - Ember-red rectangular submit button.

   Section 1 (Global) is the LIGHT treatment by default —
   heritage-blue text on light bg, ember-red focus underline.
   Section 2 inverts for `.ff-skin-dark` wrappers — ivory on
   dark bg, noble-gold focus.
   Section 3 is the HOMEPAGE STRIP layout (single-row inline:
   email | segmented | submit) using `display: contents` to
   flatten FF's 2-column container into the fieldset.
   ============================================================ */


/* === 1. GLOBAL DEFAULTS (light treatment) ============= */

.frm-fluent-form,
.frm-fluent-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Field group spacing */
.frm-fluent-form .ff-el-group {
  margin-bottom: 18px !important;
}
.frm-fluent-form .ff-el-group:last-child {
  margin-bottom: 0 !important;
}

/* Labels — tracked uppercase Figtree, heritage-blue 75% */
.frm-fluent-form .ff-el-input--label label {
  font-family: var(--gp-font--figtree) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(11, 61, 106, 0.75) !important;
  margin: 0 0 7px 0 !important;
  display: inline-block !important;
}

/* Inputs — underline-only, EB Garamond 18 */
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="number"],
.frm-fluent-form input[type="url"],
.frm-fluent-form input[type="password"],
.frm-fluent-form textarea,
.frm-fluent-form select {
  font-family: var(--gp-font--eb-garamond) !important;
  font-size: 18px !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  padding: 8px 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(11, 61, 106, 0.28) !important;
  background: transparent !important;
  color: var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  outline: none !important;
  width: 100% !important;
  transition: border-bottom-color 0.15s ease !important;
}

/* Italic serif placeholder */
.frm-fluent-form .ff-el-form-control::placeholder,
.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder {
  font-family: var(--gp-font--eb-garamond) !important;
  font-style: italic !important;
  color: rgba(11, 61, 106, 0.42) !important;
  opacity: 1 !important;
}

/* Focus — ember-red underline */
.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form input:focus,
.frm-fluent-form textarea:focus,
.frm-fluent-form select:focus {
  border-bottom-color: var(--accent-2) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Radio/checkbox group → segmented control. The wrapper
   `.ff-el-input--content` becomes the segmented container;
   the actual <input type="radio"> is visually hidden but
   left accessible to keyboard/SR, and its `:checked` state
   (or FF's `.ff_item_selected` class) drives the selected
   button visual. */
.frm-fluent-form .ff_list_inline .ff-el-input--content {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  border: 1px solid rgba(11, 61, 106, 0.22) !important;
  background: transparent !important;
  gap: 0 !important;
}
.frm-fluent-form .ff-el-form-check {
  margin: 0 !important;
  padding: 0 !important;
}
.frm-fluent-form .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  cursor: pointer;
  font-family: var(--gp-font--figtree) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--accent) !important;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;  /* contain the absolutely-positioned hidden input */
}
/* Hide the native radio/checkbox. `appearance: none` removes
   the dot, then we anchor it inside the label (`position:
   absolute; top: 0; left: 0`) so clicking the label moves
   focus inside the visible button — no scroll-to-top jump. */
.frm-fluent-form .ff-el-form-check-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
.frm-fluent-form .ff-el-form-check-label span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  /* Neutralize Fluent Form default ff_list_buttons skin
     which fills the inner span with white + border + blue
     selected box-shadow. The label is now the visible button,
     not the span. */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline !important;
}
.frm-fluent-form .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.frm-fluent-form .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  background: var(--accent) !important;
  color: var(--base) !important;
}

/* Submit button — ember red, no border-radius */
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"],
form.frm-fluent-form .wpf_has_custom_css.ff-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 18px 24px !important;
  height: auto !important;
  min-width: 0 !important;
  width: auto !important;
  background: var(--accent-2) !important;
  background-color: var(--accent-2) !important;
  color: var(--base) !important;
  font-family: var(--gp-font--figtree) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus,
.frm-fluent-form button[type="submit"]:hover,
form.frm-fluent-form .wpf_has_custom_css.ff-btn-submit:hover {
  background: #B50B0B !important;
  background-color: #B50B0B !important;
  color: var(--base) !important;
}

/* Validation messages — italic serif, ember-deep */
.frm-fluent-form .error,
.frm-fluent-form .text-danger,
.frm-fluent-form .ff-el-is-error .text-danger {
  font-family: var(--gp-font--eb-garamond) !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: #B50B0B !important;
}

/* Checkbox/radio accent for non-segmented contexts */
.frm-fluent-form input[type="checkbox"]:checked {
  accent-color: var(--accent-2);
}


/* === 2. DARK SKIN (`.ff-skin-dark`) =================== */
/* Inverted treatment for forms on heritage-blue, ember-red,
   or midnight-blue surfaces. Use class `ff-skin-dark` on the
   wrapper around the [fluentform] shortcode. */

.ff-skin-dark .frm-fluent-form .ff-el-input--label label,
.ff-skin-dark form .ff-el-input--label label {
  color: rgba(255, 249, 243, 0.62) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 4px !important;
}

.ff-skin-dark .frm-fluent-form .ff-el-form-control,
.ff-skin-dark .frm-fluent-form input[type="text"],
.ff-skin-dark .frm-fluent-form input[type="email"],
.ff-skin-dark .frm-fluent-form input[type="tel"],
.ff-skin-dark .frm-fluent-form input[type="number"],
.ff-skin-dark .frm-fluent-form textarea,
.ff-skin-dark .frm-fluent-form select,
.ff-skin-dark form .ff-el-form-control {
  padding: 6px 0 8px !important;
  border-bottom-color: rgba(255, 249, 243, 0.32) !important;
  color: var(--base) !important;
}
.ff-skin-dark .frm-fluent-form .ff-el-form-control::placeholder,
.ff-skin-dark .frm-fluent-form input::placeholder,
.ff-skin-dark .frm-fluent-form textarea::placeholder,
.ff-skin-dark form .ff-el-form-control::placeholder {
  color: rgba(255, 249, 243, 0.45) !important;
}
.ff-skin-dark .frm-fluent-form .ff-el-form-control:focus,
.ff-skin-dark .frm-fluent-form input:focus,
.ff-skin-dark .frm-fluent-form textarea:focus,
.ff-skin-dark form .ff-el-form-control:focus {
  border-bottom-color: var(--accent-gold) !important;
}

/* Segmented control — inverted */
.ff-skin-dark .frm-fluent-form .ff_list_inline .ff-el-input--content,
.ff-skin-dark form .ff_list_inline .ff-el-input--content {
  border-color: rgba(255, 249, 243, 0.28) !important;
  background: transparent !important;
}
.ff-skin-dark .frm-fluent-form .ff-el-form-check-label,
.ff-skin-dark form .ff-el-form-check-label {
  color: var(--base) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  padding: 13px 18px !important;
}
.ff-skin-dark .frm-fluent-form .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.ff-skin-dark .frm-fluent-form .ff-el-form-check:has(input:checked) .ff-el-form-check-label,
.ff-skin-dark form .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.ff-skin-dark form .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  background: var(--base) !important;
  color: var(--accent) !important;
}

/* Validation on dark bg — softer red */
.ff-skin-dark .frm-fluent-form .error,
.ff-skin-dark .frm-fluent-form .text-danger,
.ff-skin-dark .frm-fluent-form .ff-el-is-error .text-danger {
  color: #FFB3AA !important;
}


/* === 3. INLINE STRIP LAYOUT (form 2 — subscribe) ====== */
/* Form 2 (the subscribe form used on the homepage band and in
   in-post raised boxes) renders as a 2-column container (email
   + submit) with the radio group as a sibling below. To get
   [email | segmented | submit] on a single inline row, flatten
   the 2-col container with `display: contents` and re-order via
   `order:`. Scoped to `.fluent_form_2` so the popup (form 3)
   and any other forms keep their own layout — skins only set
   colors here, not structure. */

.frm-fluent-form.fluent_form_2 fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 32px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-inline-size: auto !important;
}

.frm-fluent-form.fluent_form_2 .ff-t-container.ff-column-container {
  display: contents !important;
}

.frm-fluent-form.fluent_form_2 .ff-t-cell {
  width: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* Visual order: email → segmented → submit */
.frm-fluent-form.fluent_form_2 .ff-t-cell.ff-t-column-1 { order: 1 !important; }
.frm-fluent-form.fluent_form_2 .ff-el-group.ff_list_inline { order: 2 !important; }
.frm-fluent-form.fluent_form_2 .ff-t-cell.ff-t-column-2 { order: 3 !important; }

/* Strip groups have no vertical margin — fieldset gap handles
   horizontal spacing. */
.frm-fluent-form.fluent_form_2 .ff-el-group {
  margin: 0 !important;
}

/* Email cell: float the FF-rendered label above the input as
   an absolutely-positioned overline. The cell's flex line
   becomes just the input height (39px), so the segmented and
   submit controls vertically center against the input itself,
   not the label-plus-input stack. */
.frm-fluent-form.fluent_form_2 .ff-el-group:has(input[type="email"]) {
  position: relative !important;
  display: block !important;
}
.frm-fluent-form.fluent_form_2 .ff-el-group:has(input[type="email"]) > .ff-el-input--label {
  position: absolute !important;
  bottom: calc(100% + 4px) !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* All three controls share the same fixed height so they line
   up perfectly. 39px is what the submit button computes to at
   13px Figtree / line-height 1 / 13px vertical padding, so we
   anchor everything to that. */
.frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control,
.frm-fluent-form.fluent_form_2 .ff-el-form-check-label,
.frm-fluent-form.fluent_form_2 .ff-btn-submit,
form.frm-fluent-form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit {
  height: 39px !important;
  box-sizing: border-box !important;
}

/* Email input fills its cell vertically — padding top/bottom 0
   and rely on the explicit height + line-height for vertical
   centering. */
.frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control {
  padding: 0 !important;
  line-height: 1 !important;
}

/* Segmented label: tighten so its own padding doesn't fight
   the explicit height. */
.frm-fluent-form.fluent_form_2 .ff-el-form-check-label {
  padding: 0 18px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Hide the "Frequency" group label — segmented control reads
   as the question on its own. */
.frm-fluent-form.fluent_form_2 .ff-el-group.ff_list_inline > .ff-el-input--label {
  display: none !important;
}

/* Submit on the strip: tight padding, smaller type, pulled
   left to sit close to the segmented control. */
.frm-fluent-form.fluent_form_2 .ff-btn-submit,
form.frm-fluent-form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit {
  padding: 0 28px !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  margin-left: -20px !important;
}

/* Submit-button wrapper — kill FF's vertical-centering quirks. */
.frm-fluent-form.fluent_form_2 .ff_submit_btn_wrapper,
.frm-fluent-form.fluent_form_2 .ff_submit_btn_wrapper_custom {
  margin: 0 !important;
  align-items: stretch !important;
}
.frm-fluent-form.fluent_form_2 .ff_submit_btn_wrapper button,
.frm-fluent-form.fluent_form_2 .ff_submit_btn_wrapper_custom button {
  margin: 0 !important;
}

/* Email cell width:
     Dark skin (homepage band) — fixed 240px so the form
       sits at the band's natural width.
     Light skin (in-post raised box) — grow to fill the box. */
.ff-skin-dark .frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control {
  width: 240px !important;
  max-width: 100% !important;
}
.ff-skin-light .frm-fluent-form.fluent_form_2 .ff-t-cell.ff-t-column-1 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ff-skin-light .frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control {
  width: 100% !important;
  max-width: none !important;
}


/* === 4. SUCCESS MESSAGE =============================== */
/* After submit success FF replaces the form with a message
   box. Style it as a subtle ivory/heritage tint with italic
   serif text — no border, no rounded corners. */

.frm-fluent-form .ff-message-success,
.frm-fluent-form .ff_submit_success_msg,
.fluentform .ff-message-success {
  background: rgba(11, 61, 106, 0.08) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  font-family: var(--gp-font--eb-garamond) !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--accent) !important;
  text-align: center;
}

/* Dark skin — translucent ivory tint, cream text */
.ff-skin-dark .frm-fluent-form .ff-message-success,
.ff-skin-dark .frm-fluent-form .ff_submit_success_msg,
.ff-skin-dark .fluentform .ff-message-success {
  background: rgba(255, 249, 243, 0.08) !important;
  color: var(--base) !important;
}


/* === 5. POPUP FORM (fluent_form_3) — Variant A layout = */
/* The popup is a single-column FF form that needs a 2-col
   grid for the name row, an inline label+segmented frequency
   row, a full-width submit, and "No spam" fineprint below.
   Scoped to form ID 3 so other light forms aren't affected. */

/* Grid the fieldset: 2 columns on the name row, full-width
   for everything else. Hidden inputs and the SR legend are
   already display:none / off-screen. */
.frm-fluent-form.fluent_form_3 fieldset {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 24px !important;
}
.frm-fluent-form.fluent_form_3 fieldset > .ff-el-group {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}
.frm-fluent-form.fluent_form_3 fieldset > .ff-el-group:nth-of-type(1),
.frm-fluent-form.fluent_form_3 fieldset > .ff-el-group:nth-of-type(2) {
  grid-column: auto;
}
.frm-fluent-form.fluent_form_3 fieldset > .ff_screen_reader_title,
.frm-fluent-form.fluent_form_3 fieldset > input[type="hidden"] {
  display: none !important;
}

/* Frequency row: label inline-left of the segmented control,
   18px gap. Override the stacked label/content default and
   zero all padding/margin on the wrapper + label element so
   the label sits flush at the group's left edge (matching
   the column above). */
.frm-fluent-form.fluent_form_3 .ff-el-group.ff_list_inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  margin: 10px 0 !important;
  padding: 0 !important;
}
.frm-fluent-form.fluent_form_3 .ff-el-group.ff_list_inline > .ff-el-input--label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  text-indent: 0 !important;
}
.frm-fluent-form.fluent_form_3 .ff-el-group.ff_list_inline > .ff-el-input--label label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}
/* Kill FF's legacy clearfix `:before`/`:after` pseudos on the
   flex group — in block flow they're invisible, but as flex
   items they become children that consume width + the 18px
   gap, indenting the FREQUENCY label and trailing the
   segmented control. */
.frm-fluent-form.fluent_form_3 .ff-el-group.ff_list_inline::before,
.frm-fluent-form.fluent_form_3 .ff-el-group.ff_list_inline::after {
  display: none !important;
  content: none !important;
}

/* Keep only the popup frequency segmented-control shell transparent. */
.frm-fluent-form.fluent_form_3 .ff_list_inline .ff-el-input--content,
.ff-skin-dark .frm-fluent-form.fluent_form_3 .ff_list_inline .ff-el-input--content,
.ff-skin-dark form.frm-fluent-form.fluent_form_3 .ff_list_inline .ff-el-input--content {
  background: transparent !important;
  background-color: transparent !important;
}

/* Full-width Subscribe button — overrides global auto-width
   AND any .wpf_has_custom_css min-width:100% (which actually
   matches what we want here). */
.frm-fluent-form.fluent_form_3 .ff-btn-submit,
.frm-fluent-form.fluent_form_3 button[type="submit"],
form.frm-fluent-form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit {
  width: 100% !important;
  min-width: 100% !important;
  padding: 18px 24px !important;
  font-size: 14px !important;
  letter-spacing: 0.16em !important;
  margin-left: 0 !important;
}

/* Fineprint below the submit — injected via ::after on the
   submit-button wrapper. Italic serif, heritage-blue 60%. */
.frm-fluent-form.fluent_form_3 .ff_submit_btn_wrapper::after,
.frm-fluent-form.fluent_form_3 .ff_submit_btn_wrapper_custom::after {
  content: "No spam. Unsubscribe in one click.";
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--gp-font--eb-garamond);
  font-style: italic;
  font-size: 13px;
  color: rgba(11, 61, 106, 0.6);
}


/* === 7. AUTHOR AVATAR STACK (JetEngine listing 2756) ===
   Overlapping row of post-author avatars at the top of single
   posts. Overrides JetEngine's default grid layout so the
   avatars sit in a flex row, each overlapping the previous by
   16px. DOM order paints later items on top, so the rightmost
   avatar sits over its neighbours in the natural read direction. */

.jet-listing-grid--2756 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  width: auto !important;
  grid-template-columns: none !important;
}

.jet-listing-grid--2756 .jet-listing-grid__item,
.jet-listing-grid--2756 > .jet-listing-grid__item {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin-left: -16px !important;
  position: relative;
  box-sizing: border-box;
}

.jet-listing-grid--2756 .jet-listing-grid__item:first-child,
.jet-listing-grid--2756 > .jet-listing-grid__item:first-child {
  margin-left: 0 !important;
}

/* Optional ivory ring so adjacent avatars read as discrete
   circles. Drop these two rules if a borderless stack feels
   cleaner with the actual avatar art. */
.jet-listing-grid--2756 .jet-listing-grid__item img {
  border: 2px solid var(--base);
  border-radius: 9999px;
}


/* === 8. PULL QUOTE & QUOTE BLOCKS ====================
   Editorial pull quote with ember-red left rule, italic EB
   Garamond heritage-blue text, and an ember-red Figtree
   citation. Regular quote uses the same vocabulary but tones
   it down — heritage-blue translucent rule, smaller serif
   text, no cite emphasis — so it reads as a sustained quoted
   passage rather than a hero pull. */

/* --- pull quote (core/pullquote) --------------------- */
.wp-block-pullquote {
  margin: 2em 0;
  padding: 0.5em 0 0.5em 32px;
  border: 0;
  border-left: 4px solid var(--accent-2);
  text-align: left;
  background: transparent;
}
.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.wp-block-pullquote blockquote p {
  font-family: var(--gp-font--eb-garamond);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 0.75em 0;
}
.wp-block-pullquote blockquote p:last-of-type {
  margin-bottom: 0.75em;
}
.wp-block-pullquote blockquote cite,
.wp-block-pullquote cite {
  display: block;
  font-family: var(--gp-font--figtree);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-top: 0.75em;
}

/* --- regular quote block (core/quote) ----------------
   Same type and rule color as the pullquote — what
   differentiates the two is the cite treatment (subtle
   heritage-blue here, prominent ember-red on pullquote)
   and the slightly tighter padding/margin. */
.wp-block-quote {
  margin: 1.5em 0;
  padding: 0.5em 0 0.5em 32px;
  border: 0;
  border-left: 4px solid var(--accent-2);
  background: transparent;
  font-style: normal;
}
.wp-block-quote p {
  font-family: var(--gp-font--eb-garamond);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 0.75em 0;
}
.wp-block-quote p:last-child {
  margin-bottom: 0;
}
/* ============================================================
   JetEngine Listings — hide empty-state wrappers
   Hides the entire listing-grid wrapper when the query returned
   no results, so we don't render an empty container with
   "No data was found" markup.
   ============================================================ */
.jet-listing-grid--blocks:has(.jet-listing-not-found) {
	display: none;
}

.wp-block-quote cite {
  display: block;
  font-family: var(--gp-font--figtree);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 61, 106, 0.6);
  margin-top: 0.75em;
}

/* ============================================================
   Email signup section ("Join the Counter-Revolution")
   Hide the standard-bearer background image on mobile —
   the heritage-blue background color stays.
   ============================================================ */
@media (max-width: 767px) {
	.gb-element-sgsec {
		background-image: none !important;
	}
}

/* ============================================================
   Mobile header — bump up from GP's cramped 40px defaults
   so logo, menu toggle, and icons feel less tiny on phones.
   !important is needed because GP's inline <style> tag loads
   AFTER this file in the cascade and uses equal specificity.
   ============================================================ */
@media (max-width: 1100px) {
	/* Logo + search field height */
	.mobile-header-navigation .site-logo.mobile-header-logo img,
	.navigation-branding img,
	.navigation-search input[type="search"] {
		height: 50px !important;
	}

	/* Menu toggle + icon buttons line-height (keeps icons centered) */
	.main-navigation .main-nav ul li a,
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items a,
	.main-navigation .menu-bar-item > a {
		line-height: 56px !important;
	}

	/* Bump nav text + icon size — icons are 1em so this scales them too */
	.main-navigation .menu-toggle,
	.main-navigation .menu-bar-items,
	.main-navigation .menu-bar-item > a {
		font-size: 0.95rem !important;
	}
}

/* ============================================================
   Mobile fine-tuning — override per-block fixed sizes that
   look too small on phone screens.
   ============================================================ */
@media (max-width: 767px) {
	/* Trending widget (Popular Posts cards): bigger thumbnails so
	   the section reads on par with the GB-loop sections elsewhere. */
	.popular-posts .wpp-cards li img {
		width: 110px !important;
		height: 110px !important;
		object-fit: cover;
	}

	/* Trending widget: bump article title size on mobile */
	.popular-posts .wpp-cards h3 {
		font-size: 1.75rem;
	}

	/* Email signup: stack the form's two columns full-width on mobile
	   (Fluent Forms hard-codes flex-basis:50% inline) and bump up the
	   field label so it doesn't look tiny. */
	.gb-element-sgsec .ff-t-container.ff-column-container {
		flex-wrap: wrap;
	}
	.gb-element-sgsec .ff-t-container .ff-t-cell {
		flex-basis: 100% !important;
	}
	.gb-element-sgsec .ff-el-input--label label {
		font-size: 0.95rem;
	}
}

/* ============================================================
   Email signup form (fluent_form_2) — mobile override
   The desktop inline-strip layout (defined earlier in this file)
   doesn't work on phone widths. On mobile we flip back to a
   vertical stack with full-width fields, centered labels, and
   a 50/50 frequency split. Targeting .fluent_form_2 specifically
   so the popup form (3) and any future forms are unaffected.
   ============================================================ */
@media (max-width: 767px) {
	/* Stack the inline-strip vertically */
	.frm-fluent-form.fluent_form_2 fieldset {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 18px !important;
	}

	/* Each cell takes full width */
	.frm-fluent-form.fluent_form_2 .ff-t-cell {
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	/* Submit button full width */
	.frm-fluent-form.fluent_form_2 .ff-btn-submit,
	form.frm-fluent-form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit {
		width: 100% !important;
	}

	/* Email label: revert from desktop absolute-positioning back
	   to normal flow so it sits in the column above the input. */
	.frm-fluent-form.fluent_form_2 .ff-el-group:has(input[type="email"]) > .ff-el-input--label {
		position: static !important;
		width: 100% !important;
		margin-bottom: 6px !important;
		text-align: left !important;
	}

	/* Bump label size on mobile (default is 11px Figtree) */
	.frm-fluent-form.fluent_form_2 .ff-el-input--label label {
		font-size: 13px !important;
	}

	/* Email input + its content wrapper full width.
	   Higher-specificity selector (.ff-skin-dark prefix) needed to
	   beat the line-1263 rule that pins the dark-skin form to 240px. */
	.frm-fluent-form.fluent_form_2 .ff-el-group:has(input[type="email"]),
	.frm-fluent-form.fluent_form_2 .ff-el-group:has(input[type="email"]) > .ff-el-input--content {
		width: 100% !important;
	}
	.ff-skin-dark .frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control,
	.frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control {
		width: 100% !important;
	}

	/* Bump the field text + placeholder size on both forms (homepage
	   dark and article light) — the default 13px reads too small on phones. */
	.frm-fluent-form.fluent_form_2 input[type="email"].ff-el-form-control,
	.frm-fluent-form.fluent_form_2 .ff-el-form-control {
		font-size: 24px !important;
	}
	.frm-fluent-form.fluent_form_2 input[type="email"]::placeholder,
	.frm-fluent-form.fluent_form_2 .ff-el-form-control::placeholder {
		font-size: 24px !important;
	}

	/* Frequency radios: row spans full width, each button 50% */
	.frm-fluent-form.fluent_form_2 .ff_list_inline .ff-el-input--content {
		display: flex !important;
		width: 100% !important;
		gap: 8px;
	}
	.frm-fluent-form.fluent_form_2 .ff_list_inline .ff-el-form-check {
		flex: 1 1 50% !important;
	}
}

/* ============================================================
   Slide-out (off-canvas) menu
   - 16px font-size (default Customizer wasn't taking effect)
   - Left-aligned menu items (GP default)
   - Force close X to absolute top-right of the screen
   ============================================================ */
#generate-slideout-menu .slideout-menu li,
#generate-slideout-menu .slideout-menu li a,
.main-navigation.slideout-navigation .main-nav ul li a {
	text-align: left !important;
	font-size: 16px !important;
}

/* Force close X to top-right of viewport regardless of which
   side the panel slides from. Overrides GP's default position
   which puts it at the panel's inner edge — and on mobile in
   do-overlay mode, GP defaults to position:static centered. */
.slideout-overlay button.slideout-exit,
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit,
.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit,
.slideout-navigation.do-overlay .slideout-exit {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: auto !important;
	text-align: right !important;
	padding: 12px 16px !important;
}

/* Slideout panel padding:
   - Remove the 10% left padding on .inside-navigation so top-level
     menu items go flush to the left edge of the panel.
   - Bump the top padding so menu items don't sit right under the
     close X.
   - Keep right padding (10%) for breathing room on the right edge. */
.slideout-navigation.do-overlay .inside-navigation {
	padding: 72px 10% 0 0 !important;
}

/* Submenu items keep their indent so the hierarchy is visible. */
.slideout-navigation .main-nav ul ul li a,
#generate-slideout-menu .slideout-menu ul ul li a {
	padding-left: 32px !important;
}