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

   Theme Name: UPK 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.9
   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;
	}

	/* Extra margin-top for entry content on resource pages */
	.single-resource .entry-content {
		margin-top: 2.5rem;
	}

	/* Featured image floated right in entry content (when no attachments) */
	.yak-resource-featured-image-content {
		float: right;
		margin: 0 0 1.5rem 2rem;
		max-width: 40%;
		width: 100%;
	}

	.yak-resource-featured-image-content__img {
		width: 100%;
		height: auto;
		border-radius: var(--yak-radius, 4px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
		display: block;
	}

	/* Clear float on mobile */
	@media (max-width: 959px) {
		.yak-resource-featured-image-content {
			float: none;
			max-width: 100%;
			margin: 0 0 1.5rem 0;
		}
	}

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

	/* 🎨 Enhanced Body Text Links (Multi-line Compatible with Background Gradients) */
	.entry-content a {
		--link-bg-subtle: 0.08;  /* 🎛️ Background highlight opacity (0-1) */
		
		color: var(--yak-color-primary);
		text-decoration: none;
		
		/* 
		 * Using layered background-image gradients for multi-line support
		 * Layer 1: Subtle background highlight (top)
		 * Layer 2: Thin always-visible underline (bottom)
		 */
		background-image: 
			linear-gradient(
				to right,
				rgba(35, 99, 224, 0) 0%,
				rgba(35, 99, 224, 0) 100%
			),
			linear-gradient(currentColor, currentColor);
		
		background-position: 
			0% 50%,      /* Highlight position */
			0% 100%;     /* Underline position */
		
		background-repeat: no-repeat;
		
		background-size: 
			0% 100%,     /* Highlight: 0% width, full height */
			100% 1px;    /* Underline: full width, 1px thin */
		
		/* Smooth transition for the pour effect */
		transition: background-size 0.3s ease, color 0.2s ease;
		
		/* Ensure multi-line support */
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		padding: 2px 0;  /* Small vertical padding for background highlight */
	}

	/* ✨ Hover/Focus: Background highlight pours in + underline thickens */
	.entry-content a:hover,
	.entry-content a:focus {
		color: var(--yak-color-primary);
		
		/* Expand the subtle background highlight on hover */
		background-size: 
			100% 100%,   /* Highlight: full width, full height */
			100% 2px;    /* Underline: full width, slightly thicker */
		
		/* Fill in the highlight layer with muted color */
		background-image: 
			linear-gradient(
				to right,
				var(--yak-color-muted) 0%,
				var(--yak-color-muted) 100%
			),
			linear-gradient(currentColor, currentColor);
	}

	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;
		position: relative;
		z-index: 0;
	}

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

	@media (max-width: 1200px) {
		.content-sidebar-wrap {
			padding-inline: 1.5rem;
		}
	}

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

	/* Archive Pages (Blog/Post Archives) - Full Width Container */
	.archive .content-sidebar-wrap,
	.blog .content-sidebar-wrap,
	.home.blog .content-sidebar-wrap {
		max-width: 1200px;
		padding-inline: 0;
	}

	.content {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* ----------------------------------------
		4.2 Header & Footer
	---------------------------------------- */
	.site-header {
		background: #fff;
		padding: 1rem 2rem;
		box-shadow: 0 0 12px rgba(0, 0, 0, .1);
		flex-shrink: 0; /* Prevent header from shrinking in flex container */
	}

	.site-header > .wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;
		flex-wrap: wrap;
	}
	
	/* Mobile: Logo and menu button always on same row */
	@media (max-width: 959px) {
		.site-header {
			padding: 0.75rem 1rem;
		}
		
		.site-header > .wrap {
			display: flex;
			flex-wrap: nowrap;
			gap: 2rem;
			justify-content: space-between;
			align-items: center;
		}
		
		/* Restructure header layout for mobile */
		.yak-header-layout {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			gap: 2rem;
		}
		
	.yak-header-logo-column {
		flex: 1 1 auto;
		min-width: 0;
		order: 1; /* Logo on left */
	}
	
	.yak-header-logo-column .yak-logo-wrapper {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
	}
	
	.yak-header-logo-column .title-area {
		flex: 1 1 auto;
		min-width: 0;
	}
		
		.yak-header-menus-column {
			display: none; /* Hide menus column on mobile */
		}
		
		.yak-menu-toggle {
			flex-shrink: 0;
			order: 999; /* Toggle button on right */
		}
	}

	.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;
	}
	
	/* Mobile: Logo shrinks gracefully */
	@media (max-width: 959px) {
		.yak-site-logo {
			flex-shrink: 1;
			min-width: 0;
			max-width: 100%;
		}
		
		.yak-site-logo img {
			max-width: 100%;
			height: auto;
			display: block;
		}
	}

	.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);
		flex-shrink: 0; /* Prevent footer from shrinking in flex container */
	}

	.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%;
		/* Remove all link effects from archive images */
		text-decoration: none !important;
		background-image: none !important;
		background-size: auto !important;
		padding: 0 !important;
		display: block;
		transition: filter 0.3s ease;
	}

	.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%;
		transition: filter 0.3s ease;
	}

	/* ✨ Brighten image by 5% on hover */
	.yak-archive-image a:hover img,
	.yak-archive-image a:focus img {
		filter: brightness(1.05);
	}

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

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

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

	   
	.archive-pagination {
	    display: flex;
	    justify-content: center;
	    margin: 2rem 0;
	}
	
	.archive-pagination ul {
	    display: flex;
	    gap: 0.5rem;
	    padding: 0;
	    margin: 0;
	    list-style: none;
	}
	
	.archive-pagination li a {
	    display: inline-block;
	    padding: 0.5rem 1rem;
	    background-color: var(--yak-color-muted);
	    color: var(--yak-color-black);
	    text-decoration: none;
	    border-radius: var(--yak-radius);
	    font-size: 0.95rem;
	    line-height: 1.2;
	    transition: background-color 0.2s ease, color 0.2s ease;
	}
	
	.archive-pagination li a:hover,
	.archive-pagination li a:focus {
	    background-color: var(--yak-color-primary);
	    color: var(--yak-color-white);
	}
	
	.archive-pagination li.active a {
	    background-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: 1rem;
		margin-bottom: 2rem;
	}

	/* Single post entry header - ensure meta has proper spacing */
	.single-post .entry-header .yak-entry-meta-wrapper {
		margin-top: 1rem;
		margin-bottom: 0;
	}

	.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: var(--yak-color-black);
			padding: 0.5rem 0;
			display: inline-block;
		}

		/* ----------------------------------------
			Two-Column Header Layout (when top menu exists)
		---------------------------------------- */
		/* Override wrap flex when new layout is active */
		.site-header > .wrap:has(.yak-header-layout) {
			display: block;
			width: 100%;
		}

		.yak-header-layout {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			gap: 2rem;
			width: 100%;
		}

	/* Left column: Logo (full height) */
	.yak-header-logo-column {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.yak-header-logo-column .yak-logo-wrapper {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.yak-header-logo-column .title-area {
		display: flex;
		align-items: center;
		height: 100%;
	}

		/* Right column: Menus (flex column, two rows) */
		.yak-header-menus-column {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1 1 auto;
			gap: 0.5rem;
		}

		/* Top menu row */
		.yak-header-top-menu-row {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.yak-header-top-menu-row .yak-top-menu {
			display: flex;
			justify-content: flex-end;
		}

		/* Main menu row */
		.yak-header-main-menu-row {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.yak-header-main-menu-row .nav-primary {
			flex-grow: 1;
		}

		.yak-header-main-menu-row .nav-primary .wrap {
			display: flex;
			justify-content: flex-end;
		}

		.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);
		overflow: visible; /* Prevent overflow from breaking sticky */
		isolation: isolate; /* Create stacking context to stay above content */
	}
	
	/* Remove overflow from header children that breaks sticky positioning */
	body.yak-has-sticky-header .site-header > .wrap,
	body.yak-has-sticky-header .yak-header-layout,
	body.yak-has-sticky-header .yak-header-logo-column,
	body.yak-has-sticky-header .yak-logo-wrapper,
	body.yak-has-sticky-header .title-area {
		overflow: visible;
	}

		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);
			transition: border-color 0.2s ease, outline 0.2s ease;
		}
		
		.yak-inline-search-form input[type="search"]:focus {
			outline: 2px solid var(--upk-medium-blue);
			outline-offset: 2px;
			border-color: var(--upk-medium-blue);
		}
	}

	/* ----------------------------------------
		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);
		transition: border-color 0.2s ease, outline 0.2s ease;
	}
	
	input[type="search"]:focus {
		outline: 2px solid var(--upk-medium-blue);
		outline-offset: 2px;
		border-color: var(--upk-medium-blue);
	}

	.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:not(.yak-btn-unstyled),
	.wp-block-button__link:not(.yak-btn-unstyled),
	input[type="submit"]:not(.yak-btn-unstyled),
	input[type="button"]:not(.yak-btn-unstyled),
	button:not(.tdsc-collapse__toggle):not(.yak-feedback-option):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.yak-btn-unstyled):not(.yak-modal-close) {
		/* 🎯 Easy Tweaking Variables */
		--btn-lift: -2px;                    /* How much button lifts (negative = up) */
		--btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Shadow on hover */
		--btn-fill-speed: 0.3s;              /* Pour animation speed */
		
		/* 🎨 3D Effect Knobs (adjust these!) */
		--btn-3d-top-light: 0.3;             /* Top edge brightness (0-1) */
		--btn-3d-bottom-dark: 0.2;           /* Bottom edge darkness (0-1) */
		--btn-3d-edge-size: 2px;             /* How thick the edges are */
		--btn-3d-base-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);  /* Resting shadow */
		
		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;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		
		/* 🎨 Pour Effect Setup */
		position: relative;
		overflow: hidden;
		z-index: 1;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		color: var(--yak-color-white);
		
		/* ✨ 3D Hint: Light top edge + Dark bottom edge + Base shadow */
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, var(--btn-3d-top-light)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, var(--btn-3d-bottom-dark)),
			var(--btn-3d-base-shadow);
	}
	
	/* Smooth text color transition synced with fill animation */
	.button:not(.yak-btn-unstyled),
	.wp-block-button__link:not(.yak-btn-unstyled),
	input[type="submit"]:not(.yak-btn-unstyled),
	input[type="button"]:not(.yak-btn-unstyled),
	button:not(.tdsc-collapse__toggle):not(.yak-feedback-option):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.yak-btn-unstyled):not(.yak-modal-close) {
		/* Text color transitions at same speed as fill for smooth sync */
		transition: transform 0.2s ease, box-shadow 0.2s ease, color var(--btn-fill-speed) ease;
	}

	/* 🌊 Left-to-Right Pour Fill */
	.button:not(.yak-btn-unstyled)::before,
	.wp-block-button__link:not(.yak-btn-unstyled)::before,
	input[type="submit"]:not(.yak-btn-unstyled)::before,
	input[type="button"]:not(.yak-btn-unstyled)::before,
	button:not(.tdsc-collapse__toggle):not(.yak-feedback-option):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.yak-btn-unstyled):not(.yak-modal-close):not(.ca-upk-map-nav-btn):not(.ca-upk-map-bubble):not(.ca-upk-map-hub):not(.ca-upk-map-dot)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: var(--upk-medium-blue);
		transition: width var(--btn-fill-speed) ease;
		z-index: -1;
	}

	/* ✨ Hover: Pour + Lift + Enhanced 3D + Dark Bottom Edge */
	.button:not(.yak-btn-unstyled):hover,
	.wp-block-button__link:not(.yak-btn-unstyled):hover,
	input[type="submit"]:not(.yak-btn-unstyled):hover,
	input[type="button"]:not(.yak-btn-unstyled):hover,
	button:not(.tdsc-collapse__toggle):not(.yak-feedback-option):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.yak-btn-unstyled):not(.yak-modal-close):hover {
		transform: translateY(var(--btn-lift));
		color: var(--yak-color-white);
		/* Enhanced 3D on hover (brighter/darker) + lift shadow */
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, calc(var(--btn-3d-top-light) + 0.1)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, calc(var(--btn-3d-bottom-dark) + 0.1)),
			var(--btn-shadow),
			0 2px 0 0 var(--yak-color-primary);  /* 🎨 Navy blue bottom edge for extra 3D depth */
	}

	.button:not(.yak-btn-unstyled):hover::before,
	.wp-block-button__link:not(.yak-btn-unstyled):hover::before,
	input[type="submit"]:not(.yak-btn-unstyled):hover::before,
	input[type="button"]:not(.yak-btn-unstyled):hover::before,
	button:not(.tdsc-collapse__toggle):not(.yak-feedback-option):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.yak-btn-unstyled):not(.yak-modal-close):not(.ca-upk-map-nav-btn):not(.ca-upk-map-bubble):not(.ca-upk-map-hub):not(.ca-upk-map-dot):hover::before {
		width: 100%;
	}

	/* 🚫 Collapse Toggles: Keep 3D effect but no movement on hover */
	.tdsc-collapse__toggle {
		transition: opacity 0.2s ease, box-shadow 0.2s ease;
		color: inherit !important; /* Always preserve editor-set text color */
	}
	
	.tdsc-collapse__toggle:hover {
		transform: none !important; /* No lift movement */
		color: inherit !important; /* Don't override editor-set colors */
		opacity: 0.9 !important; /* Slight opacity change for hover feedback */
		/* Keep 3D box-shadow effects from button styles */
	}
	
	/* Only show focus styles for keyboard navigation, not mouse clicks */
	.tdsc-collapse__toggle:focus {
		transform: none !important; /* No lift movement */
		color: inherit !important; /* Don't override editor-set colors */
		opacity: inherit !important; /* Don't change opacity on mouse click */
	}
	
	.tdsc-collapse__toggle:focus-visible {
		transform: none !important; /* No lift movement */
		color: inherit !important; /* Don't override editor-set colors */
		outline: 2px solid var(--upk-medium-blue);
		outline-offset: 2px;
		opacity: 1; /* Full opacity on keyboard focus */
		/* Keep 3D box-shadow effects from button styles */
	}
	
	.tdsc-collapse__toggle:active {
		transform: none !important; /* No press animation */
		animation: none !important; /* No pulse animation */
		opacity: 0.85 !important; /* Slightly more opacity change when pressed */
		color: inherit !important; /* Don't override editor-set colors */
	}
	
	/* Disable pour fill effect on collapse toggles */
	.tdsc-collapse__toggle::before {
		display: none !important;
	}

	/* 🎯 Active: Pressed Down + Subtle Pulse */
	.button:active,
	.wp-block-button__link:active,
	input[type="submit"]:active,
	input[type="button"]:active,
	button:active:not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle) {
		transform: translateY(0) scale(0.99);  /* Subtle press + tiny shrink */
		/* Flattened shadows when pressed */
		box-shadow: 
			inset 0 1px 2px rgba(0, 0, 0, 0.2),
			0 1px 2px rgba(0, 0, 0, 0.05);
		transition: transform 0.1s ease, box-shadow 0.1s ease;
		animation: btn-click-pulse-subtle 0.3s ease-out;
	}

	/* 💫 Subtle Click Pulse - barely noticeable */
	@keyframes btn-click-pulse-subtle {
		0% {
			transform: translateY(0) scale(0.99);
		}
		50% {
			transform: translateY(0) scale(0.98);  /* Just 1% more shrink */
		}
		100% {
			transform: translateY(0) scale(0.99);
		}
	}

	/* ♿ Focus: Same effect as hover for accessibility */
	.button:focus,
	.wp-block-button__link:focus,
	input[type="submit"]:focus,
	input[type="button"]:focus,
	button:focus:not(.tdsc-collapse__toggle):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle) {
		outline: 2px solid var(--yak-color-muted);
		outline-offset: 2px;
		transform: translateY(var(--btn-lift));
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, calc(var(--btn-3d-top-light) + 0.1)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, calc(var(--btn-3d-bottom-dark) + 0.1)),
			var(--btn-shadow),
			0 2px 0 0 var(--yak-color-primary);  /* 🎨 Navy blue bottom edge for extra 3D depth */
	}

	.button:focus::before,
	.wp-block-button__link:focus::before,
	input[type="submit"]:focus::before,
	input[type="button"]:focus::before,
	button:focus:not(.tdsc-collapse__toggle):not(.yak-menu-toggle):not(.yak-mobile-close):not(.yak-submenu-toggle):not(.ca-upk-map-nav-btn):not(.ca-upk-map-bubble):not(.ca-upk-map-hub):not(.ca-upk-map-dot)::before {
		width: 100%;
	}

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

	/* Homepage Hero Buttons: White background with fill animation and 3D effects */
	.clb-homepage-hero .button:not(.yak-btn-unstyled),
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled),
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled),
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled),
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled),
	.clb-homepage-hero button:not(.yak-btn-unstyled) {
		/* Enable button effects */
		--btn-lift: -2px;
		--btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		--btn-fill-speed: 0.3s;
		--btn-3d-top-light: 0.3;
		--btn-3d-bottom-dark: 0.2;
		--btn-3d-edge-size: 2px;
		--btn-3d-base-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
		
		/* White background with white border */
		background-color: var(--yak-color-white);
		border: 2px solid var(--yak-color-white);
		color: var(--yak-color-white); /* White text always */
		
		/* Text styling */
		text-transform: uppercase;
		letter-spacing: normal;
		
		/* Pour Effect Setup */
		position: relative;
		overflow: hidden;
		z-index: 1;
		isolation: isolate; /* Ensure text stays above fill */
		
		/* Transitions */
		transition: transform 0.2s ease, box-shadow 0.2s ease, color var(--btn-fill-speed) ease;
		
		/* 3D Effect */
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, var(--btn-3d-top-light)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, var(--btn-3d-bottom-dark)),
			var(--btn-3d-base-shadow);
	}

	/* Left-to-Right Pour Fill - Translucent white on hover */
	.clb-homepage-hero .button:not(.yak-btn-unstyled)::before,
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled)::before,
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled)::before,
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled)::before,
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled)::before,
	.clb-homepage-hero button:not(.yak-btn-unstyled)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.3); /* Translucent white fill */
		transition: width var(--btn-fill-speed) ease;
		z-index: -1;
	}

	/* Hover: Pour + Lift + Enhanced 3D + Navy Text */
	.clb-homepage-hero .button:not(.yak-btn-unstyled):hover,
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled):hover,
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled):hover,
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled):hover,
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled):hover,
	.clb-homepage-hero button:not(.yak-btn-unstyled):hover {
		outline: none !important;
		color: var(--yak-color-primary, #003a5d) !important; /* Navy text on hover */
		transform: translateY(var(--btn-lift));
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, calc(var(--btn-3d-top-light) + 0.1)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, calc(var(--btn-3d-bottom-dark) + 0.1)),
			var(--btn-shadow),
			0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.clb-homepage-hero .button:not(.yak-btn-unstyled):hover::before,
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled):hover::before,
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled):hover::before,
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled):hover::before,
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled):hover::before,
	.clb-homepage-hero button:not(.yak-btn-unstyled):hover::before {
		width: 100%;
	}

	/* Focus: Same effect as hover for accessibility */
	.clb-homepage-hero .button:not(.yak-btn-unstyled):focus,
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled):focus,
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled):focus,
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled):focus,
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled):focus,
	.clb-homepage-hero button:not(.yak-btn-unstyled):focus {
		outline: 2px solid var(--yak-color-muted);
		outline-offset: 2px;
		color: var(--yak-color-white) !important; /* White text always */
		transform: translateY(var(--btn-lift));
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, calc(var(--btn-3d-top-light) + 0.1)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, calc(var(--btn-3d-bottom-dark) + 0.1)),
			var(--btn-shadow),
			0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.clb-homepage-hero .button:not(.yak-btn-unstyled):focus::before,
	.clb-homepage-hero .wp-block-button__link:not(.yak-btn-unstyled):focus::before,
	.clb-homepage-hero .wp-block-buttons .wp-block-button__link:not(.yak-btn-unstyled):focus::before,
	.clb-homepage-hero input[type="submit"]:not(.yak-btn-unstyled):focus::before,
	.clb-homepage-hero input[type="button"]:not(.yak-btn-unstyled):focus::before,
	.clb-homepage-hero button:not(.yak-btn-unstyled):focus::before {
		width: 100%;
	}

	/* Secondary Button Style - Flat gray with dark text */
	.button-secondary,
	button.button-secondary,
	.yak-modal .button-secondary,
	.yak-modal button.button-secondary {
		background-color: #ddd !important;
		color: var(--yak-color-black) !important;
		border: 1px solid #ccc !important;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		/* Remove 3D effects for flat design */
		box-shadow: none !important;
		transform: none !important;
	}

	/* Disable pour effect for secondary buttons */
	.button-secondary::before,
	button.button-secondary::before,
	.yak-modal .button-secondary::before,
	.yak-modal button.button-secondary::before {
		display: none !important;
	}

	.button-secondary:hover,
	.button-secondary:focus,
	button.button-secondary:hover,
	button.button-secondary:focus,
	.yak-modal .button-secondary:hover,
	.yak-modal .button-secondary:focus,
	.yak-modal button.button-secondary:hover,
	.yak-modal button.button-secondary:focus {
		background-color: #eee !important;
		color: var(--yak-color-black) !important;
		/* Flat hover state - no 3D effects */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
		transform: none !important;
		border-color: #bbb !important;
	}

	.button-secondary:hover::before,
	.button-secondary:focus::before,
	button.button-secondary:hover::before,
	button.button-secondary:focus::before,
	.yak-modal .button-secondary:hover::before,
	.yak-modal .button-secondary:focus::before,
	.yak-modal button.button-secondary:hover::before,
	.yak-modal button.button-secondary:focus::before {
		display: none !important;
	}

	/* Active state - subtle press effect */
	.button-secondary:active,
	button.button-secondary:active,
	.yak-modal .button-secondary:active,
	.yak-modal button.button-secondary:active {
		background-color: #ddd !important;
		color: var(--yak-color-black) !important;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
		transform: none !important;
		border-color: #ccc !important;
	}

	/* ----------------------------------------
		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 {
		/* Modern button reset */
		background: transparent;
		border: none;
		padding: 0.5rem;
		margin: -0.5rem -0.5rem -0.5rem 0; /* Negative margin to align with header padding */
		cursor: pointer;
		color: var(--yak-color-primary, #003a5d);
		opacity: 1;
		transition: opacity 0.2s ease, color 0.2s ease;
		font-size: 1.25rem;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: var(--yak-radius, 4px);
		
		/* Remove button 3D styling and shadows */
		box-shadow: none !important;
		transform: none !important;
		outline: none;
	}

	button.yak-modal-close:hover {
		opacity: 1;
		color: #c0392b;
		box-shadow: none !important;
		transform: none !important;
	}
	
	button.yak-modal-close:focus {
		opacity: 1;
		outline: 2px solid var(--upk-medium-blue);
		outline-offset: 2px;
		box-shadow: none !important;
		transform: none !important;
	}
	
	/* Font Awesome icon styling */
	button.yak-modal-close i {
		font-size: inherit;
		line-height: 1;
		display: block;
	}

	/* 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-footer {
		padding: 1rem 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #dee2e6;
	}

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

	.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);
		font-size: var(--yak-font-lg);
		display: inline-block;
		width: 100%;
		padding: 0.75rem 0.5rem;
		text-decoration: none;
		color: var(--yak-color-black);
		font-weight: 700;
		background: transparent;
		transition: background-color 0.2s ease;
		position: relative;
	}

	/* Animated underline effect for top-level menu items */
	.yak-main-nav > li > a::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0.5rem;
		right: 0.5rem;
		height: 2px;
		background-color: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s ease;
	}

	.yak-main-nav > li > a:hover::before,
	.yak-main-nav > li > a:focus::before,
	.yak-main-nav > li.current-menu-item > a::before {
		transform: scaleX(1);
	}

	.yak-main-nav a:hover,
	.yak-main-nav a:focus {
		/* 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;
	}


	/* ----------------------------------------
		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 !important;
			border: none !important;
			cursor: pointer;
			/* Remove all button styling - keep it simple */
			padding: 0 !important;
			margin: 0 !important;
			box-shadow: none !important;
			transform: none !important;
			transition: none !important;
			border-radius: 0 !important;
		}
		
		/* Remove button fill effect */
		.yak-menu-toggle::before {
			display: none !important;
		}
		
		/* Remove button styling on hover/focus/active */
		.yak-menu-toggle:hover,
		.yak-menu-toggle:focus,
		.yak-menu-toggle:active {
			background: none !important;
			border: none !important;
			box-shadow: none !important;
			transform: none !important;
			color: inherit !important;
		}
	
		.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;
		}

		/* 🚫 Disable desktop animated underline in mobile menu */
		.yak-mobile-menu a::before {
			content: none !important;
			display: none !important;
		}

		.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 {
		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;
			/* 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 !important;
			border: none !important;
			font-size: 2rem;
			line-height: 1;
			cursor: pointer;
			color: var(--yak-color-black);
			padding: 0 !important;
			margin: 0 !important;
			/* Remove all button styling - keep it simple */
			box-shadow: none !important;
			transform: none !important;
			transition: none !important;
			border-radius: 0 !important;
		}
		
		/* Remove button fill effect */
		.yak-mobile-close::before {
			display: none !important;
		}
		
		/* Remove button styling on hover/focus/active */
		.yak-mobile-close:hover,
		.yak-mobile-close:focus,
		.yak-mobile-close:active {
			background: none !important;
			border: none !important;
			box-shadow: none !important;
			transform: none !important;
			color: var(--yak-color-black) !important;
		}

		.title-area {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 0.75rem;
			padding: 0;
		}
	
		.yak-site-logo {
			max-width: 48px;
			flex-shrink: 1;
			min-width: 0;
			width: auto;
			height: auto;
		}
		
		.yak-site-logo img {
			max-width: 100%;
			height: auto;
			display: block;
		}
	
		.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: radial-gradient(var(--yak-featured-image-bg-color, var(--yak-color-primary)), var(--yak-featured-image-bg-color, 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;
		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;
		padding: 0 4rem;
		text-align: center;
		color: white;
		z-index: 2;
		max-width: var(--yak-content-max-width);
		left: 50%;
		transform: translateX(-50%);
		
		/* Building blocks container - flex column for stacking */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	/* Mobile responsive styles for featured image title */
	@media (max-width: 768px) {
		/* Stack image on top, title below with background */
		.yak-featured-image-top-wrapper {
			flex-direction: column;
			height: auto !important;
		}
		
		.yak-featured-image-img-wrapper {
			width: 100%;
			height: var(--yak-featured-img-height, 400px);
			max-height: 50vh;
			border-radius: 0;
			box-shadow: none;
		}
		
		/* Remove dark gradient overlay on mobile since title isn't overlapping */
		.yak-featured-image-img-wrapper::before {
			display: none;
		}
		
		.yak-featured-image-title {
			position: relative;
			bottom: auto;
			left: auto;
			transform: none;
			width: 100%;
			max-width: 100%;
			padding: 1.5rem 1.25rem;
			background: var(--yak-featured-image-bg-color, var(--yak-color-primary));
			text-align: center;
			gap: 0.5rem;
		}

		.yak-featured-image-title h1 {
			font-size: var(--yak-font-xl);
			line-height: var(--yak-lh-xl);
			padding: 0 !important;
			margin: 0;
			background: transparent !important;
			filter: none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			display: block !important;
			text-shadow: none !important;
		}
		
		.yak-page-subtitle {
			padding: 0 !important;
			margin: 0;
			background: transparent !important;
			filter: none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			backdrop-filter: none !important;
			max-width: 100%;
			line-height: 1.4;
		}
	}

	@media (max-width: 480px) {
		.yak-featured-image-img-wrapper {
			height: 300px;
			max-height: 50vh;
		}
		
		.yak-featured-image-title {
			padding: 1.25rem 1rem;
			gap: 0.4rem;
		}

		.yak-featured-image-title h1 {
			font-size: var(--yak-font-lg);
			line-height: var(--yak-lh-lg);
			padding: 0 !important;
			background: transparent !important;
			filter: none !important;
			border-radius: 0 !important;
		}
		
		.yak-page-subtitle {
			font-size: var(--yak-font-base);
			line-height: 1.3;
			padding: 0 !important;
			background: transparent !important;
			filter: none !important;
		}
	}

	.yak-featured-image-title h1 {
		font-size: var(--yak-font-3xl);
		line-height: var(--yak-lh-3xl);
		margin: 0;
		
		/* Professional 3D Building block - refined and polished */
		/* Enhanced gradient with more color pop */
		background: linear-gradient(
			135deg,
			var(--yak-featured-image-bg-color, var(--yak-color-primary)) 0%,
			color-mix(in srgb, var(--yak-featured-image-bg-color, var(--yak-color-primary)) 92%, black) 50%,
			color-mix(in srgb, var(--yak-featured-image-bg-color, var(--yak-color-primary)) 95%, black) 100%
		);
		/* Add subtle saturation boost for color pop */
		filter: saturate(1.1) brightness(1.05);
		padding: 1.5rem 2.5rem;
		border-radius: 10px;
		
		/* Professional shadow system - consistent top-left light source */
		/* Material Design elevation principles with realistic shadows */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		box-shadow: 
			/* Inset highlight - top-left light reflection */
			inset 0 1px 3px rgba(255, 255, 255, 0.15),
			/* Inset shadow - bottom-right depth */
			inset 0 -1px 2px rgba(0, 0, 0, 0.2),
			/* Primary elevation shadow - soft, diffused */
			0 4px 6px -1px rgba(0, 0, 0, 0.1),
			0 2px 4px -1px rgba(0, 0, 0, 0.06),
			/* Depth shadow - creates 3D edge effect */
			3px 3px 8px rgba(0, 0, 0, 0.15),
			/* Ambient shadow - soft outer glow */
			0 10px 25px -5px rgba(0, 0, 0, 0.2);
		*/
		
		/* Refined border - subtle gradient for professional edge */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		border: 1px solid;
		border-color: 
			rgba(255, 255, 255, 0.12) 
			rgba(0, 0, 0, 0.08) 
			rgba(0, 0, 0, 0.12) 
			rgba(255, 255, 255, 0.08);
		*/
		
		/* Reduced rotation for more professional appearance */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/* transform: rotate(-0.75deg); */
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
		            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: inline-block;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		position: relative;
		backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
	}
	
	/* Refined hover effect - subtle elevation increase */
	.yak-featured-image-title h1:hover {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow */
		/* transform: rotate(-0.5deg) translateY(-1px); */
		/*
		box-shadow: 
			inset 0 1px 3px rgba(255, 255, 255, 0.2),
			inset 0 -1px 2px rgba(0, 0, 0, 0.25),
			0 6px 8px -1px rgba(0, 0, 0, 0.12),
			0 3px 6px -1px rgba(0, 0, 0, 0.08),
			4px 4px 10px rgba(0, 0, 0, 0.18),
			0 12px 30px -5px rgba(0, 0, 0, 0.25);
		*/
	}

	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: transparent;
		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;
		align-items: flex-start;
	}
	
	/* Left variant - refined professional styling */
	body.yak-featured-img-max-width--title_left .yak-featured-image-title h1 {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/* transform: rotate(0.75deg); */
		/* Professional shadows - light from top-left, shadows to bottom-right */
		/*
		box-shadow: 
			inset 0 1px 3px rgba(255, 255, 255, 0.15),
			inset 0 -1px 2px rgba(0, 0, 0, 0.2),
			0 4px 6px -1px rgba(0, 0, 0, 0.1),
			0 2px 4px -1px rgba(0, 0, 0, 0.06),
			-3px 3px 8px rgba(0, 0, 0, 0.15),
			0 10px 25px -5px rgba(0, 0, 0, 0.2);
		*/
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		border: 1px solid;
		border-color: 
			rgba(255, 255, 255, 0.12) 
			rgba(255, 255, 255, 0.08) 
			rgba(0, 0, 0, 0.12) 
			rgba(0, 0, 0, 0.08);
		*/
	}
	
	body.yak-featured-img-max-width--title_left .yak-featured-image-title h1:hover {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow */
		/* transform: rotate(0.5deg) translateY(-1px); */
		/*
		box-shadow: 
			inset 0 1px 3px rgba(255, 255, 255, 0.2),
			inset 0 -1px 2px rgba(0, 0, 0, 0.25),
			0 6px 8px -1px rgba(0, 0, 0, 0.12),
			0 3px 6px -1px rgba(0, 0, 0, 0.08),
			-4px 4px 10px rgba(0, 0, 0, 0.18),
			0 12px 30px -5px rgba(0, 0, 0, 0.25);
		*/
	}
	
	body.yak-featured-img-max-width--title_left .yak-page-subtitle {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/* transform: rotate(-1deg) translateX(-10px); */
		/* Professional shadows for left alignment */
		/*
		box-shadow: 
			inset 0 1px 2px rgba(255, 255, 255, 0.25),
			inset 0 -1px 2px rgba(0, 0, 0, 0.15),
			0 3px 5px -1px rgba(0, 0, 0, 0.08),
			0 1px 3px -1px rgba(0, 0, 0, 0.05),
			-2px 2px 6px rgba(0, 0, 0, 0.12),
			0 8px 20px -5px rgba(0, 0, 0, 0.15);
		*/
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		border: 1px solid;
		border-color: 
			rgba(255, 255, 255, 0.25) 
			rgba(255, 255, 255, 0.2) 
			rgba(255, 255, 255, 0.1) 
			rgba(255, 255, 255, 0.15);
		*/
	}
	
	body.yak-featured-img-max-width--title_left .yak-page-subtitle:hover {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow */
		/* transform: rotate(-0.75deg) translateX(-8px) translateY(-1px); */
		/*
		box-shadow: 
			inset 0 1px 2px rgba(255, 255, 255, 0.3),
			inset 0 -1px 2px rgba(0, 0, 0, 0.2),
			0 4px 6px -1px rgba(0, 0, 0, 0.1),
			0 2px 4px -1px rgba(0, 0, 0, 0.06),
			-3px 3px 8px rgba(0, 0, 0, 0.15),
			0 10px 25px -5px rgba(0, 0, 0, 0.2);
		*/
	}

	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-featured-image-bg-color, 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: 0;
		
		/* Professional 3D Building block - second block, refined */
		/* More subtle glassmorphism - reduced brightness */
		background: linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.12) 0%,
			rgba(255, 255, 255, 0.08) 100%
		);
		backdrop-filter: blur(12px) saturate(120%);
		-webkit-backdrop-filter: blur(12px) saturate(120%);
		padding: 1.25rem 2.25rem;
		border-radius: 10px;
		
		/* Professional shadow system - consistent with title block */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		box-shadow: 
			/* Inset highlight */
			inset 0 1px 2px rgba(255, 255, 255, 0.25),
			/* Inset shadow */
			inset 0 -1px 2px rgba(0, 0, 0, 0.15),
			/* Primary elevation */
			0 3px 5px -1px rgba(0, 0, 0, 0.08),
			0 1px 3px -1px rgba(0, 0, 0, 0.05),
			/* Depth shadow */
			2px 2px 6px rgba(0, 0, 0, 0.12),
			/* Ambient shadow */
			0 8px 20px -5px rgba(0, 0, 0, 0.15);
		*/
		
		/* Refined border - more subtle for reduced brightness */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/*
		border: 1px solid;
		border-color: 
			rgba(255, 255, 255, 0.18) 
			rgba(255, 255, 255, 0.12) 
			rgba(255, 255, 255, 0.08) 
			rgba(255, 255, 255, 0.15);
		*/
		
		/* Reduced rotation for professional look */
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow, border */
		/* transform: rotate(1deg) translateX(12px); */
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
		            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: inline-block;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		max-width: 90%;
		position: relative;
		backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
	}
	
	/* Refined hover effect */
	.yak-page-subtitle:hover {
		/* COMMENTED OUT: Opinioned block styling - transform, box-shadow */
		/* transform: rotate(0.75deg) translateX(10px) translateY(-1px); */
		/*
		box-shadow: 
			inset 0 1px 2px rgba(255, 255, 255, 0.3),
			inset 0 -1px 2px rgba(0, 0, 0, 0.2),
			0 4px 6px -1px rgba(0, 0, 0, 0.1),
			0 2px 4px -1px rgba(0, 0, 0, 0.06),
			3px 3px 8px rgba(0, 0, 0, 0.15),
			0 10px 25px -5px rgba(0, 0, 0, 0.2);
		*/
	}

   @media (max-width: 960px) {

	/* Title left variant also stacks on mobile */
	body.yak-featured-img-max-width--title_left .yak-featured-image-top-wrapper {
		position: relative;
		flex-direction: column;
		height: auto !important;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper {
		width: 100%;
		height: var(--yak-featured-img-height, 400px);
	}
	
	body.yak-featured-img-max-width--title_left .yak-featured-image-img-wrapper::after {
		display: none;
	}

	body.yak-featured-img-max-width--title_left .yak-featured-image-title {
		position: relative;
		width: 100%;
		max-width: 100%;
		padding: 2rem 1.5rem;
		padding-left: 1.5rem;
		background: var(--yak-featured-image-bg-color, var(--yak-color-primary));
		text-align: center;
		align-items: center;
		left: auto;
		bottom: auto;
		transform: none;
	}

}

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

	/* ----------------------------------------
		5.X Resource Entry Header Metabox
	---------------------------------------- */
	.yak-resource-metabox {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		padding-bottom: 2rem;
		border-top: 1px solid var(--yak-base-3, #e5e5e5);
		position: relative;
	}

	/* Divider after metabox - matches top border */
	.yak-resource-metabox::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-color: var(--yak-base-3, #e5e5e5);
	}

	.yak-resource-metabox__inner {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
		align-items: flex-start;
	}

	.yak-resource-metabox__content {
		flex: 1 1 0;
		min-width: 0;
	}

	.yak-resource-metabox__image {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.yak-resource-metabox__title {
		font-size: var(--yak-font-lg);
		font-weight: 600;
		margin: 0 0 1rem 0;
		color: var(--yak-color-primary);
		font-family: var(--yak-primary-font);
	}

	.yak-resource-attachments {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.yak-resource-attachment {
		margin: 0;
	}

	.yak-resource-attachment__link {
		/* Match default button style but in gray */
		--btn-lift: -2px;
		--btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		--btn-fill-speed: 0.3s;
		--btn-3d-top-light: 0.3;
		--btn-3d-bottom-dark: 0.2;
		--btn-3d-edge-size: 2px;
		--btn-3d-base-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
		
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.6em 1rem;
		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, 4px);
		background-color: var(--yak-base-2, #f0f0f0);
		color: var(--yak-color-black);
		text-decoration: none;
		cursor: pointer;
		text-align: left;
		text-transform: none;
		letter-spacing: normal;
		
		/* Pour Effect Setup */
		position: relative;
		overflow: hidden;
		z-index: 1;
		transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		
		/* 3D Effect */
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, var(--btn-3d-top-light)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, var(--btn-3d-bottom-dark)),
			var(--btn-3d-base-shadow);
	}

	/* Left-to-Right Pour Fill - Medium Blue on hover */
	.yak-resource-attachment__link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: var(--upk-medium-blue);
		transition: width var(--btn-fill-speed) ease;
		z-index: -1;
	}

	.yak-resource-attachment__link:hover::before,
	.yak-resource-attachment__link:focus::before {
		width: 100%;
	}

	/* Hover: Pour + Lift + Enhanced 3D */
	.yak-resource-attachment__link:hover,
	.yak-resource-attachment__link:focus {
		transform: translateY(var(--btn-lift));
		color: var(--yak-color-white);
		box-shadow: 
			inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, calc(var(--btn-3d-top-light) + 0.1)),
			inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, calc(var(--btn-3d-bottom-dark) + 0.1)),
			var(--btn-shadow),
			0 2px 0 0 var(--upk-medium-blue);
	}

	.yak-resource-attachment__name,
	.yak-resource-attachment__type,
	.yak-resource-attachment__icon {
		position: relative;
		z-index: 1;
	}

	.yak-resource-attachment__name {
		flex: 1;
		font-size: var(--yak-font-md);
		line-height: var(--yak-lh-2xl);
	}

	.yak-resource-attachment__type {
		font-size: var(--yak-font-xs);
		padding: 0.3em 0.75em;
		background-color: var(--yak-base-2, #f0f0f0);
		border: 1px solid var(--yak-base-3, #e5e5e5);
		border-radius: 999px; /* Pill format */
		color: var(--yak-base-6, #666);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		transition: all 0.2s ease;
	}

	/* PDF files - Red text, pill format */
	.yak-resource-attachment--pdf .yak-resource-attachment__type {
		background-color: var(--yak-base-2, #f0f0f0);
		border-color: var(--yak-base-3, #e5e5e5);
		color: #D32F2F; /* Muted Adobe red text */
	}

	/* Word files - MS Word blue */
	.yak-resource-attachment--word .yak-resource-attachment__type {
		background-color: #2B579A; /* MS Word blue */
		color: #ffffff;
		border-color: #2B579A;
	}

	/* Feedback buttons on single resource pages - light gray fill from left to right on hover */
	.yak-feedback-button {
		position: relative;
		overflow: hidden;
		transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, color 0.3s ease;
		outline: none !important; /* Remove default outline */
		border: none;
		opacity: 0.8;
		isolation: isolate; /* Create stacking context */
		z-index: 1; /* Establish stacking context */
		transform: translateY(0); /* Initial state - no transform */
	}

	.yak-feedback-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: #e5e5e5; /* Light gray */
		transition: width 0.3s ease;
		z-index: -1; /* Behind all content */
	}

	.yak-feedback-button:hover::before,
	.yak-feedback-button:focus::before {
		width: 100%;
	}

	.yak-feedback-button:hover {
		outline: none !important; /* Remove outline on hover */
		opacity: 0.8; /* Maintain opacity on hover */
		transform: translateY(-1px) !important; /* Very subtle lift to match other buttons proportionally */
		color: var(--yak-color-black, #000) !important; /* Very dark text on hover */
		/* Very subtle 3D effect with tiny shadow below */
		box-shadow: 
			inset 0 1px 0 rgba(255, 255, 255, 0.3),
			inset 0 -1px 0 rgba(0, 0, 0, 0.2),
			0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.yak-feedback-button:hover i,
	.yak-feedback-button:hover > * {
		color: var(--yak-color-black, #000) !important; /* Very dark text on hover */
	}

	.yak-feedback-button:focus-visible {
		outline: 2px solid var(--yak-color-primary) !important;
		outline-offset: 2px;
	}

	.yak-feedback-button:focus {
		outline: none !important;
	}

	.yak-feedback-button i {
		position: relative;
		z-index: 1; /* Ensure icons are above the gray background */
		transition: color 0.3s ease;
	}

	.yak-resource-attachment__link:hover .yak-resource-attachment__type,
	.yak-resource-attachment__link:focus .yak-resource-attachment__type {
		background-color: rgba(255, 255, 255, 0.2);
		color: var(--yak-color-white);
	}

	.yak-resource-attachment__icon {
		font-size: 1.125rem;
		opacity: 0.7;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.yak-resource-attachment__link:hover .yak-resource-attachment__icon,
	.yak-resource-attachment__link:focus .yak-resource-attachment__icon {
		opacity: 1;
		transform: translateY(-2px);
	}

	.yak-resource-featured-image-link {
		display: block;
		text-decoration: none;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		border-radius: var(--yak-radius, 4px);
		/* Remove overflow: hidden to allow shadow to show */
		/* Always show shadow for depth, especially on white document covers */
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
	}

	.yak-resource-featured-image-link:hover,
	.yak-resource-featured-image-link:focus {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.yak-resource-featured-image {
		width: 100%;
		height: auto;
		border-radius: var(--yak-radius, 4px);
		display: block;
		transition: opacity 0.2s ease;
	}

	.yak-resource-featured-image-link:hover .yak-resource-featured-image,
	.yak-resource-featured-image-link:focus .yak-resource-featured-image {
		opacity: 0.9;
	}

	/* Desktop: Featured image on right, content on left */
	@media (min-width: 960px) {
		.yak-resource-metabox__inner {
			gap: 2rem;
		}

		.yak-resource-metabox__content {
			flex: 1 1 0;
			min-width: 0;
		}

		.yak-resource-metabox__image {
			flex: 0 0 48%;
			max-width: 48%;
		}

		/* When both content and image exist, adjust content width */
		.yak-resource-metabox__inner:has(.yak-resource-metabox__content):has(.yak-resource-metabox__image) .yak-resource-metabox__content {
			flex: 0 0 48%;
			max-width: 48%;
		}
	}

	/* Tablet: Adjust spacing */
	@media (min-width: 600px) and (max-width: 959px) {
		.yak-resource-metabox__inner {
			gap: 1.5rem;
		}
	}

	/* Mobile: Stack vertically */
	@media (max-width: 599px) {
		.yak-resource-metabox {
			margin-top: 1rem;
			padding-top: 1rem;
			padding-bottom: 1.5rem;
		}

		.yak-resource-metabox__inner {
			flex-direction: column;
			gap: 1rem;
		}

		.yak-resource-metabox__image {
			order: -1; /* Image first on mobile */
		}

		.yak-resource-metabox__title {
			font-size: var(--yak-font-md);
			margin-bottom: 0.75rem;
		}

		.yak-resource-attachment__link {
			padding: 0.5em 0.875rem;
			font-size: var(--yak-font-sm);
		}

		.yak-resource-attachments {
			gap: 0.5rem;
		}

		.yak-resource-featured-image-link {
			margin-bottom: 0.5rem;
		}

		.yak-resource-featured-image {
			max-width: 100%;
		}
	}
}


/* ==========================================================================
   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 Metadata Pill
		Reusable pill style for dates, tags, categories, etc.
	---------------------------------------- */
	.yak-pill,
	.yak-entry-date {
		/* 🎛️ Pill customization variables */
		--pill-bg: var(--yak-color-muted);  /* Very subtle muted background */
		--pill-border: transparent;  /* No border */
		--pill-text: var(--yak-color-primary);  /* Navy text (#003a5d) */
		--pill-radius: 6px;  /* Rounded but not bubbly */
		
		display: inline-block;
		padding: 0.35em 0.75em;
		font-family: var(--yak-primary-font);
		font-size: var(--yak-font-xs);  /* Small but accessible (14px base) */
		font-weight: 500;
		line-height: 1.4;
		color: var(--pill-text);
		background-color: var(--pill-bg);
		border: 1px solid var(--pill-border);
		border-radius: var(--pill-radius);
		text-decoration: none;
		white-space: nowrap;
		
		/* Smooth transitions for interactive states */
		transition: all 0.2s ease;
	}

	/* Hover state for interactive pills (links) */
	a.yak-pill:hover,
	a.yak-pill:focus {
		--pill-bg: var(--yak-base-3);  /* Slightly darker on hover */
		--pill-border: transparent;  /* Keep no border on hover */
		text-decoration: none;
		transform: translateY(-1px);  /* Subtle lift */
	}

	/* Optional: Darker pill variant (can add .yak-pill-dark class) */
	.yak-pill-dark {
		--pill-bg: var(--yak-color-primary);
		--pill-border: var(--yak-color-primary);
		--pill-text: var(--yak-color-white);
	}

	/* Optional: Neutral pill variant (can add .yak-pill-neutral class) */
	.yak-pill-neutral {
		--pill-bg: var(--yak-base-2);
		--pill-border: var(--yak-base-3);
		--pill-text: var(--yak-base-8);
	}

	/* Entry meta wrapper for single posts */
	.yak-entry-meta-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 1rem;
		margin-bottom: 0;
		align-items: center;
	}

	/* ----------------------------------------
		Resources List Layout
		Note: Main layout styles are in plugin CSS
		These are just theme-level enhancements if needed
	---------------------------------------- */

	/* Entry footer meta wrapper - categories and tags */
	.yak-entry-footer-meta {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Ensure entry footer has proper spacing */
	.entry-footer {
		margin-top: 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--yak-base-3, #e5e5e5);
	}

	/* Hide entry footer border on single resource pages when no content */
	.single-resource .entry-footer {
		border-top: none;
		padding-top: 0;
		margin-top: 0;
	}

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


/* ==========================================================================
   Professional Resources Page - Filters & Search
   ========================================================================== */
.clb-pro-resources-wrapper {
	margin: 2rem 0;
}

.clb-pro-resources-intro {
	font-size: var(--yak-font-base);
	line-height: var(--yak-lh-lg);
	color: var(--yak-color-primary, #003a5d);
	margin-bottom: 2rem;
	max-width: var(--yak-content-max-width, 1200px);
}

.clb-pro-resources-filters {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Row 1: Language + Format (50/50) */
.clb-filters-row--equal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Row 2: Search + Sort (75/25) */
.clb-filters-row--search-sort {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 1rem;
}

/* Facet Wrapper Base Styles */
.clb-facet-wrapper {
	position: relative;
}

/* Colorful, Bubble-like Dropdowns */
.clb-facet-wrapper select,
.clb-facet-wrapper .facetwp-dropdown {
	width: 100%;
	padding: 0.875rem 1.25rem;
	font-family: var(--yak-primary-font);
	font-size: var(--yak-font-base);
	font-weight: 500;
	color: var(--yak-color-primary, #003a5d);
	background-color: #f9e79f;
	background-image: 
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #f9e79f 0%, #f5c9be 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 1rem center, 0 0;
	background-size: 12px, 100% 100%;
	border: 2px solid rgba(0, 58, 93, 0.2);
	border-radius: 12px;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.1),
		inset 0 1px 2px rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
}

.clb-facet-wrapper select:hover,
.clb-facet-wrapper .facetwp-dropdown:hover {
	border-color: var(--yak-color-primary, #003a5d);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.15),
		inset 0 1px 2px rgba(255, 255, 255, 0.6);
	transform: translateY(-1px);
}

.clb-facet-wrapper select:focus,
.clb-facet-wrapper .facetwp-dropdown:focus {
	outline: none;
	border-color: var(--yak-color-primary, #003a5d);
	box-shadow: 
		0 0 0 3px rgba(0, 58, 93, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.15),
		inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Language dropdown - yellow tint */
.clb-facet-wrapper--language select,
.clb-facet-wrapper--language .facetwp-dropdown {
	background-color: #f9e79f;
	background-image: 
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #f9e79f 0%, #f5d35e 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 1rem center, 0 0;
	background-size: 12px, 100% 100%;
}

/* Category dropdown - green tint */
.clb-facet-wrapper--category select,
.clb-facet-wrapper--category .facetwp-dropdown {
	background-color: #b8d4c4 !important;
	background-image: 
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #c8e0d0 0%, #8ab791 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: right 1rem center, 0 0 !important;
	background-size: 12px, 100% 100% !important;
}

/* Format dropdown - coral tint */
.clb-facet-wrapper--format select,
.clb-facet-wrapper--format .facetwp-dropdown {
	background-color: #f5c9be;
	background-image: 
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #f5c9be 0%, #e89b89 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 1rem center, 0 0;
	background-size: 12px, 100% 100%;
}

/* Sort dropdown - light blue tint */
.clb-facet-wrapper--sort select,
.clb-facet-wrapper--sort .facetwp-dropdown {
	background-color: #b8d4e8;
	background-image: 
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003a5d' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #b8d4e8 0%, #8bb8d4 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 1rem center, 0 0;
	background-size: 12px, 100% 100%;
}

/* Search Wrapper - positions icon inside */
.clb-search-wrapper {
	position: relative;
	width: 100%;
}

.clb-search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--yak-color-primary, #003a5d);
	font-size: 1.125rem;
	z-index: 2;
	pointer-events: none;
}

/* Appealing Search Bar */
.clb-facet-wrapper--search input[type="text"],
.clb-facet-wrapper--search .facetwp-search {
	width: 100%;
	padding: 0.875rem 1.25rem 0.875rem 3rem;
	font-family: var(--yak-primary-font);
	font-size: var(--yak-font-base);
	color: var(--yak-color-primary, #003a5d);
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2px solid rgba(0, 58, 93, 0.2);
	border-radius: 12px;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 2px rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
}

.clb-facet-wrapper--search input[type="text"]::placeholder,
.clb-facet-wrapper--search .facetwp-search::placeholder {
	color: rgba(0, 58, 93, 0.5);
	font-style: italic;
}

.clb-facet-wrapper--search input[type="text"]:hover,
.clb-facet-wrapper--search .facetwp-search:hover {
	border-color: var(--yak-color-primary, #003a5d);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.12),
		inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.clb-facet-wrapper--search input[type="text"]:focus,
.clb-facet-wrapper--search .facetwp-search:focus {
	outline: none;
	border-color: var(--yak-color-primary, #003a5d);
	box-shadow: 
		0 0 0 3px rgba(0, 58, 93, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.12),
		inset 0 1px 2px rgba(255, 255, 255, 0.9);
	background: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.clb-filters-row--equal,
	.clb-filters-row--search-sort {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.clb-pro-resources-intro {
		font-size: var(--yak-font-sm);
		margin-bottom: 1.5rem;
	}
}

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

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