/* ==========================================================================
   Lordbcsr theme. Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   This file holds what theme.json cannot express: header behaviour, the mega
   panel on top of core/navigation, the dot image, and a few component layouts.
   ========================================================================== */

:root {
	--lb-line: rgba(15, 42, 36, 0.1);
	--lb-radius-card: var(--wp--custom--radius--card, 16px);
	--lb-radius-thumb: var(--wp--custom--radius--thumb, 10px);
	--lb-radius-hero: var(--wp--custom--radius--hero, 28px);
}

:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }
/* Long unbroken strings in content (hashtags, URLs as link text) must wrap instead of widening the page. */
body { overflow-wrap: break-word; }
.wp-block-post-content, .wp-block-post-excerpt, .wp-block-post-title { overflow-wrap: anywhere; }
/* Legacy embeds and videos carry fixed width attributes. */
.wp-block-post-content :where(iframe, video, embed, object) { max-width: 100%; }
.wp-block-post-content video { height: auto; }
a:hover { text-decoration-color: var(--wp--preset--color--teal); }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* No automatic gap between header, main and footer; sections set their own rhythm. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Header: sticky, hides on scroll down, returns on scroll up ---------- */
.lb-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	/* Opaque on purpose: backdrop-filter (and a permanent transform) would make the header the
	   containing block for position:fixed children and trap core/navigation's mobile overlay. */
	background: var(--wp--preset--color--paper);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.lb-site-header.is-scrolled { box-shadow: 0 1px 0 var(--lb-line); }
.lb-site-header.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }
.lb-header__bar { min-height: var(--wp--custom--header-height, 76px); gap: 24px; }
.lb-logo img { height: auto; max-height: 24px; width: auto; }

/* Top-level items */
.lb-mega .wp-block-navigation__container { gap: 4px; }
.lb-mega .wp-block-navigation-item__content { padding: 10px 14px; border-radius: 999px; text-decoration: none; }
/* Hover and current-state pill sit on the whole top-level item (li), so for items with a submenu
   the pill wraps label and arrow together. Desktop only; the overlay has its own rules. */
.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item { border-radius: 999px; }
.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover,
.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:has(> [aria-current="page"]) {
	background: var(--wp--preset--color--mist);
}
.lb-mega .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 4px; }
.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
	/* Core gives the toggle a fixed 16px width and background-color: inherit, which paints a square
	   over the pill's rounded end. */
	margin-left: 0; padding: 10px 14px 10px 2px; width: auto; height: auto; align-self: stretch; background: transparent;
}
/* You are here: deep-teal dot before the label (same motif as the primary button).
   Deep teal keeps the 3:1 non-text contrast; blue and lime would not. */
.lb-mega .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"] { display: inline-flex; align-items: center; gap: 8px; }
.lb-mega .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"]::before {
	content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--deep);
}

/* Area colours: one spot colour per site area. */
.is-area-services { --lb-spot: var(--wp--preset--color--blue); }
.is-area-about { --lb-spot: var(--wp--preset--color--teal); }
.is-area-projects { --lb-spot: var(--wp--preset--color--lime); }

/* Tiles are only shown in the desktop mega panel. */
.lb-tile, .wp-block-navigation-item__description { display: none; }

@media (min-width: 600px) {
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(4, 168px);
		align-items: start;
		gap: 16px;
		padding: 20px;
		left: auto;
		right: 0;
		top: calc(100% + 10px);
		border: 0;
		border-radius: var(--lb-radius-card);
		background: var(--wp--preset--color--paper);
		box-shadow: var(--wp--preset--shadow--panel);
	}
	/* Invisible bridge over the 10px gap above the panel. Without it the pointer leaves the li on
	   its way down and core closes the submenu (mouseleave + lost :hover). The pseudo-element belongs
	   to the submenu, so it counts as part of the li; it inherits the closed panel's visibility:hidden. */
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px;
	}
	.lb-mega .is-area-about > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, 168px) !important; }
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item { width: auto; }
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: grid; gap: 8px; padding: 0; border-radius: 0; white-space: normal;
		font-size: var(--wp--preset--font-size--small); line-height: 1.35; font-weight: 600;
	}
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		text-decoration: underline; text-decoration-color: var(--lb-spot, var(--wp--preset--color--teal)); text-decoration-thickness: 2px;
	}
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .lb-tile {
		display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--lb-radius-thumb); background: var(--wp--preset--color--mist);
	}
	.lb-mega .lb-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
	.lb-mega .wp-block-navigation-item__content:hover .lb-tile__img { transform: scale(1.04); }
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .lb-tile--dots {
		background:
			radial-gradient(circle at center, var(--lb-spot, var(--wp--preset--color--teal)) 0 10px, transparent 11px) 70% 30% / 44px 44px no-repeat,
			radial-gradient(circle at center, var(--wp--preset--color--mint) 0 5px, transparent 6px) 0 0 / 22px 22px,
			var(--wp--preset--color--deep);
	}
	.lb-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		display: block; font-weight: 400; color: var(--wp--preset--color--muted);
	}
}

/* Mobile overlay */
.lb-mega .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--wp--custom--gutter); }
.lb-mega .is-menu-open .wp-block-navigation__responsive-container-content,
.lb-mega .is-menu-open .wp-block-navigation__container,
.lb-mega .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
/* Compact list: core spaces overlay items with the global block gap (2em+); tighten it. */
.lb-mega .is-menu-open .wp-block-navigation__container { gap: 2px !important; }
.lb-mega .is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; padding: 8px 0 !important; }
.lb-mega .is-menu-open .wp-block-navigation__submenu-container {
	gap: 0 !important; padding: 0 0 6px 16px !important;
}
/* !important: core's overlay rule for submenu links is more specific and sets 8px. */
.lb-mega .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; padding: 3px 0 !important; }
/* Current item in the overlay: dot before the label, no pill — top level and submenu items
   (the desktop rules above only reach top-level items). */
.lb-mega .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"],
.lb-mega .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > [aria-current="page"] { background: none; font-weight: 600; }
.lb-mega .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > [aria-current="page"] { display: inline-flex; align-items: center; gap: 8px; }
.lb-mega .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > [aria-current="page"]::before {
	content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--deep);
}

/* ---------- Typography helpers ---------- */
.lb-statement { font-size: var(--wp--preset--font-size--statement); line-height: 1.12; max-width: 24ch; }
.lb-intro { max-width: 62ch; }
.is-layout-constrained > .lb-intro { max-width: var(--wp--style--global--content-size); } /* constrained parents already limit the measure */
.lb-more a { font-weight: 600; }

/* Secondary button (outline style used as quiet button) */
.wp-block-button.is-style-outline > .wp-block-button__link { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); border: 0; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #dce8e3; }

/* ---------- Layout rhythm ---------- */
.lb-main { padding-top: var(--wp--preset--spacing--50); }
.lb-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.lb-hero.has-mist-background-color { --lb-dot-bg: var(--wp--preset--color--mist); }
/* The quiet button is mist-coloured; on the mist band it switches to paper. */
.lb-hero .wp-block-button.is-style-outline > .wp-block-button__link { background: var(--wp--preset--color--paper); }
.lb-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #f6f9f8; }
/* Front page: the hero band starts right under the header. */
.lb-front { padding-top: 0; }
.lb-hero__cols { gap: var(--wp--preset--spacing--50); }
.lb-hero__actions { margin-top: var(--wp--preset--spacing--40); }
.lb-section { padding-block: var(--wp--preset--spacing--60); border-top: 1px solid var(--lb-line); }
.lb-site-footer { margin-top: var(--wp--preset--spacing--60); }
.lb-page__title { margin-bottom: var(--wp--preset--spacing--40); }
/* Featured images on pages are banners: square or portrait legacy images (e.g. the B-losophy
   illustration) must not fill several screens. */
.lb-page__image img { border-radius: var(--lb-radius-card); width: 100%; max-height: min(60vh, 520px); object-fit: cover; }
.lb-single__image img { max-height: min(60vh, 520px); width: 100%; object-fit: cover; }

/* ---------- Dot image ---------- */
.lb-dot-image { margin: 0; }
.lb-dot-image svg { display: block; width: 100%; height: auto; }
.lb-hero .lb-dot-image { max-width: 560px; margin-left: auto; }

/* ---------- Service cards ---------- */
.lb-cards { gap: clamp(16px, 2.4vw, 32px); }
.lb-card__img { margin-bottom: 16px; }
.lb-card__img img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--lb-radius-card); }
.lb-card p { font-size: 1rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
.lb-card p a { text-decoration: none; color: var(--wp--preset--color--ink); }
.lb-card p a:hover strong { text-decoration: underline; text-decoration-color: var(--wp--preset--color--blue); text-decoration-thickness: 2px; }
@media (min-width: 600px) and (max-width: 1000px) {
	.lb-cards { flex-wrap: wrap !important; }
	.lb-cards > .wp-block-column { flex-basis: calc(50% - 16px) !important; flex-grow: 0; }
}
@media (max-width: 599px) { .lb-card__img img { aspect-ratio: 16 / 10; } }

/* ---------- Projects band ---------- */
.lb-band { position: relative; overflow: hidden; border-radius: var(--lb-radius-hero); padding: clamp(32px, 6vw, 80px); }
.lb-band::before { /* fine dot raster, fading out toward the text */
	content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 70%; pointer-events: none;
	background: radial-gradient(circle, rgba(157, 230, 207, 0.35) 0 1.6px, transparent 2.2px) 0 0 / 22px 22px;
	-webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 70%); mask-image: linear-gradient(225deg, #000 20%, transparent 70%);
}
.lb-band > * { position: relative; }
.lb-band .lb-intro { color: rgba(255, 255, 255, 0.82); margin-bottom: var(--wp--preset--spacing--40); }
.lb-projects { gap: 24px; }
.lb-projects > .wp-block-column { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 18px; }
.lb-projects p { color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.5; margin-top: 8px; }
.lb-project__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading-3); font-weight: 600; line-height: 1.2; }
.lb-projects .lb-project__name a { color: var(--wp--preset--color--teal); text-decoration: none; }
.lb-projects .lb-project__name a:hover { color: var(--wp--preset--color--lime); }
@media (min-width: 600px) and (max-width: 1000px) {
	.lb-projects { flex-wrap: wrap !important; }
	.lb-projects > .wp-block-column { flex-basis: calc(50% - 12px) !important; flex-grow: 0; }
}

/* ---------- Press list (front page, archive, search) ---------- */
.lb-press__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lb-line); }
.lb-press__list > li { border-bottom: 1px solid var(--lb-line); margin: 0; }
.lb-press__row { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; }
.lb-press__row > * { margin: 0 !important; }
.lb-press__title { font-family: var(--wp--preset--font-family--text); font-size: var(--wp--preset--font-size--lead); font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.lb-press__title a { text-decoration: none; }
.lb-press__title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--peach); text-decoration-thickness: 2px; }
.lb-press__excerpt { margin-top: 8px; color: var(--wp--preset--color--muted); font-size: 1rem; }
.lb-press__excerpt .wp-block-post-excerpt__more-text { display: none; }
.lb-press__lang a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--wp--preset--color--mist); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.lb-press__lang a[href*="/tag/dansk"] { background: #fff0d9; }
.lb-press__lang .wp-block-post-terms__separator { display: none; }
@media (max-width: 640px) {
	/* Top alignment instead of baseline: iOS Safari collapsed the gap under the full-width date. */
	.lb-press__row { grid-template-columns: 1fr auto; align-items: start; row-gap: 0; }
	.lb-press__row > .wp-block-post-date { grid-column: 1 / -1; margin-bottom: 10px !important; }
	.lb-press__row > .lb-press__lang { margin-top: 4px !important; }
}
.lb-press-latest .lb-more { margin-top: var(--wp--preset--spacing--30); }

/* ---------- Single press release ---------- */
.lb-single__meta { gap: 12px; align-items: center; }
.lb-single__image img { border-radius: var(--lb-radius-card); }
.lb-single__nav { margin-top: var(--wp--preset--spacing--30); font-weight: 600; }

/* ---------- Contact ---------- */
.lb-contact__item { font-size: var(--wp--preset--font-size--lead); margin: 0 0 18px; }
.lb-contact__label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ---------- Footer ---------- */
.lb-footer { padding-block: 64px 40px; font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.82); }
.lb-footer a { color: inherit; text-decoration: none; }
.lb-footer a:hover { color: var(--wp--preset--color--paper); text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); }
.lb-logo--light img { filter: brightness(0) invert(1); opacity: 0.92; max-height: 20px; }
.lb-footer__meta { margin-top: 12px; }
.lb-footer-nav .wp-block-navigation__container { display: grid !important; grid-template-columns: repeat(2, max-content); column-gap: 32px; row-gap: 10px; }
.lb-footer-nav .wp-block-navigation-item__content { padding: 0; }
.lb-footer-nav [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); }
.lb-social { gap: 8px !important; }
.lb-social .wp-social-link { background: transparent !important; color: var(--wp--preset--color--paper) !important; border: 1px solid rgba(255, 255, 255, 0.24); }
.lb-social .wp-social-link:hover { border-color: var(--wp--preset--color--teal); transform: none; }
.lb-footer__bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.lb-footer__bottom p { margin: 0; }
@media (max-width: 781px) { .lb-footer-nav .wp-block-navigation__container { grid-template-columns: 1fr 1fr; } }

/* Visible marker for texts that are not approved yet (e.g. the privacy policy draft). */
.lb-draft-note { padding: 14px 18px; border-radius: var(--lb-radius-thumb); background: #fff0d9; }

/* ---------- Legacy page content (classic HTML from the old theme) ---------- */
.lb-page .wp-block-post-content img { height: auto; }
.lb-page .wp-block-post-content span[style*="color: #888"] { color: var(--wp--preset--color--muted) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- English summary at the end of Danish press releases (class set in the post) ---------- */
.lb-summary-en {
	margin-block: var(--wp--preset--spacing--40, 32px) 0;
	padding: clamp(16px, 3vw, 28px);
	border-radius: var(--lb-radius-card);
	background: var(--wp--preset--color--mist);
}
.lb-summary-en > * + * { margin-block-start: 0.75em; }
.lb-summary-en .lb-summary-en__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}