/* css/global.css - COMBINED VERSION */
:root {
	--base-block-space-pixel: 0px;
	--base-block-space-rem: 0rem;
	--base-inline-space-pixel: 0px;
	--base-inline-space-rem: 0rem; 
	--offset-vertical-rem: 0rem;
	--block-indent-dynamic: 2rem;
	--block-indent-full: 2.5rem;
	--block-indent-half: 1.25rem;
	--list-indent-increment: 1.5rem;
	--textbadge-offset: 0.75rem;
	--primary: #0d1b2a; /* blueish black */
	--primary-05: rgba(13, 27, 42, 0.05);
	--primary-08: rgba(13, 27, 42, 0.08);
	--primary-10: rgba(13, 27, 42, 0.1);
	--primary-20: rgba(13, 27, 42, 0.2);
	--secondary: #1b4965; /* very dark blue */
	--alert: #e63946;
	--neutral: #8d99ae;
	--bg: #f8f9fa;
	--card-bg: #ffffff;
	--accent: #197a6c; /* was #1e7d71 */
	--accent-bg: rgba(42, 157, 143, 0.05);
	--accent-10: rgba(42, 157, 143, 0.1);
	--accent-15: rgba(42, 157, 143, 0.15);
	--accent-20: rgba(42, 157, 143, 0.2);
	--accent-30: rgba(30, 125, 113, 0.3);
	--border-light: #e2e8f0;
	--border: #cbd5e0;
	--border-dark: #a0aec0;
	--border-strong: #718096;
	--text: #1a202c;
	--text-light: #4a5568; /* rather dark gray */
	--text-white-80: rgba(255, 255, 255, 0.8);
	--text-white-60: rgba(255, 255, 255, 0.6);
	/* Elevation Shadows */
	--shadow-sharp-smalldrop: 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-soft-smalldrop: 0 2px 10px rgba(0, 0, 0, 0.05);
	--shadow-soft-mediumdrop: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-extrasoft-mediumdrop: 0 5px 20px rgba(0,0,0,0.05);
	--shadow-extrasoft-largedrop: 0 10px 25px rgba(0, 0, 0, 0.15);
	--shadow-ultrasoft-largedrop: 0 10px 30px rgba(0, 0, 0, 0.08);
	--shadow-maxsoft-hugedrop: 0 20px 40px rgba(0, 0, 0, 0.2);
	--mono-strict: 'Roboto Mono', monospace;	/* pre-load woff2 surrogate*/
	--font-sans:
		"Liberation Sans",	/* High quality Libre font on X11/Wayland	(unlikely to interfere) */
		"Noto Sans",		/* Modern FOSS font with notable coverage	(unlikely to interfere) */
		-apple-system, BlinkMacSystemFont, /* Apple specific			  (won't interfere) */
		"Segoe UI",		/* Windows (7-11, adaptive) system font */
		sans-serif;		/* Platform default: Roboto or OEM font on Android & user preferences */
	--font-mono:
		"Liberation Mono",	/* High quality Libre font on X11/Wayland	(unlikely to interfere) */
		"Noto Sans Mono",	/* Modern FOSS font with notable coverage	(unlikely to interfere) */
		"SF Mono", "Monaco",	/* macOS specific */
		"Cascadia Mono", "Consolas",	/* Windows, better than legacy FOSS where available */
		monospace;		/* Platform default: Roboto or OEM font on Android & user preferences */
}

/* Utility Classes */
.util-uppercase { text-transform: uppercase; }

.util-accent { color: var(--accent); }

.util-text-center { text-align: center; }

.util-padding-underline-2px { padding-bottom: 2px; }

.util-nowrap-spans span { white-space: nowrap; }
.util-nowrap-spans span + span::after { content: " "; }

.util-margin-bottom-05rem { margin-bottom: 0.5rem; }
.util-margin-bottom-1rem { margin-bottom: 1rem; }

@supports (padding: clamp(10px, 10vh, 100px)) {
	:root {
		--list-indent-increment: clamp(1dvw, 2dvw, 1.75rem);
		--block-indent-dynamic: min(2.5rem, 2dvw);
		--column-space-dynamic: min(1rem, 2dvw);
	}
}

/* Breakpoint DOCUMENTATION (cannot be used in @media)
--bp-tablet-width: 48rem;	// 768px at 16px base
--bp-desktop-width: 68rem;	// 1088px at 16px base
--bp-compact-height: 36rem;	// scroll nav-header in landscape below this height
--bp-cramped-height: 30rem;	// scroll nav-header below this size in any orientation
*/

/* Hide all language spans by default */
.lang-en, .lang-de, .lang-fr, .lang-no { display: none; }

/* Show only the current language */
html:lang(en) .lang-en,
html:lang(de) .lang-de,
html:lang(fr) .lang-fr,
html:lang(no) .lang-no { display: inline; }

body {
	margin: 0; /* override 8px browser default */
	font-family: var(--font-sans);
	background-color: var(--bg);
	color: var(--text);
	line-height: 1.5;
	overflow-x: hidden;
	min-height: 100vh;
}

header {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-light);
	padding: calc(2 * var(--base-block-space-pixel, 0px) + 1px) 0;
	z-index: 1000;
	box-shadow: var(--shadow-soft-smalldrop);
} /* CONTINUED in global/header.css */

main { min-height: 60vh; } /* continued in global/*-main.css */

hgroup > p {
	margin-top: 0; /* override default 1em */
	margin-bottom: 0; /* override default 1em */
}

body > .footer-filler { 
	min-height: 10vh;
	min-height: max(10vh, 4rem);
	margin-top: 1.5rem;
}

footer {
	background-color: var(--primary);
	color: white;
} /* CONTINUED in global/footer.css */

@media (hover: hover) {
	summary { cursor: pointer; }
}

.svg-sprite-container { display: none; }

.std-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.std-sr-only:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--accent);
	color: white;
	z-index: 9999;
}

.std-main-container {
	margin-top: var(--offset-vertical-rem, 0px);
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

.std-main-container > hgroup {
	text-align: center;
}

.std-interstitial-container {
	margin: 0 auto;
	padding: 1rem;
	max-width: 800px;
}

.std-headline-badge {
	display: inline-block;
	margin: var(--base-block-space-rem, 1rem) auto calc(2 * var(--base-block-space-rem, 1rem) + 0.5rem) auto;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-align: center;
	color: #0f5a4f;
	background: var(--accent-bg);
	border: 1px solid var(--accent-20);
	border-radius: 9999px; /* --radius-full */
	padding: 0.5rem 1.25rem;
}

.std-inline-note {
	color: var(--text-light);
	font-size: 0.9rem;
}

.std-subtitle-small {
	color: var(--text-light);
	font-size: 0.9rem;
}

.std-subtitle-large {
	color: var(--text-light);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* Wisdom/moral quote styling */
.std-quote-moral {
	font-family: var(--font-mono);
	text-align: center;
	display: block;
	margin: calc(var(--base-block-space-rem, 0.25rem) + 0.5rem) auto calc(var(--base-block-space-rem, 0.75rem) + 0.5rem);
	max-width: 80ch;
	color: var(--text-light);
}
.std-quote-moral::before {
	content: "// ";
	opacity: 0.7;
}

.std-textblock-highlight {
	font-style: normal;
	background: var(--accent-bg);
	padding: 0.5rem 0.75rem 0.5rem var(--block-indent-half);
	border-radius: 6px; /* --radius-md */
}

.std-textblock-highlight > p,
.std-textblock-highlight > dl {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem
}


.std-headline-normalweight { font-weight: normal; }

.std-offset-note { width: 100%; }
.std-offset-note > dt { float: left; margin-right: var(--column-space-dynamic); }
.std-offset-note dd { overflow: auto; /* Or overflow: hidden */ }
.std-offset-note dt { font-weight: var(--font-weight-bold, bold); }


.std-indent-fixed-full { margin-left: var(--block-indent-full); }
.std-indent-fixed-half { margin-left: var(--block-indent-half); }

/* See @media (min-width: 35rem) - becomes same as static above */
.std-indent-dynamic-ext { margin-left: calc(var(--block-indent-dynamic) + var(--list-indent-increment, 1.5rem)); }
.std-indent-dynamic-full { margin-left: var(--block-indent-dynamic); }
.std-indent-dynamic-half { margin-left: calc(var(--block-indent-dynamic) / 2); }

/* Navigation link (in interstitial-container) */
.std-section-nav {
	margin: 0 auto calc(var(--base-block-space-rem, 1rem) + 0.5rem);
	padding: 0.5rem;
}

/* In-page Navigation link styling */
.std-section-nav-prompt {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
		text-decoration: none;
	color: var(--accent);
	font-weight: 600;
}

.pagelink-button { 
	text-align: center;
}

.pagelink-button a { 
	position: relative;
	text-decoration: none;
	color: var(--accent);
}

.pagelink-button a[rel="next"]::after,
.pagelink-button a[rel="home"]::before,
.pagelink-button a[rel="prev"]::before {
	position: absolute;
	bottom: -0.25em;
	font-weight: 700;
	font-size: 1.5rem;
}
.pagelink-button a[rel="next"]::after {
	content: '→';
	left: 100%;
}
.pagelink-button a[rel="home"]::before,
.pagelink-button a[rel="prev"]::before {
	content: '←';
	right: 100%;
}

.pagelink-button a > span {
	display: inline-block;
	position: relative;
	font-size: 1.1rem;
	font-weight: 600;
	padding-bottom: 2px; /* maintain underlining space (animated) */
}

/* animated underline effect */
.pagelink-button a > span:hover::after { width: 100%; }
.pagelink-button a > span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%; /* Center horizontally */
	width: 0;
	height: 2px;
	background-color: var(--border);
	transition: width 0.2s ease;
	transform: translateX(-50%); /* Center the element */
}

@media (prefers-reduced-motion: reduce) {
	.pagelink-button a > span::after {
		transition: none;  /* Remove underline animation */
	}
}


@media (pointer: coarse) {
	/* Apply color scheme to all tappable elements */
	button,
	a {	background-color: transparent;
		/* Prevent default tap highlight on iOS */
		-webkit-tap-highlight-color: transparent;
	}
	button:active,
	a:active {
		background-color: color-mix(in srgb, var(--accent) 15%, transparent);
	}

	/* Disable underline animation on touch devices */
	.pagelink-button a > span:after { display: none; }

	/* Adjust pagelink offset  */
	.pagelink-button a[rel="next"]::after,
	.pagelink-button a[rel="prev"]::before {
			bottom: -0.25rem; /* rem instead of em for vertical offset */
	}

	.pagelink-button a:active { /* reset background-color */
		background-color: transparent;
	}

	/* pagelink touch feedback */
	.pagelink-button a > span {
		transition: all 0.08s cubic-bezier(0.2, 0.9, 0.4, 1.1);
	}
	.pagelink-button a > span:active {
		transform: scale(0.9) translateY(1px);
	}
}

/* <a> element fallback styles if browser doesn't support :focus-visible pseudo-class
	:focus (as soon as clicked/tapped), :active (as long as clicked),  */
a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Remove focus outline from MOUSE selected <a> elements */
a:focus:not(:focus-visible) {
  outline: none;
}
/* The actually desired <a> element styles (when KEYBOARD selected) */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}


/* HEIGHT BREAKPOINT TABLE
   Values increase at 64px (4rem) granularity up to 1024px,
   then stabilize at maximum values from 1025px onward
   (multiple breakpoints maintained for future flexibility)
*/
/* 20-36rem = MINIMAL SPACING and SCROLLING nav-header up to 576 vertical CSS pixels (small screens in landscape orientation) */
@media (min-height: 321px) and (max-height: 576px) {
	/* 24-28rem (384px-448px, stretch but NO heder padding) */
	:root { --offset-vertical-rem: 0.375rem; }
	@media (max-height: 384px) {
		/* 20-24rem (321px-384px) override */
		:root { --offset-vertical-rem: 0.125rem; }
	}
	@media (min-height: 449px) { /* 28-36rem (449px-576px) */
		/* 28-36rem (smallest header padding, increasingly stretching) */
		:root { --offset-vertical-rem: 0.875rem; --base-block-space-pixel: 1px; --base-block-space-rem: 0.125rem; }
		@media (min-height: 513px) {
			/* 32-36rem (513px-576px) override */
			:root { --offset-vertical-rem: 1.25rem; }
			@media (orientation: portrait) {
				/* iPhone 5S and 1st gen SE (568px, sold 2012-2018) */
				header { position: sticky; top: 0; }
				:target { scroll-margin-top: calc(2 * var(--base-block-space-pixel, 0px) + 2rem); }
			}
		}
	}
}

/* 36-64rem = DYNAMIC SPACING up to 1024 vertical CSS pixels (lines) */
@media (min-height: 577px) {
	/* 36-40rem (577px-640px) */
	:root { --offset-vertical-rem: 1.75rem; --base-block-space-pixel: 2px; --base-block-space-rem: 0.25rem; }

	/* Switch to STICKY nav-bar (header) */
	header { position: sticky; top: 0; }
	:target { scroll-margin-top: calc(5 * var(--base-block-space-pixel, 4px) + var(--offset-vertical-rem, 1.5rem)); }
/*
	:target { scroll-margin-top: var(--main-margin-top); }
*/

	@media (min-height: 641px) and (max-height: 832px) { /* 40-52rem (641px-832px) */
		/* 48-52rem (769px-832px) */
		:root { --offset-vertical-rem: 2.25rem; --base-block-space-pixel: 6px; --base-block-space-rem: 0.75rem; }
		@media (max-height: 768px) { /* 40-48rem (641px-768px) */
			/* 44-48rem (705px-768px) intermediate override */
			:root { --offset-vertical-rem: 2.125rem; --base-block-space-pixel: 5px; --base-block-space-rem: 0.625rem; }
			@media (max-height: 704px) {
				/* 40-44rem (641px-704px) override */
				:root { --offset-vertical-rem: 2rem; --base-block-space-pixel: 4px; --base-block-space-rem: 0.5rem; }
			}
		}
	}
	@media (min-height: 833px) and (max-height: 1024px) { /* 52-64rem (833px-1024px) */
		/* 60-64rem (961px-1024px) */
		:root { --offset-vertical-rem: 2.75rem; --base-block-space-pixel: 8px; --base-block-space-rem: 1rem; }
		@media (max-height: 960px) { /* 52-60rem (833px-960px) */
			/* 56-60rem (897px-960px) intermediate override */
			:root { --offset-vertical-rem: 2.5rem; }
			@media (max-height: 896px) {
				/* 52-56rem (833px-896px) override */
				:root { --offset-vertical-rem: 2.375rem; --base-block-space-pixel: 7px; --base-block-space-rem: 0.875rem; }
			}
		}
	}
}
/* >64rem = LARGE SCREENS don't require dynamic vertical spacing */
@media (min-height: 1025px) {
	:root { --offset-vertical-rem: 3rem; --base-block-space-pixel: 8px; --base-block-space-rem: 1rem; }
	/* 64-68rem 
	@media (max-height: 1088px) { } */
	/* 68-72rem 
	@media (max-height: 1152px) { } */
}
/* >72rem 
@media (min-height: 1153px) { } */


/* TABLET Landscape: ≥ var(--bp-tablet-width) (768px) */
@media (min-width: 48rem) {
	.topic-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* DESKTOP: ≥ 68rem (1088px) */
@media (min-width: 68rem) {
	.std-indent-dynamic-full { margin-left: calc(var(--block-indent-full) - 1rem); }
	.std-indent-dynamic-half { margin-left: calc(var(--block-indent-half) - 0.5rem); }
}