/*
 * LfC Main Styles
 * Global layout, utilities, and component overrides for GeneratePress.
 */

/* --- Smooth scroll + sticky-header anchor offset ------------------------ */

html {
	scroll-behavior: smooth;
}

#why-lfc {
	scroll-margin-top: 80px;
}

/* --- GeneratePress sidebar removal (force full-width layout) ------------ */

.site-main,
.content-area,
#primary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

.widget-area,
#secondary,
.sidebar-container {
	display: none !important;
}

html,
body {
	overflow-x: hidden;
}

.site {
	max-width: 100%;
}

/* --- Reset / base --- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* --- Skip link (accessibility) --- */

.lfc-skip-link {
	position: absolute;
	top: -100%;
	left: var(--lfc-space-4);
	z-index: 9999;
	padding: var(--lfc-space-2) var(--lfc-space-4);
	background: var(--lfc-navy);
	color: #ffffff;
	font-family: var(--lfc-font-body);
	font-weight: 500;
	font-size: var(--lfc-text-sm);
	border-radius: var(--lfc-radius-md);
	text-decoration: none;
	transition: top 0.1s ease;
}

.lfc-skip-link:focus {
	top: var(--lfc-space-4);
}

/* --- Container --- */

.lfc-container {
	width: 100%;
	max-width: var(--lfc-max-width);
	margin-inline: auto;
	padding-inline: var(--lfc-container-pad);
}

.lfc-container--narrow {
	max-width: var(--lfc-max-width-narrow);
}

/* --- CTA buttons --- */

.lfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lfc-space-2);
	padding: 0.75em 1.5em;
	font-family: var(--lfc-font-body);
	font-size: var(--lfc-text-base);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--lfc-radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--lfc-transition), color var(--lfc-transition), border-color var(--lfc-transition);
}

.lfc-btn--primary {
	background-color: var(--lfc-cta-bg);
	color: #ffffff;
}

.lfc-btn--primary:hover,
.lfc-btn--primary:focus {
	background-color: var(--lfc-cta-bg-hover);
	color: #ffffff;
}

.lfc-btn--secondary {
	background-color: transparent;
	color: var(--lfc-coral);
	border-color: var(--lfc-coral);
}

.lfc-btn--secondary:hover,
.lfc-btn--secondary:focus {
	background-color: var(--lfc-coral);
	color: #ffffff;
}

.lfc-btn--ghost {
	background-color: transparent;
	color: #ffffff;
	border-color: #ffffff;
}

.lfc-btn--ghost:hover,
.lfc-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* --- GeneratePress overrides --- */

.site-header {
	border-bottom: 1px solid rgba(44, 53, 64, 0.08);
}

.main-navigation .main-nav > ul > li > a {
	font-family: var(--lfc-font-body);
	font-weight: 500;
	color: var(--lfc-navy);
	transition: color var(--lfc-transition);
}

.main-navigation .main-nav > ul > li > a:hover {
	color: var(--lfc-coral);
}

/* GeneratePress parent footer wrapper — we replaced it with .lfc-footer,
   so hide the empty GP wrapper to prevent a stray white strip. */
.site-footer {
	display: none !important;
}

/* --- RTL support --- */

[dir="rtl"] .lfc-container {
	text-align: right;
}

/* --- WordPress block editor alignment utilities --- */

.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.alignwide {
	max-width: calc( var(--lfc-max-width) + var(--lfc-space-16) );
	margin-inline: auto;
}

/* --- Footer --- */

.lfc-footer {
	background-color: var(--lfc-navy);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--lfc-text-sm);
}

.lfc-footer__main {
	padding-block: var(--lfc-space-12) var(--lfc-space-8);
}

.lfc-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lfc-space-8);
}

@media ( min-width: 640px ) {
	.lfc-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.lfc-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media ( min-width: 1024px ) {
	.lfc-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
	.lfc-footer__col--brand {
		grid-column: auto;
	}
}

.lfc-footer__wordmark {
	display: block;
	font-family: var(--lfc-font-heading);
	font-weight: 700;
	font-size: var(--lfc-text-xl);
	color: #ffffff;
	text-decoration: none;
	margin-bottom: var(--lfc-space-4);
}

.lfc-footer__logo {
	display: inline-block;
	margin-bottom: var(--lfc-space-4);
}

.lfc-footer__logo img {
	max-height: 48px;
	width: auto;
}

.lfc-footer__about {
	line-height: 1.7;
	margin-bottom: var(--lfc-space-4);
}

.lfc-footer__social {
	display: flex;
	gap: var(--lfc-space-4);
	flex-wrap: wrap;
}

.lfc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--lfc-radius-full);
	color: rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color var(--lfc-transition), color var(--lfc-transition);
	text-decoration: none;
}

.lfc-footer__social a:hover,
.lfc-footer__social a:focus {
	background-color: var(--lfc-teal);
	color: #ffffff;
}

.lfc-footer__heading {
	font-family: var(--lfc-font-heading);
	font-size: var(--lfc-text-base);
	font-weight: 700;
	color: #ffffff;
	margin-bottom: var(--lfc-space-4);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lfc-footer__nav-list,
.lfc-footer__contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lfc-footer__nav-list li,
.lfc-footer__contact-list li {
	margin-bottom: var(--lfc-space-2);
}

.lfc-footer__nav-list a,
.lfc-footer__contact-list a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	transition: color var(--lfc-transition);
}

.lfc-footer__nav-list a:hover,
.lfc-footer__nav-list a:focus,
.lfc-footer__contact-list a:hover,
.lfc-footer__contact-list a:focus {
	color: var(--lfc-teal-mint);
}

/* "Contact us →" accent link in footer — uses lighter coral for 4.5:1 on navy */
.lfc-footer__contact-cta a {
	color: #ff8575 !important;
	font-weight: 600;
}

.lfc-footer__contact-cta a:hover,
.lfc-footer__contact-cta a:focus {
	color: #ffaa99 !important;
}

.lfc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--lfc-space-4);
}

.lfc-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lfc-space-4);
	align-items: center;
	justify-content: space-between;
}

.lfc-footer__copyright,
.lfc-footer__charity {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--lfc-text-xs);
}

/* --- Site logo (header) ----------------------------------------------- */

.site-logo .lfc-logo__img,
.lfc-site-logo .lfc-logo__img {
	display: block;
	width: auto;
	height: 48px;
	max-width: 240px;
	aspect-ratio: 491.4/138.52;
}

.site-logo a,
.lfc-logo {
	display: inline-block;
	line-height: 0;
}

/* Mobile: slightly smaller so it fits the compact header bar. */
@media (max-width: 768px) {
	.site-logo .lfc-logo__img,
	.lfc-site-logo .lfc-logo__img {
		height: 36px;
		aspect-ratio: 491.4/138.52;
	}
}

/* Footer logo sits on the dark navy background — uses the white variant. */
.lfc-footer__logo img {
	display: block;
	width: auto;
	height: 48px;
	max-width: 180px;
}

/* --- Utility --- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal;
}

/* ===========================================================================
 * LfC v2 Redesign — layout, header, nav, sticky behaviour, section rhythm,
 * GeneratePress container overrides. Preserves all existing classes above.
 * =========================================================================== */

/* --- GeneratePress full-width layout fix --------------------------------
 * GP wraps content in .site > .site-content > .grid-container.
 * Let the outermost wrappers be truly full-width; centring happens inside
 * each block's own inner element, not on the GP container.
 * ------------------------------------------------------------------------- */

:root {
	--container-width: 1200px;
}

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

.site {
	max-width: 100% !important;
	overflow-x: hidden;
}

/* GP content wrappers — go full-width; blocks handle their own centering */
.site-content,
.content-area {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

.entry-content {
	max-width: 100% !important;
	padding: 0 !important;
}

/* GP grid-container — full-width; no padding that would indent blocks */
.grid-container {
	max-width: 100% !important;
	padding: 0 !important;
	width: 100%;
}

/* GP article wrapper MUST be full-bleed so hero/stat-strip/cta-banner
   inside entry-content can stretch edge-to-edge. Centring happens inside
   each block (or on .entry-header via a dedicated rule below). */
.inside-article {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* GP page title ("About", "Apply", etc.) stays constrained */
.entry-header {
	max-width: var(--lfc-container-max);
	margin-inline: auto;
	padding-inline: var(--lfc-container-padding);
	padding-block: var(--lfc-space-6);
}

/* Legacy helpers used by some internal templates */
.inside-page-hero,
.page-hero-inner {
	max-width: var(--lfc-container-max);
	margin-inline: auto;
	padding-inline: var(--lfc-container-padding);
}

/* Full-bleed blocks: stretch edge-to-edge, no positioning tricks */
.wp-block-lfc-hero,
.wp-block-lfc-stat-strip,
.wp-block-lfc-cta-banner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* --- Sticky site header ------------------------------------------------- */

.site-header {
	width: 100%;
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: box-shadow var(--lfc-transition);
}

.site-header.is-scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.site-header .inside-header {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 72px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Logo */
.site-header .site-branding,
.site-header .site-logo,
.site-header .custom-logo-link {
	flex-shrink: 0;
}

.site-header .custom-logo {
	height: 44px !important;
	width: auto !important;
}

/* --- Primary navigation ------------------------------------------------- */

.site-header .main-navigation {
	margin-left: auto !important;
	background-color: transparent;
	min-height: 0;
}

.site-header .main-navigation .inside-navigation {
	padding: 0;
	max-width: none;
}

/* Horizontal menu — desktop / tablet only. Mobile gets its own vertical
   drawer below (see the `max-width: 767px` block further down). Without
   the min-width scope these `!important` flex rules would win over the
   mobile `display: none`, causing the menu items to leak into the page. */
@media ( min-width: 768px ) {
	.site-header .main-navigation .menu,
	.site-header .main-navigation ul.menu,
	.site-header .main-navigation .main-nav > ul {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		gap: 2px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		background: transparent;
	}
}

.site-header .main-navigation ul li {
	list-style: none;
}

.site-header .main-navigation ul li a {
	font-family: var(--lfc-font-heading) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--lfc-navy) !important;
	text-decoration: none !important;
	padding: 8px 14px !important;
	white-space: nowrap !important;
	display: block !important;
	border-radius: 6px !important;
	transition: color 200ms ease, background 200ms ease !important;
}

.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li a:focus-visible,
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current_page_item > a {
	color: var(--lfc-coral) !important;
	background: rgba(247, 98, 80, 0.06) !important;
}

/* --- Mobile nav toggle (GP markup: .menu-toggle) ------------------------ */

.menu-toggle,
.main-navigation .menu-toggle {
	display: none;
	background: none;
	border: 0;
	color: var(--lfc-navy);
	padding: var(--lfc-space-2);
	cursor: pointer;
	font-family: var(--lfc-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	align-items: center;
	gap: var(--lfc-space-2);
}

@media ( max-width: 767px ) {
	/* Mobile header: [logo] [hamburger].
	   The GP-generated #site-navigation contains the functional .menu-toggle.
	   We hide .mobile-menu-control-wrapper (duplicate) and use the nav button. */
	.site-header .inside-header {
		flex-wrap: nowrap !important;
	}

	/* Hide duplicate hamburger wrapper */
	.site-header .main-navigation.mobile-menu-control-wrapper,
	.site-header #mobile-menu-control-wrapper {
		display: none !important;
	}

	/* Nav: auto width (shrinks to the 44px button), pushed to right */
	.site-header #site-navigation {
		flex: 0 0 auto !important;
		width: auto !important;
		margin-left: auto !important;
		overflow: visible !important;
	}

	/* CRITICAL: remove position:relative from .inside-navigation so the
	   absolutely-positioned .main-nav drawer uses .site-header as its
	   containing block — giving it correct full-viewport width. */
	.site-header #site-navigation .inside-navigation {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		padding: 0 !important;
		position: static !important;
	}

	/* Hamburger button: 44px, no flex-grow */
	.site-header .menu-toggle,
	.site-header #site-navigation .menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: transparent !important;
		border: 0 !important;
		padding: 8px !important;
		color: var(--lfc-navy) !important;
		cursor: pointer !important;
		width: 44px !important;
		height: 44px !important;
		flex: 0 0 44px !important;
	}

	.site-header #site-navigation .menu-toggle .gp-icon svg {
		width: 24px !important;
		height: 24px !important;
	}

	/* Dropdown drawer: full-width panel pinned below the 72px header. */
	.site-header #site-navigation .main-nav {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		background: #fff !important;
		border-top: 1px solid rgba(44, 53, 64, 0.08) !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
		max-height: calc( 100vh - 72px ) !important;
		overflow-y: auto !important;
	}

	.site-header #site-navigation .main-nav > ul {
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 8px 0 !important;
		list-style: none !important;
	}

	.site-header #site-navigation.toggled .main-nav > ul {
		display: flex !important;
	}

	.site-header #site-navigation .main-nav > ul > li {
		width: 100% !important;
		border-top: 1px solid rgba(44, 53, 64, 0.06) !important;
	}

	.site-header #site-navigation .main-nav > ul > li:first-child {
		border-top: 0 !important;
	}

	.site-header #site-navigation .main-nav > ul > li > a {
		display: block !important;
		padding: 16px 24px !important;
		border-radius: 0 !important;
		font-size: 1rem !important;
	}

}

/* --- Logo in the sticky header ------------------------------------------ */

.site-logo,
.lfc-site-logo {
	line-height: 0;
	margin: 0;
}

.site-logo .lfc-logo__img,
.lfc-site-logo .lfc-logo__img {
	height: 48px;
	width: auto;
	max-width: 240px;
}

@media ( max-width: 768px ) {
	.site-logo .lfc-logo__img,
	.lfc-site-logo .lfc-logo__img {
		height: 36px;
	}
}

/* --- Hide GeneratePress footer credit link ------------------------------
 * Defence-in-depth: we replace GP's footer via `generate_footer` hook in
 * functions.php, so this should never render; but if a future update or
 * filter bypass re-enables it, the credit link stays hidden.
 * ------------------------------------------------------------------------- */

.site-info a[href*="generatepress.com"],
.site-info .generatepress-credit,
.site-info .copyright-bar a[href*="generatepress.com"] {
	display: none !important;
}

/* --- Section rhythm utility ---------------------------------------------
 * Applied by blocks that want consistent vertical spacing. Also applies to
 * GP `.site-main` so CPT-single pages breathe correctly.
 * ------------------------------------------------------------------------- */

.site-main {
	padding-block: 0;
}

.lfc-section {
	padding-block: var(--lfc-space-lg);
	padding-inline: var(--lfc-container-padding);
}

@media ( min-width: 768px ) {
	.lfc-section {
		padding-block: var(--lfc-space-xl);
	}
}

.lfc-section--alt {
	background-color: var(--lfc-offwhite);
}

.lfc-section--dark {
	background-color: var(--lfc-navy);
	color: #ffffff;
}

/* --- Outlined button on dark background (hero, cta-banner) -------------- */

.lfc-btn--outline-white {
	background-color: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.lfc-btn--outline-white:hover,
.lfc-btn--outline-white:focus-visible {
	background-color: #ffffff;
	color: var(--lfc-navy);
}

/* --- Focus-visible (global safety net) ---------------------------------- */

:focus-visible {
	outline: 3px solid var(--lfc-focus-ring);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: 0;
}

/* Placeholder contrast — WCAG AA requires ≥ 4.5:1; #767676 on white = 4.48:1. */
::placeholder {
	color: #767676 !important;
	opacity: 1 !important;
}

/* ── GTranslate — desktop: widget movido para o nav sticky via JS ── */

/* No desktop (≥768px) o JS move o .gtranslate_wrapper para dentro do
   .inside-navigation. Aqui garantimos que não flutue. */
@media ( min-width: 768px ) {
	.inside-navigation .gtranslate_wrapper,
	.inside-navigation .gt_switcher_wrapper {
		position: static !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

/* Mobile: widget dentro do menu hambúrguer como último item */
@media ( max-width: 767px ) {
	.lfc-gt-item {
		border-top: 1px solid rgba( 44, 53, 64, 0.06 ) !important;
		position: relative !important;
	}

	.lfc-gt-item .gtranslate_wrapper,
	.lfc-gt-item .gt_switcher_wrapper {
		position: static !important;
		display: block !important;
	}

	.lfc-gt-item .gt_switcher_wrapper {
		padding: 14px 24px !important;
	}

	/* GTranslate popup: column-direction flex cria 5 colunas horizontais
	   que extrapolam a largura do popup. No mobile, forçamos row-wrap com
	   3 itens por linha, deixando o popup crescer verticalmente com scroll. */
	.gt_white_content {
		height: auto !important;
		max-height: 65vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.gt_white_content .gt_languages {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.gt_white_content .gt_languages a {
		flex: 0 0 33.333% !important;
		width: 33.333% !important;
		box-sizing: border-box !important;
	}
}

/* Botão ativo — pílula branca */
.gt_switcher a.gt_current,
.gt_switcher a.gt_switcher-popup {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 14px !important;
	background: #fff !important;
	color: var(--lfc-navy) !important;
	border: 1.5px solid rgba(44, 53, 64, 0.15) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	text-decoration: none !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	font-family: var(--lfc-font-heading) !important;
}

/* GTranslate popup label spans inherit navy for AA contrast on white.
   The wrapper is .gt_switcher_wrapper (with underscore) — accept both. */
.gt_switcher_wrapper a.gt_switcher-popup,
.gt_switcher_wrapper a.gt_switcher-popup span,
.gt_switcher_wrapper a.gt_current,
.gt_switcher_wrapper a.gt_current span {
	color: var(--lfc-navy) !important;
	font-size: 0.8rem !important;
}

/* Links de idioma no dropdown */
.gt_option .nturl {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	color: var(--lfc-navy) !important;
	font-size: 0.8rem !important;
	font-family: var(--lfc-font-heading) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	background: #fff !important;
}

.gt_option .nturl:hover {
	background: var(--lfc-offwhite) !important;
	color: var(--lfc-coral) !important;
}

/* Bandeiras */
.gt_option .nturl img,
.gt_switcher img {
	width: 20px !important;
	height: 14px !important;
	border-radius: 2px !important;
	flex-shrink: 0 !important;
}

/* Esconder "Powered by Google" */
.gt_switcher_wrapper .skiptranslate,
.gt_switcher_wrapper span[style*="white-space:nowrap"],
.gt_switcher_wrapper a[href*="translate.google.com"] {
	display: none !important;
}

/* ================================================
   Pathway cards — grid layout when used standalone
   ================================================ */
.entry-content .wp-block-lfc-pathway-card {
	margin-bottom: 16px;
}

.lfc-pathways-section {
	padding: 64px 24px;
	background: var(--lfc-offwhite);
	max-width: 100%;
}

.lfc-pathways-section .lfc-pathways-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

@media ( max-width: 768px ) {
	.lfc-pathways-section .lfc-pathways-grid {
		grid-template-columns: 1fr;
	}
}

/* ================================================
   Páginas internas — container e layout
   ================================================ */
.page-template-default .site-main,
.page .site-main,
.single .site-main {
	max-width: 100% !important;
	padding: 0 !important;
}

/* Entry content is full-bleed; individual blocks handle their own centering */
.page-template-default .entry-content,
.page .entry-content {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Full-bleed blocks stretch edge-to-edge on internal pages */
.page .entry-content > .wp-block-lfc-hero,
.page .entry-content > .wp-block-lfc-stat-strip,
.page .entry-content > .wp-block-lfc-cta-banner,
.page .entry-content > .wp-block-lfc-why-lfc,
.page .entry-content > .wp-block-lfc-level-cards-grid {
	width: 100%;
}

/* Everything else on internal pages gets a centred 1200px container */
.page .entry-content > *:not(.wp-block-lfc-hero):not(.wp-block-lfc-stat-strip):not(.wp-block-lfc-cta-banner):not(.wp-block-lfc-level-cards-grid):not(.wp-block-lfc-why-lfc) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.page .entry-content > * + * {
	margin-top: 0;
}

/* ================================================
   CF7 Form — estilo completo
   ================================================ */
.wpcf7 {
	max-width: 640px;
	margin: 0 auto;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--lfc-font-body);
	font-size: 1rem;
	color: var(--lfc-navy);
	background: #fff;
	border: 1.5px solid rgba(44, 53, 64, 0.5);
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	appearance: none;
	-webkit-appearance: none;
	margin-bottom: 16px;
	display: block;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--lfc-teal);
	box-shadow: 0 0 0 3px rgba(5, 171, 169, 0.12);
}

.wpcf7 select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232C3540' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

.wpcf7 textarea {
	min-height: 120px;
	resize: vertical;
}

.wpcf7 label,
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	width: 100%;
	padding: 16px 32px;
	background: var(--lfc-cta-bg);
	color: #fff;
	font-family: var(--lfc-font-heading);
	font-size: 1rem;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
	margin-top: 8px;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--lfc-cta-bg-hover);
	transform: translateY(-2px);
}

.wpcf7 .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 0.9rem;
	border: none !important;
}

.wpcf7 .wpcf7-mail-sent-ok {
	background: rgba(5, 171, 169, 0.1);
	color: var(--lfc-teal-deep);
}

.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked {
	background: rgba(247, 98, 80, 0.1);
	color: var(--lfc-coral-deep);
}

.wpcf7 .wpcf7-not-valid {
	border-color: var(--lfc-coral) !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	color: var(--lfc-coral);
	font-size: 0.8rem;
	margin-top: -12px;
	margin-bottom: 12px;
	display: block;
}

/* ================================================
   /apply/ — ID 18 — formulário centrado
   ================================================ */
.page-id-18 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-18 .wp-block-lfc-hero {
	width: 100%;
}

.page-id-18 .entry-content .wpcf7 {
	max-width: 640px;
	margin: 48px auto;
	padding: 0 24px;
}

/* Override the generic 1200px container for the CF7 form on /apply/ */
.page-id-18 .entry-content > .wpcf7,
.page-id-18 .entry-content > form.wpcf7 {
	max-width: 640px;
	padding-left: 24px;
	padding-right: 24px;
}

/* ================================================
   /employers/ — ID 17 — grid de employer cards
   ================================================ */
.page-id-17 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-17 .wp-block-lfc-hero,
.page-id-17 .wp-block-lfc-why-lfc,
.page-id-17 .wp-block-lfc-cta-banner {
	width: 100%;
}

/* If employer cards are wrapped in a group with this className */
.lfc-employers-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px;
}

@media ( max-width: 768px ) {
	.lfc-employers-grid-wrapper {
		grid-template-columns: 1fr;
		padding: 40px 16px;
	}
}

/* Fallback: if employer cards are loose siblings (no group wrapper),
   render them at 1200px width — the :not() rule above already scopes
   them to 1200px; add some breathing room between consecutive cards. */
.page-id-17 .entry-content > .wp-block-lfc-employer-programme-card {
	margin-bottom: 16px;
}

/* ================================================
   /bursary/ — ID 16 — grid 2×2 de bursary items
   ================================================ */
.page-id-16 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-16 .wp-block-lfc-hero,
.page-id-16 .wp-block-lfc-cta-banner {
	width: 100% !important;
	max-width: 100% !important;
}

/* Bursary items grid wrapper — add via Gutenberg Group "lfc-bursary-grid".
   Core wp:group injects an extra .wp-block-group__inner-container between
   this div and the cards; neutralize it with display:contents so the cards
   behave as direct grid items. */
.lfc-bursary-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 64px 24px !important;
	box-sizing: border-box !important;
}

.lfc-bursary-grid > .wp-block-group__inner-container {
	display: contents;
}

.lfc-bursary-grid .wp-block-lfc-bursary-item {
	margin: 0 !important;
	height: 100%;
	box-sizing: border-box;
}

/* Swap horizontal slide for vertical lift inside the grid */
.lfc-bursary-grid .wp-block-lfc-bursary-item:hover,
.lfc-bursary-grid .wp-block-lfc-bursary-item:focus-within {
	transform: translateY(-4px) !important;
}

/* Fallback: loose bursary items not inside a group */
.page-id-16 .entry-content > .wp-block-lfc-bursary-item {
	max-width: none !important;
	margin: 0 0 16px !important;
}

@media ( max-width: 768px ) {
	.lfc-bursary-grid {
		grid-template-columns: 1fr !important;
		padding: 40px 16px !important;
	}
}

/* ================================================
   /about/ — ID 20 — hero full-bleed, 860px inner
   ================================================ */
.page-id-20 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-20 .wp-block-lfc-hero,
.page-id-20 .entry-content > .wp-block-lfc-hero {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Full-bleed blocks on /about/ stay edge-to-edge (they centre their own
   content via an inner wrapper). */
.page-id-20 .entry-content > .wp-block-lfc-hero,
.page-id-20 .entry-content > .wp-block-lfc-why-lfc,
.page-id-20 .entry-content > .wp-block-lfc-stat-strip,
.page-id-20 .entry-content > .wp-block-lfc-cta-banner,
.page-id-20 .entry-content > .wp-block-lfc-level-cards-grid {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Everything else on /about/ (loose paragraphs, headings, images added
   directly in the editor) gets the narrower 860px reading column. */
.page-id-20 .entry-content > *:not(.wp-block-lfc-hero):not(.wp-block-lfc-why-lfc):not(.wp-block-lfc-stat-strip):not(.wp-block-lfc-cta-banner):not(.wp-block-lfc-level-cards-grid) {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 48px;
	padding-bottom: 48px;
}

/* ================================================
   /employers/ — ID 17 — loose-card layout + grid utility
   ================================================ */

/* Loose employer cards centred at 1200px with vertical spacing */
.page-id-17 .entry-content > .wp-block-lfc-employer-programme-card {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px;
	padding-right: 24px;
	margin-bottom: 24px;
}

/* Utility wrapper — add via Gutenberg Group "lfc-employer-grid"
   around the 4 employer cards to lay them out 2x2. `!important`
   hardened so the Group's own `.wp-block-group` layout defaults can't
   break the grid. Core wp:group always injects an extra
   `.wp-block-group__inner-container` between this div and the cards;
   neutralize it with `display: contents` so the cards behave as
   direct grid items of `.lfc-employer-grid`. */
.lfc-employer-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 64px 24px !important;
	box-sizing: border-box !important;
}

.lfc-employer-grid > .wp-block-group__inner-container {
	display: contents;
}

.lfc-employer-grid .wp-block-lfc-employer-programme-card {
	margin: 0 !important;
	padding: 32px;
	max-width: none;
	height: 100%;
	box-sizing: border-box;
}

.lfc-employer-grid .wp-block-lfc-employer-programme-card .wp-block-lfc-employer-programme-card__meta {
	margin-top: auto;
}

@media ( max-width: 768px ) {
	.lfc-employer-grid {
		grid-template-columns: 1fr !important;
		padding: 40px 16px !important;
	}
}

/* ================================================
   /esol/ — ID 15 — level cards + pathway cards
   ================================================ */
.page-id-15 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-15 .wp-block-lfc-hero,
.page-id-15 .wp-block-lfc-level-cards-grid,
.page-id-15 .wp-block-lfc-cta-banner,
.page-id-15 .wp-block-lfc-why-lfc,
.page-id-15 .wp-block-lfc-stat-strip {
	width: 100%;
	max-width: 100%;
}

/* Pathway card stack under "Progression" heading */
.page-id-15 .entry-content > .wp-block-lfc-pathway-card {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px;
	padding-right: 24px;
	margin-bottom: 16px;
}

/* Utility wrapper for pathway cards (add via Gutenberg Group
   "lfc-pathway-grid" — lays out as a 2-col grid on desktop, 1-col on mobile). */
.lfc-pathway-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 56px 24px !important;
	box-sizing: border-box !important;
}

.lfc-pathway-grid > .wp-block-group__inner-container {
	display: contents;
}

.lfc-pathway-grid .wp-block-lfc-pathway-card,
.lfc-pathway-grid .lfc-pathway-card {
	margin: 0 !important;
	height: 100%;
	box-sizing: border-box;
}

@media ( max-width: 768px ) {
	.lfc-pathway-grid {
		grid-template-columns: 1fr !important;
		padding: 40px 16px !important;
	}
}

/* Headings that appear between blocks on internal pages (e.g.
   "Our programmes", "Progression") — give them generous rhythm and
   keep them centred within the 1200px container. */
.page .entry-content > h2,
.page .entry-content > h3 {
	max-width: 1200px;
	margin: 64px auto 24px;
	padding: 0 24px;
	font-family: var(--lfc-font-heading);
	color: var(--lfc-navy);
}

.page .entry-content > h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.page .entry-content > h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

.page .entry-content > h2:first-child,
.page .entry-content > h3:first-child {
	margin-top: 32px;
}

/* Paragraphs that sit as loose siblings under a heading on internal
   pages — match the container width and get sensible reading spacing. */
.page .entry-content > p {
	max-width: 1200px;
	margin: 0 auto 16px;
	padding: 0 24px;
	font-family: var(--lfc-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--lfc-navy);
}

/* ── Página /contact/ (ID 19) ── */
.page-id-19 .entry-content {
	max-width: 100%;
	padding: 0;
}

.page-id-19 .wp-block-lfc-hero,
.page-id-19 .wp-block-lfc-cta-banner {
	width: 100% !important;
	max-width: 100% !important;
}

.page-id-19 .wp-block-lfc-why-lfc {
	width: 100% !important;
	max-width: 100% !important;
}

/* Container do formulário de contato */
.page-id-19 .wpcf7 {
	max-width: 560px;
	margin: 48px auto;
	padding: 0 24px;
}

/* Select com seta no formulário de contato */
.page-id-19 .wpcf7 select {
	width: 100%;
	padding: 14px 40px 14px 16px;
	font-family: var(--lfc-font-body);
	font-size: 1rem;
	color: var(--lfc-navy);
	background: #fff;
	border: 1.5px solid rgba(44,53,64,0.2);
	border-radius: 10px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232C3540' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
	margin-bottom: 16px;
	display: block;
	transition: border-color 200ms ease;
}

.page-id-19 .wpcf7 select:focus {
	outline: none;
	border-color: var(--lfc-teal);
	box-shadow: 0 0 0 3px rgba(5,171,169,0.12);
}