/*
Theme Name:   AIRCA
Theme URI:    https://www.airca.org
Description:  Child theme of Twenty Twenty-Five for the Association of International Research and Development Centers for Agriculture. Reproduces the identity of the original J3Airca Joomla template: a teal-led four-colour system on white, Open Sans, and a composed twelve-column grid.
Author:       CABI
Template:     twentytwentyfive
Version:      0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  airca
*/

/* -------------------------------------------------------------------------
   Everything below is presentation the block system cannot express in
   theme.json. Colours and type come from theme.json tokens via var(--wp--*)
   so there is one source of truth.
   ------------------------------------------------------------------------- */

/* --- Header ------------------------------------------------------------- */

/* 525x96 is the artwork's natural size, which is how the original renders it. */
.airca-logo img {
	width: 525px;
	max-width: 100%;
	height: auto;
}

.airca-social a {
	display: inline-block;
	margin-left: 6px;
	line-height: 0;
}

.airca-social img {
	width: 28px;
	height: 28px;
}

/* --- Navigation: the four-colour cycle ---------------------------------- */
/*
   The identity of the original site. Top-level items cycle teal, gold,
   orange, clay in that fixed order and repeat. Implemented with nth-child
   so it holds however many items the menu grows to.
*/

.airca-nav {
	--airca-nav-bg: var(--wp--preset--color--accent);
}

/*
   Items grow to fill the 1170px column so the coloured bar ends on the same
   right edge as the search box above it, as it does on the original site.
   Growing from natural width keeps the proportions of the source, where each
   block was sized roughly to its label.
*/
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item {
	background-color: var(--airca-nav-bg);
	flex: 1 1 auto;
	text-align: center;
}

.airca-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4n + 1) { --airca-nav-bg: var(--wp--preset--color--accent); }
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4n + 2) { --airca-nav-bg: var(--wp--preset--color--gold); }
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4n + 3) { --airca-nav-bg: var(--wp--preset--color--orange); }
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4n + 4) { --airca-nav-bg: var(--wp--preset--color--clay); }

/*
   Sized to keep all eight top-level items on a single row at 1170px, which
   the source template failed to do — its eighth item wrapped out of sight.
   14px matches the original menu's type size.
*/
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: 14px 17px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.airca-nav .wp-block-navigation__submenu-icon {
	padding-right: 12px;
	color: #fff;
}

/*
   Hover changes the label colour and nothing else, which is what the original
   actually does. Its module had a hover-background setting (#AC3724) but the
   generated CSS never applied it - the only rule emitted was

     #gruemenu > ul > li:hover > a { color: #FFFDCC }

   so each block keeps its own colour from the cycle while hovered. There is no
   click or active state either, and no transition.
*/
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.airca-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active {
	color: #fffdcc;
	background: none;
	text-decoration: none;
}

/* Nothing anywhere in the bar animates or shifts on interaction. */
.airca-nav .wp-block-navigation-item,
.airca-nav .wp-block-navigation-item__content {
	transition: none;
	transform: none;
}

/*
   Focus ring for keyboard users only. Scoped to html.airca-kbd, which
   assets/js/focus-ring.js sets on Tab and clears on pointerdown.
   :focus-visible alone is not enough here: Chromium matches it on a plain
   mouse click on a link, which drew a box around the item on click - the
   original site shows nothing at all on click.
*/
.airca-nav .wp-block-navigation-item__content:focus,
.airca-nav .wp-block-navigation__responsive-container-open:focus,
.airca-nav .wp-block-navigation__responsive-container-close:focus,
.airca-nav .wp-block-navigation-submenu__toggle:focus {
	outline: none;
}

.airca-kbd .airca-nav .wp-block-navigation-item__content:focus,
.airca-kbd .airca-nav .wp-block-navigation__responsive-container-open:focus,
.airca-kbd .airca-nav .wp-block-navigation__responsive-container-close:focus,
.airca-kbd .airca-nav .wp-block-navigation-submenu__toggle:focus {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: -3px;
}

/*
   Sub-navigation sits on solid teal, per the source template, at the same
   240px the original uses. Fixed rather than shrink-to-fit so long entries
   like "AIRCA Capability Statement" wrap to two lines instead of stretching
   the panel, which is how the source behaves.
*/
/*
   The .has-child in these selectors is not decoration: core ships
   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container
   { width: 0 }` and an equally specific padding rule for the items. Matching
   that specificity lets this sheet win on load order instead of resorting to
   !important.
*/
.airca-nav .has-child .wp-block-navigation__submenu-container {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0;
	/* text-align is inherited from the centred top-level item; reset it. */
	text-align: left;
}

/*
   Core sizes the panel per open state, not just once:
     .has-child:not(.open-on-click):hover > …        width:auto; min-width:200px
     .has-child …__toggle[aria-expanded="true"] ~ …  width:auto; min-width:200px
   both at 0,5,0. Pinning 240px means matching each state rather than only the
   closed one, which is why this looks repetitive.
*/
.airca-nav .has-child .wp-block-navigation__submenu-container,
.airca-nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.airca-nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	width: 240px;
	min-width: 240px;
}

.airca-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	flex: 0 0 auto;
}

.airca-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
	display: block;
	color: #fff;
	padding: 8px 20px;
	white-space: normal;
	text-align: left;
}

/*
   Submenu hover is the same story: the original sets the label to #FFFDCC and
   the background to #49A094, which is already the panel's colour - so only the
   text changes there too.
*/
.airca-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.airca-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: #fffdcc;
	background-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* --- Mobile menu -------------------------------------------------------- */
/*
   The original site shipped this button with no working drawer behind it —
   its sidr.js had been removed. Here the block's own overlay does the work;
   the button just needs to look like part of the brand.
*/

.airca-nav .wp-block-navigation__responsive-container-open {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	padding: 10px 12px;
	border-radius: 4px;
}

.airca-nav .wp-block-navigation__responsive-container-open:hover,
.airca-nav .wp-block-navigation__responsive-container-open:focus-visible {
	background-color: var(--wp--preset--color--clay);
}

.airca-nav .wp-block-navigation__responsive-container-open svg {
	fill: currentColor;
}

.airca-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--accent);
	padding: 32px 24px;
}

.airca-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	background: none;
	flex: 0 0 auto;
	text-align: left;
}

/* --- Typography --------------------------------------------------------- */

h3,
.wp-block-heading.is-style-airca-section {
	color: var(--wp--preset--color--gold);
}

h4 {
	color: var(--wp--preset--color--accent);
}

/* Page title, matching the source's 4px rule beneath interior page headings. */
.airca-page-title {
	border-bottom: 4px solid #eee;
	padding-bottom: 12px;
}

/*
   Let long unbreakable strings wrap. Several migrated articles carry bare
   campaign-archive and tracking URLs 70+ characters long, which on a phone push
   the whole page sideways - a category listing was 28px too wide because of one
   in an excerpt.
*/
.airca-content,
.airca-cop,
.airca-news,
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-comment-content {
	overflow-wrap: break-word;
}

/* --- Content elements inherited from the Joomla articles ---------------- */
/*
   73 of the 83 migrated articles carry hand-authored markup using these
   classes. Retaining them means the imported HTML renders as authored
   instead of collapsing to unstyled blocks.
*/

/*
   Migrated Joomla markup carries hard width attributes sized for the old
   1170px full-width column - img width="320", table width="90%". Nothing may
   push past the reading measure, so images shrink to their container and the
   border is counted inside that width rather than added to it.
*/
.airca-content img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

.airca-content .img-gr { border: 7px solid var(--wp--preset--color--frame); }
.airca-content .img-or { border: 7px solid var(--wp--preset--color--highlight); }
.airca-content .fleft  { float: left;  margin: 0 15px 10px 0; }
.airca-content .fright { float: right; margin: 0 0 10px 15px; }

.airca-content .left-div,
.airca-content .right-div {
	width: 320px;
	padding: 20px;
	border: 7px solid #7bc3b9;
	background: var(--wp--preset--color--surface);
}

.airca-content .left-div  { float: left;  margin-right: 10px; }
.airca-content .right-div { float: right; margin-left: 10px; }
.airca-content .center-divgr { padding: 20px; border: 7px solid #eee; background: var(--wp--preset--color--surface); }

.airca-content .listing,
.airca-content .listing ul {
	margin-top: 0;
	padding-left: 2em;
	list-style-type: none;
}

.airca-content .listing li::before {
	position: absolute;
	margin-left: -1.1em;
	font-weight: 600;
}

.airca-content .listing li.arrows::before   { content: "\00BB"; color: #444; }
.airca-content .listing li.arrowsor::before { content: "\00BB"; color: var(--wp--preset--color--gold); }
.airca-content .listing li.circles::before  { content: "\2022"; color: var(--wp--preset--color--accent); }

/*
   Several migrated articles use tables purely for layout - grids of newsletter
   covers and member logos. Forcing them fluid lets those grids reflow into the
   reading measure instead of forcing the page sideways.
*/
.airca-content table {
	border-collapse: collapse;
	margin: 16px 0;
	width: 100%;
	max-width: 100%;
}

.airca-content td,
.airca-content th {
	padding: 9px 12px;
	vertical-align: top;
	text-align: left;
}

/*
   Borders only on real data tables, matching the source template, which ruled
   .table-bordered and left bare <table> unstyled. Several articles use tables
   purely to lay out grids of thumbnails, and a border grid around those reads
   as a rendering fault.
*/
.airca-content .table-bordered td,
.airca-content .table-bordered th,
.airca-content .wp-block-table td,
.airca-content .wp-block-table th {
	border: 1px solid var(--wp--preset--color--rule);
}

/*
   Safety net for genuine data tables that cannot reflow - many narrow columns
   of text. They scroll inside their own container so the page never does.
   The wrapper is added by airca_wrap_content_tables() in functions.php.
*/
.airca-content .wp-block-table,
.airca-content .airca-table-scroll {
	overflow-x: auto;
	max-width: 100%;
}

/* --- Homepage ----------------------------------------------------------- */

.airca-section-title {
	margin-bottom: 16px;
}

/* Flat colour panels beside the map. The design forbids cards and shadows;
   emphasis is carried by solid brand colour, as on the original. */
.airca-panel + .airca-panel {
	margin-top: 0;
}

.airca-panel a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.airca-panel a:hover,
.airca-panel a:focus-visible {
	color: var(--wp--preset--color--highlight);
}

/* --- Member-centre map and list ----------------------------------------- */
/*
   The artwork is AIRCA's own raster map, kept as-is - it already carries the
   member pins, place names and office key. No marker overlay is drawn on it:
   the original's image-map hotspots no longer match this redesigned artwork,
   which is why its popups appear in the wrong places. The hover detail lives on
   the list instead, where it cannot drift out of alignment.
*/

.airca-map {
	max-width: 855px;
}

.airca-map__base {
	display: block;
	width: 100%;
	height: auto;
}

.airca-centres {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 20px;
	font-size: 0.8125rem;
}

.airca-centres__item {
	position: relative;
	margin: 0;
}

.airca-centres__link {
	display: block;
	padding: 3px 0;
	text-decoration: none;
}

.airca-centres__name {
	font-weight: 600;
	color: var(--wp--preset--color--link);
}

.airca-centres__place {
	color: var(--wp--preset--color--muted);
}

.airca-centres__link:hover .airca-centres__name,
.airca-centres__link:focus-visible .airca-centres__name {
	color: var(--wp--preset--color--accent);
}

/* Detail card, revealed for pointer and keyboard alike. */
.airca-centres__card {
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 5;
	display: none;
	width: 320px;
	max-width: 80vw;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--frame);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.airca-centres__item:hover .airca-centres__card,
.airca-centres__item:focus-within .airca-centres__card {
	display: block;
}

.airca-centres__logo {
	float: left;
	width: 60px;
	height: auto;
	margin: 0 10px 6px 0;
}

.airca-centres__text {
	display: block;
	clear: both;
	margin-top: 6px;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 720px) {
	.airca-centres {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	/* A card that opens on tap would cover the next entries; show the text inline. */
	.airca-centres__card {
		position: static;
		display: block;
		width: auto;
		max-width: none;
		border: 0;
		padding: 0 0 8px;
	}
	.airca-centres__card strong { display: block; }
}

/* --- Highlights grid ---------------------------------------------------- */

.airca-highlights .airca-highlight__image img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border: 7px solid var(--wp--preset--color--frame);
	box-sizing: border-box;
}

.airca-highlights .wp-block-post-title { margin: 0; }
.airca-highlights .wp-block-post-excerpt { margin: 0; }
.airca-highlights .wp-block-post-excerpt__more-text { margin-top: 4px; }

/* --- Member news -------------------------------------------------------- */

.airca-news {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.airca-news li {
	margin-bottom: 14px;
	line-height: 1.5;
}

.airca-news a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.airca-news a:hover { color: var(--wp--preset--color--accent); }

.airca-news__source { color: var(--wp--preset--color--clay); }

.airca-news__empty {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.airca-video { margin: 0 0 8px; border: 7px solid var(--wp--preset--color--frame); }

/* --- Community of Practice ---------------------------------------------- */

.airca-cop__intro {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.airca-cop__list {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
}

.airca-cop__item {
	margin: 0;
	padding: 18px 20px;
	/* A flat left rule rather than a card, per the design direction. */
	border-left: 4px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.airca-cop__item.is-member { border-left-color: var(--wp--preset--color--accent); }
.airca-cop__item.is-locked { border-left-color: var(--wp--preset--color--frame); }

.airca-cop__name {
	margin: 0 0 6px;
	font-size: 1.125rem;
	color: var(--wp--preset--color--accent);
}

.airca-cop__item.is-locked .airca-cop__name { color: var(--wp--preset--color--muted); }

.airca-cop__desc {
	margin: 0 0 8px;
	font-size: 0.875rem;
}

.airca-cop__meta {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.airca-cop__section {
	margin: 32px 0 10px;
	font-size: 1.125rem;
	color: var(--wp--preset--color--accent);
}

.airca-cop__docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.airca-cop__docs li {
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.airca-cop__docs a { font-weight: 600; }

.airca-cop__size {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.airca-cop__note {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.airca-cop__back { margin-top: 28px; }

/* --- CoP discussions ---------------------------------------------------- */

.airca-cop__notice {
	padding: 10px 14px;
	border-left: 4px solid var(--wp--preset--color--clay);
	background: var(--wp--preset--color--surface);
	font-size: 0.875rem;
}

.airca-cop__topics {
	margin: 0;
	padding: 0;
	list-style: none;
}

.airca-cop__topics li {
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.airca-cop__topics a { font-weight: 600; }

.airca-cop__topicmeta {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.airca-topic-form {
	margin-top: 28px;
	padding: 20px;
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
}

.airca-topic-form h4 { margin: 0 0 12px; }

.airca-topic-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.airca-topic-form input[type="text"],
.airca-topic-form textarea,
.airca-reply-form input[type="text"],
.airca-reply-form input[type="email"],
.airca-reply-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	font: inherit;
	font-size: 0.9375rem;
}

.airca-topic-form button,
.airca-reply-form input[type="submit"] {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 10px 22px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.airca-topic-form button:hover,
.airca-topic-form button:focus-visible,
.airca-reply-form input[type="submit"]:hover,
.airca-reply-form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--clay);
}

.airca-replies .wp-block-comment-content { font-size: 0.9375rem; }

@media (max-width: 720px) {
	.airca-cop__list { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Footer ------------------------------------------------------------- */

.airca-footer {
	border-top: 7px solid var(--wp--preset--color--gold);
}

.airca-footer h3 { color: var(--wp--preset--color--ink); }

.airca-footer a { color: #fff; text-decoration: none; }
.airca-footer a:hover { color: #f3dd97; }

.airca-colophon a { color: var(--wp--preset--color--gold); }

/* --- Newsletter signup (posts directly to Mailchimp) -------------------- */

/* Contains the off-screen honeypot so it cannot affect page scroll width. */
.airca-signup {
	position: relative;
}

.airca-signup__required {
	font-size: 0.75rem;
	color: #f3dd97;
	margin: 0 0 8px;
}

.airca-signup label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.airca-signup input[type="email"],
.airca-signup input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 12px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.875rem;
}

.airca-signup input:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}

.airca-signup button {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 10px 22px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.airca-signup button:hover,
.airca-signup button:focus-visible {
	background: var(--wp--preset--color--clay);
}

/* Off-screen honeypot: present for bots, unreachable for people. */
.airca-signup__trap {
	position: absolute;
	left: -5000px;
}

/* --- Responsive: single breakpoint, inherited from the source ----------- */

@media (max-width: 720px) {

	.airca-content img { width: 100%; height: auto; }

	/*
	   !important is doing real work here. The migrated articles carry inline
	   styles - float, fixed margins, fixed heights - written for a 1170px
	   desktop column, and an inline style beats any class rule. A floated
	   image at full container width plus its own 20px right margin is enough
	   to push the page sideways.
	*/
	.airca-content .fleft,
	.airca-content .fright,
	.airca-content .left-div,
	.airca-content .right-div {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 16px !important;
	}

	/* Fixed heights sized around a side-by-side layout that no longer applies. */
	.airca-content div[style*="height"] { height: auto !important; }

	/* Data tables reflow to stacked rows carrying their column label. */
	.airca-content table thead { display: none; }
	.airca-content table tr { display: block; margin-bottom: 16px; }
	.airca-content table td { display: block; width: 100%; }
	.airca-content table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
	}
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}