/* ==========================================================================
   Yak Theme - Main Stylesheet
   ==========================================================================

   Theme Name: YCV by Chris Liu-Beers
   Theme URI: http://www.tomatillodesign.com/yak
   Author: Chris Liu-Beers @ Tomatillo Design
   Description: Yak is a lightweight, highly customized Genesis child theme created for modern WordPress development workflows. Built with accessibility, performance, and flexibility in mind, it serves as a rock-solid foundation for custom projects, particularly when paired with Advanced Custom Fields Pro and the Genesis Framework. Yak includes carefully layered CSS architecture, robust block editor support, and a growing ecosystem of companion plugins (all GitHub-based). The theme is intended for developers and agencies who want full control over design systems, layout tooling, and editor behavior without bloated features or opinionated design defaults.
   Version: 1.0.5
   Template: genesis
   Text Domain: yak
   Requires at least: 6.8
   Requires PHP: 8.2

   ==========================================================================
   📁 Table of Contents
   ==========================================================================

   1. RESET — Normalize browser defaults
   2. BASE — Root variables, typography, spacing, defaults
      2.1 CSS Variables
      2.2 Typography & Body
      2.3 Accessibility (skip links)
      2.4 Entry Content Defaults
      2.5 Visibility Helpers
   3. BLOCKS — Gutenberg Block Styling (external file)
   4. LAYOUT — Page structure & layout helpers
      4.1 Global Containers
      4.2 Header & Footer
      4.3 Pull-Left / Pull-Right
      4.4 Archive Layouts: List & Card
      4.5 Featured Image Overlays
      4.6 Container Queries
      4.7 Responsive Breakpoints
      4.8 Search Results
   5. COMPONENTS — UI elements (buttons, nav, modals)
      5.1 Buttons
      5.2 Modal
      5.3 Collapse
      5.4 Desktop Navigation
      5.5 Mega Menu
      5.6 Mobile Navigation
      5.7 Header Toggle / Highlight Links
      5.8 Featured Image Title / Hello Bar / Separator
      5.9 Back To Top
   6. UTILITIES — Utility classes
      6.1 Visually Hidden / SR Text
      6.2 Font Sizes
      6.3 Text Alignment
   7. OVERRIDES — Optional last-layer custom overrides
*/

@layer reset, yak-base, yak-blocks, yak-layout, yak-components, yak-utilities, yak-overrides;

@import url('css/yak-overrides.css') layer(yak-overrides);

/* ==========================================================================
   1. RESET — Normalize browser defaults
   ========================================================================== */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html, body { height: 100%; }
	body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; }
	input, button, textarea, select { font: inherit; }
	p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
	#root, #__next { isolation: isolate; }
}

/* ==========================================================================
   2. BASE — Root variables, typography, spacing, defaults
   ========================================================================== */
@layer yak-base {
/* ----------------------------------------
	 2.1 CSS Variables (Colors, Fonts, Spacing)
---------------------------------------- */
	:root {

		/* 🎨 WP Color Presets */
		--wp--preset--color--black: #000;
		--wp--preset--color--white: #fff;
		--wp--preset--color--primary: var(--yak-color-primary);
		--wp--preset--color--secondary: #666;
		--wp--preset--color--tertiary: #ccc;
		--wp--preset--color--foreground: var(--yak-color-black);
		--wp--preset--color--background: var(--yak-color-white);
		--wp--preset--color--contrast: var(--yak-color-muted);

		/* 🔤 WP Font Presets */
		--wp--preset--font-size--small: 0.875rem;
		--wp--preset--font-size--medium: var(--yak-font-md);
		--wp--preset--font-size--large: var(--yak-font-lg);
		--wp--preset--font-size--x-large: var(--yak-font-xl);
		--wp--preset--font-size--xx-large: var(--yak-font-2xl);

		--wp--preset--font-family--system-font: system-ui, sans-serif;
		--wp--preset--font-family--serif: Georgia, serif;
		--wp--preset--font-family--sans-serif: Helvetica, Arial, sans-serif;
		--wp--preset--font-family--monospace: Menlo, monospace;

		/* 📏 WP Spacing Presets */
		--wp--preset--spacing--10: 0.625rem;
		--wp--preset--spacing--20: 1rem;
		--wp--preset--spacing--30: 1.5rem;
		--wp--preset--spacing--40: 2rem;
		--wp--preset--spacing--50: 3rem;
		--wp--preset--spacing--60: 4rem;
		--wp--preset--spacing--70: 6rem;
		--wp--preset--spacing--80: 8rem;
		--wp--preset--spacing--90: 12rem;
		--wp--preset--spacing--100: 16rem;
		--wp--style--block-gap: var(--wp--preset--spacing--30);

		/* 🖼️ Gallery Defaults */
		--wp--style--gallery-gap-default: var(--wp--preset--spacing--20);
		--wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default);

		/* 🧱 Global Layout */
		--wp--style--global--content-size: var(--yak-content-max-width);
		--wp--style--global--wide-size: min(90rem, 100vw);

		/* Yak Font Settings */
		--yak-primary-font: system-ui, sans-serif;
		--yak-secondary-font: var(--yak-primary-font);
		--yak-accent-font: var(--yak-primary-font);
		--yak-font-base-px: 18;
		--yak-font-base: calc(var(--yak-font-base-px) * 1px);
		--yak-type-ratio: 1.25;
		--yak-font-xs: calc(var(--yak-font-base) / (var(--yak-type-ratio) * var(--yak-type-ratio)));
		--yak-font-sm: calc(var(--yak-font-base) / var(--yak-type-ratio));
		--yak-font-md: var(--yak-font-base);
		--yak-font-lg: calc(var(--yak-font-md) * var(--yak-type-ratio));
		--yak-font-xl: calc(var(--yak-font-lg) * var(--yak-type-ratio));
		--yak-font-2xl: calc(var(--yak-font-xl) * var(--yak-type-ratio));
		--yak-font-3xl: calc(var(--yak-font-2xl) * var(--yak-type-ratio));
		--yak-font-4xl: calc(var(--yak-font-3xl) * var(--yak-type-ratio));
		--yak-font-5xl: calc(var(--yak-font-4xl) * var(--yak-type-ratio));
		--yak-font-6xl: calc(var(--yak-font-5xl) * var(--yak-type-ratio));

		/* Dynamic Line Heights */
		--yak-lh-xs: 1.84;
		--yak-lh-sm: 1.78;
		--yak-lh-md: 1.65;
		--yak-lh-lg: 1.45;
		--yak-lh-xl: 1.32;
		--yak-lh-2xl: 1.22;
		--yak-lh-3xl: 1.15;
		--yak-lh-4xl: 1.1;
		--yak-lh-5xl: 1.05;
		--yak-lh-6xl: 1;

		/* Yak Color Tokens */
		--yak-color-black: #000;
		--yak-color-white: #fff;
		--yak-color-primary: #2363e0;
		--yak-color-muted: #DCE3EA;

		/* Layout Utilities */
		--yak-radius: 3px;
		--yak-content-max-width: 75ch;
		/* Same px as 75ch @ 18px when html is 16px (849/16); pairs with yak-editor-bridge */
		--yak-content-size-cap-rem: 53.0625rem;
		--yak-padding-block: 2rem;
		--yak-padding-block-mobile: 1.5rem;
	}

	/* ----------------------------------------
	 2.2 Typography & Body
	---------------------------------------- */
	html {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		scroll-behavior: smooth;
	}

	body {
		font-family: var(--yak-primary-font);
		font-size: var(--yak-font-md);
		line-height: var(--yak-lh-md);
		font-weight: 400;
		color: var(--yak-color-black);
		background-color: var(--yak-color-white);
		letter-spacing: 0.01em;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* ----------------------------------------
	 2.3 Accessibility (skip links)
	---------------------------------------- */
	.genesis-skip-link,
	.yak-hide-site-description p.site-description {
		position: absolute;
		left: -9999px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	.genesis-skip-link:focus {
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
		padding: 1em;
		background: #000;
		color: #fff;
		z-index: 1000;
		clip: auto;
		white-space: normal;
	}

	/* ----------------------------------------
	 2.4 Entry Content Defaults
	---------------------------------------- */
	.entry-content {
		position: relative;
		z-index: 0;
		text-wrap: pretty;
	}

	a {
		color: var(--yak-color-primary);
		text-decoration: underline;
		transition: all 0.2s ease-in-out;
	}
	a:hover,
	a:focus {
		text-decoration: none;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--yak-secondary-font);
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 1rem;
	}
	h1 { font-size: var(--yak-font-3xl); }
	h2 { font-size: var(--yak-font-xl); }
	h3 { font-size: var(--yak-font-lg); }
	h4 { font-size: var(--yak-font-md); }
	h5 { font-size: var(--yak-font-sm); }
	h6 { font-size: var(--yak-font-xs); }

	.wp-singular h1.entry-title {
		text-align: center;
	}

	p {
		margin-bottom: 1.5rem;
	}

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

	.site-title {
		font-family: var(--yak-secondary-font);
		font-size: 1.75rem;
		margin: 0;
	}
	.site-title a {
		text-decoration: none;
		color: inherit;
	}
	.site-description {
		font-size: 1rem;
		color: #666;
		margin: 0;
	}

	.entry-content > *:first-child { margin-top: 0; }
	.entry-content > *:last-child { margin-bottom: 0; }

	.entry-content h1,
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content h5,
	.entry-content h6 {
		margin-top: 2.5rem;
		margin-bottom: 1rem;
		line-height: 1.25;
	}

	.entry-content p,
	.entry-content ul,
	.entry-content ol,
	.entry-content blockquote,
	.entry-content pre,
	.entry-content table,
	.entry-content figure {
		margin-bottom: 1.75rem;
	}

	.entry-content ul,
	.entry-content ol {
		padding-left: 1.5rem;
	}

	/* Core Quote block: styles live in css/yak-overrides.css (yak-overrides layer beats yak-blocks) */

	.entry-content code,
	.entry-content pre {
		font-family: monospace;
		font-size: 0.95em;
		background-color: #f0f0f0;
		padding: 0.2em 0.4em;
		border-radius: 4px;
	}

	.entry-content > p:last-child,
	.yak-box > p:last-child,
	.yak-card > p:last-child,
	footer p:last-child,
	.site-footer p:last-child {
		margin-bottom: 0;
	}

	.entry-content > p:last-of-type:last-child {
		margin-bottom: 0;
	}

	/* ----------------------------------------
	 2.5 Visibility Helpers
	---------------------------------------- */
	@media (max-width: 960px) {
		.yak-desktop-only {
			display: none !important;
		}
	}

	@media (min-width: 960px) {
		.yak-mobile-only {
			display: none !important;
		}
	}
}

/* ==========================================================================
   3. BLOCKS — Gutenberg Block Styling (external file)
   ========================================================================== */
/* yak-blocks layer is defined in a separate file to override core block editor styles.
	see /css/yak-blocks.css
	detailed comment and explanation at the top of that file
*/

/* ==========================================================================
   4. LAYOUT — Page structure & layout helpers
   ========================================================================== */
   @layer yak-layout {

	/* ----------------------------------------
		4.1 Global Containers
	---------------------------------------- */
	.site-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.site-inner {
		flex-grow: 1;
		padding-block: 2rem;
		position: relative;
		z-index: 1;
	}

	.content-sidebar-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		max-width: min(var(--yak-content-max-width, 75ch), calc(100vw - 4rem));
		margin-inline: auto;
		padding-inline: 2rem;
	}

	/* Responsive padding and max-width for different screen sizes */
	@media (max-width: 1200px) {
		.content-sidebar-wrap {
			max-width: min(var(--yak-content-max-width, 75ch), calc(100vw - 3rem));
			padding-inline: 1.5rem;
		}
	}

	@media (max-width: 768px) {
		.content-sidebar-wrap {
			max-width: calc(100vw - 2rem);
			padding-inline: 1rem;
		}
	}

	@media (max-width: 480px) {
		.content-sidebar-wrap {
			max-width: calc(100vw - 1rem);
			padding-inline: 0.5rem;
		}
	}

	.content {
		flex: 1 1 100%;
	}

	/* ----------------------------------------
		4.2 Header & Footer
	---------------------------------------- */
	.site-header {
		background: #fff;
		padding: 1rem 2rem;
		box-shadow: 0 0 12px rgba(0, 0, 0, .1);
		transition: padding 0.25s ease;
	}

	.site-header > .wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;
		flex-wrap: nowrap;
		transition: gap 0.25s ease;
	}

	.title-area {
		display: flex;
		align-items: center;
		gap: 1rem;
		transform-origin: left center;
		transition: transform 0.3s ease;
	}

	.yak-site-logo {
		display: inline-block;
		flex-shrink: 0;
		transition: max-width 0.25s ease;
	}

	.yak-title-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.site-title {
		font-size: 1.8rem;
		font-weight: 700;
		margin: 0;
		line-height: 1.2;
	}

	.site-title a {
		text-decoration: none;
		color: inherit;
	}

	.site-description {
		font-size: 1rem;
		color: #666;
		margin-top: 0.3em;
	}

	.site-footer {
		padding: 2rem 1rem;
		background: var(--dark-blue);
		text-align: center;
		font-size: var(--yak-font-sm);
		color: var(--yak-color-white);
	}

	.site-footer a {
		color: var(--yak-color-white);
		text-decoration: none;
	}
	.site-footer a:hover {
		text-decoration: underline;
	}

	.yak-footer-widgets-outer-wrapper {
		width: 100%;
		background: var(--yak-color-muted);
		margin-top: 4rem;
	}

	/* `minmax(0, 1fr)` not `1fr`: a bare `1fr` is `minmax(auto, 1fr)`, whose `auto`
	   floor is the item's min-content width. The signup form and social-icon rows in
	   these widgets have a min-content wider than a phone, so the track grew past the
	   container (399px inside a 311px content box at 375px) and pushed the whole page
	   into horizontal scroll. `minmax(0, …)` lets the track shrink below min-content. */
	.yak-footer-widgets {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding: 2rem;
		max-width: 1280px;
		margin-inline: auto;
		width: 100%;
	}

	/* ----------------------------------------
		4.3 Pull-Left / Pull-Right
	---------------------------------------- */
	.yak-pull-left.yak-pull-measuring,
	.yak-pull-right.yak-pull-measuring {
		float: none !important;
		margin: 0 !important;
	}

	.yak-pull-left.yak-pull-active {
		float: left;
		margin-inline-start: -150px;
		margin-inline-end: 2em;
		max-width: min(66%, 500px);
	}

	.yak-pull-right.yak-pull-active {
		float: right;
		margin-inline-end: -150px;
		margin-inline-start: 2em;
		max-width: min(66%, 500px);
	}

	/* ----------------------------------------
		4.4 Archive Layouts: List & Card
	---------------------------------------- */
	h1.archive-title {
		text-align: center;
	}

	.yak-blog-page-content {
		margin-bottom: 4rem;
	}

	/* --- Shared article surface --- */
	.yak-archive-wrapper article {
		background: var(--yak-color-white);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
		border-radius: 0.5rem;
		border: 1px solid color-mix(in srgb, var(--yak-color-black) 6%, transparent);
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

	.yak-archive-wrapper article:hover {
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
		transform: translateY(-2px);
	}

	/* --- Body padding & typography --- */
	.yak-archive-wrapper .yak-archive-body {
		padding: 1.5rem 2rem 2rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.yak-archive-wrapper .yak-archive-body h2 {
		margin: 0;
		font-size: var(--yak-font-lg);
		line-height: var(--yak-lh-lg);
		letter-spacing: -0.01em;
	}

	.yak-archive-wrapper .yak-archive-body h2 a {
		text-decoration: none;
		color: inherit;
	}

	.yak-archive-wrapper .yak-archive-body h2 a:hover {
		color: var(--yak-color-primary);
	}

	.yak-archive-wrapper .yak-archive-body p:last-of-type {
		margin-bottom: 0;
	}

	/* --- Date --- */
	.yak-entry-date {
		display: block;
		font-size: 0.8rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: color-mix(in srgb, var(--yak-color-black) 45%, transparent);
		margin: 0;
	}

	/* --- Excerpt --- */
	.yak-entry-excerpt {
		color: color-mix(in srgb, var(--yak-color-black) 70%, transparent);
		font-size: 0.95rem;
		line-height: 1.6;
	}

	.yak-entry-excerpt p {
		margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* --- Read more link --- */
	.yak-read-more {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--yak-color-primary);
		text-decoration: none;
		margin-top: auto;
		padding-top: 0.25rem;
		transition: gap 0.2s ease;
	}

	.yak-read-more:hover {
		gap: 0.5em;
	}

	/* --- Image shared --- */
	.yak-archive-image {
		display: flex;
		align-items: stretch;
		overflow: hidden;
		height: auto;
	}

	.yak-archive-image a {
		display: block;
		height: 100%;
		width: 100%;
	}

	.yak-archive-image picture {
		display: block;
		height: 100%;
		width: 100%;
	}

	.yak-archive-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.4s ease;
	}

	.yak-archive-wrapper article:hover .yak-archive-image img {
		transform: scale(1.04);
	}

	/* --- Container setup --- */
	.yak-archive-card {
		container-type: inline-size;
		container-name: yakCard;
		display: block;
	}

	/* ============================================
	   List Format
	   ============================================ */
	.yak-archive-wrapper.yak-blog-format-list {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-archive-entry.yak-has-thumbnail {
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: 0;
		align-items: stretch;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-archive-image {
		border-radius: 0.5rem 0 0 0.5rem;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-archive-image img {
		aspect-ratio: 4 / 3;
	}

	/* --- Featured first post (list) --- */
	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post {
		margin-bottom: 1rem;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post .yak-archive-entry.yak-has-thumbnail {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post .yak-archive-image {
		border-radius: 0.5rem 0.5rem 0 0;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post .yak-archive-image img {
		aspect-ratio: 21 / 9;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post .yak-archive-body {
		padding: 2rem 2.5rem 2.5rem;
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post h2 {
		font-size: var(--yak-font-xl);
		line-height: var(--yak-lh-xl);
	}

	.yak-archive-wrapper.yak-blog-format-list .yak-featured-post .yak-entry-excerpt p {
		-webkit-line-clamp: 4;
		font-size: 1rem;
	}

	/* ============================================
	   Card Format
	   ============================================ */
	.yak-archive-wrapper.yak-blog-format-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.5rem;
		justify-content: center;
	}

	.yak-archive-wrapper.yak-blog-format-cards > * {
		max-width: 420px;
		width: 100%;
		margin-inline: auto;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-archive-image {
		aspect-ratio: 16 / 10;
		overflow: hidden;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	/* --- Featured first post (cards) — span full width --- */
	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post {
		grid-column: 1 / -1;
		max-width: none;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-entry.yak-has-thumbnail {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: stretch;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-image {
		aspect-ratio: auto;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-image {
		border-radius: 0.5rem 0 0 0.5rem;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-image img {
		min-height: 320px;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-body {
		padding: 2rem 2.5rem 2.5rem;
		justify-content: center;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post h2 {
		font-size: var(--yak-font-xl);
		line-height: var(--yak-lh-xl);
	}

	/* --- Missing thumbnail: clean layout --- */
	.yak-archive-entry.yak-missing-thumbnail {
		display: block;
	}

	.yak-archive-entry.yak-missing-thumbnail .yak-archive-body {
		border-left: 3px solid var(--yak-color-primary);
	}

	/* ============================================
	   Pagination
	   ============================================ */
	.archive-pagination {
		display: flex;
		justify-content: center;
		margin: 3rem 0 2rem;
	}

	.archive-pagination ul {
		display: flex;
		gap: 0.375rem;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.archive-pagination li a,
	.archive-pagination li span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.25rem;
		height: 2.25rem;
		padding: 0 0.75rem;
		background-color: var(--yak-color-white);
		color: var(--yak-color-black);
		text-decoration: none;
		border-radius: 0.375rem;
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1;
		border: 1px solid color-mix(in srgb, var(--yak-color-black) 10%, transparent);
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.archive-pagination li a:hover,
	.archive-pagination li a:focus-visible {
		background-color: var(--yak-color-primary);
		border-color: var(--yak-color-primary);
		color: var(--yak-color-white);
	}

	.archive-pagination li.active a,
	.archive-pagination li .current {
		background-color: var(--yak-color-primary);
		border-color: var(--yak-color-primary);
		color: var(--yak-color-white);
		cursor: default;
	}

	/* ----------------------------------------
		4.5 Featured Image Overlays
	---------------------------------------- */
	.yak-featured-image-wrapper {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2rem;
		border-radius: var(--yak-radius);
		overflow: hidden;
	}

	h1.entry-title {
		margin-bottom: 0;
	}

	.entry-header {
		margin-top: 2rem;
		margin-bottom: 4rem;
	}

	/*
	 * Single post entry meta — YCV tokens with Yak fallbacks; inc/yak-single-post-attribution.php
	 */
	.yak-entry-meta {
		--yak-em-accent: var(--ycvds-color-accent, var(--yak-color-accent, #f26522));
		box-sizing: border-box;
		font-family: var(--ycvds-font-base, var(--yak-primary-font, system-ui, sans-serif));
		font-size: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
		line-height: var(--ycvds-leading-normal, 1.5);
		font-weight: var(--ycvds-weight-regular, 400);
		margin: 0 0 var(--ycvds-spacing-lg, 1.25rem);
		padding: 0.65rem 1rem;
		background: color-mix(
			in srgb,
			var(--ycvds-color-muted, var(--yak-color-muted, #dce3ea)) 38%,
			var(--ycvds-color-surface, var(--yak-color-white, #fff))
		);
		border: 1px solid color-mix(in srgb, var(--ycvds-color-text, var(--yak-color-text, #1a1a2e)) 8%, transparent);
		border-left: 3px solid var(--yak-em-accent);
		border-radius: var(--ycvds-radius, 0.5rem);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
		color: var(--ycvds-color-text, var(--yak-color-text, #1a1a2e));
		max-width: 100%;
	}

	.yak-entry-meta__inner {
		display: block;
	}

	.yak-entry-meta__lead {
		margin: 0;
		font-weight: var(--ycvds-weight-regular, 400);
	}

	@media (min-width: 720px) {
		.yak-entry-meta__inner {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: baseline;
			column-gap: 1.5rem;
			row-gap: 0.35rem;
		}

		.yak-entry-meta__lead {
			flex: 0 1 auto;
			min-width: 0;
		}

		.yak-entry-meta__credit {
			flex: 1 1 auto;
			min-width: min(100%, 12rem);
			max-width: min(100%, 50%);
			margin-top: 0;
			margin-left: auto;
			text-align: right;
		}

		.yak-entry-meta__credit p {
			margin-top: 0;
			margin-bottom: 0;
			text-align: right;
		}
	}

	.yak-entry-meta__time {
		font-variant-numeric: tabular-nums;
	}

	.yak-entry-meta__sep {
		color: var(--ycvds-color-text-light, var(--yak-color-text-light, #6b7280));
		font-weight: var(--ycvds-weight-regular, 400);
		user-select: none;
	}

	.yak-entry-meta__by-prefix {
		color: var(--ycvds-color-text-light, var(--yak-color-text-light, #6b7280));
	}

	.yak-entry-meta__name {
		color: inherit;
		font-weight: var(--ycvds-weight-regular, 400);
	}

	a.yak-entry-meta__name--link {
		color: var(--ycvds-color-primary, var(--yak-color-primary, #1a1a2e));
		text-decoration: underline;
		text-decoration-color: color-mix(in srgb, var(--ycvds-color-primary, #1a1a2e) 35%, transparent);
		text-underline-offset: 0.12em;
		font-weight: var(--ycvds-weight-regular, 400);
	}

	a.yak-entry-meta__name--link:hover,
	a.yak-entry-meta__name--link:focus-visible {
		color: var(--yak-em-accent);
		text-decoration-color: color-mix(in srgb, var(--yak-em-accent) 50%, transparent);
	}

	.yak-entry-meta__credit {
		margin: 0.35rem 0 0;
		padding: 0;
		border: none;
		font-size: inherit;
		line-height: inherit;
		font-weight: var(--ycvds-weight-regular, 400);
		color: var(--ycvds-color-text-light, var(--yak-color-text-light, #6b7280));
	}

	.yak-entry-meta__credit p {
		margin: 0.35rem 0 0;
		font-size: inherit;
		line-height: inherit;
		font-weight: inherit;
		color: inherit;
	}

	.yak-entry-meta__credit p:first-child {
		margin-top: 0;
	}

	.yak-entry-meta__credit p:last-child {
		margin-bottom: 0;
	}

	.yak-entry-meta__credit a {
		color: var(--ycvds-color-primary, var(--yak-color-primary, #1a1a2e));
		text-decoration: underline;
		text-underline-offset: 0.12em;
		font-weight: var(--ycvds-weight-regular, 400);
	}

	.yak-entry-meta__credit a:hover,
	.yak-entry-meta__credit a:focus-visible {
		color: var(--yak-em-accent);
	}

	.yak-author-box {
		margin: 2.5rem 0 0;
		padding: 1.25rem;
		border: 1px solid color-mix(in srgb, var(--yak-color-black) 8%, transparent);
		border-radius: var(--yak-radius);
		/* Match `.yak-footer-widgets-outer-wrapper` band fill */
		background: var(--yak-color-muted);
	}

	.yak-author-box__inner {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
	}

	.yak-author-box__avatar {
		flex-shrink: 0;
		width: 96px;
		height: 96px;
		overflow: hidden;
		border-radius: 50%;
		background: var(--yak-color-white);
	}

	.yak-author-box__avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.yak-author-box__header {
		line-height: 1.25;
	}

	.yak-author-box__name {
		font-weight: 700;
		font-size: var(--yak-font-lg);
		color: var(--yak-color-black);
	}

	.yak-author-box__pronouns {
		font-size: var(--yak-font-sm);
		color: var(--yak-color-muted-text, #4d4d4d);
		font-weight: 400;
	}

	.yak-author-box__position {
		font-size: var(--yak-font-sm);
		font-weight: 600;
		margin: 0.35rem 0 0.5rem;
		color: var(--yak-color-black);
	}

	.yak-author-box__bio {
		font-size: var(--yak-font-sm);
		line-height: 1.55;
	}

	.yak-author-box__bio p:last-child {
		margin-bottom: 0;
	}

	@media (max-width: 480px) {
		.yak-author-box__inner {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
	}

	.error404 h1.entry-title {
		margin-top: 2rem;
	}

	/* ----------------------------------------
		4.6 Container Queries
	---------------------------------------- */
	@container yakCard (max-width: 700px) {
		.yak-archive-wrapper.yak-blog-format-list .yak-archive-card > .yak-archive-entry.yak-has-thumbnail {
			display: flex;
			flex-direction: column;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-card > .yak-archive-entry .yak-archive-image {
			order: 1;
			width: 100%;
			height: auto;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-card > .yak-archive-entry .yak-archive-image {
			border-radius: 0.5rem 0.5rem 0 0;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-card > .yak-archive-entry .yak-archive-image img {
			aspect-ratio: 16 / 9;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-card > .yak-archive-entry .yak-archive-body {
			order: 2;
			padding: 1.25rem 1.5rem 1.5rem;
		}
	}

	/* Featured post responsive: stack on small viewports */
	@container yakCard (max-width: 500px) {
		.yak-featured-post .yak-archive-body {
			padding: 1.25rem 1.5rem 1.5rem;
		}

		.yak-featured-post h2 {
			font-size: var(--yak-font-lg) !important;
		}
	}

	/* Featured card layout: stack side-by-side on small viewports */
	@media (max-width: 768px) {
		.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-entry.yak-has-thumbnail {
			grid-template-columns: 1fr;
		}

		.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-image {
			border-radius: 0.5rem 0.5rem 0 0;
		}

		.yak-archive-wrapper.yak-blog-format-cards .yak-featured-post .yak-archive-image img {
			min-height: 200px;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-entry.yak-has-thumbnail {
			grid-template-columns: 200px 1fr;
		}
	}

	@media (max-width: 580px) {
		.yak-archive-wrapper.yak-blog-format-list .yak-archive-entry.yak-has-thumbnail {
			grid-template-columns: 1fr;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-image {
			border-radius: 0.5rem 0.5rem 0 0;
		}

		.yak-archive-wrapper.yak-blog-format-list .yak-archive-image img {
			aspect-ratio: 16 / 9;
		}
	}

	/* ----------------------------------------
		4.7 Responsive Breakpoints
	---------------------------------------- */
	@media (min-width: 960px) {
		.content {
			flex: 1 1 70%;
			min-width: 0;
                        width: 100%;
		}

		/* ===== Action Bar (Above Header) ===== */
		.yak-action-bar {
			background-color: var(--ycv-light-blue);
			color: var(--dark-blue);
			font-size: 1rem;
			line-height: 1;
		}

		.yak-action-bar > .wrap {
			padding: 0.4rem 2rem;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.yak-action-bar .yak-action-menu {
			display: flex;
			align-items: center;
			gap: 1.25rem;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.yak-action-bar .yak-action-menu a,
		.yak-action-bar .yak-action-menu a:visited {
			color: var(--dark-blue);
			text-decoration: none !important;
			border-bottom: none !important;
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			gap: 0.3em;
			transition: opacity 0.2s ease;
			padding: 0.25rem 0;
		}

		.yak-action-bar .yak-action-menu a:hover,
		.yak-action-bar .yak-action-menu a:focus {
			opacity: 0.7;
			text-decoration: none !important;
			border-bottom: none !important;
		}

		.yak-action-bar .yak-action-menu i[class*="ph-"] {
			font-size: 1.3em;
		}

		/* ===== Main Nav Phosphor Icons ===== */
		.yak-main-nav > li > a i[class*="ph-"] {
			font-size: 1.3em;
			vertical-align: -0.15em;
			display: inline-block;
			max-width: 1.5em;
			opacity: 1;
			overflow: hidden;
			transition: max-width 0.25s ease, opacity 0.2s ease;
		}


		.nav-primary {
			flex-grow: 1;
			min-width: 0;
		}

		.nav-primary .wrap {
			display: flex;
			justify-content: flex-end;
		}

		.genesis-nav-menu {
			display: flex;
			gap: 2rem;
			margin: 0;
			padding: 0;
			list-style: none;
			align-items: center;
		}

		.genesis-nav-menu a {
			text-decoration: none;
			font-weight: 500;
			color: #222;
			padding: 0.5rem 0;
			display: inline-block;
		}

		.genesis-nav-menu a:hover,
		.genesis-nav-menu a:focus,
		.genesis-nav-menu .current-menu-item > a {
			color: var(--yak-color-primary, #222);
		}

		/* minmax(0, …) throughout — see the note on `.yak-footer-widgets`. Multi-column
		   tracks are the more likely blowout, since each track is proportionally narrower. */
		.yak-footer-widgets-1 { grid-template-columns: minmax(0, 1fr); }
		.yak-footer-widgets-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.yak-footer-widgets-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.yak-footer-widgets-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

		.yak-footer-widget-column {
			padding: 0 1rem;
		}

		body.yak-has-sticky-header .site-header {
			position: sticky;
			top: 0;
			transition: all ease-in-out .5s;
			z-index: 100;
			background: var(--yak-color-header-bg, #fff);
		}

		body.yak-has-sticky-header.yak-scrolled .site-header {
			padding-top: 4px;
			padding-bottom: 4px;
		}

		body.yak-has-sticky-header.admin-bar .site-header {
			top: 32px;
		}

		body.yak-scrolled.yak-sticky-header-enabled .title-area {
			transform: scale(0.85);
		}
	}

	/* ===== Header Compact Mode (JS-driven via body.yak-header-compact) ===== */
	/* Activates when JS detects nav items won't fit in a single row.          */
	/* Strips icons, carats, and tightens spacing to keep everything on one line. */

	body.yak-header-compact .site-header {
		padding: 0.75rem 1rem;
	}

	body.yak-header-compact .site-header > .wrap {
		gap: 1rem;
	}

	body.yak-header-compact .yak-site-logo {
		max-width: 140px !important;
	}

	body.yak-header-compact .genesis-nav-menu,
	body.yak-header-compact .yak-main-nav {
		gap: 0.5rem;
	}

	body.yak-header-compact .yak-main-nav > li > a {
		font-size: 0.9rem;
		padding: 0.5rem 0.25rem;
	}

	body.yak-header-compact .yak-main-nav > li > a i[class*="ph-"] {
		max-width: 0;
		opacity: 0;
	}

	body.yak-header-compact .yak-main-nav > li.menu-item-has-children > a::after {
		max-width: 0;
		opacity: 0;
		margin-left: 0;
	}

	body.yak-header-compact .yak-main-nav > li.menu-highlight > a {
		padding: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}

	@media (max-width: 959px) {
		.site-header {
			position: sticky !important;
			left: 0 !important;
			right: 0 !important;
			z-index: 9999 !important;
			top: var(--yak-mobile-header-height-neg);
			transition: all 0.5s ease;
		}

		.yak-show-mobile-header .site-header {
			top: 0;
		}

		.yak-inline-search-form {
			margin-top: 0.5rem;
			display: flex;
			gap: 4px;
		}

		.yak-inline-search-form input[type="search"] {
			width: 100%;
			font-size: 1rem;
			padding: 0.5rem;
			border: 1px solid #ccc;
			border-radius: var(--yak-radius);
		}
	}

	/* ----------------------------------------
		4.8 Search Results
	---------------------------------------- */
	.search-form {
		display: flex;
		gap: 1rem;
	}

	input[type="search"] {
		width: 100%;
		font-size: 1rem;
		padding: 0.5rem;
		border: 1px solid #ccc;
		border-radius: var(--yak-radius);
	}

	.search-results .yak-search-results-page-header {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-bottom: 4rem;
		width: 100%;
		text-align: center;
	}

	.yak-search-results-page-header .search-form {
		display: flex;
		width: 100%;
		gap: 1rem;
	}

	.yak-search-results-page-header .search-form input.search-form-input {
		width: 100%;
	}

	.search-results article {
		margin-bottom: 2rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid var(--yak-color-muted);
	}

	.search-result-title a {
		color: var(--yak-color-black);
		text-decoration: none;
	}

	.search-result-title a:hover {
		color: var(--yak-color-primary);
		text-decoration: none;
	}

	.yak-search-results-title-wrapper {
		display: flex;
		justify-content: space-between;
		gap: 4rem;
		align-items: center;
	}

	.yak-search-results-title-wrapper h2 {
		margin: 0;
	}

	.search-result-url {
		color: #666;
		font-size: var(--yak-font-sm);
		margin-bottom: 0.25rem;
	}

	.search-result-date {
		color: #595959;
		font-size: var(--yak-font-sm);
		margin-bottom: 0.5rem;
	}

	.search-result-type.badge {
		display: inline-block;
		background: #e2e2e2;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.75rem;
		text-transform: uppercase;
		margin-bottom: 0.5rem;
	}

	.search-result-excerpt {
		margin-top: 0.75rem;
		font-size: var(--yak-font-sm);
	}
}


/* ==========================================================================
   5. COMPONENTS — UI elements (buttons, nav, modals)
   ========================================================================== */
   @layer yak-components {

	/* ----------------------------------------
		5.1 Buttons
	---------------------------------------- */
	.button,
	.wp-block-button__link,
	input[type="submit"],
	input[type="button"],
	button {
		display: inline-block;
		padding: 0.6em 1.2em;
		font-family: var(--yak-primary-font);
		font-size: var(--yak-font-md);
		line-height: var(--yak-lh-md);
		font-weight: 600;
		border: none;
		border-radius: var(--yak-radius);
		background-color: var(--yak-color-primary);
		color: var(--yak-color-white);
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
		text-align: center;
		text-transform: uppercase;
    	letter-spacing: 0.04em;
	}

	.button:hover,
	.wp-block-button__link:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	button:hover {
		background-color: var(--yak-color-black);
		color: var(--yak-color-white);
	}

	.button:focus,
	.wp-block-button__link:focus,
	input[type="submit"]:focus,
	input[type="button"]:focus,
	button:focus {
		outline: 2px solid var(--yak-color-muted);
		outline-offset: 2px;
	}

	.button:disabled,
	.wp-block-button__link:disabled,
	input[type="submit"]:disabled,
	input[type="button"]:disabled,
	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.yak-inline-search-form input[type="submit"] {
		width: fit-content;
		font-size: var(--yak-font-xs);
		padding: 0.25rem 0.5rem;
	}

	/* ----------------------------------------
		5.2 Modal
	---------------------------------------- */
	/* Modal overlay container */
	.yak-modal {
		position: fixed;
		inset: 0;
		z-index: 1050;
		display: none;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.85);
		opacity: 0;
		pointer-events: none;
		transform: translateY(30px);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0s linear 0.3s;
	}

	.yak-modal.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		/* transform: translateY(0);
		transition-delay: 0s; */
	}

	/* Prevent scrolling on the background */
	body.yak-modal-open {
		overflow: hidden;
	}

	/* body.yak-modal-open .site-container {
		filter: blur(12px);
	} */

	body.yak-modal-open .site-container,
	body.yak-modal-closing .site-container {
		filter: blur(12px);
		transition: filter 0.3s ease;
	}

	body.yak-modal-closing .site-container {
		filter: blur(2px);
	}

	body:not(.yak-modal-open):not(.yak-modal-closing) .site-container {
		filter: none;
	}

	body.yak-modal-closing .yak-modal {
		pointer-events: none;
	}

	/* Dialog wrapper — centers modal but allows vertical scroll */
	.yak-modal-dialog {
		position: relative;
		width: auto;
		margin: 2rem auto;
		pointer-events: none;
		max-width: 50vw;
		width: 90%;
		max-height: 90vh;
	}

	button.yak-modal-close {
		opacity: 0.667;
		background: transparent;
		color: red;
		font-weight: 400;
		outline: none;
		transition: all ease-in-out 0.25s;
		font-size: var(--yak-font-xl);
		line-height: 0.5;
	}

	button.yak-modal-close:hover {
		opacity: 1;
	}

	/* Scroll container — this is the key! */
	.yak-modal-content {
		position: relative;
		display: flex;
		flex-direction: column;
		pointer-events: auto;
		background-color: var(--yak-color-white, #fff);
		background-clip: padding-box;
		border-radius: var(--yak-radius, 6px);
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
		outline: 0;
		max-height: calc(100vh - 3.5rem);
		overflow-y: auto;
		max-height: 90vh;
	}

	.yak-modal-header,
	.yak-modal-footer {
		padding: 1rem 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.yak-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dee2e6;
		padding-right: 0;
	}

	.yak-modal-title {
		margin-bottom: 0;
		font-size: 1.25rem;
		font-weight: 600;
	}

	.yak-modal-body {
		position: relative;
		flex: 1 1 auto;
		padding: 2rem;
	}

	.yak-modal-footer {
		border-top: 1px solid #dee2e6;
		display: flex;
		justify-content: flex-end;
		gap: 0.5rem;
		padding: 1rem;
	}



	/* ----------------------------------------
		5.3 Collapse
	---------------------------------------- */
	.yak-collapse {
		overflow: hidden;
		height: 0;
		transition: height 0.3s ease;
	}

	.yak-collapse.show {
		height: auto;
	}

	.yak-collapse--animating {
		transition: height 0.3s ease;
	}

	/* ----------------------------------------
		5.4 Desktop Navigation
	---------------------------------------- */
	.yak-main-nav {
		display: flex;
		gap: 2rem;
		list-style: none;
		margin: 0;
		transition: gap 0.25s ease;
		padding: 0;
		position: relative;
	}

	.yak-main-nav > li {
		position: relative;
	}

	.yak-main-nav > li.menu-item-has-children:not(.yak-has-mega) > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		visibility: hidden;
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity 0.2s ease, transform 0.2s ease;
		z-index: 9999;
		padding: 0;
		list-style: none; /* ✅ critical to remove bullets */
	}

	.yak-main-nav > li.menu-item-has-children:hover > .sub-menu,
	.yak-main-nav > li.menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	.yak-main-nav .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.yak-main-nav a {
		font-family: var(--yak-primary-font);
		display: inline-block;
		width: 100%;
		padding: 0.75rem 0.5rem;
		text-decoration: none;
		color: var(--yak-color-black);
		font-weight: 500;
		background: transparent;
		transition: background-color 0.2s ease;
	}

	.yak-main-nav a:hover,
	.yak-main-nav a:focus {
		background-color: var(--yak-color-muted);
		outline: none;
	}

	@media (min-width: 960px) {
		.yak-main-nav > li > a {
			white-space: nowrap;
			transition: background-color 0.2s ease, border-radius 0.15s ease, font-size 0.25s ease, padding 0.25s ease;
		}

		.yak-main-nav > li > a:hover,
		.yak-main-nav > li > a:focus {
			border-radius: var(--yak-radius);
		}
	}

	.yak-main-nav .sub-menu a {
		padding: 0.35rem 0.75rem;
		font-size: 0.85em;
	}

	.yak-main-nav > li.menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		margin-left: 0.5em;
		vertical-align: middle;
		opacity: 1;
		max-width: 0.5em;
		overflow: hidden;
		transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -0.3em;
	}

	.genesis-nav-menu .sub-menu .current-menu-item > a,
	.genesis-nav-menu .sub-menu a:hover {
        border-bottom-color: transparent;
    }

	/* ----------------------------------------
		5.5 Mega Menu
	---------------------------------------- */
	
	/* ========== Mega Menu Enhancement (3-level nav with .yak-mega-column wrappers) ========== */

	@media (min-width: 960px) {

		.yak-main-nav > li.yak-has-mega > .sub-menu {
			display: none;
			visibility: hidden;
			opacity: 0;
			transform: translateY(0.5rem);
		}	

		/* Mega panel is a grid of columns */
		.yak-main-nav .yak-has-mega:hover > .sub-menu,
		.yak-main-nav .yak-has-mega:focus-within > .sub-menu,
		.yak-main-nav .yak-has-mega > .sub-menu:hover {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
			padding: 2rem;
			gap: 1rem;
			background: #fff;
			border: 1px solid #ddd;
			visibility: visible;
			opacity: 1;
			transform: none;
			z-index: 1000;
			width: max-content;
			max-width: 90vw;
			position: absolute;
			left: -4rem;
			margin-top: -0.5rem;
		}

		.yak-main-nav > li.yak-has-mega {
			position: relative;
		}
		

		/* Each column's content is stacked vertically */
		.yak-mega-column {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}

		/* 2nd-level menu item (e.g., 'Northwest') inside each column */
		.yak-main-nav .yak-has-mega > .sub-menu > .yak-mega-column > .menu-item {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
		}

		.yak-main-nav .yak-has-mega > .sub-menu > .yak-mega-column > a {
			font-weight: 700;
			padding: 0;
			margin-bottom: 0.75rem;
		}

		.yak-main-nav .yak-has-mega > .sub-menu > .yak-mega-column > a:hover {
			background: transparent;
			border-bottom: 2px solid transparent;
			text-decoration: underline;
		}

		/* Hide arrows on 2nd-level column headers inside mega menu */
		.yak-main-nav > li.yak-has-mega .yak-mega-column > .menu-item-has-children > a::after {
			display: none !important;
		}

		/* 3rd-level submenus under 2nd-level mega columns */
		.yak-main-nav .yak-has-mega > .sub-menu > .yak-mega-column > .menu-item > .sub-menu {
			display: block;
			margin-top: 0.5rem;
			padding-left: 0;
			list-style: none;
		}

		/* 3rd-level link spacing */
		.yak-main-nav .yak-has-mega > .sub-menu > .yak-mega-column > .menu-item > .sub-menu > .menu-item {
			margin-bottom: 0.5rem;
		}

		/* Always show 3rd-level lists inside mega menu columns */
		.yak-main-nav .yak-has-mega .yak-mega-column > .sub-menu {
			display: block;
			/* margin-top: 0.5rem; */
			padding-left: 0;
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		/* 3rd-level items ---- */
		.yak-main-nav .yak-has-mega .yak-mega-column > .sub-menu a {
			padding-top: 0;
			padding-bottom: 0;
			padding: 0;
			max-width: 10.5rem;
			line-height: 1.3;
		}

		.yak-main-nav .yak-has-mega .yak-mega-column > .sub-menu a:hover {
			background: transparent;
			border-bottom: 2px solid transparent;
			text-decoration: underline;
		}

	}
	

	/* ----------------------------------------
		5.6 Mobile Navigation
	---------------------------------------- */
	@media (max-width: 959px) {

		.yak-action-bar {
			display: none;
		}

		.site-header .nav-primary {
			display: none;
		}

		/* ===== Toggle Button ===== */
		.yak-menu-toggle {
			position: relative;
			z-index: 10; /* will be covered by panel */
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;
			background: none;
			border: none;
			cursor: pointer;
		}
	
		.yak-menu-icon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 5px;
			width: 24px;
			height: 18px;
			color: var(--yak-color-black);
		}
	
		.yak-menu-bar {
			width: 100%;
			height: 2px;
			background-color: currentColor;
			border-radius: 1px;
			transition: all 0.3s ease;
		}
	
		/* ===== Mobile Nav Container ===== */
		#yak-mobile-nav {
			position: fixed;
			inset: 0;
			z-index: 1000;
		}
	
		#yak-mobile-nav:not(.is-open):not(.is-closing) {
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
		}
	
		#yak-mobile-nav.is-open,
		#yak-mobile-nav.is-closing {
			visibility: visible;
			opacity: 1;
			pointer-events: auto;
			z-index: 99999;
		}
	
		.yak-mobile-overlay {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			height: 100%;
			transition: background 0.3s ease, opacity 0.3s ease;
			background: rgba(0, 0, 0, 0);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			opacity: 0;
			pointer-events: none;
		}
		
		/* Open state: enable background + show overlay */
		#yak-mobile-nav.is-open .yak-mobile-overlay {
			background: rgba(0, 0, 0, 0.75);
			opacity: 1;
			pointer-events: auto;
		}
		
		/* Closing or inactive: fade both bg and blur visually */
		#yak-mobile-nav.is-closing .yak-mobile-overlay,
		#yak-mobile-nav:not(.is-open):not(.is-closing) .yak-mobile-overlay {
			background: rgba(0, 0, 0, 0);
			opacity: 0;
			pointer-events: none;
		}
		
	
		/* ===== Sliding Panel ===== */
		.yak-mobile-panel {
			width: 80vw;
			max-width: 320px;
			height: 100%;
			background-color: var(--yak-color-white);
			color: var(--yak-color-black);
			box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15); /* subtle depth */
			transform: translateX(100%);
			transition: transform 0.4s ease;
			overflow-y: auto;
			padding: 1rem;
			position: relative;
			z-index: 20; /* sits above toggle */
			will-change: transform;
		}
	
		#yak-mobile-nav.is-open .yak-mobile-panel {
			transform: translateX(0);
		}
	
		/* ===== Menu Structure ===== */
		.yak-mobile-menu {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0;
		}
	
		.yak-mobile-menu li {
			position: relative;
		}
	
		.yak-mobile-menu a {
			display: block;
			text-decoration: none;
			color: var(--yak-color-black);
			font-weight: 600;
			font-size: 1rem;
			padding: 0.5rem 0;
		}

		.yak-mobile-title {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.yak-mobile-title img.yak-mobile-favicon {
			max-width: 32px;
		}
	
		/* ===== Submenu Toggle Button ===== */

		.yak-mobile-menu .sub-menu {
			position: static !important;
			visibility: visible !important;
			transform: none !important;
			box-shadow: none !important;
			background: transparent !important;
		}

	
	.yak-submenu-toggle {
		all: unset;
		position: absolute;
		right: 0.25rem;
		top: 0;
		margin-top: 0.25rem;
		width: 2rem;
		height: 2rem;
		display: grid;
		place-items: center;
		cursor: pointer;
		color: currentColor;
		z-index: 1;
		transition: transform 0.2s ease;
		transform-origin: 50% 50%;
	}

	.yak-submenu-toggle .yak-icon {
		width: 1.25rem;
		height: 1.25rem;
		display: block;
	}

	.yak-submenu-toggle[aria-expanded="true"] {
		transform: rotate(45deg);
	}

		.yak-main-nav li.menu-item-has-children > a::after {
			display: none;
		}


		/* ===== Submenu (Accordion) ===== */
		.yak-mobile-menu .sub-menu {
			list-style: none;
			margin: 0;
			overflow: hidden;
			max-height: 0;
			opacity: 0;
			transition: max-height 0.3s ease-in-out, opacity 0.25s ease-in-out;
			font-size: 0.95rem;
		}

		.yak-mobile-menu .sub-menu.is-open {
			max-height: 500px;
			opacity: 1;
		}

		.yak-mobile-menu ul {
			padding-left: 1rem;
		}

		.yak-mobile-menu .sub-menu li {
			margin: 0;
			padding-left: 1rem;
		}

		.yak-mobile-menu .sub-menu li a {
			font-weight: 400;
		}

		/* Hide focus outlines by default */
		#yak-mobile-nav a,
		#yak-mobile-nav button {
			/* Remove default focus styles */
			outline: none;
			box-shadow: none;
		}

		/* Show gray outline only for keyboard users (Tab) */
		#yak-mobile-nav a:focus-visible,
		#yak-mobile-nav button:focus-visible {
			outline: 2px solid #999; /* Medium gray */
			outline-offset: 2px;
			border-radius: 4px;
		}

		/* Optional: Disable hover feedback (if you don’t want it on mobile) */
		#yak-mobile-nav a:hover,
		#yak-mobile-nav button:hover {
			background: none;
			color: inherit;
			text-decoration: none;
		}


		.yak-mobile-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0 1rem;
			margin-bottom: 1rem;
			border-bottom: 1px solid var(--yak-color-muted);
		}
		
		.yak-mobile-title {
			font-size: 1.25rem;
			font-weight: 700;
			font-family: var(--yak-accent-font, inherit);
			color: var(--yak-color-black);
		}
		
		.yak-mobile-close {
			background: none;
			border: none;
			font-size: 2rem;
			line-height: 1;
			cursor: pointer;
			color: var(--yak-color-black);
			padding: 0;
			margin: 0;
		}

		.title-area {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 0.75rem;
			padding: 0;
		}
	
		.yak-site-logo {
			max-width: 48px;
			flex-shrink: 0;
		}
	
		.yak-title-text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1 1 auto;
			min-width: 0; /* required for text truncation */
		}
	
		.site-title,
		.site-title a {
			font-size: 1rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
		}
	
		.site-description {
			font-size: 0.75rem;
			color: #666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
		}

		/* ===== Merged Action Items in Mobile Drawer ===== */
		.yak-mobile-divider {
			border: none;
			border-top: 1px solid var(--yak-color-muted, #ddd);
			margin: 1rem 0;
		}

		.yak-mobile-action-items {
			padding: 0;
		}

		.yak-mobile-action-links {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0;
		}

		.yak-mobile-action-links a {
			display: flex;
			align-items: center;
			gap: 0.4em;
			text-decoration: none;
			color: var(--yak-color-black);
			font-weight: 600;
			font-size: 1rem;
			padding: 0.5rem 0;
		}

		.yak-mobile-social-row {
			display: flex;
			align-items: center;
			gap: 1.25rem;
			padding: 0.75rem 0 0.25rem;
		}

		.yak-mobile-social-row a {
			color: var(--yak-color-black);
			font-size: 1.25rem;
			text-decoration: none;
			transition: opacity 0.2s ease;
		}

		.yak-mobile-social-row a:hover {
			opacity: 0.6;
		}

		/* ===== Mobile Inline Search ===== */
		.yak-mobile-search {
			padding: 0.75rem 0 0.5rem;
			margin-top: auto;
		}

		.yak-mobile-search-form {
			display: flex;
			gap: 0;
		}

		.yak-mobile-search-form input[type="search"] {
			flex: 1;
			padding: 0.4rem 0.6rem;
			font-size: 0.8rem;
			border: 1px solid #ccc;
			border-radius: var(--yak-radius, 4px) 0 0 var(--yak-radius, 4px);
			outline: none;
			-webkit-appearance: none;
			appearance: none;
			color: #666;
		}

		.yak-mobile-search-form input[type="search"]:focus {
			border-color: var(--yak-color-primary);
			color: var(--yak-color-black);
		}

		.yak-mobile-search-form input[type="submit"],
		.yak-mobile-search-form button[type="submit"] {
			padding: 0.4rem 0.75rem;
			background: #eee;
			color: #555;
			border: 1px solid #ccc;
			border-left: none;
			border-radius: 0 var(--yak-radius, 4px) var(--yak-radius, 4px) 0;
			font-size: 0.75rem;
			font-weight: 500;
			cursor: pointer;
			text-transform: lowercase;
		}

	}

	/* ----------------------------------------
		5.7 Header Toggle / Highlight Links
	---------------------------------------- */
	/* ========== Toggle & Highlight ========== */

	@media (min-width: 960px) {
		.yak-menu-toggle,
		#yak-mobile-nav {
			display: none !important;
		}

		.yak-main-nav > li.menu-highlight > a {
			font-family: var(--yak-primary-font);
			background-color: var(--yak-color-primary);
			color: var(--yak-color-white);
			border-radius: var(--yak-radius);
			padding: 0.75rem 1.5rem;
			font-size: 1rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			border: none;
			cursor: pointer;
			box-shadow: none;
			transition: background-color 0.2s ease;
			display: inline-block;
		}

		.yak-main-nav > li.menu-highlight > a:hover,
		.yak-main-nav > li.menu-highlight > a:focus {
			background-color: var(--yak-color-black, var(--yak-color-muted));
			color: var(--yak-color-white);
			outline: none;
		}
	
	}

	/* ----------------------------------------
		5.8 Featured Image Title / Hello Bar / Separator
	---------------------------------------- */
	.clb-hello-bar-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 0.5rem 1rem;
		background: var(--yak-color-primary);
		color: var(--yak-color-white);
	}

	.clb-hello-bar-wrapper a {
		color: var(--yak-color-white);
		text-decoration: none;
	}

	.clb-hello-bar-wrapper a:hover {
		text-decoration: underline;
	}

	.yak-featured-image-top-wrapper {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--yak-color-accent, var(--yak-color-primary));
		height: var(--yak-featured-img-height, 400px);
		padding: 0;
		margin-bottom: 0;
		overflow: visible;
		z-index: 0;
	}

	.yak-featured-image-img-wrapper {
		position: relative;
		width: var(--yak-content-max-width);
		height: 100%;
		overflow: hidden;
		/* No z-index: keeps caption paint order above the picture without trapping the whole column under .yak-featured-image-title */
		/* border-radius: 0 0 var(--yak-radius) var(--yak-radius); */
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	}

	.yak-featured-img-max-width--full .yak-featured-image-img-wrapper {
		width: 100%;
	}

	.yak-featured-image-bg {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* border-radius: 0 0 var(--yak-radius) var(--yak-radius); */
		position: relative;
		z-index: 0;
	}

	.yak-featured-img-max-width--full.yak-featured-image-align-top .yak-featured-image-bg,
	.yak-featured-img-max-width--title_left.yak-featured-image-align-top .yak-featured-image-bg {
		object-position: center top;
	}

	.yak-featured-img-max-width--full.yak-featured-image-align-middle .yak-featured-image-bg,
	.yak-featured-img-max-width--title-left.yak-featured-image-align-middle .yak-featured-image-bg {
		object-position: center;
	}

	.yak-featured-img-max-width--full.yak-featured-image-align-bottom .yak-featured-image-bg,
	.yak-featured-img-max-width--title-left.yak-featured-image-align-bottom .yak-featured-image-bg {
		object-position: center bottom;
	}

	.yak-featured-image-title {
		position: absolute;
		bottom: 3rem;
		padding: 0 4rem;
		text-align: center;
		color: white;
		text-shadow: 0 0px 20px rgba(0, 0, 0, 0.8);
		z-index: 2;
		max-width: var(--yak-content-max-width);
		left: 50%;
		transform: translateX(-50%);
	}

	/* Mobile responsive styles for featured image title */
	@media (max-width: 768px) {
		.yak-featured-image-title {
			padding: 0 1.5rem;
			bottom: 2rem;
		}

		.yak-featured-image-title h1 {
			font-size: var(--yak-font-xl);
			line-height: var(--yak-lh-xl);
		}
	}

	@media (max-width: 480px) {
		.yak-featured-image-title {
			padding: 0 1rem;
			bottom: 1.5rem;
		}

		.yak-featured-image-title h1 {
			font-size: var(--yak-font-lg);
			line-height: var(--yak-lh-lg);
		}
	}

	.yak-featured-image-title h1 {
		font-size: var(--yak-font-3xl);
		line-height: var(--yak-lh-3xl);
		margin: 0;
	}

	/* Media library caption on featured hero (above picture; title overlay is sibling with z-index — see --has-caption) */
	.yak-featured-image-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		margin: 0;
		padding: 0.5rem 1rem 0.7rem;
		font-size: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
		line-height: 1.4;
		color: var(--yak-color-white, #fff);
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	}

	/*
	 * When the title overlays the image (not title_left), it sat above the whole image column
	 * and hid the caption on tablet/desktop. Lift the title block when a caption exists.
	 */
	body:not(.yak-featured-img-max-width--title_left) .yak-featured-image-top-wrapper--has-caption .yak-featured-image-title {
		bottom: 4.75rem;
	}

	@media (max-width: 768px) {
		body:not(.yak-featured-img-max-width--title_left) .yak-featured-image-top-wrapper--has-caption .yak-featured-image-title {
			bottom: 3.5rem;
		}
	}

	@media (max-width: 480px) {
		body:not(.yak-featured-img-max-width--title_left) .yak-featured-image-top-wrapper--has-caption .yak-featured-image-title {
			bottom: 3rem;
		}
	}

	.yak-featured-image-caption a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.yak-featured-image-caption a:hover,
	.yak-featured-image-caption a:focus {
		text-decoration-thickness: 2px;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-top-wrapper {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		height: var(--yak-featured-img-height);
		position: relative;
		overflow: hidden;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-title {
		position: relative;
		width: 40%;
		background: var(--yak-color-accent, var(--yak-color-primary));
		color: var(--yak-color-white);
		text-shadow: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem;
		z-index: 2;
		bottom: unset;
		transform: none;
		left: unset;
		text-align: left;
		padding-left: 4rem;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper {
		width: 60%;
		height: 100%;
		position: relative;
		overflow: hidden;
		box-shadow: none;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper::after {
		content: none;
	}

	.yak-page-subtitle {
		font-size: var(--yak-font-lg);
		line-height: var(--yak-lh-xl);
		font-style: italic;
		margin-top: 1rem;
	}

	/*
	 * title_left mobile: stack — image ~33vh, title block below on solid accent (no overlay / no shadow).
	 * DOM order is image then title; column (not row-reverse) keeps image on top.
	 */
	@media (max-width: 960px) {

		body.yak-featured-img-max-width--title_left .yak-featured-image-top-wrapper {
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			height: auto;
			min-height: 0;
		}

		body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper {
			width: 100%;
			height: 33vh;
			min-height: 130px;
			max-height: 50vh;
			flex-shrink: 0;
		}

		body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper picture.yak-featured-image-bg {
			display: block;
			width: 100%;
			height: 100%;
		}

		body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper img.yak-featured-image-bg {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		body.yak-featured-img-max-width--title_left .yak-featured-image-title {
			position: relative;
			width: 100%;
			left: auto;
			bottom: auto;
			transform: none;
			padding: 1.25rem 1.25rem;
			background: var(--yak-color-accent, var(--yak-color-primary));
			color: var(--yak-color-white);
			text-shadow: none;
			text-align: left;
		}

		body.yak-featured-img-max-width--title_left .yak-featured-image-title h1 {
			font-size: var(--yak-font-lg);
			line-height: var(--yak-lh-lg);
		}

		body.yak-featured-img-max-width--title_left .yak-page-subtitle {
			font-size: var(--yak-font-sm);
			line-height: var(--yak-lh-md);
			margin-top: 0.5rem;
			margin-bottom: 0;
		}
	}

	/* Default + themed horizontal divider (core Separator block) */
	hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots),
	.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
		border: none;
		width: 72px;
		max-width: 72px;
		height: 4px;
		margin: 1.65em auto;
		border-radius: 999px;
		background: var(--yak-color-primary);
		color: transparent;
	}

	.wp-block-separator.has-alpha-channel-opacity {
		display: block;
		width: 72px;
		max-width: 72px;
		height: 4px;
		margin: 2em auto;
		border: none;
		border-radius: 999px;
		background: var(--yak-color-primary);
		opacity: 1;
	}

	.yak-pull-right p:last-of-type,
	.yak-pull-left p:last-of-type,
	.entry-content .has-background p:last-of-type {
		margin-bottom: 0;
	}

	.yak-group-has-background-first-item {
		margin-top: 0 !important;
	}

	.yak-group-has-background-last-item {
		margin-bottom: 0 !important;
	}
}


/* ==========================================================================
   6. UTILITIES — Utility classes
   ========================================================================== */
   @layer yak-utilities {

	/* ----------------------------------------
		6.1 Visually Hidden / Screen Reader Text
	---------------------------------------- */
	.visually-hidden {
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
		border: 0;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.screen-reader-text:focus {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		background: #000;
		color: #fff;
		padding: 1rem;
		z-index: 100000; /* High enough to show above other content */
	}

	/* ----------------------------------------
		6.2 Font Size Utilities
	---------------------------------------- */
	.has-small-font-size {
		font-size: var(--yak-font-sm);
		line-height: var(--yak-lh-sm);
	}

	.has-medium-font-size {
		font-size: var(--yak-font-lg);
		line-height: var(--yak-lh-lg);
	}

	.has-large-font-size {
		font-size: var(--yak-font-2xl);
		line-height: var(--yak-lh-2xl);
	}

	.has-x-large-font-size {
		font-size: var(--yak-font-4xl);
		line-height: var(--yak-lh-4xl);
	}

	/* ----------------------------------------
		6.3 Text Alignment
	---------------------------------------- */
	.has-text-align-center {
		text-align: center;
	}

	.has-text-align-left {
		text-align: left;
	}

	.has-text-align-right {
		text-align: right;
	}

	.has-text-align-justify {
		text-align: justify;
	}
}


/* ==========================================================================
   Unlayered overrides — beats WordPress global inline styles
   (WP injects unlayered `a:where(:not(.wp-element-button)) { text-decoration: underline }`
   which wins over everything inside @layer regardless of specificity)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Back to top (unlayered to avoid losing against global button rules)
------------------------------------------------------------------------- */
button.yak-back-to-top {
	position: fixed;
	right: max(0.875rem, env(safe-area-inset-right, 0px));
	bottom: max(0.875rem, env(safe-area-inset-bottom, 0px));
	z-index: 99998;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 !important;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--yak-color-text, #1f1f1f) 16%, transparent);
	border-radius: var(--yak-radius);
	background: color-mix(in srgb, var(--yak-color-header-bg, #ffffff) 94%, transparent) !important;
	color: var(--yak-color-primary, #1b2d6b) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.45rem);
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

button.yak-back-to-top.yak-back-to-top--visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
}

button.yak-back-to-top:hover,
button.yak-back-to-top:focus-visible {
	background: var(--yak-color-header-bg, #ffffff) !important;
	border-color: color-mix(in srgb, var(--yak-color-primary, #1b2d6b) 40%, transparent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	outline: none;
}

button.yak-back-to-top:focus-visible {
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.18),
		0 0 0 3px color-mix(in srgb, var(--yak-color-primary, #1b2d6b) 30%, transparent);
}

button.yak-back-to-top .yak-back-to-top__icon {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	fill: currentColor;
}

button.yak-back-to-top .yak-back-to-top__icon--fallback {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
}

button.yak-back-to-top .yak-back-to-top__label {
	display: none;
}

@media (min-width: 960px) {
	button.yak-back-to-top {
		right: max(1.1rem, env(safe-area-inset-right, 0px));
		bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
		width: auto;
		height: 2.65rem;
		padding: 0 0.65rem !important;
		gap: 0.32rem;
		border-radius: var(--yak-radius);
	}

	button.yak-back-to-top .yak-back-to-top__icon {
		width: 0.95rem;
		height: 0.95rem;
	}

	button.yak-back-to-top .yak-back-to-top__label {
		display: inline-block;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1;
		color: currentColor;
	}
}

.yak-action-bar a,
.yak-main-nav a,
.yak-main-nav .sub-menu a,
.genesis-nav-menu a,
.site-header .nav-primary a,
.yak-mobile-action-links a,
.yak-mobile-social-row a,
.site-footer a {
	text-decoration: none;
	border-bottom: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.yak-footer-widgets-outer-wrapper .wp-block-button__link,
.yak-footer-widgets-outer-wrapper .wp-block-button a,
.yak-footer-widgets-outer-wrapper a.button {
	text-decoration: none !important;
	border-bottom: none !important;
	background-color: var(--dark-blue) !important;
	color: var(--ultra-white, #fff) !important;
	box-shadow: none;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease !important;
}

.yak-footer-widgets-outer-wrapper .wp-block-button__link:hover,
.yak-footer-widgets-outer-wrapper .wp-block-button__link:focus-visible,
.yak-footer-widgets-outer-wrapper .wp-block-button a:hover,
.yak-footer-widgets-outer-wrapper .wp-block-button a:focus-visible,
.yak-footer-widgets-outer-wrapper a.button:hover,
.yak-footer-widgets-outer-wrapper a.button:focus-visible {
	text-decoration: none !important;
	border-bottom: none !important;
	background-color: color-mix(in srgb, var(--dark-blue) 82%, white) !important;
	color: var(--ultra-white, #fff) !important;
	box-shadow: 0 4px 14px rgba(18, 24, 66, 0.25);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Footer search widget (unlayered — beats yak-components button defaults)
   ------------------------------------------------------------------------- */
.yak-footer-widgets-outer-wrapper .search-form {
	display: flex !important;
	gap: 0 !important;
	max-width: 300px;
}

.yak-footer-widgets-outer-wrapper .search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	padding: 0 0.75rem !important;
	font-size: 0.875rem !important;
	line-height: 2.5rem;
	border: 1px solid #adb5c0 !important;
	border-right: none !important;
	border-radius: var(--yak-radius) 0 0 var(--yak-radius) !important;
	background: #fff;
	color: var(--yak-color-black);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yak-footer-widgets-outer-wrapper .search-form input[type="search"]::placeholder {
	color: #8d95a0;
	opacity: 1;
}

.yak-footer-widgets-outer-wrapper .search-form input[type="search"]:focus {
	border-color: var(--yak-color-primary) !important;
	box-shadow: inset 0 0 0 1px var(--yak-color-primary);
}

.yak-footer-widgets-outer-wrapper .search-form input[type="submit"] {
	height: 2.5rem;
	padding: 0 0.9rem !important;
	font-size: 0.7rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 2.5rem;
	text-transform: uppercase;
	border: none !important;
	border-radius: 0 var(--yak-radius) var(--yak-radius) 0 !important;
	background-color: var(--dark-blue, var(--yak-color-primary)) !important;
	color: #fff !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.yak-footer-widgets-outer-wrapper .search-form input[type="submit"]:hover {
	background-color: color-mix(in srgb, var(--dark-blue, var(--yak-color-primary)) 82%, white) !important;
}

.yak-footer-widgets-outer-wrapper .search-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--yak-color-primary);
	outline-offset: 2px;
}

:root {
	--yak-color-muted: var(--medium-gray) !important;
}

.yak-main-nav > li:hover > a i.ph-duotone::before,
.yak-main-nav > li:focus-within > a i.ph-duotone::before {
	opacity: 1 !important;
	color: var(--yak-color-accent) !important;
	transition: none !important;
}

/* -------------------------------------------------------------------------
   Entry content text links (unlayered — beats WP global link + layered a:hover)
------------------------------------------------------------------------- */
.entry-content a:not(.wp-element-button) {
	color: var(--ycv-blue, var(--yak-color-primary));
	text-decoration-line: underline;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.14em;
	text-decoration-skip-ink: auto;
	text-decoration-color: currentColor;
	transition:
		color 0.35s ease,
		text-decoration-thickness 0.35s ease;
}

.entry-content a:not(.wp-element-button):hover {
	color: color-mix(in srgb, var(--ycv-blue, var(--yak-color-primary)) 65%, black);
	text-decoration-thickness: 0.11em;
	text-decoration-color: currentColor;
}

.entry-content a:not(.wp-element-button):active {
	color: color-mix(in srgb, var(--ycv-blue, var(--yak-color-primary)) 68%, black);
}

.entry-content a:not(.wp-element-button):visited {
	color: color-mix(in srgb, var(--ycv-blue, var(--yak-color-primary)) 88%, white);
}

.entry-content a:not(.wp-element-button):focus-visible {
	outline: 2px solid var(--ycv-blue, var(--yak-color-primary));
	outline-offset: 2px;
	border-radius: 2px;
	text-decoration-thickness: 0.11em;
}

.entry-content h1 a:not(.wp-element-button),
.entry-content h2 a:not(.wp-element-button),
.entry-content h3 a:not(.wp-element-button),
.entry-content h4 a:not(.wp-element-button),
.entry-content h5 a:not(.wp-element-button),
.entry-content h6 a:not(.wp-element-button) {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
}

/* -------------------------------------------------------------------------
   Archive cards — opt out of entry-content link styling
   ------------------------------------------------------------------------- */
.yak-archive-wrapper .yak-entry-title a,
.yak-archive-wrapper .yak-entry-title a:visited,
.yak-archive-wrapper .yak-entry-title a:active {
	text-decoration: none;
	color: inherit;
}

.yak-archive-wrapper .yak-entry-title a:hover {
	color: var(--yak-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
}

.yak-archive-wrapper a.yak-read-more,
.yak-archive-wrapper a.yak-read-more:visited,
.yak-archive-wrapper a.yak-read-more:hover,
.yak-archive-wrapper a.yak-read-more:active {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   YCV linked cards (Dates, Date List, Card Grid) — opt out of entry-content
   link styling: the whole card is one <a>, so the blanket underline/blue would
   hit every line of text inside it.
   ------------------------------------------------------------------------- */
.entry-content a.ycvds-dates__item,
.entry-content a.ycvds-dates__item:visited,
.entry-content a.ycvds-dates__item:hover,
.entry-content a.ycvds-dates__item:active,
.entry-content a.ycvds-date-list__item,
.entry-content a.ycvds-date-list__item:visited,
.entry-content a.ycvds-date-list__item:hover,
.entry-content a.ycvds-date-list__item:active,
.entry-content a.ycvds-card-grid-item__link,
.entry-content a.ycvds-card-grid-item__link:visited,
.entry-content a.ycvds-card-grid-item__link:hover,
.entry-content a.ycvds-card-grid-item__link:active {
	text-decoration: none;
	color: inherit;
}

/* -------------------------------------------------------------------------
   Search result titles — no underline at rest, underline on hover
   ------------------------------------------------------------------------- */
.entry-content .search-result-title a,
.entry-content .search-result-title a:visited {
	text-decoration: none;
	color: var(--yak-color-primary);
}

.entry-content .search-result-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
	color: color-mix(in srgb, var(--yak-color-primary) 75%, black);
}

mark.searchwp-highlight {
	background: rgb(255 200 100 / 0.35);
	color: inherit;
	padding: 0.05em 0.15em;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Mobile hero (ycvds page-hero block) — less orange, smaller text
------------------------------------------------------------------------- */
@media (max-width: 48rem) {
	.ycvds-page-hero__text-panel {
		padding: 1rem 1.25rem;
	}

	.ycvds-page-hero__heading {
		font-size: 1.5rem;
		line-height: 1.2;
		margin-bottom: 0.25rem;
	}

	.ycvds-page-hero__intro {
		font-size: 0.9rem;
		line-height: 1.4;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Stop pencils down
   ========================================================================== */

/* ==========================================================================
   7. OVERRIDES — Optional last-layer custom overrides
   ========================================================================== */
/* See /css/yak-overrides.css to make overriding changes