/**
 * Trähus Child Theme — Custom Styles
 *
 * Extends agoodsite-fse parent theme with Trähus-specific styling.
 */

/* Smooth scroll + prevent horizontal overflow */
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}
/* clip (not hidden) avoids creating a new scroll context that could break sticky positioning */
body {
	overflow-x: clip;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 100000;
	padding: 8px 16px;
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}
.skip-link:focus {
	left: 0;
	top: 0;
}

/* Focus styles for accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Selection color */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Global nav — transparent header over colored heroes
   ========================================================================== */
/* Pages with colored heroes: nav overlaps hero with transparent background.
   Uses .has-hero-header from PHP (available at first render, no JS needed).
   Parent theme JS (.site-header--mega, .is-sticky-header, .is-transparent)
   takes over once loaded — these CSS rules handle the critical initial state. */
.site-header > .wp-block-group {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Remove top padding so header overlaps hero */
body.has-hero-header .wp-site-blocks {
	padding-top: 0 !important;
}

/* Fix header over hero — uses :first-of-type (skip-link may precede template part) */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type {
	position: fixed !important;
	top: var(--sticky-top-offset, 0px) !important;
	left: 0;
	right: 0;
	z-index: 1000;
	/* NOTE: No transform or will-change:transform here — both create a
	   containing block on iOS Safari, trapping fixed-position descendants
	   (search overlay, mobile nav) inside this stacking context.
	   GPU compositing is not needed; position:fixed already composites. */
	background: rgba(30, 70, 32, 0.75) !important;
	background-color: rgba(30, 70, 32, 0.75) !important;
	border: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Remove 1px gap/border between header and hero on all pages */
.wp-block-template-part:first-of-type,
.wp-block-template-part:first-of-type > .site-header,
.wp-block-template-part:first-of-type > .site-header > .wp-block-group {
	border-bottom: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Semi-transparent dark green on ALL inner header elements on hero pages.
   Two levels deep to catch nested .wp-block-group wrappers. */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > *,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > * > * {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Override parent theme's .is-sticky-header background on hero pages.
   Parent rule (.wp-block-template-part.is-sticky-header > .site-header--mega:not(.is-transparent))
   has specificity 0,5,0 with !important — we need 0,6,1+ to beat it. */
body.has-hero-header .wp-block-template-part.is-sticky-header > .site-header.site-header--mega:not(.is-scrolled),
body.has-hero-header .site-header.site-header--mega.is-sticky-header:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Also override .has-surface-background-color from WordPress core (inline class on header div) */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type > .has-surface-background-color:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
}

/* Logo drop-shadow for extra contrast over hero images */
body.has-hero-header .site-header:not(.is-scrolled) .wp-block-site-title a {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
body .site-header.is-scrolled .wp-block-site-title a {
	filter: none;
}

/* Default nav text to white on hero pages (most heroes are dark).
   JS refines this with .is-hero-light / .is-hero-dark once loaded. */
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-site-title a,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation-item__content {
	color: var(--wp--preset--color--surface) !important;
}

/* Transparent when over hero (after JS adds .site-header--mega) */
.has-hero-header .site-header:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Solid dark green when scrolled past hero */
.has-hero-header .site-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Scrolled state: restore dark green on template part AND override parent sticky rules */
.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type:has(.is-scrolled) > * {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}
body.has-hero-header .wp-block-template-part.is-sticky-header > .site-header.site-header--mega.is-scrolled,
body.has-hero-header .site-header.site-header--mega.is-sticky-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Nav text is ALWAYS white — both on dark green bg and transparent over hero.
   Hero light/dark distinction no longer needed since bg is always dark or transparent. */

/* ==========================================================================
   Sticky header — content offset on non-hero pages
   ========================================================================== */
/* Parent theme's :has()-based rule may not fire because view.js is dequeued.
   Our nav-dark-green.js sets --header-height and .is-sticky-header, so we
   replicate the padding-top offset for all non-hero pages. */
body:not(.has-hero-header) .wp-site-blocks {
	padding-top: var(--header-height, 70px) !important;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.yoast-breadcrumbs,
.yoast-breadcrumbs a {
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.yoast-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
}

/* Breadcrumb band contentSize is set to 1200px in parts/breadcrumbs.html
   to align with the hero-inner max-width. */

/* Hide ⌘K keyboard shortcut tooltip on search icon */
.search-autocomplete__kbd {
	display: none !important;
}


/* ==========================================================================
   Block CSS class fix
   Parent theme SCSS uses .wp-block-agoodsite-* but WordPress generates
   .wp-block-agoodsite-fse-* from the block name "agoodsite-fse/*".
   These rules bridge the gap until parent theme SCSS is corrected.
   ========================================================================== */

/* --- Hero Advanced --- */
.wp-block-agoodsite-fse-hero-advanced {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__background {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	will-change: transform;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__background--video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.wp-block-agoodsite-fse-hero-advanced video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.wp-block-agoodsite-fse-hero-advanced .hero-advanced__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--section, 4rem) var(--wp--preset--spacing--md, 1.5rem);
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--align-center .hero-advanced__content {
	text-align: center;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--align-left .hero-advanced__content {
	text-align: left;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-center {
	align-items: center;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-top {
	align-items: flex-start;
}

.wp-block-agoodsite-fse-hero-advanced.hero-advanced--valign-bottom {
	align-items: flex-end;
}

/* ==========================================================================
   Color specificity fix
   WordPress generates both .has-surface-color and .has-text-color with
   !important. Since .has-text-color comes last it wins, overriding the
   intended preset color. Higher specificity resolves the conflict.
   ========================================================================== */
.has-surface-color.has-text-color {
	color: var(--wp--preset--color--surface) !important;
}

.has-primary-color.has-text-color {
	color: var(--wp--preset--color--primary) !important;
}

.has-surface-alt-color.has-text-color {
	color: var(--wp--preset--color--surface-alt) !important;
}

.has-secondary-color.has-text-color {
	color: var(--wp--preset--color--secondary) !important;
}

.has-accent-color.has-text-color {
	color: var(--wp--preset--color--accent) !important;
}

.has-text-muted-color.has-text-color {
	color: var(--wp--preset--color--text-muted) !important;
}

.has-surface-background-color.has-background {
	background-color: var(--wp--preset--color--surface) !important;
}

.has-primary-background-color.has-background {
	background-color: var(--wp--preset--color--primary) !important;
}

.has-primary-dark-background-color.has-background {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

.has-secondary-background-color.has-background {
	background-color: var(--wp--preset--color--secondary) !important;
}

.has-surface-alt-background-color.has-background {
	background-color: var(--wp--preset--color--surface-alt) !important;
}

.has-text-background-color.has-background {
	background-color: var(--wp--preset--color--text) !important;
}

/* --- Cover block title readability --- */
.wp-block-cover .wp-block-post-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* --- Site title → Logo replacement --- */
.wp-block-site-title {
	display: flex;
	align-items: center;
	line-height: 1;
}
.wp-block-site-title a {
	text-decoration: none;
	font-size: 0 !important;
	display: block;
	width: 140px;
	height: 48px;
	background: url(../images/trahus-logo-cropped@2x.png) no-repeat center / contain;
}

/* ==========================================================================
   Global nav — Dark green header with white logo/text
   ========================================================================== */

/* Default: dark green background on all pages.
   body prefix adds 0,0,1 to beat parent's equal-specificity rules. */
body .site-header.site-header--mega {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Taller nav: generous padding (compare Mannerheimmuseet) */
.site-header .wp-block-group[style*="padding-top"] {
	padding-top: 1.1rem !important;
	padding-bottom: 1.1rem !important;
}

/* White text/icons by default (dark green bg) — top-level nav only */
.site-header .wp-block-navigation-item__content {
	color: #fff !important;
}
/* Dark text in dropdown/submenu (white background) */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #333 !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #111 !important;
}

/* Keep every core dropdown readable against its white panel, even when the
   header state applies white top-level navigation text. */
.site-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container *,
.site-header .wp-block-navigation__submenu-container a,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container *,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
body.has-hero-header .wp-site-blocks > .wp-block-template-part:first-of-type .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
}

.site-header .wp-block-navigation__submenu-container {
	background: #fff !important;
}

.site-header .wp-block-navigation__submenu-container a:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620) !important;
	-webkit-text-fill-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}
/* Submenu caret/arrow — white at top level */
.site-header .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-icon svg,
.site-header .wp-block-navigation__submenu-icon path {
	color: #fff !important;
	fill: #fff !important;
	stroke: #fff !important;
	opacity: 0.85;
}
/* Submenu caret inside dropdown — dark */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon path {
	color: #333 !important;
	fill: #333 !important;
	stroke: #333 !important;
	opacity: 1;
}
.site-header .search-autocomplete__trigger,
.site-header .search-autocomplete__trigger svg {
	color: #fff !important;
}

/* Override WordPress inline .has-surface-background-color on the header div */
body .site-header.has-surface-background-color.has-background {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Parent theme's .is-sticky-header rule — override to dark green (all states).
   Parent has up to 0,6,0 specificity with .has-hero — we use body + matching
   selectors to reach 0,6,1 or 0,7,1 and always win. */
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega,
body .site-header.site-header--mega.is-sticky-header,
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega.is-scrolled,
body .site-header.site-header--mega.is-sticky-header.is-scrolled,
body .wp-block-template-part.is-sticky-header > .site-header.site-header--mega:not(.is-transparent),
body .site-header.site-header--mega.is-sticky-header:not(.is-transparent),
body .wp-block-template-part.is-sticky-header.has-hero > .site-header.site-header--mega.is-scrolled,
body .wp-block-template-part.is-sticky-header.has-hero > .site-header.site-header--mega:not(.is-transparent) {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
	box-shadow: none !important;
}

/* Catch-all: ANY .site-header with .is-scrolled — dark green always */
body .site-header.is-scrolled {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Scrolled template part wrapper background — always dark green */
body .wp-site-blocks > .wp-block-template-part:first-of-type:has(.is-scrolled) > * {
	background: var(--wp--preset--color--primary-dark, #1E4620) !important;
	background-color: var(--wp--preset--color--primary-dark, #1E4620) !important;
}

/* Language switcher: white text */
.site-header .polylang-switcher a,
.site-header .wp-block-group a[hreflang] {
	color: #fff !important;
}

/* --- Navigation: font + spacing --- */
.wp-block-agoodsite-fse-navigation-mega .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--soehne) !important;
}

/* Ensure nav items have proper gap — child theme strips responsive container
   which can lose the flex gap set by parent theme */
.nav-mega .wp-block-navigation .wp-block-navigation__container,
.nav-mega .wp-block-navigation ul.wp-block-navigation__container {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md, 1.5rem) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Mega Menu — Projekt dropdown
   ========================================================================== */

/* The <li> must be static so the panel positions relative to the nav bar */
.wp-block-navigation-item.has-mega-panel {
	position: static !important;
}

/* Toggle chevron button (always present, styled for mobile) */
.trahus-mega-panel__toggle {
	display: none; /* Hidden on desktop */
	background: none;
	border: none;
	color: #fff;
	padding: 0.5rem;
	cursor: pointer;
	line-height: 1;
}

/* --- Mega panel positioning --- */
/* The <li> stays position:relative so hover covers the panel.
   Panel is centered in the viewport via left:50vw + translateX(-50%). */
.has-mega-panel {
	position: relative !important;
}

/* --- Shared Panel: desktop dropdown --- */
.trahus-mega-panel {
	position: absolute;
	top: 100%;
	/* Center in viewport regardless of <li> position */
	left: 50vw;
	right: auto;
	transform: translateX(-50%);
	width: min(1200px, 94vw);
	margin-top: 0;
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
	padding: var(--wp--preset--spacing--lg, 2rem);
	opacity: 0;
	visibility: hidden;
	/* Keep pointer-events active so mouseleave doesn't trigger during hover */
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 1000;
}

/* Triangle arrow pointing up — positioned via JS --arrow-x or centered */
.trahus-mega-panel::after {
	content: '';
	position: absolute;
	top: -8px;
	left: var(--arrow-x, 50%);
	transform: translateX(-50%);
	width: 16px;
	height: 8px;
	background: var(--wp--preset--color--surface, #fff);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	z-index: 1;
}

.has-mega-panel.is-open > .trahus-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* --- Columns grid --- */
.trahus-mega-panel__columns {
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-mega-projekt__columns {
	grid-template-columns: 1fr 1fr 1fr 1.3fr;
}

.trahus-mega-omoss__columns {
	grid-template-columns: 1fr 1.4fr 1fr;
}

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

.trahus-mega-kunskap__columns {
	grid-template-columns: 1.5fr 1fr 1fr;
}

/* Reset nav uppercase — mega panel content should be normal case.
   core/navigation in theme.json sets text-transform: uppercase. */
.trahus-mega-panel {
	text-transform: none;
}

/* --- Column title --- */
.trahus-mega-panel__title {
	font-family: var(--wp--preset--font-family--soehne, system-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.75rem 0;
	padding: 0;
}

.trahus-mega-panel__title a {
	color: inherit;
	text-decoration: none;
}

.trahus-mega-panel__title a:hover {
	color: var(--wp--preset--color--text, #1a1a1a);
}

/* --- Link list --- */
.trahus-mega-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trahus-mega-panel__links li {
	margin: 0;
	padding: 0;
}

.trahus-mega-panel__links a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s, padding-left 0.15s;
}

.trahus-mega-panel__links a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--wp--preset--color--primary, #2C5F2D);
	opacity: 0;
	transition: opacity 0.15s, margin-right 0.15s;
	margin-right: -5px;
	flex-shrink: 0;
}

.trahus-mega-panel__links a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
	padding-left: 4px;
}

.trahus-mega-panel__links a:hover::before {
	opacity: 1;
	margin-right: 0;
}

/* --- Count bubble --- */
.trahus-mega-panel__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.35em;
	margin-left: auto;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--text-muted, #999);
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	border-radius: 999px;
	flex-shrink: 0;
}

/* --- Featured projects (Projekt panel) --- */
.trahus-mega-panel__featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.trahus-mega-panel__card {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	transition: opacity 0.15s;
}

.trahus-mega-panel__card:hover {
	opacity: 0.85;
}

.trahus-mega-panel__card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.trahus-mega-panel__card-title {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

.trahus-mega-panel__card-meta {
	display: block;
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-muted, #999);
}

/* --- Footer --- */
.trahus-mega-panel__footer {
	margin-top: var(--wp--preset--spacing--md, 1.5rem);
	padding-top: var(--wp--preset--spacing--sm, 0.75rem);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	text-align: right;
}

.trahus-mega-panel__view-all {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
}

.trahus-mega-panel__view-all:hover {
	text-decoration: underline;
}

/* --- Om oss: Team members --- */
.trahus-mega-omoss__team {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.trahus-mega-omoss__member {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	transition: opacity 0.15s;
}

.trahus-mega-omoss__member:hover {
	opacity: 0.8;
}

.trahus-mega-omoss__member img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.trahus-mega-omoss__member-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	flex-shrink: 0;
}

.trahus-mega-omoss__member-info {
	display: flex;
	flex-direction: column;
}

.trahus-mega-omoss__member-name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.trahus-mega-omoss__member-role {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted, #999);
}

/* --- Om oss: Contact info --- */
.trahus-mega-omoss__contact {
	margin-bottom: 0.25rem;
}

.trahus-mega-omoss__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.5rem 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text, #1a1a1a);
	line-height: 1.4;
}

.trahus-mega-omoss__contact-item svg {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-mega-omoss__contact-item a {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	text-decoration: none;
}

.trahus-mega-omoss__contact-item a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D) !important;
}

/* --- Mobile: stack columns, show toggle --- */
@media (max-width: 1023px) {
	.trahus-mega-panel__toggle {
		display: inline-flex;
		align-items: center;
	}

	.trahus-mega-panel {
		position: static;
		width: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0 1rem;
		border-radius: 0;
		display: none;
		z-index: auto;
	}

	.trahus-mega-panel::before,
	.trahus-mega-panel::after {
		display: none;
	}

	.has-mega-panel.is-open > .trahus-mega-panel {
		display: block;
		transform: none;
	}

	.trahus-mega-panel__columns {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Hide featured column on mobile to keep menu compact */
	.trahus-mega-panel__column--featured {
		display: none;
	}

	.trahus-mega-panel__title {
		color: var(--wp--preset--color--text, #1a1a1a);
	}

	.trahus-mega-panel__links a {
		padding: 0.4rem 0;
	}

	.trahus-mega-panel__footer {
		text-align: left;
		border-top: none;
		padding-top: 0;
	}
}

/* --- Inside mobile nav drawer --- */
.mobile-nav__drawer .trahus-mega-panel {
	position: static;
	width: auto;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	box-shadow: none;
	background: transparent;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-radius: 0;
	z-index: auto;
}

.mobile-nav__drawer .trahus-mega-panel__columns {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.mobile-nav__drawer .trahus-mega-panel__column--featured {
	display: none;
}

/* ==========================================================================
 * Team Grid
 * ========================================================================== */
.trahus-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	padding: var(--wp--preset--spacing--md, 1.5rem) var(--wp--preset--spacing--sm, 0.75rem);
	border-radius: 8px;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.trahus-team-card:hover {
	background-color: var(--wp--preset--color--surface-alt, #f0ede8);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.trahus-team-card__avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1rem;
	transition: transform 0.25s;
}

.trahus-team-card:hover .trahus-team-card__avatar {
	transform: scale(1.05);
}

.trahus-team-card__avatar img,
.trahus-team-card__avatar svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trahus-team-card__name {
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	line-height: 1.3;
}

.trahus-team-card__role {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.5rem 0;
}

.trahus-team-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	margin-top: 0.25rem;
}

.trahus-team-card__tag {
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0.2em 0.6em;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	color: var(--wp--preset--color--text-muted, #999);
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.trahus-team-card:hover .trahus-team-card__tag {
	background: var(--wp--preset--color--surface, #fff);
}

.trahus-team-card__contact {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text-muted, #999);
	opacity: 0;
	transition: opacity 0.2s;
}

.trahus-team-card:hover .trahus-team-card__contact {
	opacity: 1;
}

/* Compact variant for team-on-project (fewer members, smaller cards) */
.trahus-team-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.trahus-team-grid--compact .trahus-team-card__avatar {
	width: 110px;
	height: 110px;
}

@media (max-width: 1023px) {
	.trahus-team-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--md, 1.5rem);
	}
}

@media (max-width: 767px) {
	.trahus-team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--sm, 0.75rem);
	}

	.trahus-team-card__avatar {
		width: 100px;
		height: 100px;
	}
}

/* ==========================================================================
 * Single Team Member Header
 * ========================================================================== */
.trahus-member-header {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--wp--preset--spacing--xl, 2.5rem);
	align-items: start;
}

.trahus-member-header__photo {
	border-radius: var(--wp--custom--radius--lg, 12px);
	overflow: hidden;
	aspect-ratio: 1;
}

.trahus-member-header__photo img,
.trahus-member-header__photo svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trahus-member-header__name {
	font-size: var(--wp--preset--font-size--3xl, 2.5rem);
	font-weight: 700;
	margin: 0 0 0.25rem 0;
	line-height: 1.15;
	color: var(--wp--preset--color--text, #1a1a1a);
}

.trahus-member-header__role {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 1rem 0;
	font-weight: 400;
}

.trahus-member-header__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.trahus-member-header__tag {
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	padding: 0.3em 0.8em;
	background: var(--wp--preset--color--surface-alt, #f0ede8);
	color: var(--wp--preset--color--text-muted, #666);
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.trahus-member-header__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.trahus-member-header__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text, #1a1a1a);
	text-decoration: none;
	transition: color 0.2s;
}

.trahus-member-header__contact-item:hover {
	color: var(--wp--preset--color--primary, #1E4620);
}

.trahus-member-header__contact-item svg {
	color: var(--wp--preset--color--text-muted, #999);
	flex-shrink: 0;
}

.trahus-lightbox-people,
.trahus-lightbox-people-editor {
	margin-top: var(--wp--preset--spacing--md, 1.5rem);
	padding-top: var(--wp--preset--spacing--sm, 0.75rem);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.trahus-lightbox-people h3,
.trahus-lightbox-people-editor h3 {
	margin: 0 0 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #796A4F);
}

.trahus-lightbox-people__list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.trahus-lightbox-people__person {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.55rem 0.65rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--text, #1a1a1a);
	text-decoration: none;
}

.trahus-lightbox-people__person:hover {
	border-color: rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.8);
}

.trahus-lightbox-people__name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
}

.trahus-lightbox-people__role {
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted, #595959);
}

.trahus-lightbox-people-editor__option {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.22rem 0;
	font-size: 0.82rem;
	line-height: 1.35;
	cursor: pointer;
}

.trahus-lightbox-people-editor {
	max-height: 15rem;
	overflow-y: auto;
	padding-right: 0.35rem;
}

.trahus-lightbox-people-editor__status,
.trahus-lightbox-people-editor__save {
	margin: 0.4rem 0 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-muted, #595959);
}

@media (max-width: 767px) {
	.trahus-member-header {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--md, 1.5rem);
	}

	.trahus-member-header__photo {
		max-width: 200px;
	}

	.trahus-member-header__name {
		font-size: var(--wp--preset--font-size--2xl, 2rem);
	}
}

/* --- Sidebar Navigation --- */
.trahus-sidebar-nav {
	position: sticky;
	top: calc(var(--wp--preset--spacing--lg, 2rem) + 80px);
}

.trahus-sidebar-nav__title {
	font-family: var(--wp--preset--font-family--soehne, system-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0 0 0.75rem 0;
	padding: 0 0 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.trahus-sidebar-nav__title a {
	color: inherit;
	text-decoration: none;
}

.trahus-sidebar-nav__title a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D);
}

.trahus-sidebar-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trahus-sidebar-nav__item {
	margin: 0;
	padding: 0;
}

.trahus-sidebar-nav__item a {
	display: block;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--text, #1a1a1a);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
}

.trahus-sidebar-nav__item a:hover {
	color: var(--wp--preset--color--primary, #2C5F2D);
}

.trahus-sidebar-nav__item.is-current a {
	color: var(--wp--preset--color--primary, #2C5F2D);
	font-weight: 600;
	border-left-color: var(--wp--preset--color--primary, #2C5F2D);
}

@media (max-width: 781px) {
	.trahus-sidebar-nav {
		position: static;
		margin-top: var(--wp--preset--spacing--lg, 2rem);
		padding-top: var(--wp--preset--spacing--md, 1rem);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
}

/* --- Card Feature --- */
.wp-block-agoodsite-fse-card-feature {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: var(--wp--custom--radius--md, 8px);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-agoodsite-fse-card-feature.card-feature--vertical {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wp-block-agoodsite-fse-card-feature.card-feature--hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wp-block-agoodsite-fse-card-feature .card-feature__content {
	padding: var(--wp--preset--spacing--md, 1.5rem);
}

.wp-block-agoodsite-fse-card-feature .card-feature__image-wrapper {
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}

.wp-block-agoodsite-fse-card-feature .card-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-agoodsite-fse-card-feature.card-feature--ratio-16-9 .card-feature__image-wrapper {
	aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Masonry Query — gap + filter overrides
   ========================================================================== */

/* Restore full-width centering offset.
   WordPress's has-global-padding layout CSS overrides the plugin's
   margin-left: calc(50% - 50vw) to 0 when inside a padded container,
   while width: 100vw stays intact — causing a 17px right-side overflow
   on mobile. !important restores the intended centering offset. */
.wp-block-goodblocks-masonry-query {
	margin-left: calc(50% - 50vw) !important;
}

/* Never show borders or outlines on masonry images */
.wp-block-goodblocks-masonry-query .masonry-query__item,
.wp-block-goodblocks-masonry-query .masonry-query__item:focus,
.wp-block-goodblocks-masonry-query .masonry-query__item:focus-visible,
.wp-block-goodblocks-masonry-query .masonry-query__item:active,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper,
.wp-block-goodblocks-masonry-query .masonry-query__image-wrapper img {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Fallback for masonry on iOS Safari.
   GSAP animation sets inline opacity:0 on items. If GSAP or the
   IntersectionObserver fails on iOS, items stay invisible forever.
   This forces visibility regardless of inline styles from JS.

   The [style] selector boosts specificity to beat inline styles
   combined with !important. This is the only way CSS can override
   element.style.opacity set by JavaScript. */
.wp-block-goodblocks-masonry-query .masonry-query__item {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* Responsive masonry columns — more columns on wider screens */
@media (min-width: 1440px) {
	.masonry-query .masonry-query__grid {
		--masonry-cols-desktop: 5;
	}
}

@media (min-width: 1920px) {
	.masonry-query .masonry-query__grid {
		--masonry-cols-desktop: 6;
	}
}

/* Active filter button: white text on primary background */
.masonry-query__filter.portfolio-meta__pill.is-active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Masonry items — custom cursor (diagonal arrow in dark circle).
   Applied to ALL masonry items and descendants for consistent hover. */
.wp-block-goodblocks-masonry-query .masonry-query__item,
.wp-block-goodblocks-masonry-query .masonry-query__item *,
.trahus-person-gallery .masonry-query__item,
.trahus-person-gallery .masonry-query__item * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='rgba(0,0,0,0.7)'/%3E%3Cpath d='M12 20L20 12M20 12H14M20 12V18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer !important;
}

/* Caption text in masonry overlay — appears on hover */
.masonry-query__caption-text {
	color: #fff;
	font-family: var(--wp--preset--font-family--soehne, system-ui);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}



/* ==========================================================================
   Breadcrumb — full-bleed background
   Template uses alignfull + constrained layout, so the inner content
   automatically aligns with the header at contentSize (1200px).
   ========================================================================== */

/* ==========================================================================
   Projekt Info Strip — compact horizontal metadata bar
   ========================================================================== */
.projekt-info-strip__item + .projekt-info-strip__item::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--md, 1.5rem);
	color: var(--wp--preset--color--text-muted);
	font-weight: 700;
}

/* Hide items where Block Bindings returns empty meta */
.projekt-info-strip__item:has(p:empty) {
	display: none;
}

/* Hide entire strip if all items are empty */
.projekt-info-strip:has(.projekt-info-strip__item:not([style*="display: none"])):not(:has(.projekt-info-strip__item p:not(:empty))) {
	display: none;
}

/* Also hide when no visible children at all */
.projekt-info-strip:not(:has(a)):not(:has(p:not(:empty))) {
	display: none;
}

/* Taxonomy term pills */
.projekt-info-strip .wp-block-post-terms a {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	transition: background-color 0.2s ease;
}

.projekt-info-strip .wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* Term separator (comma) — hide and use gap instead */
.projekt-info-strip .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* Tjänster — subtle outline pills below info strip */
.projekt-tjanster .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.projekt-tjanster .wp-block-post-terms a {
	display: inline-block;
	padding: 0.2em 0.65em;
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	color: var(--wp--preset--color--text-muted, #666);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.projekt-tjanster .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	background: rgba(var(--wp--preset--color--primary-rgb, 0, 0, 0), 0.04);
}

.projekt-tjanster .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* ==========================================================================
   Projekt Gallery — CSS columns masonry for gallery block
   Overrides the default WP gallery grid on single-projekt pages.
   ========================================================================== */
.type-projekt .wp-block-gallery.has-nested-images,
.projekt-gallery.wp-block-gallery.has-nested-images {
	display: block !important;
	column-count: 4;
	column-gap: 16px;
}

@media (min-width: 1800px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 6;
	}
}

@media (min-width: 1400px) and (max-width: 1799px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 4;
	}
}

@media (max-width: 1399px) and (min-width: 769px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 3;
	}
}

@media (max-width: 768px) {
	.type-projekt .wp-block-gallery.has-nested-images,
	.projekt-gallery.wp-block-gallery.has-nested-images {
		column-count: 2;
	}
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image {
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm, 4px);
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image img,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.type-projekt .wp-block-gallery.has-nested-images .wp-block-image:hover img,
.projekt-gallery.wp-block-gallery.has-nested-images .wp-block-image:hover img {
	transform: scale(1.03);
}

/* ==========================================================================
   Language Switcher — compact dropdown in header
   ========================================================================== */
.trahus-lang-switcher {
	position: relative;
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

.trahus-lang-switcher__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: none;
	color: #fff !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	letter-spacing: 0.08em;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.trahus-lang-switcher__toggle:hover {
	opacity: 1;
}

.trahus-lang-switcher__toggle svg {
	opacity: 0.7;
	transition: transform 0.2s, opacity 0.2s;
}

.trahus-lang-switcher__toggle:hover svg {
	opacity: 1;
}

.trahus-lang-switcher.is-open .trahus-lang-switcher__toggle svg {
	transform: rotate(180deg);
}

.trahus-lang-switcher__menu {
	display: none !important;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 176px;
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	padding: 4px !important;
	margin: 0 !important;
	list-style: none !important;
	z-index: 1000;
}

.trahus-lang-switcher.is-open .trahus-lang-switcher__menu {
	display: block !important;
}

.trahus-lang-switcher__menu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.trahus-lang-switcher__menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: #1a1a1a !important;
	text-decoration: none;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-family: var(--wp--preset--font-family--soehne);
	transition: background 0.15s;
	white-space: nowrap;
}

.trahus-lang-switcher__menu a:hover {
	background: var(--wp--preset--color--surface-alt, #f5f5f5);
}

.trahus-lang-switcher__code {
	display: inline-flex;
	min-width: 2.1em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #595959;
	text-transform: uppercase;
}

.trahus-lang-switcher__name {
	color: #1a1a1a;
	font-weight: 500;
}

.trahus-lang-switcher__flag {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: middle;
}

.trahus-lang-switcher__flag svg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.trahus-lang-switcher__no-translation {
	opacity: 0.82;
}

/* Hide ALL WP Core navigation responsive/mobile infrastructure.
   We use our own mobile-nav__* drawer injected by child theme. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: none !important;
}
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-dialog {
	display: contents !important;
}
.nav-mega .wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	background: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open {
	display: contents !important;
}

/* Hamburger — always white lines on dark green header. */
.mobile-nav__trigger {
	color: #fff !important;
}
.mobile-nav__trigger .mobile-nav__hamburger,
.mobile-nav__trigger .mobile-nav__hamburger::before,
.mobile-nav__trigger .mobile-nav__hamburger::after {
	background-color: #fff !important;
}

/* Pull search icon closer to hamburger on mobile */
@media (max-width: 1024px) {
	.site-header .search-autocomplete {
		margin-right: -0.25rem;
	}
}

/* Hide desktop language switcher on mobile — mobile nav has its own */
@media (max-width: 1023px) {
	.trahus-lang-switcher {
		display: none !important;
	}
}

/* Mobile nav drawer — child theme fallback styles
   (parent theme's view.js may not initialize on iOS Safari) */
.mobile-nav__drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(85vw, 360px);
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 10001;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: env(safe-area-inset-top, 0);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav__drawer.is-open {
	transform: translateX(0);
}
.mobile-nav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.mobile-nav__overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.mobile-nav__header {
	display: flex;
	justify-content: flex-end;
	padding: 1rem;
}
.mobile-nav__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	color: #333;
}
.mobile-nav__close svg {
	width: 24px;
	height: 24px;
}
.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0 1.5rem;
}
.mobile-nav__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-nav__link {
	display: block;
	padding: 0.9rem 0;
	color: #333;
	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 500;
}
.mobile-nav__link:hover {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}
/* Prevent body scroll when drawer is open */
html.has-mobile-nav-open {
	overflow: hidden;
}

/* Mobile nav language switcher */
.mobile-nav__lang {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-nav__lang-link {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #555;
	text-decoration: none;
}

.mobile-nav__lang-link.is-active {
	color: var(--wp--preset--color--primary-dark, #1E4620);
	border-bottom: 2px solid currentColor;
}

.mobile-nav__lang-link.no-translation {
	opacity: 0.35;
}

/* Hide lang switcher and search when mobile nav drawer is open */
html.has-modal-open .trahus-lang-switcher,
html.has-modal-open .wp-block-agoodsite-fse-search-autocomplete,
.nav-mega.is-open ~ .trahus-lang-switcher,
.nav-mega.is-open ~ .wp-block-agoodsite-fse-search-autocomplete {
	display: none !important;
}

/* ==========================================================================
   Lightbox — white theme override
   ========================================================================== */
.masonry-modal__backdrop {
	background: #f5f5f3 !important;
}

.masonry-modal__container {
	background: #f5f5f3 !important;
}

.masonry-modal__media {
	background: #f5f5f3;
}

.masonry-modal__sidebar {
	background: #f5f5f3 !important;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	border-left-color: rgba(0, 0, 0, 0.06) !important;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.masonry-modal__sidebar .agoodsite-lb-editor__toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #f5f5f3;
	padding-top: 0.35rem;
}

.masonry-modal__sidebar .agoodsite-lb-editor {
	padding-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.masonry-modal__title {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal__excerpt {
	color: var(--wp--preset--color--text-muted, #666) !important;
}

.masonry-modal__tags .portfolio-meta__pill {
	background: rgba(0, 0, 0, 0.04) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
	color: var(--wp--preset--color--text-muted, #555) !important;
}

.masonry-modal__tags .portfolio-meta__pill:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal__read-more {
	color: var(--wp--preset--color--text-muted, #888) !important;
}

.masonry-modal__read-more:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

.masonry-modal__caption {
	color: rgba(0, 0, 0, 0.4) !important;
}

.masonry-modal__meta {
	color: rgba(0, 0, 0, 0.3) !important;
}

.masonry-modal__counter {
	color: rgba(0, 0, 0, 0.3) !important;
}

.masonry-modal__nav {
	color: rgba(0, 0, 0, 0.35) !important;
	transition: color 0.2s, transform 0.2s;
}

.masonry-modal__nav:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

/* Pulse hint on next arrow at first open */
.masonry-modal__nav.trahus-nav-pulse {
	animation: trahus-nav-pulse 0.8s ease-in-out 3;
}

@keyframes trahus-nav-pulse {
	0%, 100% { transform: translateX(0); opacity: 0.35; }
	50% { transform: translateX(6px); opacity: 1; }
}

/* Keyboard shortcut tooltip */
.trahus-lightbox-keytip {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 6px;
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--soehne, system-ui);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 100;
}

.trahus-lightbox-keytip.is-visible {
	opacity: 1;
}

.trahus-lightbox-keytip__key {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	padding: 0.1em 0.4em;
	font-size: 0.85em;
	min-width: 1.4em;
	text-align: center;
}

.masonry-modal__close {
	color: rgba(0, 0, 0, 0.35) !important;
}

.masonry-modal__close:hover {
	color: var(--wp--preset--color--text, #1a1a1a) !important;
}

@media (max-width: 768px) {
	/* Lightbox mobile: fullscreen, no bleed-through. */
	.masonry-modal__backdrop {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000 !important;
	}

	.masonry-modal__container {
		position: fixed !important;
		inset: 0 !important;
		max-height: 100dvh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		display: flex;
		flex-direction: column;
	}

	.masonry-modal__media {
		flex-shrink: 0;
		max-height: 55dvh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.masonry-modal__image {
		max-height: 55dvh !important;
		width: auto !important;
		max-width: 100% !important;
		object-fit: contain !important;
	}

	.masonry-modal__sidebar {
		flex: 0 0 auto;
		border-top-color: rgba(0, 0, 0, 0.08) !important;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Mobile: only show title + link, hide everything else. */
	.masonry-modal__excerpt,
	.masonry-modal__caption,
	.masonry-modal__meta,
	.masonry-modal__tags,
	.trahus-lightbox-meta {
		display: none !important;
	}

	.masonry-modal__close {
		position: fixed !important;
		top: env(safe-area-inset-top, 0.5rem) !important;
		right: 0.5rem !important;
		z-index: 100001 !important;
	}

	.masonry-modal__nav {
		position: fixed !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 100001 !important;
	}
}

/* ==========================================================================
   Search Autocomplete — complete child theme override
   Clean white box with shadow enclosing input + close + results.
   ========================================================================== */

/* --- Override search-focus color variable to neutral --- */
.search-autocomplete {
	--search-focus: rgba(0, 0, 0, 0.2) !important;
}

/* --- Kill ALL inherited outlines/focus styles inside search --- */
.search-autocomplete *:focus,
.search-autocomplete *:focus-visible,
.search-autocomplete *:focus-within {
	outline: none !important;
	box-shadow: none !important;
}

/* --- The overlay form: unified white box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__form {
	background: #fff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden;
	column-gap: 0 !important;
	z-index: 1005 !important;
}

/* --- Input field: borderless inside the white box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__field,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus-within,
.search-autocomplete--expandable.is-expanded .search-autocomplete__field:focus-visible {
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	background: transparent !important;
	height: 56px;
	border-radius: 0 !important;
	outline: none !important;
}

/* Kill green border on the input itself */
.search-autocomplete--expandable.is-expanded .search-autocomplete__input,
.search-autocomplete--expandable.is-expanded .search-autocomplete__input:focus,
.search-autocomplete--expandable.is-expanded input[type="search"]:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --- Search icon: hide in expanded state --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__field-icon {
	display: none !important;
}

/* --- Input text: ALWAYS dark, visible, full-width --- */
.search-autocomplete__input,
.search-autocomplete input[type="search"] {
	color: #111 !important;
	caret-color: #111 !important;
	-webkit-text-fill-color: #111 !important;
	font-family: var(--wp--preset--font-family--soehne, system-ui) !important;
	font-size: 1.05rem !important;
}

/* Override nav-mega CSS that starts input at opacity:0/width:0.
   In expandable mode the container gets .is-expanded, not the input. */
.search-autocomplete--expandable.is-expanded .search-autocomplete__input {
	opacity: 1 !important;
	width: 100% !important;
	padding: 0 var(--wp--preset--spacing--md, 1.5rem) !important;
}

.search-autocomplete__input::placeholder {
	color: #999 !important;
	-webkit-text-fill-color: #999 !important;
}

/* --- Close button: flush inside the box --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__close {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: #999 !important;
	transition: color 0.15s;
}

.search-autocomplete--expandable.is-expanded .search-autocomplete__close:hover {
	color: #111 !important;
}

/* --- Divider between input and close --- */
.search-autocomplete--expandable.is-expanded .search-autocomplete__close::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: rgba(0, 0, 0, 0.08);
}

/* --- Results: inside the box, below the input --- */
.search-autocomplete--expandable .search-autocomplete__results {
	position: relative !important;
	top: auto !important;
	grid-column: 1 / -1;
	width: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	background: #fff !important;
	max-height: min(55vh, 480px) !important;
	/* Override nav-mega compiled CSS that hides results via opacity/visibility.
	   Parent theme JS uses [hidden] attr to hide — we rely on that instead. */
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.search-autocomplete--expandable .search-autocomplete__results[hidden] {
	display: none !important;
}

/* --- Result items --- */
.search-autocomplete__result-link {
	color: #111 !important;
}

.search-autocomplete__result-link:hover,
.search-autocomplete__result.is-selected .search-autocomplete__result-link {
	background: #f8f6f3 !important;
}

.search-autocomplete__type {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #888 !important;
	border-radius: 4px !important;
	font-family: var(--wp--preset--font-family--soehne, 'Inter', system-ui) !important;
	font-size: 0.65rem !important;
	padding: 0.15em 0.5em !important;
	letter-spacing: 0.04em;
}

/* Hide tags/terms in autocomplete results — keep it clean */
.search-autocomplete__tags,
.search-autocomplete__terms {
	display: none !important;
}

.search-autocomplete__view-all {
	color: var(--wp--preset--color--primary) !important;
}

/* --- Hide the in-field clear button — the close button is enough --- */
.search-autocomplete__clear {
	display: none !important;
}

/* --- Backdrop: dark semi-transparent overlay on body ---
   Note: NO backdrop-filter blur — the backdrop is on document.body, and the
   search form is inside the header which has its own stacking context (transform).
   Blur would affect the search form too since it can't be z-indexed above. */
.search-autocomplete--expandable .search-autocomplete__backdrop {
	background: rgba(0, 0, 0, 0.65) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ==========================================================================
   Hero — Shared base styles
   ========================================================================== */
.trahus-hero {
	width: 100%;
}

.trahus-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
	color: inherit;
}

.trahus-hero__subtitle {
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 0.5rem 0;
}

/* Hero ingress — short description below title, above meta */
.trahus-hero__ingress {
	font-family: var(--wp--preset--font-family--body, Georgia, serif);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.9;
	margin: 0.75rem 0 0.5rem 0;
	max-width: 600px;
}

/* ==========================================================================
   Hero — Projekt variant: 2/3 color + 1/3 image
   Text left-edge aligned with content grid via padding-left.
   Image extends to right viewport edge.
   ========================================================================== */
.trahus-hero--projekt .trahus-hero__inner {
	display: grid !important;
	/* Image left edge aligns with sidebar left edge in 1200px 2/3+1/3 layout.
	   At 1440px: 720 + 233 − 27 ≈ 926px ≈ sidebar left edge. */
	grid-template-columns: calc(50vw + 233px - var(--wp--preset--spacing--xl, 2.5rem) * 2 / 3) 1fr !important;
	align-items: stretch !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: max(380px, 55vh);
}

.trahus-hero--projekt .trahus-hero__text {
	display: flex;
	align-items: center;
	padding: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px) var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--2xl, 5rem) max(calc(50vw - 600px), 1.5rem);
}

.trahus-hero--projekt .trahus-hero__text-content {
	max-width: 700px;
}

.trahus-hero--projekt .trahus-hero__meta {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 400;
	/* Removed opacity: 0.85 — reduces effective contrast below WCAG AA 4.5:1
	   when the hero background is the secondary color (#886E52). */
}

.trahus-hero--projekt .trahus-hero__meta-sep {
	margin: 0 0.5em;
	opacity: 0.5;
}

.trahus-hero--projekt .trahus-hero__image {
	position: relative;
	overflow: hidden;
}

.trahus-hero--projekt .trahus-hero__image > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Year-ring overlay — ring texture blended onto the photo */
.trahus-hero__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.trahus-hero__rings img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	mix-blend-mode: overlay;
}

/* Full-hero year-ring overlay (scope = hero) — covers entire hero */
.trahus-hero__rings--hero {
	z-index: 1;
}

/* ==========================================================================
   Hero — Bakgrund variant: full-bleed background image with gradient
   ========================================================================== */
.trahus-hero--bakgrund {
	position: relative;
	overflow: hidden;
}

.trahus-hero__bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.trahus-hero__bg-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bildspel — multiple stacked .trahus-hero__bg-image elements with cross-fade animation.
   Per-instance keyframes are emitted inline by patterns/hero-page.php since timing depends
   on slide count. Container needs overflow:hidden so Ken Burns scale doesn't bleed. */
.trahus-hero--bildspel {
	position: relative;
	overflow: hidden;
}

.trahus-hero--bildspel .trahus-hero__bg-image {
	transform-origin: center center;
}

.trahus-hero__bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
}

.trahus-hero--bakgrund .trahus-hero__rings--hero {
	z-index: 2;
}

.trahus-hero--bakgrund .trahus-hero__inner {
	position: relative;
	z-index: 3;
	display: flex !important;
	grid-template-columns: none !important;
	min-height: max(380px, 50vh);
	align-items: flex-end !important;
	padding-top: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px);
	padding-bottom: var(--wp--preset--spacing--2xl, 5rem);
	padding-left: max(calc(50vw - 550px), 1.5rem);
	padding-right: max(calc(50vw - 550px), 1.5rem);
}

/* ==========================================================================
   Hero — Left-aligned inner (for taxonomy/projekt archives)
   ========================================================================== */
/* Left-aligned hero text — padding-based centering instead of max-width
   so the text edge aligns with the 1200px logo container and content. */
.trahus-hero__inner--left {
	max-width: none;
	justify-content: flex-start;
	text-align: left;
	padding-left: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
	padding-right: max(calc(50vw - 600px), var(--wp--preset--spacing--md, 1.5rem));
}

/* ==========================================================================
   Hero — Archive/taxonomy variant (centered, optional circle image)
   ========================================================================== */
.trahus-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl, 3rem);
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--2xl, 5rem) var(--wp--preset--spacing--md, 1.5rem);
}

/* Extra top padding when header overlaps the hero */
.has-hero-header .trahus-hero--archive .trahus-hero__inner {
	padding-top: calc(var(--wp--preset--spacing--2xl, 5rem) + 60px);
}

/* --- Circle image (default) --- */
.trahus-hero--archive .trahus-hero__image--cirkel {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: 50%;
	overflow: hidden;
}

/* --- Square image --- */
.trahus-hero--archive .trahus-hero__image--kvadrat {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: var(--wp--custom--radius--md, 8px);
	overflow: hidden;
}

/* --- Year-ring image (same as projekt hero) --- */
.trahus-hero--archive .trahus-hero__image--arsringar {
	position: relative;
	flex: 0 0 auto;
	width: clamp(200px, 25vw, 340px);
	height: clamp(200px, 25vw, 340px);
	overflow: hidden;
	border-radius: 50%;
}

.trahus-hero--archive .trahus-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback for unclassed images */
.trahus-hero--archive .trahus-hero__image:not([class*="--"]) {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: 50%;
	overflow: hidden;
}

.trahus-hero__inner--centered {
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--md, 1.5rem);
}

.trahus-hero__text {
	flex: 1;
	min-width: 0;
}

.trahus-hero__text--centered {
	flex: none;
	max-width: 720px;
}

.trahus-hero__text--centered .trahus-hero__subtitle {
	margin: 0.75rem 0 0 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--wp--preset--font-size--md, 1rem);
}

.trahus-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	margin-bottom: 0.75rem;
}

.trahus-hero__meta-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7em;
	margin-right: 0.15em;
}

.trahus-hero__meta-sep {
	margin: 0 0.4em;
	opacity: 0.5;
}

.trahus-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 1rem;
}

.trahus-hero__pill {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--soehne);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: opacity 0.2s;
}

.trahus-hero__pill:hover {
	opacity: 0.8;
}

@media (max-width: 768px) {

	/* ── Projekt hero — stacked layout on mobile ─────────────────────── */

	.trahus-hero--projekt .trahus-hero__inner {
		grid-template-columns: 1fr !important;
		min-height: auto;
	}

	/* 4:3 image fills full width — consistent ratio regardless of content length.
	   Header overlaps the top portion (same as desktop). */
	.trahus-hero--projekt .trahus-hero__image {
		order: -1;
		aspect-ratio: 4 / 3;
		min-height: unset;
		max-height: unset;
	}

	/* Text area sits below image. Top/bottom padding is fluid.
	   Left/right align with the root content grid (same as logo and body text). */
	.trahus-hero--projekt .trahus-hero__text {
		padding: clamp(1.25rem, 4vw, 2rem)
		         var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem))
		         clamp(1.25rem, 4vw, 2rem);
		align-items: flex-start;
	}

	/* ── Archive / generic hero ───────────────────────────────────────── */

	.trahus-hero__inner {
		flex-direction: column;
		text-align: center;
		/* Use root padding so hero text aligns with logo and body text */
		padding: var(--wp--preset--spacing--xl, 2.5rem)
		         var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem));
	}

	.trahus-hero--archive .trahus-hero__image--cirkel,
	.trahus-hero--archive .trahus-hero__image--kvadrat,
	.trahus-hero--archive .trahus-hero__image--arsringar {
		width: 140px;
		height: 140px;
		order: -1;
	}

	.trahus-hero__subtitle {
		margin: 0 0 0.25rem 0;
	}

	.trahus-hero__pills {
		justify-content: center;
	}

	.trahus-hero__meta {
		justify-content: center;
	}

	/* Bakgrund hero mobile — image fills viewport, text overlays bottom. */
	.trahus-hero--bakgrund .trahus-hero__inner {
		min-height: max(240px, 40vh);
		max-height: 60vh;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		padding-top: calc(var(--header-height, 70px) + 1rem);
		padding-bottom: var(--wp--preset--spacing--lg, 1.5rem);
	}

	.trahus-hero--bakgrund .trahus-hero__title {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
	}

	.trahus-hero--bakgrund .trahus-hero__ingress {
		font-size: var(--wp--preset--font-size--sm, 0.875rem);
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Left-aligned stays left on mobile — use root padding for consistent alignment */
	.trahus-hero__inner--left {
		text-align: left;
		padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--md, 1rem));
		padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--md, 1rem));
	}

	.trahus-hero__inner--left .trahus-hero__meta {
		justify-content: flex-start;
	}
}

/* Hide stray masonry-query empty message rendered at body level */
body > .masonry-query__empty {
	display: none !important;
}

/* ==========================================================================
   Projekt Layout — three-column (content + meta + team)
   ========================================================================== */

/* Desktop: team column sticky alongside meta */
.projekt-layout__team {
	position: relative;
}

.projekt-layout__team .projekt-team-inline {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
}

@media (max-width: 1023px) {
	.projekt-layout__columns.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.projekt-layout__content {
		flex-basis: 100% !important;
	}

	/* Meta and team side by side on tablet */
	.projekt-layout__sidebar,
	.projekt-layout__team {
		flex-basis: 48% !important;
	}
}

@media (max-width: 600px) {
	.projekt-layout__sidebar,
	.projekt-layout__team {
		flex-basis: 100% !important;
	}
}

/* --- Inline team list (project sidebar) --- */
.projekt-team-inline {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
}

.projekt-team-inline__member {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a1a1a) !important;
	padding: 0.4rem 0;
	transition: opacity 0.15s;
}

.projekt-team-inline__member:hover {
	opacity: 0.75;
}

.projekt-team-inline__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.projekt-team-inline__avatar img,
.projekt-team-inline__avatar svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.projekt-team-inline__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.projekt-team-inline__name {
	font-size: 0.8rem;
	font-weight: 400;
	color: #1a1a1a;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.projekt-team-inline__role {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted, #595959);
	line-height: 1.3;
}

/* --- Faktaspalt (sidebar) --- */
.projekt-sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--lg, 2rem);
	font-family: var(--wp--preset--font-family--soehne);
}

.projekt-sidebar__section {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
}

.projekt-sidebar__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.projekt-sidebar__label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #888);
	margin: 0 0 0.5rem 0;
}

.projekt-sidebar__dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.75rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.projekt-sidebar__dl dt {
	color: var(--wp--preset--color--text-muted, #888);
	font-size: 0.75rem;
	font-weight: 500;
}

.projekt-sidebar__dl dd {
	margin: 0;
	font-weight: 500;
}

.projekt-sidebar__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.projekt-sidebar__term {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	color: var(--wp--preset--color--text-muted, #666);
	text-decoration: none;
	font-size: 0.7rem;
	font-weight: 500;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.projekt-sidebar__term:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	background: rgba(0, 0, 0, 0.02);
}

.projekt-sidebar__term--child {
	border-style: dashed;
	font-size: 0.65rem;
}

/* Tjänster — hierarchical layout */
.projekt-sidebar__tjanst-group {
	margin-bottom: 0.6em;
}
.projekt-sidebar__tjanst-group:last-child {
	margin-bottom: 0;
}
.projekt-sidebar__tjanst-parent {
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 0.15em;
	line-height: 1.3;
}
.projekt-sidebar__tjanst-parent a {
	color: inherit;
	text-decoration: none;
}
.projekt-sidebar__tjanst-parent a:hover {
	color: var(--wp--preset--color--primary);
}
.projekt-sidebar__tjanst-children {
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--text-muted, #666);
}
.projekt-sidebar__tjanst-children a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.projekt-sidebar__tjanst-children a:hover {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Gallery Lightbox — EXIF metadata in sidebar
   ========================================================================== */
.trahus-lightbox-meta {
	font-size: 0.7rem;
	color: hsla(0, 0%, 100%, 0.3);
	letter-spacing: 0.02em;
	line-height: 1.6;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--md, 1rem);
}

/* ==========================================================================
   Projekt Content — "Läs mer" collapsible for long descriptions
   ========================================================================== */
.projekt-content-wrap.is-collapsed .wp-block-post-content {
	max-height: 640px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.projekt-content-wrap .trahus-read-more-btn {
	display: none;
	margin: 1rem auto 0;
	padding: 0.5em 1.5em;
	background: var(--wp--preset--color--surface-alt, #f5f5f3);
	color: var(--wp--preset--color--text, #111);
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--soehne);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.projekt-content-wrap .trahus-read-more-btn:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

.projekt-content-wrap.is-collapsed .trahus-read-more-btn {
	display: block;
}

/* ==========================================================================
   Offerings Grid — 4 cols desktop, 2 cols tablet/mobile
   ========================================================================== */
@media (max-width: 1024px) {
	.offerings-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.offerings-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--md, 1.5rem) / 2) !important;
		flex-grow: 0 !important;
	}
}

/* ==========================================================================
   Nyheter (Blog) — News Grid
   ========================================================================== */
.trahus-news-grid .trahus-news-card {
	overflow: hidden;
	border-radius: 0;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.trahus-news-grid .trahus-news-card:hover {
	background-color: #f0ece6 !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.trahus-news-grid .wp-block-post-featured-image {
	overflow: hidden;
}

.trahus-news-grid .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.trahus-news-grid .trahus-news-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Title link — no underline, darken on hover */
.trahus-news-grid .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--text, #2D2D2D);
	transition: color 0.2s ease;
}
.trahus-news-grid .trahus-news-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

/* Category pill — uppercase label above title */
.trahus-news-grid .wp-block-post-terms a {
	text-decoration: none;
}

/* ==========================================================================
   Single Post — Article Layout
   ========================================================================== */

/* ==========================================================================
   Article Sidebar — projekt-style meta sections
   ========================================================================== */

/* Sidebar meta block — sticky on scroll */
.trahus-article-sidebar .trahus-article-meta {
	position: sticky;
	top: calc(var(--header-height, 70px) + var(--wp--preset--spacing--lg, 2rem));
	font-family: var(--wp--preset--font-family--soehne);
}

/* Section dividers — match projekt sidebar */
.trahus-article-meta__section {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
}

.trahus-article-meta__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Section labels — match projekt-sidebar__label */
.trahus-article-meta__label {
	margin: 0 0 0.25rem 0 !important;
}

/* Author block */
.trahus-article-meta .wp-block-post-author {
	gap: var(--wp--preset--spacing--sm, 0.75rem);
}

.trahus-article-meta .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.trahus-article-meta .wp-block-post-author__name {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.trahus-article-meta .wp-block-post-author__bio {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	color: var(--wp--preset--color--text-muted, #595959);
	margin-top: 0.25rem;
}

/* Category/tag links */
.trahus-article-meta .wp-block-post-terms a {
	text-decoration: none;
}

.trahus-article-meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Taxonomy pills — match projekt sidebar */
.trahus-article-pills a {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	background: var(--wp--preset--color--surface-alt, #f5f5f3);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 4px;
	color: var(--wp--preset--color--text, #2d2d2d) !important;
	text-decoration: none !important;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	line-height: 1.4;
	transition: background-color 0.15s, border-color 0.15s;
}

.trahus-article-pills a:hover {
	background: var(--wp--preset--color--primary, #2C5F2D);
	border-color: var(--wp--preset--color--primary, #2C5F2D);
	color: #fff !important;
}

/* ==========================================================================
   News Cards — full-width images, no card padding
   ========================================================================== */

.trahus-news-card {
	border-radius: 0 !important;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.trahus-news-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.trahus-news-card .wp-block-post-featured-image {
	margin: 0 !important;
}

.trahus-news-card .wp-block-post-featured-image img {
	width: 100%;
	display: block;
}

/* Mobile: stack sidebar below content */
@media (max-width: 781px) {
	.trahus-article-layout {
		flex-direction: column !important;
	}
	.trahus-article-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
	.trahus-article-sidebar .trahus-article-meta {
		position: static;
		padding-top: var(--wp--preset--spacing--lg, 2rem);
		margin-top: var(--wp--preset--spacing--lg, 2rem);
		border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
	}
}

/* ==========================================================================
   News–Project Linking
   ========================================================================== */

/* --- Projekt badge on single post (above content) --- */
.trahus-projekt-badge {
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-projekt-badge__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 0.75rem);
	padding: var(--wp--preset--spacing--sm, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--surface-alt, #f5f2ed);
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.trahus-projekt-badge__link:hover {
	background: #ece8e0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trahus-projekt-badge__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
}

.trahus-projekt-badge__label {
	display: block;
	font-family: var(--wp--preset--font-family--soehne, sans-serif);
	font-size: var(--wp--preset--font-size--2xs, 0.7rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-projekt-badge__title {
	display: block;
	font-family: var(--wp--preset--font-family--soehne, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

/* --- External source link --- */
.trahus-extern-source {
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-extern-source__link {
	font-family: var(--wp--preset--font-family--soehne, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	text-decoration: none;
}

.trahus-extern-source__link:hover {
	color: var(--wp--preset--color--text, #2D2D2D);
}

.trahus-extern-source__link strong {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

/* --- "Nyheter" section on single-projekt --- */
.trahus-projekt-news {
	margin-top: var(--wp--preset--spacing--2xl, 4rem);
	padding-top: var(--wp--preset--spacing--xl, 3rem);
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

.trahus-projekt-news__heading {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.trahus-projekt-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--md, 1.5rem);
}

.trahus-projekt-news__card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease;
}

.trahus-projekt-news__card-link:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.trahus-projekt-news__card-image {
	overflow: hidden;
}

.trahus-projekt-news__card-image img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.trahus-projekt-news__card-link:hover .trahus-projekt-news__card-image img {
	transform: scale(1.03);
}

.trahus-projekt-news__card-body {
	padding: var(--wp--preset--spacing--sm, 0.75rem) 0;
}

.trahus-projekt-news__date {
	font-family: var(--wp--preset--font-family--soehne, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted, #999);
}

.trahus-projekt-news__card-title {
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--xs, 0.5rem) 0;
	color: var(--wp--preset--color--text, #2D2D2D);
}

.trahus-projekt-news__card-link:hover .trahus-projekt-news__card-title {
	color: var(--wp--preset--color--primary-dark, #1E4620);
}

.trahus-projekt-news__excerpt {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #999);
	margin: 0;
}

/* ==========================================================================
   Footer — mobile compact layout
   ========================================================================== */

@media (max-width: 768px) {
	/* Reduce top padding (was var(--spacing--section) ~80px) */
	footer.wp-block-template-part > .wp-block-group.alignfull,
	.wp-block-template-part[data-area="footer"] > .wp-block-group.alignfull {
		padding-top: var(--wp--preset--spacing--xl, 3rem) !important;
	}

	/* Smaller logo */
	footer .wp-block-site-logo,
	.wp-block-template-part[data-area="footer"] .wp-block-site-logo {
		margin-bottom: var(--wp--preset--spacing--md, 1.5rem) !important;
	}

	footer .wp-block-site-logo img,
	.wp-block-template-part[data-area="footer"] .wp-block-site-logo img {
		width: 140px !important;
		height: auto !important;
	}

	/* Stack columns tighter */
	footer .wp-block-columns,
	.wp-block-template-part[data-area="footer"] .wp-block-columns {
		gap: var(--wp--preset--spacing--lg, 1.5rem) !important;
	}

	/* Center-align all footer content on mobile */
	footer .wp-block-column,
	.wp-block-template-part[data-area="footer"] .wp-block-column {
		text-align: center;
	}

	/* Center navigation links */
	footer .wp-block-navigation .wp-block-navigation__container,
	.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation__container {
		align-items: center !important;
	}

	/* Reduce heading/section gap */
	footer .wp-block-heading,
	.wp-block-template-part[data-area="footer"] .wp-block-heading {
		margin-bottom: var(--wp--preset--spacing--xs, 0.5rem) !important;
		font-size: 0.65rem !important;
	}

	/* Separator less margin */
	footer .wp-block-separator,
	.wp-block-template-part[data-area="footer"] .wp-block-separator {
		margin-top: var(--wp--preset--spacing--lg, 1.5rem) !important;
	}
}

/* ==========================================================================
   Style Guide — standalone design tool (no site header/footer in template)
   ========================================================================== */

/* Restore Trähus warm Papper — parent's style-guide.css resets to generic #f0f0f0. */
body.page-style-guide:not(.sg-dark) {
	--wp--preset--color--surface-alt: #F4EFE3;
}

/* No site header → no top offset needed for the TOC sidebar. */
.styleguide-toc {
	top: 0 !important;
}

/* Scroll-to offset: just the sticky topbar height. */
.styleguide-section {
	scroll-margin-top: 64px;
}

/* Prevent any theme padding-top when the site header is absent. */
/* Also cancel the double margin-right: parent's style-guide.css applies 280px to both
   body AND .wp-site-blocks — that creates a 560px combined offset instead of 280px. */
body.page-style-guide .wp-site-blocks {
	padding-top: 0 !important;
	margin-right: 0 !important;
}

/* Block Showcase — parent theme injects this via the_content filter as raw HTML.
   No WP block layout wraps it, so it renders full-width with no padding.
   Apply the same constrained layout the pattern sections use. */
body.page-style-guide .block-showcase {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* Masonry Grid in style guide — block renders with alignfull negative margins by default.
   Cancel them so the grid stays within the section container (no clipping). */
body.page-style-guide .wp-block-goodblocks-masonry-query {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 8px;
	overflow: hidden;
}