/**
 * Styleguide, Fluid Typography & Design Tokens
 * Theme: pmhk_kln
 * Specs: Figma Design System (390px mobile -> 1440px desktop fluid interpolation)
 */

/* ==========================================================================
   1. Local Font Declarations (@font-face)
   ========================================================================== */

@font-face {
	font-family: 'Gambarino';
	src: url('../fonts/Gambarino-Regular.eot');
	src: url('../fonts/Gambarino-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Gambarino-Regular.woff2') format('woff2'),
		url('../fonts/Gambarino-Regular.woff') format('woff'),
		url('../fonts/Gambarino-Regular.ttf') format('truetype'),
		url('../fonts/Gambarino-Regular.svg#Gambarino-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Design Tokens & Root Variables
   ========================================================================== */

:root {
	/* 2.1 Font Families */
	--font-gambarino: 'Gambarino', Georgia, serif;
	--font-red-hat: 'Red Hat Display', 'Noto Sans TC', sans-serif;
	--font-noto-tc: 'Noto Sans TC', sans-serif;
	--font-zen-antique: 'Zen Antique Soft', serif;
	--font-cinzel: 'Cinzel', serif;

	/* Semantic Typography Mapping */
	--font-headings: var(--font-gambarino), var(--font-noto-tc);
	--font-base: var(--font-red-hat), var(--font-noto-tc);

	/* 2.2 Letter Spacing */
	--letter-spacing-neg-4: -0.04em;
	/* -4% */
	--letter-spacing-1: 0.01em;
	/* 1% */
	--letter-spacing-2: 0.02em;
	/* 2% */
	--letter-spacing-3: 0.03em;
	/* 3% */

	/* 2.3 Color Palette */
	--color-black: #272727;
	--color-orange: #FF8700;
	--color-white: #FFFFFF;
	--color-light-blue: #EFF3F7;
	--color-blue: #234677;
	--color-blue-1: #4385E1;
	--color-blue-tint: #3975FF40;
	--color-cream: #FAF5EF;
	--color-cream-dark: #EFE6DB;
	--color-blue-capsule: #335B93;
	--color-overlay-dark: #00000080;

	/* 2.4 Container & Layout Tokens */
	--container-width: 1440px;
	--container-padding-desktop: 50px;
	--container-padding-mobile: 20px;
	--container-padding-x: 50px;

	/* 2.5 Fluid Typography Tokens (Formula: min(max(MIN, calc(DESKTOP_REM + (MIN - MAX) * ((100vw - 1440px) / (390 - 1440)))), MAX)) */

	/* H1: Desktop 70/84, Mobile 40/50 */
	--font-size-h1: min(max(2.5rem, calc(4.375rem + (40 - 70) * ((100vw - 1440px) / (390 - 1440)))), 4.375rem);
	--line-height-h1: min(max(3.125rem, calc(5.25rem + (50 - 84) * ((100vw - 1440px) / (390 - 1440)))), 5.25rem);

	/* H2: Desktop 60/75, Mobile 30/40 */
	--font-size-h2: min(max(1.875rem, calc(3.75rem + (30 - 60) * ((100vw - 1440px) / (390 - 1440)))), 3.75rem);
	--line-height-h2: min(max(2.5rem, calc(4.6875rem + (40 - 75) * ((100vw - 1440px) / (390 - 1440)))), 4.6875rem);

	/* H3: Desktop 42/52, Mobile 22/30 */
	--font-size-h3: min(max(1.375rem, calc(2.625rem + (22 - 42) * ((100vw - 1440px) / (390 - 1440)))), 2.625rem);
	--line-height-h3: min(max(1.875rem, calc(3.25rem + (30 - 52) * ((100vw - 1440px) / (390 - 1440)))), 3.25rem);

	/* H4: Desktop 27/37, Mobile 20/28 */
	--font-size-h4: min(max(1.25rem, calc(1.6875rem + (20 - 27) * ((100vw - 1440px) / (390 - 1440)))), 1.6875rem);
	--line-height-h4: min(max(1.75rem, calc(2.3125rem + (28 - 37) * ((100vw - 1440px) / (390 - 1440)))), 2.3125rem);

	/* Lead in 1: Desktop 22/30, Mobile 18/26 */
	--font-size-lead-in-1: min(max(1.125rem, calc(1.375rem + (18 - 22) * ((100vw - 1440px) / (390 - 1440)))), 1.375rem);
	--line-height-lead-in-1: min(max(1.625rem, calc(1.875rem + (26 - 30) * ((100vw - 1440px) / (390 - 1440)))), 1.875rem);

	/* Lead in 2: Desktop 19/26, Mobile 16/24 */
	--font-size-lead-in-2: min(max(1rem, calc(1.1875rem + (16 - 19) * ((100vw - 1440px) / (390 - 1440)))), 1.1875rem);
	--line-height-lead-in-2: min(max(1.5rem, calc(1.625rem + (24 - 26) * ((100vw - 1440px) / (390 - 1440)))), 1.625rem);

	/* Body - R: Desktop 17/28, Mobile 16/26 */
	--font-size-body-r: min(max(1rem, calc(1.0625rem + (16 - 17) * ((100vw - 1440px) / (390 - 1440)))), 1.0625rem);
	--line-height-body-r: min(max(1.625rem, calc(1.75rem + (26 - 28) * ((100vw - 1440px) / (390 - 1440)))), 1.75rem);

	/* Body - M: Desktop 17/28, Mobile 16/26 */
	--font-size-body-m: min(max(1rem, calc(1.0625rem + (16 - 17) * ((100vw - 1440px) / (390 - 1440)))), 1.0625rem);
	--line-height-body-m: min(max(1.625rem, calc(1.75rem + (26 - 28) * ((100vw - 1440px) / (390 - 1440)))), 1.75rem);

	/* Button: Desktop 17/25, Mobile 16/24 */
	--font-size-button: min(max(1rem, calc(1.0625rem + (16 - 17) * ((100vw - 1440px) / (390 - 1440)))), 1.0625rem);
	--line-height-button: min(max(1.5rem, calc(1.5625rem + (24 - 25) * ((100vw - 1440px) / (390 - 1440)))), 1.5625rem);

	/* Remark: Desktop 13/20, Mobile 12/18 */
	--font-size-remark: min(max(0.75rem, calc(0.8125rem + (12 - 13) * ((100vw - 1440px) / (390 - 1440)))), 0.8125rem);
	--line-height-remark: min(max(1.125rem, calc(1.25rem + (18 - 20) * ((100vw - 1440px) / (390 - 1440)))), 1.25rem);

	/* Menu: Desktop 16/24, Mobile 15/22 */
	--font-size-menu: min(max(0.9375rem, calc(1rem + (15 - 16) * ((100vw - 1440px) / (390 - 1440)))), 1rem);
	--line-height-menu: min(max(1.375rem, calc(1.5rem + (22 - 24) * ((100vw - 1440px) / (390 - 1440)))), 1.5rem);

	/* Live stream: Desktop 20/28, Mobile 16/24 */
	--font-size-live-stream: min(max(1rem, calc(1.25rem + (16 - 20) * ((100vw - 1440px) / (390 - 1440)))), 1.25rem);
	--line-height-live-stream: min(max(1.5rem, calc(1.75rem + (24 - 28) * ((100vw - 1440px) / (390 - 1440)))), 1.75rem);

	/* Zen Antique Soft: Desktop 36/36, Mobile 24/24 */
	--font-size-zen-36: min(max(1.5rem, calc(2.25rem + (24 - 36) * ((100vw - 1440px) / (390 - 1440)))), 2.25rem);
	--line-height-zen-36: min(max(1.5rem, calc(2.25rem + (24 - 36) * ((100vw - 1440px) / (390 - 1440)))), 2.25rem);

	/* Cinzel Bold: Desktop 16/16, Mobile 14/14 */
	--font-size-cinzel-16: min(max(0.875rem, calc(1rem + (14 - 16) * ((100vw - 1440px) / (390 - 1440)))), 1rem);
	--line-height-cinzel-16: min(max(0.875rem, calc(1rem + (14 - 16) * ((100vw - 1440px) / (390 - 1440)))), 1rem);

	/* 2.6 Link & Button Underline Tokens (Adapted from Peridot) */
	--link-underline-color: currentColor;
	--link-underline-thickness: 1px;
	--link-underline-offset: 3px;
	--link-underline-duration: 0.55s;
	--link-underline-timing: cubic-bezier(0.2, 0.75, 0.5, 1);

	/* 2.7 Button Component Tokens */
	--btn-padding-y: 8.5px;
	--btn-padding-x: 25px;
	--btn-border-width: 1px;
	--btn-border-radius: 0;
	--btn-blue-border-default: #2346774D;
	--btn-transition: all 0.3s cubic-bezier(0.2, 0.75, 0.5, 1);
}

/* ==========================================================================
   2.8 Traditional Chinese (TC) Typography Overrides
   Switch typography design tokens to Noto Sans TC when TC language is active.
   ========================================================================== */

:root:lang(zh),
:root:lang(tc),
html[lang*="zh"],
html[lang="tc"],
body.lang-tc,
body.tc {
	/* Semantic Typography Mapping */
	--font-headings: var(--font-noto-tc);
	--font-base: var(--font-noto-tc);

	/* Token Aliases */
	--font-gambarino: var(--font-noto-tc);
	--font-red-hat: var(--font-noto-tc);
	--font-cinzel: var(--font-noto-tc);
	--font-zen-antique: var(--font-noto-tc);

	/* Global Theme Compatibility (style.css) */
	--global--font-primary: var(--font-noto-tc);
	--global--font-secondary: var(--font-noto-tc);
}

/* Scoped selector for localized blocks or inline elements */
:lang(zh),
:lang(tc),
[lang*="zh"],
[lang="tc"] {
	--font-headings: var(--font-noto-tc);
	--font-base: var(--font-noto-tc);
	--font-gambarino: var(--font-noto-tc);
	--font-red-hat: var(--font-noto-tc);
	--font-cinzel: var(--font-noto-tc);
	--font-zen-antique: var(--font-noto-tc);
}

/* ==========================================================================
   3. Base HTML Elements
   ========================================================================== */

h1,
.styleguide-h1 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-3);
	text-transform: uppercase;
	color: var(--color-black);
}

h2,
.styleguide-h2 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-3);
	color: var(--color-black);
}

h3,
.styleguide-h3 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-3);
}

h4,
.styleguide-h4 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	letter-spacing: var(--letter-spacing-3);
}

/* ==========================================================================
   4. Typography Utility Classes
   ========================================================================== */

/* H1 (Gambarino, uppercase, center) */
.typo-h1 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-3);
	text-transform: uppercase;
	color: var(--color-black);
}

/* H2 (Gambarino) */
.typo-h2 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-3);
	color: var(--color-black);
}

/* H3 (Gambarino) */
.typo-h3 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-3);
}

/* H4 (Gambarino, center) */
.typo-h4 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	letter-spacing: var(--letter-spacing-3);
}

/* Lead in 1 (Gambarino, center) */
.typo-lead-in-1,
.lead-in-1 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-lead-in-1);
	line-height: var(--line-height-lead-in-1);
	letter-spacing: var(--letter-spacing-2);
}

/* Lead in 2 (Gambarino, uppercase, mobile center) */
.typo-lead-in-2,
.lead-in-2 {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-lead-in-2);
	line-height: var(--line-height-lead-in-2);
	letter-spacing: var(--letter-spacing-2);
	text-transform: uppercase;
}

@media (max-width: 767px) {

	.typo-lead-in-2,
	.lead-in-2 {}
}

/* Body - R (Red Hat Display, Regular) */
.typo-body-r,
.body-r {
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-body-r);
	line-height: var(--line-height-body-r);
	letter-spacing: var(--letter-spacing-1);
	color: var(--color-black);
}

/* Body - M (Red Hat Display, Medium) */
.typo-body-m,
.body-m {
	font-family: var(--font-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-body-m);
	line-height: var(--line-height-body-m);
	letter-spacing: var(--letter-spacing-1);
	color: var(--color-black);
}

/* Button (Red Hat Display, Medium) */
.typo-button,
.btn-text {
	font-family: var(--font-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-2);
}

/* Remark (Red Hat Display, Regular) */
.typo-remark,
.remark {
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-remark);
	line-height: var(--line-height-remark);
	letter-spacing: var(--letter-spacing-1);
}

/* Menu (Red Hat Display, uppercase) */
.typo-menu,
.menu-text,
.typo-subhead-uppercase {
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-menu);
	line-height: var(--line-height-menu);
	letter-spacing: var(--letter-spacing-1);
	text-transform: uppercase;
}

/* Live stream (Red Hat Display, Regular) */
.typo-live-stream,
.live-stream {
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-live-stream);
	line-height: var(--line-height-live-stream);
	letter-spacing: var(--letter-spacing-1);
}

/* Tag Gambarino (Uppercase tag / subhead backward compatibility) */
.typo-tag-gambarino {
	font-family: var(--font-headings);
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: var(--letter-spacing-1);
	text-align: center;
	text-transform: uppercase;
}

/* Zen Antique Soft (36px Regular Small-caps) */
.typo-zen-antique-36,
.font-zen-antique-soft {
	font-family: var(--font-zen-antique);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-zen-36);
	line-height: var(--line-height-zen-36);
	letter-spacing: var(--letter-spacing-neg-4);
	font-variant: small-caps;
}

/* Cinzel (16px Bold) */
.typo-cinzel-bold-16,
.font-cinzel-bold {
	font-family: var(--font-cinzel);
	font-weight: 700;
	font-style: normal;
	font-size: var(--font-size-cinzel-16);
	line-height: var(--line-height-cinzel-16);
	letter-spacing: var(--letter-spacing-3);
}

/* ==========================================================================
   5. Color Utility Classes
   ========================================================================== */

/* Text Colors */
.text-black {
	color: var(--color-black);
}

.text-orange {
	color: var(--color-orange);
}

.text-white {
	color: var(--color-white);
}

.text-blue {
	color: var(--color-blue);
}

.text-blue-tint {
	color: var(--color-blue-tint);
}

.text-cream {
	color: var(--color-cream);
}

/* Background Colors */
.bg-black {
	background-color: var(--color-black);
}

.bg-orange {
	background-color: var(--color-orange);
}

.bg-white {
	background-color: var(--color-white);
}

.bg-blue {
	background-color: var(--color-blue);
}

.bg-blue-tint {
	background-color: var(--color-blue-tint);
}

.bg-cream {
	background-color: var(--color-cream);
}

/* ==========================================================================
   6. Site Container & Layout
   ========================================================================== */

@media (max-width: 767px) {
	:root {
		--container-padding-x: var(--container-padding-mobile, 20px);
	}
}

/* Container Utility Classes */
.container,
.site-container,
.pmhk-container {
	width: 100%;
	max-width: var(--container-width, 1440px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-x, 50px);
	padding-right: var(--container-padding-x, 50px);
	box-sizing: border-box;
}

/* Apply 1440px container & responsive horizontal padding to site wrappers */
.site-header,
.site-main,
.site-footer,
.widget-area,
.alignwide,
.wide-max-width {
	max-width: var(--container-width, 1440px);
	padding-left: var(--container-padding-x, 50px);
	padding-right: var(--container-padding-x, 50px);
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {

	.container,
	.site-container,
	.pmhk-container,
	.site-header,
	.site-main,
	.site-footer,
	.widget-area,
	.alignwide,
	.wide-max-width {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   7. Link & Button Underline Hover Effects
   (Adapted from Peridot: Smooth L->R grow & shrink animation)
   ========================================================================== */

/* 7.1 Generic Text Links (Multi-line safe with background-image) */
body a,
.link-underline {
	position: relative;
	text-decoration: none !important;

	/* 3px offset from bottom of text, multi-line safe */
	padding-bottom: var(--link-underline-offset, 3px);

	background-image: linear-gradient(to right, var(--link-underline-color) 0, var(--link-underline-color) 100%);
	background-size: 0% var(--link-underline-thickness, 1px);
	background-position: 100% 100%;
	background-repeat: no-repeat;

	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	font-weight: 500;
	transition: background-size var(--link-underline-duration, 0.55s) var(--link-underline-timing, cubic-bezier(0.2, 0.75, 0.5, 1));
	color: var(--color-black);
}

body a:hover,
.link-underline:hover {
	background-size: 100% var(--link-underline-thickness, 1px);
	background-position: 0 100%;
}

/* 7.2 Pre-underlined Text Links (.link-with-underline) */
a.link-with-underline:not(.wp-element-button):not(.btn-underline) {
	background-size: 100% var(--link-underline-thickness, 1px);
	background-position: 0 100%;
}

a.link-with-underline:not(.wp-element-button):not(.btn-underline):hover {
	background-size: 0% var(--link-underline-thickness, 1px);
	background-position: 100% 100%;
}

/* 7.3 Buttons & Standalone Action Links (Using ::after for full-width transform) */
.wp-element-button,
.btn-underline {
	position: relative;
	background: transparent;
	text-decoration: none !important;
	display: inline-block;

	/* Reset background-image from generic rule to avoid conflict */
	background-image: none !important;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}

.wp-element-button::after,
.btn-underline::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--link-underline-thickness, 1px);
	background-color: var(--link-underline-color);

	transition: transform var(--link-underline-duration, 0.55s) var(--link-underline-timing, cubic-bezier(0.2, 0.75, 0.5, 1));
	transform: scaleX(0);
	transform-origin: right;
}

.wp-element-button:hover::after,
.btn-underline:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Pre-underlined button variant */
.wp-element-button.link-with-underline::after,
.btn-underline.link-with-underline::after,
.link-with-underline .wp-element-button::after {
	transform: scaleX(1);
	transform-origin: left;
}

.wp-element-button.link-with-underline:hover::after,
.btn-underline.link-with-underline:hover::after,
.link-with-underline .wp-element-button:hover::after {
	transform: scaleX(0);
	transform-origin: right;
}

/* 7.4 Exclusions & Overrides */
body a:has(img),
body a:has(svg),
.no-underline,
.no-underline:hover {
	background-image: none !important;
	background-size: 0 0 !important;
	text-decoration: none !important;
	transition: none !important;
}

.no-underline::after {
	display: none !important;
}

/* Buttons - prevent unwanted underline from any parent/theme rule */
.btn,
.pmhk-btn,
.btn-outline-blue,
.pmhk-demo-btn,
.wp-block-button__link {
	text-decoration: none !important;
	background-image: none !important;
}

.btn::after,
.pmhk-btn::after,
.btn-outline-blue::after,
.pmhk-demo-btn::after,
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	display: none !important;
}

/* Prevent specificity conflicts from theme default page styles */
.pmhk-default-page__content .btn,
.pmhk-default-page__content .pmhk-btn,
.pmhk-default-page__content .btn-outline-blue,
.pmhk-default-page__content .btn-underline,
.pmhk-default-page__content .wp-element-button,
.pmhk-default-page__content .link-underline,
.pmhk-default-page__content .no-underline,
.pmhk-styleguide-demo a {
	text-decoration: none !important;
}

/* 7.5 Decoupled Underline & Border Color Utilities
   Enables flexible combinations: any text color with any underline/border color */
.underline-orange,
.link-border-orange {
	--link-underline-color: var(--color-orange);
}

.underline-blue,
.link-border-blue {
	--link-underline-color: var(--color-blue);
}

.underline-black,
.link-border-black {
	--link-underline-color: var(--color-black);
}

.underline-white,
.link-border-white {
	--link-underline-color: var(--color-white);
}

.underline-blue-tint,
.link-border-blue-tint {
	--link-underline-color: var(--color-blue-tint);
}

.underline-current,
.link-border-current {
	--link-underline-color: currentColor;
}

/* ==========================================================================
   7.6 Shared Navigation Arrow Component (.pmhk-nav-arrow)
   Reusable class for all slider, carousel & pagination arrows.
   Animates the inner SVG horizontally on hover, compatible with GSAP transforms.
   ========================================================================== */

/* Global Reset: Remove all underline hover effects from all slider & pagination arrows */
.pmhk-nav-arrow,
.pmhk-pagination__arrow,
.pmhk-newsletter-nav,
.front-sermons__nav,
.front-events__nav,
.front-verse__nav,
.pmhk-sermons-featured__nav,
.pmhk-history-arrow,
.pmhk-history-sub-arrow,
.pmhk-about-calling__arrow,
.pmhk-gallery-page-btn,
.pmhk-gallery-modal__nav,
.pmhk-gallery-modal__side-arrow,
.pagination .prev,
.pagination .next,
.nav-links .prev,
.nav-links .next {
	text-decoration: none !important;
	background-image: none !important;
	background-size: 0 0 !important;
}

.pmhk-nav-arrow::after,
.pmhk-pagination__arrow::after,
.pmhk-newsletter-nav::after,
.front-sermons__nav::after,
.front-events__nav::after,
.front-verse__nav::after,
.pmhk-sermons-featured__nav::after,
.pmhk-history-arrow::after,
.pmhk-history-sub-arrow::after,
.pmhk-about-calling__arrow::after,
.pmhk-gallery-page-btn::after,
.pmhk-gallery-modal__nav::after,
.pmhk-gallery-modal__side-arrow::after,
.pagination .prev::after,
.pagination .next::after,
.nav-links .prev::after,
.nav-links .next::after {
	display: none !important;
	content: none !important;
}

/* Shared Component Base: Cursor, inline-flex, reset button defaults */
.pmhk-nav-arrow {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	outline: none;
	border: none;
	background: transparent;
	padding: 0;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Smooth transition applied to the SVG icon */
.pmhk-nav-arrow svg,
.pmhk-pagination__arrow svg {
	display: block;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}

/* Hover Horizontal Shift: Left for Prev, Right for Next */
.pmhk-nav-arrow--prev:hover:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) svg,
.pmhk-nav-arrow.is-prev:hover:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) svg,
.pmhk-pagination__arrow--prev:hover:not(:disabled):not(.is-disabled) svg {
	transform: translateX(-3px);
}

.pmhk-nav-arrow--next:hover:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) svg,
.pmhk-nav-arrow.is-next:hover:not(:disabled):not(.is-disabled):not(.swiper-button-disabled) svg,
.pmhk-pagination__arrow--next:hover:not(:disabled):not(.is-disabled) svg {
	transform: translateX(3px);
}

/* Disabled state */
.pmhk-nav-arrow:disabled,
.pmhk-nav-arrow.is-disabled,
.pmhk-nav-arrow.swiper-button-disabled,
.pmhk-pagination__arrow:disabled,
.pmhk-pagination__arrow.is-disabled {
	cursor: not-allowed !important;
	opacity: 0.3 !important;
	pointer-events: none !important;
}

.pmhk-nav-arrow:disabled svg,
.pmhk-nav-arrow.is-disabled svg,
.pmhk-nav-arrow.swiper-button-disabled svg,
.pmhk-pagination__arrow:disabled svg,
.pmhk-pagination__arrow.is-disabled svg {
	transform: none !important;
}

/* ==========================================================================
   8. Button Components
   ========================================================================== */

/* 8.1 Base Button (Flat 0px radius, 8.5px 25px padding, 1px border, button font) */
.btn,
.pmhk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--btn-padding-y, 8.5px) var(--btn-padding-x, 25px);
	border: var(--btn-border-width, 1px) solid transparent;
	border-radius: var(--btn-border-radius, 0);
	font-family: var(--font-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-2);
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	background-color: transparent;
	box-sizing: border-box;
	transition: var(--btn-transition, all 0.3s cubic-bezier(0.2, 0.75, 0.5, 1));
	-webkit-user-select: none;
	user-select: none;
}

/* 8.2 Outline Blue Button */
/* Default: text blue, border #2346774D, background transparent */
/* Hover: text white, border blue, background blue */
.btn-outline-blue,
.btn,
.pmhk-btn,
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--color-blue);
	border-color: var(--btn-blue-border-default);
	background-color: transparent;
}

.btn-outline-blue:hover,
.btn-outline-blue:focus,
.btn:hover,
.btn:focus,
.pmhk-btn:hover,
.pmhk-btn:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	color: var(--color-white);
	border-color: var(--color-blue);
	background-color: var(--color-blue);
}

/* ==========================================================================
   9. Image Clip & Reveal Effect (Demo: OH Architecture)
   ========================================================================== */

:root {
	--reveal-duration: 1.2s;
	--reveal-ease: cubic-bezier(0.16, 1, 0.35, 1);
	--reveal-cover-bg: var(--color-black);
	--reveal-scale-initial: 1.05;
}

/**
 * 9.1 Base Container
 * Initially clipped from bottom up. Matches demo class .hero_list_image_container and marker .has-image-reveal
 */
.hero_list_image_container,
.has-image-reveal {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: block;
	margin-bottom: var(--size--0-75rem, 0.75rem);
	aspect-ratio: var(--image-aspect-ratio, auto);
	clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: clip-path var(--reveal-duration) var(--reveal-ease),
		-webkit-clip-path var(--reveal-duration) var(--reveal-ease);
	will-change: clip-path;
}

/**
 * 9.2 Outer Wrapper Ratio Support (Padding-bottom wrapper pattern)
 * When .hero_list_image_container is placed inside a parent ratio container
 */
[style*="padding-bottom"]>.hero_list_image_container,
[style*="padding-bottom"]>.has-image-reveal,
.has-ratio-wrapper>.hero_list_image_container,
.has-ratio-wrapper>.has-image-reveal,
.hero_list_image_container.is-absolute-fill,
.has-image-reveal.is-absolute-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
}

/**
 * 9.3 Preset Aspect Ratio Utility Classes
 */
.is-ratio-16-9,
.hero_list_image_container.is-ratio-16-9,
.hero_list_image_container[data-aspect-ratio="16/9"],
.hero_list_image_container[data-aspect-ratio="16:9"] {
	aspect-ratio: 16 / 9;
}

.is-ratio-4-3,
.hero_list_image_container.is-ratio-4-3,
.hero_list_image_container[data-aspect-ratio="4/3"],
.hero_list_image_container[data-aspect-ratio="4:3"] {
	aspect-ratio: 4 / 3;
}

.is-ratio-1-1,
.is-ratio-square,
.hero_list_image_container.is-ratio-1-1,
.hero_list_image_container.is-ratio-square,
.hero_list_image_container[data-orientation="square"],
.hero_list_image_container[data-aspect-ratio="1/1"],
.hero_list_image_container[data-aspect-ratio="1:1"] {
	aspect-ratio: 1 / 1;
}

.is-ratio-3-4,
.is-ratio-portrait,
.hero_list_image_container.is-ratio-3-4,
.hero_list_image_container.is-ratio-portrait,
.hero_list_image_container[data-orientation="portrait"],
.hero_list_image_container[data-aspect-ratio="3/4"],
.hero_list_image_container[data-aspect-ratio="3:4"] {
	aspect-ratio: 3 / 4;
}

.is-ratio-16-10,
.is-ratio-landscape,
.hero_list_image_container.is-ratio-16-10,
.hero_list_image_container.is-ratio-landscape,
.hero_list_image_container[data-orientation="landscape"],
.hero_list_image_container[data-aspect-ratio="16/10"],
.hero_list_image_container[data-aspect-ratio="16:10"] {
	aspect-ratio: 16 / 10;
}

.is-ratio-21-9,
.is-ratio-ultrawide,
.hero_list_image_container.is-ratio-21-9,
.hero_list_image_container[data-aspect-ratio="21/9"],
.hero_list_image_container[data-aspect-ratio="21:9"] {
	aspect-ratio: 21 / 9;
}

.is-ratio-9-16,
.is-ratio-story,
.hero_list_image_container.is-ratio-9-16,
.hero_list_image_container[data-aspect-ratio="9/16"],
.hero_list_image_container[data-aspect-ratio="9:16"] {
	aspect-ratio: 9 / 16;
}

.is-ratio-3-2,
.hero_list_image_container[data-aspect-ratio="3/2"],
.hero_list_image_container[data-aspect-ratio="3:2"] {
	aspect-ratio: 3 / 2;
}

.is-ratio-2-3,
.hero_list_image_container[data-aspect-ratio="2/3"],
.hero_list_image_container[data-aspect-ratio="2:3"] {
	aspect-ratio: 2 / 3;
}

/**
 * 9.4 Overlay Cover Mask (fades out during reveal)
 */
.g_image_cover,
[data-image-cover] {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: var(--reveal-cover-bg);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Optional cover color modifier classes */
.g_image_cover.is-cover-white,
[data-cover-color="white"] .g_image_cover {
	background-color: var(--color-white);
}

.g_image_cover.is-cover-orange,
[data-cover-color="orange"] .g_image_cover {
	background-color: var(--color-orange);
}

.g_image_cover.is-cover-blue,
[data-cover-color="blue"] .g_image_cover {
	background-color: var(--color-blue);
}

/**
 * 9.5 Image Sizing & Object-Fit Rules for Different Ratio Techniques
 */

/* Common image properties */
.hero_list_image_container img,
.hero_list_image_container .hero_list_image,
.has-image-reveal img,
.has-image-reveal .hero_list_image,
[data-image] {
	display: block;
	transform: scale(var(--reveal-scale-initial));
	transition: transform var(--reveal-duration) var(--reveal-ease);
	will-change: transform;
}

/* Case A: Container uses padding-bottom ratio trick */
.hero_list_image_container[style*="padding-bottom"] img,
.hero_list_image_container.has-padding-ratio img,
.hero_list_image_container[data-padding] img,
.has-image-reveal[style*="padding-bottom"] img,
.has-image-reveal.has-padding-ratio img,
.is-absolute-fill img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Case B: Container has explicit aspect-ratio or orientation */
.hero_list_image_container[style*="aspect-ratio"] img,
.hero_list_image_container[data-aspect-ratio] img,
.hero_list_image_container[data-orientation] img,
.hero_list_image_container[class*="is-ratio-"] img,
.has-image-reveal[style*="aspect-ratio"] img,
.has-image-reveal[data-aspect-ratio] img,
.has-image-reveal[data-orientation] img,
.has-image-reveal[class*="is-ratio-"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Case C: Image has its own aspect-ratio or uses natural height (no padding, no container ratio) */
.hero_list_image_container:not([style*="padding-bottom"]):not([style*="aspect-ratio"]):not([data-orientation]):not([data-aspect-ratio]):not([class*="is-ratio-"]):not(.has-padding-ratio):not(.is-absolute-fill) img,
.has-image-reveal:not([style*="padding-bottom"]):not([style*="aspect-ratio"]):not([data-orientation]):not([data-aspect-ratio]):not([class*="is-ratio-"]):not(.has-padding-ratio):not(.is-absolute-fill) img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Case D: Architectural Drawings / Floor Plans Fit Containment */
.hero_list_image_container.is-fit-contain img,
.hero_list_image_container[data-fit="contain"] img,
.has-image-reveal.is-fit-contain img {
	object-fit: contain;
	background-color: var(--color-black);
}

/**
 * 9.6 Active / In-view Revealed State
 */
.hero_list_image_container.is-revealed,
.has-image-reveal.is-revealed,
[data-image-reveal].is-revealed {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hero_list_image_container.is-revealed .g_image_cover,
.hero_list_image_container.is-revealed [data-image-cover],
.has-image-reveal.is-revealed .g_image_cover,
.has-image-reveal.is-revealed [data-image-cover] {
	opacity: 0;
	visibility: hidden;
}

.hero_list_image_container.is-revealed img,
.hero_list_image_container.is-revealed .hero_list_image,
.has-image-reveal.is-revealed img,
.has-image-reveal.is-revealed .hero_list_image {
	transform: scale(1);
}

/**
 * 9.7 WCAG AA Accessibility: Prefers-reduced-motion bypass
 */
@media (prefers-reduced-motion: reduce) {

	.hero_list_image_container,
	.has-image-reveal,
	.g_image_cover,
	[data-image-cover],
	.hero_list_image_container img,
	.hero_list_image_container .hero_list_image,
	.has-image-reveal img,
	.has-image-reveal .hero_list_image {
		clip-path: none !important;
		-webkit-clip-path: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
	}

	.g_image_cover,
	[data-image-cover] {
		display: none !important;
	}
}

/* ==========================================================================
   10. Text Line Mask & Reveal (Headings & Normal Text)
   Inspired by OH Architecture (.process_aside_paragraph, .about_content_paragraph)
   ========================================================================== */

:root {
	--ease-secondary: cubic-bezier(0.16, 1, 0.35, 1);
	--text-reveal-duration: 1s;
	--text-reveal-stagger: 0.0625s;
	--list-reveal-duration: 1s;
	--list-reveal-stagger: 0.0625s;
}

/* Parent line mask - clips the inner sliding text line */
.split-parent {
	display: block;
	overflow: hidden;
	position: relative;
	margin-top: -0.04em;
	text-align: inherit;
}

/* Inner sliding text line */
.split-child {
	display: block;
	will-change: transform, opacity;
	padding-bottom: 0.04em;
	transform: translateY(120%) rotate(0.001deg);
	opacity: 0;
	transition: transform var(--text-reveal-duration) var(--ease-secondary),
		opacity 0.8s var(--ease-secondary);
	text-align: inherit;
}

/* Active in-view revealed state */
.is-revealed .split-child,
.is-revealed.split-child,
[data-animate-scroll].is-revealed .split-child {
	transform: translateY(0%) rotate(0deg);
	opacity: 1;
}

/* Natural CSS revealed state: keep block structure & margins intact to prevent layout jumps */
.is-revealed-clean .split-child,
.is-clean-text .split-child {
	transform: none !important;
	will-change: auto !important;
}

/* Base selectors for animated text elements */
.process_aside_paragraph,
.about_content_paragraph,
.has-heading-reveal,
.has-text-reveal,
[data-heading-reveal],
[data-text-reveal],
[data-lines-split],
.has-text-split {
	position: relative;
}

/* Anchor links within heading reveal elements: block formatting prevents baseline shifts */
.has-heading-reveal>a,
[data-heading-reveal]>a {
	display: block;
	width: 100%;
	position: relative;
}

/* ==========================================================================
   11. Stagger List Collection Reveal (Lists & Arbitrary Children)
   Inspired by OH Architecture (.process_left_collection, .process_left_item)
   ========================================================================== */

/* Target 1: Unordered / Ordered lists with stagger utility */
ul.has-stagger-items>li,
ol.has-stagger-items>li,
.has-stagger-items>*,
.process_left_collection>*,
.process_left_list>*,
.process_left_item {
	opacity: 0;
	transform: translateY(20px) rotate(0.0001deg);
	transition: opacity var(--list-reveal-duration) var(--ease-secondary),
		transform var(--list-reveal-duration) var(--ease-secondary);
	will-change: transform, opacity;
}

/* In-view revealed state for stagger list items */
ul.has-stagger-items.is-revealed>li,
ol.has-stagger-items.is-revealed>li,
.has-stagger-items.is-revealed>*,
.process_left_collection.is-revealed>*,
.process_left_list.is-revealed>*,
.process_left_item.is-revealed {
	opacity: 1;
	transform: translateY(0) rotate(0deg);
}

/* List divider line support (OH Architecture demo style) */
.process_left_line,
.stagger-item-divider {
	width: 100%;
	height: 1px;
	background-color: var(--color-grey-light);
	margin-top: 16px;
	margin-bottom: 16px;
	transform-origin: left center;
	transition: transform 1s var(--ease-secondary);
}

/* Process item index & title demo layout helpers */
.process_left_contain {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.process_left_animate {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.process_left_index {
	font-family: var(--font-base);
	font-size: var(--font-size-small, 0.8125rem);
	color: var(--color-grey);
	letter-spacing: 0.04em;
}

.process_left_title {
	font-family: var(--font-headings);
	font-size: var(--font-size-body-r, 1.0625rem);
	font-weight: 500;
	color: var(--color-black);
}

/* WCAG AA Accessibility: Prefers-reduced-motion bypass */
@media (prefers-reduced-motion: reduce) {

	.split-parent,
	.split-child,
	.is-revealed .split-child,
	.has-stagger-items>*,
	.process_left_collection>*,
	.process_left_list>*,
	.process_left_item,
	ul.has-stagger-items>li,
	ol.has-stagger-items>li {
		overflow: visible !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
	}
}

/* ==========================================================================
   12. Input Component (.pmhk-input)
   Common input style: bg #00000008, padding 10px 25px, font Body-R.
   Apply directly to the <input> element, NOT to the form wrapper.
   ========================================================================== */

input.pmhk-input,
textarea.pmhk-input,
input[type].pmhk-input,
.site input.pmhk-input,
.site textarea.pmhk-input {
	display: block;
	width: 100%;
	background-color: #00000008;
	border: none;
	outline: none;
	padding: 10px 25px;
	margin: 0;
	box-sizing: border-box;
	color: var(--color-black);
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-body-r);
	line-height: var(--line-height-body-r);
	letter-spacing: var(--letter-spacing-1, 0.01em);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}

input.pmhk-input::placeholder,
textarea.pmhk-input::placeholder,
input[type].pmhk-input::placeholder,
.site input.pmhk-input::placeholder,
.site textarea.pmhk-input::placeholder {
	color: var(--color-black);
	font-family: var(--font-base);
	opacity: 1;
}

input.pmhk-input:focus,
textarea.pmhk-input:focus,
input[type].pmhk-input:focus,
.site input.pmhk-input:focus,
.site textarea.pmhk-input:focus {
	background-color: #0000000f;
	outline: none;
	outline-offset: 0;
}

/* Inline variant: used inside flex search rows, grows to fill remaining space */
input.pmhk-input--inline {
	display: inline-block;
	width: auto;
	flex: 1 1 auto;
}

/* Input Wrapper with Search Icon & Submit button */
.pmhk-input-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
}

.pmhk-input-wrap input.pmhk-input,
.pmhk-input-wrap input[type],
.pmhk-input-wrap input {
	width: 100%;
	padding-left: 62px;
	padding-right: 58px;
	margin: 0;
	border: none;
	outline: none;
}

.pmhk-input-wrap__icon {
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	pointer-events: none;
	color: #272727;
	z-index: 1;
}

.pmhk-input-wrap__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.pmhk-input-wrap__submit {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 12px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: #272727;
	cursor: pointer;
	z-index: 1;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.pmhk-input-wrap__submit svg {
	width: 16px;
	height: 12px;
	display: block;
}

.pmhk-input-wrap__submit:hover {
	transform: translateY(-50%) translateX(2px);
}

/* Mobile responsive for Input Wrapper and Toolbar Search */
@media (max-width: 767px) {
	.pmhk-input-wrap {
		width: 100%;
		max-width: 100%;
	}

	.pmhk-input-wrap input.pmhk-input,
	.pmhk-input-wrap input[type],
	.pmhk-input-wrap input {
		width: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   13. Custom Select Dropdown System (.pmhk-select, .pmhk-dropdown)
   Dropdown options animation inspired by SUSI Partners Demo
   ========================================================================== */

/* 10.1 Native Select Default Styling / Fallback */
select.pmhk-select {
	font-family: var(--font-base);
	font-size: var(--font-size-body-r);
	line-height: var(--line-height-body-r);
	background-color: var(--color-orange);
	color: var(--color-white);
	padding: 8.5px 25px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

/* 10.2 Custom Select Trigger (Orange Button with Angle Down Icon) */
.pmhk-select-wrapper {
	position: relative;
	display: inline-block;
	user-select: none;
	z-index: 1;
}

.pmhk-select-wrapper.is-open,
.pmhk-dropdown.is-open {
	z-index: 99 !important;
}

.pmhk-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 8.5px 25px;
	background-color: var(--color-orange);
	color: var(--color-white);
	font-family: var(--font-base);
	font-size: var(--font-size-body-r);
	line-height: var(--line-height-body-r);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-1, 0.01em);
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	min-width: 180px;
	transition: background-color 0.25s ease;
}

.pmhk-dropdown__trigger:hover,
.pmhk-dropdown__trigger:focus,
.pmhk-dropdown.is-open .pmhk-dropdown__trigger {
	background-color: var(--color-orange);
	color: var(--color-white);
	outline: none;
	box-shadow: none;
}

.pmhk-dropdown.is-disabled .pmhk-dropdown__trigger,
.pmhk-dropdown__trigger:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.pmhk-dropdown__trigger-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 10.3 Angle Down Icon on Trigger */
.pmhk-dropdown__trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 9px;
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.pmhk-dropdown__trigger-icon img,
.pmhk-dropdown__trigger-icon svg {
	width: 18px;
	height: 9px;
	display: block;
	object-fit: contain;
}

.pmhk-dropdown.is-open .pmhk-dropdown__trigger-icon {
	transform: rotate(180deg);
}

/* 10.4 Dropdown Menu Container (.pmhk-dropdown__menu) */
.pmhk-dropdown__menu,
.pmhk-dropdown__menu.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-height: 250px;
	/* Restrict dropdown menu height (~5-6 items) */
	overflow-y: auto;
	/* Enable vertical scrolling for excess options */
	overflow-x: hidden;
	overscroll-behavior: contain;
	/* Prevent scroll chaining to document */
	z-index: 99;
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: var(--color-cream, #FAF5EF) !important;
	border-radius: 0;
	box-shadow: none;
	border: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1),
		transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
		visibility 0.25s;
	/* Modern W3C Scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(39, 39, 39, 0.25) transparent;
}

/* Custom Scrollbar for Webkit Browsers */
.pmhk-dropdown__menu::-webkit-scrollbar,
.pmhk-dropdown__menu.sub-menu::-webkit-scrollbar {
	width: 5px;
}

.pmhk-dropdown__menu::-webkit-scrollbar-track,
.pmhk-dropdown__menu.sub-menu::-webkit-scrollbar-track {
	background: transparent;
}

.pmhk-dropdown__menu::-webkit-scrollbar-thumb,
.pmhk-dropdown__menu.sub-menu::-webkit-scrollbar-thumb {
	background-color: rgba(39, 39, 39, 0.25);
	border-radius: 3px;
}

.pmhk-dropdown__menu::-webkit-scrollbar-thumb:hover,
.pmhk-dropdown__menu.sub-menu::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-orange, #FF8700);
}

/* Open state for select dropdown */
.pmhk-dropdown.is-open .pmhk-dropdown__menu,
.pmhk-dropdown.is-open .pmhk-dropdown__menu.sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	transform: translateY(0);
}

/* 10.5 Option Items */
.pmhk-dropdown__menu li,
.pmhk-dropdown__menu.sub-menu li,
.pmhk-dropdown__menu.sub-menu li.pmhk-dropdown__item,
.pmhk-dropdown__item {
	display: block;
	background-color: var(--color-cream, #FAF5EF) !important;
	color: var(--color-black, #272727);
	font-family: var(--font-base);
	font-size: var(--font-size-body-r);
	line-height: var(--line-height-body-r);
	font-weight: 400;
	margin: 0;
	padding: 8.5px 25px !important;
	text-decoration: none;
	cursor: pointer;
	border: none;
	border-bottom: 1px solid #2727270D !important;
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.pmhk-dropdown__menu li:last-child,
.pmhk-dropdown__menu.sub-menu li:last-child,
.pmhk-dropdown__item:last-child {
	border-bottom: none !important;
}

.pmhk-dropdown__menu li:hover,
.pmhk-dropdown__menu li:focus,
.pmhk-dropdown__menu li.is-selected,
.pmhk-dropdown__menu.sub-menu li:hover,
.pmhk-dropdown__menu.sub-menu li:focus,
.pmhk-dropdown__menu.sub-menu li.is-selected,
.pmhk-dropdown__item:hover,
.pmhk-dropdown__item:focus,
.pmhk-dropdown__item.is-selected {
	color: var(--color-orange, #FF8700) !important;
	/* Hover option text color orange */
	background-color: var(--color-cream, #FAF5EF) !important;
}

/* 10.6 Native Select Hidden — display:none prevents browser from ever opening native picker */
.pmhk-select-native-hidden {
	position: absolute !important;
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	clip: rect(0, 0, 0, 0) !important;
	overflow: hidden !important;
}

/* ==========================================================================
   14. Global Pagination Component (.pmhk-pagination)
   Reusable across all listing pages: newsletter, sermons, hymns, events...
   ========================================================================== */

.pmhk-pagination-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pmhk-pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	user-select: none;
	font-family: var(--font-headings);
	font-size: var(--font-size-h4, 1.6875rem);
	line-height: var(--line-height-h4, 2.3125rem);
	letter-spacing: var(--letter-spacing-3, 0.03em);
	font-weight: 400;
	font-style: normal;
}

.pmhk-pagination__arrow {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	width: 29px;
	height: 22px;
	color: var(--color-black);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color 0.2s ease, opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	outline: none;
	position: relative;
}

.pmhk-pagination__arrow svg {
	width: 29px;
	height: 22px;
	display: block;
}

.pmhk-pagination__arrow:hover:not(:disabled):not(.is-disabled) {
	color: var(--color-orange);
}

.pmhk-pagination__arrow--prev:hover:not(:disabled):not(.is-disabled) {
	transform: translateX(-3px);
}

.pmhk-pagination__arrow--next:hover:not(:disabled):not(.is-disabled) {
	transform: translateX(3px);
}

.pmhk-pagination__arrow:disabled,
.pmhk-pagination__arrow.is-disabled {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	transform: none !important;
}

.pmhk-pagination__numbers {
	display: inline-flex;
	align-items: center;
	gap: 50px;
	font-family: var(--font-headings);
	font-size: var(--font-size-h4, 1.6875rem);
	line-height: var(--line-height-h4, 2.3125rem);
	letter-spacing: var(--letter-spacing-3, 0.03em);
	font-weight: 400;
	font-style: normal;
}

.pmhk-pagination__numbers--mobile {
	display: none;
}

.pmhk-pagination__num {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: rgba(39, 39, 39, 0.4);
	font-family: var(--font-headings);
	font-size: var(--font-size-h4, 1.6875rem);
	line-height: var(--line-height-h4, 2.3125rem);
	letter-spacing: var(--letter-spacing-3, 0.03em);
	font-weight: 400;
	font-style: normal;
	cursor: pointer;
	transition: color 0.2s ease;
	outline: none;
}

.pmhk-pagination__num:hover:not(.is-current) {
	color: var(--color-orange);
}

.pmhk-pagination__num.is-current {
	color: var(--color-black);
	cursor: default;
	pointer-events: none;
}

.pmhk-pagination__dots {
	color: rgba(39, 39, 39, 0.4);
	font-family: var(--font-headings);
	font-size: var(--font-size-h4, 1.6875rem);
	line-height: var(--line-height-h4, 2.3125rem);
	letter-spacing: var(--letter-spacing-3, 0.03em);
	font-weight: 400;
	font-style: normal;
}

/* Mobile responsive (max-width: 767px) - Specs: Mobile/Lead in 1 */
@media (max-width: 767px) {
	.pmhk-pagination {
		gap: clamp(20px, 6vw, 40px);
		font-size: var(--font-size-lead-in-1, 1.375rem);
		line-height: var(--line-height-lead-in-1, 1.875rem);
		letter-spacing: var(--letter-spacing-2, 0.02em);
	}

	.pmhk-pagination__numbers {
		gap: clamp(20px, 6vw, 40px);
		font-size: var(--font-size-lead-in-1, 1.375rem);
		line-height: var(--line-height-lead-in-1, 1.875rem);
		letter-spacing: var(--letter-spacing-2, 0.02em);
	}

	.pmhk-pagination__numbers--desktop {
		display: none !important;
	}

	.pmhk-pagination__numbers--mobile {
		display: inline-flex !important;
	}

	.pmhk-pagination__dots {
		display: none !important;
	}

	.pmhk-pagination__num,
	.pmhk-pagination__dots {
		font-family: var(--font-headings);
		font-size: var(--font-size-lead-in-1, 1.375rem);
		line-height: var(--line-height-lead-in-1, 1.875rem);
		letter-spacing: var(--letter-spacing-2, 0.02em);
		font-weight: 400;
		font-style: normal;
	}
}

/* ==========================================================================
   15. Global Toast Notification System (.pmhk-toast)
   ========================================================================== */

.pmhk-toast-container {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
	width: calc(100% - 60px);
	pointer-events: none;
}

.pmhk-toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background-color: var(--color-blue);
	color: #ffffff;
	border-left: 4px solid var(--color-orange);
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	font-family: var(--font-base);
	font-size: var(--font-size-body-r, 0.9375rem);
	line-height: 1.4;
	pointer-events: auto;
	box-sizing: border-box;
	animation: pmhkToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.pmhk-toast--error {
	border-left-color: #ef4444;
}

.pmhk-toast--hiding {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

.pmhk-toast__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--color-orange);
}

.pmhk-toast--error .pmhk-toast__icon {
	color: #fca5a5;
}

.pmhk-toast__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.pmhk-toast__content {
	flex-grow: 1;
	min-width: 0;
	color: #ffffff;
	word-break: break-word;
}

.pmhk-toast__close {
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 4px;
	margin: -4px -4px -4px 4px;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.pmhk-toast__close:hover,
.pmhk-toast__close:focus {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.15);
	outline: none;
}

.pmhk-toast__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

@keyframes pmhkToastSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.pmhk-toast-container {
		bottom: 20px;
		right: 20px;
		left: 20px;
		width: auto;
		max-width: none;
	}

	.pmhk-toast {
		font-size: 14px;
		padding: 12px 16px;
	}
}