/*
Theme Name: Kadence Child
Template: kadence
Description: Child theme for Ithaca Local Economy Lab
Version: 2.4
*/

/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
	/* Brandy Punch palette — full scale */
	--bp-50:  #faf5ec;
	--bp-100: #f4e6cd;
	--bp-200: #eacc9e;
	--bp-300: #deab66;
	--bp-400: #d49043;
	--bp-500: #c3772f;
	--bp-600: #a85b26;
	--bp-700: #864222;
	--bp-800: #703723;
	--bp-900: #612f22;
	--bp-950: #381710;

	/* Semantic color tokens — mapped to Brandy Punch */
	--brown:       #1a0f08;        /* richer/darker than bp-950 — keep as is */
	--amber:       var(--bp-400);  /* #d49043 — primary accent, buttons */
	--amber-dark:  var(--bp-600);  /* #a85b26 — hover state */
	--parchment:   var(--bp-100);  /* #f4e6cd — primary page background */
	--sand:        var(--bp-200);  /* #eacc9e — secondary background */
	--sand-border: var(--bp-300);  /* #deab66 — borders, dividers */
	--off-white:   var(--bp-50);   /* #faf5ec — card backgrounds */
	--text:        #4a3728;
	--text-muted:  #9a8070;
	--text-light:  #b89a7a;
	--teal:        #4a8c7a;

	/* Typography */
	--font-display: 'Amethysta', Georgia, serif;
	--font-body:    'Faculty Glyphic', Georgia, serif;

	/* Type scale — 7 sizes, rem-based, 1.25 ratio */
	--text-label:   0.6875rem;  /* 11px — eyebrows, all-caps only */
	--text-caption: 0.8125rem;  /* 13px — meta, dates, nav */
	--text-sm:      0.9375rem;  /* 15px — secondary body, hints */
	--text-base:    1.0625rem;  /* 17px — main body */
	--text-lg:      1.1875rem;  /* 19px — lead paragraphs */
	--text-xl:      1.375rem;   /* 22px — card headings */
	--text-2xl:     1.75rem;    /* 28px — h3 subheadings */
	/* Fluid headings — set inline with clamp() */

	/* Line heights */
	--leading-tight:  1.05;
	--leading-snug:   1.15;
	--leading-body:   1.75;
	--leading-dark:   1.85;  /* looser on dark backgrounds */

	/* Letter spacing */
	--tracking-tight:   -0.02em;
	--tracking-snug:    -0.01em;
	--tracking-label:    0.12em;  /* all-caps eyebrows — ONE value */
	--tracking-nav:      0.05em;

	/* Font weights */
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* Spacing scale (8px base) */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* Fluid section padding */
	--section-pad: clamp(56px, 8vw, 96px);
	--section-pad-sm: clamp(40px, 6vw, 72px);
	--gutter: clamp(16px, 5vw, 48px);

	/* Radii */
	--radius:    8px;
	--radius-lg: 12px;

	/* Reading width */
	--prose-width: 68ch;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
	background-color: var(--parchment);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	font-kerning: normal;
}

/* ─── Kadence layout overrides ─────────────────────────────────────────────── */

/* Shrink the header row — Kadence default is 80px */
.site-main-header-inner-wrap {
	min-height: 39px !important;
}

/* Kill Kadence's content-area top/bottom margin — our sections handle spacing */
.content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Remove content wrapper horizontal padding — sections/blocks handle their own gutters */
.page .entry-content-wrap,
.entry-content-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Horizontal gutter for all section inner containers except the hero
   (hero columns provide their own horizontal padding) */
.wp-block-group.alignfull:not(.ithaca-hero) > .wp-block-group__inner-container {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

/* ─── Hide Kadence page chrome ─────────────────────────────────────────────── */
.kadence-page-header,
.wp-block-post-title,
.page-title,
.entry-title,
.page .entry-header,
.page .kadence-inner-column-inner > .entry-header {
	display: none !important;
}

.page .entry-content,
.page .entry-content-wrap,
.entry-content-wrap {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ─── Header / masthead ────────────────────────────────────────────────────── */
#masthead,
.site-header {
	background-color: var(--parchment) !important;
	border-bottom: 1px solid var(--sand-border);
}

.custom-logo {
	max-height: 33px !important;
	width: auto !important;
}

#masthead .site-title,
.site-header .site-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

#masthead .site-title a,
.site-header .site-title a {
	color: var(--brown) !important;
	text-decoration: none;
}


/* Nav links — proper touch target + spacing */
#masthead .main-navigation ul li a,
.site-header .main-navigation ul li a,
#masthead .nav-2 ul li a {
	color: var(--text) !important;
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	padding: 6px var(--space-3) !important;
}

#masthead .main-navigation ul li a:hover,
.site-header .main-navigation ul li a:hover,
#masthead .main-navigation ul li.current-menu-item > a {
	color: var(--amber) !important;
}

/* ─── Global typography ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.1;
}
.ithaca-hero h1,
.ithaca-hero h2,
.ithaca-page-hero h1,
.ithaca-page-hero h2,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.wp-block-heading {
	font-family: var(--font-display) !important;
}

p { margin-top: 0; }

a {
	color: var(--amber);
	text-decoration-color: transparent;
	transition: color 0.15s, text-decoration-color 0.15s;
}

a:hover {
	color: var(--amber-dark);
	text-decoration-color: currentColor;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	transition: opacity 0.15s, transform 0.1s;
}

.wp-block-button__link:hover { opacity: 0.88; transform: translateY(-1px); }

.wp-block-button__link[style*="background-color:#c9843c"],
.wp-block-button__link[style*="background-color: #c9843c"] {
	box-shadow: 0 2px 8px rgba(201,132,60,0.28);
}

/* ─── SSP Audio Player ──────────────────────────────────────────────────────── */
.ssp-castos-player,
.castos-player,
.ssp-player {
	border-radius: var(--radius) !important;
	overflow: hidden;
	margin-bottom: var(--space-10) !important;
	box-shadow: 0 2px 16px rgba(26,15,8,0.08);
}

.castos-player .play-pause-btn,
.ssp-castos-player .play-pause-btn { background-color: var(--amber) !important; }

.castos-player .progress-bar,
.ssp-castos-player .progress-bar   { background-color: var(--amber) !important; }

/* ─── SSP Episode List ──────────────────────────────────────────────────────── */

/* Shortcode wrapper — breathing room after editorial heading */
.ss_podcast,
.widget_ss_podcast .ss_podcast {
	margin-top: var(--space-8);
}

.ssp-podcast-list,
ul.episodes {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ssp-podcast-item,
.episode-container {
	border-top: 1px solid var(--sand-border);
	padding: var(--space-8) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ssp-podcast-item:last-child,
.episode-container:last-child {
	border-bottom: 1px solid var(--sand-border);
}

.ssp-podcast-item .episode-title a,
.episode-container .episode-title a {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--brown);
	text-decoration: none;
	line-height: var(--leading-snug);
	display: block;
}

.ssp-podcast-item .episode-title a:hover,
.episode-container .episode-title a:hover { color: var(--amber); }

.ssp-podcast-item .episode-date,
.ssp-podcast-item .episode-duration,
.episode-container .episode-meta {
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.ssp-podcast-item .episode-excerpt,
.episode-container .episode-excerpt {
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--text);
	max-width: var(--prose-width);
}

/* ─── Episode list (ithaca_episodes shortcode) ────────────────────────────────── */
.ithaca-episode-list {
	max-width: var(--prose-width);
	margin: 0 auto;
}
.ithaca-episode-list__item {
	border-top: 1px solid var(--sand-border);
	padding: var(--space-8) 0;
}
.ithaca-episode-list__item:last-child {
	border-bottom: 1px solid var(--sand-border);
}
.ithaca-episode-list__meta {
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.ithaca-episode-list__dot {
	color: var(--sand-border);
}
.ithaca-episode-list__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-2);
}
.ithaca-episode-list__title a {
	color: var(--brown);
	text-decoration: none;
	transition: color 0.15s;
}
.ithaca-episode-list__title a:hover {
	color: var(--amber);
}
.ithaca-episode-list__excerpt {
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--text);
	margin: 0;
}

/* ─── Episode list — grid variant (home page) ─────────────────────────────────── */
.ithaca-episode-list--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	max-width: none;
	margin-top: var(--space-6);
}
.ithaca-episode-list--grid .ithaca-episode-list__item {
	border-top: none;
	border: 1px solid var(--sand-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	background: var(--off-white);
}
.ithaca-episode-list--grid .ithaca-episode-list__item:last-child {
	border-bottom: 1px solid var(--sand-border);
}
.ithaca-episode-list--grid .ithaca-episode-list__title {
	font-size: var(--text-lg);
}
@media (max-width: 768px) {
	.ithaca-episode-list--grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Episode content (single episode page) ─────────────────────────────────── */
.ithaca-episode-content {
	max-width: 72ch;
}

.ithaca-episode-content p {
	font-size: var(--text-lg);
	line-height: var(--leading-dark);
	color: var(--text);
	margin-bottom: 1.5em;
}

.ithaca-episode-content h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--brown);
	margin: 2.5em 0 0.6em;
	line-height: 1.15;
}

.ithaca-episode-content h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--brown);
	margin: 2em 0 0.5em;
}

.ithaca-episode-content a {
	color: var(--amber);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ithaca-episode-content a:hover { color: var(--amber-dark); }

.ithaca-episode-content ul,
.ithaca-episode-content ol {
	padding-left: 1.5em;
	margin-bottom: 1.5em;
	font-size: var(--text-lg);
	line-height: var(--leading-dark);
}

.ithaca-episode-content blockquote {
	border-left: 3px solid var(--amber);
	padding: var(--space-4) var(--space-6);
	margin: var(--space-10) 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 20px;
	color: var(--brown);
	line-height: 1.5;
}

/* ─── Episode nav (prev / next) ─────────────────────────────────────────────── */
.ithaca-episode-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-6);
}
.ithaca-episode-nav__link {
	transition: opacity 0.15s;
}
.ithaca-episode-nav__link:hover {
	opacity: 0.75;
}
.ithaca-episode-nav__link:hover .ithaca-episode-nav__title {
	color: var(--amber) !important;
}
.ithaca-episode-nav__title {
	transition: color 0.15s;
}

@media (max-width: 640px) {
	.ithaca-episode-nav { flex-direction: column; }
	.ithaca-episode-nav a:last-child { text-align: left !important; }
}

/* ─── Home: editorial section header ────────────────────────────────────────── */
/* The 2px border-bottom heading row — add bottom breathing room */
.ithaca-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: var(--space-5);
	border-bottom: 2px solid var(--brown);
	margin-bottom: 0; /* SSP .ss_podcast margin-top handles the gap */
}

/* ─── Dark section episode list overrides ───────────────────────────────────── */
.ithaca-dark-episodes .ssp-podcast-item,
.ithaca-dark-episodes .episode-container {
	border-top-color: #2a1c10;
}

.ithaca-dark-episodes .ssp-podcast-item:last-child,
.ithaca-dark-episodes .episode-container:last-child {
	border-bottom-color: #2a1c10;
}

.ithaca-dark-episodes .episode-title a     { color: var(--parchment) !important; }
.ithaca-dark-episodes .episode-title a:hover { color: var(--amber) !important; }
.ithaca-dark-episodes .episode-excerpt     { color: var(--text-light) !important; }
.ithaca-dark-episodes .episode-date,
.ithaca-dark-episodes .episode-duration,
.ithaca-dark-episodes .episode-meta        { color: var(--text-muted) !important; }

/* ─── Animation tokens ──────────────────────────────────────────────────────── */
:root {
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Hero entrance — staggered fade+slide on left column children ──────────── */
@keyframes ithaca-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ithaca-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ithaca-hero .wp-block-column:first-child > * {
	animation: ithaca-fade-up 0.65s var(--ease-out-quart) both;
}
.ithaca-hero .wp-block-column:first-child > *:nth-child(1) { animation-delay: 0ms; }
.ithaca-hero .wp-block-column:first-child > *:nth-child(2) { animation-delay: 110ms; }
.ithaca-hero .wp-block-column:first-child > *:nth-child(3) { animation-delay: 210ms; }
.ithaca-hero .wp-block-column:first-child > *:nth-child(4) { animation-delay: 310ms; }
.ithaca-hero .wp-block-column:first-child > *:nth-child(5) { animation-delay: 420ms; }

/* Cover art fades in while text is entering */
.ithaca-hero-cover {
	overflow: hidden;
	display: flex;
	align-items: center;
	animation: ithaca-fade-in 0.9s var(--ease-out-quart) 200ms both;
}

/* Listen On strip — border accents */
.ithaca-listen-strip {
	border-top: 1px solid var(--sand-border);
	border-bottom: 1px solid var(--sand-border);
}

/* About Dia — photo column centering */
.ithaca-photo-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─── Scroll reveal — JS adds .ithaca-reveal; .is-visible triggers transition ── */
.ithaca-reveal {
	transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
}
.ithaca-reveal.is-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* ─── Nav hover — underline slides in from left ─────────────────────────────── */
#masthead .main-navigation ul li a,
.site-header .main-navigation ul li a {
	position: relative;
}
#masthead .main-navigation ul li a::after,
.site-header .main-navigation ul li a::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: var(--space-4);
	right: var(--space-4);
	height: 1.5px;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--ease-out-quart);
}
#masthead .main-navigation ul li a:hover::after,
.site-header .main-navigation ul li a:hover::after,
#masthead .main-navigation ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* ─── Button micro-interactions ─────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	transition: opacity 0.15s, transform 0.18s var(--ease-out-quart), box-shadow 0.18s var(--ease-out-quart) !important;
}
.wp-block-button__link:hover {
	opacity: 1 !important; /* override old rule */
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(212, 144, 67, 0.32) !important;
}
.wp-block-button__link:active {
	transform: translateY(0) scale(0.96) !important;
	transition-duration: 0.08s !important;
	box-shadow: none !important;
}

/* ─── Episode list hover — left-slide indent + bg tint ──────────────────────── */
.ssp-podcast-item,
.episode-container {
	transition: background-color 0.2s var(--ease-out-quart),
	            padding-left 0.2s var(--ease-out-quart),
	            border-color 0.2s;
}
.ssp-podcast-item:hover,
.episode-container:hover {
	background-color: rgba(234, 204, 158, 0.25);
	padding-left: var(--space-4);
}

/* ─── Card hover lift ────────────────────────────────────────────────────────── */
.wp-block-columns .wp-block-column[style*="border-radius"] {
	transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}
.wp-block-columns .wp-block-column[style*="border-radius"]:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(26, 15, 8, 0.14);
}

/* ─── Page hero — consistent banner for all secondary pages ─────────────────── */
.ithaca-page-hero {
	padding-top: 39px !important;
	padding-bottom: 39px !important;
}
.ithaca-page-hero .wp-block-heading.has-text-align-center {
	margin-top: 30px !important;
}

/* Pure CSS staggered entrance — JS scroll-reveal explicitly excludes this class */
.ithaca-page-hero > .wp-block-group__inner-container > * {
	animation: ithaca-fade-up 0.55s var(--ease-out-quart) both;
}
.ithaca-page-hero > .wp-block-group__inner-container > *:nth-child(1) { animation-delay: 0ms; }
.ithaca-page-hero > .wp-block-group__inner-container > *:nth-child(2) { animation-delay: 80ms; }
.ithaca-page-hero > .wp-block-group__inner-container > *:nth-child(3) { animation-delay: 150ms; }
.ithaca-page-hero > .wp-block-group__inner-container > *:nth-child(4) { animation-delay: 220ms; }

/* ─── Delight ────────────────────────────────────────────────────────────────── */

/* Scroll progress bar — thin amber line grows as user scrolls */
#ithaca-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 9999;
	transition: transform 0.08s linear;
	pointer-events: none;
}

/* Hero subscribe form — amber checkmark success state */
.ithaca-check {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--amber);
	flex-shrink: 0;
	position: relative;
}
.ithaca-check::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 8px;
	border-left: 2.5px solid #1a0f08;
	border-bottom: 2.5px solid #1a0f08;
	transform: translate(-50%, -65%) rotate(-45deg);
}


/* Episode title — 32px amber accent line slides out from left on row hover */
.ssp-podcast-item .episode-title a,
.episode-container .episode-title a {
	position: relative;
}
.ssp-podcast-item .episode-title a::after,
.episode-container .episode-title a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 2rem;
	height: 2px;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--ease-out-quart);
}
.ssp-podcast-item:hover .episode-title a::after,
.episode-container:hover .episode-title a::after {
	transform: scaleX(1);
}

/* "Live recording" pulse dot — JS inserts into hero eyebrow */
@keyframes ithaca-pulse-ring {
	0%   { transform: scale(1);   opacity: 0.9; }
	70%  { transform: scale(2.8); opacity: 0;   }
	100% { transform: scale(2.8); opacity: 0;   }
}
.ithaca-pulse-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amber);
	flex-shrink: 0;
	position: relative;
	vertical-align: middle;
	margin-right: 2px;
}
.ithaca-pulse-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--amber);
	animation: ithaca-pulse-ring 2.4s var(--ease-out-expo) 1.2s infinite;
}

/* ─── Reduced motion — respect user preference ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ithaca-hero .wp-block-column:first-child > *,
	.ithaca-hero-cover {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
	.ithaca-reveal {
		transition: none !important;
	}
	.wp-block-button__link,
	.wp-element-button,
	.ssp-podcast-item,
	.episode-container,
	.wp-block-columns .wp-block-column[style*="border-radius"] {
		transition: none !important;
	}
	#masthead .main-navigation ul li a::after,
	.site-header .main-navigation ul li a::after {
		transition: none !important;
	}
	#ithaca-progress { transition: none !important; }
	.ithaca-pulse-dot::after { animation: none !important; }
.ssp-podcast-item .episode-title a::after,
	.episode-container .episode-title a::after { transition: none !important; }
	.ithaca-page-hero > .wp-block-group__inner-container > * {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
	.ithaca-lock-card__cta:hover,
	.ithaca-btn-primary:hover,
	.ithaca-btn-outline:hover,
	.ithaca-btn-text:hover,
	.ithaca-listen-pill:hover {
		transform: none;
		transition: none;
	}
	.ithaca-btn-text .fa-arrow-right,
	.ithaca-btn-text .fas.fa-arrow-right {
		transition: none !important;
	}
}

/* ─── Mobile drawer / hamburger ────────────────────────────────────────────── */

/* Hamburger icon button — warm brown, amber on hover */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
	color: var(--text) !important;
	background: transparent !important;
	border: none !important;
}
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
	color: var(--amber) !important;
}
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
	font-size: 22px;
}

/* Drawer inner panel — off-white background, side border, refined slide */
#mobile-drawer .drawer-inner {
	background-color: var(--off-white) !important;
	color: var(--text) !important;
	max-width: min(90%, 380px) !important;
	border-left: 1px solid var(--sand-border) !important;
	transition: transform 0.35s var(--ease-out-expo) !important;
}

/* Overlay scrim — warm brown at low opacity instead of cold black */
.popup-drawer .drawer-overlay {
	background-color: color-mix(in srgb, var(--brown) 22%, transparent) !important;
}

/* Drawer header — matches our masthead height, bottom divider only */
#mobile-drawer .drawer-header {
	background-color: transparent !important;
	border-bottom: 1px solid var(--sand-border) !important;
	min-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	padding: 0 var(--space-6) !important;
}

/* Close button — no borders or outlines (Kadence auto-focuses it on open) */
#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .drawer-header .drawer-toggle:focus,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible {
	color: var(--text) !important;
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	transition: color 0.15s !important;
}
#mobile-drawer .drawer-header .drawer-toggle:hover {
	color: var(--amber) !important;
}
.toggle-close-bar {
	background-color: currentColor !important;
}

/* Nav links — DM Sans, uppercase, warm dividers */
.mobile-navigation ul li {
	font-size: var(--text-caption) !important;  /* 13px — matches desktop nav */
}
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
	font-family: var(--font-body) !important;
	font-weight: var(--weight-semibold) !important;
	letter-spacing: var(--tracking-nav) !important;
	text-transform: uppercase !important;
	color: var(--text) !important;
	padding: var(--space-5) var(--space-6) !important;
	border-bottom: 1px solid var(--sand-border) !important;
	transition: color 0.15s, padding-left 0.2s var(--ease-out-quart) !important;
}

/* First item — no top border (drawer header already has border-bottom) */
.mobile-navigation ul > li:first-child > a {
	border-top: none !important;
}

/* Hover — amber + subtle indent */
.mobile-navigation ul li > a:hover {
	color: var(--amber) !important;
	padding-left: calc(var(--space-6) + 8px) !important;
}

/* Active / current page — amber */
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap {
	color: var(--amber) !important;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

/* ── 768px: tablet / mobile — stack columns ────────────────────────────────── */
@media (max-width: 768px) {
	.wp-block-columns {
		flex-direction: column;
	}
	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Home hero — override inline padding (64px/48px is too tight when full-width) */
	.ithaca-hero .wp-block-column:first-child {
		padding: 40px 24px !important;
	}

	/* Hero cover art — tighter cap when stacked below text */
	.ithaca-hero-cover {
		max-height: 360px;
	}
	.ithaca-hero-cover > div {
		max-height: 360px;
	}

	/* Episode rows — drop padding-left from transition (layout prop causes reflow on scroll) */
	.ssp-podcast-item,
	.episode-container {
		transition: background-color 0.2s var(--ease-out-quart) !important;
	}
	.ssp-podcast-item:hover,
	.episode-container:hover {
		padding-left: 0 !important;
	}

	/* Dia photo — breathing room below when stacked */
	.wp-block-column[style*="justify-content:center"] {
		margin-bottom: var(--space-6);
	}
}

/* ── 600px: reduce card internal padding on narrow screens ─────────────────── */
@media (max-width: 600px) {
	/* Support page column cards */
	.wp-block-column[style*="border-radius"] {
		padding: 24px !important;
	}

	/* Group-based cards (members welcome card) */
	.wp-block-group[style*="border-radius"][style*="padding:48px"],
	.wp-block-group[style*="border-radius"][style*="padding: 48px"] {
		padding: 24px !important;
	}

	/* Contact primary card (raw HTML div inside wp:html) */
	.wp-block-html div[style*="border-radius"][style*="padding:48px"] {
		padding: 24px !important;
	}

	/* Home hero email subscribe widget */
	.ithaca-hero div[style*="border:1px solid"] {
		padding: 20px 20px !important;
	}

	/* Support share strip — full-width CTA button on narrow viewports */
	.wp-block-group[style*="justify-content:space-between"] .wp-block-button__link,
	.wp-block-group[style*="justify-content: space-between"] .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ── 480px: small phone ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Tighter nav */
	#masthead .main-navigation ul li a,
	.site-header .main-navigation ul li a {
		padding: var(--space-2) var(--space-3) !important;
		font-size: 12px;
	}

	/* Home hero — minimum padding on very small phones */
	.ithaca-hero .wp-block-column:first-child {
		padding: 32px 20px !important;
	}

	/* Cover art quote overlay — hide attribution cite (too small to read) */
	.ithaca-hero-cover cite {
		display: none;
	}
}

/* ─── Shared button interaction states ─────────────────────────────────────── */

/* Primary — amber fill */
.ithaca-btn-primary {
	box-shadow: 0 1px 3px rgba(26,15,8,0.18), 0 1px 2px rgba(26,15,8,0.12);
	transition: transform 0.15s var(--ease-out-quart),
	            background-color 0.15s,
	            box-shadow 0.15s var(--ease-out-quart);
}
.ithaca-btn-primary:hover {
	background-color: var(--amber-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(26,15,8,0.22), 0 2px 4px rgba(26,15,8,0.14);
}
.ithaca-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(26,15,8,0.18);
}
.ithaca-btn-primary:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

/* Outline — dark border on dark background */
.ithaca-btn-outline {
	transition: transform 0.15s var(--ease-out-quart),
	            border-color 0.15s,
	            color 0.15s;
}
.ithaca-btn-outline:hover {
	border-color: var(--text-light) !important;
	color: #f4e6cd !important;
	transform: translateY(-2px);
}
.ithaca-btn-outline:active {
	transform: translateY(0);
}
.ithaca-btn-outline:focus-visible {
	outline: 2px solid var(--text-light);
	outline-offset: 3px;
}

/* Text + arrow */
.ithaca-btn-text {
	transition: color 0.15s, gap 0.15s var(--ease-out-quart);
}
.ithaca-btn-text:hover {
	color: var(--amber) !important;
}
.ithaca-btn-text:hover .fa-arrow-right,
.ithaca-btn-text:hover .fas.fa-arrow-right {
	transform: translateX(3px);
}
.ithaca-btn-text .fa-arrow-right,
.ithaca-btn-text .fas.fa-arrow-right {
	transition: transform 0.15s var(--ease-out-quart);
}
.ithaca-btn-text--light:hover {
	color: #f4e6cd !important;
}
.ithaca-btn-text:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Listen strip pill */
.ithaca-listen-pill {
	transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--ease-out-quart);
}
.ithaca-listen-pill:hover {
	background-color: #fff !important;
	border-color: var(--amber) !important;
	transform: translateY(-1px);
}
.ithaca-listen-pill:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

/* ─── Members onboarding step cards ─────────────────────────────────────────── */
.ithaca-step-card {
	padding: var(--space-12); /* 48px */
}
.ithaca-step-card h3 {
	overflow-wrap: break-word;
	word-break: break-word;
}

@media (max-width: 600px) {
	.ithaca-step-card {
		padding: var(--space-6); /* 24px */
	}
}

@media (max-width: 480px) {
	.ithaca-step-card__inner {
		flex-direction: column !important;
	}
	.ithaca-step-card__badge {
		margin-bottom: var(--space-3);
	}
}

/* ─── Kit email form — outer container + field overrides ───────────────────── */
.formkit-form[data-uid] {
	background-color: var(--off-white) !important;
	border: 1px solid var(--sand-border) !important;
	border-radius: 10px !important;
	padding: 24px 28px !important;
	max-width: 560px !important;
	margin: 0 !important;
}
.formkit-form[data-uid] .formkit-alert {
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

@media (max-width: 600px) {
	.formkit-form[data-uid] {
		padding: var(--space-6) !important; /* 24px — match lock card mobile */
	}
}

/* ─── Patron Plugin Pro — lock message card ────────────────────────────────── */
.ithaca-lock-card {
	background-color: var(--off-white);
	border: 1px solid var(--sand-border);
	border-radius: var(--radius-lg);
	padding: var(--space-12);
	max-width: 560px;
	margin: var(--space-8) auto;
	text-align: center;
}
.ithaca-lock-card__icon {
	color: var(--amber);
	font-size: 1.5rem;
	margin: 0 0 var(--space-4);
	display: block;
}
.ithaca-lock-card__heading {
	font-family: var(--font-display);
	color: var(--brown);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-3);
	overflow-wrap: break-word;
	word-break: break-word;
}
.ithaca-lock-card__subtitle {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
	margin: 0 0 var(--space-6);
	overflow-wrap: break-word;
}
.ithaca-lock-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--amber);
	color: var(--brown);
	padding: 13px 24px;
	border-radius: 6px;
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	text-decoration: none;
}
.ithaca-lock-card__cta:hover {
	background-color: var(--amber-dark);
	transform: translateY(-2px);
	transition: transform 0.15s var(--ease-out-quart), background-color 0.15s;
}
.ithaca-lock-card__already {
	color: var(--text-muted);
	font-size: 0.8125rem;
	margin: var(--space-4) 0 0;
}
.ithaca-lock-card__already a {
	color: var(--amber);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

@media (max-width: 600px) {
	.ithaca-lock-card {
		padding: var(--space-6);
	}
}

/* ─── Patron Plugin Pro — OAuth button override ────────────────────────────── */
/* VERIFY class names after installing Patron Plugin Pro — inspect in DevTools  */
.ppp-patron-only-message,
.ppp-connect-button-wrap {
	text-align: center;
	margin: var(--space-8) 0;
}
.ppp-patron-only-message a,
.ppp-connect-button-wrap a,
.ppp-patron-only-message button,
.ppp-connect-button-wrap button {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--space-2) !important;
	background-color: var(--amber) !important;
	color: var(--brown) !important;
	padding: 13px 24px !important;
	border-radius: 6px !important;
	font-family: var(--font-body) !important;
	font-weight: var(--weight-bold) !important;
	font-size: var(--text-sm) !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
}

/* ─── Members extended cut section header ──────────────────────────────────── */
.ithaca-members-header {
	border-top: 3px solid var(--amber);
	padding-top: var(--space-8);
	margin-top: var(--space-8);
}
.ithaca-members-header__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-3);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.ithaca-members-header__heading {
	font-family: var(--font-display);
	color: var(--brown);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-6);
	overflow-wrap: break-word;
	word-break: break-word;
}