/*
Theme Name: Goli otok (Twenty Twenty-Three child)
Template: twentytwentythree
Description: Custom child theme for Udruga Goli otok "Ante Zemljar". 4-language site (HR/EN/FR/IT).
Version: 0.2.7
Text Domain: goli-otok
*/

:root {
	--goli-base:      #ffffff;       /* white */
	--goli-contrast:  #1a1a1a;       /* heading color — softer near-black */
	--goli-primary:   #1a1a1a;       /* dark gray (same as contrast now — kept for back-compat) */
	--goli-text:      #2a2a2a;       /* body text — toned down from near-black */
	--goli-secondary: #595959;       /* mid gray */
	--goli-accent:    #c8102e;       /* red */
	--goli-accent-dk: #9b0c23;       /* deep red for hover */
	--goli-muted:     #e5e5e5;       /* light gray borders */
	--goli-tertiary:  #f5f5f5;       /* faint gray surface */
	--goli-header-h:  84px;
	--goli-radius:    2px;           /* squared corners — used everywhere */
	--goli-ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--goli-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--goli-font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--goli-leading:      1.6;
	--goli-tracking-ui:  0.005em;
}

/* ============================================================
 * Unified typography — Inter for UI/body, Source Serif 4 for display
 * Applied with high specificity to beat WP's per-block inline styles
 * ============================================================ */
html, body, button, input, textarea, select {
	font-family: var(--goli-font-sans);
}
/* Prevent the 100vw-on-the-home-hero from triggering a phantom horizontal scrollbar.
   100vw includes the vertical scrollbar's width, so any 100vw element is a few
   pixels wider than the page content area. overflow-x:clip (modern) or :hidden
   (fallback) blocks that overflow without creating a scroll container. */
html, body {
	overflow-x: clip;
}

/* Modern, minimal scrollbar — narrow, rounded, semi-transparent thumb that
   darkens on hover. Firefox uses the standard `scrollbar-*` props; WebKit/
   Blink uses pseudo-elements. Track stays invisible to keep the chrome quiet. */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(26, 26, 26, 0.25) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(26, 26, 26, 0.22);
	border: 2px solid transparent;
	background-clip: padding-box;
	border-radius: 999px;
	transition: background-color 0.2s var(--goli-ease);
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(26, 26, 26, 0.45);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
	background: var(--goli-accent);
	background-clip: padding-box;
}
::-webkit-scrollbar-corner {
	background: transparent;
}
body {
	font-size: 1.0625rem;
	line-height: var(--goli-leading);
	font-weight: 400;
	letter-spacing: var(--goli-tracking-ui);
	color: var(--goli-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern", "liga", "calt", "ss01";
}

/* Editorial serif headings — mixed case, restrained weight, archival feel */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	font-family: var(--goli-font-serif);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--goli-contrast);
	text-transform: none;
	font-feature-settings: "kern", "liga", "calt", "onum";
}
h1 {
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.04;
}
h2 {
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.1;
}
h3 {
	font-weight: 500;
	letter-spacing: -0.008em;
	line-height: 1.2;
}
/* h4 stays as a serif sub-heading; h5/h6 are essentially UI labels in this design. */
h4 {
	font-family: var(--goli-font-serif);
	font-weight: 500;
	letter-spacing: -0.005em;
	font-size: 1.05rem;
	line-height: 1.3;
}
h5, h6 {
	font-family: var(--goli-font-sans);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--goli-secondary);
}

p, li, dd, dt, blockquote, figcaption {
	font-family: var(--goli-font-sans);
}
p {
	max-width: 70ch;
}
.wp-block-cover p,
.wp-block-cover .wp-block-button__link,
.goli-form p,
.wp-block-columns p {
	max-width: none; /* Don't constrain inside layout blocks */
}

/* Buttons — squared, hairline-weight, no bounce on hover.
   Motion is reserved for the form submit arrow (it earns it). */
.wp-block-button__link,
.wp-element-button,
button.wp-element-button {
	font-family: var(--goli-font-sans);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.78rem;
	background-color: var(--goli-contrast);
	color: #fff;
	border: 1px solid var(--goli-contrast);
	padding: 0.9rem 1.6rem;
	border-radius: var(--goli-radius);
	text-decoration: none;
	transition: background-color 0.25s var(--goli-ease), border-color 0.25s var(--goli-ease), color 0.25s var(--goli-ease);
	cursor: pointer;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button.wp-element-button:hover {
	background-color: var(--goli-accent);
	border-color: var(--goli-accent);
	color: #fff;
}
/* outline-style buttons — different baseline */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--goli-contrast);
	border: 1px solid var(--goli-contrast);
	border-radius: var(--goli-radius);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--goli-contrast);
	color: #fff;
}

/* Code-y / accent text via small caps where needed */
.eyebrow,
.has-text-letter-spacing {
	font-family: var(--goli-font-sans);
	font-weight: 600;
}

/* ============================================================
 * Header — sticky, modern, three regions
 * ============================================================ */

.goli-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--goli-header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background-color 0.3s var(--goli-ease), box-shadow 0.3s var(--goli-ease), color 0.3s var(--goli-ease);
	color: var(--goli-base);
}

/* Push body content below the fixed header on non-home pages */
body.goli-inner {
	padding-top: var(--goli-header-h);
}

/* On home, the header floats over the hero — but solidifies on scroll */
.goli-home .goli-header {
	color: #fff;
}
.goli-home .goli-header:not(.is-scrolled) .goli-header__brand-mark {
	background: #fff;
}

/* Non-home: white frosted-glass header. Translucent so page content
   blurs softly behind it as you scroll — defines the bar without a heavy edge. */
body.goli-inner .goli-header,
body.goli-inner .goli-header.is-scrolled {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	border-bottom: 1px solid rgba(13, 13, 13, 0.06);
	box-shadow: none;
	color: var(--goli-contrast);
}

/* Home + scrolled: keep dark theme so it blends with the hero, just add a tinted backdrop for legibility */
.goli-home .goli-header.is-scrolled {
	background: rgba(22, 22, 22, 0.78);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #fff;
}

.goli-header__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 2rem;
}

/* Brand (logo) — swaps between white and dark variants based on header state */
.goli-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.goli-header__logo {
	display: block;
	height: 40px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	transition: opacity 0.3s var(--goli-ease);
}
.goli-header__logo--dark { display: none; }
/* Non-home pages: always show dark logo (light header) */
body.goli-inner .goli-header__logo--white { display: none; }
body.goli-inner .goli-header__logo--dark { display: block; }
/* Home page: white logo stays even when scrolled (header stays dark on home) */
.goli-header__brand:hover .goli-header__logo {
	opacity: 0.8;
}

/* Nav — desktop horizontal */
.goli-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 2rem;
	justify-content: flex-end;
}
.goli-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.85rem;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.goli-nav__item a {
	color: inherit;
	text-decoration: none;
	padding: 0.3rem 0;
	position: relative;
	white-space: nowrap;
	transition: opacity 0.2s var(--goli-ease);
}
.goli-nav__item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--goli-ease);
}
.goli-nav__item a:hover::after,
.goli-nav__item.is-active a::after {
	transform: scaleX(1);
}
/* Active state: hairline only — no color swap. Quiet and refined. */
.goli-nav__item.is-active a {
	font-weight: 600;
}

/* Right actions: lang pill + CTA */
.goli-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	line-height: 1;
}
.goli-header__actions > * {
	margin: 0;
}
.goli-header .goli-lang,
.goli-header .goli-cta {
	margin: 0;
	line-height: 1;
}

/* Compact language switcher — paired with the Donate CTA: same height,
   same border weight, same border color, same background. They read as
   a matched control set. */
.goli-lang {
	position: relative;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}
.goli-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.85rem;
	border-radius: var(--goli-radius);
	background: transparent;
	color: var(--goli-contrast);
	border: 1px solid var(--goli-contrast);
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s var(--goli-ease), border-color 0.2s var(--goli-ease), color 0.2s var(--goli-ease);
}
.goli-lang__current:hover {
	background: var(--goli-contrast);
	color: #fff;
}
/* On dark backgrounds (home hero, scrolled home) — outlined in white,
   exactly like the Donate CTA on the same backgrounds. */
.goli-home .goli-header:not(.is-scrolled) .goli-lang__current,
.goli-home .goli-header.is-scrolled .goli-lang__current {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.goli-home .goli-header:not(.is-scrolled) .goli-lang__current:hover,
.goli-home .goli-header.is-scrolled .goli-lang__current:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}
.goli-lang__code {
	display: inline-block;
	line-height: 1;
}
.goli-lang__chevron {
	transition: transform 0.25s var(--goli-ease);
	flex-shrink: 0;
}
.goli-lang.is-open .goli-lang__chevron {
	transform: rotate(-180deg);
}

/* Dropdown menu */
.goli-lang__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 170px;
	margin: 0;
	padding: 0.35rem;
	background: #fff;
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--goli-ease), transform 0.2s var(--goli-ease), visibility 0s linear 0.2s;
	z-index: 1100;
}
.goli-lang.is-open .goli-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.goli-lang__menu-item {
	margin: 0;
	padding: 0;
}
.goli-lang__menu-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.85rem;
	color: var(--goli-contrast);
	text-decoration: none;
	border-radius: var(--goli-radius);
	transition: background-color 0.15s var(--goli-ease);
}
.goli-lang__menu-item a:hover {
	background: var(--goli-tertiary);
}
.goli-lang__menu-code {
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	color: var(--goli-secondary);
}
.goli-lang__menu-name {
	font-weight: 500;
	letter-spacing: normal;
	font-size: 0.9rem;
}
.goli-lang__menu-item a:hover .goli-lang__menu-code {
	color: var(--goli-contrast);
}

/* CTA button (Donate) — outlined by default. The small red index dot is the
   only saturated mark; the button fills with red only on hover, so the
   accent earns its appearance. */
.goli-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.1rem;
	background: transparent;
	color: var(--goli-contrast);
	border: 1px solid var(--goli-contrast);
	border-radius: var(--goli-radius);
	font-family: var(--goli-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s var(--goli-ease), border-color 0.25s var(--goli-ease), color 0.25s var(--goli-ease);
}
.goli-cta::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	background: var(--goli-accent);
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color 0.25s var(--goli-ease);
}
.goli-cta:hover {
	background: var(--goli-accent);
	border-color: var(--goli-accent);
	color: #fff;
}
.goli-cta:hover::before {
	background: #fff;
}

/* On dark backgrounds (home hero, footer) — outlined in white. */
.goli-home .goli-header:not(.is-scrolled) .goli-cta,
.goli-home .goli-header.is-scrolled .goli-cta,
.goli-footer .goli-cta {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.goli-home .goli-header:not(.is-scrolled) .goli-cta:hover,
.goli-home .goli-header.is-scrolled .goli-cta:hover,
.goli-footer .goli-cta:hover {
	background: var(--goli-accent);
	border-color: var(--goli-accent);
	color: #fff;
}

/* Mobile toggle (hamburger) */
.goli-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	margin-left: auto;
}
.goli-header__toggle-bars {
	position: relative;
	display: block;
	width: 24px;
	height: 18px;
	margin: 0 auto;
}
.goli-header__toggle-bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.3s var(--goli-ease), opacity 0.2s var(--goli-ease), top 0.3s var(--goli-ease);
}
.goli-header__toggle-bars span:nth-child(1) { top: 2px; }
.goli-header__toggle-bars span:nth-child(2) { top: 8px; }
.goli-header__toggle-bars span:nth-child(3) { top: 14px; }
.goli-header.is-open .goli-header__toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.goli-header.is-open .goli-header__toggle-bars span:nth-child(2) { opacity: 0; }
.goli-header.is-open .goli-header__toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 900px) {
	.goli-header__toggle {
		display: block;
	}
	/* backdrop-filter creates a containing block for `position: fixed` children,
	   which clips the drawer to the header's 84px height. Disable on mobile.
	   Without the blur, the 78%-opaque desktop background lets content show
	   through as a visible strip on iOS — bump opacity to 1 here so the bar
	   reads as a solid header. */
	.goli-header,
	.goli-header.is-scrolled,
	body.goli-inner .goli-header,
	body.goli-inner .goli-header.is-scrolled {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	body.goli-inner .goli-header,
	body.goli-inner .goli-header.is-scrolled {
		background: #fff;
	}
	.goli-home .goli-header.is-scrolled {
		background: #161616;
	}
	.goli-header__nav {
		position: fixed;
		top: var(--goli-header-h);
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100vh - var(--goli-header-h));
		height: calc(100dvh - var(--goli-header-h));
		z-index: 1001;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		padding: 2rem 1.5rem 3rem;
		background: var(--goli-base);
		color: var(--goli-contrast);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.25s var(--goli-ease), transform 0.25s var(--goli-ease), visibility 0s linear 0.25s;
		overflow-y: auto;
	}
	.goli-header.is-open .goli-header__nav {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		visibility: visible;
		transition-delay: 0s;
	}
	.goli-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		font-size: 1.5rem;
		font-family: var(--goli-font-serif);
		letter-spacing: -0.005em;
	}
	.goli-nav__item {
		width: 100%;
		border-bottom: 1px solid var(--goli-muted);
	}
	.goli-nav__item a {
		display: block;
		padding: 1rem 0;
	}
	.goli-nav__item a::after { display: none; }
	.goli-header__actions {
		margin-top: 2rem;
		justify-content: space-between;
		width: 100%;
	}
	/* On the home page the lang pill + donate CTA are styled white-on-dark
	   to sit on top of the hero. Inside the open mobile drawer (white bg)
	   that would render invisible — force the standard dark outline. We
	   must also override :hover/:focus/:active because iOS Safari "sticky
	   hover" applies them on tap and persists until a tap elsewhere, which
	   would otherwise make the pill vanish (white text + white border +
	   transparent bg over the white drawer = invisible). */
	.goli-home .goli-header.is-open .goli-lang__current,
	.goli-home .goli-header.is-open .goli-lang__current:hover,
	.goli-home .goli-header.is-open .goli-lang__current:focus,
	.goli-home .goli-header.is-open .goli-lang__current:focus-visible,
	.goli-home .goli-header.is-open .goli-lang__current:active,
	.goli-home .goli-header.is-open .goli-cta,
	.goli-home .goli-header.is-open .goli-cta:hover,
	.goli-home .goli-header.is-open .goli-cta:focus,
	.goli-home .goli-header.is-open .goli-cta:focus-visible,
	.goli-home .goli-header.is-open .goli-cta:active {
		color: var(--goli-contrast);
		border-color: var(--goli-contrast);
		background: transparent;
	}
	/* Inside the mobile drawer the lang pill is in the bottom-left of the
	   actions row. Open the dropdown upward so all items stay on-screen,
	   and anchor it to the pill's left edge (the desktop right-anchored
	   default would extend off-screen to the left here). */
	.goli-header__nav .goli-lang__menu {
		top: auto;
		bottom: calc(100% + 0.5rem);
		right: auto;
		left: 0;
	}
	body.goli-nav-open {
		overflow: hidden;
	}
}

/* ============================================================
 * Hero cover — true full viewport on home
 * ============================================================ */
/* Kill ALL top spacing on the home page so the hero fills the viewport from y=0 */
.goli-home .wp-site-blocks {
	padding-top: 0 !important;
}
.goli-home .wp-site-blocks > main,
.goli-home main {
	margin: 0 !important;
	padding-top: 0 !important;
}
.goli-home main > .wp-block-post-content,
.goli-home .wp-block-post-content > *:first-child,
.goli-home .wp-block-cover:first-of-type {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Sticky-footer layout: footer is always at the bottom of the viewport,
   even when page content is short, and there's no white gap between
   content and footer. Using svh (small viewport) so the page is at least as
   tall as the visible area on iOS Safari with browser chrome shown — vh
   there resolves to lvh (largest viewport), which leaves a chrome-height
   gap below the footer until the user scrolls. */
body {
	min-height: 100vh;
	min-height: 100svh;
}
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding-bottom: 0 !important;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}
.wp-site-blocks > footer {
	flex-shrink: 0;
	margin-top: auto;
}
/* The footer template part has a hard-coded margin-top on its inner group — kill it */
.wp-site-blocks > footer .goli-footer {
	margin-top: 0 !important;
}
/* Breathing space between main content and the dark footer. */
.wp-site-blocks > main {
	padding-bottom: var(--goli-space-major);
}
.goli-home main > .wp-block-post-content > .wp-block-cover:first-child,
.goli-home .wp-block-cover:first-of-type {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* svh = visible viewport with iOS chrome showing → hero always fills the
	   area the user can actually see on first paint, never leaves a gap.
	   dvh tracks chrome show/hide so it expands when the URL bar collapses. */
	min-height: 100vh !important;
	min-height: 100svh !important;
	height: 100vh;
	height: 100dvh;
	padding: 0 !important;
}
.goli-home .wp-block-cover:first-of-type .wp-block-cover__inner-container {
	padding: 0 1.5rem;
	max-width: 1100px;
	width: 100%;
}
.goli-home .wp-block-cover:first-of-type .wp-block-cover__image-background {
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
/* Centered logo above the hero title */
.goli-hero-logo {
	display: block;
	margin: 0 auto 1.5rem;
	width: clamp(180px, 22vw, 320px);
	height: auto;
	opacity: 0.95;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

/* Extra gradient over the hero photo so text in the center reads against any photo region.
   Stacked: a baseline vertical scrim guarantees minimum contrast even on photos with
   bright central subjects, with a stronger radial darkening behind the title block. */
.goli-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0) 80%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.20) 100%);
	pointer-events: none;
	z-index: 1;
}
.goli-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.goli-hero__subtitle {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
	color: #fff !important;
}
/* Make the eyebrow and buttons also pop a little */
.goli-hero .wp-block-cover__inner-container > p {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Non-home pages: keep normal alignfull behaviour but allow viewport breakout */
.wp-block-cover.alignfull {
	margin-top: 0;
}

/* ============================================================
 * Forms — Stripe-style: clean cards, uppercase labels, focus ring, arrow CTA
 * ============================================================ */
.entry-content > form.goli-form,
.wp-block-post-content > form.goli-form,
form.goli-form {
	max-width: 580px !important;
	width: 100%;
	margin: 1.5rem auto !important;
	padding: 2.5rem 2.25rem;
	background: var(--goli-base);
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	box-sizing: border-box;
}

/* Guarantee everything inside the form respects the card's padding */
form.goli-form,
form.goli-form *,
form.goli-form *::before,
form.goli-form *::after {
	box-sizing: border-box;
}
form.goli-form .goli-form__row {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
form.goli-form input,
form.goli-form textarea,
form.goli-form button {
	width: 100%;
	max-width: 100%;
	display: block;
}
/* Submit button is special — it shouldn't be full width */
form.goli-form button[type="submit"] {
	width: auto;
	display: inline-flex;
}

/* Center the H2/H3 that introduces a form so it visually aligns with the centered card */
.wp-block-heading:has(+ form.goli-form) {
	text-align: center;
	max-width: 580px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.goli-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0 0 1.4rem;
	position: relative;
}
.goli-form__row label {
	font-family: var(--goli-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--goli-secondary);
	margin: 0;
	display: block;
}
.goli-form__row--submit {
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;  /* right-align on desktop — modern editorial pattern */
	gap: 0;
}
/* On mobile, make the submit button full-width — primary actions deserve the
   whole row on small screens. */
@media (max-width: 540px) {
	.goli-form__row--submit {
		justify-content: stretch;
	}
	.goli-form__row--submit button {
		width: 100%;
	}
}
.goli-form__row label span[aria-hidden] {
	color: var(--goli-accent);
}
.goli-form__row input[type="text"],
.goli-form__row input[type="email"],
.goli-form__row input[type="number"],
.goli-form__row textarea {
	width: 100%;
	padding: 0.95rem 1.05rem;
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	font: inherit;
	font-size: 1rem;
	color: var(--goli-contrast);
	background: #fff;
	transition: border-color 0.2s var(--goli-ease), box-shadow 0.2s var(--goli-ease);
}
.goli-form__row input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}
.goli-form__row input[type="number"]::-webkit-inner-spin-button,
.goli-form__row input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.goli-form__row input::placeholder,
.goli-form__row textarea::placeholder {
	color: rgba(22, 22, 22, 0.35);
}
.goli-form__row input:hover,
.goli-form__row textarea:hover {
	border-color: rgba(22, 22, 22, 0.25);
}
.goli-form__row input:focus,
.goli-form__row textarea:focus {
	outline: 0;
	border-color: var(--goli-accent);
	box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.12);
}
.goli-form__row textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.6;
}

/* File input — drag-and-drop style */
.goli-form__row input[type="file"] {
	width: 100%;
	padding: 1rem;
	border: 1px dashed var(--goli-muted);
	border-radius: var(--goli-radius);
	background: var(--goli-tertiary);
	font-size: 0.9rem;
	color: var(--goli-secondary);
	cursor: pointer;
	transition: border-color 0.2s var(--goli-ease), background-color 0.2s var(--goli-ease);
}
.goli-form__row input[type="file"]:hover {
	border-color: var(--goli-contrast);
	background: var(--goli-tertiary);
}

/* Submit button — squared, hairline, with the one bit of motion in the design:
   the arrow steps forward on hover. That's craft, not theatrics. */
.goli-form button[type="submit"],
.goli-form .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 1rem 1.75rem;
	background: var(--goli-contrast);
	color: #fff;
	border: 1px solid var(--goli-contrast);
	border-radius: var(--goli-radius);
	font-family: var(--goli-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--goli-ease), border-color 0.25s var(--goli-ease), color 0.25s var(--goli-ease);
}
.goli-form button[type="submit"]::after {
	content: "→";
	font-size: 1em;
	transition: transform 0.3s var(--goli-ease);
}
.goli-form button[type="submit"]:hover {
	background: var(--goli-accent);
	border-color: var(--goli-accent);
}
.goli-form button[type="submit"]:hover::after {
	transform: translateX(5px);
}

.goli-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Segmented control for the "Display as" choice — replaces the old <fieldset>+radios */
.goli-form__legend {
	display: block;
	font-family: var(--goli-font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--goli-secondary);
	margin: 0 0 0.5rem;
}
.goli-segmented {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 4px;
	padding: 4px;
	background: var(--goli-tertiary);
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	width: 100%;
}
/* Specificity-bumped via .goli-form so we beat .goli-form__row label without !important */
.goli-form .goli-segmented__option {
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--goli-secondary);
	cursor: pointer;
	position: relative;
}
.goli-segmented__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.goli-segmented__option span {
	display: block;
	text-align: center;
	padding: 0.65rem 0.5rem;
	border-radius: var(--goli-radius);
	background: transparent;
	transition: background-color 0.2s var(--goli-ease), color 0.2s var(--goli-ease);
	line-height: 1.2;
	white-space: nowrap;
}
.goli-segmented__option:hover span {
	color: var(--goli-contrast);
	background: rgba(0, 0, 0, 0.04);
}
.goli-segmented__option input[type="radio"]:checked + span {
	background: var(--goli-contrast);
	color: #fff;
}
.goli-segmented__option input[type="radio"]:focus-visible + span {
	outline: 2px solid var(--goli-accent);
	outline-offset: 2px;
}
@media (max-width: 540px) {
	.goli-segmented {
		grid-template-columns: 1fr 1fr;
	}
}

/* Two-column row pair (year + city) on wider viewports */
.goli-form__row-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 540px) {
	.goli-form__row-pair { grid-template-columns: 1fr; gap: 0; }
}
.goli-form__hint {
	display: block;
	font-size: 0.78rem;
	color: var(--goli-secondary);
	margin-top: 0.25rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Consent row — different shape from text inputs */
.goli-form__row--consent {
	background: var(--goli-tertiary);
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	padding: 1rem 1.1rem;
	margin: 1.5rem 0 1.25rem;
}
/* Specificity-bumped so the standard .goli-form__row label rule doesn't override us */
.goli-form .goli-form__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: var(--goli-contrast);
	margin: 0;
}
.goli-form__consent-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--goli-accent);
	cursor: pointer;
}

/* ============================================================
 * Public Memory Wall — card grid
 * ============================================================ */
.goli-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
}
.goli-wall__card {
	background: #fff;
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s var(--goli-ease), box-shadow 0.25s var(--goli-ease), transform 0.25s var(--goli-ease);
	/* Establish a stacking context so .goli-wall__name-link::after can stretch
	   over the whole card (clickability) without affecting layout. */
	position: relative;
}
.goli-wall__card:hover {
	border-color: var(--goli-contrast);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}
/* Stretched-link pattern: the real anchor sits on the name, but its ::after
   pseudo-element covers the entire card so any click registers as a navigation. */
.goli-wall__name-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}
.goli-wall__name-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Photo zoom on hover already exists; pointer cursor confirms clickability. */
.goli-wall__card:hover .goli-wall__name {
	color: var(--goli-accent);
}
.goli-wall__photo {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--goli-tertiary);
}
.goli-wall__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--goli-ease);
}
.goli-wall__card:hover .goli-wall__img {
	transform: scale(1.04);
}
.goli-wall__body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
}
.goli-wall__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}
.goli-wall__name {
	font-family: var(--goli-font-serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--goli-contrast);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.goli-wall__lang {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--goli-secondary);
	background: var(--goli-tertiary);
	padding: 0.2rem 0.45rem;
	border-radius: var(--goli-radius);
}
.goli-wall__meta {
	font-size: 0.85rem;
	color: var(--goli-secondary);
	letter-spacing: 0.02em;
}
.goli-wall__sep {
	margin: 0 0.35rem;
	color: var(--goli-muted);
}
.goli-wall__year {
	font-weight: 600;
	color: var(--goli-accent);
}
.goli-wall__msg {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--goli-primary);
	margin-top: 0.4rem;
}
.goli-wall__msg p {
	margin: 0 0 0.6rem;
	max-width: none;
}
.goli-wall__msg p:last-child { margin-bottom: 0; }

.goli-wall--empty {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--goli-secondary);
	font-style: italic;
	background: var(--goli-tertiary);
	border-radius: var(--goli-radius);
}

.goli-wall__pagination {
	display: flex;
	justify-content: center;
	gap: 0.3rem;
	margin: 2rem 0;
}
.goli-wall__pagination a,
.goli-wall__pagination span {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	border-radius: var(--goli-radius);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--goli-contrast);
	text-decoration: none;
	border: 1px solid var(--goli-muted);
	background: #fff;
	transition: background-color 0.15s var(--goli-ease), border-color 0.15s var(--goli-ease);
}
.goli-wall__pagination a:hover {
	border-color: var(--goli-contrast);
}
.goli-wall__pagination .current {
	background: var(--goli-contrast);
	color: #fff;
	border-color: var(--goli-contrast);
}
.goli-wall__pagination a:hover {
	background: var(--goli-tertiary);
}

/* ============================================================
 * Single Memory page (/memory/{slug}/) — detail view for one submission
 * ============================================================ */
.goli-memory-single {
	max-width: 720px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
}
.goli-memory-single__head {
	margin-bottom: 2rem;
}
.goli-memory-single__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.goli-memory-single__back {
	color: var(--goli-accent);
	text-decoration: none;
	border-bottom: 0;
	transition: color 0.2s var(--goli-ease);
}
.goli-memory-single__back:hover {
	color: var(--goli-contrast);
}
.goli-memory-single__name {
	font-family: var(--goli-font-serif);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.75rem;
	color: var(--goli-contrast);
	letter-spacing: -0.015em;
}
.goli-memory-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
	margin: 0;
	font-size: 0.9rem;
	color: var(--goli-secondary);
	font-family: var(--goli-font-sans);
}
.goli-memory-single__sep {
	opacity: 0.5;
}
.goli-memory-single__lang {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	background: var(--goli-tertiary);
	padding: 0.2rem 0.5rem;
	border-radius: var(--goli-radius);
	color: var(--goli-secondary);
}
.goli-memory-single__photo {
	margin: 0 0 2rem;
	border-radius: var(--goli-radius);
	overflow: hidden;
	background: var(--goli-tertiary);
}
.goli-memory-single__img,
.goli-memory-single__photo img {
	width: 100%;
	height: auto;
	display: block;
}
.goli-memory-single__msg {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	line-height: 1.7;
	color: var(--goli-primary);
}
.goli-memory-single__msg p {
	margin: 0 0 1.25rem;
}
.goli-memory-single__msg p:last-child {
	margin-bottom: 0;
}

/* Previous / Next memory navigation at the bottom of the single page */
.goli-memory-single__nav {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--goli-muted);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.goli-memory-single__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	text-decoration: none;
	color: inherit;
	padding: 0.5rem 0;
	border-bottom: 0;
	transition: color 0.2s var(--goli-ease);
}
.goli-memory-single__nav-link--next {
	text-align: right;
	align-items: flex-end;
}
.goli-memory-single__nav-link:hover {
	color: var(--goli-accent);
}
.goli-memory-single__nav-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--goli-secondary);
}
.goli-memory-single__nav-title {
	font-family: var(--goli-font-serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--goli-contrast);
	transition: color 0.2s var(--goli-ease);
}
.goli-memory-single__nav-link:hover .goli-memory-single__nav-title {
	color: var(--goli-accent);
}
@media (max-width: 600px) {
	.goli-memory-single__nav {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.goli-memory-single__nav-link--next {
		text-align: left;
		align-items: flex-start;
	}
}
.goli-form-success,
.goli-form-error {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: var(--goli-radius);
	font-size: 0.95rem;
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}
.goli-form-success::before { content: "✓"; font-weight: 700; }
.goli-form-error::before   { content: "!"; font-weight: 700; }
.goli-form-success {
	background: rgba(52, 168, 83, 0.08);
	border: 1px solid rgba(52, 168, 83, 0.25);
	color: #1e4620;
}
.goli-form-error {
	background: rgba(221, 51, 51, 0.06);
	border: 1px solid rgba(221, 51, 51, 0.25);
	color: #7a1818;
}

/* ============================================================
 * Hero buttons — squared, hairline, restrained motion (arrow only).
 *
 * NOTE on !important: Gutenberg renders core/button blocks with inline
 * `style="..."` attributes (padding, border-radius, background, color).
 * Inline styles have the highest origin priority in the cascade, so the
 * only way to override them from the stylesheet is with !important.
 * Every !important in this block exists for that reason — not for
 * specificity wars with our own CSS.
 * ============================================================ */
.goli-hero .wp-block-buttons {
	gap: 1rem;
}
.goli-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.8rem !important;
	border-radius: var(--goli-radius) !important;
	font-family: var(--goli-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.25s var(--goli-ease), color 0.25s var(--goli-ease),
				border-color 0.25s var(--goli-ease) !important;
	text-decoration: none;
}
.goli-hero .wp-block-button__link::after {
	content: "→";
	transition: transform 0.25s var(--goli-ease);
}
.goli-hero .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Primary hero button — white on dark photo, fills with red on hover */
.goli-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff !important;
	color: var(--goli-contrast) !important;
	border: 1px solid #fff !important;
}
.goli-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--goli-accent) !important;
	color: #fff !important;
	border-color: var(--goli-accent) !important;
}

/* Outline hero button — translucent border, fills with white on hover */
.goli-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
.goli-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--goli-contrast) !important;
	border-color: #fff !important;
}

/* On narrow viewports the two hero buttons stack — match their widths
   so the column reads as a tidy pair instead of two ragged pills. */
@media (max-width: 740px) {
	.goli-hero .wp-block-button {
		width: 100%;
		max-width: 240px;
	}
	.goli-hero .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
 * Cover/hero polish on home
 * ============================================================ */
.goli-home .wp-block-cover:first-of-type {
	margin-top: 0;
}

/* Image hover lift on cards */
.wp-block-image img {
	transition: transform 0.4s var(--goli-ease);
}

/* ============================================================
 * Gallery lightbox affordance
 * ============================================================ */
.wp-block-gallery figure.wp-block-image {
	overflow: hidden;
	position: relative;
	cursor: zoom-in;
}
.wp-block-gallery figure.wp-block-image::after {
	content: "⤢";
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(22, 22, 22, 0.65);
	color: #fff;
	font-size: 1.1rem;
	border-radius: 50%;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s var(--goli-ease), transform 0.2s var(--goli-ease);
	pointer-events: none;
	z-index: 2;
}
.wp-block-gallery figure.wp-block-image:hover::after {
	opacity: 1;
	transform: translateY(0);
}
.wp-block-gallery figure.wp-block-image img {
	transition: transform 0.5s var(--goli-ease);
	display: block;
	width: 100%;
}
.wp-block-gallery figure.wp-block-image:hover img {
	transform: scale(1.04);
}

/* PhotoSwipe theme tweaks to match the site palette */
.pswp {
	--pswp-bg: #0d0d0d;
	--pswp-placeholder-bg: #1a1a1a;
}
.pswp__icn {
	color: #fff;
}

/* ============================================================
 * "Get involved" CTA cards
 * ============================================================ */
.wp-block-column.goli-card {
	padding: 2.25rem 1.75rem;
	border: 1px solid var(--goli-muted);
	border-radius: var(--goli-radius);
	background: var(--goli-base);
	transition: border-color 0.25s var(--goli-ease);
	min-width: 0;
}
.wp-block-column.goli-card:hover {
	border-color: var(--goli-contrast);
}

/* True row-level symmetry across the three cards: title rows line up, body
   rows line up, link rows line up — even when title or body lengths differ.
   Done by switching the parent .wp-block-columns to CSS grid with three named
   rows, then having each card inherit those row tracks via subgrid. Wrapped
   in the desktop media query so the mobile stacked layout (below) is
   untouched. */
@media (min-width: 901px) {
	.wp-block-columns:has(> .goli-card) {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		/* title (auto) / body (1fr, fills any extra height) / link (auto, pinned bottom) */
		grid-template-rows: auto 1fr auto;
		/* Keep column gap (between cards) but zero row gap, so subgrid rows inside
		   each card sit flush against each other without extra padding. */
		column-gap: var(--wp--style--block-gap, 2em);
		row-gap: 0;
		align-items: stretch;
	}
	.wp-block-column.goli-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: 0;
	}
	/* Margin-bottom on the body is redundant once subgrid handles row alignment;
	   the link's padding-top provides the visual gap. */
	.wp-block-column.goli-card .goli-card__body {
		margin-bottom: 0;
	}
}
.goli-card__title {
	font-family: var(--goli-font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.85rem;
	text-transform: none;
	letter-spacing: -0.012em;
	word-break: keep-all;
	overflow-wrap: break-word;
	hyphens: manual;
	text-wrap: balance;
}
.goli-card__body {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	max-width: none;
	color: var(--goli-secondary);
}
.goli-card__link {
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0;
	/* In the subgrid layout the link occupies the bottom row track and is
	   automatically aligned across all three cards. The padding-top guarantees
	   visual separation from the body text above. */
	padding-top: 0.5rem;
}
.goli-card__link a {
	color: var(--goli-accent);
	text-decoration: none;
	/* Keep "→" glued to the last word so the arrow never wraps onto its own line. */
	text-wrap: balance;
}
.goli-card__link a:hover {
	text-decoration: underline;
}

/* Ensure CTA columns stack properly at narrow widths */
@media (max-width: 900px) {
	.wp-block-columns:has(.goli-card) {
		gap: 1rem;
	}
	.wp-block-column.goli-card {
		flex-basis: 100% !important;
		padding: 1.75rem 1.5rem;
	}
}

/* ============================================================
 * Home-page image+text rows ("What is Goli otok?", "The Association")
 *
 * Default WP behaviour: the row uses align-items: center, so the image sits at
 * its natural aspect-ratio height while the text column drives the row height
 * — leaving the image visibly shorter than the text block.
 *
 * Fix: stretch the *image* column to fill the row, then make the image cover
 * the column. The text column keeps is-vertically-aligned-center so its
 * content stays centred. Scoped to .goli-home so it doesn't touch other
 * image+text layouts (history page, etc.).
 * ============================================================ */
@media (min-width: 901px) {
	.goli-home .wp-block-columns:has(> .wp-block-column > figure.wp-block-image) > .wp-block-column:not(.is-vertically-aligned-center) {
		align-self: stretch;
		display: flex;
	}
	.goli-home .wp-block-columns:has(> .wp-block-column > figure.wp-block-image) > .wp-block-column:not(.is-vertically-aligned-center) > figure.wp-block-image {
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.goli-home .wp-block-columns:has(> .wp-block-column > figure.wp-block-image) > .wp-block-column:not(.is-vertically-aligned-center) > figure.wp-block-image > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

/* Body baseline */
body {
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Selection — accent-tinted but soft, so long-form reading isn't visually loud */
::selection {
	background: rgba(200, 16, 46, 0.18);
	color: inherit;
}

/* ============================================================
 * EDITORIAL CONTENT — typography, rhythm, and visual punctuation
 * for long-form content pages (History, About, Why Memorial, etc.)
 * ============================================================ */

/* Narrow reading column for body text on inner pages.
   Headlines/H2s/lists also constrained so they share the same rhythm.
   Image and gallery blocks remain at full content width for impact.
   Counter is used to number H2 section starts (see H2 rule below). */
body.goli-inner .wp-block-post-content {
	font-size: 1.08rem;
	line-height: 1.7;
	counter-reset: goli-section;
}
body.goli-inner .wp-block-post-content > p,
body.goli-inner .wp-block-post-content > h1,
body.goli-inner .wp-block-post-content > h2,
body.goli-inner .wp-block-post-content > h3,
body.goli-inner .wp-block-post-content > h4,
body.goli-inner .wp-block-post-content > ul,
body.goli-inner .wp-block-post-content > ol,
body.goli-inner .wp-block-post-content > blockquote {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

/* H1 — page title, serif display weight, with a hairline rule below to anchor it. */
body.goli-inner .wp-block-post-content > h1 {
	font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin-top: 0;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--goli-muted);
}

/* H2 — major section start. Numbered eyebrow above the heading reinforces
   the archival/editorial register without changing the heading text itself. */
body.goli-inner .wp-block-post-content > h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	margin-top: 4.5rem;
	margin-bottom: 1.1rem;
	line-height: 1.12;
	letter-spacing: -0.015em;
	counter-increment: goli-section;
	position: relative;
}
body.goli-inner .wp-block-post-content > h2::before {
	content: counter(goli-section, decimal-leading-zero);
	display: block;
	font-family: var(--goli-font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--goli-secondary);
	margin-bottom: 0.65rem;
	font-variant-numeric: tabular-nums;
}

/* H3 — sub-section */
body.goli-inner .wp-block-post-content > h3 {
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem);
	margin-top: 2.75rem;
	margin-bottom: 0.65rem;
	letter-spacing: -0.005em;
	line-height: 1.25;
}

/* Lead paragraph: first paragraph after H1 — larger, lighter weight,
   softer color so it reads as introduction rather than headline. */
body.goli-inner .wp-block-post-content > h1 + p {
	font-size: 1.22rem;
	line-height: 1.55;
	font-weight: 400;
	color: var(--goli-secondary);
	margin-bottom: 2.5rem;
	max-width: 60ch;
}

/* (Drop caps removed — didn't fit the visual register of a memorial site) */

/* Paragraph rhythm — slightly more space than default */
body.goli-inner .wp-block-post-content > p {
	margin-top: 0;
	margin-bottom: 1.4rem;
}

/* Section divider — small centered hairline */
body.goli-inner .wp-block-post-content > hr,
body.goli-inner .wp-block-post-content > .wp-block-separator {
	width: 60px;
	height: 1px;
	background: var(--goli-muted);
	border: 0;
	margin: 4rem auto;
	opacity: 1;
	color: var(--goli-muted);
	max-width: 60px !important;
}
/* Dotted variant for inside-section separators */
body.goli-inner .wp-block-post-content > .wp-block-separator.is-style-dots {
	width: auto;
	max-width: 4rem !important;
	background: none;
	color: var(--goli-secondary);
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	height: auto;
}
body.goli-inner .wp-block-post-content > .wp-block-separator.is-style-dots::before {
	content: "· · ·";
}

/* Pull quote — editorial breakout */
body.goli-inner .wp-block-post-content > .wp-block-pullquote {
	margin: 3rem auto !important;
	padding: 0;
	border: 0;
	max-width: 60ch;
	text-align: left;
	color: var(--goli-contrast);
}
body.goli-inner .wp-block-post-content > .wp-block-pullquote blockquote {
	margin: 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--goli-accent);
}
body.goli-inner .wp-block-post-content > .wp-block-pullquote p {
	font-family: var(--goli-font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: none;
}
body.goli-inner .wp-block-post-content > .wp-block-pullquote cite {
	font-family: var(--goli-font-sans);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--goli-secondary);
	font-style: normal;
	margin-top: 1rem;
	display: block;
}

/* Inline image with caption */
body.goli-inner .wp-block-post-content .wp-block-image {
	margin: 2.5rem auto;
}
body.goli-inner .wp-block-post-content .wp-block-image figcaption,
body.goli-inner .wp-block-post-content .wp-block-image .wp-element-caption {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--goli-secondary);
	text-align: left;
	margin: 0.5rem 0 0;
	line-height: 1.5;
	max-width: 68ch;
}

/* Wide image (alignwide) — breaks out beyond the reading column */
body.goli-inner .wp-block-post-content > .wp-block-image.alignwide {
	max-width: 100ch;
}
body.goli-inner .wp-block-post-content > .wp-block-image.alignwide img {
	width: 100%;
	height: auto;
}

/* Blockquote (non-pullquote) — for testimony-style passages */
body.goli-inner .wp-block-post-content > blockquote,
body.goli-inner .wp-block-post-content > .wp-block-quote {
	border: 0;
	margin: 2.5rem auto;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--goli-muted);
	color: var(--goli-primary);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.6;
}

/* List rhythm */
body.goli-inner .wp-block-post-content > ul li,
body.goli-inner .wp-block-post-content > ol li {
	margin: 0.4rem 0;
	line-height: 1.6;
}

/* ============================================================
 * READING PROGRESS BAR — fixed at top of viewport
 * ============================================================ */
.goli-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 1100;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.04);
}
.goli-progress__bar {
	height: 100%;
	width: 0;
	background: var(--goli-accent);
	transition: width 0.1s linear;
}
/* On dark home hero, the bar background should be lighter */
.goli-home .goli-progress {
	background: rgba(255, 255, 255, 0.1);
}
.goli-home .goli-progress__bar {
	background: #fff;
}
/* Hide progress bar on home (no real long-form content) */
.goli-home .goli-progress {
	display: none;
}

/* ============================================================
 * TABLE OF CONTENTS — sticky sidebar on desktop, top inline on mobile
 * ============================================================ */
.goli-toc {
	font-family: var(--goli-font-sans);
	font-size: 0.85rem;
	color: var(--goli-secondary);
}
@media (min-width: 1200px) {
	.goli-toc {
		position: fixed;
		right: 2rem;
		top: 50%;
		transform: translateY(-50%);
		width: 220px;
		max-height: 70vh;
		overflow-y: auto;
		padding: 1rem 0;
		z-index: 50;
		/* Fade for the JS-toggled hide-when-footer-visible state below. */
		opacity: 1;
		transition: opacity 0.25s var(--goli-ease);
	}
	/* Toggled by JS via an IntersectionObserver on the footer — prevents the
	   fixed-position TOC from overlapping the dark footer when scrolled. */
	.goli-toc.goli-toc--hide {
		opacity: 0;
		pointer-events: none;
	}
}
@media (max-width: 1199px) {
	.goli-toc {
		max-width: 68ch;
		margin: 0 auto 2.5rem;
		padding: 1.25rem 1.5rem;
		background: var(--goli-tertiary);
		border: 1px solid var(--goli-muted);
		border-radius: var(--goli-radius);
	}
}
@media (max-width: 740px) {
	.goli-toc {
		display: none;
	}
}
.goli-toc__heading {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--goli-secondary);
	margin: 0 0 0.75rem;
}
.goli-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
}
.goli-toc__item {
	margin: 0 0 0.5rem;
	counter-increment: toc;
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.4;
}
.goli-toc__item::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--goli-muted);
	font-variant-numeric: tabular-nums;
}
.goli-toc__item a {
	color: var(--goli-primary);
	text-decoration: none;
	transition: color 0.2s var(--goli-ease);
	border-bottom: 0;
}
.goli-toc__item a:hover {
	color: var(--goli-accent);
}
.goli-toc__item.is-active a {
	color: var(--goli-accent);
	font-weight: 600;
}
.goli-toc__item.is-active::before {
	color: var(--goli-accent);
}

/* Smooth-scroll offset for anchored headings (sticky header clearance).
   Scoped to focus-within so script/keyboard-driven scrolls aren't animated —
   only intentional anchor clicks. Disabled entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}
body.goli-inner .wp-block-post-content h2[id],
body.goli-inner .wp-block-post-content h3[id] {
	scroll-margin-top: calc(var(--goli-header-h) + 1.5rem);
}

/* ============================================================
 * Vertical rhythm — standardize section spacing to a 3-step scale
 * ============================================================ */
:root {
	--goli-space-major:   clamp(4rem, 3rem + 4vw, 7rem);     /* between major sections */
	--goli-space-section: clamp(2rem, 1.5rem + 2.5vw, 4.5rem); /* in-section breathing */
	--goli-space-tight:   1.5rem;                              /* tight stack */
}
/* Inner-section padding for any group that uses spacing-70 (major) */
[style*="var(--wp--preset--spacing--70)"] {
	--effective-pad: var(--goli-space-major);
}
/* Force consistent vertical rhythm on the home-page sections */
.goli-home main > .wp-block-post-content > .wp-block-group {
	padding-top: var(--goli-space-major) !important;
	padding-bottom: var(--goli-space-major) !important;
}
.goli-home main > .wp-block-post-content > .wp-block-group.goli-hero {
	padding: 0 !important;
}

/* ============================================================
 * Scroll-triggered fade-in reveals
 * ============================================================ */
.goli-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--goli-ease), transform 0.7s var(--goli-ease);
	will-change: opacity, transform;
}
.goli-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.goli-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
 * Footer — grid-based, responsive, clear hierarchy
 * ============================================================ */
.goli-footer {
	background: var(--goli-contrast);
	color: rgba(245, 245, 245, 0.78);
	padding: clamp(3rem, 5vw, 5rem) 1.5rem clamp(2rem, 3vw, 3rem);
	font-family: var(--goli-font-sans);
}
.goli-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* Top section: brand block | 3 info columns */
.goli-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
@media (max-width: 900px) {
	.goli-footer__main {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Brand block */
.goli-footer__brand {
	max-width: 360px;
}
.goli-footer__brand-link {
	display: inline-block;
	border: 0;
}
.goli-footer__logo {
	display: block;
	height: 32px;
	width: auto;
	max-width: 220px;
	margin: 0 0 1.25rem;
	opacity: 0.95;
}
.goli-footer__tagline {
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0 0 1.5rem;
	color: rgba(245, 245, 245, 0.72);
	max-width: 32ch;
}
.goli-footer__brand .goli-cta {
	margin-top: 0;
}

/* 3 info columns */
.goli-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 740px) {
	.goli-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
	}
}
@media (max-width: 460px) {
	.goli-footer__cols {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.goli-footer__col {
	min-width: 0;
}
.goli-footer__heading {
	font-family: var(--goli-font-sans);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.85rem;
	line-height: 1.2;
}
.goli-footer__col p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(245, 245, 245, 0.72);
	margin: 0 0 0.75rem;
	max-width: none;
}
.goli-footer__col p:last-child { margin-bottom: 0; }
.goli-footer__col p strong {
	color: #fff;
	font-weight: 600;
}
.goli-footer__col a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: border-color 0.2s var(--goli-ease), color 0.2s var(--goli-ease);
}
.goli-footer__col a:hover {
	color: var(--goli-accent);
	border-bottom-color: var(--goli-accent);
}
/* Specificity-bumped so .goli-footer__col p doesn't outweigh us */
.goli-footer__col p.goli-footer__small {
	font-size: 0.82rem;
	color: rgba(245, 245, 245, 0.5);
	margin-top: 0.5rem;
}

/* Bottom bar */
.goli-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.goli-footer__copyright {
	font-size: 0.78rem;
	color: rgba(245, 245, 245, 0.5);
	letter-spacing: 0.04em;
	margin: 0;
}
@media (max-width: 540px) {
	.goli-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}
/* The footer's own lang switcher (full list) should look subtle on dark bg */
.goli-footer .goli-lang-switcher__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.95rem;
}
.goli-footer .goli-lang-switcher__item {
	margin: 0;
}
.goli-footer .goli-lang-switcher__list a {
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	padding: 0.45rem 0;
	border: 0;
	color: rgba(245, 245, 245, 0.7);
	font-family: var(--goli-font-sans);
	transition: color 0.2s var(--goli-ease);
}
.goli-footer .goli-lang-switcher__list a:hover {
	color: #fff;
}
.goli-footer .goli-lang-switcher__code {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(245, 245, 245, 0.6);
	min-width: 1.6rem;
}
.goli-footer .goli-lang-switcher__name {
	font-size: 0.95rem;
	font-weight: 500;
}
.goli-footer .goli-lang-switcher__list .current-lang a {
	color: #fff;
}
.goli-footer .goli-lang-switcher__list .current-lang .goli-lang-switcher__code {
	/* Inherit white from .current-lang a; "active" is already signalled by the
	   white link colour + bold name on lines above. Red accent text on the dark
	   footer fails WCAG AA (2.96:1). */
	color: inherit;
}
.goli-footer .goli-lang-switcher__list .current-lang .goli-lang-switcher__name {
	font-weight: 600;
}

/* ICSC affiliation badge in footer bottom-bar.
   theme.json elements.link gives all <a> the accent color; we override here without
   !important because .goli-footer .goli-icsc has enough specificity. */
.goli-footer .goli-icsc {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	border: 0;
	color: inherit;
	opacity: 0.85;
	transition: opacity 0.2s var(--goli-ease);
}
.goli-footer .goli-icsc:hover {
	opacity: 1;
	color: inherit;
}
.goli-icsc__caption {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.7);
	font-weight: 600;
	white-space: nowrap;
}
.goli-icsc img {
	height: 24px;
	width: auto;
	max-width: 220px;
	display: block;
}

/* (Old block-based footer overrides removed — new shortcode-driven footer above takes precedence) */