/*
Theme Name: Interact International
Template: twentytwentyfive
Description: Sovereign Green design system applied as a child theme of Twenty Twenty-Five. Design tokens sourced from livrables/cabinet/interact-international/design-system/tokens.json.
Version: 2.1.0
Author: Interact International
*/

/* Header: ivory background to match the "no white" content bands */
header.wp-block-template-part {
	background-color: #F7F4EC;
}

/* Header layout/typography, pinned explicitly rather than relying on
   WordPress's auto-generated per-instance layout classes (e.g.
   wp-container-core-group-is-layout-XXXX). Those only get their CSS
   generated when a full block template renders a page end-to-end; the
   gated Project Fiche templates (archive-project_fiche.php,
   single-project_fiche.php) are classic PHP templates that call
   block_template_part() for the header from inside get_header(), which
   doesn't trigger that generation pass. Result without this: the site
   title and nav links collapse together instead of spreading across the
   row, and the row reads as a different, heavier typeface at a glance.
   These rules target the header's stable structural classes directly, so
   the header looks identical on every template type. */
header.wp-block-template-part .wp-block-group.is-content-justification-space-between {
	justify-content: space-between;
}
header.wp-block-template-part .wp-block-group.is-content-justification-right {
	justify-content: flex-end;
}
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-site-title a {
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
header.wp-block-template-part .wp-block-site-title {
	font-weight: 700;
	letter-spacing: -.5px;
	font-size: 17px;
}
header.wp-block-template-part .wp-block-navigation-item__content {
	font-size: 20px;
}

/* Utility slot at the far right of the nav: "Partner Login" (logged-out) or
   "Opportunity Register" (logged-in alliance partners/admins) — only one of
   the two ever renders, via the mutually-exclusive filters in functions.php.
   A left border divider plus extra margin separates it from the 5 main nav
   clusters (About, What We Do, Pipeline, Partners, Contact) so it reads as
   a distinct action, not a sixth content page. Outline-pill styling,
   visually distinct from the plain-text content links, so a visitor who
   doesn't know a portal exists can still spot it at a glance. */
.wp-block-navigation-item.nav-utility-item {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid #E2E0D6;
}
.nav-utility-link.wp-block-navigation-item__content {
	border: 1px solid #11392B;
	border-radius: 30px;
	padding: 8px 20px !important;
	font-weight: 600;
	color: #11392B !important;
	transition: background-color .15s ease, color .15s ease;
}
.nav-utility-link.wp-block-navigation-item__content:hover {
	background-color: #11392B;
	color: #F7F4EC !important;
}

/* Submenu dropdowns ("About", "What We Do"): core already provides the
   open-on-hover/focus mechanics and the panel's base box-shadow/background;
   these rules just bring the panel and its items onto the brand's type and
   color system instead of WordPress's unstyled defaults. */
header.wp-block-template-part .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
header.wp-block-template-part .wp-block-navigation__submenu-container {
	background-color: #FFFFFF;
	border: 1px solid #E2E0D6;
	border-radius: 10px;
	box-shadow: 0 14px 28px rgba(17, 57, 43, 0.14);
	padding: 8px;
	min-width: 220px;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
	padding: 10px 12px !important;
	border-radius: 6px;
	color: #1A1F1C !important;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: #F7F4EC;
	color: #11392B !important;
}
header.wp-block-template-part .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-submenu.current-menu-parent > .wp-block-navigation-item__content {
	color: #11392B !important;
	box-shadow: inset 0 -2px 0 #C9A24B;
}

/* Remove the default block-gap between top-level page sections: with every
   section now a colored band (pine/ivory), the WP default 24px margin
   between them showed as a stray white sliver from the body background
   behind it. Bands should butt directly against each other, matching the
   prototype, where the sections have no gap between them.
   Two separate wrappers apply this default gap: the page content itself
   (.wp-block-post-content-is-layout-constrained, covers section-to-section
   gaps within a page) and the outer site wrapper (.wp-site-blocks, covers
   the header-to-main and main-to-footer gaps). */
.wp-block-post-content-is-layout-constrained > *,
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
}

/* WPForms ships its own default blue submit button; override to match brand buttons */
.wpforms-container .wpforms-submit-container .wpforms-submit {
	background-color: #11392B !important;
	border-color: #11392B !important;
	border-radius: 6px !important;
	color: #F7F4EC !important;
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 600 !important;
	padding: 12px 24px !important;
}
.wpforms-container .wpforms-submit-container .wpforms-submit:hover {
	background-color: #0C2D22 !important;
	border-color: #0C2D22 !important;
}
.wpforms-container .wpforms-field label.wpforms-field-label {
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
	color: #1A1F1C !important;
}
.wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container textarea {
	border-radius: 6px !important;
	border-color: #E2E0D6 !important;
}
.wpforms-container input[type=text]:focus, .wpforms-container input[type=email]:focus, .wpforms-container textarea:focus {
	border-color: #C9A24B !important;
}

/* Photography bands: the strip behind the image runs full-bleed in ivory
   (matching the "no white" bands elsewhere), while the image itself stays
   centered and capped at the same width as the surrounding text content. */
.photoband {
	background-color: #F7F4EC;
}
.photoband-inner {
	position: relative;
	overflow: hidden;
	line-height: 0;
	max-width: 1140px;
	margin: 0 auto;
}
.photoband-inner img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	display: block;
}
.photoband-inner .credit {
	position: absolute;
	left: 24px;
	bottom: 16px;
	line-height: 1.4;
	background: rgba(17, 57, 43, .82);
	color: #F7F4EC;
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 4px;
	letter-spacing: .02em;
}
@media (max-width: 800px) {
	.photoband-inner img {
		height: 280px;
	}
}

/* Sectors & Approach: icon-based sector cards */
.sicon {
	width: 28px;
	height: 28px;
	color: #11392B;
	margin-bottom: 14px;
}
.sectorgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.sectorcard {
	border: 1px solid #E2E0D6;
	border-radius: 16px;
	padding: 24px;
	background: #FFFFFF;
}
.sectorcard h3 {
	font-size: 16px;
	line-height: 1.35;
	margin: 0;
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	color: #11392B;
	font-weight: 600;
}
.sectorcard .sub {
	display: block;
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #5B6660;
	margin-top: 2px;
}
.ghost-card {
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: dashed;
}
.ghost-card a {
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #11392B;
	text-decoration: none;
}

/* Sectors & Approach: "where we work" stat callouts */
.geo-split {
	display: flex;
	gap: 56px;
	margin-top: 24px;
	flex-wrap: wrap;
}
.geo-n {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-size: 44px;
	font-weight: 600;
	color: #11392B;
	line-height: 1;
}

/* Sectors & Approach: location pin tags */
.tagrow {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}
.tag {
	border: 1px solid #E2E0D6;
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 14px;
}
.tag.pin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pinicon {
	width: 14px;
	height: 14px;
	color: #B68F39;
	flex-shrink: 0;
}

/* Sectors & Approach: "why Interact International" cards */
.whygrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.whycard {
	border: 1px solid #E2E0D6;
	border-radius: 16px;
	padding: 28px;
	background: #FFFFFF;
}
.whycard h3 {
	font-size: 18px;
	margin: 0;
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	color: #11392B;
	font-weight: 600;
}
.whycard p {
	margin-top: 8px;
}
.leadline {
	font-size: 22px;
	color: #11392B;
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* About: "how we work" step cards */
.stepgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 32px;
}
.stepcard {
	border-top: 3px solid #C9A24B;
	padding-top: 20px;
}
.stepnum {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-size: 14px;
	color: #B68F39;
	font-weight: 600;
	letter-spacing: .05em;
}
.stepcard .sicon {
	margin-top: 12px;
}
.stepcard h3 {
	font-size: 19px;
	margin-top: 4px;
}
.stepcard p {
	margin-top: 8px;
}

@media (max-width: 800px) {
	.sectorgrid {
		grid-template-columns: 1fr 1fr;
	}
	.whygrid {
		grid-template-columns: 1fr;
	}
	.stepgrid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}
@media (max-width: 520px) {
	.sectorgrid {
		grid-template-columns: 1fr;
	}
}