/*!
Theme Name: bcn
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bcn
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

bcn is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Import brand styles */
@import url('brand.css');

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text);
	font-family: var(--primary-font);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: var(--heading);
	font-family: var(--secondary-font);
	line-height: var(--line-height-heading);
	font-size: var(--font-size-h1);
}

h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--brand);
	text-decoration: underline;
	transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:visited {
	color: var(--brand);
}

a:hover,
a:focus,
a:active {
	color: var(--alt-brand);
	text-decoration-color: var(--alt-brand);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--text);
	border-color: var(--alt-brand);
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	width: 100%;
	background: var(--brand-bg);
	color: var(--brand-text);
	z-index: 1000;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
	background: var(--alt-bg);
	color: var(--alt-text);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.site-header.header-scrolled,
.site-header.header-solid {
	background: var(--alt-bg);
	color: var(--alt-text);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body:not(.home) {
	margin-top: 0; /* Removed to allow banner to handle header spacing */
}

/* Force full scrolled header look on secondary pages */
body:not(.home) .site-header,
body:not(.home) .site-header *:not(.main-navigation):not(.main-navigation *) {
	transition: none !important;
}

body:not(.home) .site-header {
	background: var(--alt-bg) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body:not(.home) .site-header .custom-logo {
	height: 9vh !important;
	width: auto !important;
	max-height: 9vh !important;
}

body:not(.home) .site-header .site-title,
body:not(.home) .site-header .site-title a {
	color: #222 !important;
}

body:not(.home) .site-header .header-button {
	background: var(--alt-button-bg) !important;
	color: var(--alt-button-text) !important;
	border-color: var(--alt-brand) !important;
}

body:not(.home) .site-header .menu-toggle-icon,
body:not(.home) .site-header .menu-toggle-icon::before,
body:not(.home) .site-header .menu-toggle-icon::after {
	background: var(--white) !important;
}

/* Remove unwanted margin or space below header */
body:not(.home) .site-header + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure no duplicate top margin from WordPress block spacing */
body:not(.home) main,
body:not(.home) .wp-block-group,
body:not(.home) .entry-content {
	margin-top: 0 !important;
}

/* Brand-adapted Full-Screen Menu Variables */
.site-header {
	--menu-bg: var(--brand);
	--menu-bg-alt: var(--white);
	--menu-text: var(--white);
	--menu-text-alt: var(--brand);
	--menu-hover: var(--alt-brand);
	--menu-close: var(--white);
	--menu-close-alt: var(--brand);
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
	transition: padding 0.3s ease;
}

.site-header.scrolled .header-container {
	padding: 0.5rem 2rem;
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-branding .custom-logo {
	height: 9vh;
	width: auto;
	max-height: 9vh;
}

.site-title,
.site-title a {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--heading);
	text-decoration: none;
	margin: 0;
}

.site-description {
	display: none;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-button {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--brand-button-bg);
	color: var(--brand-button-text);
	text-decoration: none;
	border: 1px solid var(--brand-button-text);
	border-radius: var(--radius);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	font-size: clamp(0.75rem, 1.5vw, 1rem);
	font-weight: 500;
	white-space: nowrap;
}

.site-header.scrolled .header-button {
	background: var(--alt-button-bg);
	color: var(--alt-button-text);
	border-color: var(--alt-brand);
}

.header-button:hover,
.header-button:focus {
	opacity: 0.85;
	outline: none;
}

.site-header.scrolled .header-button:hover,
.site-header.scrolled .header-button:focus {
	opacity: 0.85;
}

.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: 0.5rem;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
	background: none;
}

.menu-toggle-icon {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--brand-burger);
	position: relative;
	transition: background 0.3s ease;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--brand-burger);
	position: absolute;
	transition: all 0.3s ease;
}

.site-header.scrolled .menu-toggle-icon,
.site-header.scrolled .menu-toggle-icon::before,
.site-header.scrolled .menu-toggle-icon::after {
	background: var(--white);
}

.menu-toggle-icon::before {
	top: -8px;
}

.menu-toggle-icon::after {
	top: 8px;
}

.main-navigation.is-open .menu-toggle {
	display: none;
}

.main-navigation {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: var(--menu-bg);
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s ease, background-color 0.3s ease;
	z-index: 1001;
}

.main-navigation.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

.nav-overlay-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	z-index: 1000;
	pointer-events: none;
}

.main-navigation.is-open .nav-overlay-bg {
	opacity: 1;
	visibility: visible;
}

.nav-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1002;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.nav-close:hover,
.nav-close:focus {
	background: rgba(255, 255, 255, 0.1);
	outline: none;
}

.nav-close-icon {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
}

.nav-close-icon::before,
.nav-close-icon::after {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--menu-close);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(45deg);
	transition: background 0.3s ease;
}

.nav-close-icon::after {
	transform: translateY(-50%) rotate(-45deg);
}

.nav-close:hover .nav-close-icon::before,
.nav-close:hover .nav-close-icon::after,
.nav-close:focus .nav-close-icon::before,
.nav-close:focus .nav-close-icon::after {
	background: var(--menu-close-alt);
}

.nav-overlay {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.nav-header {
	text-align: center;
	padding-top: 2rem;
}

.nav-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--menu-text);
	margin: 0;
	letter-spacing: 0.1em;
	font-family: var(--secondary-font);
}

.nav-menu {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-menu ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	max-width: 400px;
}

.nav-menu li {
	margin: 0;
	opacity: 0;
	transform: translateY(20px);
	animation: menuItemFadeIn 0.6s ease forwards;
}

.nav-menu li:nth-child(1) { animation-delay: 0.1s; }
.nav-menu li:nth-child(2) { animation-delay: 0.2s; }
.nav-menu li:nth-child(3) { animation-delay: 0.3s; }
.nav-menu li:nth-child(4) { animation-delay: 0.4s; }
.nav-menu li:nth-child(5) { animation-delay: 0.5s; }
.nav-menu li:nth-child(6) { animation-delay: 0.6s; }
.nav-menu li:nth-child(7) { animation-delay: 0.7s; }
.nav-menu li:nth-child(8) { animation-delay: 0.8s; }
.nav-menu li:nth-child(9) { animation-delay: 0.9s; }
.nav-menu li:nth-child(10) { animation-delay: 1.0s; }

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

.nav-menu a {
	display: block;
	padding: var(--spacing-lg) var(--spacing-xl);
	color: var(--menu-text);
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 500;
	font-family: var(--primary-font);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	margin-bottom: var(--spacing-sm);
}

.nav-menu a:hover,
.nav-menu a:focus {
	color: var(--menu-hover);
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(10px);
}

.nav-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 0;
}

.nav-buttons .header-button {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	background: var(--alt-brand);
	color: var(--white);
	border-color: var(--alt-brand);
}

.nav-buttons .header-button:hover,
.nav-buttons .header-button:focus {
	background: var(--brand);
	color: var(--white);
	border-color: var(--brand);
}

.nav-footer {
	text-align: center;
	padding-bottom: 2rem;
}

.nav-footer .site-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-footer .custom-logo {
	max-height: 60px;
	width: auto;
	margin-bottom: 1rem;
}

.nav-footer .site-title,
.nav-footer .site-title a {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--menu-text);
	text-decoration: none;
	margin: 0;
	font-family: var(--secondary-font);
}

/* Responsive adjustments */
@media screen and (min-width: 768px) {
	.main-navigation {
		width: 80%;
	}

	.nav-overlay {
		margin: 0;
		padding-left: 4rem;
	}

	.nav-menu ul {
		text-align: left;
	}

	.header-actions {
		gap: 1.5rem;
	}

	.header-button {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
	}
}

@media screen and (max-width: 767px) {
	.header-container {
		padding: 1rem 2rem;
	}

	.site-branding .custom-logo {
		height: 50px;
		max-height: 50px;
	}

	body:not(.home) .site-header .custom-logo {
		height: 50px !important;
		max-height: 50px !important;
	}

	.site-title,
	.site-title a {
		font-size: 1.25rem;
	}

	.nav-overlay {
		padding: 1rem;
	}

	.nav-header {
		padding-top: 1rem;
	}

	.nav-title {
		font-size: 1.5rem;
	}

	.nav-menu a {
		padding: 0.75rem 1rem;
		font-size: 1.1rem;
	}

	.nav-buttons {
		padding: 1rem 0;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.nav-buttons .header-button {
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}

	.nav-footer {
		padding-bottom: 1rem;
	}

	.nav-footer .custom-logo {
		max-height: 40px;
		margin-bottom: 0.5rem;
	}

	.nav-footer .site-title,
	.nav-footer .site-title a {
		font-size: 1.1rem;
	}
}

/* Lock scroll when menu is open */
.lock-scroll {
	overflow: hidden;
}

.site-main {
	/* Removed margin-top since banner is now in document flow */
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.page {
	margin-bottom: 0 !important;
}

.post.latest-post-card,
.page.latest-post-card {
	margin-bottom: 0 !important;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0 8%;
}

/* Remove margins for the main landing page */
.home .page-content,
.home .entry-content,
.home .entry-summary {
	margin: 0;
}

/* Responsive margins for content pages */
@media screen and (max-width: 768px) {
	.page-content,
	.entry-content,
	.entry-summary {
		margin: 0 1rem;
	}

	/* Remove margins for the main landing page on tablets */
	.home .page-content,
	.home .entry-content,
	.home .entry-summary {
		margin: 0;
	}
}

@media screen and (max-width: 480px) {
	.page-content,
	.entry-content,
	.entry-summary {
		margin: 0 0.5rem;
	}

	/* Remove margins for the main landing page on mobile */
	.home .page-content,
	.home .entry-content,
	.home .entry-summary {
		margin: 0;
	}
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Newsletter Section */
.newsletter-section {
	background-color: var(--alt-brand);
	padding: 3rem 0;
}

.newsletter-section-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	text-align: center;
}

.newsletter-section-title {
	color: var(--white);
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 2rem 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.newsletter-section-btn {
	font-size: 1.1rem;
	font-weight: 600;
	padding: 0.875rem 2rem;
	min-width: 200px;
	background: var(--brand) !important;
	color: var(--white) !important;
}

.newsletter-section-btn:hover,
.newsletter-section-btn:focus {
	background: var(--alt-brand) !important;
	color: var(--white) !important;
}

/* Footer
--------------------------------------------- */
.site-footer {
	background-color: var(--brand);
	margin-bottom: 0;
	color: var(--white);
	border-top: 1px solid #e9ecef;
	padding: 0 0 0;
}



/* Footer Navigation */
.footer-navigation {
	background-color: var(--brand);
	padding: 3.5rem 2rem;
	border-top: 1px solid #e9ecef;
}

.footer-navigation-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-menu {
	flex: 1;
}

.footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
}

.footer-nav li {
	margin: 0;
}

.footer-nav a {
	color: var(--white);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-nav a:hover,
.footer-nav a:focus {
	color: var(--alt-brand);
	text-decoration: underline;
}

.footer-social-section {
	text-align: center;
}

.footer-social-title {
	color: var(--white);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	text-align: center;
}

.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.social-icon {
	color: var(--white);
	text-decoration: none;
	transition: color 0.3s ease, filter 0.3s ease;
	display: inline-block;
}

.social-icon:hover,
.social-icon:focus {
	filter: brightness(1.2);
	color: var(--alt-brand);
}

.social-icon:visited {
	color: var(--white);
}

.social-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Site Info */
.site-info {
	background-color: var(--brand);
	padding: 3.5rem 2rem 3rem;
	border-top: 1px solid #e9ecef;
}

.site-info-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.site-copyright {
	flex: 1;
}

.site-copyright p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--white);
}

.site-links {
	flex-shrink: 0;
}

.privacy-link {
	color: var(--white);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.3s ease;
}

.privacy-link:hover,
.privacy-link:focus {
	color: var(--alt-brand);
	text-decoration: underline;
}

/* Responsive Newsletter Section */
@media screen and (max-width: 768px) {
	.newsletter-section {
		padding: 2rem 0;
	}

	.newsletter-section-container {
		padding: 0 1rem;
	}

	.newsletter-section-title {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.newsletter-section-btn {
		font-size: 1rem;
		padding: 0.75rem 1.5rem;
		min-width: 180px;
	}
}

@media screen and (max-width: 480px) {
	.newsletter-section {
		padding: 1.5rem 0;
	}

	.newsletter-section-container {
		padding: 0 1rem;
	}

	.newsletter-section-title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.newsletter-section-btn {
		font-size: 0.9rem;
		padding: 0.625rem 1.25rem;
		min-width: 160px;
	}
}

/* Responsive Footer */
@media screen and (max-width: 768px) {
	.site-info-container {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		text-align: center;
	}

	.footer-nav {
		grid-template-columns: 1fr;
	}

	.footer-navigation-container {
		justify-content: center;
	}

	.site-copyright,
	.site-links {
		flex: none;
	}
}

@media screen and (max-width: 480px) {
	.site-info {
		padding: 1rem 1rem 0;
	}
}

/* Hide Page Title functionality
--------------------------------------------- */

/* Optional: Hide title elements when hide-title class is present */
/* Uncomment or modify these rules as needed for additional styling when title is hidden */

/*
.hide-title .entry-header {
	display: none;
}

.hide-title .entry-title {
	display: none;
}
*/

/* Entry Title Styles */
.entry-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--heading);
	margin: 0 0 1rem 0;
}

@media screen and (max-width: 768px) {
	.entry-title {
		font-size: 2rem;
	}
}

@media screen and (max-width: 480px) {
	.entry-title {
		font-size: 1.75rem;
	}
}

/* Latest Posts Section
--------------------------------------------- */

.latest-posts-section {
	padding: 3rem 0 3rem;
	background: var(--alt-brand);
}

.latest-posts-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.latest-posts-title {
	font-size: 2rem;
	font-weight: 700;
	color: #404040;
	text-align: center;
	margin: 0 0 2rem 0;
}

.latest-posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 600px;
	margin: 0 auto 2rem auto;
	gap: 2rem;
}

/* Latest Posts Page Grid */
.site-main .latest-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, 300px);
	gap: 2rem;
	justify-content: center;
	max-width: none;
	margin: 0 0 2rem 0;
	padding: 0 2rem;
}

/* Square Article Cards on Latest Posts Page */
body.home .latest-post-card {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

body.home .latest-post-card-link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

body.home .latest-post-card-link:hover,
body.home .latest-post-card-link:focus {
	text-decoration: none;
}

body.home .latest-post-card-link:hover ~ .latest-post-thumbnail img,
body.home .latest-post-card-link:focus ~ .latest-post-thumbnail img {
	transform: scale(1.05);
}

body.home .latest-post-thumbnail img {
	height: 100%;
	transition: transform 0.3s ease;
}

body.home .latest-post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

/* Responsive Latest Posts Page Grid */
@media screen and (max-width: 768px) {
	.site-main .latest-posts-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.5rem;
		padding: 0 1rem;
	}
}

@media screen and (max-width: 480px) {
	.site-main .latest-posts-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 0 1rem;
	}
}

/* Responsive Square Cards */
@media screen and (max-width: 768px) {
	body.home .latest-post-thumbnail img {
		height: 100%;
	}
}

@media screen and (max-width: 480px) {
	body.home .latest-post-thumbnail img {
		height: 100%;
	}
}

.latest-post-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease forwards;
	margin-bottom: 0 !important;
}

.latest-post-card:nth-child(1) { animation-delay: 0.1s; }
.latest-post-card:nth-child(2) { animation-delay: 0.2s; }
.latest-post-card:nth-child(3) { animation-delay: 0.3s; }

.latest-post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.latest-post-thumbnail {
	position: relative;
	overflow: hidden;
}

.latest-post-thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.latest-post-card:hover .latest-post-thumbnail img {
	transform: scale(1.05);
}

.latest-post-content {
	padding: 1.5rem;
}

.latest-post-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

.latest-post-title a {
	color: #404040;
	text-decoration: none;
	transition: color 0.3s ease;
}

.latest-post-title a:hover,
.latest-post-title a:focus {
	color: var(--brand);
}

.latest-post-excerpt {
	color: #666;
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.latest-post-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--brand);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	transition: color 0.3s ease;
}

.latest-post-read-more:hover,
.latest-post-read-more:focus {
	color: var(--alt-brand);
}

.read-more-arrow {
	transition: transform 0.3s ease;
}

.latest-post-read-more:hover .read-more-arrow,
.latest-post-read-more:focus .read-more-arrow {
	transform: translateX(3px);
}

.latest-posts-footer {
	text-align: center;
	padding-top: 1rem;
	border-top: 1px solid #e9ecef;
}

.view-all-articles-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius);
	font-weight: 500;
	transition: all 0.3s ease;
}

.view-all-articles-btn:hover,
.view-all-articles-btn:focus {
	background: var(--alt-brand);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(7, 53, 85, 0.3);
}

/* Responsive Latest Posts Section */
@media screen and (max-width: 768px) {
	.latest-posts-container {
		padding: 0 1rem;
	}

	.latest-posts-title {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.latest-posts-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.latest-post-thumbnail img {
		height: 180px;
	}

	.latest-post-content {
		padding: 1.25rem;
	}

	.latest-post-title {
		font-size: 1.1rem;
	}

	.latest-post-excerpt {
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 480px) {
	.latest-posts-section {
		padding: 2rem 0 0;
	}

	.latest-posts-container {
		padding: 0 1rem;
	}

	.latest-posts-title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.latest-posts-grid {
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.latest-post-thumbnail img {
		height: 150px;
	}

	.latest-post-content {
		padding: 1rem;
	}

	.latest-post-title {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	.latest-post-excerpt {
		font-size: 0.8rem;
		margin-bottom: 0.75rem;
	}

	.view-all-articles-btn {
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}
}

/* Archive Posts Container and Grid
--------------------------------------------- */

.archive-posts-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.archive-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

/* Responsive Archive Posts Grid */
@media screen and (max-width: 768px) {
	.archive-posts-container {
		padding: 2rem 1rem;
	}

	.archive-posts-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}
}

@media screen and (max-width: 480px) {
	.archive-posts-container {
		padding: 1.5rem 1rem;
	}

	.archive-posts-grid {
		gap: 1rem;
		margin-bottom: 1rem;
	}
}

/* Newsletter Popup
--------------------------------------------- */

.newsletter-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.newsletter-popup.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.newsletter-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

.newsletter-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	width: 90%;
	max-width: 500px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	padding: 2rem;
}

.newsletter-popup.is-visible .newsletter-modal {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.newsletter-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.3s ease;
	z-index: 1;
}

.newsletter-close:hover,
.newsletter-close:focus {
	background: rgba(0, 0, 0, 0.1);
	outline: none;
}

.close-icon {
	font-size: 1.5rem;
	font-weight: bold;
	color: #666;
	line-height: 1;
}

.newsletter-content {
	text-align: center;
}

.newsletter-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #404040;
	margin: 0 0 1rem 0;
}

.newsletter-text {
	color: #666;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 2rem 0;
}

.newsletter-form {
	max-width: 400px;
	margin: 0 auto;
}

.form-group {
	margin-bottom: 1.5rem;
}

.newsletter-form input[type="email"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid #e1e5e9;
	border-radius: 6px;
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

.newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(7, 53, 85, 0.1);
}

.newsletter-submit {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.newsletter-submit:hover,
.newsletter-submit:focus {
	background: var(--alt-brand);
	transform: translateY(-1px);
	outline: none;
}

.newsletter-submit:active {
	transform: translateY(0);
}

/* Responsive Newsletter Popup */
@media screen and (max-width: 768px) {
	.newsletter-modal {
		width: 95%;
		padding: 1.5rem;
	}

	.newsletter-title {
		font-size: 1.5rem;
	}

	.newsletter-text {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}

	.newsletter-form input[type="email"] {
		padding: 0.625rem 0.875rem;
		font-size: 0.9rem;
	}

	.newsletter-submit {
		padding: 0.625rem 1.25rem;
		font-size: 0.9rem;
	}
}

@media screen and (max-width: 480px) {
	.newsletter-modal {
		width: 98%;
		padding: 1rem;
	}

	.newsletter-close {
		top: 0.5rem;
		right: 0.5rem;
		width: 36px;
		height: 36px;
	}

	.close-icon {
		font-size: 1.25rem;
	}

	.newsletter-title {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}

	.newsletter-text {
		font-size: 0.85rem;
		margin-bottom: 1.25rem;
	}

	.form-group {
		margin-bottom: 1.25rem;
	}

	.newsletter-form input[type="email"] {
		padding: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}

.newsletter-submit {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}
}

/* Latest Articles Page - Customizable Layout
--------------------------------------------- */

/* Main container - configurable layout */
.latest-articles-container {
	display: grid;
	grid-template-columns: 1fr 300px; /* Default with sidebar */
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Full-width layout option - hide sidebar */
.latest-articles-full-width .latest-articles-container {
	grid-template-columns: 1fr; /* Single column for full width */
}

.latest-articles-full-width .latest-articles-sidebar {
	display: none; /* Hide sidebar in full-width mode */
}

.latest-articles-main {
	grid-column: 1;
}

.latest-articles-sidebar {
	grid-column: 2;
}

/* Page title section with optional background and overlay */
.page-header {
	position: relative;
	width: 100%;
	height: 200px;
	background: url('../assets/images/default_banner.png') center center / cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 78px 0 60px 0 !important;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.page-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 51, 102, 0.4);
	z-index: 1;
}

.page-title {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1rem 0;
	position: relative;
	z-index: 2;
	text-shadow: none;
	text-align: center;
}

.page-description {
	font-size: 1.1rem;
	color: #fff;
	margin: 0;
	opacity: 0.9;
	position: relative;
	z-index: 2;
	text-shadow: none;
	text-align: center;
}

@media (max-width: 768px) {
	.page-header {
		height: 140px;
		margin: 38px 0 30px 0 !important;
	}
	.page-header .page-title {
		font-size: 1.5rem;
	}
}

/* Articles Grid - Configurable columns */
.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
	gap: 2rem;
	margin-bottom: 3rem;
}

/* 2 columns option */
.articles-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 1 column option */
.articles-grid-1 {
	grid-template-columns: 1fr;
}

/* Latest Article (Single Post) */
.latest-article {
	margin-bottom: 3rem;
}

.latest-article .article-card {
	max-width: 100%;
	margin: 0 auto;
}

/* Article Cards */
.article-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease forwards;
	margin-bottom: 0 !important;
}

.article-card:nth-child(1) { animation-delay: 0.1s; }
.article-card:nth-child(2) { animation-delay: 0.2s; }
.article-card:nth-child(3) { animation-delay: 0.3s; }
.article-card:nth-child(4) { animation-delay: 0.4s; }
.article-card:nth-child(5) { animation-delay: 0.5s; }
.article-card:nth-child(6) { animation-delay: 0.6s; }

.article-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.article-thumbnail {
	position: relative;
	overflow: hidden;
}

.article-thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.article-card:hover .article-thumbnail img {
	transform: scale(1.05);
}

.article-content {
	padding: 1.5rem;
}

.article-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

.article-title a {
	color: var(--heading);
	text-decoration: none;
	transition: color 0.3s ease;
}

.article-title a:hover,
.article-title a:focus {
	color: var(--brand);
}

.article-meta {
	margin-bottom: 1rem;
}

.article-date {
	color: #666;
	font-size: 0.9rem;
	font-weight: 500;
}

.article-excerpt {
	color: #666;
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.article-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--brand);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	transition: color 0.3s ease;
}

.article-read-more:hover,
.article-read-more:focus {
	color: var(--alt-brand);
}

.read-more-arrow {
	transition: transform 0.3s ease;
}

.article-read-more:hover .read-more-arrow,
.article-read-more:focus .read-more-arrow {
	transform: translateX(3px);
}

/* Pagination */
.articles-pagination {
	text-align: center;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e9ecef;
}

.articles-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin: 0 0.25rem;
	text-decoration: none;
	color: var(--text);
	border: 1px solid #dee2e6;
	border-radius: 4px;
	transition: all 0.3s ease;
	background: #fff;
}

.articles-pagination .page-numbers:hover,
.articles-pagination .page-numbers:focus {
	color: var(--brand);
	border-color: var(--brand);
	background: rgba(7, 53, 85, 0.05);
}

.articles-pagination .page-numbers.current {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	font-weight: 500;
}

.articles-pagination .page-numbers.prev,
.articles-pagination .page-numbers.next {
	font-weight: 500;
}

/* WordPress Core Pagination for Posts Page */
.navigation.pagination {
	text-align: center;
	margin-top: 3rem;
	padding-top: 2rem;
	margin-bottom: 3rem;
	border-top: 1px solid #e9ecef;
}

.navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: var(--text);
	border: 1px solid #dee2e6;
	border-radius: 0;
	transition: all 0.3s ease;
	background: #fff;
	font-weight: 500;
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:focus {
	color: var(--brand);
	border-color: var(--brand);
	background: rgba(7, 53, 85, 0.05);
}

.navigation.pagination .page-numbers.current {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	font-weight: 600;
}

.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
	font-weight: 500;
	padding: 0 0.75rem;
	width: auto;
	min-width: 2.5rem;
}

/* Responsive pagination */
@media screen and (max-width: 768px) {
	.navigation.pagination .page-numbers {
		width: 2rem;
		height: 2rem;
		font-size: 0.9rem;
	}

	.navigation.pagination .page-numbers.prev,
	.navigation.pagination .page-numbers.next {
		padding: 0 0.5rem;
		min-width: 2rem;
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 480px) {
	.navigation.pagination .page-numbers {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8rem;
	}

	.navigation.pagination .page-numbers.prev,
	.navigation.pagination .page-numbers.next {
		padding: 0 0.375rem;
		min-width: 1.75rem;
		font-size: 0.75rem;
	}
}

/* Sidebar */
.latest-articles-sidebar .sidebar-widget {
	background: #fff;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.widget-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--heading);
	margin: 0 0 1.5rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--brand);
}

.media-mentions {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.media-mention-item {
	padding-bottom: 1rem;
	border-bottom: 1px solid #e9ecef;
}

.media-mention-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mention-title {
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	line-height: 1.3;
}

.mention-title a {
	color: var(--heading);
	text-decoration: none;
	transition: color 0.3s ease;
}

.mention-title a:hover,
.mention-title a:focus {
	color: var(--brand);
}

.mention-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8rem;
	color: #666;
}

.mention-source {
	font-weight: 500;
	color: var(--brand);
}

.mention-date {
	font-style: italic;
}

/* No Articles */
.no-articles {
	text-align: center;
	padding: 3rem 0;
}

.no-articles h2 {
	color: var(--heading);
	margin: 0 0 1rem 0;
}

.no-articles p {
	color: #666;
	margin: 0;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
	.latest-articles-container {
		grid-template-columns: 1fr 250px;
		gap: 2rem;
		padding: 0 1rem;
	}

	/* Tablet: 2 columns for grid */
	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	.latest-articles-container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.latest-articles-sidebar {
		grid-row: 1;
		grid-column: 1;
		order: -1; /* Show sidebar above main content on mobile */
	}

	.page-title {
		font-size: 2rem;
	}

	.page-description {
		font-size: 1rem;
	}

	/* Mobile: 1 column for grid */
	.articles-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 2rem;
	}

	.article-thumbnail img {
		height: 180px;
	}

	.article-content {
		padding: 1.25rem;
	}

	.article-title {
		font-size: 1.1rem;
	}

	.article-excerpt {
		font-size: 0.85rem;
	}

	.articles-pagination {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}

	.articles-pagination .page-numbers {
		padding: 0.4rem 0.8rem;
		margin: 0 0.125rem;
		font-size: 0.9rem;
	}

	.latest-articles-sidebar .sidebar-widget {
		padding: 1.5rem;
	}

	.widget-title {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	.media-mentions {
		gap: 1rem;
	}

	.media-mention-item {
		padding-bottom: 0.75rem;
	}

	.mention-title {
		font-size: 0.9rem;
	}

	.mention-meta {
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 480px) {
	.latest-articles-container {
		padding: 0 1rem;
	}

	.page-title {
		font-size: 1.75rem;
	}

	.page-description {
		font-size: 1rem;
	}

	.articles-grid {
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.article-thumbnail img {
		height: 150px;
	}

	.article-content {
		padding: 1rem;
	}

	.article-title {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	.article-excerpt {
		font-size: 0.8rem;
		margin-bottom: 0.75rem;
	}

	.article-read-more {
		font-size: 0.85rem;
	}

	.articles-pagination {
		margin-top: 1.5rem;
		padding-top: 1rem;
	}

	.articles-pagination .page-numbers {
		padding: 0.35rem 0.7rem;
		font-size: 0.85rem;
	}

	.latest-articles-sidebar .sidebar-widget {
		padding: 1rem;
	}

	.widget-title {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	.media-mentions {
		gap: 0.75rem;
	}

	.media-mention-item {
		padding-bottom: 0.5rem;
	}

	.mention-title {
		font-size: 0.85rem;
		margin-bottom: 0.375rem;
	}

	.mention-meta {
		font-size: 0.7rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

/* Loading state for AJAX pagination */
.articles-loading {
	text-align: center;
	padding: 2rem;
}

.articles-loading::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--brand);
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

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

/* Load More Button */
.load-more-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 2rem auto;
	text-align: center;
	min-width: 200px;
}

.load-more-btn:hover,
.load-more-btn:focus {
	background: var(--alt-brand);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(7, 53, 85, 0.3);
	outline: none;
}

.load-more-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Sticky Footer
--------------------------------------------- */

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#page.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-content {
	flex: 1;
}

.site-footer {
	flex-shrink: 0;
}

/* Custom Single Post Template Styles
--------------------------------------------- */

.custom-single-post {
	margin-top: 0;
}

/* Post Header Section */
.custom-post-header {
	position: relative;
	margin: 78px 0 60px 0;
}

.custom-post-header-bg {
	position: relative;
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-post-header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 51, 102, 0.6);
	z-index: 1;
}

.custom-post-header-content {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
	color: #fff;
}

.custom-post-title {
	font-size: 3rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	line-height: 1.2;
}

.custom-post-meta {
	font-size: 1.1rem;
	opacity: 0.9;
}

.published-date {
	color: #fff !important;
	font-weight: 500;
}

.custom-post-meta .posted-on,
.custom-post-meta .byline {
	display: inline-block;
	margin: 0 1rem;
}

.custom-post-meta .posted-on:before,
.custom-post-meta .byline:before {
	content: '';
	display: none;
}

/* Main Content Layout */
.custom-post-content {
	padding: 3rem 0;
	background: #fff;
}

.custom-post-content .container {
	margin: 0 8%;
}

/* Responsive margins for custom post content */
@media screen and (max-width: 768px) {
	.custom-post-content .container {
		margin: 0 1rem;
	}
}

@media screen and (max-width: 480px) {
	.custom-post-content .container {
		margin: 0 0.5rem;
	}
}

.custom-post-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 3rem;
	align-items: start;
}

.custom-post-main {
	grid-column: 1;
}

.custom-post-sidebar {
	grid-column: 2;
}

/* Sidebar Latest Posts */
.latest-posts-sidebar {
	background: #fff;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.latest-posts-sidebar h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--heading);
	margin: 0 0 1.5rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--brand);
}

.sidebar-posts-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sidebar-post-card {
	display: flex;
	gap: 1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e9ecef;
}

.sidebar-post-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sidebar-post-thumbnail {
	flex-shrink: 0;
	width: 80px;
	height: 60px;
	overflow: hidden;
	border-radius: 4px;
}

.sidebar-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.sidebar-post-card:hover .sidebar-post-thumbnail img {
	transform: scale(1.05);
}

.sidebar-post-content {
	flex: 1;
	min-width: 0;
}

.sidebar-post-title {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	line-height: 1.3;
}

.sidebar-post-title a {
	color: var(--heading);
	text-decoration: none;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sidebar-post-title a:hover,
.sidebar-post-title a:focus {
	color: var(--brand);
}

.sidebar-post-date {
	color: #666;
	font-size: 0.8rem;
	font-weight: 500;
}

/* Featured Image */
.custom-post-featured-image {
	margin-bottom: 2rem;
	text-align: center;
}

.custom-post-featured-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Post Body */
.custom-post-body {
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--text);
	margin-bottom: 2rem;
}

.custom-post-body p {
	margin-bottom: 1.5rem;
}

.custom-post-body h2,
.custom-post-body h3,
.custom-post-body h4,
.custom-post-body h5,
.custom-post-body h6 {
	color: var(--heading);
	margin: 2rem 0 1rem 0;
	font-weight: 600;
}

.custom-post-body h2 { font-size: 2rem; }
.custom-post-body h3 { font-size: 1.75rem; }
.custom-post-body h4 { font-size: 1.5rem; }
.custom-post-body h5 { font-size: 1.25rem; }
.custom-post-body h6 { font-size: 1.1rem; }

.custom-post-body ul,
.custom-post-body ol {
	margin: 1.5rem 0;
	padding-left: 2rem;
}

.custom-post-body li {
	margin-bottom: 0.5rem;
}

.custom-post-body blockquote {
	border-left: 4px solid var(--brand);
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: var(--heading);
	background: rgba(7, 53, 85, 0.05);
	padding: 1.5rem;
	border-radius: 0 8px 8px 0;
}

.custom-post-body .wp-block-quote {
	border-left: 4px solid var(--brand);
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: var(--heading);
	background: rgba(7, 53, 85, 0.05);
	padding: 1.5rem;
	border-radius: 0 8px 8px 0;
}

/* Post Footer */
.custom-post-footer {
	border-top: 1px solid #e9ecef;
	padding-top: 2rem;
	margin: 3rem 0 2rem 0;
	font-size: 0.9rem;
	color: #666;
}

.custom-post-footer .cat-links,
.custom-post-footer .tags-links {
	display: block;
	margin: 0.5rem 0;
}

.custom-post-footer .cat-links:before,
.custom-post-footer .tags-links:before {
	color: var(--brand);
	font-weight: 600;
}

/* Back to News Button */
.back-to-news {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	text-align: center;
}

.back-to-news-button {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--brand);
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-news-button:hover,
.back-to-news-button:focus {
	background: var(--alt-brand);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	color: #fff !important;
	text-decoration: none;
}

/* Comments Section */
.custom-single-post .comments-area {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 1px solid #e9ecef;
}

/* Related Posts */
.related-posts {
	margin: 4rem 0 3rem 0;
	padding: 3rem 0;
	background: var(--alt-bg);
	border-radius: 12px;
}

.related-posts-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--heading);
	text-align: center;
	margin: 0 0 2rem 0;
}

.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.related-post-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.related-post-thumbnail {
	position: relative;
	overflow: hidden;
}

.related-post-thumbnail img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-thumbnail img {
	transform: scale(1.05);
}

.related-post-content {
	padding: 1.5rem;
}

.related-post-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

.related-post-title a {
	color: var(--heading);
	text-decoration: none;
	transition: color 0.3s ease;
}

.related-post-title a:hover,
.related-post-title a:focus {
	color: var(--brand);
}

.related-post-date {
	color: #666;
	font-size: 0.9rem;
	font-weight: 500;
}

/* Call-to-Action Section */
.post-cta {
	background: var(--brand);
	color: #fff;
	padding: 3rem 0;
	text-align: center;
	margin: 4rem 0;
	border-radius: 12px;
}

.post-cta-content h2 {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #fff;
}

.post-cta-content p {
	font-size: 1.1rem;
	margin: 0 0 2rem 0;
	opacity: 0.9;
}

.post-cta-button {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--alt-brand);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.post-cta-button:hover,
.post-cta-button:focus {
	background: #fff;
	color: var(--brand);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
	.custom-post-layout {
		grid-template-columns: 1fr 250px;
		gap: 2rem;
	}

	.custom-post-title {
		font-size: 2.5rem;
	}
}

@media screen and (max-width: 768px) {
	.custom-post-header {
		margin: 38px 0 30px 0;
	}

	.custom-post-header-bg {
		height: 250px;
	}

	.custom-post-title {
		font-size: 2rem;
		padding: 0 1rem;
	}

	.custom-post-meta {
		font-size: 1rem;
		padding: 0 1rem;
	}

	.custom-post-meta .posted-on,
	.custom-post-meta .byline {
		display: block;
		margin: 0.5rem 0;
	}

	.custom-post-content {
		padding: 2rem 0;
	}

	.custom-post-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.custom-post-sidebar {
		grid-row: 2;
		grid-column: 1;
		order: 1;
	}

	.custom-post-body {
		font-size: 1rem;
	}

	.custom-post-navigation .nav-links {
		flex-direction: column;
		gap: 1rem;
	}

	.custom-post-navigation .nav-previous,
	.custom-post-navigation .nav-next {
		text-align: center;
	}

	.related-posts-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.related-posts {
		margin: 3rem 0 2rem 0;
		padding: 2rem 1rem;
	}

	.related-posts-title {
		font-size: 1.5rem;
	}

	.post-cta {
		margin: 3rem 1rem;
		padding: 2rem 1rem;
	}

	.post-cta-content h2 {
		font-size: 1.5rem;
	}

	.post-cta-content p {
		font-size: 1rem;
	}

	.post-cta-button {
		padding: 0.875rem 1.5rem;
		font-size: 0.9rem;
	}
}

@media screen and (max-width: 480px) {
	.custom-post-header-bg {
		height: 200px;
	}

	.custom-post-title {
		font-size: 1.75rem;
	}

	.custom-post-meta {
		font-size: 0.9rem;
	}

	.custom-post-content {
		padding: 1.5rem 0;
	}

	.custom-post-body {
		font-size: 0.95rem;
	}

	.custom-post-body h2 { font-size: 1.5rem; }
	.custom-post-body h3 { font-size: 1.25rem; }
	.custom-post-body h4 { font-size: 1.1rem; }

	.related-posts {
		margin: 2rem 0 1.5rem 0;
		padding: 1.5rem 1rem;
	}

	.related-posts-title {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}

	.related-post-content {
		padding: 1rem;
	}

	.related-post-title {
		font-size: 1rem;
	}

	.post-cta {
		margin: 2rem 1rem;
		padding: 1.5rem 1rem;
	}

	.post-cta-content h2 {
		font-size: 1.25rem;
	}

	.post-cta-content p {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}

	.post-cta-button {
		padding: 0.75rem 1.25rem;
		font-size: 0.85rem;
	}
}

/* Candidates Section - Adapted from BeloeilCestNous/equipe.php and district pages
--------------------------------------------- */

.team-section {
	background-color: white;
	padding: 40px 20px;
	text-align: center;
}

.team-section h2 {
	color: #002b4b;
	margin-bottom: 30px;
}

.team-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.team-member {
	position: relative;
	width: 120px;
	height: 170px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.team-member img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: 0.3s ease-in-out;
}

.team-member .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: 0.3s ease-in-out;
}

.team-member:hover .overlay {
	opacity: 1;
}

.team-member .name {
	color: white;
	font-size: 0.9rem;
	font-weight: bold;
}

.team-member .district-name {
	color: white;
	font-size: 0.8rem;
	font-weight: bold;
}

.candidate-button {
	margin-top: 10px;
}

.candidate-button .btn {
	background-color: #2ec0cf;
	color: white;
	padding: 6px 12px;
	border-radius: 15px;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	font-size: 0.8rem;
}

.message-chef {
	width: 100%;
	background-color: #f5f5f5;
	padding: 0px 0;
}

.container-chef {
	display: flex;
	width: 100%;
	margin: 0 auto;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0px;
	gap: 0px;
	flex-wrap: wrap;
}

.chef-image {
	max-width: 1472px;
}

.chef-image img {
	width: 100%;
	height: auto;
	max-height: 100vh;
	border-radius: 0px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.chef-text {
	flex: 1;
	margin-left: 10px;
}

.chef-text h2 {
	margin-bottom: 20px;
	color: #002b4b;
}

.chef-text p {
	font-size: 18px;
	line-height: 1.6;
	color: #333;
}

.signature {
	font-family: 'Great Vibes', cursive;
	font-style: italic;
	letter-spacing: 1px;
	margin-top: 40px;
	margin-bottom: 0;
	text-align: left;
}

.program-section {
	display: flex;
	justify-content: center;
}

.program-section h2 {
	color: white;
}

.program-section p {
	color: white;
	font-size: 0.8rem;
	margin: 2%;
}

#program {
	background-color: #002b4b;
	width: 80%;
	border-radius: 15px;
}

.section-button {
	text-align: center;
}

/* Responsive */
@media screen and (max-width: 1080px) {
	.container-chef {
		flex-direction: column;
		text-align: center;
	}

	.chef-text {
		padding-top: 20px;
	}
}

/* Team Members Block
--------------------------------------------- */

.team-members-block {
	padding: 40px 20px;
	text-align: center;
	background-color: white;
}

.team-members-block h2 {
	color: #002b4b;
	margin-bottom: 30px;
	font-size: 2rem;
	font-weight: 700;
}

.team-members-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	padding: 20px 0;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.team-members-grid::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and Opera */
}

.team-member {
	position: relative;
	width: 180px;
	height: 180px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.team-member:hover {
	transform: scale(1.05);
}

.team-member img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-member-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	padding: 10px;
	box-sizing: border-box;
}

.team-member:hover .team-member-overlay {
	opacity: 1;
}

.team-member .district {
	color: white;
	font-size: 0.9rem;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: center;
}

.team-member .name {
	color: white;
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.team-member .btn {
	background-color: #2ec0cf;
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9rem;
	transition: background-color 0.3s ease;
	display: inline-block;
}

.team-member .btn:hover {
	background-color: #25a8b5;
}

/* Responsive: Tablet and Mobile - 2 cards per row */
@media screen and (max-width: 768px) {
	.team-members-block {
		padding: 30px 15px;
	}

	.team-members-block h2 {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}

	.team-members-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		overflow-x: visible;
		padding: 20px 0;
	}

	.team-member {
		width: 100%;
		height: 150px;
		flex-shrink: initial;
	}

	.team-member .district {
		font-size: 0.8rem;
	}

	.team-member .name {
		font-size: 0.9rem;
	}

	.team-member .btn {
		font-size: 0.8rem;
		padding: 6px 12px;
	}
}

/* Page Banner
--------------------------------------------- */

.page-banner {
	position: relative; /* Keep in document flow */
	width: 100%;
	height: 200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	image-rendering: -webkit-optimize-contrast; /* Optimize for high-res displays */
	image-rendering: crisp-edges; /* Fallback for better image quality */
	z-index: 1; /* Ensure banner sits above background but below header */
	margin: 78px 0 60px 0 !important; /* Fixed header offset - content sits directly below banner */
}

.page-banner .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 51, 102, 0.4); /* Overlay for better text readability */
}

.page-banner .page-title {
	position: relative;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 1rem 0; /* Remove default h1 margins */
	z-index: 2;
}

@media (max-width: 768px) {
	.page-banner {
		height: 140px;
		margin: 38px 0 30px 0 !important; /* Fixed header offset - mobile */
	}
	.page-banner .page-title {
		font-size: 1.5rem;
	}
}

/* Electoral Promises Tracker
--------------------------------------------- */

.promises-filters {
	margin-bottom: var(--spacing-xxl);
	padding: var(--spacing-xl);
	background: var(--subtle-bg);
	border-radius: var(--radius);
	border: var(--border-width) solid var(--border);
	box-shadow: var(--shadow-subtle);
}

.filter-controls {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-xl);
	align-items: end;
}

.filter-group {
	display: flex;
	flex-direction: column;
	min-width: 200px;
}

.filter-group label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--heading);
	margin-bottom: var(--spacing-xs);
}

.filter-select {
	padding: var(--spacing-sm) var(--spacing-md);
	border: var(--border-width-md) solid var(--border);
	border-radius: var(--radius);
	font-size: 1rem;
	background: var(--white);
	color: var(--text);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	cursor: pointer;
	font-family: var(--primary-font);
}

.filter-select:focus {
	outline: none;
	border-color: var(--alt-brand);
	box-shadow: 0 0 0 3px rgba(46, 192, 207, 0.1);
}

.filter-select:hover {
	border-color: var(--alt-brand);
}

.promise-categories {
	margin: var(--spacing-sm) 0;
	padding: var(--spacing-xs) 0;
	border-top: var(--border-width) solid var(--border);
	border-bottom: var(--border-width) solid var(--border);
}

.categories-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-xs);
	margin-left: var(--spacing-sm);
}

.categories-list {
	font-size: 0.9rem;
	color: var(--brand);
	font-weight: 500;
}

/* Responsive Design for Filters */
@media screen and (max-width: 768px) {
	.filter-controls {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}

	.filter-group {
		min-width: auto;
	}

	.filter-group label {
		font-size: 0.85rem;
	}

	.filter-select {
		font-size: 0.9rem;
		padding: 0.625rem 0.875rem;
	}
}

@media screen and (max-width: 480px) {
	.promises-filters {
		padding: 1.5rem;
		margin-bottom: 2rem;
	}

	.filter-controls {
		gap: 1rem;
	}

	.filter-group label {
		font-size: 0.8rem;
		margin-bottom: 0.375rem;
	}

	.filter-select {
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
	}

	.promise-categories {
		margin: 0.5rem 0;
		padding: 0.375rem 0;
	}

	.categories-label {
		font-size: 0.75rem;
	}

	.categories-list {
		font-size: 0.85rem;
	}
}

.promises-tracker-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.promises-tracker {
	padding: 3rem 0;
}

.tracker-progress-section {
	margin-bottom: 3rem;
	text-align: center;
}

.progress-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--heading);
	margin: 0 0 2rem 0;
}

.progress-bar-container {
	max-width: 600px;
	margin: 0 auto 1rem auto;
}

.progress-bar {
	width: 100%;
	height: 30px;
	background: #e9ecef;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--brand) 0%, var(--alt-brand) 100%);
	transition: width 0.8s ease;
	border-radius: 15px;
}

.progress-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 600px;
	margin: 0 auto;
	font-size: 0.9rem;
	color: var(--text);
	font-weight: 500;
}

.progress-percentage {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--brand);
}

.progress-label {
	font-size: 0.85rem;
	color: #666;
}

.status-legend {
	margin-bottom: 3rem;
	padding: 2rem;
	background: #f8f9fa;
	border-radius: 12px;
	border: 1px solid #e9ecef;
}

.status-legend h3 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--heading);
	margin: 0 0 1.5rem 0;
	text-align: center;
}

.legend-items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text);
}

.status-indicator {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	flex-shrink: 0;
}

.status-not-started { background: #9ca3af; }
.status-in-progress { background: #60a5fa; }
.status-partially-completed { background: #2ec0cf; }
.status-completed { background: #002b4b; }
.status-abandoned { background: #ef4444; }

.promises-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

.promise-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e9ecef;
	padding-bottom: var(--spacing-lg);
}

.promise-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.promise-header {
	padding: 1.5rem 1.5rem 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.promise-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--heading);
	margin: 0;
	line-height: 1.3;
	flex: 1;
}

.promise-status {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.375rem 0.75rem;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}

.promise-card.status-not-started .promise-status { background: #6c757d; color: #fff; }
.promise-card.status-in-progress .promise-status { background: #007bff; color: #fff; }
.promise-card.status-partially-completed .promise-status { background: #fd7e14; color: #fff; }
.promise-card.status-completed .promise-status { background: #28a745; color: #fff; }
.promise-card.status-abandoned .promise-status { background: #dc3545; color: #fff; }

.promise-content {
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	color: var(--text);
	line-height: 1.6;
}

.promise-content p {
	margin: 0 0 1rem 0;
}

.promise-content p:last-child {
	margin-bottom: 0;
}

.promise-content h2,
.promise-content h3,
.promise-content h4,
.promise-content h5,
.promise-content h6 {
	color: var(--heading);
	margin: 1.5rem 0 1rem 0;
	font-weight: 600;
}

.promise-content h2 { font-size: 1.4rem; }
.promise-content h3 { font-size: 1.3rem; }
.promise-content h4 { font-size: 1.2rem; }
.promise-content h5 { font-size: 1.1rem; }
.promise-content h6 { font-size: 1rem; }

.promise-content ul,
.promise-content ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.promise-content li {
	margin-bottom: 0.5rem;
}

.promise-content blockquote {
	border-left: 4px solid var(--brand);
	padding-left: 1rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--heading);
	background: rgba(7, 53, 85, 0.05);
	padding: 1rem;
	border-radius: 0 8px 8px 0;
}

.no-promises {
	text-align: center;
	padding: 3rem;
	background: #f8f9fa;
	border-radius: 12px;
	border: 1px solid #e9ecef;
}

.no-promises p {
	font-size: 1.1rem;
	color: #666;
	margin: 0;
}

/* Promise Progress Bar Shortcode */
.promise-progress-shortcode {
	margin: 2rem 0;
	text-align: center;
}

.promise-progress-shortcode .progress-subtitle {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--heading);
	margin: 0 0 1.5rem 0;
	text-align: center;
	font-family: var(--secondary-font);
}

.promise-progress-shortcode .progress-breakdown {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.promise-progress-shortcode .stacked-progress-container {
	position: relative;
	width: 100%;
	height: 40px;
	background: #e9ecef;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.promise-progress-shortcode .stacked-progress-bar {
	position: relative;
	width: 100%;
	height: 100%;
}

.promise-progress-shortcode .progress-segment {
	position: absolute;
	top: 0;
	height: 100%;
	transition: width 0.8s ease, left 0.8s ease;
	border-radius: 0;
}

.promise-progress-shortcode .progress-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 1rem;
}

.promise-progress-shortcode .legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text);
}

.promise-progress-shortcode .legend-color {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	flex-shrink: 0;
}

.promise-progress-shortcode .legend-text {
	white-space: nowrap;
}

/* Polimeter Link Button */
.promise-progress-shortcode .polimeter-link-container {
	text-align: center;
	margin-top: 2rem;
}

.promise-progress-shortcode .polimeter-link-btn {
	display: inline-block;
	padding: var(--button-padding-y) var(--button-padding-x);
	background: var(--brand);
	color: var(--white);
	text-decoration: none;
	border-radius: var(--radius);
	font-weight: 600;
	font-family: var(--primary-font);
	transition: all var(--transition-fast);
	box-shadow: 0 2px 8px rgba(0, 43, 75, 0.3);
}

.promise-progress-shortcode .polimeter-link-btn:hover,
.promise-progress-shortcode .polimeter-link-btn:focus {
	background: var(--alt-brand);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(46, 192, 207, 0.3);
	text-decoration: none;
}

/* Responsive Design for Promise Progress Shortcode */
@media screen and (max-width: 768px) {
	.promise-progress-shortcode .progress-breakdown {
		gap: 1rem;
	}

	.promise-progress-shortcode .stacked-progress-container {
		height: 35px;
	}

	.promise-progress-shortcode .progress-legend {
		gap: 0.75rem;
		margin-top: 0.75rem;
	}

	.promise-progress-shortcode .legend-item {
		font-size: 0.85rem;
		gap: 0.375rem;
	}

	.promise-progress-shortcode .legend-color {
		width: 14px;
		height: 14px;
	}

	.promise-progress-shortcode .legend-text {
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 480px) {
	.promise-progress-shortcode .progress-breakdown {
		gap: 0.75rem;
	}

	.promise-progress-shortcode .stacked-progress-container {
		height: 30px;
	}

	.promise-progress-shortcode .progress-legend {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.promise-progress-shortcode .legend-item {
		font-size: 0.8rem;
		justify-content: center;
	}

	.promise-progress-shortcode .legend-color {
		width: 12px;
		height: 12px;
	}

	.promise-progress-shortcode .legend-text {
		font-size: 0.8rem;
	}
}

/* Responsive Design for Promises Tracker */
@media screen and (max-width: 1024px) {
	.promises-list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	.promises-tracker-container {
		padding: 0 1rem;
	}

	.promises-tracker {
		padding: 2rem 0;
	}

	.tracker-progress-section {
		margin-bottom: 2rem;
	}

	.progress-title {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.progress-bar-container {
		max-width: 100%;
	}

	.progress-text {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}

	.progress-percentage {
		font-size: 1rem;
	}

	.progress-label {
		font-size: 0.8rem;
	}

	.status-legend {
		padding: 1.5rem;
		margin-bottom: 2rem;
	}

	.status-legend h3 {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.legend-items {
		gap: 1rem;
	}

	.legend-item {
		font-size: 0.85rem;
		gap: 0.5rem;
	}

	.status-indicator {
		width: 16px;
		height: 16px;
	}

	.promises-list {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.promise-header {
		padding: 1.25rem 1.25rem 0 1.25rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.promise-title {
		font-size: 1.1rem;
	}

	.promise-status {
		font-size: 0.8rem;
		padding: 0.25rem 0.5rem;
		align-self: flex-start;
	}

	.promise-content {
		padding: 0.75rem 1.25rem 1.25rem 1.25rem;
		font-size: 0.9rem;
	}

	.promise-content h2 { font-size: 1.2rem; }
	.promise-content h3 { font-size: 1.1rem; }
	.promise-content h4 { font-size: 1rem; }
}

@media screen and (max-width: 480px) {
	.promises-tracker-container {
		padding: 0 1rem;
	}

	.promises-tracker {
		padding: 1.5rem 0;
	}

	.tracker-progress-section {
		margin-bottom: 1.5rem;
	}

	.progress-title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.status-legend {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}

	.status-legend h3 {
		font-size: 1.1rem;
		margin-bottom: 0.75rem;
	}

	.legend-items {
		flex-direction: column;
		gap: 0.75rem;
		align-items: center;
	}

	.legend-item {
		font-size: 0.8rem;
		justify-content: center;
	}

	.promises-list {
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.promise-header {
		padding: 1rem 1rem 0 1rem;
	}

	.promise-title {
		font-size: 1rem;
	}

	.promise-status {
		font-size: 0.75rem;
		padding: 0.2rem 0.4rem;
	}

	.promise-content {
		padding: 0.5rem 1rem 1rem 1rem;
		font-size: 0.85rem;
	}

	.promise-content h2 { font-size: 1.1rem; }
	.promise-content h3 { font-size: 1rem; }
	.promise-content h4 { font-size: 0.95rem; }

	.no-promises {
		padding: 2rem 1rem;
	}

	.no-promises p {
		font-size: 1rem;
	}
}

/* Promise Links */
.promise-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.promise-link:hover {
	color: var(--brand);
}

/* Progress Breakdown */
.progress-breakdown {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.stacked-progress-container {
	position: relative;
	width: 100%;
	height: 40px;
	background: #e9ecef;
	border-radius: 0;
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stacked-progress-bar {
	position: relative;
	width: 100%;
	height: 100%;
}

.progress-segment {
	position: absolute;
	top: 0;
	height: 100%;
	transition: width 0.8s ease, left 0.8s ease;
	border-radius: 0;
}

/* Progress Legend */
.progress-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 1rem;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text);
}

.legend-color {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	flex-shrink: 0;
}

.legend-text {
	white-space: nowrap;
}

/* Responsive Progress Breakdown */
@media screen and (max-width: 768px) {
	.progress-breakdown {
		gap: 1rem;
	}

	.stacked-progress-container {
		height: 35px;
	}

	.progress-legend {
		gap: 0.75rem;
		margin-top: 0.75rem;
	}

	.legend-item {
		font-size: 0.85rem;
		gap: 0.375rem;
	}

	.legend-color {
		width: 14px;
		height: 14px;
	}

	.legend-text {
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 480px) {
	.progress-breakdown {
		gap: 0.75rem;
	}

	.stacked-progress-container {
		height: 30px;
	}

	.progress-legend {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.legend-item {
		font-size: 0.8rem;
		justify-content: center;
	}

	.legend-color {
		width: 12px;
		height: 12px;
	}

.legend-text {
	font-size: 0.8rem;
}

/* Complete Program Banner
--------------------------------------------- */

.complete-program-banner {
	padding: 2rem 0;
	display: flex !important;
	justify-content: center !important;
	background: var(--alt-bg);
	margin-bottom: 2rem;
}

.program-content-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
	text-align: center !important;
}

.program-image-container {
	margin-bottom: 2rem;
	text-align: center;
}

.program-image-link {
	display: inline-block;
	margin: 0 auto;
	transition: transform 0.3s ease;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.program-image-link:hover {
	transform: scale(1.02);
}

.program-image {
	width: 100%;
	max-width: 250px;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.program-download-container {
	margin-top: 1rem;
}

.program-download-btn {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--brand);
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 43, 75, 0.3);
	border: 2px solid var(--brand);
}

.program-download-btn:hover,
.program-download-btn:focus {
	background: var(--alt-brand);
	border-color: var(--alt-brand);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(46, 192, 207, 0.3);
	text-decoration: none;
}

/* Responsive Complete Program Banner */
@media screen and (max-width: 768px) {
	.complete-program-banner {
		padding: 1.5rem 0;
		margin-bottom: 1.5rem;
	}

	.program-content-wrapper {
		padding: 0 1rem;
	}

	.program-image {
		max-width: 100%;
	}

	.program-download-btn {
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
	}
}

@media screen and (max-width: 480px) {
	.complete-program-banner {
		padding: 1rem 0;
		margin-bottom: 1rem;
	}

	.program-content-wrapper {
		padding: 0 1rem;
	}

	.program-download-btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.9rem;
		width: 100%;
		max-width: 280px;
	}
}

/* Member Page Template Styles
--------------------------------------------- */

.member-page .entry-content .wp-block-image:first-child {
	margin-bottom: 2rem;
	text-align: center;
}

.member-page .entry-content .wp-block-image:first-child img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.member-page .entry-content .wp-block-columns {
	margin-bottom: 2rem;
}

.member-page .entry-content .wp-block-columns .wp-block-column {
	padding: 1rem;
}

.member-page .entry-content .wp-block-columns .wp-block-column:first-child .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.member-page .entry-content .wp-block-columns .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.member-page .entry-content .wp-block-columns .wp-block-column:last-child .wp-block-paragraph {
	margin-bottom: 1rem;
	line-height: 1.6;
	color: var(--text);
}

.member-page .entry-content .wp-block-buttons {
	text-align: center;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid #e9ecef;
}

.member-page .entry-content .wp-block-buttons .wp-block-button {
	margin: 0 1rem;
}

.member-page .entry-content .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 43, 75, 0.3);
}

.member-page .entry-content .wp-block-buttons .wp-block-button .wp-block-button__link:hover,
.member-page .entry-content .wp-block-buttons .wp-block-button .wp-block-button__link:focus {
	background: var(--alt-brand);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(46, 192, 207, 0.3);
}

/* Responsive Member Page */
@media screen and (max-width: 768px) {
	.member-page .entry-content .wp-block-image:first-child img {
		max-height: 250px;
	}

	.member-page .entry-content .wp-block-columns .wp-block-column {
		padding: 0.5rem;
	}

	.member-page .entry-content .wp-block-columns .wp-block-column:first-child .wp-block-image img {
		max-width: 200px;
		margin: 0 auto;
		display: block;
	}

	.member-page .entry-content .wp-block-buttons .wp-block-button {
		margin: 0.5rem 0;
		display: block;
		width: 100%;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}

	.member-page .entry-content .wp-block-buttons .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 480px) {
	.member-page .entry-content .wp-block-image:first-child img {
		max-height: 200px;
		border-radius: 4px;
	}

	.member-page .entry-content .wp-block-columns .wp-block-column:first-child .wp-block-image img {
		max-width: 150px;
	}

	.member-page .entry-content .wp-block-buttons .wp-block-button .wp-block-button__link {
		padding: 0.625rem 1rem;
		font-size: 0.9rem;
	}
}
}