/*!
Theme Name: pramana
Author: krahman
Author URI: https://mikanalabs.com
Description: A staffing agency WordPress theme focused on recruitment and talent placement across Southeast Asia. Clean, classic theme with Customizer options for the hero, footer, logo, and menus.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pramana
Tags: one-column, 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.

pramana 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/
*/

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

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


/* ==========================================================================
   1. LOCAL FONT FACE DECLARATIONS (@font-face)
   ========================================================================== */

/* Plus Jakarta Sans (Regular & Bold) */
@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('assets/fonts/plus-jakarta-sans-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('assets/fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Roboto (Regular & Bold) */
@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Material Symbols Outlined Icon Font */
@font-face {
	font-family: 'Material Symbols Outlined';
	src: url('assets/fonts/material-symbols-outlined.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: block;
}


:root {
	/* ------------------------------------------------------------------------
     1. RAW / PRIMITIVE TOKENS (Base palette, typography, spacing & values)
     ------------------------------------------------------------------------ */
	/* Color Palette - Slate Scale */
	--raw-color-slate-950: #020617;
	--raw-color-slate-900: #0F172A;
	--raw-color-slate-800: #1E293B;
	--raw-color-slate-700: #334155;
	--raw-color-slate-600: #475569;
	--raw-color-slate-500: #64748B;
	--raw-color-slate-400: #94A3B8;
	--raw-color-slate-300: #CBD5E1;
	--raw-color-slate-200: #E2E8F0;
	--raw-color-slate-100: #F1F5F9;
	--raw-color-slate-50: #F8FAFC;
	--raw-color-white: #FFFFFF;

	/* Color Palette - Gold / Accent Scale */
	--raw-color-gold-400: #FFD700;
	--raw-color-gold-300: #FACC15;
	--raw-color-gold-600: #CA8A04;

	/* Color Palette - Blue Scale */
	--raw-color-blue-600: #2563EB;
	--raw-color-blue-700: #1D4ED8;

	/* Typography Font Families */
	--raw-font-jakarta: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--raw-font-roboto: 'Roboto', sans-serif;
	--raw-font-icons: 'Material Symbols Outlined';

	/* Typography Scale */
	--raw-font-size-xs: 0.7rem;
	--raw-font-size-sm: 0.75rem;
	--raw-font-size-base: 0.85rem;
	--raw-font-size-md: 1rem;
	--raw-font-size-lg: 1.25rem;
	--raw-font-size-xl: 1.4rem;
	--raw-font-size-2xl: 1.75rem;
	--raw-font-size-3xl: 2.6rem;

	/* Spacing Scale */
	--raw-space-1: 4px;
	--raw-space-2: 8px;
	--raw-space-3: 12px;
	--raw-space-4: 16px;
	--raw-space-5: 20px;
	--raw-space-6: 24px;
	--raw-space-8: 32px;
	--raw-space-10: 40px;

	/* Border Radii */
	--raw-radius-sm: 2px;
	--raw-radius-md: 4px;
	--raw-radius-lg: 8px;
	--raw-radius-full: 9999px;

	/* Elevation / Shadows */
	--raw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--raw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--raw-shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.12);
	--raw-shadow-gold: 0 2px 8px rgba(255, 215, 0, 0.3);

	/* Layout Dimensions */
	--raw-container-max-width: 1140px;

	/* ------------------------------------------------------------------------
     2. SEMANTIC TOKENS (Role-based & contextual design decisions)
     ------------------------------------------------------------------------ */
	/* Background Semantics */
	--sem-color-bg-body: var(--raw-color-slate-50);
	--sem-color-bg-surface: var(--raw-color-white);
	--sem-color-bg-surface-dark: var(--raw-color-slate-900);
	--sem-color-bg-surface-subtle: var(--raw-color-slate-100);

	/* Text Semantics */
	--sem-color-text-primary: var(--raw-color-slate-900);
	--sem-color-text-secondary: var(--raw-color-slate-600);
	--sem-color-text-muted: var(--raw-color-slate-400);
	--sem-color-text-inverse: var(--raw-color-slate-50);
	--sem-color-text-on-accent: var(--raw-color-slate-900);

	/* Brand / Accent Semantics */
	--sem-color-brand-primary: var(--raw-color-slate-900);
	--sem-color-brand-secondary: var(--raw-color-blue-600);
	--sem-color-accent: var(--raw-color-gold-400);
	--sem-color-accent-hover: var(--raw-color-gold-300);
	--sem-color-accent-dark: var(--raw-color-gold-600);

	/* Border Semantics */
	--sem-color-border-subtle: var(--raw-color-slate-200);
	--sem-color-border-default: var(--raw-color-slate-300);
	--sem-color-border-dark: var(--raw-color-slate-700);

	/* Notification Semantics */
	--sem-color-success-text: #166534;
	--sem-color-success-icon: #16A34A;
	--sem-color-warning-text: #854D0E;
	--sem-color-warning-icon: #CA8A04;
	--sem-color-danger-text: #991B1B;
	--sem-color-danger-icon: #DC2626;
	--sem-color-info-text: #1E40AF;
	--sem-color-info-icon: #2563EB;

	/* Typography Semantics */
	--sem-font-body: var(--raw-font-jakarta);
	--sem-font-heading: var(--raw-font-roboto);
	--sem-font-serif: var(--raw-font-roboto);
	--sem-font-icon: var(--raw-font-icons);

	/* Shape & Elevation Semantics */
	--sem-radius-sm: var(--raw-radius-sm);
	--sem-radius-md: var(--raw-radius-md);
	--sem-radius-lg: var(--raw-radius-lg);

	--sem-elevation-low: var(--raw-shadow-sm);
	--sem-elevation-medium: var(--raw-shadow-md);
	--sem-elevation-high: var(--raw-shadow-lg);

	/* ------------------------------------------------------------------------
     3. COMPONENT TOKENS (Scoped component implementation variables)
     ------------------------------------------------------------------------ */
	/* Site Header Component */
	--comp-header-bg: var(--sem-color-bg-surface-dark);
	--comp-header-nav-bg: var(--raw-color-slate-800);
	--comp-header-text: var(--sem-color-text-inverse);
	--comp-header-muted: var(--sem-color-text-muted);
	--comp-header-badge-bg: var(--sem-color-accent);
	--comp-header-badge-text: var(--sem-color-text-on-accent);
	--comp-header-nav-link: var(--raw-color-slate-400);
	--comp-header-nav-link-active: var(--sem-color-accent);

	/* Card Component */
	--comp-card-bg: var(--sem-color-bg-surface);
	--comp-card-border: var(--sem-color-border-subtle);
	--comp-card-radius: var(--sem-radius-lg);
	--comp-card-shadow: var(--sem-elevation-low);
	--comp-card-dark-bg: var(--sem-color-bg-surface-dark);
	--comp-card-dark-border: var(--sem-color-border-dark);

	/* Notification / Banner Component Tokens */
	--comp-notification-radius: var(--sem-radius-md);
	--comp-notification-padding: var(--raw-space-4);
	--comp-notification-shadow: var(--sem-elevation-low);

	--comp-notification-ok-bg: var(--sem-color-bg-surface);
	--comp-notification-ok-border: var(--sem-color-border-subtle);
	--comp-notification-ok-text: var(--sem-color-success-text);
	--comp-notification-ok-icon: var(--sem-color-success-icon);

	--comp-notification-warning-bg: var(--sem-color-bg-surface);
	--comp-notification-warning-border: var(--sem-color-border-subtle);
	--comp-notification-warning-text: var(--sem-color-warning-text);
	--comp-notification-warning-icon: var(--sem-color-warning-icon);

	--comp-notification-alert-bg: var(--sem-color-bg-surface);
	--comp-notification-alert-border: var(--sem-color-border-subtle);
	--comp-notification-alert-text: var(--sem-color-danger-text);
	--comp-notification-alert-icon: var(--sem-color-danger-icon);

	--comp-notification-info-bg: var(--sem-color-bg-surface);
	--comp-notification-info-border: var(--sem-color-border-subtle);
	--comp-notification-info-text: var(--sem-color-info-text);
	--comp-notification-info-icon: var(--sem-color-info-icon);

	/* Search Form Component Tokens */
	--comp-search-input-bg: var(--sem-color-bg-surface);
	--comp-search-input-border: var(--sem-color-border-default);
	--comp-search-input-focus-border: var(--sem-color-brand-secondary);
	--comp-search-btn-bg: var(--sem-color-bg-surface);
	--comp-search-btn-border: var(--sem-color-border-default);
	--comp-search-btn-hover: var(--raw-color-slate-100);
	--comp-search-btn-hover-border: var(--sem-color-border-default);
	--comp-search-btn-text: var(--sem-color-text-primary);

	/* Button Component */
	--comp-btn-primary-bg: var(--sem-color-accent);
	--comp-btn-primary-hover: var(--sem-color-accent-hover);
	--comp-btn-primary-text: var(--sem-color-text-on-accent);
	--comp-btn-radius: var(--sem-radius-sm);

	/* Pagination Component */
	--comp-pagination-btn-bg: var(--sem-color-bg-surface);
	--comp-pagination-btn-border: var(--sem-color-border-subtle);
	--comp-pagination-btn-active-bg: var(--sem-color-brand-primary);
	--comp-pagination-btn-active-text: var(--sem-color-accent);

	/* Badge & Tag Components */
	--comp-badge-bg: var(--sem-color-accent);
	--comp-badge-text: var(--sem-color-text-on-accent);
	--comp-tag-bg: var(--raw-color-slate-100);
	--comp-tag-text: var(--sem-color-text-secondary);

	/* ------------------------------------------------------------------------
     4. BACKWARDS COMPATIBILITY ALIASES (Legacy variable mappings)
     ------------------------------------------------------------------------ */
	--color-header-bg: var(--comp-header-bg);
	--color-header-nav-bg: var(--comp-header-nav-bg);
	--color-header-text: var(--comp-header-text);
	--color-header-muted: var(--comp-header-muted);

	--color-accent-gold: var(--sem-color-accent);
	--color-accent-gold-hover: var(--sem-color-accent-hover);
	--color-accent-gold-dark: var(--sem-color-accent-dark);

	--color-body-bg: var(--sem-color-bg-body);
	--color-card-bg: var(--comp-card-bg);
	--color-card-border: var(--comp-card-border);
	--color-card-dark-bg: var(--comp-card-dark-bg);
	--color-card-dark-border: var(--comp-card-dark-border);

	--color-text-primary: var(--sem-color-text-primary);
	--color-text-secondary: var(--sem-color-text-secondary);
	--color-text-muted: var(--sem-color-text-muted);

	--color-primary-blue: var(--sem-color-brand-primary);
	--color-secondary-blue: var(--sem-color-brand-secondary);

	--font-family-base: var(--sem-font-body);
	--font-family-heading: var(--sem-font-heading);
	--font-family-serif: var(--sem-font-serif);

	--container-max-width: var(--raw-container-max-width);
	--border-radius-sm: var(--sem-radius-sm);
	--border-radius-md: var(--sem-radius-md);
	--border-radius-lg: var(--sem-radius-lg);
	--shadow-sm: var(--sem-elevation-low);
	--shadow-md: var(--sem-elevation-medium);
	--shadow-lg: var(--sem-elevation-high);
}

.material-symbols-outlined {
	font-family: var(--sem-font-icon);
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

/* 2. Reset & Core Typography */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family-base);
	background-color: var(--color-body-bg);
	color: var(--color-text-primary);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

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

/* Serif & Flair Utility Classes */
.font-serif {
	font-family: var(--font-family-serif);
}

.italic-flair {
	font-style: italic;
	font-family: var(--font-family-serif);
	color: var(--color-text-secondary);
}

.uppercase-tracking {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-text-muted);
}


/* 3. Utility Container */
.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Site Wrapper */
#site,
.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#site>main,
.site>main {
	flex: 1 0 auto;
}


/* 4. Top Header & Navigation Bar (Artistic Flair Theme) */
.site-header {
	background-color: var(--color-header-bg);
	color: var(--color-header-text);
	border-bottom: 2px solid var(--raw-color-slate-800);
	position: relative;
	z-index: 10;
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-branding,
.brand-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.custom-logo {
	height: 48px;
	width: auto;
	max-width: 200px;
	display: block;
	object-fit: contain;
}

.logo-badge {
	background-color: var(--color-accent-gold);
	color: var(--sem-color-text-on-accent);
	padding: 8px 12px;
	border-radius: var(--border-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.25rem;
	letter-spacing: -0.5px;
	box-shadow: var(--raw-shadow-gold);
}

.logo-badge svg,
.logo-badge .material-symbols-outlined {
	font-size: 24px;
	width: 24px;
	height: 24px;
	margin-right: 6px;
	color: var(--sem-color-text-on-accent);
}

.brand-text-container {
	display: flex;
	flex-direction: column;
}

.site-title,
.brand-title {
	font-family: var(--font-family-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--comp-header-text);
	letter-spacing: -0.3px;
	line-height: 1.15;
	text-decoration: none;
	display: block;
}

.site-description,
.brand-tagline {
	font-size: 0.75rem;
	color: var(--color-header-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-top: 2px;
	display: block;
}

/* Nav Sub-bar */
.header-nav-bar {
	background-color: var(--color-header-nav-bg);
	padding: 6px 0;
}

.main-navigation,
.main-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.menu-toggle,
.menu-togle {
	display: none;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--comp-header-text);
	padding: 6px 14px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all 0.2s ease;
}

.menu-toggle:hover,
.menu-togle:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--color-accent-gold);
}

.hamburger-icon {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 18px;
}

.hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--comp-header-text);
	border-radius: 1px;
	transition: all 0.3s ease;
}

.nav-list {
	display: flex;
	list-style: none;
	gap: 8px;
}

.menu-item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--comp-header-nav-link);
	border-radius: var(--border-radius-sm);
	transition: all 0.2s ease;
}

.menu-item a:hover {
	color: var(--comp-header-text);
	background-color: rgba(255, 255, 255, 0.05);
}

.menu-item.current-menu-item a {
	color: var(--comp-header-text);
	border-bottom: 2px solid var(--color-accent-gold);
	border-radius: 0;
	padding-bottom: 6px;
}

/* 5. Hero Banner Section (Page 1) */
.hero-section {
	padding: 40px 0 52px 0;
	background: linear-gradient(180deg, var(--raw-color-slate-900) 0%, var(--raw-color-slate-800) 240px, var(--color-body-bg) 240px);
}

.hero-card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--color-card-border);
	box-shadow: var(--shadow-lg);
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	align-items: center;
}

/* Polaroid image styling */
.polaroid-frame {
	background: var(--raw-color-white);
	padding: 12px 12px 22px 12px;
	box-shadow: var(--shadow-polaroid);
	border: 1px solid var(--raw-color-slate-200);
	border-radius: 2px;
	transform: rotate(-1.5deg);
	transition: border-color 0.2s ease;
}

.polaroid-frame:hover {
	border-color: var(--raw-color-slate-300);
}

.polaroid-img {
	width: 100%;
	height: 290px;
	object-fit: cover;
	border: 1px solid var(--raw-color-slate-100);
	display: block;
}

.polaroid-caption {
	margin-top: 12px;
	text-align: center;
	font-family: var(--font-family-serif);
	font-style: italic;
	color: var(--color-text-secondary);
	font-size: 0.85rem;
}

.hero-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-badge {
	display: inline-block;
	color: var(--color-secondary-blue);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
}

.hero-headline {
	font-family: var(--font-family-heading);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.15;
	margin-bottom: 18px;
	letter-spacing: -0.5px;
}

.hero-headline .italic-word {
	font-style: italic;
	color: var(--color-text-secondary);
	font-weight: 400;
}

.hero-subheadline {
	font-size: 1rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 28px;
}

/* Highlight Primary CTA Button (Gold Artistic Flair Style) */
.btn-primary-highlight {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: var(--color-accent-gold);
	color: var(--sem-color-text-on-accent);
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 12px 24px;
	border-radius: var(--border-radius-sm);
	border: none;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: background-color 0.15s ease;
	width: fit-content;
}

.btn-primary-highlight:hover {
	background-color: var(--color-accent-gold-hover);
}

.btn-primary-highlight svg {
	width: 18px;
	height: 18px;
}

/* Secondary Button Style */
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--raw-color-slate-100);
	color: var(--raw-color-slate-700);
	border: 1px solid var(--raw-color-slate-300);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 10px 18px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-secondary:hover {
	background-color: var(--raw-color-slate-200);
	color: var(--raw-color-slate-900);
}


/* 6. Insights Section (3 Minimal Cards matching reference design with theme colors) */
.insights-section {
	padding: 30px 0 20px 0;
	background-color: var(--color-body-bg);
}

.insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.insight-card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-md);
	border: 1px solid var(--color-card-border);
	border-top: 4px solid var(--color-primary-blue);
	padding: 28px 24px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.insight-card:hover {
	border-color: var(--sem-color-border-default);
	border-top-color: var(--color-primary-blue);
	box-shadow: var(--shadow-md);
}

.insight-title {
	font-family: var(--font-family-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-primary-blue);
	line-height: 1.35;
	margin-bottom: 16px;
}

.insight-card-content p {
	color: var(--color-text-secondary);
	font-size: 0.925rem;
	line-height: 1.6;
	margin-bottom: 24px;
}

.insight-card-footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--sem-color-bg-surface-subtle);
}

.insight-link {
	color: var(--color-secondary-blue);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.insight-link:hover {
	color: var(--raw-color-blue-700);
	text-decoration: underline;
}

.insight-date {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.insight-date a:hover {
	color: var(--raw-color-blue-700);
	text-decoration: underline;
}

/* ==========================================================================
   Page Title & Entry Meta Styling
   ========================================================================== */

/* Header Meta Layout */
.page-title-meta {
	display: flex;
	flex-direction: column;
	gap: var(--raw-space-3);
	margin-top: var(--raw-space-2);
}

.page-title-meta p {
	color: var(--color-text-secondary);
	font-size: var(--raw-font-size-base);
	margin-bottom: 0;
}

/* Horizontal Entry Meta - Guided by .insight-date styling */
.page-title-meta .entry-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: var(--raw-space-1);
}

/* Links & Interactive Elements */
.page-title-meta .entry-meta a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.page-title-meta .entry-meta a:hover {
	color: var(--raw-color-blue-700);
	text-decoration: underline;
}

/* Separator Dot Styling */
.page-title-meta .meta-sep {
	color: var(--sem-color-border-default);
	font-weight: 400;
	user-select: none;
}

/* 7. Client & Generic Page Headers */
.client-page-header,
.page-header {
	padding: 32px 0 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid var(--color-card-border);
	margin-bottom: 24px;
}

/* Generic Content Feed Section (Reusable across pages) */
.content-feed-section {
	padding: 12px 0 20px 0;
}

.content-feed-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.feed-item-card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--color-card-border);
	padding: 32px;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feed-item-card:hover {
	border-color: var(--sem-color-border-default);
	box-shadow: var(--shadow-md);
}

.feed-item-title {
	font-family: var(--font-family-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary-blue);
	margin-bottom: 8px;
	line-height: 1.25;
}

.feed-item-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.feed-item-title a:hover {
	color: #0284C7;
}

.feed-item-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sem-color-bg-surface-subtle);
}

.meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.meta-category-badge {
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.feed-item-body {
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	line-height: 1.7;
}

.feed-item-body p {
	margin-bottom: 14px;
}

.feed-item-body p:last-child {
	margin-bottom: 0;
}

.feed-item-body strong {
	color: var(--color-text-primary);
	font-weight: 700;
}

/* ==========================================================================
   Entry Footer Styling
   ========================================================================== */

.entry-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--raw-space-3);
	margin-top: var(--raw-space-8);
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-xs);
	color: var(--sem-color-text-muted);
}

/* Links inside entry footer (Categories, Tags, Edit links) */
.entry-footer a {
	color: var(--sem-color-text-secondary);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.entry-footer a:hover {
	color: var(--sem-color-brand-secondary);
	text-decoration: underline;
}

/* Category & Tag links if outputted as meta spans */
.entry-footer .cat-links,
.entry-footer .tags-links,
.entry-footer .comments-link,
.entry-footer .edit-link {
	display: inline-flex;
	align-items: center;
	gap: var(--raw-space-2);
}

/* Optional separation when meta items sit side-by-side */
.entry-footer>span:not(:last-child)::after {
	content: "•";
	margin-left: var(--raw-space-3);
	color: var(--sem-color-border-default);
}

/* Navigation (Posts Pagination & Single Post Navigation) */
.posts-navigation,
.post-navigation {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}

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

.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* Push 'Next' / 'Newer posts' to the right if 'Previous' isn't visible */
.posts-navigation .nav-next:only-child,
.post-navigation .nav-next:only-child {
	margin-left: auto;
}

/* Base Link Button Styles */
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-primary);
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	font-family: var(--font-family-base);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px 20px;
	border-radius: var(--border-radius-sm);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
	text-decoration: none;
}

/* Hover States */
.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover,
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	background-color: var(--sem-color-bg-surface-subtle);
	border-color: var(--sem-color-border-default);
	color: var(--sem-color-text-primary);
}

/* Layout inner titles cleanly inside single post buttons */
.post-navigation .nav-subtitle {
	margin-right: 6px;
	opacity: 0.75;
}

.post-navigation .nav-title {
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.single-blog-page {
	font-size: 1rem;
	line-height: 1.7;
	margin: 1rem 0 3rem 0;
}

/* Headings Hierarchy inside Post Content */
.single-blog-page h1,
.single-blog-page h2,
.single-blog-page h3,
.single-blog-page h4,
.single-blog-page h5,
.single-blog-page h6 {
	font-family: var(--sem-font-heading, inherit);
	font-weight: 700;
	color: var(--sem-color-text-primary, var(--raw-color-slate-800));
	line-height: 1.3;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

/* Specific Sizes */
.single-blog-page h1 {
	font-size: 1.5rem;
}

.single-blog-page h2 {
	font-size: 1.25rem;
}

.single-blog-page h3 {
	font-size: 1.1rem;
}

.single-blog-page h4 {
	font-size: 1rem;
}

.single-blog-page h5 {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.single-blog-page h6 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sem-color-text-muted, var(--raw-color-slate-500));
}

.single #primary,
body.single-post main.container {
	padding-bottom: 60px;
}

/* 10. Footer */
.site-footer {
	margin-top: auto;
	background-color: var(--color-header-bg);
	color: var(--color-header-muted);
	border-top: 1px solid var(--raw-color-slate-800);
	padding: 40px 0;
	font-size: 0.75rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 36px;
	margin-bottom: 0;
}

.footer-col-title {
	font-family: var(--font-family-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--comp-header-text);
	margin-bottom: 10px;
	letter-spacing: -0.2px;
}

.footer-col-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--comp-header-text);
	margin-bottom: 12px;
}

.footer-desc {
	font-size: 0.825rem;
	color: var(--color-header-muted);
	line-height: 1.65;
	text-transform: none;
	letter-spacing: normal;
	max-width: 460px;
}

.footer-address {
	font-size: 0.825rem;
	color: var(--color-header-muted);
	line-height: 1.65;
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}

.footer-nav-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
	padding: 0;
	margin: 0;
}

/* Reset global active state for footer links */
.footer-nav-list .current-menu-item a,
.footer-nav-list .menu-item.current-menu-item a {
	color: var(--color-header-muted);
	border-bottom: none;
	padding-bottom: 0;
	border-radius: initial;
}

.footer-nav-list .menu-item a {
	padding: 0;
}

/* Optional: Maintain hover state behavior for active items in footer */
.footer-nav-list .current-menu-item a:hover {
	color: var(--color-accent-gold);
	border-bottom: none;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--raw-color-slate-500);
}

/* ------------------------------------------------------------------------
   Search Form & Search Component
   ------------------------------------------------------------------------ */
.search-section {
	margin-bottom: var(--raw-space-6);
}

.blog-search-form {
	display: flex;
	gap: var(--raw-space-3);
	align-items: center;
	max-width: 680px;
}

.search-input-group {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}

.search-input-group .search-icon {
	position: absolute;
	left: 14px;
	color: var(--sem-color-text-muted);
	font-size: 20px;
	pointer-events: none;
}

.search-input {
	width: 100%;
	padding: 12px 16px 12px 42px;
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-primary);
	background-color: var(--comp-search-input-bg);
	border: 1px solid var(--comp-search-input-border);
	border-radius: var(--sem-radius-md);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
	border-color: var(--comp-search-input-focus-border);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--raw-space-2);
	background-color: var(--comp-btn-primary-bg);
	color: var(--comp-btn-primary-text);
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 10px 24px;
	border-radius: var(--comp-btn-radius);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.btn-search:hover {
	background-color: var(--comp-btn-primary-hover);
}

.btn-search:active {
	transform: translateY(1px);
}

/* ==========================================================================
   404 Page & Stacked Widget Section (Flat / Bordered)
   ========================================================================== */

/* Main Container Area */
.error-404.not-found .page-content {
	margin-top: var(--raw-space-10);
	padding-top: var(--raw-space-8);
	border-top: 1px solid var(--sem-color-border-subtle);
}

/* Individual Stacked Widget */
.error-404 .widget {
	padding-bottom: var(--raw-space-6);
	margin-bottom: var(--raw-space-6);
	border-bottom: 1px solid var(--sem-color-border-subtle);
	background: transparent;
	box-shadow: none;
}

.error-404 .widget:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Widget Headings */
.error-404 .widget .widgettitle,
.error-404 .widget .widget-title {
	font-family: var(--sem-font-heading);
	font-size: var(--raw-font-size-xl);
	font-weight: 700;
	color: var(--sem-color-text-primary);
	margin-bottom: var(--raw-space-4);
	margin-top: 0;
	padding: 0;
	border: none;
}

/* General Text & Emojis */
.error-404 .widget p {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-secondary);
	line-height: 1.6;
	margin-bottom: var(--raw-space-3);
}

.error-404 .widget img.emoji {
	height: 1em;
	width: 1em;
	vertical-align: -0.1em;
}

/* Unordered Lists (Recent Posts & Categories) */
.error-404 .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.error-404 .widget ul li {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-muted);
	padding: var(--raw-space-2) 0;
	border-bottom: 1px dashed var(--sem-color-border-subtle);
}

.error-404 .widget ul li:last-child {
	border-bottom: none;
}

.error-404 .widget ul li a {
	color: var(--sem-color-text-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.error-404 .widget ul li a:hover {
	color: var(--sem-color-brand-secondary);
}

/* Dropdown (Archives) */
.error-404 .widget select {
	width: 100%;
	max-width: 320px;
	padding: 10px 14px;
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-primary);
	background-color: var(--sem-color-bg-surface);
	border: 1px solid var(--sem-color-border-default);
	border-radius: var(--sem-radius-md);
	outline: none;
	transition: border-color 0.2s ease;
}

.error-404 .widget select:focus {
	border-color: var(--sem-color-brand-secondary);
}

/* Tag Cloud (Flat Inline Tags) */
.error-404 .widget_tag_cloud .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--raw-space-2);
}

.error-404 .widget_tag_cloud .tag-cloud-link {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-xs) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sem-color-text-secondary);
	background: transparent;
	border: 1px solid var(--sem-color-border-default);
	padding: 4px 12px;
	border-radius: var(--sem-radius-md);
	text-decoration: none;
	transition: all 0.2s ease;
}

.error-404 .widget_tag_cloud .tag-cloud-link:hover {
	color: var(--sem-color-brand-secondary);
	border-color: var(--sem-color-brand-secondary);
}

/* Screen Reader Utility */
.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;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------------
   Notification Banners & Callout Alert Templates
   ------------------------------------------------------------------------ */
.notification-section {
	margin-bottom: var(--raw-space-8);
}

.notification-box {
	display: flex;
	align-items: flex-start;
	gap: var(--raw-space-4);
	padding: var(--comp-notification-padding);
	border-radius: var(--comp-notification-radius);
	border: 1px solid transparent;
	border-left-width: 5px;
	box-shadow: var(--comp-notification-shadow);
	margin-bottom: var(--raw-space-4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-box .notification-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.notification-box .notification-icon .material-symbols-outlined {
	font-size: 24px;
}

.notification-box .notification-content {
	flex: 1;
}

.notification-box .notification-title {
	font-family: var(--sem-font-heading);
	font-size: var(--raw-font-size-md);
	font-weight: 700;
	margin: 0 0 4px 0;
	line-height: 1.3;
}

.notification-box .notification-message {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	margin: 0;
	line-height: 1.5;
}

.notification-message a {
	text-decoration: underline;
}

/* Not Found / Error Banner */
.notification-notfound,
.notification-alert {
	background-color: var(--comp-notification-alert-bg);
	border-color: var(--comp-notification-alert-border);
	border-left-color: var(--comp-notification-alert-icon);
	color: var(--comp-notification-alert-text);
}

.notification-notfound .notification-icon,
.notification-alert .notification-icon {
	color: var(--comp-notification-alert-icon);
}

.notification-notfound .notification-title,
.notification-alert .notification-title {
	color: var(--comp-notification-alert-text);
}

/* OK / Success Banner */
.notification-ok {
	background-color: var(--comp-notification-ok-bg);
	border-color: var(--comp-notification-ok-border);
	border-left-color: var(--comp-notification-ok-icon);
	color: var(--comp-notification-ok-text);
}

.notification-ok .notification-icon {
	color: var(--comp-notification-ok-icon);
}

.notification-ok .notification-title {
	color: var(--comp-notification-ok-text);
}

/* Warning Banner */
.notification-warning {
	background-color: var(--comp-notification-warning-bg);
	border-color: var(--comp-notification-warning-border);
	border-left-color: var(--comp-notification-warning-icon);
	color: var(--comp-notification-warning-text);
}

.notification-warning .notification-icon {
	color: var(--comp-notification-warning-icon);
}

.notification-warning .notification-title {
	color: var(--comp-notification-warning-text);
}

/* Info Banner */
.notification-info {
	background-color: var(--comp-notification-info-bg);
	border-color: var(--comp-notification-info-border);
	border-left-color: var(--comp-notification-info-icon);
	color: var(--comp-notification-info-text);
}

.notification-info .notification-icon {
	color: var(--comp-notification-info-icon);
}

.notification-info .notification-title {
	color: var(--comp-notification-info-text);
}

/* Notification System Templates Section */
.notification-templates-section {
	margin-top: var(--raw-space-8);
	margin-bottom: var(--raw-space-10);
	padding-top: var(--raw-space-6);
	border-top: 1px dashed var(--sem-color-border-default);
}

.notification-templates-section .templates-header {
	margin-bottom: var(--raw-space-5);
}

.notification-templates-section .templates-header h2 {
	font-family: var(--sem-font-heading);
	font-size: var(--raw-font-size-xl);
	font-weight: 700;
	color: var(--sem-color-text-primary);
	margin: 0 0 6px 0;
}

.notification-templates-section .templates-header p {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-secondary);
	margin: 0;
}

.notification-templates-grid {
	display: flex;
	flex-direction: column;
	gap: var(--raw-space-3);
}

/* Notification Toast */
.toast-notification {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background-color: var(--sem-color-bg-surface-dark);
	color: var(--sem-color-text-inverse);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	z-index: 1000;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.toast-notification.show {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Comments Area Component (Simple & Flat Style)
   ========================================================================== */

.comments-area {
	margin-top: var(--raw-space-10);
	padding-top: var(--raw-space-8);
	border-top: 1px solid var(--sem-color-border-subtle);
}

/* Titles */
.comments-title,
.comment-reply-title {
	font-family: var(--sem-font-heading);
	font-size: var(--raw-font-size-xl);
	font-weight: 700;
	color: var(--sem-color-text-primary);
	margin-bottom: var(--raw-space-6);
}

.comments-title span {
	color: var(--sem-color-brand-secondary);
}

/* Comment List */
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--raw-space-10) 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--raw-space-6);
	margin-top: var(--raw-space-4);
	border-left: 2px solid var(--sem-color-border-subtle);
}

/* Flatter Comment Item (No Card Container) */
.comment-body {
	padding: var(--raw-space-4) 0;
	margin-bottom: var(--raw-space-4);
	border-bottom: 1px solid var(--sem-color-border-subtle);
	background: transparent;
	box-shadow: none;
}

/* Comment Header / Author Meta */
.comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--raw-space-3);
	margin-bottom: var(--raw-space-3);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--raw-space-3);
}

.comment-author .avatar {
	border-radius: var(--raw-radius-full);
}

.comment-author .fn {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	font-weight: 700;
	color: var(--sem-color-text-primary);
}

.comment-author .says {
	font-size: var(--raw-font-size-sm);
	color: var(--sem-color-text-muted);
}

.comment-metadata a {
	font-size: var(--raw-font-size-xs);
	color: var(--sem-color-text-muted);
}

.comment-metadata a:hover {
	color: var(--sem-color-brand-secondary);
}

/* Comment Content */
.comment-content {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-secondary);
	line-height: 1.6;
	margin-bottom: var(--raw-space-3);
}

.comment-content p {
	margin-bottom: var(--raw-space-2);
}

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

/* Reply Link */
.comment-reply-link {
	font-size: var(--raw-font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sem-color-brand-secondary);
	text-decoration: none;
}

.comment-reply-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Comment Reply Form (#respond - Simple & Flat)
   ========================================================================== */

.comment-respond {
	margin-top: var(--raw-space-8);
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

.comment-notes,
.required-field-message {
	font-size: var(--raw-font-size-xs);
	color: var(--sem-color-text-muted);
	margin-bottom: var(--raw-space-4);
}

.required {
	color: var(--sem-color-danger-icon);
}

.comment-form p {
	margin-bottom: var(--raw-space-4);
}

.comment-form label {
	display: block;
	font-size: var(--raw-font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sem-color-text-secondary);
	margin-bottom: var(--raw-space-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-primary);
	background-color: var(--sem-color-bg-surface);
	border: 1px solid var(--sem-color-border-default);
	border-radius: var(--sem-radius-md);
	outline: none;
	transition: border-color 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--sem-color-brand-secondary);
}

/* Cookie Consent Checkbox */
.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--raw-space-2);
}

.comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
}

.comment-form-cookies-consent label {
	display: inline;
	font-size: var(--raw-font-size-xs);
	text-transform: none;
	letter-spacing: normal;
	color: var(--sem-color-text-secondary);
	font-weight: 400;
}

/* Submit Button */
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--comp-btn-primary-bg);
	color: var(--comp-btn-primary-text);
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 10px 24px;
	border-radius: var(--comp-btn-radius);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.comment-form .submit:hover {
	background-color: var(--comp-btn-primary-hover);
}

/* Featured Thumbnail Container */
.post-thumbnail {
	display: block;
	width: 100%;
	margin-bottom: var(--raw-space-6);
	overflow: hidden;
	border-radius: var(--sem-radius-md);
	background-color: var(--sem-color-bg-surface-subtle);
	/* Neutral backdrop for transparent or small images */
}

.post-thumbnail a {
	display: block;
	width: 100%;
}

/* Image behavior for small and large images */
.post-thumbnail img {
	width: 100%;
	height: auto;
	max-height: 480px;
	/* Limits huge high-res images from taking over the entire viewport */
	object-fit: cover;
	/* Crops image neatly to fit without stretching aspect ratio */
	object-position: center;
	/* Keeps main subject centered */
	display: block;
	transition: transform 0.3s ease;
}

/* Optional subtle zoom effect on hover for card thumbnails */
.insight-card .post-thumbnail:hover img {
	transform: scale(1.02);
}

/* Main Sidebar Container */
#secondary.widget-area.container {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

/* Block Widget Headings */
#secondary .widget .wp-block-heading {
	font-family: var(--sem-font-heading);
	font-size: var(--raw-font-size-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sem-color-text-primary);
	margin-top: var(--raw-space-4);
	margin-bottom: var(--raw-space-3);
	padding: 0;
}

/* Search Form Block */
#secondary .wp-block-search__label {
	display: block;
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sem-color-text-secondary);
	margin-bottom: var(--raw-space-2);
}

#secondary .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--raw-space-2);
}

#secondary .wp-block-search__input {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-primary);
	background-color: var(--sem-color-bg-surface);
	border: 1px solid var(--sem-color-border-default);
	border-radius: var(--sem-radius-md);
	outline: none;
	transition: border-color 0.2s ease;
}

#secondary .wp-block-search__input:focus {
	border-color: var(--sem-color-brand-secondary);
}

#secondary .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--comp-btn-primary-bg);
	color: var(--comp-btn-primary-text);
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 10px 18px;
	border-radius: var(--comp-btn-radius);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

#secondary .wp-block-search__button:hover {
	background-color: var(--comp-btn-primary-hover);
}

/* Base Lists (Recent Posts, Archives, Categories) */
#secondary .widget ul,
#secondary .widget ol {
	list-style: none;
	padding: 0;
	margin: 0 0 0 1rem;
}

#secondary .widget ul li,
#secondary .widget ol li {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-md);
	color: var(--sem-color-text-muted);
	padding: var(--raw-space-1) 0;
	line-height: 1.5;
}

#secondary .widget ul li:last-child,
#secondary .widget ol li:last-child {
	border-bottom: none;
}

#secondary .widget a {
	color: var(--sem-color-text-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

#secondary .widget a:hover {
	color: var(--sem-color-brand-secondary);
}

/* Recent Comments Block Meta Styling */
#secondary .wp-block-latest-comments__comment-meta {
	font-family: var(--sem-font-body);
	font-size: var(--raw-font-size-base);
	color: var(--sem-color-text-muted);
}

#secondary .wp-block-latest-comments__comment-author {
	font-weight: 700;
	color: var(--sem-color-text-primary);
}

@media (max-width: 768px) {

	.site-branding,
	.brand-wrapper {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
	}

	.site-title,
	.brand-title {
		font-size: 1.2rem;
	}

	.custom-logo {
		height: 40px;
	}

	/* Stack the footer columns vertically on mobile */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	/* Stack the hero card on mobile (image on top, content below) */
	.hero-card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px;
	}

	.hero-headline {
		font-size: 1.9rem;
	}

	/* 3-column insights grid → 2 columns on tablet */
	.insights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.main-navigation,
	.main-nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.menu-toggle,
	.menu-togle {
		display: inline-flex;
		margin: 4px 0;
	}

	.main-navigation .nav-list,
	.main-nav .nav-list {
		display: none;
		flex-direction: column;
		width: 100%;
		margin-top: 8px;
		padding: 8px 0;
		gap: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.main-navigation.toggled .nav-list,
	.main-navigation.active .nav-list,
	.main-nav.toggled .nav-list,
	.main-nav.active .nav-list {
		display: flex;
	}
}

@media (max-width: 600px) {
	.table-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	/* Stack insights grid to a single column on phones */
	.insights-grid {
		grid-template-columns: 1fr;
	}

	/* Stacked Post & Archive Pagination for Mobile */
	.posts-navigation .nav-links,
	.post-navigation .nav-links {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.posts-navigation .nav-previous,
	.posts-navigation .nav-next,
	.post-navigation .nav-previous,
	.post-navigation .nav-next {
		width: 100%;
	}

	.posts-navigation .nav-previous a,
	.posts-navigation .nav-next a,
	.post-navigation .nav-previous a,
	.post-navigation .nav-next a {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.posts-navigation .nav-next:only-child,
	.post-navigation .nav-next:only-child {
		margin-left: 0;
	}
}