/* =============================
 * Global
 * ============================= */

:root {
	/* Brand */
	--superblue: rgb(30, 60, 143);
	--softblue: rgb(87, 125, 189);
	--lightblue: rgb(113, 152, 218);
	--color-accent: #5dade2;
	--color-accent-hover: #3498db;
	--color-accent-soft: #a3cbff;
	--color-highlight: rgb(221, 141, 25);
	--color-link: #0059ff;

	/* Callouts (markdown.css: .warning, .danger, .tip) */
	--color-warning: rgb(235, 161, 52);
	--color-danger: rgb(255, 83, 83);
	--color-info: rgb(50, 85, 232);

	/* Text */
	--color-text-strong: #333;
	--color-text: #555;
	--color-text-muted: #666;
	--color-text-subtle: #999;
	--color-text-inverse: white;
	--color-text-inverse-muted: rgb(235, 235, 235);

	/* Backgrounds */
	--color-bg: rgb(250, 250, 250);
	--color-surface: white;
	--color-surface-alt: #f5f5f5;
	--color-surface-hover: #eeeeee;
	--color-surface-strong: #e8e8e8;
	--color-surface-strong-hover: #dedede;
	--color-surface-tint: #f0f4ff;
	--color-surface-dark: rgb(50, 50, 50);
	--color-surface-blue: rgba(22, 39, 85, 0.9);

	/* Borders */
	--color-border: #e8e8e8;
	--color-border-strong: #dddddd;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 5rem;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 50px;

	/* Section rhythm: every full-width band (.area, hero, CTA, TramaBOL sections)
	   uses the same vertical padding, every sub-block inside a band the same gap,
	   and all content shares one max width and side gutter. A sub-block's title
	   sits much closer to its content (--title-space) than to the previous
	   sub-block (--block-space), so each sub-block reads as one group */
	--section-space: var(--space-2xl);
	--block-space: 6rem;
	--title-space: var(--space-md);
	--content-max: 1200px;
	--content-narrow: 900px;
	--gutter: var(--space-lg);

	/* Cards */
	--card-bg: var(--color-surface);
	--card-border: 1px solid var(--color-border);
	--card-radius: var(--radius-lg);
	--card-padding: var(--space-lg);
	--card-gap: var(--space-lg);

	/* Typography: IBM Plex Sans (semibold headings and navigation, regular text),
	   IBM Plex Mono for code */
	--font-heading: 'IBM Plex Sans', sans-serif;
	--font-body: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--font-weight-heading: 600;
	--font-size-display: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.5rem;
	--font-size-h4: 1.25rem;
	--font-size-lg: 1.125rem;
	--font-size-body: 1rem;
	--font-size-sm: 0.875rem;
}

/* Smaller headings on mobile: every title follows the tokens above */
@media (max-width: 768px) {
	:root {
		--font-size-h1: 2rem;
		--font-size-h2: 1.625rem;
		--font-size-h3: 1.3rem;
		--font-size-h4: 1.125rem;
		--section-space: var(--space-xl);
		--block-space: var(--space-2xl);
		--gutter: var(--space-sm);
		--card-padding: var(--space-md);
	}
}

/* Anchors land below the sticky navbar */
html {
	scroll-padding-top: 3.5rem;
}

body {
	background-color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
}

/* Images carry width/height attributes (partials/img-size.html) to reserve their
   space while loading; keep their ratio when CSS only constrains the width */
img {
	height: auto;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-heading);
}

code, kbd, pre, samp {
	font-family: var(--font-mono);
}

#contact-button {
	font-family: var(--font-heading);
}

/* Buttons stacked in a column (partials/button.html, `btmargin`) */
.btn-stacked {
	margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

section {
	padding-top: 3em;
	padding-bottom: 0;
}

/* A page starting with a full-width band (e.g. the grey band of
   solutions/gnucobol) sits right under the navbar: the band's own padding
   gives the space, otherwise a strip of page background shows above it */
section:has(> .area:first-child) {
	padding-top: 0;
}

/* Two button styles on light backgrounds: filled (.btn) for the main action,
   outlined (.btn-secondary-outline) for the others; .btn-light on blue bands.
   Bootstrap 5.3 colors the focus (keyboard) and active (click) states from its
   --bs-btn-* variables: they are set here so every state keeps our colors */
.btn {
	--bs-btn-hover-color: var(--color-text-inverse);
	--bs-btn-hover-bg: var(--softblue);
	--bs-btn-active-color: var(--color-text-inverse);
	--bs-btn-active-bg: var(--softblue);
	--bs-btn-active-border-color: transparent;
	--bs-btn-focus-shadow-rgb: 87, 125, 189;
	background-color: var(--superblue);
	color: var(--color-text-inverse);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	padding: 0.75rem 1.75rem;
	font-weight: 500;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
	background-color: var(--softblue);
	color: var(--color-text-inverse);
}

.btn-light {
	--bs-btn-hover-color: var(--color-text-strong);
	--bs-btn-hover-bg: var(--color-surface-alt);
	--bs-btn-active-color: var(--color-text-strong);
	--bs-btn-active-bg: var(--color-surface-alt);
	color: var(--color-text);
	background-color: var(--color-surface);
	border-radius: var(--radius-pill);
	padding: 0.75rem 1.75rem;
	font-weight: 500;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-light:hover {
	background-color: var(--color-surface-alt);
	color: var(--color-text-strong);
}

header {
	padding-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.highlight pre {
	padding: 1em;
}

.simple-page {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.simple-page .description {
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-lg) auto;
	line-height: 1.6;
	display: block;
}

/* =============================
 * Navigation
 * ============================= */

.brand {
	width: 12.5em;
}

.navbar {
	--bs-navbar-color: var(--superblue);
	--bs-navbar-hover-color: var(--superblue);
	--bs-navbar-active-color: var(--superblue);
	min-height: 3em;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.navbar-nav {
	align-items: center;
}

.navbar-nav .nav-item {
	display: flex;
	align-items: center;
}

.navbar-nav .nav-link {
	color: var(--superblue);
	font-size: 1.25em;
	font-family: var(--font-heading);
	margin-right: 1em;
	display: flex;
	align-items: center;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

/* Hover, site-wide: links are underlined (and darkened when they are lighter
   than the brand blue); nothing fades, zooms or slides */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
	text-decoration: underline;
}

.navbar-brand {
	font-size: 1em;
	user-select: none;
}

.navbar-brand img {
	margin-right: 0.25em;
	margin-bottom: 0.25em;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(87,125,189, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
	border-color: var(--superblue);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.1rem;
}

/* Dropdown toggles and the Contact button: no hover underline */
.navbar-nav .dropdown .nav-link:hover,
.navbar-nav .dropdown .nav-link:focus,
.navbar-nav .nav-contact-link:hover,
.navbar-nav .nav-contact-link:focus {
	text-decoration: none;
}

.dropdown-menu {
	--bs-dropdown-link-hover-bg: transparent;
	--bs-dropdown-link-active-bg: transparent;
	--bs-dropdown-link-active-color: var(--color-text-strong);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	padding: var(--space-xs);
	margin-top: var(--space-xs);
	min-width: 220px;
}

.dropdown-menu .dropdown-item {
	border-radius: var(--radius-md);
	margin: 0.25rem 0;
	padding: 0;
}

.dropdown-menu .dropdown-link {
	color: var(--color-text-strong);
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	text-decoration: none;
	padding: 0.75rem 1.25rem;
	display: block;
	border-radius: var(--radius-md);
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Menu entries flagged `bold` in config.toml */
.dropdown-menu .dropdown-link-bold {
	font-weight: bold;
}

.dropdown-menu .dropdown-item:hover {
	background-color: transparent;
}

.dropdown-menu .dropdown-header {
	padding: 0.75rem 1.25rem 0.25rem;
	margin: 0.25rem 0 0;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-text-subtle);
}

.dropdown-menu .dropdown-item-sub .dropdown-link {
	padding-left: var(--space-lg);
}

.dropdown-menu .dropdown-link:hover {
	background-color: var(--color-surface-tint);
	color: var(--superblue);
}

/* Collapsed navbar (below 992px): logo, language switcher and toggler on one
   row, then the menu as a full-width, left-aligned list; each dropdown opens
   below its toggle. The menu scrolls if it is taller than the screen (the
   navbar is sticky, so its bottom would otherwise be unreachable) */
@media (max-width: 991px) {
	.navbar-brand {
		margin-right: auto;
	}

	.lang-switcher {
		order: 1;
		margin-right: var(--space-sm);
	}

	.navbar-toggler {
		order: 2;
	}

	.navbar-collapse {
		order: 3;
	}

	.navbar-collapse.show {
		max-height: calc(100vh - 6rem);
		max-height: calc(100dvh - 6rem);
		overflow-y: auto;
	}

	.navbar-collapse .navbar-nav {
		align-items: stretch;
		padding: var(--space-xs) 0;
	}

	.navbar-collapse .nav-item {
		flex-direction: column;
		align-items: stretch;
	}

	.navbar-collapse .nav-link {
		margin-right: 0;
	}

	.navbar-collapse .dropdown-menu {
		position: static;
		transform: translate(0, 0);
		width: 100%;
		margin: var(--space-xs) 0;
		float: none;
		left: 0;
		right: 0;
		top: auto;
		bottom: auto;
		inset: auto;
		display: none;
	}

	.navbar-collapse .dropdown-menu.show {
		display: block;
	}

	.navbar-collapse .dropdown {
		position: static;
	}

}

/* Smaller logo on phones so the top row never wraps */
@media (max-width: 575px) {
	.navbar-brand .brand {
		width: 9em;
	}
}

@media (max-width: 400px) {
	.navbar-brand .brand {
		width: 8em;
	}

	.lang-switcher {
		margin-right: var(--space-xs);
	}
}

.nav-link.show .down {
	display: none;
}

.nav-link:not(.show) .up {
	display: none;
}

.arrow {
	margin-left: 0.25em;
	border: solid var(--superblue);
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 0.15em;
}

.up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

.down {
	margin-bottom: 5px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/* =============================
 * Content
 * ============================= */

.content {
	width: 100%;
	max-width: var(--content-max);
	margin-right: auto;
	margin-left: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* A .content nested in another one already sits inside the gutter */
.content .content {
	padding-left: 0;
	padding-right: 0;
}

.content img {
	max-width: 50vw;
}

/* Text links only: buttons (a.btn) keep their own colors */
.content a:not(.btn) {
	color: var(--softblue);
	text-decoration: none;
}

.content a:not(.btn):hover {
	color: var(--superblue);
	text-decoration: underline;
}

.content h1 {
	font-size: var(--font-size-h1);
	text-align: center;
}

.content h1, h2 {
	margin-bottom: 1em;
}

/* After .content h1: simple pages are left-aligned */
.simple-page h1 {
	text-align: left;
}

.boxes {
	display: flex;
	flex-wrap: wrap;
}

.box {
	background-color: var(--color-surface-hover);
	flex: 1 0 40%;
}

.box h1, .box h2, .box h3 {
	margin-top: 0;
}

.dark-box {
	color: var(--color-text-inverse-muted);
	background-color: var(--color-surface-dark);	
}

.area {
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	color: var(--color-text);
}

/* Band continuing the previous one (same background, e.g. the three solution
   blocks of the homepage): only one block gap between them, not two paddings */
.area-continued {
	padding-top: 0;
}

/* Cards: one flat look for every content card (white, thin border, same radius
   and padding). Static cards have no hover effect; only clickable ones (news)
   react, by highlighting their border */
.feature-card,
.contribution-card,
.feature-item,
.blog-card {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	padding: var(--card-padding);
}

.area .anchor {
	display: block;
	position: relative;
	top: -60px;
	visibility: hidden;
}

.area-grey {
	background-color: var(--color-surface-strong);
}

/* =============================
 * Home page
 * ============================= */

#title {
	text-align: center;
	font-size: var(--font-size-h1);
	margin-top: 0;
	margin-bottom: 0.3em;
	color: var(--superblue);
	padding: 0 var(--space-sm);
	max-width: 100%;
}

@media screen and (min-width: 1399px) {
	#contact-button {
		display: inline-block;
	}
}

@media screen and (max-width: 768px) {
	#title {
		padding: 0 var(--space-md);
		line-height: 1.2;
	}
}

@media screen and (max-width: 480px) {
	#title {
		padding: 0 var(--space-sm);
		line-height: 1.2;
	}
}

@media screen and (max-width: 1399px) {
	#contact-button {
		display: none;
	}
}

.description {
	font-size: var(--font-size-lg);
	text-align: center;
	max-width: var(--content-narrow);
	margin-left: auto;
	margin-right: auto;
}

#support-block h1, #support-block h2 {
	color: var(--superblue);
}

/* Services pages - wider and more modern layout */
#support-block .support-block {
	padding: 2.5rem 0;
}

#support-block .description {
	font-size: var(--font-size-lg);
	line-height: 1.7;
	margin-bottom: var(--space-lg);
}

#support-block h2 {
	font-size: var(--font-size-h2);
	margin-bottom: var(--space-md);
	margin-top: var(--space-sm);
}

#support-block hr {
	margin: var(--space-md) 0;
	border: none;
	border-top: 2px solid var(--superblue);
	opacity: 0.3;
	width: 100%;
}

#support-block .btn {
	margin-top: var(--space-md);
	padding: 0.75rem var(--space-lg);
	font-size: var(--font-size-body);
}

/* Anchor buttons listing the services at the top of the page */
#support-block .description .btn {
	margin-bottom: 1em;
}

/* Navigation buttons spacing */
#support-block .services-nav-buttons {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--space-lg);
	margin-bottom: var(--space-lg);
	text-align: center;
}

#support-block .services-nav-buttons a {
	text-decoration: none;
	display: inline-block;
}

#support-block .services-nav-buttons .btn {
	margin: 0;
}

/* Primary CTA button */
#support-block .service-cta {
	margin-top: var(--space-lg);
}

#support-block p {
	margin-bottom: var(--space-md);
}

@media screen and (max-width: 900px) {

	#support-block .services-nav-buttons {
		flex-direction: column;
		gap: var(--space-sm);
	}

	#support-block .services-nav-buttons .btn {
		width: 100%;
	}
}

/* =============================
 * Solutions
 * ============================= */

#solutions .btn {
  margin-bottom: 1em;
}

/* =============================
 * Developers
 * ============================= */

#install {
	text-align: center;
}

#install .install-block img {
	width: 75px;
	opacity: 0.5;
	margin-bottom: 10px;
}

#install .install-block .description {
	font-size: 14px;
	color: var(--color-text-inverse-muted);
	opacity: 0.75;
}

#install .install-block {
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
}

#install .btn {
	width: 250px;
}

#developers-resources li {
	padding-left: 10px;
}

/* =============================
 * Footer
 * ============================= */

footer {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-md);
	color: var(--color-text-inverse-muted);
}

/* Links in a light neutral grey (not the blue of body links), white on hover */
footer a {
	color: rgb(200, 204, 210);
	text-decoration: none;
}

footer a:hover {
	color: var(--color-text-inverse);
	text-decoration: underline;
}

footer .icon {
	width: 15px;
	margin-right: 10px;
}

/* Contact column, then one column per sitemap entry, evenly spaced */
.footer-boxes {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

footer #infos,
footer .menu {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

footer #infos li,
footer .menu li {
	padding: 0.2rem 0;
}

footer .social img {
	width: 20px;
}

footer .menu .title {
	color: var(--lightblue);
	font-weight: bold;
	padding-top: 0;
	margin-bottom: var(--space-xs);
}

/* Groups inside a column (e.g. GnuCOBOL / SuperBOL Studio resources) */
footer .menu li.subtitle {
	margin-top: var(--space-md);
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-inverse);
}

footer .menu .title + li.subtitle {
	margin-top: 0;
}

/* Bottom bar: copyright and legal links, smaller and spaced */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-lg);
	font-size: var(--font-size-sm);
}

/* Tablets: contact info on its own row above the three link columns */
@media (max-width: 992px) {
	.footer-boxes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	footer #infos {
		grid-column: 1 / -1;
	}
}

/* Phones: link columns in a grid of one or two */
@media (max-width: 768px) {
	.footer-boxes {
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: var(--space-md) var(--space-lg);
	}
}

/* Resources page: centered list of link buttons */
.resources-links {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.resources-links .btn {
	height: 50px;
	margin-bottom: 10px;
}

/* =============================
 * Boxes (resources/gnucobol)
 * ============================= */

.boxes {
	display: flex;
	flex-wrap: wrap;
}

.box {
	background-color: var(--color-surface-hover);
	flex: 1 0 40%;
	padding: 30px;
}

.box h1, .box h2, .box h3 {
	margin-top: 0;
}

ul.features {
	list-style: none;
	padding-left: 0;
}

ul.features li {
	margin-top: 1em;
}

#gnucobol .boxes {
	display: flex;
	flex-wrap: wrap;
}

#gnucobol .box {
	background-color: var(--color-surface-hover);
	margin-right: 30px;
	margin-bottom: 30px;
	flex: 1 0 40%;
	padding: 30px;
}

#gnucobol .box h1, #gnucobol .box h2, #gnucobol .box h3 {
	margin-top: 0;
}

#gnucobol .dark-box {
	color: var(--color-text-inverse-muted);
	background-color: var(--color-surface-dark);	
}

/* =============================
 * Blog
 * ============================= */

/* Blog Grid Layout */
.blog-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}

/* Blog Card */
.blog-card {
	padding: 0;
	overflow: hidden;
	transition: border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.blog-card:hover {
	border-color: var(--softblue);
}

.blog-card-image-link {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	overflow: hidden;
	background-color: var(--color-surface-hover);
}

.blog-card-image {
	max-width: 100%;
	height: auto;
	display: block;
}

.blog-card-content {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--space-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.blog-card-date {
	font-weight: 500;
}

.blog-card-category {
	background-color: var(--softblue);
	color: var(--color-text-inverse);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.blog-card-title {
	margin: 0 0 0.75rem 0;
	font-size: var(--font-size-h3);
	line-height: 1.3;
	font-weight: var(--font-weight-heading);
}

.blog-card-title a {
	color: var(--superblue);
	text-decoration: none;
	transition: color 0.2s ease;
}

.blog-card-title a:hover {
	color: var(--softblue);
	text-decoration: underline;
}

.blog-card-subtitle {
	margin: 0 0 var(--space-sm) 0;
	font-size: var(--font-size-body);
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.5;
}

.blog-card-summary {
	margin: 0 0 var(--space-sm) 0;
	color: var(--color-text-muted);
	line-height: 1.6;
	flex-grow: 1;
}

.blog-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.blog-tag {
	background-color: var(--color-surface-hover);
	color: var(--superblue);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-xl);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-weight: 500;
}

.blog-tag:hover {
	background-color: var(--superblue);
	color: var(--color-text-inverse);
}

.blog-card-link {
	color: var(--softblue);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
	margin-top: auto;
}

.blog-card-link:hover {
	color: var(--superblue);
}

/* Blog Pagination */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-xl) 0;
	padding: var(--space-lg) 0;
}

.pagination-btn {
	text-decoration: none;
	min-width: 150px;
	text-align: center;
}

.pagination-info {
	color: var(--color-text-muted);
	font-weight: 500;
	font-size: var(--font-size-body);
}

/* Blog Post Single */
.blog-post-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.blog-post-nav {
	margin-bottom: var(--space-lg);
}

.btn-back {
	display: inline-block;
	text-decoration: none;
}

.blog-post-header {
	margin-bottom: 2.5rem;
	padding-bottom: var(--space-lg);
	border-bottom: 2px solid var(--color-border);
}

.blog-post-category {
	display: inline-block;
	background-color: var(--softblue);
	color: var(--color-text-inverse);
	padding: 0.35rem var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: var(--space-md);
}

.blog-post-title {
	font-size: var(--font-size-h1);
	line-height: 1.2;
	margin: 0 0 var(--space-sm) 0;
	color: var(--superblue);
	font-weight: var(--font-weight-heading);
}

.blog-post-subtitle {
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0 0 var(--space-md) 0;
	font-weight: 400;
}

.blog-post-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-md);
}

.blog-post-date {
	font-weight: 500;
}

.blog-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.blog-post-cover {
	margin: 0 0 var(--space-xl) 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.blog-post-cover img {
	width: 100%;
	height: auto;
	display: block;
}

.blog-post-content {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text-strong);
}

.blog-post-content h2 {
	font-size: var(--font-size-h2);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
	color: var(--superblue);
	font-weight: var(--font-weight-heading);
}

.blog-post-content h3 {
	font-size: var(--font-size-h3);
	margin-top: 2.5rem;
	margin-bottom: var(--space-sm);
	color: var(--superblue);
	font-weight: var(--font-weight-heading);
}

.blog-post-content h4 {
	font-size: var(--font-size-h4);
	margin-top: var(--space-lg);
	margin-bottom: 0.75rem;
	color: var(--superblue);
	font-weight: var(--font-weight-heading);
}

.blog-post-content p {
	margin-bottom: var(--space-md);
}

.blog-post-content ul,
.blog-post-content ol {
	margin-bottom: var(--space-md);
	padding-left: var(--space-lg);
}

.blog-post-content li {
	margin-bottom: 0.75rem;
	line-height: 1.7;
}

.blog-post-content a:not(.btn) {
	color: var(--softblue);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.blog-post-content a:not(.btn):hover {
	color: var(--superblue);
	text-decoration: underline;
}

.blog-post-content img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin: var(--space-lg) 0;
}

.blog-post-content blockquote {
	border-left: 4px solid var(--softblue);
	padding-left: var(--space-md);
	margin: var(--space-lg) 0;
	font-style: italic;
	color: var(--color-text);
}

.blog-post-content code {
	background-color: var(--color-surface-alt);
	padding: 0.2rem 0.4rem;
	border-radius: var(--radius-sm);
	font-size: 0.9em;
	font-family: var(--font-mono);
}

.blog-post-content pre {
	background-color: var(--color-surface-alt);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: var(--space-lg) 0;
}

.blog-post-content pre code {
	background-color: transparent;
	padding: 0;
}

.blog-post-footer {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 2px solid var(--color-border);
}

/* Responsive adjustments */
@media (max-width: 768px) {

	.blog-post-subtitle {
		font-size: var(--font-size-lg);
	}

	.blog-post-content {
		font-size: var(--font-size-body);
	}

	.blog-pagination {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.pagination-btn {
		width: 100%;
	}
}

/* Legacy compatibility */
.date {
	color: gray;
}

.tag-list {
	list-style: none;
	padding-left: 0;
	display: inline;
}

.tag {
	background-color: lightgray;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
	display: inline-block;
}

/* =============================
 * Homepage Sections
 * ============================= */

/* Section titles: hero (display) > section title (h1) > sub-section (h3) > card
   title, the same on every band of the homepage */
.section-title {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-heading);
	color: var(--superblue);
	margin-bottom: var(--space-lg);
	text-align: center;
}

.section-subtitle {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-heading);
	color: var(--superblue);
	margin-bottom: var(--title-space);
	text-align: center;
}

/* GnuCOBOL Section */
.gnucobol-intro {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin-bottom: var(--space-xl);
}

.gnucobol-logo {
	flex-shrink: 0;
}

.gnucobol-logo img {
	width: 200px;
	height: auto;
}

/* Intro text and distinction badge aligned left, next to the logo */
.gnucobol-content {
	flex: 1;
	text-align: left;
}

.gnucobol-content .description {
	text-align: left;
	margin-left: 0;
}

@media (max-width: 768px) {
	.gnucobol-intro {
		flex-direction: column;
		text-align: center;
	}
}

/* Advantages Section */
.advantages-section {
	margin-top: var(--block-space);
}

.advantages-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg) var(--space-xl);
	max-width: var(--content-narrow);
	margin: var(--title-space) auto 0;
}

@media screen and (max-width: 992px) {
	.advantages-grid {
		grid-template-columns: 1fr;
	}
}

/* No frame: a checklist like the CTA benefits (partials/cta.html), each point
   marked by a check in a light blue disc (also the homepage expertises) */
.advantage-card,
.expertise-card {
	position: relative;
	text-align: left;
	padding-left: 2.75rem;
}

.advantage-card::before,
.expertise-card::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
}

/* Check in a light blue disc, shared by every checklist (also .cta-checkmark) */
.advantage-card::before,
.expertise-card::before,
.cta-checkmark {
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--superblue) 12%, transparent);
	color: var(--superblue);
	font-weight: bold;
	font-size: var(--font-size-sm);
}

.advantage-icon {
	margin-bottom: var(--space-md);
}

.advantage-icon img {
	width: 80px;
	height: auto;
	opacity: 0.8;
}

.advantage-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-heading);
	/* Dark, not blue: an item label, not a (sub-)section title */
	color: var(--color-text-strong);
	margin-bottom: var(--space-xs);
}

.advantage-description {
	font-size: var(--font-size-body);
	color: var(--color-text);
	line-height: 1.6;
	margin-bottom: 0;
}

/* Goals Section */
.goals-section {
	margin-top: var(--block-space);
}

.goals-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	max-width: var(--content-narrow);
	margin: var(--title-space) auto 0;
}

@media (max-width: 768px) {
	.goals-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

/* Two centred columns, no frame: icon, one-line title, then the text */
.goal-card {
	padding: 0 var(--space-lg);
	text-align: center;
}

@media (max-width: 768px) {
	.goal-card {
		padding: 0;
	}
}

.goal-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

/* Icon PNG painted in the title colour through a mask */
.goal-icon {
	display: block;
	width: 56px;
	height: 56px;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.goal-title {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	color: var(--color-text-strong);
	line-height: 1.25;
	margin: 0;
}

/* A discreet nod to the Matrix pills: keeping COBOL is the blue pill, leaving
   it the red one (both dark enough to read on the grey band) */
.goal-card-stay .goal-title,
.goal-card-stay .goal-icon {
	color: var(--softblue);
}

.goal-card-exit .goal-title,
.goal-card-exit .goal-icon {
	color: color-mix(in srgb, var(--color-danger) 80%, black);
}

.goal-description {
	font-size: var(--font-size-body);
	color: var(--color-text);
	line-height: 1.7;
	max-width: 30em;
	margin: 0 auto;
}

/* Distinction: credential badge under the GnuCOBOL intro
   (partials/distinction.html), in the GnuCOBOL orange of the ecosystem diagram */
.distinction-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	padding: var(--space-xs) var(--space-md);
	background: color-mix(in srgb, var(--color-highlight) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-highlight) 55%, transparent);
	border-radius: var(--radius-pill);
	color: var(--color-text-strong);
	font-weight: 600;
	text-align: left;
}

.distinction-icon {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	color: var(--color-highlight);
}

/* Wrapping text: a rounded box rather than a pill */
@media (max-width: 768px) {
	.distinction-badge {
		border-radius: var(--radius-lg);
	}
}

/* Open Source Section */
.opensource-section {
	margin-top: var(--block-space);
}

.opensource-description {
	max-width: 800px;
	margin: 0 auto;
	font-size: var(--font-size-lg);
}

/* SuperBOL Section */

/* Logo used as the section title: as tall as two lines of a title */
.section-title-logo img {
	height: calc(var(--font-size-h1) * 2);
	width: auto;
	max-width: 100%;
}

.superbol-description {
	max-width: var(--content-narrow);
	margin: var(--space-lg) auto;
}

.superbol-image-container {
	margin-top: var(--space-xl);
}

/* Ecosystem diagram (layouts/partials/ecosystem.html): one colour per layer,
   orange for the GnuCOBOL core and its features, blue for the SuperBOL layer */
.ecosystem {
	--eco-gnucobol: var(--color-highlight);
	--eco-superbol: var(--superblue);
	display: block;
	width: 100%;
	max-width: 900px;
	height: auto;
	margin: 0 auto;
	font-family: var(--font-body);
	overflow: visible;
}

.ecosystem text {
	text-anchor: middle;
	dominant-baseline: central;
}

/* SuperBOL layer */
.ecosystem-ring-0 {
	fill: color-mix(in srgb, var(--eco-superbol) 5%, white);
	stroke: color-mix(in srgb, var(--eco-superbol) 30%, white);
	stroke-width: 1.5;
}

.ecosystem-product circle { fill: var(--eco-superbol); }

.ecosystem-label {
	font-weight: 600;
	font-size: 16px;
	fill: var(--color-text-inverse);
}

.ecosystem-badge rect { fill: var(--eco-superbol); }

.ecosystem-badge text {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.02em;
	fill: var(--color-text-inverse);
}

/* GnuCOBOL core and its features in orbit */
.ecosystem-ring-1 {
	fill: color-mix(in srgb, var(--eco-gnucobol) 12%, white);
	stroke: color-mix(in srgb, var(--eco-gnucobol) 55%, white);
	stroke-width: 1.5;
	stroke-dasharray: 4 6;
}

.ecosystem-core circle { fill: var(--eco-gnucobol); }

.ecosystem-core text {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	fill: var(--color-text-strong);
}

.ecosystem-component circle {
	fill: var(--color-surface);
	stroke: var(--eco-gnucobol);
	stroke-width: 2;
}

.ecosystem-component .ecosystem-label {
	font-size: 15px;
	fill: var(--color-text-strong);
}

/* Neutral details: technologies and platform */
.ecosystem-connector {
	stroke: var(--color-border-strong);
	stroke-width: 1.5;
}

.ecosystem-chip rect {
	fill: var(--color-surface);
	stroke: var(--color-border-strong);
}

.ecosystem-chip text {
	font-size: 15px;
	fill: var(--color-text);
}

.ecosystem-platform rect { fill: var(--color-surface-strong); }

.ecosystem-platform text {
	font-weight: 600;
	fill: var(--color-text-muted);
}

/* On phones the diagram is ~1/3 scale: enlarge text, and chips as a whole
   since their width is fixed in the markup */
@media (max-width: 575px) {
	.ecosystem-core text { font-size: 26px; }
	.ecosystem-label { font-size: 20px; }
	.ecosystem-component .ecosystem-label { font-size: 17px; }
	.ecosystem-chip,
	.ecosystem-badge {
		transform-box: fill-box;
		scale: 1.25;
	}
	.ecosystem-chip-start { transform-origin: left center; }
	.ecosystem-chip-end { transform-origin: right center; }
	.ecosystem-chip-middle,
	.ecosystem-badge { transform-origin: center; }
}

/* Solution Blocks */
.solution-header {
	margin-bottom: var(--space-xl);
}

/* Homepage: GnuCOBOL and SuperBOL Studio are two parts of the SuperBOL
   section, separated by space only (band padding + this = --block-space), with
   their logo at sub-section size */
.solution-card {
	padding-top: calc(var(--block-space) - var(--section-space));
}

.solution-card .solution-header {
	margin-bottom: var(--space-lg);
}

.solution-card .solution-brand,
.solution-studio-block .solution-card .solution-brand {
	height: 6rem;
	max-height: none;
	max-width: 100%;
}

.solution-card .solution-buttons {
	margin: var(--space-lg) 0;
}

.solution-card .studio-screenshot {
	margin-top: var(--space-xl);
}

.solution-card .studio-learn-more {
	margin-top: var(--space-lg);
}

.solution-brand {
	height: 200px;
	width: auto;
	max-width: 100%;
	margin-bottom: var(--space-lg);
	object-fit: contain;
}

.solution-studio-block .solution-brand {
	height: 150px;
}

.solution-studio-page .solution-brand {
	height: 250px;
}

@media (max-width: 768px) {
	.solution-brand {
		height: auto;
		max-width: 90%;
		max-height: 120px;
	}

	.solution-studio-block .solution-brand {
		height: auto;
		max-width: 90%;
		max-height: 100px;
	}

	.solution-studio-page .solution-brand {
		height: auto;
		max-width: 90%;
		max-height: 150px;
	}
}

.solution-intro {
	font-size: var(--font-size-lg);
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.7;
}

/* GnuCOBOL Features Wrapper */
.gnucobol-features-wrapper {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--space-sm);
}

/* GnuCOBOL Features Grid - 3 blocks in one row */
.gnucobol-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--card-gap);
	margin: var(--space-xl) 0;
	width: 100%;
}

.gnucobol-features-grid .feature-card:nth-child(n+5) {
	display: none;
}

@media screen and (max-width: 768px) {
	.gnucobol-features-grid {
		grid-template-columns: 1fr;
	}
}

/* General Features Grid - responsive auto-fit */

.feature-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 200px;
}

.feature-title {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	color: var(--superblue);
	margin-bottom: var(--space-sm);
}

.feature-description {
	font-size: var(--font-size-body);
	color: var(--color-text);
	line-height: 1.6;
}

.solution-cta {
	margin: var(--space-xl) 0;
}

/* Declaration Section */
.declaration-section {
	margin: var(--block-space) 0;
	padding: 2.5rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
}

.declaration-text {
	font-size: 1.375rem;
	font-weight: bold;
	color: var(--superblue);
	margin-bottom: var(--space-md);
}

.declaration-details {
	list-style: none;
	padding: 0;
	text-align: right;
	opacity: 0.7;
	font-size: var(--font-size-sm);
}

.declaration-details li {
	margin: 0.25rem 0;
}

/* Contributions Grid */
.contributions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--card-gap);
	margin: var(--space-xl) 0;
}

.ecosystem-contrib .contribution-title {
	color: var(--color-highlight);
}

.our-contrib .contribution-title {
	color: var(--softblue);
}

.contribution-title {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-heading);
	margin-bottom: var(--space-md);
	text-align: center;
}

.contribution-list {
	list-style: none;
	padding: 0;
}

.contribution-list li {
	padding: 0.75rem 0;
	padding-left: var(--space-md);
	position: relative;
	font-size: var(--font-size-body);
	line-height: 1.6;
}

.contribution-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--superblue);
	font-weight: bold;
}

/* Support Section */
.support-section {
	margin: var(--block-space) 0;
	padding: var(--space-xl);
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	text-align: center;
}

.support-title {
	color: var(--superblue);
	margin-bottom: var(--space-md);
	text-align: center;
}

.support-description {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-lg);
	text-align: center;
}

.support-cta {
	margin-top: var(--space-lg);
}

/* Studio Features */
.studio-features {
	margin: var(--space-xl) 0;
}

.studio-feature {
	margin: var(--space-md) 0;
	font-size: var(--font-size-lg);
	line-height: 1.7;
}

.solution-buttons {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: var(--space-xl) 0;
}

.studio-screenshot {
	margin-top: var(--space-2xl);
}

.studio-screenshot img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.studio-learn-more {
	margin-top: var(--space-xl);
}

/* Detailed Features Section */
.detailed-features-section {
	margin-top: var(--block-space);
	padding-top: var(--block-space);
	border-top: 2px solid var(--color-border);
}

.features-subtitle {
	font-size: var(--font-size-h2);
	color: var(--superblue);
	margin-bottom: var(--space-md);
	text-align: center;
}

.features-intro {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text);
	text-align: center;
	max-width: 900px;
	margin: 0 auto var(--space-xl) auto;
}

.features-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	margin-top: var(--space-lg);
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
}

.feature-image {
	width: 100%;
	max-width: 1200px;
}

.feature-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.feature-content {
	width: 100%;
	text-align: center;
	max-width: 900px;
}

.feature-title {
	font-size: var(--font-size-h3);
	color: var(--superblue);
	margin-bottom: var(--space-sm);
}

.feature-description {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text);
}

@media (max-width: 768px) {
	.features-list {
		gap: 2.5rem;
	}

	.feature-description {
		font-size: var(--font-size-body);
	}
}

/* Studio Support Section */
.studio-support-section {
	margin-top: var(--block-space);
	padding: var(--space-2xl) var(--space-lg);
	background: var(--color-surface-alt);
	border-radius: var(--radius-xl);
	text-align: center;
}

.studio-support-section .support-title {
	font-size: var(--font-size-h2);
	color: var(--superblue);
	margin-bottom: var(--space-md);
}

.studio-support-section .support-description {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text);
	max-width: var(--content-narrow);
	margin: 0 auto 2.5rem auto;
}

.studio-support-section .support-cta {
	margin-top: var(--space-lg);
}

@media (max-width: 768px) {
	.studio-support-section {
		padding: var(--space-xl) var(--space-md);
	}

	.studio-support-section .support-description {
		font-size: var(--font-size-lg);
	}
}

/* Testimonials Section */
.testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--card-gap);
	margin-top: var(--title-space);
}

/* No box: the logo on the left, the quote and its source beside it (stacked
   on mobile) */
.testimonial-card {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	text-align: left;
}

.testimonial-logo {
	flex-shrink: 0;
}

.testimonial-logo img {
	width: 200px;
	height: auto;
}

.testimonial-quote {
	font-size: 1.25rem;
	font-style: italic;
	color: var(--color-text-strong);
	line-height: 1.7;
	margin: 0 0 var(--space-md);
}

.testimonial-source {
	font-size: var(--font-size-body);
	color: var(--color-text-muted);
	margin: 0;
	font-weight: 500;
}

@media (max-width: 768px) {
	.testimonial-card {
		flex-direction: column;
		gap: var(--space-md);
		text-align: center;
	}

	.testimonial-logo img {
		width: 150px;
	}

	.testimonial-quote {
		font-size: var(--font-size-lg);
	}
}

/* About Us Section */
.aboutus-context {
	max-width: var(--content-narrow);
	margin: 0 auto;
}

.context-title {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-heading);
	/* Dark, not blue: the lead of the paragraph, not a sub-section title */
	color: var(--color-text-strong);
	margin-bottom: var(--space-md);
}

.context-content {
	font-size: var(--font-size-lg);
	line-height: 1.7;
	color: var(--color-text);
}

/* Expertise Section */
.expertise-section {
	margin-top: var(--block-space);
}

.expertise-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg) var(--space-xl);
	margin-top: var(--title-space);
}

@media screen and (max-width: 992px) {
	.expertise-grid {
		grid-template-columns: 1fr;
	}
}

.expertise-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-heading);
	margin-bottom: var(--space-xs);
	/* Dark, not blue: an item label, not a (sub-)section title */
	color: var(--color-text-strong);
}

.expertise-subtitle {
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: 0;
}

/* Success Stories Section */
.success-stories-section {
	margin-top: var(--block-space);
	text-align: center;
}

.success-stories-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	margin-top: var(--title-space);
	text-align: left;
}

.story-description {
	font-size: var(--font-size-body);
	line-height: 1.7;
	color: var(--color-text);
}

/* Stories stacked, each with its logo on the left in a column of fixed width
   (as the testimonial), so every text starts on the same vertical line;
   logo above the text on mobile */
.success-story-card {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
}

.story-logo {
	flex: 0 0 200px;
	display: flex;
	justify-content: center;
}

.story-logo img {
	max-width: 100%;
	max-height: 80px;
	width: auto;
	object-fit: contain;
}

.story-description {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.success-story-card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.story-logo {
		flex-basis: auto;
	}
}

/* Partners Section */
.partners-section {
	margin-top: var(--block-space);
	text-align: center;
}

/* Logo wall: equal cells (3 per row, 2 on mobile), each logo fitted in the
   same box so wide and compact logos get a similar visual weight */
.partners-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	gap: var(--space-xl) var(--space-lg);
	max-width: var(--content-narrow);
	margin: var(--title-space) auto 0;
}

/* Logos sit directly on the band: multiply blends away the opaque white
   background some of them have (e.g. Finance Innovation). Two classes to win
   over .content img */
.partners-grid .partner-logo {
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 64px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

	.goals-grid,
	.contributions-grid,
	.success-stories-grid {
		grid-template-columns: 1fr;
	}

	.solution-buttons {
		flex-direction: column;
	}

	.partners-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}

	.partners-grid .partner-logo {
		max-width: 140px;
		max-height: 52px;
	}

	/* A logo alone on the last row is centred */
	.partners-grid .partner-logo:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* =============================
 * Call to Action Section
 * ============================= */

.cta-section {
	background: var(--superblue);
	padding: var(--section-space) 0;
	margin-top: var(--section-space);
}

.cta-container {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.cta-content {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
}

.cta-title {
	color: var(--superblue);
	font-size: var(--font-size-h1);
	margin-bottom: var(--space-sm);
	text-align: center;
	font-weight: var(--font-weight-heading);
}

.cta-subtitle {
	color: var(--color-text);
	font-size: var(--font-size-lg);
	line-height: 1.7;
	text-align: center;
	margin-bottom: 2.5rem;
	max-width: var(--content-narrow);
	margin-left: auto;
	margin-right: auto;
}

.cta-benefits {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg) var(--space-xl);
	margin-bottom: var(--space-xl);
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.cta-benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: 0;
	background: transparent;
	border-radius: 0;
	border-left: none;
	transition: none;
}

.cta-benefit:hover {
	transform: none;
}

.cta-checkmark {
	flex-shrink: 0;
}

.cta-benefit-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.cta-benefit-content strong {
	/* Dark, not blue: an item label, not a title (as .advantage-title) */
	color: var(--color-text-strong);
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.cta-benefit-content span {
	color: var(--color-text);
	font-size: var(--font-size-body);
	line-height: 1.6;
}

.cta-closing {
	text-align: center;
	padding-top: var(--space-lg);
	border-top: 2px solid var(--color-border);
}

.cta-closing-title {
	color: var(--superblue);
	font-size: var(--font-size-h2);
	margin-bottom: var(--space-sm);
	font-weight: var(--font-weight-heading);
}

.cta-closing-description {
	color: var(--color-text);
	font-size: var(--font-size-lg);
	line-height: 1.7;
	margin-bottom: 0.75rem;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.cta-closing-text {
	color: var(--color-text-muted);
	font-size: var(--font-size-body);
	line-height: 1.6;
	margin-bottom: var(--space-lg);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.cta-button {
	display: inline-block;
	background: var(--superblue);
	color: var(--color-text-inverse);
	padding: var(--space-sm) 2.5rem;
	border-radius: var(--radius-pill);
	font-size: var(--font-size-lg);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cta-button:hover {
	background: var(--softblue);
	color: var(--color-text-inverse);
	text-decoration: none;
}

/* Responsive design */
@media screen and (max-width: 900px) {
	.cta-content {
		padding: var(--space-lg) var(--space-md);
	}

	.cta-subtitle {
		font-size: var(--font-size-body);
	}

	.cta-benefits {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.cta-closing-description,
	.cta-closing-text {
		font-size: var(--font-size-sm);
	}

	.cta-button {
		padding: 0.875rem var(--space-lg);
		font-size: var(--font-size-body);
	}
}

/* =============================
 * Nav WIP badge
 * ============================= */

.nav-wip-badge {
	display: inline-block;
	background-color: var(--color-surface-tint);
	color: var(--color-text-subtle);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 0.15em 0.5em;
	border-radius: var(--radius-sm);
	vertical-align: middle;
	margin-left: 0.4em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* =============================
 * TramaBOL page
 * ============================= */

.tramabol-container {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Section 1: Hero */
.tramabol-hero-section {
	padding: var(--section-space) 0;
}

.tramabol-hero {
	display: flex;
	align-items: center;
	gap: 3.5rem;
}

.tramabol-hero-illustration {
	flex: 0 0 42%;
}

.tramabol-hero-illustration img {
	width: 100%;
	height: auto;
}

.tramabol-hero-text {
	flex: 1;
}

.tramabol-title {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-heading);
	color: var(--superblue);
	line-height: 1.2;
	margin-bottom: 1.25rem;
}

.tramabol-description {
	color: var(--color-text-strong);
	font-size: var(--font-size-body);
	line-height: 1.65;
	margin-bottom: var(--space-sm);
}

/* Section 2: NLnet */
.tramabol-nlnet-section {
	background-color: var(--color-surface-tint);
	padding: var(--section-space) 0;
}

.tramabol-nlnet {
	display: flex;
	align-items: center;
	gap: 3.5rem;
}

.tramabol-nlnet-text {
	flex: 0 0 44%;
}

.tramabol-nlnet-title {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-heading);
	color: var(--superblue);
	margin-bottom: 1.25rem;
}

.tramabol-nlnet-illustration {
	flex: 1;
}

.tramabol-nlnet-illustration img {
	width: 100%;
	height: auto;
}

.tramabol-nlnet-text p {
	color: var(--color-text-strong);
	font-size: var(--font-size-body);
	line-height: 1.65;
	margin-bottom: var(--space-sm);
}

.tramabol-nlnet-text a {
	color: var(--color-link);
	text-decoration: none;
	font-weight: 500;
}

.tramabol-nlnet-text a:hover {
	text-decoration: underline;
}

.tramabol-nlnet-text a[href^="http"]::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url('/assets/icons/extlink.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-left: 0.15em;
}

/* Section 3: Under active development */
.tramabol-wip-section {
	padding: var(--section-space) 0;
}

.tramabol-wip-content {
	text-align: center;
}

.tramabol-wip-line1 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--superblue);
	margin-bottom: var(--space-xs);
}

.tramabol-wip-badge {
	display: inline-block;
	background-color: var(--color-accent-soft);
	color: var(--superblue);
	font-size: 2.25rem;
	font-weight: 700;
	padding: 0.1em 0.6em;
	border-radius: var(--radius-md);
	margin-bottom: 2.5rem;
}

.tramabol-wip-illustration {
	max-width: 600px;
	margin: 0 auto;
}

.tramabol-wip-illustration img {
	width: 100%;
	height: auto;
}

/* TramaBOL responsive */
@media screen and (max-width: 900px) {
	.tramabol-hero,
	.tramabol-nlnet {
		flex-direction: column;
		gap: var(--space-lg);
	}

	.tramabol-hero-illustration,
	.tramabol-nlnet-text,
	.tramabol-nlnet-illustration {
		flex: none;
		width: 100%;
	}

	.tramabol-nlnet-title,
	.tramabol-wip-line1,
	.tramabol-wip-badge {
		font-size: 1.6rem;
	}
}

/* =============================
 * External link icon (partials/external-icon.html)
 * ============================= */

.external-icon {
	display: inline;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.35em;
	opacity: 0.8;
	vertical-align: baseline;
}

/* =============================
 * Homepage hero
 * ============================= */

.hero {
	padding: var(--section-space) var(--gutter);
}

.hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: var(--space-xl);
	max-width: var(--content-max);
	margin: 0 auto;
}

.hero-title {
	font-size: var(--font-size-display);
	line-height: 1.15;
	color: var(--superblue);
	margin-bottom: var(--space-md);
}

.hero-subtitle {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text);
	max-width: 36em;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.hero-visual {
	text-align: center;
}

.hero-visual img {
	display: block;
	width: 100%;
	max-width: 560px;
	margin: var(--space-xs) auto;
}

/* COBOL lines around the visual (animation in animations.css): the font size
   follows the column width so the longest line always fits */
.hero-visual .typewriter {
	max-width: 100%;
	overflow: hidden;
}

.hero-visual .typewriter p {
	font-size: min(0.875rem, 1.3vw);
}

/* Stacked and centered on tablets and phones */
@media (max-width: 900px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		text-align: center;
	}

	.hero-subtitle {
		margin: 0 auto;
	}

	.hero-ctas {
		justify-content: center;
	}

	.hero-visual img {
		max-width: 420px;
	}

	.hero-visual .typewriter p {
		font-size: min(0.875rem, 2.6vw);
	}
}

/* Secondary button: outlined version of .btn */
.btn.btn-secondary-outline {
	--bs-btn-hover-bg: var(--superblue);
	--bs-btn-active-bg: var(--superblue);
	--bs-btn-active-border-color: var(--superblue);
	background-color: transparent;
	color: var(--superblue);
	border: 2px solid var(--superblue);
}

.btn.btn-secondary-outline:hover {
	background-color: var(--superblue);
	color: var(--color-text-inverse);
}

@media (max-width: 480px) {
	.hero-ctas .btn {
		width: 100%;
	}
}

/* Language switcher (FR / EN) */
.lang-switcher {
	flex-direction: row;
	align-items: center;
	font-weight: 700;
	font-size: var(--font-size-sm);
	letter-spacing: 0.05em;
}

.lang-switcher .nav-item {
	display: flex;
	align-items: center;
}

.lang-switcher .lang-separator {
	margin: 0 0.4rem;
	color: var(--color-text-subtle);
}

.lang-switcher .lang-current {
	color: var(--superblue);
}

.lang-switcher .lang-link {
	color: var(--color-text-muted);
	text-decoration: none;
}

.lang-switcher .lang-link:hover,
.lang-switcher .lang-link:focus {
	color: var(--superblue);
	text-decoration: underline;
}

/* =============================
 * Email widget (partials/mailbanner.html)
 * ============================= */

#email-widget {
	width: 450px;
	z-index: 1050;
	background-color: var(--superblue);
}

#open-widget {
	width: 50px;
	height: 50px;
	z-index: 1050;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}