/**
 * COGNO native header & footer.
 * Tokens live in :root so sizes (nav text, icons, buttons) stay consistent and are tunable in
 * one place — see the "Header & Footer" section of /cogno-style-guide/.
 */

:root {
	/* Header */
	--cogno-header-h: 72px;
	--cogno-header-bg: #ffffff;
	--cogno-header-fg: var(--cogno-ink, #324a6d);
	--cogno-header-radius: var(--radius-sheet, 40px);  /* bottom-corner rounding (top is flush to viewport) */
	--cogno-header-shadow: 0 6px 22px rgba(0, 31, 83, .08);
	--cogno-header-maxw: calc(var(--container-max) + 2 * var(--container-pad));  /* header content aligns to the section grid */
	--cogno-z-header: 1000;
	--cogno-border-width: 1.5px;        /* one consistent border width for all controls */
	/* Nav */
	--cogno-nav-size: 14px;
	--cogno-nav-weight: 400;
	--cogno-nav-gap: 26px;
	--cogno-nav-color: #1b2a4a;        /* dark header text (overrides the kit's blue link colour) */
	--cogno-nav-hover: var(--cogno-blue, #1f58e6);
	/* Icons */
	--cogno-icon-size: var(--icon-md);
	--cogno-icon-stroke: 1.75;   /* Lucide line-icon thickness (design-system token) */
	--cogno-iconbtn: 42px;
	/* Footer */
	--cogno-footer-bg: var(--cogno-purple, #393292);
	--cogno-footer-fg: #d8d6f3;
	--cogno-footer-fg-strong: #ffffff;
	--cogno-footer-radius: var(--radius-sheet, 40px);
	--cogno-footer-col-gap: 48px;
	--cogno-footer-pull: 70px;        /* negative margin: lift the footer over trailing whitespace */
	--cogno-footer-heading-weight: 500;  /* footer section headings (Quick Links etc.) */
	--cogno-footer-heading-size: 16px;
	/* Layout */
	--cogno-layout-maxw: 1200px;
	--cogno-burger-bp: 1024px; /* below this = mobile menu — Elementor Tablet Portrait breakpoint */
}

/* ====================================================================== HEADER */
/* Full-width white bar, flush to the top; only the BOTTOM corners are rounded so it reads as
   stuck to the top of the viewport (no top gap). Content is contained + centered. */
.cogno-header {
	background: transparent;       /* contained white bar sits inside — NOT full width */
	color: var(--cogno-header-fg);
	font-family: var(--cogno-font, sans-serif);
	position: relative;            /* positioning context for the search dropdown */
	max-width: var(--cogno-header-maxw);   /* grid width — aligns header + dropdowns with .cogno-container sections */
	margin: 0 auto;
	box-sizing: border-box;
}
.cogno-header--sticky {
	position: sticky;
	top: 0;
	z-index: var(--cogno-z-header);
	padding-inline: var(--container-pad);
}
.cogno-header__inner,
.cogno-footer__inner {
	max-width: var(--cogno-layout-maxw);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 32px);
	padding-right: clamp(16px, 4vw, 32px);
}
.cogno-header__bar {
	padding: 0 var(--container-pad);       /* content inset to grid; width comes from .cogno-header */
	box-sizing: border-box;
	background: var(--cogno-header-bg);
	box-shadow: var(--cogno-header-shadow);
	border-bottom-left-radius: var(--cogno-header-radius);  /* bottom corners only; flush at top */
	border-bottom-right-radius: var(--cogno-header-radius);
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: var(--cogno-header-h);
}

/* Lucide thin line icons — thickness driven by one design-system token */
.cogno-ico {
	width: var(--cogno-icon-size);
	height: var(--cogno-icon-size);
	stroke-width: var(--cogno-icon-stroke);
	display: inline-block;
	vertical-align: middle;
	flex: none;
}
.cogno-sub-toggle .cogno-ico { width: 14px; height: 14px; transition: transform .2s ease; }
/* Chevron flips when its submenu is open (clear open/close affordance). */
.cogno-sub-toggle[aria-expanded="true"] .cogno-ico { transform: rotate(180deg); }
/* When the mobile menu is open, square the header's bottom corners so the panel connects flush
   (the 40px rounding otherwise leaves little gaps left/right at the junction). */
.cogno-header.cogno-menu-open .cogno-header__bar {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.cogno-footer__addr .cogno-ico { color: var(--cogno-footer-fg-strong); }

/* Defend against the Elementor kit's global <button> styles. The kit applies
   `.elementor-kit-NN button { padding:12px 24px; border-radius:40px; background:var(--c-purple) }` which
   leaks onto our header buttons — so we force size/padding/radius/colour with !important. */
.cogno-header button,
.cogno-mobile-nav button {
	font-family: inherit;
}
.cogno-burger {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.cogno-sub-toggle {
	padding: 6px !important;
	min-width: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	/* the kit turns button text white on hover/focus — keep our chevron visible */
	color: var(--cogno-ink-soft, #46586f) !important;
}
.cogno-sub-toggle:hover,
.cogno-sub-toggle:focus,
.cogno-sub-toggle[aria-expanded="true"] {
	color: var(--cogno-nav-hover, var(--c-blue)) !important;
	background: none !important;
}
.cogno-iconbtn {
	width: var(--cogno-iconbtn) !important;
	height: var(--cogno-iconbtn) !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--cogno-nav-color, #1b2a4a) !important; /* fixes the invisible (white-on-white) icon */
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line-strong, #cfd9e6) !important;
	box-shadow: none !important;
}
.cogno-iconbtn:hover {
	color: var(--cogno-nav-hover) !important;
	border-color: var(--cogno-nav-hover) !important;
	background: #fff !important;
}
.cogno-nav__list a,
.cogno-iconbtn,
.cogno-btn { /* belt-and-braces: these carry their own colour, not the kit's */
	-webkit-font-smoothing: antialiased;
}

/* Logo */
.cogno-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}
.cogno-header__logo .cogno-logo__img,
.cogno-header__logo img {
	height: 44px;
	width: auto;
	display: block;
}
.cogno-logo__text {
	font-weight: var(--weight-semibold);
	font-size: 20px;
	color: var(--c-purple);
}

/* Desktop nav — centered between logo and actions */
.cogno-nav--desktop {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-self: stretch;   /* fill the header-bar height so items can reach its bottom edge */
}
.cogno-nav__list {
	display: flex;
	align-items: stretch;  /* was center — let top-level items fill the bar height (see `> li` below) */
	gap: var(--cogno-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cogno-nav__list li {
	position: relative;
	margin: 0;
}
/* Top-level items span the full bar height so their dropdown (`.sub-menu`, top:100%) hangs from
   the bottom edge of .cogno-header__bar, not from mid-bar. The <a> stays vertically centred
   inside the tall item, so the link text and hover underline don't move. */
.cogno-nav__list > li {
	display: flex;
	align-items: center;
}
.cogno-nav__list a {
    font-family: "Figtree", Sans-serif;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--cogno-nav-size);
	font-weight: var(--cogno-nav-weight);
	line-height: 1;
	color: var(--cogno-nav-color, #1b2a4a) !important; /* beat the Elementor kit's link colour */
	text-decoration: none;
	padding: 8px 0;
	white-space: nowrap;
	position: relative;
}
.cogno-nav__list a:hover,
.cogno-nav__list .current-menu-item > a,
.cogno-nav__list .current_page_item > a {
	color: var(--cogno-nav-hover) !important;
}
/* Animated underline on hover / current */
.cogno-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--cogno-nav-hover);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .2s ease;
}
.cogno-nav__list > li > a:hover::after,
.cogno-nav__list > li.current-menu-item > a::after,
.cogno-nav__list > li.current_page_item > a::after {
	transform: scaleX(1);
}
.cogno-nav__list .sub-menu a::after { content: none; }
/* Dropdown toggle (injected by JS for items with children) */
.cogno-nav__list .cogno-sub-toggle {
	background: none;
	border: 0;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: inherit;
	font-size: 11px;
	line-height: 1;
}
.cogno-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: max-content;   /* hug the widest item — no fixed-width empty space to the right of short labels */
	min-width: 150px;     /* gentle floor so a single short label doesn't look cramped */
	max-width: 260px;     /* cap so an unusually long label wraps instead of overflowing */
	background: #fff;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line, #e3e9f1);
	border-radius: var(--cogno-radius, 12px);
	box-shadow: 0 12px 30px rgba(0, 31, 83, .12);
	list-style: none;
	margin: 0;
	padding: 8px;
	display: none;
	z-index: 5;
}
.cogno-nav__list li:hover > .sub-menu,
.cogno-nav__list li.is-open > .sub-menu {
	display: block;
}
.cogno-nav__list .sub-menu a {
	padding: 9px 12px;
	border-radius: 8px;
	white-space: normal;
}
.cogno-nav__list .sub-menu a:hover {
	background: var(--cogno-bg-soft, #eef4ff);
}

/* Header actions */
.cogno-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex: 0 0 auto;
}
.cogno-header__buttons {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cogno-iconbtn {
	width: var(--cogno-iconbtn);
	height: var(--cogno-iconbtn);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line-strong, #cfd9e6);
	border-radius: 50%;
	background: #fff;
	color: var(--cogno-header-fg);
	cursor: pointer;
	font-size: var(--cogno-icon-size);
}
.cogno-iconbtn:hover {
	color: var(--cogno-nav-hover);
	border-color: var(--cogno-nav-hover);
}

/* Buttons: the ONE .cogno-btn base + every variant (--primary/--ghost/--outline/
   --cta/--outline-dark/--outline-light/--pill) live in cogno-core.css. Header
   buttons are plain design-system buttons — nothing header-specific here. */

/* Search panel — floating dropdown, right-aligned under the header (absolute = no layout shift) */
.cogno-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 6;
	pointer-events: none;          /* the band is click-through; the card re-enables below */
}
.cogno-search-panel .cogno-header__inner {
	max-width: var(--cogno-header-maxw);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}
.cogno-search-panel form {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	width: min(360px, calc(100vw - 48px));
	margin-top: 6px;
	padding: 10px;
	background: #fff;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line, #e3e9f1);
	border-radius: var(--cogno-header-radius, 24px);   /* match the header */
	box-shadow: 0 16px 40px rgba(0, 31, 83, .16);
}
.cogno-search-panel input[type="search"],
.cogno-search-panel .cogno-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px !important;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line-strong, #cfd9e6) !important;
	border-radius: var(--cogno-radius-pill, 999px) !important;
	font-size: 15px;
	background: #fff !important;
}
/* Compact icon submit (no "Search" text → no empty space). Overrides the kit's button styling. */
.cogno-search-panel .cogno-searchform__submit {
	flex: none;
	width: 44px;
	height: 44px;
	min-width: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: var(--c-purple) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background .15s ease;
}
.cogno-search-panel .cogno-searchform__submit:hover { background: #2b246f !important; }

/* ===================================================================== MOTION
   Header chrome motion, routed through the shared --ease-out / --dur-* tokens
   (cogno-core.css :root). The header bar itself no longer animates on load — it is
   persistent chrome seen on every page, so an entrance replayed on every navigation
   was noise, not signal. The dropdown panels fade + slide in AND out via
   @starting-style + allow-discrete (degrades to instant show/hide where unsupported)
   and use transitions, so they retarget cleanly when toggled rapidly. */
.cogno-search-panel,
.cogno-mobile-search-panel,
.cogno-mobile-nav {
	transition: opacity var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out),
	            display var(--dur-base) allow-discrete;
}
.cogno-search-panel[hidden],
.cogno-mobile-search-panel[hidden],
.cogno-mobile-nav[hidden] { opacity: 0; transform: translateY(-10px); }
@starting-style {
	.cogno-search-panel:not([hidden]),
	.cogno-mobile-search-panel:not([hidden]),
	.cogno-mobile-nav:not([hidden]) { opacity: 0; transform: translateY(-10px); }
}

/* Desktop submenu — hover/tap reveal, one-directional, scales down from the top. */
@keyframes cogno-slide-down { from { opacity: 0; transform: translateY(-8px); } }
.cogno-nav__list li:hover > .sub-menu,
.cogno-nav__list li.is-open > .sub-menu { animation: cogno-slide-down var(--dur-base) var(--ease-out) both; }
.cogno-iconbtn,
.cogno-sub-toggle { transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }

/* Burger (hidden on desktop — !important defeats the kit's global button display) */
.cogno-burger {
	display: none !important;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}
.cogno-burger__box {
	position: relative;
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto;
	background: var(--cogno-header-fg);
}
.cogno-burger__box::before,
.cogno-burger__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 26px;
	height: 2px;
	background: var(--cogno-header-fg);
	transition: transform .2s ease, top .2s ease;
}
.cogno-burger__box::before { top: -8px; }
.cogno-burger__box::after { top: 8px; }
.cogno-burger[aria-expanded="true"] .cogno-burger__box { background: transparent; }
.cogno-burger[aria-expanded="true"] .cogno-burger__box::before { top: 0; transform: rotate(45deg); }
.cogno-burger[aria-expanded="true"] .cogno-burger__box::after { top: 0; transform: rotate(-45deg); }
.cogno-burger__line { display: none; }

/* Mobile nav panel — solid card that OVERLAYS the page (absolute), never pushes content down */
.cogno-mobile-nav {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 5;
	background: #fff;
	box-shadow: 0 16px 40px rgba(0, 31, 83, .16);
	border-bottom-left-radius: var(--cogno-header-radius);
	border-bottom-right-radius: var(--cogno-header-radius);
	padding: 8px clamp(16px, 4vw, 32px) 20px;
	max-height: calc(100vh - var(--cogno-header-h));
	overflow-y: auto;
}
.cogno-mobile-nav__list,
.cogno-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cogno-mobile-nav__list a {
	display: block;
	padding: 12px 4px;
	font-size: 16px;
	font-weight: var(--weight-medium);
	color: var(--cogno-nav-color, #1b2a4a) !important; /* beat the kit's blue link colour */
	text-decoration: none;
	border-bottom: 1px solid var(--cogno-line, #e3e9f1);
}
.cogno-mobile-nav__list .sub-menu {
	display: none;
	padding-left: 16px;
}
.cogno-mobile-nav__list li.is-open > .sub-menu { display: block; }
/* Sub-items: lighter + smaller so they read as children, not top-level items. */
.cogno-mobile-nav__list .sub-menu a {
	font-size: 15px;
	font-weight: 400;
	color: var(--cogno-ink-soft, #46586f) !important;
}
/* Each parent item anchors its own chevron at the top-right of its row (no float — float landed
   on the wrong row and only settled after a reflow). */
.cogno-mobile-nav__list .menu-item-has-children { position: relative; }
.cogno-mobile-nav__list .cogno-sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 52px;
	height: 47px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--cogno-ink-soft, #46586f);
}
.cogno-mobile-nav__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.cogno-mobile-nav__actions .cogno-header__buttons {
	flex-wrap: wrap;
	gap: 10px;
}

/* Mobile actions group (search icon + burger) — desktop hides it; the desktop nav/actions own search there. */
.cogno-mobile-actions { display: none; }

/* Header collapses to the mobile menu at Elementor's Tablet Portrait breakpoint (1024). */
@media (max-width: 1024px) {
	.cogno-nav--desktop,
	.cogno-header__actions { display: none !important; }
	.cogno-mobile-actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
	.cogno-mobile-actions .cogno-burger { display: inline-flex !important; align-items: center; justify-content: center; margin-left: 0; }
	.cogno-mobile-nav:not([hidden]) { display: block; }
}
@media (min-width: 1025px) {
	.cogno-mobile-search-panel { display: none !important; }
}

/* Laptop tier (1025–1440): between the burger breakpoint and the widescreen grid the full
   horizontal nav — six items + search + Sign In/account + Donate — is space-constrained.
   Tighten the inter-item gaps, header gaps and CTA padding, and trim the bar's inner inset,
   so everything sits comfortably on one line instead of crowding the logo / clipping Donate.
   Below 1024 the desktop nav is hidden (burger takes over), so these only affect the visible
   horizontal nav. Values scale with the two sanctioned Elementor edges (1024 + 1440). */
@media (min-width: 1025px) and (max-width: 1440px) {
	:root { --cogno-nav-gap: 16px; }
	.cogno-header__bar {
		gap: 16px;
		padding-inline: clamp(24px, 3vw, 44px);   /* was --container-pad (up to 60px) — reclaim width for the nav */
	}
	.cogno-header__actions { gap: var(--space-xs); }
	.cogno-header__actions .cogno-header__buttons { gap: var(--space-xs); }
	/* More compact CTAs (Sign In / Donate): 16px side padding vs the default 28px. */
	.cogno-header__actions .cogno-btn { padding-inline: var(--space-16); }
	/* Cap the "Hi, {name}" account label so a long member name truncates, never overflows. */
	.cogno-account__hi {
		display: inline-block;
		max-width: 14ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}
}

/* Separate mobile search panel — full-width dropdown band below the header (its own toggle). */
.cogno-mobile-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 7;
}
/* (Enter/exit motion handled by the shared panel transition in the MOTION block above.) */
/* Floating card — border + full radius all around (like the desktop search box), not a band. */
.cogno-mobile-search-panel { padding: 0 clamp(16px, 4vw, 40px); pointer-events: none; }
.cogno-mobile-search-panel .cogno-header__inner {
	max-width: var(--cogno-header-maxw);
	margin: 8px auto 0;
	padding: 12px;
	box-sizing: border-box;
	display: block;
	background: #fff;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line, #e3e9f1);
	border-radius: var(--cogno-header-radius, 24px);
	box-shadow: var(--cogno-header-shadow, 0 16px 40px rgba(0, 31, 83, .12));
	pointer-events: auto;
}

/* ====================================================================== FOOTER */
.cogno-footer {
	background: var(--cogno-footer-bg);
	color: var(--cogno-footer-fg);
	font-family: var(--cogno-font, sans-serif);
	border-top-left-radius: var(--cogno-footer-radius);
	border-top-right-radius: var(--cogno-footer-radius);
	margin-top: calc(-1 * var(--cogno-footer-pull));
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cogno-footer__inner {
	max-width: var(--cogno-layout-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1.6fr 1fr;
	gap: var(--cogno-footer-col-gap);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(32px, 4vw, 48px);
	align-items: start;
}
.cogno-footer__logo img,
.cogno-footer__logo .cogno-logo__img {
	height: 52px;
	width: auto;
	margin-bottom: 18px;
}
.cogno-footer__logo .cogno-logo__text { color: #fff; }
.cogno-footer__heading {
	color: var(--cogno-footer-fg-strong);
	font-size: var(--cogno-footer-heading-size, 16px);
	font-weight: var(--cogno-footer-heading-weight, 400) !important; /* never bold — kit/theme may force 600/700 */
	letter-spacing: .01em;
	margin: 0 0 16px;
}
.cogno-footer__contact { margin-top: var(--space-xs); }
.cogno-footer__contact address {
	font-style: normal;
	line-height: 1.7;
	font-size: 14.5px;
}
.cogno-footer__addr {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.cogno-footer__addr .cogno-ico { margin-top: 3px; }
.cogno-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
.cogno-footer__menu li { margin: 0 0 14px; break-inside: avoid; }
.cogno-footer__menu a,
.cogno-footer__contact a {
	color: var(--cogno-footer-fg) !important;   /* beat the kit's blue link colour */
	text-decoration: none;
	font-size: 14.5px;
	transition: color .15s ease, padding-left .15s ease;
}
.cogno-footer__menu a:hover {
	color: var(--cogno-footer-fg-strong) !important;
	padding-left: 4px;
}

/* Social */
.cogno-social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cogno-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cogno-footer-fg) !important;   /* brand SVG draws its own circle via currentColor */
	transition: color .15s ease, transform .15s ease;
}
.cogno-social__link svg { width: 38px; height: 38px; display: block; }
.cogno-social__link:hover { color: #fff !important; transform: translateY(-2px); }

/* Bottom bar */
.cogno-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.cogno-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 24px;
	padding-top: 18px;
	padding-bottom: 22px;
}
.cogno-footer__copy,
.cogno-footer__legal {
	margin: 0;
	font-size: 13px;
	color: var(--cogno-footer-fg);
}
.cogno-footer__legal {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.cogno-footer__legal a {
	color: var(--cogno-footer-fg);
	text-decoration: none;
}
.cogno-footer__legal a:hover { color: #fff; text-decoration: underline; }
.cogno-footer__credit { opacity: .7; font-size: 12.5px; }
.cogno-footer__credit a { color: var(--cogno-footer-fg); }

@media (max-width: 1024px) {
	.cogno-header--sticky { padding-inline: 0; }
}
@media (max-width: 900px) {
	.cogno-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
	.cogno-footer__brand { grid-column: 1 / -1; }
	/* No negative pull on mobile — there's no trailing whitespace, so it overlapped the content. */
	.cogno-footer { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 560px) {
	.cogno-footer__inner { grid-template-columns: 1fr; }
	.cogno-footer__bar-inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.cogno-header__bar,
	.cogno-burger__box::before,
	.cogno-burger__box::after,
	.cogno-btn,
	.cogno-nav__list > li > a::after,
	.cogno-search-toggle,
	.cogno-footer__menu a,
	.cogno-social__link,
	.cogno-search-panel,
	.cogno-mobile-search-panel,
	.cogno-mobile-nav { transition: none; }
	.cogno-nav__list li:hover > .sub-menu,
	.cogno-nav__list li.is-open > .sub-menu { animation: none; }
	.cogno-search-panel[hidden],
	.cogno-mobile-search-panel[hidden],
	.cogno-mobile-nav[hidden] { transform: none; }
	.cogno-btn:hover,
	.cogno-social__link:hover,
	.cogno-search-toggle:hover { transform: none; }
}

/* ============================================================ STYLE-GUIDE HELPERS
   NOTE: the design-system page chrome now lives consolidated in cogno-core.css
   (.ds*). Only the two helpers unique to this file (dark box for footer
   social + centred row + coral note) remain here. */
.ds-row--center { align-items: center; gap: 10px; }
.ds-note {
	margin: 10px 0 var(--space-md);
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--c-coral-tint, #fff4f2);
	border-left: 3px solid var(--c-coral);
	color: var(--c-ink);
}
.ds-darkbox {
	background: var(--cogno-footer-bg, var(--c-purple));
	padding: 16px;
	border-radius: 12px;
	display: inline-block;
}
.ds-darkbox .cogno-social { margin: 0; }

/* ============================================================ HEADER ACCOUNT MENU
   Shown when Header → "Sign In button behaviour" = This website and a member is logged in. */
.cogno-account { position: relative; display: inline-block; }
.cogno-account__toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cogno-account__toggle .cogno-ico { width: 16px; height: 16px; transition: transform .15s ease; }
.cogno-account:hover .cogno-account__toggle .cogno-ico,
.cogno-account:focus-within .cogno-account__toggle .cogno-ico,
.cogno-account.is-open .cogno-account__toggle .cogno-ico { transform: rotate(180deg); }
.cogno-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	/* Match the nav sub-menu dropdown exactly (size, border, radius, shadow, padding). */
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: var(--cogno-border-width, 1.5px) solid var(--cogno-line, #e3e9f1);
	border-radius: var(--cogno-radius, 12px);
	box-shadow: 0 12px 30px rgba(0, 31, 83, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 200;
}
.cogno-account:hover .cogno-account__menu,
.cogno-account:focus-within .cogno-account__menu,
.cogno-account.is-open .cogno-account__menu { opacity: 1; visibility: visible; transform: none; }
.cogno-account__menu li { margin: 0; }
.cogno-account__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: var(--cogno-nav-size);
	font-weight: var(--cogno-nav-weight);
	color: var(--cogno-nav-color, #1b2a4a);
	text-decoration: none;
}
.cogno-account__menu a:hover { background: var(--cogno-bg-soft, #eef4ff); }
/* Mobile: render the account menu inline (no absolute dropdown). */
.cogno-mobile-nav__actions .cogno-account { display: block; width: 100%; }
.cogno-mobile-nav__actions .cogno-account__menu {
	position: static; opacity: 1; visibility: visible; transform: none;
	box-shadow: none; border: none; padding: 4px 0 0; min-width: 0;
}

/* ---- Account toggle is a native <button>: normalise UA styling so it renders
   identically to the <a class="cogno-btn cogno-btn--outline"> Sign In button.
   All colours/sizing come from the design-system .cogno-btn--outline variant. */
button.cogno-btn,
.cogno-account__toggle {
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
}
.cogno-account__toggle .cogno-account__hi { font-family: var(--cogno-font); color: inherit; }
.cogno-btn.cogno-account__toggle .cogno-ico { width: 16px; height: 16px; }   /* chevron slightly smaller than the 18px button icon */
/* Menu links: beat `.elementor-kit-14 a` (Poppins + blue) so the dropdown matches the nav sub-menu. */
.cogno-account__menu a { font-family: var(--cogno-font) !important; color: var(--cogno-nav-color, #1b2a4a) !important; text-decoration: none !important; }
.cogno-account__menu a:hover { color: var(--cogno-nav-hover, var(--c-blue)) !important; }