/*
 * Meta Store Design Override for GeneratePress
 * -------------------------------------------------------------
 * Inspired by Meta's "Dolly" design system layered on top of FDS.
 * Focus areas: global tokens, typography, navigation, footer,
 * buttons, cards, forms, and responsive rhythm.
 *
 * This file is loaded AFTER generate-style and neutemu-style so
 * declarations here win by source order. Selectors use theme-native
 * class names (main-navigation, inside-header, site-info, etc.) and
 * avoid !important wherever possible.
 */

/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
	/* Brand & interactive */
	--meta-blue:          #0064E0;
	--meta-blue-hover:    #0143B5;
	--meta-blue-pressed:  #004BB9;
	--meta-blue-light:    #47A5FA;
	--fb-blue:            #1877F2;
	--link-blue:          #385898;

	/* Product accents */
	--rayban-red:    #D6311F;
	--oculus-purple: #A121CE;
	--work-purple:   #6441D2;
	--portal-blue:   #1B365D;

	/* Surfaces */
	--surface-white:    #FFFFFF;
	--surface-soft:     #F1F4F7;
	--surface-warm:     #F7F8FA;
	--surface-wash:     #F0F2F5;
	--surface-linen:    #F2F0E6;
	--surface-baby:     #E8F3FF;
	--surface-near-black: #1C1E21;
	--surface-oculus-light: #181A1B;
	--surface-oculus-dark:  #000000;
	--surface-overlay:  rgba(0, 0, 0, 0.6);

	/* Text */
	--text-primary:   #050505;
	--text-charcoal:  #1C2B33;
	--text-icon-sec:  #465A69;
	--text-secondary: #65676B;
	--text-slate:     #5D6C7B;
	--text-section:   #4B4C4F;
	--text-button:    #444950;
	--text-disabled:  #BCC0C4;
	--text-cta-disabled: #8595A4;

	/* Lines */
	--line-divider:  #CED0D4;
	--line-divider-soft: #DEE3E9;
	--line-cta-border: #CBD2D9;
	--line-strong: #909396;

	/* Semantic */
	--semantic-success:  #31A24C;
	--semantic-success-dark: #007D1E;
	--semantic-error:    #E41E3F;
	--semantic-error-dark: #C80A28;
	--semantic-warning:  #F7B928;

	/* Spacing scale — 8px rhythm */
	--space-1:  1px;
	--space-2:  4px;
	--space-3:  8px;
	--space-4:  10px;
	--space-5:  12px;
	--space-6:  14px;
	--space-7:  16px;
	--space-8:  18px;
	--space-9:  24px;
	--space-10: 32px;
	--space-11: 40px;
	--space-12: 48px;
	--space-13: 64px;
	--space-14: 80px;

	/* Radius scale */
	--radius-sm:   8px;
	--radius-md:   20px;
	--radius-lg:   24px;
	--radius-pill: 100px;

	/* Elevation */
	--shadow-1: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	--shadow-2: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);

	/* Typography */
	--font-primary: "Optimistic VF", "Optimistic", "Montserrat", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
	--font-secondary: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Motion */
	--ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-slow: 300ms;

	/* Container */
	--container-max: 1440px;
	--container-pad: 24px;
}

@media (min-width: 1025px) {
	:root {
		--container-pad: 40px;
	}
}

/* GeneratePress variable overrides — these drive built-in theme styles */
:root {
	--accent:              #0064E0;
	--accent-hover:        #0143B5;
	--base:                #1C2B33;
	--base-2:              #65676B;
	--base-3:              #5D6C7B;
	--contrast:            #050505;
	--contrast-2:          #65676B;
	--contrast-3:          #F1F4F7;
	--body-background:     #FFFFFF;
	--site-background:     #FFFFFF;
	--global-borders:      #DEE3E9;
	--global-border-radius: 20px;
	--button-background:   #0064E0;
	--button-background-hover: #0143B5;
	--button-text:         #FFFFFF;
	--button-border-radius: 100px;
	--header-background:   rgba(241, 244, 247, 0.8);
	--footer-background:   #1C1E21;
	--footer-text:         #D7D9DC;
}

/* ============================================================
   2. Global Reset & Typography
   ============================================================ */
/* Reserve the scrollbar gutter at all times so pages that don't
 * overflow don't shift horizontally when a dropdown / modal forces
 * overflow. Without this, hovering a nav item with a tall submenu
 * can trigger a vertical scrollbar, which subtracts ~15px from the
 * viewport width, reflowing the whole page. */
html {
	scrollbar-gutter: stable;
}

body,
body.generate-content-header-alignment-inherit,
body.wp-custom-logo {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.44;
	letter-spacing: 0;
	color: var(--text-primary);
	background-color: var(--surface-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "ss02";
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
	font-family: var(--font-primary);
	color: var(--text-charcoal);
	font-weight: 500;
	letter-spacing: -0.01em;
	font-feature-settings: "ss01", "ss02";
}

h1, .entry-title, .page-title { font-size: 48px; line-height: 1.17; font-weight: 500; }
h2 { font-size: 36px; line-height: 1.28; font-weight: 500; }
h3 { font-size: 28px; line-height: 1.21; font-weight: 300; }
h4 { font-size: 18px; line-height: 1.44; font-weight: 700; }
h5 { font-size: 16px; line-height: 1.5;  font-weight: 500; letter-spacing: -0.01em; }
h6 { font-size: 14px; line-height: 1.43; font-weight: 700; text-transform: none; }

p { line-height: 1.6; color: var(--text-primary); margin-bottom: var(--space-9); }

a {
	color: var(--meta-blue);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-smooth);
}

a:hover,
a:focus {
	color: var(--meta-blue-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

::selection { background: rgba(0, 100, 224, 0.18); color: var(--text-charcoal); }

/* Hero display type used where theme applies .big-title or hero layouts */
.page-hero h1,
.generate-featured-page-header h1,
.hero-header h1 {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.16;
	font-weight: 500;
}

/* ============================================================
   3. Layout Containers
   ============================================================ */
.grid-container,
.inside-header,
.inside-top-bar,
.inside-navigation,
.inside-article,
.inside-page,
.inside-content,
.inside-footer-widgets,
.inside-site-info {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
	box-sizing: border-box;
}

/* Let page content control its own top spacing — hero blocks and
 * full-bleed sections should sit flush against the navigation bar. */
.site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* Fallback spacing only for archive/single templates that render their
 * own <article> inside .content-area. The homepage and block-editor
 * pages with custom heros are unaffected. */
.archive .site-content,
.blog .site-content,
.single .site-content,
.search .site-content,
.error404 .site-content {
	padding-top: var(--space-10);
	padding-bottom: var(--space-12);
}

.separate-containers .site-main {
	margin-top: 0;
}

.separate-containers .inside-article,
.one-container .site-content .content-area > article,
.separate-containers .paging-navigation,
.separate-containers .comments-area {
	background-color: var(--surface-white);
	border-radius: var(--radius-md);
	padding: var(--space-10);
	box-shadow: none;
	border: 1px solid var(--line-divider-soft);
	transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}

.separate-containers .inside-article:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-2);
	border-color: transparent;
}

/* Alternating section rhythm on homepage content blocks */
.home .site-main > article:nth-of-type(even) .inside-article {
	background-color: var(--surface-soft);
}

/* ============================================================
   4. Header / Navigation  (custom .meta-nav markup from header.php)
   ============================================================ */

/* Hide any leftover GeneratePress header/nav chrome in case a plugin
 * brings it back. Our custom header.php replaces it entirely. */
.site-header,
.main-navigation:not(.meta-nav),
#masthead {
	display: none !important;
}

.meta-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Solid near-white fallback for browsers without backdrop-filter
	 * and for the common case of scrolling over pure-white content
	 * (where an 82%-opaque blur just looks washed-out). */
	background-color: #F5F6F7;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	/* Promote to its own compositor layer so hover repaints of the
	 * backdrop-filter region don't nudge the body below by 1-2px.
	 * No `contain: paint` here — it would clip the dropdown submenus. */
	will-change: transform;
	transform: translateZ(0);
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
	.meta-nav {
		background-color: rgba(245, 246, 247, 0.92);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}
}

.meta-nav__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	min-height: 56px;
	display: flex;
	align-items: center;
	gap: var(--space-9);
}

/* Brand */
.meta-nav__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.meta-nav__brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--text-charcoal);
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
}

.meta-nav__brand-link:hover {
	color: var(--text-charcoal);
	text-decoration: none;
}

/* Logo: lock to 28px height with !important so WooCommerce / third-party
 * plugin stylesheets cannot blow it up to natural image size (which is
 * what was happening on /shop with WooCommerce's loose <img> rules). */
.meta-nav .meta-nav__logo,
header.meta-nav img.meta-nav__logo {
	display: block !important;
	height: 28px !important;
	width: auto !important;
	max-height: 28px !important;
	max-width: 160px !important;
	border-radius: 8px !important;
	object-fit: contain !important;
	padding: 0 !important;
	margin: 0 !important;
}

.meta-nav__wordmark {
	font-feature-settings: "ss01", "ss02";
}

/* When there's a logo image, we can optionally hide the wordmark.
 * Keeping it visible by default for brand clarity. */

/* Primary menu */
.meta-nav__menu {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.meta-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.meta-nav__list li {
	position: relative;
}

.meta-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.16px;
	line-height: 1.4;
	color: var(--text-charcoal);
	text-decoration: none;
	border-radius: 10px;
	transition: background-color var(--dur-base) var(--ease-smooth),
	            color var(--dur-base) var(--ease-smooth);
}

.meta-nav__list a:hover,
.meta-nav__list a:focus,
.meta-nav__list .current-menu-item > a,
.meta-nav__list .current-menu-ancestor > a {
	color: var(--meta-blue);
	background-color: rgba(0, 100, 224, 0.08);
	text-decoration: none;
}

/* Dropdowns */
.meta-nav__list .sub-menu,
.meta-nav__list .children {
	list-style: none;
	margin: 0;
	padding: var(--space-3);
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 240px;
	background: var(--surface-white);
	border: 1px solid var(--line-divider-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dur-base) var(--ease-smooth),
	            transform var(--dur-base) var(--ease-smooth),
	            visibility var(--dur-base) var(--ease-smooth);
	z-index: 10;
}

.meta-nav__list li:hover > .sub-menu,
.meta-nav__list li:focus-within > .sub-menu,
.meta-nav__list li:hover > .children,
.meta-nav__list li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.meta-nav__list .sub-menu a,
.meta-nav__list .children a {
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
}

.meta-nav__list .sub-menu a:hover,
.meta-nav__list .children a:hover {
	background-color: var(--surface-soft);
	color: var(--meta-blue);
}

/* Actions (Sign in CTA) */
.meta-nav__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.meta-nav__cta {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	background-color: var(--meta-blue);
	color: #FFFFFF;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.14px;
	line-height: 1.43;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-smooth),
	            transform var(--dur-fast) var(--ease-smooth);
}

.meta-nav__cta:hover,
.meta-nav__cta:focus {
	background-color: var(--meta-blue-hover);
	color: #FFFFFF;
	text-decoration: none;
	transform: scale(1.04);
}

.meta-nav__cta:active {
	background-color: var(--meta-blue-pressed);
	transform: scale(0.96);
}

/* Mobile hamburger toggle */
.meta-nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	transition: background-color var(--dur-base) var(--ease-smooth);
}

.meta-nav__toggle:hover,
.meta-nav__toggle:focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
}

.meta-nav__toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--text-charcoal);
	border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-smooth),
	            opacity var(--dur-base) var(--ease-smooth);
}

.meta-nav__toggle[aria-expanded="true"] .meta-nav__toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.meta-nav__toggle[aria-expanded="true"] .meta-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.meta-nav__toggle[aria-expanded="true"] .meta-nav__toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 960px) {
	.meta-nav__toggle {
		display: flex;
		order: 3;
	}

	.meta-nav__inner {
		flex-wrap: wrap;
		gap: var(--space-5);
	}

	.meta-nav__brand { order: 1; }
	.meta-nav__actions { order: 2; margin-left: auto; }
	.meta-nav__menu {
		order: 4;
		flex: 0 0 100%;
		display: none;
		padding-bottom: var(--space-5);
	}

	.meta-nav__menu.is-open {
		display: block;
	}

	.meta-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.meta-nav__list a {
		padding: 12px 14px;
		font-size: 16px;
	}

	.meta-nav__list .sub-menu,
	.meta-nav__list .children {
		position: static;
		box-shadow: none;
		border: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0 0 0 var(--space-7);
		background: transparent;
	}
}

@media (max-width: 480px) {
	.meta-nav__cta {
		padding: 8px 16px;
		font-size: 13px;
	}
	.meta-nav__brand-link { font-size: 17px; }
}

/* ============================================================
   5. Buttons (global)
   ============================================================ */
/*
 * Scope button styling to explicit "action button" classes only.
 * Do NOT style bare <button> elements — GeneratePress uses them for the
 * menu toggle, dropdown toggles, search modal, and other UI chrome.
 * Tagging the universal `button` selector was turning the nav hamburger
 * into a giant blue bar.
 */
.button:not(.menu-toggle):not(.dropdown-menu-toggle),
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.wp-block-search__button,
.comment-reply-link,
.generate-back-to-top,
.nav-previous a,
.nav-next a {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.43;
	letter-spacing: -0.14px;
	background-color: var(--meta-blue);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-pill);
	padding: 10px 22px;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color var(--dur-base) var(--ease-smooth),
	            transform var(--dur-fast) var(--ease-smooth),
	            box-shadow var(--dur-base) var(--ease-smooth);
}

.button:not(.menu-toggle):not(.dropdown-menu-toggle):hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
.comment-reply-link:hover,
.nav-previous a:hover,
.nav-next a:hover {
	background-color: var(--meta-blue-hover);
	color: #FFFFFF;
	text-decoration: none;
	transform: scale(1.04);
}

.button:not(.menu-toggle):not(.dropdown-menu-toggle):active,
input[type="submit"]:active,
.wp-block-button__link:active {
	background-color: var(--meta-blue-pressed);
	transform: scale(0.96);
	opacity: 0.9;
}

.button:not(.menu-toggle):not(.dropdown-menu-toggle):focus-visible,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid rgba(0, 100, 224, 0.35);
	outline-offset: 2px;
}

/* Outlined variant */
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.button.button-secondary {
	background-color: transparent;
	color: var(--text-charcoal);
	border: 2px solid rgba(10, 19, 23, 0.12);
}

.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.button-secondary:hover {
	background-color: rgba(70, 90, 105, 0.9);
	color: #FFFFFF;
	border-color: transparent;
}

/* Disabled state — scoped to same classes */
input[type="submit"]:disabled,
.button:disabled,
.wp-block-button__link:disabled {
	background-color: var(--line-divider-soft);
	color: var(--text-cta-disabled);
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}

/* ============================================================
   6. Forms & Inputs
   ============================================================ */
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,
select {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--text-charcoal);
	background-color: var(--surface-white);
	border: 1px solid var(--line-divider);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color var(--dur-base) var(--ease-smooth),
	            box-shadow var(--dur-base) var(--ease-smooth);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: hsl(214, 89%, 52%);
	box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.18);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-secondary);
}

label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-charcoal);
}

/* ============================================================
   7. Post / Page / Archive Cards
   ============================================================ */
.entry-title {
	margin-top: 0;
	margin-bottom: var(--space-5);
}

.entry-title a {
	color: var(--text-charcoal);
}

.entry-title a:hover {
	color: var(--meta-blue);
	text-decoration: none;
}

.entry-meta,
.entry-meta a,
.entry-meta span {
	font-size: 14px;
	letter-spacing: -0.14px;
	color: var(--text-secondary);
	line-height: 1.43;
}

.entry-summary,
.entry-content > p {
	color: var(--text-charcoal);
	font-size: 18px;
	line-height: 1.6;
}

.post-image,
.post-image img,
.featured-image img,
.inside-article .featured-image img {
	border-radius: var(--radius-md);
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.post-image {
	margin-bottom: var(--space-9);
	overflow: hidden;
	border-radius: var(--radius-md);
}

.post-image img {
	transition: transform var(--dur-slow) var(--ease-smooth);
}

.inside-article:hover .post-image img {
	transform: scale(1.02);
}

/* Read more */
.read-more,
.more-link {
	display: inline-block;
	margin-top: var(--space-5);
	color: var(--meta-blue);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.14px;
}

.read-more:hover,
.more-link:hover {
	text-decoration: underline;
}

/* Pagination */
.paging-navigation,
.pagination,
.nav-links {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	padding: var(--space-10) 0;
}

.pagination a,
.nav-links a,
.page-numbers {
	border-radius: var(--radius-pill);
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-charcoal);
	background-color: var(--surface-soft);
	text-decoration: none;
}

.pagination .current,
.nav-links .current,
.page-numbers.current {
	background-color: var(--meta-blue);
	color: #FFFFFF;
}

/* ============================================================
   8. Sidebar & Widgets (light treatment)
   ============================================================ */
.widget,
.widget-area .widget {
	background-color: transparent;
	padding: 0;
	margin-bottom: var(--space-12);
}

.widget-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.14px;
	color: var(--text-section);
	text-transform: none;
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--line-divider-soft);
	padding-bottom: var(--space-5);
}

.widget ul li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--line-divider-soft);
}

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

.widget ul li a { color: var(--text-charcoal); }
.widget ul li a:hover { color: var(--meta-blue); }

/* Search form */
.search-form,
.wp-block-search {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
}

.search-form input[type="search"],
.wp-block-search__input {
	flex: 1;
	border-radius: var(--radius-pill);
	padding: 10px 18px;
}

.search-form input[type="submit"],
.wp-block-search__button {
	border-radius: var(--radius-pill);
}

/* ============================================================
   9. Footer  (custom .meta-footer markup from footer.php)
   ============================================================ */

/* Hide any residual GP footer chrome. */
.site-footer:not(.meta-footer),
.site-info:not(.meta-footer__bar),
#footer-widgets:not(.meta-footer__widgets) {
	display: none !important;
}

.meta-footer {
	background-color: var(--surface-oculus-dark);
	color: #909396;
	font-family: var(--font-primary);
}

.meta-footer__widgets {
	background-color: var(--surface-near-black);
	padding: var(--space-14) var(--container-pad);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.meta-footer__widgets-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-12);
}

.meta-footer__column .widget-title,
.meta-footer__column h1,
.meta-footer__column h2,
.meta-footer__column h3,
.meta-footer__column h4 {
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.14px;
	text-transform: none;
	border-bottom: none;
	padding-bottom: 0;
	margin: 0 0 var(--space-5);
}

.meta-footer__column p,
.meta-footer__column li,
.meta-footer__column a {
	color: #BEC3C9;
	font-size: 14px;
	line-height: 1.6;
}

.meta-footer__column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.meta-footer__column ul li {
	border-bottom: none;
	padding: 6px 0;
}

.meta-footer__column a {
	color: #D7D9DC;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-smooth);
}

.meta-footer__column a:hover,
.meta-footer__column a:focus {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Bottom bar */
.meta-footer__bar {
	background-color: var(--surface-oculus-dark);
	padding: var(--space-9) var(--container-pad);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.meta-footer__bar-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

.meta-footer__copyright {
	margin: 0;
	color: #909396;
	font-family: var(--font-secondary);
	font-size: 12px;
	line-height: 1.5;
}

.meta-footer__nav {
	margin-left: auto;
}

.meta-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.meta-footer__nav-list a {
	color: #909396;
	font-size: 12px;
	text-decoration: none;
	padding: 4px 0;
	transition: color var(--dur-base) var(--ease-smooth);
}

.meta-footer__nav-list a:hover,
.meta-footer__nav-list a:focus {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 768px) {
	.meta-footer__widgets {
		padding: var(--space-12) var(--container-pad);
	}
	.meta-footer__widgets-inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	.meta-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.meta-footer__nav { margin-left: 0; }
}

/* ============================================================
   10. Comments
   ============================================================ */
.comments-area,
.comments-title {
	font-family: var(--font-primary);
}

.comments-title {
	font-size: 28px;
	font-weight: 300;
	line-height: 1.21;
	color: var(--text-charcoal);
	margin-bottom: var(--space-10);
}

.comment-body {
	background-color: var(--surface-warm);
	border-radius: var(--radius-md);
	padding: var(--space-9);
	border: 1px solid var(--line-divider-soft);
}

.comment-author .fn {
	color: var(--text-charcoal);
	font-weight: 500;
}

.comment-metadata {
	color: var(--text-secondary);
	font-size: 14px;
}

/* ============================================================
   11. Semantic Badges / Blockquotes / Tables
   ============================================================ */
blockquote {
	border-left: 3px solid var(--meta-blue);
	padding: var(--space-5) var(--space-9);
	color: var(--text-charcoal);
	background-color: var(--surface-soft);
	border-radius: var(--radius-sm);
	font-size: 18px;
	line-height: 1.6;
}

hr,
.separator {
	border: none;
	border-top: 1px solid var(--line-divider-soft);
	margin: var(--space-12) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

table th,
table td {
	padding: var(--space-5) var(--space-7);
	border-bottom: 1px solid var(--line-divider-soft);
	text-align: left;
}

table th {
	background-color: var(--surface-soft);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-charcoal);
}

/* Tags / badge look */
.post-tags a,
.tagcloud a,
.wp-block-tag-cloud a {
	display: inline-block;
	background-color: var(--surface-soft);
	color: var(--text-charcoal);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	margin: 2px;
	text-decoration: none;
}

.post-tags a:hover,
.tagcloud a:hover,
.wp-block-tag-cloud a:hover {
	background-color: var(--surface-baby);
	color: var(--meta-blue);
}

/* ============================================================
   12. Dark "Immersive" Sections — opt-in via body class or blocks
   ============================================================ */
.has-dark-section,
.wp-block-group.has-background.has-near-black-background-color,
.wp-block-cover.is-dark {
	background-color: var(--surface-near-black) !important;
	color: #FFFFFF;
	padding: var(--space-14) var(--container-pad);
	border-radius: var(--radius-lg);
}

.has-dark-section h1,
.has-dark-section h2,
.has-dark-section h3,
.has-dark-section h4 {
	color: #FFFFFF;
}

.has-dark-section p {
	color: #D7D9DC;
}

.has-dark-section .wp-block-button__link {
	background-color: var(--meta-blue-light);
	color: var(--text-charcoal);
}

.has-dark-section .wp-block-button__link:hover {
	background-color: #FFFFFF;
	color: var(--text-charcoal);
}

/* Cover block text-over-image scrim */
.wp-block-cover,
.has-background-dim {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .has-background-dim-60 {
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

/* ============================================================
   13. Responsive Fine-Tuning
   ============================================================ */
@media (max-width: 1024px) {
	h1, .entry-title, .page-title { font-size: 40px; }
	h2 { font-size: 30px; }
	.site-content { padding-top: var(--space-12); padding-bottom: var(--space-13); }
}

@media (max-width: 768px) {
	:root { --container-pad: 20px; }
	h1, .entry-title, .page-title { font-size: 32px; line-height: 1.2; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	body { font-size: 16px; }

	.separate-containers .inside-article {
		padding: var(--space-9);
		border-radius: var(--radius-md);
	}

	.site-content { padding-top: var(--space-11); padding-bottom: var(--space-12); }

	#footer-widgets { padding-top: var(--space-12); padding-bottom: var(--space-10); }

	/* Legacy GP footer selectors — harmless when the elements are hidden,
	 * kept here in case a child theme re-exposes them. */
	#footer-widgets .inside-footer-widgets {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
}

/* ============================================================
   14. Motion & Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

:focus-visible {
	outline: 3px solid rgba(0, 100, 224, 0.45);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Skip link — hidden until focused */
.meta-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 10px 22px;
	background-color: var(--text-charcoal);
	color: #FFFFFF;
	border-radius: var(--radius-pill);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: var(--shadow-2);
}

.meta-skip-link:focus,
.meta-skip-link:focus-visible {
	left: var(--container-pad);
	top: 10px;
	color: #FFFFFF;
	text-decoration: none;
}

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

/* Glimmer placeholder (used by JS if desired) */
.glimmer {
	background: linear-gradient(90deg, #E4E6EB 0%, #F0F2F5 50%, #E4E6EB 100%);
	background-size: 200% 100%;
	animation: glimmer 1.6s ease-in-out infinite;
	border-radius: var(--radius-sm);
}

@keyframes glimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}