/**
 * Serena Portfolio Theme — Clean Base CSS
 * Font: Funnel Display (all elements)
 * Notes:
 * - Header + footer behavior, borders, homepage 50/50 split, work/projects layout, mobile menu
 * - Typography system (h1-h6, p) with tokens + fluid scale
 * - Base styles for all HTML elements for Gutenberg editor compatibility
 */

/* ================================
   TOKENS (Design System)
   ================================ */
:root {
	/* Fonts - Single font family throughout */
	--font-primary: "Funnel Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Core colors */
	--c-ink: #1F1F1F;
	/* requested "nero" */
	--c-bg: var(--wp--preset--color--background, #ffffff);
	--c-fg: var(--wp--preset--color--foreground, var(--c-ink));
	--c-muted: #9C9C9C;
	--c-white: var(--wp--preset--color--white, #ffffff);
	--c-black: var(--wp--preset--color--black, #000000);

	/* Navigation hover - semi-transparent white overlay */
	--nav-hover-bg: rgba(255, 255, 255, 0.5);

	/* Accent */
	--c-accent-bg: #435B17;
	--c-accent-fg: #6EEE75;

	/* Layout */
	--border: 1px solid var(--c-fg);
	--header-h: 64px;
	--footer-h: 82px;

	/* Spacing scale */
	--s-1: 8px;
	--s-2: 12px;
	--s-3: 16px;
	--s-4: 24px;
	--s-5: 32px;
	--s-6: 40px;
	--s-7: 48px;
	--s-8: 64px;

	/* Typography scale (fluid) */
	--fs-p: 16px;
	--fs-lead: clamp(18px, 1.6vw, 20px);
	--fs-body-large: clamp(16px, 1.7vw, 22px);

	--fs-h1: clamp(32px, 4.2vw, 50px);
	--fs-h2: clamp(26px, 3vw, 36px);
	--fs-h3: clamp(22px, 2.4vw, 28px);
	--fs-h4: clamp(18px, 2vw, 22px);
	--fs-h5: 18px;
	--fs-h6: 14px;

	--lh-body: 1.7;
	--lh-tight: 1.12;
	--lh-heading: 1.2;
}

/* ================================
   CSS RESET
   ================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-y: scroll;
}

body {
	height: 100%;
	margin: 0;
	line-height: var(--lh-body);
	font-family: var(--font-primary);
	color: var(--c-fg);
	background-color: var(--c-bg);
	display: flex;
	flex-direction: column;
}

/* Gutenberg root wrapper */
.wp-site-blocks {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

a {
	text-decoration: none;
	color: inherit;
}

ul,
ol {
	list-style: none;
}

/* Override WordPress default flex gap */
:where(.is-layout-flex) {
	gap: 0;
}

/* ================================
   GLOBAL TYPOGRAPHY (Gutenberg Content)
   Applies to pages + posts (non-home and home content blocks)
   ================================ */

/* Content containers */
:where(.entry-content, .wp-block-post-content, .page-content) {
	padding: 116px 48px 120px;
	max-width: 1200px;
	margin: 0;
}

/* Headings */
:where(.entry-content, .wp-block-post-content, .page-content) :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-primary);
	color: var(--c-fg);
	letter-spacing: 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	margin: 0 0 var(--s-5) 0;
	font-weight: 500;
}

:where(.entry-content, .wp-block-post-content, .page-content) h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	margin: var(--s-7) 0 var(--s-6) 0;
	font-weight: 400;
}

:where(.entry-content, .wp-block-post-content, .page-content) h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	margin: var(--s-6) 0 var(--s-3) 0;
	font-weight: 500;
}

:where(.entry-content, .wp-block-post-content, .page-content) h4 {
	font-size: var(--fs-h4);
	line-height: 1.35;
	margin: var(--s-5) 0 var(--s-2) 0;
	font-weight: 500;
}

:where(.entry-content, .wp-block-post-content, .page-content) h5 {
	font-size: var(--fs-h5);
	line-height: 1.4;
	margin: var(--s-4) 0 var(--s-2) 0;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

:where(.entry-content, .wp-block-post-content, .page-content) h6 {
	font-size: var(--fs-h6);
	line-height: 1.4;
	margin: var(--s-4) 0 var(--s-2) 0;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-muted);
}

/* First heading no top margin */
:where(.entry-content, .wp-block-post-content, .page-content)> :where(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* Paragraphs */
:where(.entry-content, .wp-block-post-content, .page-content) p {
	font-family: var(--font-primary);
	font-size: var(--fs-p);
	line-height: var(--lh-body);
	margin: 0 0 40px 0;
	color: var(--c-fg);
}

/* Heading to paragraph spacing - 60px */
:where(.entry-content, .wp-block-post-content, .page-content) :where(h1, h2, h3, h4, h5, h6)+p {
	margin-top: 60px;
}

/* Heading to list spacing - 60px */
:where(.entry-content, .wp-block-post-content, .page-content) :where(h1, h2, h3, h4, h5, h6)+:where(ul, ol, .wp-block-list) {
	margin-top: 60px;
}

/* Lead paragraph (first p after h1) */
:where(.entry-content, .wp-block-post-content, .page-content) h1+p {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-ink);
}

/* Lists */
:where(.entry-content, .wp-block-post-content, .page-content) :where(ul, ol, .wp-block-list) {
	font-family: var(--font-primary);
	font-size: var(--fs-p);
	line-height: var(--lh-body);
	margin: 0 0 var(--s-4) 0;
	padding-left: 0;
	color: var(--c-fg);
	list-style: none;
}

:where(.entry-content, .wp-block-post-content, .page-content) li {
	padding-left: 24px;
	margin: 0 0 20px 0;
	text-decoration: none;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(ul ul, ol ol, ul ol, ol ul) {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Blockquotes */
:where(.entry-content, .wp-block-post-content, .page-content) :where(blockquote, .wp-block-quote) {
	font-family: var(--font-primary);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
	margin: var(--s-6) 0;
	padding: var(--s-4) 0 var(--s-4) 32px;
	border-left: 3px solid var(--c-fg);
	color: var(--c-fg);
}

:where(.entry-content, .wp-block-post-content, .page-content) blockquote p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin-bottom: var(--s-3);
}

:where(.entry-content, .wp-block-post-content, .page-content) blockquote p:last-child {
	margin-bottom: 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(blockquote cite, .wp-block-quote cite) {
	display: block;
	font-family: var(--font-primary);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	margin-top: var(--s-3);
	color: var(--c-muted);
}

/* Pull quote */
:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-pullquote {
	border-top: 3px solid var(--c-fg);
	border-bottom: 3px solid var(--c-fg);
	padding: var(--s-6) 0;
	margin: var(--s-7) 0;
	text-align: center;
}

:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-pullquote blockquote {
	border-left: none;
	padding-left: 0;
	margin: 0;
}

/* Images & figures */
:where(.entry-content, .wp-block-post-content, .page-content) :where(figure, .wp-block-image) {
	margin: var(--s-6) 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) figcaption,
:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-image figcaption {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-muted);
	margin-top: var(--s-2);
	text-align: center;
}

/* Gallery */
:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-gallery {
	margin: var(--s-6) 0;
	gap: 16px;
}

:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-gallery .wp-block-image {
	margin: 0;
}

/* Separators */
:where(.entry-content, .wp-block-post-content, .page-content) :where(hr, .wp-block-separator) {
	border: none;
	border-top: 1px solid var(--c-fg);
	margin: var(--s-7) 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-separator.is-style-dots {
	border: none;
	text-align: center;
}

:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-separator.is-style-dots::before {
	content: "···";
	font-size: 24px;
	letter-spacing: 16px;
	color: var(--c-fg);
}

/* Columns / Group */
:where(.entry-content, .wp-block-post-content, .page-content) :where(.wp-block-columns) {
	margin: var(--s-6) 0;
	gap: 32px;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(.wp-block-group) {
	margin: var(--s-6) 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(.wp-block-column, .wp-block-group)>*:first-child {
	margin-top: 0;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(.wp-block-column, .wp-block-group)>*:last-child {
	margin-bottom: 0;
}

/* Cover */
:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover {
	margin: var(--s-7) 0;
	min-height: 400px;
}

:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover .wp-block-cover__inner-container {
	padding: var(--s-7);
}

/* Tables */
:where(.entry-content, .wp-block-post-content, .page-content) :where(table, .wp-block-table) {
	width: 100%;
	margin: var(--s-6) 0;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: 15px;
}

:where(.entry-content, .wp-block-post-content, .page-content) table th,
:where(.entry-content, .wp-block-post-content, .page-content) table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--c-fg);
}

:where(.entry-content, .wp-block-post-content, .page-content) table th {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

:where(.entry-content, .wp-block-post-content, .page-content) table tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

/* Code */
:where(.entry-content, .wp-block-post-content, .page-content) code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 2px 6px;
	border-radius: 3px;
}

:where(.entry-content, .wp-block-post-content, .page-content) :where(pre, .wp-block-code) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 14px;
	line-height: 1.6;
	background-color: var(--c-ink);
	color: #ededed;
	padding: var(--s-6);
	margin: var(--s-6) 0;
	overflow-x: auto;
	border-radius: 4px;
}

:where(.entry-content, .wp-block-post-content, .page-content) pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* Links (non-button) */
:where(.entry-content, .wp-block-post-content, .page-content) a:not(.wp-block-button__link) {
	color: var(--c-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

:where(.entry-content, .wp-block-post-content, .page-content) a:not(.wp-block-button__link):hover {
	color: var(--c-muted);
}

/* Buttons (single system) */
.wp-block-button {
	margin: var(--s-4) 0;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 186px;
	height: 48px;
	padding: 8px 24px 10px;
	background-color: var(--c-white);
	color: var(--c-fg);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 100px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wp-block-button__link:hover {
	background-color: var(--c-fg);
	color: var(--c-white);
}

/* ================================
   TYPOGRAPHY RESPONSIVE
   ================================ */
@media (max-width: 980px) {
	/* Paragraph spacing - tablet */
	:where(.entry-content, .wp-block-post-content, .page-content) p {
		margin-bottom: 32px;
	}

	/* Heading to paragraph spacing - tablet */
	:where(.entry-content, .wp-block-post-content, .page-content) :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 48px;
	}
}

@media (max-width: 576px) {
	/* Paragraph spacing - mobile */
	:where(.entry-content, .wp-block-post-content, .page-content) p {
		margin-bottom: 24px;
	}

	/* Heading to paragraph spacing - mobile */
	:where(.entry-content, .wp-block-post-content, .page-content) :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 40px;
	}
}

/* ================================
   HEADER
   ================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--c-bg);
	border: none;
	outline: 1px solid var(--c-fg);
	outline-offset: -1px;
}

/* Remove WordPress default margins/padding */
.site-header.wp-block-group,
.site-header.alignfull {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;
}

/* Inner container */
.site-header>.wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Site title padding */
.site-header .wp-block-site-title {
	padding-left: 48px;
}

/* ================================
   SITE TITLE (Logo)
   ================================ */
.wp-block-site-title {
	margin: 0;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wp-block-site-title a {
	color: var(--c-fg);
}

.wp-block-site-title a:hover {
	color: var(--c-black);
}

/* ================================
   DESKTOP NAVIGATION
   ================================ */
.primary-navigation {
	display: flex;
	align-items: stretch;
	height: var(--header-h);
}

.primary-navigation .wp-block-navigation__container {
	display: flex;
	align-items: stretch;
	gap: 0;
	height: var(--header-h);
}

.primary-navigation .wp-block-navigation-item {
	display: flex;
	align-items: stretch;
}

.primary-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 0 28px;
	height: var(--header-h);
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-fg);
	transition: background-color 0.25s ease, color 0.25s ease;
	border-left: 1px solid var(--c-fg);
	margin-left: -1px;
}

.primary-navigation .wp-block-navigation-item__content:hover {
	background-color: var(--nav-hover-bg);
	border-left: 1px solid var(--c-fg);
}

.primary-navigation .current-menu-item>a,
.primary-navigation .wp-block-navigation-item--current>a,
.primary-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	background-color: var(--c-fg);
	color: var(--c-white);
	border-left: 1px solid var(--c-fg);
}

/* Hide WordPress default responsive menu UI (you use custom mobile nav) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-close {
	display: none !important;
}

.wp-block-navigation__container {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ================================
   HAMBURGER BUTTON
   ================================ */
.mobile-menu-toggle {
	display: none;
	width: var(--header-h);
	height: var(--header-h);
	padding: 0;
	background: none;
	border: none;
	border-left: 1px solid var(--c-fg);
	cursor: pointer;
	z-index: 1001;
	align-items: center;
	justify-content: center;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--c-fg);
	transition: all 0.3s ease;
}

.hamburger-icon {
	position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.hamburger-icon::before {
	top: -8px;
}

.hamburger-icon::after {
	top: 8px;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon {
	background-color: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::before {
	transform: rotate(45deg);
	top: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::after {
	transform: rotate(-45deg);
	top: 0;
}

/* ================================
   MOBILE NAVIGATION (Fullscreen)
   ================================ */
.mobile-navigation {
	display: none;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--c-bg);
	flex-direction: column;
	min-height: calc(100vh - (var(--header-h) + 1px));
	min-height: calc(100dvh - (var(--header-h) + 1px));
}

.mobile-navigation[aria-hidden="false"] {
	display: flex;
}

/* When mobile menu is open, disable sticky header */
.site-header:has(+ .mobile-navigation[aria-hidden="false"]) {
	position: relative;
}

/* Fallback for browsers without :has() support */
.mobile-menu-open .site-header {
	position: relative;
}

/* Body scroll lock */
body:has(.mobile-navigation[aria-hidden="false"]),
body.mobile-menu-open {
	overflow: hidden;
}

.mobile-navigation.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Mobile nav links container */
.mobile-navigation .mobile-nav-links {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0 !important;
	margin: 0 !important;
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.mobile-navigation .mobile-nav-links.wp-block-navigation {
	padding: 0 !important;
	margin: 0 !important;
}

.mobile-navigation .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.mobile-navigation .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--c-fg);
	padding-top: 26px;
	padding-bottom: 26px;
	transition: background-color 0.25s ease;
}

.mobile-navigation .wp-block-navigation-item:first-child {
	border-top: none;
}

.mobile-navigation .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0 24px;
	height: 80px;
	line-height: 80px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-fg);
	text-align: center;
	transition: background-color 0.25s ease;
}

/* Hover state - apply to parent item for full coverage including padding */
.mobile-navigation .wp-block-navigation-item:hover {
	background-color: var(--nav-hover-bg);
}

/* Active state - apply to parent item for full coverage including padding */
.mobile-navigation .wp-block-navigation-item.current-menu-item,
.mobile-navigation .wp-block-navigation-item--current {
	background-color: var(--c-fg);
}

.mobile-navigation .current-menu-item>a,
.mobile-navigation .wp-block-navigation-item--current>a,
.mobile-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	background-color: transparent;
	color: var(--c-white);
}

/* Mobile social links (footer of mobile menu) */
.mobile-social-links {
	margin-top: auto;
	display: flex;
	border-top: 1px solid var(--c-fg);
	border-bottom: 1px solid var(--c-fg);
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.mobile-social-link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--header-h);
	color: var(--c-fg);
	background-color: transparent;
	border-right: 1px solid var(--c-fg);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.mobile-social-link:last-child {
	border-right: none;
}

.mobile-social-link:hover {
	background-color: var(--c-white);
	color: var(--c-fg);
}

.mobile-social-link svg {
	width: 24px;
	height: 24px;
}

/* ================================
   HEADER RESPONSIVE
   ================================ */
@media (max-width: 980px) {
	/* Fix sticky header - remove fixed height from containers */
	body,
	.wp-site-blocks {
		height: auto;
		min-height: 100vh;
	}

	.site-header {
		position: sticky;
		top: 0;
		transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
	}

	/* Liquid glass effect on scroll */
	.site-header.scrolled {
		background-color: rgba(237, 237, 237, 0.65);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	/* Solid background when mobile menu is open */
	.mobile-menu-open .site-header,
	.mobile-menu-open .site-header.scrolled,
	.mobile-menu-open.home .site-header {
		background-color: var(--c-bg) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.primary-navigation {
		display: none !important;
	}

	.mobile-menu-toggle {
		display: flex;
	}

	.site-header .wp-block-site-title {
		padding-left: 16px;
	}

	.wp-block-site-title {
		font-size: 1.125rem;
	}

	/* Reduce xx-large font size on mobile */
	:root {
		--wp--preset--font-size--xx-large: 1.5rem;
	}
}

@media (min-width: 981px) {
	.mobile-navigation {
		display: none !important;
	}

	.mobile-menu-toggle {
		display: none !important;
	}
}

@media (max-width: 576px) {
	.wp-block-site-title {
		font-size: 1rem;
	}

	.mobile-navigation .wp-block-navigation-item__content {
		font-size: 1.25rem;
		height: var(--header-h);
		line-height: var(--header-h);
	}
}

/* ================================
   FOOTER
   ================================ */
.site-footer {
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--c-bg);
	border: none;
	outline: 1px solid var(--c-fg);
	outline-offset: -1px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
}

.site-footer.wp-block-group,
.site-footer.alignfull {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;
}

/* Footer inner container */
.site-footer>.wp-block-group {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: var(--footer-h);
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Footer branding */
.footer-branding {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	align-self: center;
	padding: 0 24px;
	gap: 16px;
}

.footer-branding .wp-block-site-title {
	font-size: 1rem;
	color: var(--c-fg);
	flex-shrink: 0;
	text-transform: none;
}

.footer-branding .wp-block-site-title a {
	color: var(--c-fg);
}

.footer-branding .wp-block-site-tagline {
	font-family: var(--font-primary);
	font-size: 1rem;
	color: var(--c-fg);
	margin: 0;
	max-width: 400px;
	line-height: 1.4;
}

/* Footer nav */
.footer-nav {
	display: flex;
	align-items: stretch;
	height: var(--footer-h);
	gap: 0;
	padding: 0 !important;
	margin: 0 !important;
}

/* Footer social links */
.footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--footer-h);
	height: var(--footer-h);
	border-left: 1px solid var(--c-fg);
	color: var(--c-fg);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.footer-social-link:hover {
	background-color: var(--c-white);
	color: var(--c-fg);
}

.footer-social-link svg {
	width: 24px;
	height: 24px;
}

/* Footer legal links */
.footer-legal {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 24px !important;
	border-left: 1px solid var(--c-fg);
	height: var(--footer-h);
}

.footer-legal-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal-menu li {
	margin: 0;
	line-height: 1.4;
}

.footer-legal a {
	font-family: var(--font-primary);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-fg);
	transition: color 0.25s ease;
}

.footer-legal a:hover {
	color: var(--c-fg);
}

/* Footer responsive */
@media (max-width: 980px) {
	.site-footer {
		position: static;
		z-index: auto;
	}

	.site-footer>.wp-block-group {
		flex-direction: column;
		align-items: stretch;
	}

	.footer-branding {
		padding: 16px 24px;
		border-bottom: 1px solid var(--c-fg);
		display: block;
	}

	.footer-branding .wp-block-site-tagline {
		max-width: none;
	}

	.footer-nav {
		height: auto;
		flex-wrap: wrap;
	}

	.footer-social-link {
		flex: 1;
		border-left: none;
		border-right: 1px solid var(--c-fg);
	}

	.footer-social-link:last-of-type {
		border-right: none;
	}

	.footer-legal {
		width: 100%;
		justify-content: center;
		padding: 16px 24px !important;
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--c-fg);
		height: auto;
	}

	.footer-legal-menu {
		gap: 24px;
	}
}

@media (max-width: 576px) {
	.footer-branding {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* ================================
   FRONT-PAGE ANIMATED BACKGROUND
   ================================ */
/* Transparent header/footer on front-page to show WebGL animation */
.home .site-header,
.home .site-footer {
	background-color: transparent;
}

/* ================================
   HOMEPAGE LAYOUT
   ================================ */
.homepage-main {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	display: flex;
	flex-direction: row;
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.homepage-main.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Left column */
.homepage-content {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-right: 1px solid var(--c-fg);
	margin: 0 !important;
	min-height: calc(100vh - (var(--header-h) + var(--footer-h)));
}

.homepage-content.wp-block-group {
	margin: 0 !important;
}

/* Title spacing - 40px after first heading */
.homepage-content h1:first-child,
.homepage-content .wp-block-heading:first-child {
	margin-bottom: 40px;
}

/* Remove top margin from first paragraph */
.homepage-content p:first-child,
.homepage-content h1:first-child+p,
.homepage-content .wp-block-heading:first-child+p {
	margin-top: 0;
}

/* Right column hero image */
.homepage-hero-image {
	position: fixed;
	right: 0;
	top: var(--header-h);
	width: 50%;
	height: calc(100vh - var(--header-h));
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	z-index: 1;
	border-right: 1px solid var(--c-fg);
}

.homepage-hero-image.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

.homepage-hero-image .hero-image {
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.homepage-hero-image .hero-image img {
	width: 100%;
	height: calc(100% - 82px);
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Placeholder for missing hero image */
.hero-image-placeholder {
	width: 100%;
	height: 100%;
	background-color: #C4C4C4;
}

/* ================================
   DUAL-COLUMN LAYOUTS SHARED TYPOGRAPHY
   (homepage, page-with-image, single-project)
   ================================ */

/* Shared h2 styling */
:where(.homepage-content, .page-with-image-content, .single-project-content) h2 {
	font-weight: 300;
}

/* Shared paragraph styling */
:where(.homepage-content, .page-with-image-content, .single-project-content) p {
	font-family: var(--font-primary);
	font-size: var(--fs-body-large);
	line-height: 1.45;
	color: var(--c-ink);
	margin-bottom: 40px;
}

/* Shared list container styling */
:where(.homepage-content, .page-with-image-content, .single-project-content) :where(ul, ol, .wp-block-list) {
	font-family: var(--font-primary);
	font-size: var(--fs-body-large);
	line-height: 1.45;
	margin: 0 0 var(--s-4) 0;
	padding-left: 0;
	color: var(--c-fg);
	list-style: none;
}

/* Shared list item styling */
:where(.homepage-content, .page-with-image-content, .single-project-content) li {
	padding-left: 24px;
	margin: 0 0 20px 0;
	text-decoration: none;
}

/* Homepage heading to paragraph spacing */
.homepage-content :where(h1, h2, h3, h4, h5, h6)+p {
	margin-top: 60px;
}

/* ================================
   PAGE WITH IMAGE LAYOUT
   ================================ */
.page-with-image-main {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	display: flex;
	flex-direction: row;
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.page-with-image-main.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Left column - scrollable content */
.page-with-image-content {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-right: 1px solid var(--c-fg);
	margin: 0 !important;
	min-height: calc(100vh - (var(--header-h) + var(--footer-h)));
	overflow-y: auto;
}

.page-with-image-content.wp-block-group {
	margin: 0 !important;
}

/* Title spacing - 40px after first heading */
.page-with-image-content h1:first-child,
.page-with-image-content .wp-block-heading:first-child {
	margin-bottom: 40px;
}

/* Remove top margin from first paragraph */
.page-with-image-content p:first-child,
.page-with-image-content h1:first-child+p,
.page-with-image-content .wp-block-heading:first-child+p {
	margin-top: 0;
}

/* Right column - fixed sidebar with image and caption */
.page-with-image-sidebar {
	position: fixed;
	right: 0;
	top: var(--header-h);
	width: 50%;
	height: calc(100vh - var(--header-h));
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	z-index: 1;
	border-right: 1px solid var(--c-fg);
}

.page-with-image-sidebar.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Image container */
.page-sidebar-image-container {
	width: 100%;
	height: calc(66vh - var(--header-h));
	overflow: hidden;
}

.page-with-image-sidebar .sidebar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: grayscale(1);
	mix-blend-mode: multiply;
}

/* Placeholder for missing sidebar image */
.sidebar-image-placeholder {
	width: 100%;
	height: 100%;
	background-color: #C4C4C4;
}

/* Caption section below image */
.page-meta {
	display: flex;
	align-items: center;
	padding: 20px 24px;
	border-top: 1px solid var(--c-fg);
	background-color: var(--c-bg);
}

.page-meta-text {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 300;
	color: var(--c-fg);
}


/* ================================
   SINGLE PROJECT LAYOUT
   ================================ */
.single-project-main {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	display: flex;
	flex-direction: row;
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.single-project-main.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Left column - scrollable content */
.single-project-content {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-right: 1px solid var(--c-fg);
	margin: 0 !important;
	min-height: calc(100vh - (var(--header-h) + var(--footer-h)));
	overflow-y: auto;
}

.single-project-content.wp-block-group {
	margin: 0 !important;
}

/* Title spacing - 40px after first heading */
.single-project-content h1:first-child,
.single-project-content .wp-block-heading:first-child,
.single-project-content .wp-block-post-title {
	margin-bottom: 40px;
}

/* Remove top margin from first paragraph */
.single-project-content p:first-child,
.single-project-content h1:first-child+p,
.single-project-content .wp-block-heading:first-child+p,
.single-project-content .wp-block-post-title+p {
	margin-top: 0;
}

/* Right column - fixed sidebar with image and meta */
.single-project-sidebar {
	position: fixed;
	right: 0;
	top: var(--header-h);
	width: 50%;
	height: calc(100vh - var(--header-h));
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	z-index: 1;
	border-right: 1px solid var(--c-fg);
}

.single-project-sidebar.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}

/* Image container - 66% of viewport height minus header */
.project-sidebar-image-container {
	width: 100%;
	height: calc(66vh - var(--header-h));
	overflow: hidden;
}

.project-sidebar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Gray placeholder for missing images */
.project-sidebar-placeholder {
	width: 100%;
	height: 100%;
	background-color: #C4C4C4;
}

/* Meta section below image */
.project-meta {
	display: flex;
	align-items: center;
	padding: 20px 24px;
	border-top: 1px solid var(--c-fg);
	background-color: var(--c-bg);
}

.project-meta-text {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 300;
	color: var(--c-fg);
}

/* Single project heading to paragraph spacing */
.single-project-content :where(h1, h2, h3, h4, h5, h6)+p {
	margin-top: 60px;
}

/* ================================
   SINGLE PROJECT RESPONSIVE
   ================================ */
@media (max-width: 980px) {
	.single-project-main {
		flex-direction: column;
	}

	.single-project-content {
		flex: none;
		width: 100%;
		padding: 24px 16px;
		border-right: none;
		align-items: flex-start;
		text-align: left;
		min-height: auto;
		overflow-y: visible;
	}

	/* Paragraph spacing - tablet */
	.single-project-content p {
		margin-bottom: 32px;
	}

	/* Heading to paragraph spacing - tablet */
	.single-project-content :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 48px;
	}

	/* Project title - tablet */
	.single-project-content .wp-block-post-title {
		font-size: var(--fs-h2);
		font-weight: 300;
	}

	.single-project-sidebar {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		order: -1;
		flex-direction: column;
		border-right: none;
	}

	.project-sidebar-image-container {
		height: auto;
		aspect-ratio: 3 / 2;
	}

}

@media (max-width: 576px) {
	.single-project-content {
		padding: 20px 16px;
	}

	/* Paragraph spacing - mobile */
	.single-project-content p {
		margin-bottom: 24px;
	}

	/* Heading to paragraph spacing - mobile */
	.single-project-content :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 40px;
	}

	.project-sidebar-image-container {
		aspect-ratio: 3 / 2;
	}

	.project-meta {
		padding: 12px 16px;
	}

	.project-meta-text {
		font-size: 12px;
	}
}

/* ================================
   PAGE WITH IMAGE RESPONSIVE
   ================================ */
@media (max-width: 980px) {
	.page-with-image-main {
		flex-direction: column;
	}

	.page-with-image-content {
		flex: none;
		width: 100%;
		padding: 24px 16px;
		border-right: none;
		align-items: flex-start;
		text-align: left;
		min-height: auto;
		overflow-y: visible;
	}

	/* Paragraph spacing - tablet */
	.page-with-image-content p {
		margin-bottom: 32px;
	}


	.page-with-image-sidebar {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		order: -1;
		flex-direction: column;
		border-right: none;
	}

	.page-sidebar-image-container {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	/* Hide caption on tablet and mobile */
	.page-meta {
		display: none;
	}
}

@media (max-width: 576px) {
	.page-with-image-content {
		padding: 20px 16px;
	}

	/* Paragraph spacing - mobile */
	.page-with-image-content p {
		margin-bottom: 24px;
	}

	.page-sidebar-image-container {
		aspect-ratio: 3 / 2;
	}
}

/* ================================
   HOMEPAGE RESPONSIVE
   ================================ */
@media (max-width: 980px) {

	/* Keep your centering behavior */
	body .is-layout-flex {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.homepage-main {
		flex-direction: column;
	}

	.homepage-content {
		flex: none;
		width: 100%;
		padding: 24px 16px;
		border-right: none;
		align-items: flex-start;
		text-align: left;
		min-height: auto;
	}

	/* Paragraph spacing - tablet */
	.homepage-content p {
		margin-bottom: 32px;
	}

	/* Heading to paragraph spacing - tablet */
	.homepage-content :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 48px;
	}

	.homepage-hero-image {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		order: -1;
		border-right: none;
	}

	.wp-block-button__link {
		font-size: 16px;
		min-width: 200px;
		width: 80%;
		max-width: 300px;
		height: 44px;
	}
}

@media (max-width: 576px) {
	.homepage-content {
		padding: 20px 16px;
	}

	/* Paragraph spacing - mobile */
	.homepage-content p {
		margin-bottom: 24px;
	}

	/* Heading to paragraph spacing - mobile */
	.homepage-content :where(h1, h2, h3, h4, h5, h6)+p {
		margin-top: 40px;
	}

	.wp-block-button__link {
		font-size: 14px;
		width: 90%;
		max-width: 280px;
		height: 40px;
		padding: 8px 20px;
	}

}

/* ================================
   MAIN CONTENT (non-homepage)
   ================================ */
body:not(.home) main {
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

/* ================================
   GLOBAL CONTENT RESPONSIVE
   ================================ */
@media (max-width: 980px) {
	:where(.entry-content, .wp-block-post-content, .page-content) {
		padding: 48px 24px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) :where(blockquote, .wp-block-quote) {
		padding-left: 24px;
		margin: var(--s-5) 0;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover {
		min-height: 300px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover .wp-block-cover__inner-container {
		padding: 32px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-columns {
		gap: 24px;
	}
}

@media (max-width: 576px) {
	:where(.entry-content, .wp-block-post-content, .page-content) {
		padding: 0px;
	}


	:where(.entry-content, .wp-block-post-content, .page-content) :where(blockquote, .wp-block-quote) {
		padding-left: 20px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-columns {
		flex-direction: column;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-gallery {
		gap: 8px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) table th,
	:where(.entry-content, .wp-block-post-content, .page-content) table td {
		padding: 10px 12px;
		font-size: 14px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover {
		min-height: 250px;
	}

	:where(.entry-content, .wp-block-post-content, .page-content) .wp-block-cover .wp-block-cover__inner-container {
		padding: 24px;
	}
}

/* ================================
   WORK / PROJECTS PAGE
   ================================ */
.work-main {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

.projects-section {
	margin: 0 !important;
	padding: 0 !important;
}

/* Filter bar - positioned below header */
.projects-filters {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	z-index: 998;
	display: flex;
	gap: 0;
	background-color: var(--c-bg);
	border-left: 1px solid var(--c-fg);
	border-bottom: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
}

.filter-btn {
	padding: 16px 24px;
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-fg);
	background: transparent;
	border: none;
	border-right: 1px solid var(--c-fg);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}


.filter-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.filter-btn.active {
	background-color: var(--c-fg);
	color: var(--c-white);
}

/* Projects list - add top margin for fixed filter bar */
.projects-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: calc(var(--header-h) + 28px);
	border-left: 1px solid var(--c-fg);
	border-right: 1px solid var(--c-fg);
	margin-bottom: var(--header-h);
}

/* Project Card - 50/50 split layout */
.project-card {
	border-bottom: 1px solid var(--c-fg);
	transition: opacity 0.3s ease;
}


.project-card.hidden {
	display: none;
}

.project-card-wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	height: 604px;
	width: 100%;
}

.project-card:first-child .project-card-wrapper {
	margin-top: 30px;
}

/* Left side: Content */
.project-card-content {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 48px 40px;
	gap: 16px;
	border-right: 1px solid var(--c-fg);
}

.project-card-title {
	font-family: var(--font-primary);
	font-size: var(--fs-h2);
	font-weight: 300;
	margin: 0 !important;
	line-height: var(--lh-heading);
	color: var(--c-fg);
}

.project-card-title a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.project-card-title a:hover {
	opacity: 0.7;
}

.project-card-meta {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--c-fg);
	margin: 40px 0 !important;
}

/* Button styling */
.project-card-buttons {
	margin-top: auto !important;
}

/* Right side: Image */
.project-card-image {
	flex: 0 0 50%;
	width: 50%;
	overflow: hidden;
	position: relative;
}

.project-card-image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.project-card-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease;
}

.project-card:hover .project-card-thumbnail {
	filter: saturate(0);
}

/* Gray placeholder for missing images */
.project-card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #C4C4C4;
}

.no-projects {
	padding: 48px 24px;
	text-align: center;
	font-family: var(--font-primary);
	font-size: 18px;
	color: var(--c-muted);
}

/* Work responsive - tablet */
@media (max-width: 980px) {
	.projects-filters {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: auto;
		border-left: none;
		border-right: none;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.filter-btn {
		display: inline-block;
		flex: none;
	}

	.projects-list {
		margin-top: 0;
		margin-bottom: 0;
		border-left: none;
		border-right: none;
	}

	.project-card-wrapper {
		flex-direction: column-reverse;
		height: auto;
	}

	.project-card:first-child .project-card-wrapper {
		margin-top: 0;
	}

	.project-card-content {
		flex: none;
		width: 100%;
		padding: 32px 24px;
		border-right: none;
		align-items: flex-start;
		text-align: left;
	}

	.project-card-image {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		border-bottom: 1px solid var(--c-fg);
	}

	.project-card-buttons {
		margin-top: 24px !important;
	}

	.filter-btn {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* Work responsive - mobile */
@media (max-width: 576px) {
	.project-card-image {
		height: 220px;
	}

	.project-card-content {
		padding: 24px 16px;
	}

	.filter-btn {
		flex: 1;
		padding: 12px 8px;
		font-size: 12px;
		text-align: center;
	}
}

/* ================================
   UTILITIES
   ================================ */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ================================
   ACCESSIBILITY
   ================================ */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--c-fg);
	color: var(--c-white);
	padding: 8px 16px;
	text-decoration: none;
	z-index: 9999;
}

.skip-link:focus {
	top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--c-fg);
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}