/**
 * AFAM header (DES-014): white logo panel with an angled edge spanning the top bar and the main bar,
 * coloured top bar, bold menu with active underline, call-to-action button. Structure measured on the
 * reference header (NAVIGATION_AND_HEADER 9.7). Classes afam-hdr-* are set on the Ovatheme header post 425.
 * Author: Kiriago <kiryc0de@gmail.com> (https://github.com/kirycode/)
 */

/* ---------- shared ---------- */
.afam-hdr { background: var(--afam-white); }
.afam-hdr .afam-ico { flex: 0 0 auto; }
.afam-hdr-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.afam-hdr-contact li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--afam-hdr-fg); font-size: 14px; font-weight: 500; line-height: 1; }
.afam-hdr-contact a,
.afam-hdr-top a { color: var(--afam-hdr-fg); text-decoration: none; }
.afam-hdr-contact a:hover,
.afam-hdr-top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.afam-hdr-top a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.afam-hdr-links { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.afam-hdr-links li { margin: 0; }

/* Call-to-action and outline buttons (colours only from tokens, ADR D-32) */
.afam-hdr .afam-hdr-cta .elementor-button,
.afam-hdr .afam-hdr-cta a.elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 12px 18px; border: 2px solid transparent; border-radius: var(--afam-hdr-cta-radius);
	background: var(--afam-cta-bg); color: var(--afam-cta-fg); font-family: var(--afam-font-body);
	font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: none;
	transition: background-color var(--afam-transition), color var(--afam-transition);
}
.afam-hdr .afam-hdr-cta .elementor-button:hover,
.afam-hdr .afam-hdr-cta .elementor-button:focus { background: var(--afam-cta-bg-hover); color: var(--afam-cta-fg-hover); }
.afam-hdr .afam-hdr-cta .elementor-button:focus-visible { outline: none; box-shadow: var(--afam-focus-ring); }
.afam-hdr .afam-hdr-join .elementor-button {
	display: inline-flex; align-items: center; min-height: 46px; padding: 12px 18px; border: 2px solid var(--afam-green-600); border-radius: var(--afam-hdr-cta-radius);
	background: transparent; color: var(--afam-green-600); font-family: var(--afam-font-body); font-size: 14px; font-weight: 700; line-height: 1;
}
.afam-hdr .afam-hdr-join .elementor-button:hover { background: var(--afam-green-600); color: #fff; }
/* U-027 A1: explicit state rules, so the outline button is readable on the white bar and on the green sticky bar whatever the theme paints in between */
.afam-hdr:not(.active_sticky) .afam-hdr-join .elementor-button { background-color: transparent; border-color: var(--afam-green-600); color: var(--afam-green-600); }
.afam-hdr:not(.active_sticky) .afam-hdr-join .elementor-button:is(:hover, :focus-visible) { background-color: var(--afam-green-600); border-color: var(--afam-green-600); color: #fff; }
.afam-hdr.active_sticky .afam-hdr-join .elementor-button { background-color: transparent; border-color: #fff; color: #fff; }
.afam-hdr.active_sticky .afam-hdr-join .elementor-button:is(:hover, :focus-visible) { background-color: #fff; border-color: #fff; color: var(--afam-green-900); }
.afam-hdr .afam-hdr-join .elementor-button { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

/* Menu: bold dark text, 15 px side padding, active item underlined (text-decoration, offset 8 px) */
.afam-hdr-menu .main-navigation .menu > li > a {
	font-family: var(--afam-font-body); font-size: 16px; font-weight: 600; color: var(--afam-hdr-menu-fg); text-transform: none;
	padding-left: 15px; padding-right: 15px; background: transparent;
}
.afam-hdr-menu .main-navigation .menu > li > a:empty { display: none; }
.afam-hdr-menu .main-navigation .menu > li:has(> a:empty) { display: none; }
.afam-hdr-menu .main-navigation .menu > li > a:hover,
.afam-hdr-menu .main-navigation .menu > li:focus-within > a { color: var(--afam-hdr-menu-hover); background: transparent; }
.afam-hdr-menu .main-navigation .menu > li.current-menu-item > a,
.afam-hdr-menu .main-navigation .menu > li.current-menu-ancestor > a,
.afam-hdr-menu .main-navigation .menu > li.current_page_parent > a {
	color: var(--afam-green-900) !important; background: transparent !important; /* !important: theme sets the active colour with !important */
	text-decoration: underline; text-decoration-color: var(--afam-hdr-underline); text-decoration-thickness: 3px; text-underline-offset: 8px;
}
.afam-hdr-menu .main-navigation .menu a:focus-visible { outline: 3px solid var(--afam-green-500); outline-offset: 2px; }

/* ---------- desktop from 1025 px ---------- */
@media (min-width: 1025px) {
	.afam-hdr { --afam-hdr-brand-w: 216px; position: relative; z-index: 50; }
	.afam-hdr > .elementor-container { display: flex; flex-wrap: nowrap; align-items: stretch; max-width: none; width: 100%; }
	.afam-hdr > .elementor-container > .afam-hdr-brand { flex: 0 0 var(--afam-hdr-brand-w); width: var(--afam-hdr-brand-w) !important; position: relative; z-index: 3; filter: drop-shadow(5px 0 6px rgba(8, 76, 44, 0.18)); } /* !important: Elementor column inline width (50 %) */
	.afam-hdr-brand > .elementor-widget-wrap { height: 100%; align-items: center; justify-content: center; padding: 0 !important; }
	.afam-hdr-brand::before {
		content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: calc(-1 * var(--afam-hdr-reach));
		background: #fff; pointer-events: none;
		clip-path: polygon(0 0, 100% 0, calc(100% - var(--afam-hdr-reach)) var(--afam-hdr-top),
			calc(100% - var(--afam-hdr-reach) + var(--afam-hdr-tip)) calc(var(--afam-hdr-top) / 2 + 50%),
			calc(100% - var(--afam-hdr-reach)) 100%, 0 100%);
	}
	.afam-hdr-brand img.logo_desktop { width: 100px; height: 100px; object-fit: contain; }
	.afam-hdr > .elementor-container > .afam-hdr-right { flex: 1 1 auto; width: auto !important; position: relative; z-index: 1; } /* !important: Elementor column inline width */
	.afam-hdr-right > .elementor-widget-wrap { padding: 0 !important; }

	/* top bar: 54 px, content starts after the diagonal */
	.afam-hdr-top { background: var(--afam-hdr-bg); min-height: var(--afam-hdr-top); height: var(--afam-hdr-top); padding: 0 24px 0 calc(var(--afam-hdr-reach) + 24px) !important; }
	.afam-hdr-top > .elementor-container { height: 100%; align-items: center; max-width: none; }
	.afam-hdr-top .elementor-widget-social-icons .elementor-social-icon { --icon-padding: 0.6em; }

	/* main bar: 76 px, menu + CTA centred group right of the arrow tip */
	.afam-hdr-nav { min-height: var(--afam-hdr-main); height: var(--afam-hdr-main); padding: 0 24px 0 calc(var(--afam-hdr-tip) + 12px) !important; background: transparent; }
	.afam-hdr-nav > .elementor-container { height: 100%; align-items: center; justify-content: center; flex-wrap: nowrap; max-width: none; gap: 0; }
	.afam-hdr-nav > .elementor-container > .afam-hdr-menu { flex: 0 1 auto; width: auto !important; }
	.afam-hdr-nav > .elementor-container > .afam-hdr-actions { flex: 0 0 auto; width: auto !important; }
	.afam-hdr-menu > .elementor-widget-wrap,
	.afam-hdr-actions > .elementor-widget-wrap { padding: 0 !important; flex-wrap: nowrap; align-items: center; }
	.afam-hdr-actions > .elementor-widget-wrap { gap: 12px; margin-left: 14px; }
	.afam-hdr-actions .elementor-widget-gimont_elementor_ova_search_popup { margin: 0 !important; padding-left: 12px !important; }
	.afam-hdr-actions .elementor-widget { width: auto; margin: 0; }

	/* dropdown panel: white, radius 14, soft shadow, items 14/600 */
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu {
		left: 0; top: 100%; min-width: 270px; margin: 0; padding: 10px; background: #fff; border: 1px solid rgba(8, 76, 44, 0.1); border-bottom: 4px solid var(--afam-orange-500);
		border-radius: 14px; box-shadow: 0 24px 64px rgba(8, 76, 44, 0.18);
	}
	.afam-hdr-menu .main-navigation ul.menu .sub-menu li.menu-item > a { display: block; padding: 10px 12px; border-radius: 10px; background: transparent; color: var(--afam-green-900); font-family: var(--afam-font-body); font-size: 14px; font-weight: 600; line-height: 1.35; text-transform: none; }
	.afam-hdr-menu .main-navigation ul.menu .sub-menu li.menu-item:is(.current-menu-item, .current-menu-ancestor) > a { background: var(--afam-surface); box-shadow: inset 3px 0 0 var(--afam-orange-500); }
	.afam-hdr-menu .main-navigation ul.menu .sub-menu li.menu-item > a:is(:hover, :focus-visible) { background: var(--afam-surface); color: var(--afam-green-900); }
}

/* Join AFAM (outline) only where it fits: from 1500 px; the menu also has it under Membership */
/* DES-032: measured at 1400 px box, six items + both buttons + search need the compact type below; Join shows from 1440 px (viewport) */
@media (max-width: 1439px) { .afam-hdr .afam-hdr-join { display: none; } }

/* From 1366 px: compact menu type (15 px, 10 px side padding) so the items, buttons and search keep a 24 px minimum gap */
@media (min-width: 1366px) {
	.afam-hdr-menu .main-navigation .menu > li > a { font-size: 15px; padding-left: 10px; padding-right: 10px; }
	.afam-hdr-actions > .elementor-widget-wrap { margin-left: 32px; } /* DES-032: at least 24 px between the last item and the first button */
	.afam-hdr-actions .elementor-widget-gimont_elementor_ova_search_popup > .elementor-widget-container { margin: 0 0 0 4px !important; } /* !important: widget margin set in the Elementor data */
}

/* 1025 to 1365 px: the menu does not fit in one line, so the compact (burger) menu is used while keeping the desktop shapes */
@media (min-width: 1025px) and (max-width: 1365px) {
	.afam-hdr { --afam-hdr-brand-w: 165px; }
	.afam-hdr-menu .elementor-widget-gimont_elementor_menu_nav { display: none !important; } /* !important: theme hides by Elementor class */
	.afam-hdr-menu .elementor-widget.mob-menu { display: block !important; }
	.afam-hdr-nav > .elementor-container { justify-content: flex-end; }
}

/* ---------- sticky: shrink to one 72 px bar (spec) ---------- */
@media (min-width: 1025px) {
	/* DES-031: the sticky bar keeps the identity: a slim #336600 band on top, the white logo panel with its chevron, scaled down */
	.afam-hdr { transition: background-color 200ms ease; }
	.afam-hdr.active_sticky { --afam-hdr-brand-w: 150px; --afam-hdr-top: 16px; --afam-hdr-main: 68px; --afam-hdr-reach: 24px; --afam-hdr-tip: 18px; }
	.afam-hdr.active_sticky .afam-hdr-top { height: var(--afam-hdr-top); min-height: var(--afam-hdr-top); overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; } /* !important: base rule sets the padding with !important */
	.afam-hdr.active_sticky .afam-hdr-top > .elementor-container { visibility: hidden; opacity: 0; }
	.afam-hdr.active_sticky .afam-hdr-nav { height: var(--afam-hdr-main); min-height: var(--afam-hdr-main); }
	.afam-hdr-brand::before { transition: clip-path 240ms ease; }
	.afam-hdr-top, .afam-hdr-nav { transition: height 240ms ease, min-height 240ms ease; }
}

/* ---------- tablet and mobile (up to 1024 px): one compact bar, no shapes ---------- */
@media (max-width: 1024px) {
	.afam-hdr-top { display: none !important; } /* !important: Elementor section display */
	.afam-hdr > .elementor-container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
	.afam-hdr > .elementor-container > .afam-hdr-brand { flex: 0 0 auto; width: auto !important; padding: 8px 12px !important; }
	.afam-hdr > .elementor-container > .afam-hdr-right { flex: 1 1 auto; width: auto !important; }
	.afam-hdr-brand img.logo_mobile,
	.afam-hdr-brand img.logo_desktop { width: 56px; height: 56px; object-fit: contain; }
	.afam-hdr-nav > .elementor-container { flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 8px; }
	.afam-hdr-nav > .elementor-container > .afam-hdr-menu,
	.afam-hdr-nav > .elementor-container > .afam-hdr-actions { flex: 0 0 auto; width: auto !important; }
	.afam-hdr-menu > .elementor-widget-wrap,
	.afam-hdr-actions > .elementor-widget-wrap { padding: 0 !important; flex-wrap: nowrap; align-items: center; }
	.afam-hdr .afam-hdr-join { display: none; }
	.afam-hdr .afam-hdr-cta .elementor-button { min-height: 44px; padding: 10px 14px; }
}
@media (max-width: 480px) {
	.afam-hdr .afam-hdr-cta .elementor-button { padding: 10px 12px; font-size: 13px; }
}

/* Contact Us moves to the top-bar links on wide desktop (the full menu still lists it in the compact menu) */
@media (min-width: 1366px) {
	.afam-hdr-menu .main-navigation .menu > li:has(> a[href$="/contact/"]) { display: none; }
}
@media (max-width: 1365px) { .afam-hdr-links .afam-hdr-link-contact { display: none; } }

/* Logo sizes (!important: the Ovatheme logo widget prints fixed widths) */
.afam-hdr-brand img.logo_desktop { width: 100px !important; height: 100px !important; object-fit: contain; }
.afam-hdr.active_sticky .afam-hdr-brand img.logo_desktop { width: 56px !important; height: 56px !important; }
@media (max-width: 1024px) {
	.afam-hdr-brand img.logo_mobile,
	.afam-hdr-brand img.logo_desktop { width: 48px !important; height: 48px !important; object-fit: contain; }
	.afam-hdr-brand > .elementor-widget-wrap { flex-wrap: nowrap; padding: 0 !important; }
	.afam-hdr-brand .elementor-widget { width: auto !important; margin: 0 !important; }
}

/* Compact header: force one row (Elementor sets wrap and 100 % column widths at these sizes) */
@media (max-width: 1024px) {
	.afam-hdr > .elementor-container { flex-wrap: nowrap !important; } /* !important: Elementor mobile column wrapping */
	.afam-hdr > .elementor-container > .afam-hdr-brand { flex: 0 0 72px !important; width: 72px !important; max-width: 72px; }
	.afam-hdr > .elementor-container > .afam-hdr-right { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
	.afam-hdr-nav > .elementor-container { flex-wrap: nowrap !important; }
}
@media (max-width: 1024px) {
	.afam-hdr-menu .elementor-widget.mob-menu > .elementor-widget-container { margin: 0 !important; } /* !important: Elementor widget margin from the old header */
}
@media (max-width: 480px) {
	.afam-hdr-actions .elementor-widget-gimont_elementor_ova_search_popup { display: none; }
}
@media (max-width: 1024px) {
	.afam-hdr-brand img.logo_mobile,
	.afam-hdr-brand img.logo_desktop { position: static !important; margin: 0 !important; left: auto !important; transform: none !important; } /* !important: the theme positions the mobile logo with fixed offsets */
}

/* Footer copyright link: orange on dark green failed contrast (axe), use white */
footer a[target="_blank"][rel="noopener"],
.ova-footer a[target="_blank"][rel="noopener"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Sticky bar: exactly 72 px */
@media (min-width: 1025px) {
	.afam-hdr.active_sticky .afam-hdr-brand > .elementor-widget-wrap { padding: 0 !important; }
	.afam-hdr.active_sticky .afam-hdr-brand img.logo_desktop,
	.afam-hdr.active_sticky .afam-hdr-brand img.logo_sticky { width: 52px !important; height: 52px !important; }
	/* DES-031: the scaled-down logo inside the panel (the panel keeps its width of 150 px) */
	.afam-hdr.active_sticky .afam-hdr-brand img.logo_desktop { width: 60px !important; height: 60px !important; }
}
.elementor-17318 a[target="_blank"][rel="noopener"] { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; } /* !important: footer builder sets its own link colour */

/* =====================================================================
   U-011 revision 1 (DES-015 to DES-020, DES-028 to DES-030)
   ===================================================================== */

/* DES-016: organisation title in the top bar (white, prominent; shrinks, then hides) */
.afam-hdr-contact li.afam-hdr-title { font-family: var(--afam-font-head, inherit); font-size: 17px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1279px) {
	.afam-hdr-contact li.afam-hdr-title { font-size: 14px; }
	.afam-hdr-title__abbr { display: none; }
}
@media (min-width: 1025px) and (max-width: 1099px) { .afam-hdr-contact li.afam-hdr-title { display: none; } }

/* DES-017: top-bar links as quiet pills with icons and separators; Donate highlighted */
.afam-hdr-links { gap: 4px; }
.afam-hdr-links li { display: inline-flex; align-items: center; }
.afam-hdr-links li + li:not(.afam-hdr-links__donate)::before { content: ""; width: 1px; height: 16px; margin: 0 6px; background: rgba(255, 255, 255, 0.35); }
.afam-hdr-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color var(--afam-transition), color var(--afam-transition); }
.afam-hdr-links a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.afam-hdr-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.afam-hdr-links .afam-ico { width: 16px; height: 16px; }
.afam-hdr .afam-hdr-links li.afam-hdr-links__donate { margin-left: 8px; }
.afam-hdr .afam-hdr-links li.afam-hdr-links__donate a { background: var(--afam-cta-bg); color: var(--afam-cta-fg); font-weight: 700; }
.afam-hdr .afam-hdr-links li.afam-hdr-links__donate a:is(:hover, :focus-visible) { background: var(--afam-cta-bg-hover); color: var(--afam-cta-fg-hover); }

/* DES-018 + DES-019 + DES-020: desktop only */
@media (min-width: 1025px) {
	/* boxed: content max 1400 px centred; the top-bar band and white bar stay full width */
	.afam-hdr > .elementor-container { max-width: var(--afam-hdr-box); margin-left: auto; margin-right: auto; }
	/* top bar: title takes the free space, links and social icons keep their natural width on one row */
	.afam-hdr-top > .elementor-container { flex-wrap: nowrap; }
	.afam-hdr-top > .elementor-container > .elementor-column:first-child { flex: 1 1 auto; width: auto !important; } /* !important: Elementor column inline width (70 %) */
	.afam-hdr-top > .elementor-container > .elementor-column:last-child { flex: 0 0 auto; width: auto !important; } /* !important: Elementor column inline width (30 %) */
	.afam-hdr-top > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
	.afam-hdr-top .elementor-widget { width: auto; margin: 0; }
	.afam-hdr-top .elementor-widget-social-icons .elementor-social-icon { --icon-padding: 0.5em; }
	.afam-hdr .afam-hdr-links a:is(:hover, :focus-visible) { color: #fff; } /* beats the Elementor widget hover colour */
	.afam-hdr .afam-hdr-links li.afam-hdr-links__donate a:is(:hover, :focus-visible) { color: var(--afam-cta-fg-hover); }
	.afam-hdr .afam-hdr-top .afam-hdr-links a { color: #fff; }
	.afam-hdr .afam-hdr-top .afam-hdr-links li.afam-hdr-links__donate a { color: var(--afam-cta-fg); }
	/* DES-020: second-level hover/focus = light tint + 3 px gold inset bar */
	.afam-hdr-menu .main-navigation ul.menu .sub-menu li.menu-item > a:is(:hover, :focus-visible) { background: var(--afam-hover-tint); box-shadow: inset 3px 0 0 var(--afam-hover-bar); color: var(--afam-green-900); }
	/* DES-019 variant B: accent border at the bottom (class on body only for the comparison screenshots) */
}

/* ---- Mobile (DES-028 to DES-030), up to 1024 px ---- */
.afam-actionbar { display: none; }
@media (max-width: 1024px) {
	/* DES-028: green bar with a white logo panel whose right edge points right (chevron) */
	.afam-hdr { background: var(--afam-hdr-bg); }
	.afam-hdr > .elementor-container > .afam-hdr-brand { flex: 0 0 92px !important; width: 92px !important; max-width: 92px; position: relative; z-index: 2; background: #fff; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding: 6px 18px 6px 10px !important; } /* !important: Elementor column padding/width */
	.afam-hdr-nav, .afam-hdr-nav > .elementor-container { background: transparent; }
	.afam-hdr .mob-menu button.menu-toggle, .afam-hdr .ova_search_popup, .afam-hdr .ova_search_popup i { color: #fff; }
	.afam-hdr .mob-menu .menu-canvas:not(.toggled) .menu-toggle::before, .afam-hdr .mob-menu .menu-canvas:not(.toggled) .menu-toggle::after, .afam-hdr .mob-menu .menu-canvas:not(.toggled) .menu-toggle span::before { background-color: #fff !important; } /* !important: theme sets the bar colour with higher specificity */
	.afam-hdr .mob-menu nav.menu-canvas nav.container-menu, .afam-hdr .mob-menu nav.menu-canvas .container-menu { background: var(--afam-green-900) !important; } /* !important: theme paints the panel orange */

	/* DES-029: off-canvas menu in the portal manual look (deep green, gold accents, accordion) */
	.afam-hdr .mob-menu nav.menu-canvas { background: var(--afam-green-900); color: #fff; }
	.afam-hdr .mob-menu nav.menu-canvas .primary-navigation ul.menu > li > a { color: #fff; font-family: var(--afam-font-body); font-size: 17px; font-weight: 600; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.afam-hdr .mob-menu nav.menu-canvas .primary-navigation ul.menu a[aria-current="page"],
	.afam-hdr .mob-menu nav.menu-canvas .primary-navigation ul.menu li.current-menu-item > a,
	.afam-hdr .mob-menu nav.menu-canvas .primary-navigation ul.menu li.current-menu-ancestor > a { box-shadow: inset 4px 0 0 var(--afam-hover-bar); background: rgba(255, 255, 255, 0.08); color: #fff; }
	.afam-hdr .mob-menu nav.menu-canvas ul.sub-menu { background: rgba(0, 0, 0, 0.2); }
	.afam-hdr .mob-menu nav.menu-canvas ul.sub-menu a { color: #fff; font-size: 15px; font-weight: 500; padding: 11px 20px 11px 32px; }
	.afam-hdr .mob-menu nav.menu-canvas .primary-navigation a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.14); color: #fff; }
	.afam-hdr .mob-menu nav.menu-canvas button.dropdown-toggle { color: #fff; min-width: 44px; min-height: 44px; }
	.afam-hdr .mob-menu nav.menu-canvas .close-menu, .afam-hdr .mob-menu nav.menu-canvas button.menu-toggle { color: #fff; }
	.afam-hdr .mob-menu nav.menu-canvas li:not(.menu-item-has-children) > button.dropdown-toggle, .afam-hdr .mob-menu nav.menu-canvas button.dropdown-toggle ~ button.dropdown-toggle { display: none; } /* theme adds a toggle to every item and twice per parent */
	.afam-mm-footer { padding: 18px 20px 28px; }
	.afam-mm-search { display: flex; margin: 0 0 14px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
	.afam-mm-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px; border: 0; background: transparent; color: #fff; font-size: 16px; }
	.afam-mm-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.8); }
	.afam-mm-search button { flex: 0 0 48px; border: 0; background: transparent; color: var(--afam-gold-300, #e6d27a); cursor: pointer; display: flex; align-items: center; justify-content: center; }
	.afam-mm-search:focus-within, .afam-mm-search button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
	.afam-mm-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.afam-mm-cta .afam-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
	.afam-mm-cta .afam-btn--cta { background: var(--afam-cta-bg); color: var(--afam-cta-fg); }
	.afam-mm-cta .afam-btn--cta-outline { border: 2px solid var(--afam-hover-bar); color: #fff; }
	.afam-mm-cta .afam-btn--outline-light { border: 2px solid rgba(255, 255, 255, 0.7); color: #fff; }
	.afam-mm-links { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); list-style: none; }
	.afam-mm-links a { color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; display: inline-block; }

	/* DES-030: sticky action bar */
	.afam-actionbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 3px solid var(--afam-hover-bar); box-shadow: 0 -4px 16px rgba(8, 76, 44, 0.16); padding-bottom: env(safe-area-inset-bottom); }
	.afam-actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px; color: var(--afam-green-900); font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; }
	.afam-actionbar a:is(:hover, :focus-visible) { background: var(--afam-hover-tint); }
	.afam-actionbar a:focus-visible { outline: 3px solid var(--afam-green-500); outline-offset: -3px; }
	.afam-actionbar a:nth-child(3) { color: var(--afam-green-900); background: var(--afam-cta-bg); } /* Donate stands out */
	html.afam-menu-open .afam-actionbar { display: none; }
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

@media (min-width: 1366px) { .afam-hdr { --afam-hdr-brand-w: 204px; } .afam-hdr.active_sticky { --afam-hdr-brand-w: 150px; } }

/* DES-031 on tablet and mobile: the sticky bar keeps the green band and the chevron logo panel */
@media (max-width: 1024px) {
	.afam-hdr.header_sticky.active_sticky, .afam-hdr.mobile_sticky.active_sticky { background-color: var(--afam-hdr-bg) !important; } /* !important: the theme paints the sticky state white */
	.afam-hdr.active_sticky > .elementor-container > .afam-hdr-brand { background: #fff; }
}

/* =====================================================================
   U-013 revision 3 (DES-040 to DES-045)
   ===================================================================== */
@media (min-width: 1025px) {
	/* DES-041: no full-width green behind the logo panel; the band lives inside the 1400 px box only (the Elementor top-bar section) */
	.afam-hdr { background: #fff; }

	/* DES-044: panels are class-driven (front.js): hidden unless .afam-open, one at a time, closed on leave, focusout, Esc and outside click */
	.afam-hdr-menu .main-navigation ul.menu li.menu-item > .dropdown-menu, .afam-hdr-menu .main-navigation ul.menu li.menu-item > ul.sub-menu { visibility: hidden !important; opacity: 0 !important; pointer-events: none; transition: opacity 0.2s ease, top 0.2s ease, visibility 0s linear 0.2s; } /* !important: the theme opens panels with :hover */
	.afam-hdr-menu .main-navigation ul.menu li.menu-item.afam-open > .dropdown-menu, .afam-hdr-menu .main-navigation ul.menu li.menu-item.afam-open > ul.sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto; transition: opacity 0.2s ease, top 0.2s ease, visibility 0s; } /* !important: see above */

	/* DES-042 (D-39 bottom): accent border at the bottom for the mega menu and the regular dropdown */
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu, .afam-hdr-menu .main-navigation .ova-mega-menu.sub-menu.dropdown-menu { border-top: 1px solid rgba(8, 76, 44, 0.1); border-bottom: 4px solid var(--afam-orange-500); border-radius: 14px; }

	/* DES-043: the mega menu stays inside the header box: left edge on the first menu item, right edge on the box edge (width set by front.js) */
	.afam-hdr-menu .main-navigation .ova-mega-menu.sub-menu.dropdown-menu { left: 0 !important; right: auto !important; width: var(--afam-mega-w, 900px) !important; min-width: 0 !important; max-width: var(--afam-mega-w, 900px) !important; box-sizing: border-box; } /* !important: the mega menu plugin sets its own width */

	/* DES-044: regular dropdown in the registrar.test pattern (padded panel, hairline separators, filled hover), AFAM colours */
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) { top: 110%; min-width: 250px; padding: 12px; box-shadow: 0 10px 40px rgba(8, 76, 44, 0.14); }
	.afam-hdr-menu .main-navigation ul.menu > li.afam-open > ul.sub-menu:not(.ova-mega-menu) { top: 100%; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li { margin: 0; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li:not(:last-child) { border-bottom: 1px solid #e3ebdd; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li > a { display: block; padding: 8px 16px; border-radius: 6px; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li > a:is(:hover, :focus-visible) { background: var(--afam-green-600); box-shadow: none; color: #fff; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li:is(.current-menu-item, .current-menu-ancestor) > a { background: transparent; box-shadow: inset 3px 0 0 var(--afam-hover-bar); }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) > li:is(.current-menu-item, .current-menu-ancestor) > a:is(:hover, :focus-visible) { background: var(--afam-green-600); color: #fff; }

	/* DES-040: the desktop sticky bar looks like the mobile one: #336600 band carrying the white chevron panel, menu and buttons on the same compact row */
	.afam-hdr.active_sticky { --afam-hdr-brand-w: 150px; --afam-hdr-top: 0px; --afam-hdr-main: 68px; background-color: var(--afam-hdr-bg) !important; } /* !important: the theme paints the sticky state white */
	.afam-hdr.active_sticky .afam-hdr-top { display: none; }
	.afam-hdr.active_sticky .afam-hdr-brand { filter: none; }
	.afam-hdr.active_sticky .afam-hdr-brand::before { right: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
	.afam-hdr.active_sticky .afam-hdr-nav { height: var(--afam-hdr-main); min-height: var(--afam-hdr-main); padding-left: 30px !important; } /* !important: base rule sets padding with !important */
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu > li > a { color: #fff; }
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu > li > a:hover,
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu > li.afam-open > a { color: var(--afam-gold-300); }
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu > li.current-menu-item > a,
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu > li.current-menu-ancestor > a { color: #fff !important; text-decoration-color: var(--afam-gold-500); } /* !important: base active rule is !important */
	.afam-hdr.active_sticky .afam-hdr-menu .main-navigation .menu a:focus-visible { outline-color: #fff; }
	.afam-hdr.active_sticky .afam-hdr-join .elementor-button { border-color: #fff; color: #fff; }
	.afam-hdr.active_sticky .afam-hdr-join .elementor-button:hover { background: #fff; color: var(--afam-green-900); }
	.afam-hdr.active_sticky .afam-hdr-actions .elementor-widget-gimont_elementor_ova_search_popup { --afam-ring: #fff; }
}

/* DES-045: page title band under the header on every page that is not the home page */
.afam-pagehead { background: var(--afam-green-900); color: #fff; }
.afam-pagehead__inner { max-width: var(--afam-hdr-box, 1400px); margin: 0 auto; padding: 36px 24px 32px; }
.afam-pagehead .afam-pagehead__crumbs { margin: 0 0 8px; font-size: 0.8125rem; letter-spacing: 0.04em; color: #dfe9d6; }
.afam-pagehead .afam-pagehead__crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.afam-pagehead .afam-pagehead__crumbs a:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }
.afam-pagehead .afam-pagehead__title { margin: 0; color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.2; }
.afam-pagehead { border-bottom: 4px solid var(--afam-gold-500); }
@media (max-width: 1024px) { .afam-pagehead__inner { padding: 28px 16px 24px; } }

/* DES-044: panels start at the bottom edge of the header band (gap measured by front.js), level-3 arrow on the right */
@media (min-width: 1025px) {
	.afam-hdr-menu .main-navigation ul.menu > li > .dropdown-menu, .afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu { top: calc(100% + var(--afam-panel-gap, 0px)) !important; } /* !important: the theme sets top with its hover rule */
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) button.dropdown-toggle { display: none; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) li.menu-item-has-children > a::after { content: "\203A"; float: right; margin-left: 18px; font-weight: 700; }
}

/* the theme page title band is replaced by the AFAM page head */
body:has(.afam-pagehead) header.page-header { display: none; }
@media (min-width: 1025px) {
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
	.afam-hdr-menu .main-navigation ul.menu > li > ul.sub-menu:not(.ova-mega-menu) li.menu-item-has-children > a::after { float: none; margin-left: 0; }
}

/* DES-048 (U-014): mega-menu column links share the DES-020 hover and focus style (tint + 3 px inset gold bar) */
@media (min-width: 1025px) {
	.afam-hdr-menu .main-navigation ul.menu ul.ova-mega-menu li > div > a { display: block; border-radius: 4px; transition: background-color 120ms ease, box-shadow 120ms ease; }
	.afam-hdr-menu .main-navigation ul.menu ul.ova-mega-menu li > div > a:is(:hover, :focus-visible) { background: var(--afam-hover-tint); box-shadow: inset 3px 0 0 var(--afam-hover-bar); color: var(--afam-green-900); }
	.afam-hdr-menu .main-navigation ul.menu ul.ova-mega-menu li > div > a:focus-visible { outline: 2px solid var(--afam-green-900); outline-offset: -2px; }
}

/* U-019 #3: nested dropdown items (AFDW pages) open inline under their parent in the desktop panel, so they are reachable with mouse and keyboard. */
@media (min-width: 1025px) {
	.primary-navigation .sub-menu .menu-item-has-children > .sub-menu { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: transparent !important; border: 0 !important; min-width: 0 !important; width: auto !important; margin: 2px 0 6px 14px !important; padding: 0 0 0 12px !important; border-left: 3px solid #cbae2d !important; }
	.primary-navigation .sub-menu .menu-item-has-children > .sub-menu a { padding: 6px 10px !important; font-size: .95em; }
	.primary-navigation .sub-menu .menu-item-has-children > a { font-weight: 700; }
	.primary-navigation .sub-menu .menu-item-has-children > a::after, .primary-navigation .sub-menu .menu-item-has-children > a .sub-arrow { display: none !important; }
}