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

   Theme Name: BSW-UNC 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.2
   Template: genesis
   Text Domain: yak

   ==========================================================================
   📁 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
   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: #f5f5f5;

		/* Layout Utilities */
		--yak-radius: 6px;
		--yak-content-max-width: 75ch;
		--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);
	}

	.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;
	}

	.entry-content blockquote {
		padding-left: 1rem;
		border-left: 4px solid var(--yak-color-primary);
		color: #444;
		font-style: italic;
	}

	.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;
	}

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

	.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);
	}

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

	.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;
	}

	.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(--yak-color-primary);
		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;
	}

	.yak-footer-widgets {
		display: grid;
		grid-template-columns: 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;
	}

	.yak-archive-wrapper article {
		box-shadow: 0 0 20px rgba(0, 0, 0, .1);
		border-radius: var(--yak-radius);
	}

	.yak-archive-wrapper .yak-archive-body {
		padding: 2rem;
	}

	.yak-archive-wrapper .yak-archive-body h2,
	.yak-archive-wrapper .yak-entry-date {
		margin: 0 0 1rem 0;
	}

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

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

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

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

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

	.yak-archive-image a,
	.yak-archive-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}

	.yak-archive-image img {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		height: 100%;
	}

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

	.yak-archive-wrapper.yak-blog-format-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
		gap: 30px;
		justify-content: center;
	}

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

	.yak-archive-wrapper.yak-blog-format-cards .yak-archive-image {
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.yak-archive-wrapper.yak-blog-format-cards .yak-archive-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.yak-entry-excerpt {
		/* display: none; */
	}

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

	/* ----------------------------------------
		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;
	}

	.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-body {
			order: 2;
			padding: 1.5rem;
		}
	}

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

		.nav-primary {
			flex-grow: 1;
		}

		.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;
			border-bottom: 2px solid transparent;
			transition: border-color 0.2s ease;
		}

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

		.yak-footer-widgets-1 { grid-template-columns: 1fr; }
		.yak-footer-widgets-2 { grid-template-columns: 1fr 1fr; }
		.yak-footer-widgets-3 { grid-template-columns: 1fr 1fr 1fr; }
		.yak-footer-widgets-4 { grid-template-columns: repeat(4, 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);
		}
	}

	@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: #999;
		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.1em;
	}

	.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;
		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);
		border-top-left-radius: var(--yak-radius);
		border-top-right-radius: var(--yak-radius);
		outline: none;
	}

	.yak-main-nav .sub-menu a {
		padding: 0.75rem;
	}

	.yak-main-nav > li.menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		margin-left: 0.5em;
		vertical-align: middle;
		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) {

		.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;
			opacity: 1 !important;
			transform: none !important;
			box-shadow: none !important;
			background: transparent !important;
		}

		
		.yak-submenu-toggle {
			background: none;
			border: none;
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 0.5rem;
			padding: 0.25rem;
			font-size: 1.25rem;
			color: currentColor;
			line-height: 1;
			z-index: 1;
		}

		.yak-submenu-caret {
			display: block;
			width: 1em;
			height: 1em;
			transition: transform 0.2s ease;
			pointer-events: none;
		}

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

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

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

		.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;
		}

		.yak-mobile-menu .sub-menu.is-open {
			max-height: 500px; /* enough to show ~5-6 items */
			opacity: 1;
		}

		/* 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;
		}		
		

	}

	/* ----------------------------------------
		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-primary);
		background: radial-gradient(var(--yak-color-primary), #6e174c);
		height: var(--yak-featured-img-height, 400px);
		padding: 0;
		margin-bottom: -4rem;
		overflow: visible;
		z-index: 0;
	}

	.yak-featured-image-img-wrapper {
		position: relative;
		width: var(--yak-content-max-width);
		height: 100%;
		overflow: hidden;
		z-index: 1;
		/* 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-img-wrapper::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 60%);
		z-index: 1;
	}

	.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;
		left: 0;
		right: 0;
		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%);
	}

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

	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-primary);
		color: var(--yak-color-white);
		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: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--yak-color-primary) 0%, transparent 100%);
		opacity: 1;
		pointer-events: none;
		z-index: 1;
	}

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

   @media (max-width: 960px) {

	body.yak-featured-img-max-width--title_left .yak-featured-image-title {
		background: transparent;
		padding: 2rem;
		position: absolute;
		left: 0;
		width: 80%;
	}

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

	body.yak-featured-img-max-width--title_left .yak-featured-image-top-wrapper {
		position: relative;
	}

}

	.wp-block-separator.has-alpha-channel-opacity {
		display: block;
		width: 100%;
		max-width: 10rem;
		height: 3px;
		margin: 2em auto;
		border: none;
		background: linear-gradient(to right, #ddd, #999, #ddd);
		border-radius: 999px;
		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;
	}
}


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

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