/**
 * Avanta theme - base design system.
 * Colour, font and container variables are injected from Theme Options
 * (see inc/enqueue.php → avanta_dynamic_css). Fallbacks below keep the theme
 * usable before any option is saved.
 */
:root {
	--av-primary: #001ed2;
	--av-secondary: #0B9E6E;
	--av-accent: #F46B1B;
	--av-dark: #00003c;
	--av-navy2: #0A0A5C;
	--av-blue-light: #E9ECFF;
	--av-gold: #F5A623;
	--av-text: #0A1024;
	--av-muted: #7B84AA;
	--av-line: rgba(0,0,60,.09);
	--av-bg: #F5F6FB;
	--av-font-body: "Poppins", system-ui, sans-serif;
	--av-font-head: "DM Sans", system-ui, sans-serif;
	--av-font-size: 14px;
	--av-container: 1200px;
	--av-logo-w: 150px;
	--av-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0; font-family: var(--av-font-body); font-size: var(--av-font-size);
	line-height: 1.6; color: var(--av-text); background: #fff;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--av-font-head); line-height: 1.2; color: var(--av-dark); }
a { color: var(--av-primary); text-decoration: none; }
img { max-width: 100%; height: auto; }
.av-container { max-width: var(--av-container); margin: 0 auto; padding: 0 20px; }

/* Buttons */
.av-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px;
	font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all .15s ease;
}
.av-btn--primary { background: var(--av-primary); color: #fff; }
.av-btn--primary:hover { filter: brightness(.92); color: #fff; }
.av-btn--ghost { background: transparent; border-color: currentColor; color: var(--av-primary); }

/* Top bar (reference: navy, muted white text, pill badges) */
.av-topbar { background: var(--av-dark); color: rgba(255,255,255,.5); font-size: 12px; padding: 8px 0; }
.av-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-topbar a { color: rgba(255,255,255,.5); }
.av-topbar a:hover { color: #fff; }
.av-topbar__left, .av-topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.av-pill { background: rgba(0,30,210,.28); border: 1px solid rgba(0,30,210,.5); color: #9FB0FF; font-weight: 700; padding: 3px 10px; border-radius: 100px; font-size: 10px; letter-spacing: .05em; }
.av-topbar__note { background: rgba(245,166,35,.15); border: 1px solid rgba(245,166,35,.3); color: var(--av-gold); font-weight: 700; padding: 3px 10px; border-radius: 100px; font-size: 10px; letter-spacing: .05em; }
.av-topbar__social a { margin-left: 8px; }

/* Header (reference: white, sticky, 64px, orange CTA) */
.av-header { background: #fff; border-bottom: 1px solid var(--av-line); position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 8px rgba(0,0,60,.07); }
.av-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 64px; }
.av-header__brand { display: flex; align-items: center; margin-right: auto; }
.av-header__logo img { width: auto; height: 42px; display: block; }
.av-header__logo--sticky { display: none; }
.av-logo--text { font-family: var(--av-font-head); font-weight: 700; font-size: 19px; letter-spacing: -.3px; color: var(--av-dark); }
.av-header__actions { display: flex; align-items: center; gap: 12px; }
.av-header__phone { font-size: 13px; font-weight: 600; color: var(--av-dark); }
/* V3: both header CTAs share one size/shape - only the fill differs. */
.av-header__cta, .av-header__cta2 {
	display: inline-flex !important; align-items: center; justify-content: center;
	box-sizing: border-box; height: 46px; padding: 0 22px !important; gap: 8px;
	border-radius: 10px !important; border: 2px solid transparent;
	font-size: 14px !important; font-weight: 700; line-height: 1; white-space: nowrap;
	text-decoration: none; transition: all .15s ease;
}
.av-header__cta { background: var(--av-accent); color: #fff; }
.av-header__cta:hover { background: #D4570E; color: #fff; }
.av-search-toggle { background: none; border: 0; font-size: 16px; color: var(--av-dark); cursor: pointer; }

/* Menus (reference: small links, blue-light active pill) */
.av-menu, .av-topbar__menu { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
/* V3: top-bar secondary menu - spaced items with subtle "|" separators. */
.av-topbar__menu { gap: 0; align-items: center; }
.av-topbar__menu > li { position: relative; }
.av-topbar__menu > li > a { display: block; padding: 2px 15px; font-size: 12px; white-space: nowrap; color: rgba(255,255,255,.6); }
.av-topbar__menu > li > a:hover { color: #fff; }
.av-topbar__menu > li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.22); }
.av-topbar__right .av-lang { position: relative; }
.av-topbar__right .av-lang::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.22); }
.av-menu > li > a { display: block; padding: 5px 9px; color: var(--av-muted); font-size: 13px; font-weight: 500; border-radius: 6px; }
.av-menu > li > a:hover, .av-menu > .current-menu-item > a, .av-menu > .current-menu-ancestor > a { color: var(--av-primary); background: var(--av-blue-light); }
.av-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px; position: absolute; min-width: 210px; background: #fff;
	border: 1px solid var(--av-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.12);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .15s ease; z-index: 50;
}
.av-menu li { position: relative; }
.av-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.av-menu .sub-menu a { display: block; padding: 8px 12px; color: var(--av-text); border-radius: 6px; }
.av-menu .sub-menu a:hover { background: var(--av-bg); color: var(--av-primary); }

/* Mobile nav */
.av-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.av-nav-toggle span { width: 24px; height: 2px; background: var(--av-dark); border-radius: 2px; transition: all .2s ease; }

/* Menu close button + CTA block: mobile-panel only (shown inside the media query). */
.av-nav-close, .av-nav-cta { display: none; }
@media (max-width: 992px) {
	.av-nav-toggle { display: flex; }
	.av-nav { position: fixed; inset: 0 0 0 auto; width: 300px; max-width: 84vw; background: #fff; transform: translateX(100%); transition: transform .25s ease; z-index: 1000; padding: 80px 20px 20px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.12); }
	body.av-nav-open .av-nav { transform: translateX(0); }
	.av-menu { flex-direction: column; gap: 2px; }
	.av-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 12px; }
	.av-header__cta, .av-header__cta2 { display: none !important; } /* beat the sizing rule's !important */
	/* V3: mobile menu close button + the two CTAs inside the panel. */
	.av-nav-close { display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--av-dark); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
	.av-nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--av-line); }
	.av-nav-cta__btn { width: 100%; justify-content: center; height: 48px; font-size: 14px; border-radius: 10px; }
}

/* Header secondary CTA (Request a Proposal) + language dropdown (V3) */
.av-header__cta2 { background: transparent; border-color: var(--av-primary) !important; color: var(--av-primary); }
.av-header__cta2:hover { background: var(--av-primary); color: #fff; }
.av-lang { position: relative; display: inline-flex; }
.av-lang__btn { background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; }
.av-lang__caret { transition: transform .18s ease; font-size: 10px; }
.av-lang.is-open .av-lang__caret { transform: rotate(180deg); }
.av-lang__menu { position: absolute; top: 100%; right: 0; min-width: 130px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 6px; margin: 6px 0 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .16s ease; z-index: 1200; }
.av-lang.is-open .av-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.av-lang__menu a { display: block; padding: 8px 12px; border-radius: 7px; text-decoration: none; color: var(--av-dark); font-size: 13px; }
.av-lang__menu a:hover, .av-lang__menu a.is-active { background: rgba(0,0,0,.05); color: var(--av-primary); }

/* Footer - reference "avfooter" (brand · Resources · Connect · Contact · Locate) */
.avfooter { background: var(--av-dark); color: #fff; padding: 62px 0 46px; position: relative; }
.avfooter::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--av-primary), #5468ff 50%, var(--av-primary)); }
.avf-top { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 0; }
.avf-social-wrap { margin-top: 18px; }
.avf-top > div { padding: 0 30px; }
.avf-top > div:first-child { padding-left: 0; }
.avf-col { border-left: 1px solid rgba(255,255,255,.13); }
.avf-logo { background: #fff; border-radius: 12px; padding: 11px 15px; display: inline-block; line-height: 0; }
.avf-logo img { height: 38px; width: auto; display: block; }
.avf-company { margin-top: 18px; font-size: 14px; font-weight: 700; color: #fff; }
.avf-uen { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 4px; line-height: 1.5; }
.avf-h { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 18px; letter-spacing: .2px; }
.avf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.avf-links li { margin: 0; }
.avf-links a { font-size: 14px; color: rgba(255,255,255,.72); text-decoration: none; transition: color .15s; }
.avf-links a:hover { color: #fff; }
.avf-social { display: flex; flex-wrap: wrap; gap: 12px; }
.avf-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .18s, transform .18s; font-size: 17px; }
.avf-social a:hover { background: var(--av-primary); transform: translateY(-2px); color: #fff; }
.avf-ci { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 17px; font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.5; }
.avf-ci .ic { color: #f0b429; flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.avf-ci a { color: rgba(255,255,255,.82); text-decoration: none; }
.avf-ci a:hover { color: #fff; }
/* The track count follows how many categories there actually are, capped at 4
   and set by footer.php - three lists fill the width instead of leaving a dead
   fourth column. */
.avf-cats{border-top:1px solid rgba(255,255,255,.15);margin-top:48px;padding-top:34px;display:grid;grid-template-columns:repeat(var(--avf-cat-cols,4),minmax(0,1fr));gap:30px 32px}
.avf-cat{padding:0;border-bottom:none;min-width:0}

.avf-cat-h{font-size:15px;font-weight:700;color:#fff;margin-bottom:14px;line-height:1.35}
.avf-cat-links{display:flex;flex-direction:column;align-items:flex-start;row-gap:10px}
.avf-cat-links a{font-size:13.5px;color:rgba(255,255,255,.75);text-decoration:none;padding:0;position:relative;transition:color .15s;line-height:1.45}

.avf-cat-links a:not(:last-child)::after{content:none}
.avf-cat-links a:hover { color: #fff; }
.avf-bottom { background: #eef0f7; border-top: 1px solid #dfe3ef; }
.avf-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; }
.avf-copy { font-size: 13px; color: #5a6072; }
.avf-legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.avf-legal li { margin: 0; }
.avf-legal a { font-size: 13px; color: #5a6072; text-decoration: none; }
.avf-legal a:hover { color: var(--av-primary); }
@media (max-width: 900px) { .avf-top { grid-template-columns: 1fr 1fr; gap: 30px 0; } .avf-top > div { padding: 0 22px; } .avf-top > div:nth-child(odd) { padding-left: 0; } .avf-col { border-left: none; } }
@media (max-width: 560px) { .avf-top { grid-template-columns: 1fr; } .avf-top > div { padding: 0; } .avf-bottom-inner { flex-direction: column; align-items: flex-start; } }

/* Content */
.av-content-wrap { padding: 40px 0 20px; }
.av-content.has-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.av-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .av-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.av-card { background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); overflow: hidden; }
.av-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.av-card__body { padding: 18px; }
.av-card__title { font-size: 18px; margin: 0 0 8px; }
.av-card__excerpt { color: var(--av-muted); font-size: 14px; }
.av-card__more { display: inline-block; margin-top: 10px; font-weight: 700; }

/* Preloader + back to top + 404 */
.avanta-preloader { position: fixed; inset: 0; background: #fff; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.avanta-preloader span { width: 40px; height: 40px; border: 3px solid var(--av-line); border-top-color: var(--av-primary); border-radius: 50%; animation: avSpin .8s linear infinite; }
@keyframes avSpin { to { transform: rotate(360deg); } }
/* V3: sit above the floating WhatsApp button (bottom-right) on every page so the
   two never overlap - desktop and mobile. */
.avanta-top { position: fixed; right: 24px; bottom: 74px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--av-primary); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: all .2s ease; z-index: 998; }
@media (max-width: 600px) { .avanta-top { bottom: 74px; right: 16px; } }
.avanta-top.is-visible { opacity: 1; visibility: visible; }
.av-404 { text-align: center; padding: 80px 0; }
.av-404 h1 { font-size: 90px; margin: 0; color: var(--av-primary); }

/* Single + archive */
.av-archive-head { padding: 30px 0; margin-bottom: 10px; border-bottom: 1px solid var(--av-line); }
.av-archive-head h1 { font-size: 32px; margin: 0 0 8px; }
.av-archive-desc { color: var(--av-muted); }
.av-single__head { padding: 40px 0 20px; }
.av-single__title { font-size: clamp(28px, 3.5vw, 44px); margin: 0; }
.av-single__media { margin-bottom: 26px; }
.av-single__media img { width: 100%; border-radius: var(--av-radius); }
.av-single__body { max-width: 820px; }
.av-single__body p { margin: 0 0 16px; }

/* Search */
.av-search { display: flex; gap: 6px; }
.av-search input { flex: 1 1 auto; padding: 10px 14px; border: 1px solid var(--av-line); border-radius: 8px; }
.av-search button { border: 0; background: var(--av-primary); color: #fff; border-radius: 8px; padding: 0 16px; cursor: pointer; }

@media (max-width: 768px) {
	.av-footer__top { grid-template-columns: 1fr; }
	.av-content.has-sidebar { grid-template-columns: 1fr; }
	.av-posts { grid-template-columns: 1fr; }
}

/* Correction 3: footer course columns - 4 / 2 / 1. */
@media(max-width:900px){.avf-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.avf-cats{grid-template-columns:1fr;gap:22px}}

/* ===========================================================================
   Correction 4: mega menu - the V1 panel, in this theme's colours.

   Geometry is V1's exactly (1140px cap, 22px radius, 1.15 / 2.1 / 1.1 columns
   with a full-width strip beneath). Colours and type come from this theme's
   tokens rather than V1's, so the panel belongs to the header it drops out of.

   Namespaced `av-mega` on purpose: courses.css still carries a block of unused
   `.mega` rules from an earlier build, and a bare `.mega` here would collide
   with them.

   Hidden below 992px - the same breakpoint where the header switches to the
   slide-in drawer, so the two never overlap.
   ======================================================================== */
.av-menu li.av-has-mega { position: static; }

.av-mega {
	position: absolute; top: calc(100% - 6px); left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: min(1140px, 96vw);
	background: #fff; border: 1px solid var(--av-line); border-radius: 22px;
	box-shadow: 0 24px 60px rgba(0,0,60,.16);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .28s ease, transform .28s ease, visibility .28s;
	z-index: 120; overflow: hidden;
	display: grid; grid-template-columns: 1.15fr 2.1fr 1.1fr; grid-template-rows: auto auto;
	font-family: var(--av-font-body);
}
/* THE GAP, AND WHY THE PANEL KEPT VANISHING.
 *
 * li.av-has-mega is position:static, so the panel is positioned against the
 * HEADER, not the menu item — top:calc(100% - 6px) is 6px above the header's
 * bottom edge, not the item's. The menu item ends higher up, so between the
 * bottom of "Courses" and the top of the panel there is a band of header that
 * belongs to neither. Moving the pointer down crossed it, :hover went false,
 * and the panel closed before the pointer ever reached it.
 *
 * Two things close that band: a transparent bridge that extends the panel's
 * hover area up over it, and .is-open from main.js, which holds the panel
 * through a short delay so a pointer that strays out and back never sees it
 * shut. The :hover rules stay as the no-JavaScript fallback. */
.av-mega::before {
	content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px;
}

.av-has-mega:hover .av-mega,
.av-has-mega:focus-within .av-mega,
.av-has-mega.is-open .av-mega,
.av-mega:hover {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* --- featured column --- */
.av-mega__feature {
	grid-row: 1; grid-column: 1; padding: 24px;
	background: linear-gradient(180deg, var(--av-blue-light), #F7F8FF);
}
.av-mega__badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	background: rgba(0,30,210,.10); color: var(--av-primary);
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.av-mega__feature-title {
	margin: 12px 0 6px; font-family: var(--av-font-head);
	font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--av-dark);
}
.av-mega__feature-text { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--av-muted); }

.av-mega__lvl { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid rgba(0,0,60,.08); }
.av-mega__lvl-n {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--av-primary); color: #fff; font-size: 12px; font-weight: 700;
}
.av-mega__lvl-body { min-width: 0; }
.av-mega__lvl-tag {
	display: inline-block; margin-bottom: 4px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--av-secondary);
}
.av-mega__lvl-title { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--av-text); line-height: 1.35; }
.av-mega__lvl-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--av-muted); }
.av-mega__lvl-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--av-primary); text-decoration: none; }
.av-mega__lvl-link:hover { text-decoration: underline; }

/* --- category columns --- */
.av-mega__cats {
	grid-row: 1; grid-column: 2; padding: 24px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px;
	/* The feature column is usually the tallest, and without this the two
	   category rows stretch to share that height, leaving a gap in the middle. */
	align-content: start;
}
.av-mega__cat { min-width: 0; }
.av-mega__cat-h {
	display: flex; align-items: center; gap: 8px; margin: 0 0 9px;
	font-family: var(--av-font-head); font-size: 13px; font-weight: 700; color: var(--av-dark);
}
.av-mega__cat-h i { color: var(--av-primary); font-size: 12px; }
.av-mega__cat-link {
	display: flex; align-items: center; gap: 7px;
	padding: 5px 8px; margin-left: -8px; border-radius: 7px;
	font-size: 13px; line-height: 1.4; color: var(--av-muted); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.av-mega__cat-link:hover { background: var(--av-bg); color: var(--av-primary); }
/* The label is what truncates - the badge and chevron must stay visible. */
.av-mega__cat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-mega__cat-link i { margin-left: auto; font-size: 9px; opacity: 0; transform: translateX(-4px); transition: all .15s ease; }
.av-mega__cat-link:hover i { opacity: 1; transform: translateX(0); }
.av-mega__new {
	flex: 0 0 auto; padding: 1px 6px; border-radius: 4px;
	background: var(--av-gold); color: var(--av-dark);
	font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* --- also explore --- */
.av-mega__explore {
	grid-row: 1; grid-column: 3; padding: 24px;
	background: #FBFBFE; border-left: 1px solid var(--av-line);
}
.av-mega__explore-h {
	display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
	font-family: var(--av-font-head); font-size: 13px; font-weight: 700; color: var(--av-dark);
}
.av-mega__explore-h i { color: var(--av-accent); font-size: 12px; }
.av-mega__explore a {
	display: flex; align-items: center; gap: 7px;
	padding: 6px 8px; margin-left: -8px; border-radius: 7px;
	font-size: 13px; color: var(--av-muted); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.av-mega__explore a:hover { background: #fff; color: var(--av-primary); }
.av-mega__explore a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-mega__explore a i { margin-left: auto; font-size: 9px; opacity: .55; }

/* --- footer strip --- */
.av-mega__foot {
	grid-row: 2; grid-column: 1 / -1;
	border-top: 1px solid var(--av-line); padding: 15px 24px; background: #fff;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	font-size: 14px; font-weight: 600;
}
.av-mega__foot-q { color: var(--av-dark); }
.av-mega__foot-or { color: var(--av-muted); font-weight: 500; }
.av-mega__foot a { color: var(--av-primary); text-decoration: none; }
.av-mega__foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.av-mega, .av-mega__cat-link, .av-mega__cat-link i { transition: none; }
}

/* Drawer territory - the panel belongs to the desktop header only. */
@media (max-width: 992px) { .av-mega { display: none; } }

/* ==========================================================================
   Mega menu - category rail (V2)
   --------------------------------------------------------------------------
   Replaces the three editorial columns with a catalogue: every top-level
   category down the left, its sub-categories and courses on the right.

   The .av-mega base rule above still supplies the panel's position, width,
   shadow and reveal; this overrides only the grid inside it, so the panel
   still drops out of the header exactly as before.

   Hidden below 992px with the rest of the panel - the header switches to the
   drawer there, and a rail-plus-columns layout has nowhere to go on a phone.
   ========================================================================= */
.av-mega--cats {
	/* Wider than the editorial panel it replaced: this one carries a rail
	   plus up to four columns of courses, and 1140px left room for three. */
	width: min(1260px, 96vw);
	grid-template-columns: 290px minmax(0, 1fr);
	/* Two rows: the rail-and-panes row, then the foot strip across the whole
	   panel. .av-mega__foot already declares grid-row:2 / grid-column:1/-1
	   from the editorial panel this variant replaced; it just needed a second
	   row to sit in. */
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: stretch;
}

/* --- the category rail --- */
.av-mega__rail {
	display: flex; flex-direction: column; gap: 2px;
	padding: 18px 14px;
	background: linear-gradient(180deg, var(--av-blue-light), #F7F8FF);
	border-right: 1px solid var(--av-line);
	/* NON-SCROLLING, per the client's correction: "First column - category list
	   needed non scrollable. It should be displayed in single view." The rail
	   sizes to its contents and the panel grows with it, so every category is
	   visible at once. The min-height keeps the two sides of the panel level
	   when the list is short. */
	min-height: min(520px, 68vh); overflow: visible;
}

.av-mega__cat {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px; border-radius: 10px;
	color: var(--av-dark); text-decoration: none;
	font-family: var(--av-font-head); font-size: 14.5px; font-weight: 600; line-height: 1.3;
	transition: background .18s ease, color .18s ease;
}
.av-mega__cat:hover,
.av-mega__cat:focus-visible {
	background: rgba(255,255,255,.62); color: var(--av-primary);
}

/* The open one is a card with an accent edge — hovering a neighbour should
   not look the same as having opened it, or the rail reads as two selections
   at once. */
.av-mega__cat.is-active {
	background: #fff; color: var(--av-primary);
	box-shadow: 0 1px 2px rgba(0,0,60,.05), 0 10px 24px -16px rgba(0,0,60,.45);
}
.av-mega__cat.is-active::before {
	content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
	width: 3px; border-radius: 0 3px 3px 0; background: var(--av-primary);
}
.av-mega__cat { position: relative; }

.av-mega__catname { flex: 1 1 auto; min-width: 0; }

/* The count is a fact about the category, so it is quiet: a shopper scanning
   nine names should read the names, not a column of numbers. */
.av-mega__catn {
	flex: 0 0 auto;
	font-family: var(--av-font-body); font-size: 12px; font-weight: 700;
	color: var(--av-muted); opacity: .7;
}
.av-mega__cat.is-active .av-mega__catn { color: var(--av-primary); opacity: 1; }

.av-mega__catarrow { flex: 0 0 auto; font-size: 11px; opacity: .35; }
.av-mega__cat.is-active .av-mega__catarrow { opacity: 1; }

.av-mega__help {
	margin-top: auto; padding: 13px 14px 12px;
	background: #fff; border: 1px solid var(--av-line); border-radius: 14px;
}
.av-mega__help p {
	margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--av-muted);
}
.av-mega__help strong {
	display: block; margin-bottom: 4px;
	font-family: var(--av-font-head); font-size: 13.5px; color: var(--av-dark);
}

.av-mega__all {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--av-primary); text-decoration: none;
	font-family: var(--av-font-head); font-size: 13px; font-weight: 700;
}
.av-mega__all:hover { text-decoration: underline; }

/* --- the panes --- */
/* A FIXED height, not max-height. Workplace Safety & Health is four rows of
   columns and F&B is one line, so a panel sized to its contents jumped every
   time the pointer moved down the rail — the thing under the cursor moved out
   from under it, which is what "the menu is not stable" means. One height for
   every pane, and the tall ones scroll inside it. */
.av-mega__panes {
	position: relative; padding: 22px 28px 24px;
	/* height:100%, not a fixed height. The rail beside this is now auto-height
	   so every category shows without scrolling, and with enough categories it
	   grows past 520px — a fixed height here then left the right-hand side
	   short and the panel ragged along the bottom. Filling the row keeps the
	   two sides level, and the row is sized by the RAIL, which is the same on
	   every category, so the no-jumping property above still holds. */
	   No max-height: the rail has no cap either — the client asked for the
	   category list to show in a single view — so capping only this side puts
	   the gap back, 71px of it at nineteen categories. */
	height: 100%; min-height: min(520px, 68vh);
	overflow-y: auto; overscroll-behavior: contain;
}

/* A quiet scrollbar. The default on Windows is a wide grey slab that sits
   inside a rounded white panel and looks like a mistake. */
.av-mega__panes { scrollbar-width: thin; scrollbar-color: rgba(0,0,60,.22) transparent; }

/* Tells the reader the list continues. Sits on the panel, not the scroller,
   so it does not travel with the content.

   NO position:relative HERE. .av-mega is already position:absolute — that is
   what hangs the panel under the header — and .av-mega--cats is the same
   specificity but later in the file, so declaring position on it would win
   and drop the panel back into the document flow. The absolute base is
   already a containing block for this pseudo-element. */
.av-mega--cats::after {
	content: ""; position: absolute; right: 1px; bottom: 1px; left: 290px; height: 46px;
	background: linear-gradient(180deg, rgba(255,255,255,0), #fff 76%);
	pointer-events: none; border-radius: 0 0 22px 0;
}
.av-mega__panes::-webkit-scrollbar { width: 8px; }
.av-mega__panes::-webkit-scrollbar-track { background: transparent; }
.av-mega__panes::-webkit-scrollbar-thumb {
	background: rgba(0,0,60,.18); border-radius: 99px;
	border: 2px solid #fff; background-clip: padding-box;
}
.av-mega__panes:hover::-webkit-scrollbar-thumb { background: rgba(0,0,60,.3); background-clip: padding-box; }

/* One pane visible at a time. Without JavaScript the first stays open and the
   rail's links still reach every category, so nothing is stranded. */
.av-mega__pane { display: none; }
.av-mega__pane.is-active { display: block; }

.av-mega__panehead {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: 12px; padding-bottom: 12px; margin-bottom: 16px;
	border-bottom: 1px solid var(--av-line);
}
.av-mega__panetitle {
	margin: 0; font-family: var(--av-font-head);
	font-size: 17px; font-weight: 700; color: var(--av-dark);
}
.av-mega__panelink {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--av-primary); text-decoration: none;
	font-family: var(--av-font-head); font-size: 13px; font-weight: 700;
}
.av-mega__panelink:hover { text-decoration: underline; }

/* A COLUMN FLOW, NOT A GRID. In a grid every row is as tall as its tallest
   cell, so Construction Safety's eleven courses left three neighbours sitting
   above a hole the height of eight lines. Multi-column packs each block under
   the last one in its column instead, and break-inside keeps a sub-category
   and its courses together. Ragged bottom edge, no holes — which is the right
   way round for a list. */
/* The course columns and the promo card sit side by side; the card is kept out
   of the multi-column flow so it stays on the right-hand edge instead of being
   packed wherever the columns happen to break. */
.av-mega__body {
	display: flex; align-items: flex-start; gap: 28px;
}
.av-mega__cols {
	flex: 1 1 auto; min-width: 0;
	/* TWO columns, not four. Four was chosen when a column showed up to six
	   courses and there was no promo card. Both changed: each column now shows
	   three, and the card takes 236px off the right. MEASURED in the 1140px
	   panel — rail 290, card 236 — the course area is 528px, so four tracks
	   are 110px each and "bizSAFE Level 2 - Develop a Risk Management Plan"
	   wraps to four lines. Two tracks are 249px and it fits on one or two,
	   which is what the client's reference shows. */
	columns: 2; column-gap: 30px;
}
/* Kept for the panes that declare it; same value as the base now, so a pane
   with one or two groups is not laid out differently from any other. */
.av-mega__cols--narrow { columns: 2; }

/* --- "Popular" pill on the first category --- */
.av-mega__catbadge {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	background: #fff; border: 1px solid var(--av-line);
	font-family: var(--av-font-head); font-size: 10px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--av-primary);
}
.av-mega__catbadge i { font-size: 9px; }
/* In the rail the pill sits ABOVE the name rather than beside it, so a long
   category name still gets the full width of the row. */
.av-mega__cat:has(.av-mega__catbadge) { flex-wrap: wrap; row-gap: 5px; }
.av-mega__cat:has(.av-mega__catbadge) .av-mega__catbadge { order: -1; flex-basis: 100%; }
.av-mega__cat:has(.av-mega__catbadge) .av-mega__catname { flex: 1 1 auto; }

/* --- the cap icon in front of each group heading --- */
.av-mega__coltitle a { display: inline-flex; align-items: center; gap: 8px; }
.av-mega__colicon { flex: 0 0 auto; font-size: 11px; color: var(--av-primary); opacity: .9; }

/* --- promo card (last column) ---
   The label is a chip ABOVE the card and the action is a button, which is how
   the client's reference draws this column. The wrapper is what takes the
   column width now; the card is as tall as what is in it.

   NOT align-self: stretch. Stretching made the column as tall as the course
   list beside it, so against Workplace Safety & Health's thirty courses the
   card became a 600px panel holding three lines of text with the arrow
   stranded at the bottom. Its height is its content's; the column simply ends
   where the card ends, as it already did on the short categories. */
.av-mega__promowrap {
	flex: 0 0 246px; align-self: flex-start; min-width: 0;
	display: flex; flex-direction: column; gap: 10px;
	/* A tinted panel with the white card inside it, as on the INSEAD menu the
	   brief references — the card only reads as a card against something. */
	padding: 14px; border-radius: 16px; background: var(--av-blue-light);
}
.av-mega__promolabel {
	align-self: flex-start;
	padding: 6px 12px; border-radius: 999px;
	background: #fff; border: 1px solid var(--av-line);
	font-family: var(--av-font-head); font-size: 11px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--av-dark);
}
.av-mega__promo {
	/* 0 0 auto, not 1 1 auto: with the wrapper no longer stretched there is no
	   spare height to fill, and growing would only re-create the tall card. */
	flex: 0 0 auto; position: relative;
	display: flex; flex-direction: column;
	/* No padding: the image runs to the card edges the way it does on the
	   reference. The text below carries its own inset instead. */
	padding: 0; overflow: hidden;
	border: 1px solid var(--av-line); border-radius: 12px; background: #fff;
}
.av-mega__promomedia {
	display: block; overflow: hidden; border-radius: 0;
	background: var(--av-blue-light); aspect-ratio: 16 / 10;
}
.av-mega__promomedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-mega__promotitle {
	margin: 14px 16px 0; font-family: var(--av-font-head);
	font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--av-dark);
}
.av-mega__promotext { margin: 8px 16px 54px; font-size: 12.5px; line-height: 1.6; color: var(--av-muted); }
/* A button, not a text link — "cta button" in the brief, and drawn as a
   button in the reference. Full width of the card so it reads as the card's
   action rather than a stray link under the text. */
/* A square arrow in the bottom-right corner of the card, flush to its edges,
   as on the reference. The label stays in the markup for screen readers. */
.av-mega__promocta {
	position: absolute; right: 0; bottom: 0;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--av-primary); color: #fff; text-decoration: none;
	border-top-left-radius: 12px;
	transition: background .18s ease;
}
.av-mega__promocta:hover { background: var(--av-dark); color: #fff; }
.av-mega__promocta i { font-size: 14px; }

/* The two foot actions sit on one line while there is room for them. */
.av-mega__helpctas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.av-mega__contact {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--av-dark); text-decoration: none;
	font-family: var(--av-font-head); font-size: 13px; font-weight: 700;
}
.av-mega__contact:hover { color: var(--av-primary); text-decoration: underline; }

/* These size the WRAPPER, not the card — the column width moved there when the
   label came out of the card and sat above it. Left on .av-mega__promo they
   would have stopped doing anything, since the card is now flex:1 1 auto
   inside the wrapper. */
@media (max-width: 1199px) {
	.av-mega__promowrap { flex-basis: 200px; }
}
@media (max-width: 1023px) {
	.av-mega__body { flex-direction: column; }
	.av-mega__promowrap { flex: 0 0 auto; align-self: stretch; width: 100%; }
}
.av-mega__col {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 20px;
}

/* --narrow has to be repeated here: it and .av-mega__cols have the same
   specificity, and this rule is further down the file, so without it a
   two-column pane would widen to three below 1200px. */
/* Below 1200px the panel narrows but the rail and the card do not, so the
   course area is tighter still — one column rather than two. */
@media (max-width: 1199px) {
	.av-mega__cols,
	.av-mega__cols--narrow { columns: 1; }
}

.av-mega__coltitle {
	margin: 0 0 10px; padding-bottom: 7px;
	border-bottom: 1px solid var(--av-line);
	font-size: 11px; line-height: 1.3;
}
.av-mega__coltitle a {
	color: var(--av-primary); text-decoration: none;
	font-family: var(--av-font-head); font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
}
.av-mega__coltitle a:hover { color: var(--av-dark); }

.av-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
/* Course names are what people are reading, so they take the body colour.
   Muted is for the counts and the "coming soon" notes beside them. */
.av-mega__list a {
	display: block; color: var(--av-text); text-decoration: none;
	font-size: 13px; line-height: 1.5;
	transition: color .16s ease, transform .16s ease;
}
.av-mega__list a:hover { color: var(--av-primary); transform: translateX(2px); }

.av-mega__new {
	display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
	background: rgba(0,30,210,.10); color: var(--av-primary);
	font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	vertical-align: 1px;
}

.av-mega__more,
.av-mega__colempty {
	display: inline-block; margin-top: 7px;
	font-size: 12px; color: var(--av-muted);
}
.av-mega__more { color: var(--av-primary); font-weight: 700; text-decoration: none; }
.av-mega__more:hover { text-decoration: underline; }
.av-mega__colempty { opacity: .7; }

.av-mega__empty { margin: 0; color: var(--av-muted); font-size: 13.5px; max-width: 52ch; }

/* ==========================================================================
   Mega menu - fixed height, four columns (V3)
   --------------------------------------------------------------------------
   "No need full height. Fix the menu height. No need scrolling." The panel
   is one fixed height on every category, set by --av-mega-h, and nothing in
   it scrolls: main.js hides the courses that do not fit and counts them into
   each group's "+N more" link.

     rail | panes (sub-categories + courses, or grouped courses) | promo
     foot strip across all three

   These rules come after the V2 block above and override the parts of it that
   let the panel grow with its contents.
   ========================================================================= */
.av-mega--cats {
	--av-mega-h: clamp(400px, calc(100vh - 230px), 470px);
	width: min(1280px, 96vw);
	grid-template-columns: 264px minmax(0, 1fr) 256px;
	grid-template-rows: var(--av-mega-h) auto;
}
/* The "list continues" fade - nothing continues now. */
.av-mega--cats::after { content: none; }

.av-mega__rail {
	grid-row: 1; grid-column: 1;
	min-height: 0; padding: 14px 12px; gap: 1px;
	/* Only as a last resort, for a catalogue with far more categories than
	   this one; nine fit with room to spare. */
	overflow-y: auto; scrollbar-width: none;
}
.av-mega__rail::-webkit-scrollbar { display: none; }
.av-mega__cat { padding: 8px 12px; font-size: 14px; }
/* The name takes the leftover width and wraps inside it, so the count and the
   arrow stay on the first line instead of dropping under a long name. */
.av-mega__cat .av-mega__catname,
.av-mega__cat:has(.av-mega__catbadge) .av-mega__catname { flex: 1 1 0; }

.av-mega__panes {
	grid-row: 1; grid-column: 2;
	height: auto; min-height: 0; padding: 0;
	overflow: hidden;
}
.av-mega__pane.is-active { display: flex; flex-direction: column; height: 100%; padding: 20px 26px 18px; }
.av-mega__panehead { flex: 0 0 auto; margin-bottom: 14px; }

/* What has to fit: a fixed box. Overflow is clipped, never scrolled - the
   script trims the lists until nothing is clipped. */
.av-mega__fit { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.av-mega__fit .av-mega__col { margin-bottom: 16px; }
/* A category without sub-categories is ONE list: the wrapper must not split
   it into columns as well, or the list sits in the left half and splits
   again inside it. The wrapper is one column; the list spreads across the
   whole width in two columns. */
.av-mega__cols--single { columns: 1; }
.av-mega__cols--single .av-mega__col { margin: 0; }
.av-mega__cols--single .av-mega__list { display: block; columns: 2; column-gap: 30px; }
.av-mega__cols--single .av-mega__list li { break-inside: avoid; margin-bottom: 7px; }
.av-mega__more[hidden] { display: none; }

/* --- deep pane: sub-categories | courses --- */
.av-mega__pane--deep.is-active {
	display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
	padding: 0;
}
.av-mega__subs {
	display: flex; flex-direction: column; min-height: 0;
	padding: 20px 12px 14px 16px;
	background: #F7F8FC; border-right: 1px solid var(--av-line);
}
.av-mega__subs .av-mega__panehead { padding: 0 8px 12px; }
.av-mega__sublist {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column; gap: 1px;
	overflow-y: auto; scrollbar-width: none;
}
.av-mega__sublist::-webkit-scrollbar { display: none; }
.av-mega__sub {
	position: relative; display: flex; align-items: center; gap: 10px;
	padding: 7px 10px; border-radius: 9px;
	color: var(--av-text); text-decoration: none;
	font-size: 13.5px; font-weight: 600; line-height: 1.35;
	transition: background .18s ease, color .18s ease;
}
.av-mega__sub:hover,
.av-mega__sub:focus-visible { background: #fff; color: var(--av-primary); }
.av-mega__sub.is-active {
	background: #fff; color: var(--av-primary);
	box-shadow: 0 1px 2px rgba(0,0,60,.05), 0 8px 18px -14px rgba(0,0,60,.45);
}
.av-mega__sub.is-active .av-mega__catn { color: var(--av-primary); opacity: 1; }
.av-mega__sub.is-active .av-mega__catarrow { opacity: 1; }
.av-mega__subsfoot { flex: 0 0 auto; padding: 12px 10px 0; border-top: 1px solid var(--av-line); margin-top: 8px; }

.av-mega__subpanes { min-width: 0; min-height: 0; }
.av-mega__subpane { display: none; }
.av-mega__subpane.is-active { display: flex; flex-direction: column; height: 100%; padding: 20px 26px 18px; }
.av-mega__panetitle--sub {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--av-primary);
}
.av-mega__subpane .av-mega__list { gap: 9px; }
.av-mega__subpane .av-mega__list a { font-size: 13.5px; }

/* --- promo: the last column --- */
.av-mega__promowrap {
	grid-row: 1; grid-column: 3;
	align-self: stretch; margin: 16px 16px 16px 0;
	min-height: 0; overflow: hidden;
}

@media (max-width: 1199px) {
	.av-mega--cats { grid-template-columns: 236px minmax(0, 1fr) 216px; }
	.av-mega__pane--deep.is-active { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr); }
	.av-mega__cols--single .av-mega__list { columns: 1; }
}
@media (max-width: 1099px) {
	.av-mega--cats { grid-template-columns: 220px minmax(0, 1fr) 200px; }
	.av-mega__pane.is-active,
	.av-mega__subpane.is-active { padding: 18px 18px 16px; }
	.av-mega__pane--deep.is-active { padding: 0; }
	.av-mega__subs { padding: 16px 10px 12px 12px; }
	.av-mega__subs .av-mega__panehead { padding: 0 6px 8px; margin-bottom: 8px; }
	.av-mega__subs .av-mega__panetitle { font-size: 15px; }
	.av-mega__sub { padding: 5px 8px; font-size: 13px; }
	.av-mega__subsfoot { padding-top: 9px; margin-top: 6px; }
	/* The rail is narrower here and its names wrap; the pill goes beside the
	   name instead of above it so the list still fits the height. */
	.av-mega__cat { padding: 7px 10px; font-size: 13.5px; }
	.av-mega__cat:has(.av-mega__catbadge) .av-mega__catbadge { order: 0; flex-basis: auto; }
	.av-mega__cat:has(.av-mega__catbadge) { flex-wrap: nowrap; }
	.av-mega__catbadge { padding: 2px 6px; font-size: 0; gap: 0; }
	.av-mega__catbadge i { font-size: 10px; }
}
/* The V2 rules stacked the card under the courses below 1024px; it is a grid
   column of its own now. */
@media (max-width: 1023px) {
	.av-mega__body { flex-direction: row; }
	.av-mega__promowrap { width: auto; }
}

/* ============================================================
   Cookie notice
   A bar pinned to the bottom, not a modal: it must not block the
   page while someone decides. Decline and Accept are the same
   size, so declining is not the harder option.
   ============================================================ */
.av-cookie {
	/* Above the course page's mobile tab bar (z-index 1000), which used to
	   cover the Accept / Decline buttons on phones. Below .av-modal. */
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010;
	background: #fff; border-top: 1px solid var(--av-line);
	box-shadow: 0 -8px 30px -18px rgba(0, 0, 40, .55);
}
.av-cookie[hidden] { display: none; }
.av-cookie__inner {
	max-width: 1200px; margin: 0 auto; padding: 16px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.av-cookie__copy { flex: 1 1 420px; min-width: 0; }
.av-cookie__title {
	margin: 0 0 3px; font-family: var(--av-font-head); font-size: 14px;
	font-weight: 700; color: var(--av-dark);
}
.av-cookie__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--av-muted); }
.av-cookie__link { color: var(--av-primary); font-weight: 700; text-decoration: underline; }
.av-cookie__actions { flex: 0 0 auto; display: flex; gap: 10px; }
.av-cookie__btn {
	font: inherit; font-family: var(--av-font-head); font-size: 13.5px; font-weight: 700;
	padding: 11px 22px; border-radius: 100px; cursor: pointer;
	border: 1.5px solid var(--av-line); background: #fff; color: var(--av-dark);
	transition: background .15s, color .15s, border-color .15s;
}
.av-cookie__btn--ghost:hover { border-color: var(--av-dark); }
.av-cookie__btn--accept { background: var(--av-primary); border-color: var(--av-primary); color: #fff; }
.av-cookie__btn--accept:hover { filter: brightness(.92); }
@media (max-width: 560px) {
	.av-cookie__inner { padding: 14px 16px; gap: 14px; }
	.av-cookie__actions { width: 100%; }
	.av-cookie__btn { flex: 1 1 0; }
}

/* ============================================================================
   WPBakery rows on the converted inner pages.

   WPBakery gives every .vc_row a Bootstrap-style negative gutter —
   margin-left:-15px; margin-right:-15px — which its own columns cancel with
   15px of padding. That only balances inside a container that has the matching
   padding. These pages put the row straight into the page wrapper, so each row
   came out 30px wider than the page and hung 15px off the right-hand side.
   Fifteen pixels is not enough to notice as a layout fault, but it is enough to
   put a horizontal scrollbar across the bottom of every inner page.

   The home page never had this: home.css already neutralises the same wrappers
   under .avanta-home. This is that rule, for the other seven pages.

   Scoped to the full-width columns these pages actually use, so a genuine
   multi-column row added later keeps its gutters.
   ========================================================================= */
.av-inner .vc_row,
.av-inner > .wpb-content-wrapper { margin-left: 0; margin-right: 0; max-width: 100%; }
.av-inner .vc_row > .vc_col-sm-12,
.av-inner .vc_row > .vc_col-sm-12 > .vc_column-inner { padding-left: 0; padding-right: 0; }

/* The page-level clipping the inner-page design assumes.

   pages.css sizes .bleed at 100vw and pulls it back with negative margins, and
   its own comment says body{overflow-x:hidden} is what keeps that from
   scrolling sideways. The scoped build drops overflow-x, correctly — it means
   nothing on a div — so the rule has to live here, on the element that can
   carry it.

   100vw is the width INCLUDING the scrollbar, so .bleed is about 8px wider
   than the content box on any page tall enough to scroll. That alone is enough
   for a scrollbar across the bottom, which is then enough for another 8px, and
   so on.

   On <body> rather than <html>: when html's overflow is visible the browser
   propagates body's to the viewport, body itself stays a normal box, and
   position:sticky on the inner-page nav keeps working. Setting it on <html>
   would make html the scroll container and break that. */
body.avanta-inner-page { overflow-x: hidden; }

/* ==========================================================================
   Top bar on phones (1.11.9)
   Three centred rows - contact, page links, language + social - instead of
   left-aligned wrapping, and a language menu that opens centred under its
   button and stays on screen (it was anchored to the button's right edge,
   so on a phone it opened off the left side).
   ========================================================================== */
@media (max-width: 767px) {
	.av-topbar { padding: 8px 0 10px; }
	.av-topbar__inner { flex-direction: column; align-items: center; gap: 8px; }
	.av-topbar__left,
	.av-topbar__right { justify-content: center; gap: 6px 16px; width: 100%; }
	.av-topbar__left a { font-size: 12px; white-space: nowrap; }

	/* Page links take a row of their own. */
	.av-topbar__right .av-topbar__menu { width: 100%; justify-content: center; flex-wrap: wrap; }
	.av-topbar__menu > li > a { padding: 2px 12px; }

	/* Language + social on the last row; no divider before the switcher. */
	.av-topbar__right .av-lang::before { display: none; }
	.av-topbar__social a { margin: 0 5px; }

	.av-lang { position: relative; }
	.av-lang__btn { padding: 6px 8px; font-size: 12.5px; }
	.av-lang__menu {
		left: 50%;
		right: auto;
		transform: translate(-50%, -4px);
		min-width: 200px;
		max-width: calc(100vw - 32px);
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.av-lang.is-open .av-lang__menu { transform: translate(-50%, 0); }
	.av-lang__menu a { padding: 10px 12px; }
}

/* Bottom footer columns: "All courses →" / "All articles →" (1.11.12). */
.avf-cat-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #f0b429; text-decoration: none; }
.avf-cat-more:hover { color: #fff; }


/* ==========================================================================
   Courses menu on phones and tablets (1.11.14) - see template-parts/header/
   mega-menu.php. Hidden on desktop, where the mega panel is used.
   ========================================================================== */
.av-mmega { display: none; }
@media (max-width: 992px) {
	.av-mmega { display: block; margin: 2px 0 8px; border: 1px solid var(--av-line); border-radius: 12px; background: #fafbff; overflow: hidden; }
	.av-mmega summary { list-style: none; cursor: pointer; }
	.av-mmega summary::-webkit-details-marker { display: none; }
	.av-mmega__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--av-primary); }
	.av-mmega__toggle::after,
	.av-mmega__cat > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0; margin-top: -4px; }
	.av-mmega[open] > .av-mmega__toggle::after,
	.av-mmega__cat[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
	.av-mmega__body { padding: 0 8px 10px; }
	.av-mmega__cat { border-top: 1px solid var(--av-line); }
	.av-mmega__cat > summary { display: flex; align-items: center; gap: 8px; padding: 11px 6px; font-size: 14px; font-weight: 600; color: var(--av-dark); }
	.av-mmega__name { flex: 1; min-width: 0; line-height: 1.35; }
	.av-mmega__n { flex-shrink: 0; min-width: 24px; padding: 1px 7px; border-radius: 100px; background: #eef1ff; color: var(--av-primary); font-size: 11.5px; font-weight: 700; text-align: center; }
	.av-mmega__inner { padding: 2px 6px 12px 10px; }
	.av-mmega__grp + .av-mmega__grp { margin-top: 10px; }
	.av-mmega__grph { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--av-dark); padding: 4px 0; text-decoration: none; }
	.av-mmega__inner ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--av-line); }
	.av-mmega__inner li a { display: block; padding: 6px 0; font-size: 13px; line-height: 1.4; color: var(--av-text); text-decoration: none; }
	.av-mmega__inner li a:hover { color: var(--av-primary); }
	.av-mmega__all,
	.av-mmega__browse { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--av-primary); text-decoration: none; }
	.av-mmega__browse { margin: 12px 6px 0; }
	.av-mmega__empty { font-size: 13px; color: var(--av-text); margin: 4px 0; }
	/* Sub-categories open on their own. */
	details.av-mmega__grp > summary.av-mmega__grph { padding: 8px 0; cursor: pointer; }
	details.av-mmega__grp > summary.av-mmega__grph::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0; margin: -3px 2px 0 4px; opacity: .6; }
	details.av-mmega__grp[open] > summary.av-mmega__grph::after { transform: rotate(-135deg); margin-top: 3px; }
	.av-mmega__grp + .av-mmega__grp { margin-top: 0; border-top: 1px dashed var(--av-line); }
	.av-mmega__inner li.av-mmega__more a { font-weight: 700; color: var(--av-primary); }
}

/* ==========================================================================
   Comments - blog articles (1.11.16). Markup: comments.php.
   ========================================================================== */
.av-comments { margin-top: 48px; padding: 32px; background: #fff; border: 1px solid var(--av-line); border-radius: 18px; box-shadow: 0 6px 24px rgba(0,0,60,.05); }
.av-comments__title { font-size: 1.35rem; font-weight: 800; color: var(--av-dark); margin: 0 0 6px; line-height: 1.3; }
.av-comments__title small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; }
.av-comments__list { list-style: none; margin: 18px 0 32px; padding: 0; }
.av-comments__list .children { list-style: none; margin: 14px 0 0 28px; padding: 0; }
.av-comments__list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--av-line); }
.av-comments__list .comment-author { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--av-dark); }
.av-comments__list .comment-author img { border-radius: 50%; }
.av-comments__list .comment-author .says { display: none; }
.av-comments__list .comment-metadata { margin: 4px 0 8px 60px; font-size: 12.5px; }
.av-comments__list .comment-metadata a { color: #6b7280; }
.av-comments__list .comment-content { margin-left: 60px; color: var(--av-text); line-height: 1.7; }
.av-comments__list .reply { margin-left: 60px; font-size: 13px; font-weight: 700; }

.av-comments .comment-reply-title,
.av-comments #reply-title { margin-top: 0; }
.av-comments .logged-in-as,
.av-comments .comment-notes { margin: 0 0 20px; font-size: 14px; color: #5a6072; line-height: 1.6; }
.av-comments .logged-in-as a { font-weight: 600; }
.av-comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 0; }
.av-comment-form > p { margin: 0; }
.av-comment-form .comment-notes,
.av-comment-form .logged-in-as,
.av-comment-form .comment-form-comment,
.av-comment-form .comment-form-url,
.av-comment-form .comment-form-cookies-consent,
.av-comment-form .form-submit { grid-column: 1 / -1; }
.av-comment-form label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--av-dark); }
.av-comment-form .required { color: #d63638; }
.av-comment-form textarea,
.av-comment-form input[type="text"],
.av-comment-form input[type="email"],
.av-comment-form input[type="url"] {
	display: block; width: 100%; box-sizing: border-box;
	padding: 12px 14px; font: inherit; font-size: 15px; color: var(--av-text);
	background: #f8f9fc; border: 1px solid rgba(0,0,60,.14); border-radius: 12px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.av-comment-form textarea { min-height: 150px; resize: vertical; }
.av-comment-form textarea:focus,
.av-comment-form input:focus { outline: none; background: #fff; border-color: var(--av-primary); box-shadow: 0 0 0 3px rgba(0,30,210,.12); }
.av-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.av-comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.av-comment-form .form-submit { margin-top: 4px; }
.av-comment-form .av-comment-form__submit,
.av-comment-form input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px;
	border: 0; border-radius: 12px; background: var(--av-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
	transition: background .15s, transform .15s;
}
.av-comment-form input[type="submit"]:hover { background: var(--av-dark); transform: translateY(-1px); }
@media (max-width: 600px) {
	.av-comments { padding: 22px 18px; }
	.av-comment-form { grid-template-columns: 1fr; }
	.av-comments__list .comment-metadata,
	.av-comments__list .comment-content,
	.av-comments__list .reply { margin-left: 0; }
}
.art-comments .av-comments { margin-top: 0; }

/* News & Promotions: less space between the post cards and the
   "Looking for a specific course?" band (1.11.17). */
.av-inner .np-listing { padding-bottom: 40px; }
.av-inner .np-cta { padding-top: 0; }

/* Course CTA band inside a blog article, above "Share this article". The
   article column is narrower than the full-width band was, so it is a little
   more compact and stacks earlier. */
.av-inner .art-cta-band { margin-top: 24px; }
/* Trim the bottom margins WPBakery leaves on the last row / element of the
   article, which otherwise open a large gap above the band. */
.av-inner .art-body > :last-child,
.av-inner .art-body .vc_row:last-child,
.av-inner .art-body .vc_row:last-child .wpb_column:last-child .vc_column-inner > .wpb_wrapper > :last-child,
.av-inner .art-body .wpb_text_column:last-child,
.av-inner .art-body .wpb_text_column:last-child .wpb_wrapper > :last-child { margin-bottom: 0 !important; }
.av-inner .art-body > p:empty:last-child { display: none; }
.av-inner .art-cta-band + .art-foot { margin-top: 28px; padding-top: 20px; }
.av-inner .art-cta-band .cta-band { padding: 30px 32px; }
.av-inner .art-cta-band .cta-band h2 { font-size: 22px; }
@media (max-width: 1199px) {
  .av-inner .art-cta-band .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .av-inner .art-cta-band .cta-band { padding: 24px; }
}
.av-inner .np-listing .load-more-wrap:has(> [hidden]) { display: none; }
.av-inner .np-listing .load-more-wrap { margin-top: 28px; }
@media (max-width: 767px) {
	.av-inner .np-listing { padding-bottom: 28px; }
}

/* Blog article: less space between "Related articles" and the course band (1.11.18). */
.av-inner .art-related { padding-bottom: 40px; }
@media (max-width: 767px) { .av-inner .art-related { padding-bottom: 28px; } }


/* Title + description above a pasted form shortcode (About, Auditing,
   Outsourcing CTA panels) - 1.11.20. Matches the built-in form's heading. */
.av-inner .qf-head { margin: 0 0 18px; }
.av-inner .qf-head .qf-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; line-height: 1.3; color: #fff; }
.av-inner .qf-head .qf-sub { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); }
.av-inner .cta-panel-form--light .qf-head .qf-title { color: #fff; }


/* ==========================================================================
   Train Your Workforce (1.11.23)
   ========================================================================== */
/* Facts: a full-width band under the hero, not a floating box. */
.av-inner .trust-bar.trust-bar--band { margin-top: 0; padding: 22px 0; background: #fff; border-bottom: 1px solid var(--border, #e5e8f0); box-shadow: 0 6px 18px -14px rgba(0,0,60,.25); }
.av-inner .trust-bar.trust-bar--band .trust-inner { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

/* How We Support: four alternating steps on a blue band. */
.av-inner .twf-sup__head { text-align: center; padding-top: clamp(48px, 6vw, 72px); padding-bottom: 32px; }
.av-inner .twf-sup__head .section-sub { margin-left: auto; margin-right: auto; }
.av-inner .twf-sup__band { background: linear-gradient(160deg, var(--navy-bg, #00003c) 0%, var(--brand-blue3, #0f2bb5) 55%, var(--brand-blue, #1a3ed8) 100%); padding: clamp(44px, 6vw, 72px) 0; }
.av-inner .twf-sup__steps { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.av-inner .twf-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.av-inner .twf-step--flip .twf-step__media { order: 2; }
.av-inner .twf-step__media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.08); }
.av-inner .twf-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-inner .twf-step__media.is-empty { display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); }
.av-inner .twf-step__glyph { font-size: clamp(54px, 7vw, 84px); color: rgba(255,255,255,.85); }
.av-inner .twf-step__no { position: absolute; left: 16px; top: 14px; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .06em; color: #fff; background: rgba(0,0,60,.45); padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(4px); }
.av-inner .twf-step__copy { color: #fff; }
.av-inner .twf-step__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.av-inner .twf-step__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand-blue, #1a3ed8); font-size: 18px; }
.av-inner .twf-step__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.av-inner .twf-step__title { font-family: 'DM Sans', sans-serif; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.25; color: #fff; margin: 0 0 12px; }
.av-inner .twf-step__text { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 56ch; }
.av-inner .twf-step__tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.av-inner .twf-step__tags li { padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 600; color: #fff; }
.av-inner .twf-step__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.av-inner .twf-step .btn-white-solid { background: #fff; color: var(--brand-blue, #1a3ed8); }
.av-inner .twf-step .btn-white-solid:hover { background: #eef2ff; }
@media (max-width: 860px) {
	.av-inner .twf-step { grid-template-columns: 1fr; }
	.av-inner .twf-step--flip .twf-step__media { order: 0; }
}


/* Train Your Workforce · How We Support - scroll effect (1.11.24).
   Each step card sticks below the header and the next one slides up over it,
   so the steps stack as the page scrolls. Pure CSS (position: sticky), so
   there is no script to stall inside a builder row. Desktop only. */
.av-inner .twf-sup .twf-sup__head { padding-top: clamp(44px, 5vw, 64px); padding-bottom: 30px; }
@media (min-width: 992px) {
	.av-inner .twf-sup__band { padding-bottom: clamp(60px, 8vw, 110px); }
	/* The scroll distance between cards is the container's GAP, not a margin
	   on each card. A sticky element keeps its whole margin box inside its
	   container, so a 34vh bottom margin made every card let go 34vh too
	   early: card 3 scrolled away while card 4 was still a third of a screen
	   below it, and step 4 stopped half-way up ("stuck in between"). */
	.av-inner .twf-sup__steps { gap: 34vh; }
	.av-inner .twf-step {
		position: sticky;
		top: calc(110px + var(--twf-i, 0) * 22px);
		margin-bottom: 0;
		box-shadow: 0 -18px 40px -24px rgba(0,0,40,.6);
		transform-origin: center top;
	}
	.av-inner .twf-step:nth-child(1) { --twf-i: 0; background: #1a3ed8; }
	.av-inner .twf-step:nth-child(2) { --twf-i: 1; background: #1534c2; }
	.av-inner .twf-step:nth-child(3) { --twf-i: 2; background: #102aa6; }
	.av-inner .twf-step:nth-child(4) { --twf-i: 3; background: #0b1f84; }
	body.admin-bar .av-inner .twf-step { top: calc(142px + var(--twf-i, 0) * 22px); }
}
/* WPBakery wrappers must not clip the band, or sticky stops working. */
.av-inner .vc_row:has(.twf-sup), .av-inner .wpb_column:has(.twf-sup), .av-inner .vc_column-inner:has(.twf-sup), .av-inner .wpb_wrapper:has(.twf-sup) { overflow: visible !important; }

/* ===========================================================================
   WPBakery "Text Block" content on the converted inner pages (.av-inner),
   e.g. Terms & Conditions, Data Protection & Privacy Policy.

   inner.css starts with `.av-inner *{margin:0;padding:0}` for the approved
   section designs. Plain editor text inherits that too: lists lose their
   bullets and indent, paragraphs run together, and a stretched row puts the
   text edge to edge. These rules put the text back in the page column
   (same 1180px + 24px gutter as .av-inner .container) with normal document
   typography. Kept here, not in inner.css, because inner.css is generated by
   build/scope-css.js and would lose hand edits on the next build.
   =========================================================================== */
.av-inner .wpb_text_column{box-sizing:border-box;max-width:1180px;margin-left:auto;margin-right:auto;padding:clamp(24px,3vw,40px) 24px;font-size:15.5px;line-height:1.75;color:#374766}
.av-inner .wpb_text_column + .wpb_text_column{padding-top:0}
.av-inner .wpb_text_column .wpb_wrapper > *:first-child{margin-top:0}
.av-inner .wpb_text_column p{margin:0 0 1em}
.av-inner .wpb_text_column h1,.av-inner .wpb_text_column h2,.av-inner .wpb_text_column h3,.av-inner .wpb_text_column h4{color:#0B1527;line-height:1.25;margin:1.6em 0 .6em}
.av-inner .wpb_text_column h1{font-size:clamp(28px,3.4vw,40px)}
.av-inner .wpb_text_column h2{font-size:clamp(22px,2.4vw,28px)}
.av-inner .wpb_text_column h3{font-size:20px}
.av-inner .wpb_text_column h4{font-size:17px}
.av-inner .wpb_text_column ul,.av-inner .wpb_text_column ol{margin:0 0 1.2em;padding-left:1.5em}
.av-inner .wpb_text_column ul{list-style:disc outside}
.av-inner .wpb_text_column ol{list-style:decimal outside}
.av-inner .wpb_text_column ul ul{list-style-type:circle}
.av-inner .wpb_text_column ol ol{list-style-type:lower-alpha}
.av-inner .wpb_text_column li{margin:0 0 .45em;padding:0}
.av-inner .wpb_text_column li > ul,.av-inner .wpb_text_column li > ol{margin:.45em 0 .2em}
.av-inner .wpb_text_column a{color:#1A3ED8;text-decoration:underline;text-underline-offset:3px}
.av-inner .wpb_text_column strong,.av-inner .wpb_text_column b{font-weight:700;color:#0B1527}
.av-inner .wpb_text_column table{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.av-inner .wpb_text_column th,.av-inner .wpb_text_column td{border:1px solid #e3e8f2;padding:10px 14px;text-align:left;vertical-align:top}
.av-inner .wpb_text_column blockquote{margin:0 0 1.2em;padding:14px 20px;border-left:4px solid #1A3ED8;background:#f3f6ff}
.av-inner .wpb_text_column img{max-width:100%;height:auto}
@media (max-width:600px){.av-inner .wpb_text_column{padding-left:18px;padding-right:18px;font-size:15px}}


/* ==========================================================================
   Dialog - header "Request a Proposal" + home "Request a Training Proposal"
   Generic: any .btn with data-av-modal="<id>" opens the .av-modal of that id.
   ========================================================================== */
.av-modal{position:fixed;inset:0;z-index:1020;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
/* The [hidden] attribute alone loses to display:flex above. */
.av-modal[hidden]{display:none}
.av-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,40,.62);backdrop-filter:blur(2px)}
.av-modal__dialog{position:relative;width:100%;max-width:620px;margin:auto;background:#fff;border-radius:var(--r-lg,14px);
  box-shadow:0 30px 80px -20px rgba(0,0,40,.55);overflow:hidden;animation:av-modal-in .22s cubic-bezier(.22,.61,.36,1)}
@keyframes av-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Someone who has asked their browser for less movement gets none. */
@media(prefers-reduced-motion:reduce){.av-modal__dialog{animation:none}}
.av-modal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;background:var(--navy-bg,#00003C);color:#fff}
.av-modal__title{font-family:'DM Sans',var(--av-font-head,sans-serif);font-size:1.2rem;font-weight:700;color:#fff;margin:0;letter-spacing:-.2px}
.av-modal__close{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:16px;display:grid;place-items:center;transition:background .15s}
.av-modal__close:hover{background:rgba(255,255,255,.28)}
.av-modal__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.av-modal__body{padding:22px}

/* Fluent Forms inside the dialog. The theme styles no form anywhere else, so
   these are scoped to .av-modal and cannot reach the contact section's form.
   They only restate what the plugin's own stylesheet does, so the popup still
   looks finished on a site where that stylesheet has been turned off. */
.av-modal__body .ff-el-group{margin-bottom:16px}
.av-modal__body .ff-el-input--label label{font-size:13px;font-weight:600;color:var(--navy,#0B1527);margin-bottom:6px}
.av-modal__body .ff-el-form-control{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--border,rgba(11,21,39,0.09));
  font-family:inherit;font-size:14px;color:var(--text,#0B1527);background:#fff;transition:border-color .15s,box-shadow .15s}
.av-modal__body .ff-el-form-control:focus{border-color:var(--brand-blue,#1A3ED8);box-shadow:0 0 0 3px rgba(26,62,216,.18);outline:none}
.av-modal__body textarea.ff-el-form-control{min-height:110px;resize:vertical}
.av-modal__body .ff-btn-submit{background:var(--brand-orange,#E8510A);color:#fff;border:none;border-radius:8px;
  padding:13px 26px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .18s}
.av-modal__body .ff-btn-submit:hover{background:#C44008}

body.av-modal-open{overflow:hidden}

@media(max-width:600px){
  .av-modal{padding:0}
  /* Full-height sheet: a centred card on a phone leaves the keyboard covering
     half the form. */
  .av-modal__dialog{max-width:none;min-height:100%;border-radius:0;margin:0}
}
/* Fallback values: theme.css loads on every page, home.css (which defines
   these variables) only on the home page. */


/* Page numbers (the_posts_pagination) on archive, funding, search and index
   pages - styled like the course listing's pager. The blog listing uses its
   own .blog-pagination class and keeps its own look. */
.navigation.pagination { margin: 40px 0 8px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.navigation.pagination .page-numbers {
	min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--av-font-head); font-size: 15px; font-weight: 700; line-height: 1;
	color: var(--av-dark); background: #fff; border: 1px solid rgba(0, 0, 60, .12);
	box-shadow: 0 1px 2px rgba(0, 0, 60, .05); text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s, box-shadow .15s;
}
.navigation.pagination a.page-numbers:hover { border-color: var(--av-primary); color: var(--av-primary); box-shadow: 0 4px 12px -4px rgba(0, 30, 210, .25); }
.navigation.pagination a.page-numbers:focus-visible { outline: 3px solid rgba(0, 30, 210, .35); outline-offset: 2px; }
.navigation.pagination .page-numbers.current { background: linear-gradient(135deg, var(--av-primary), #1a3ed8); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(0, 30, 210, .55); }
.navigation.pagination .page-numbers.dots { min-width: 24px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--av-muted); }
.navigation.pagination .prev, .navigation.pagination .next { padding: 0 18px; }
.navigation.pagination .page-numbers i { font-size: 13px; }
@media (max-width: 600px) {
	.navigation.pagination .nav-links { gap: 6px; }
	.navigation.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; }
	.navigation.pagination .prev, .navigation.pagination .next { padding: 0 12px; }
}

/* Phone field country picker (intl-tel-input, used by Fluent Forms). On the
   blue form sections (Train Your Workforce, Auditing) the dropdown inherited
   the white text colour, so country names were white on white. */
.iti .iti__country-list,
.iti .iti__dropdown-content,
.iti--container .iti__country-list,
.iti--container .iti__dropdown-content { color: #0A1024; background: #fff; }
.iti .iti__country-name,
.iti--container .iti__country-name { color: #0A1024 !important; }
.iti .iti__dial-code,
.iti--container .iti__dial-code { color: #7B84AA !important; }
.iti .iti__country.iti__highlight,
.iti--container .iti__country.iti__highlight,
.iti .iti__country:hover,
.iti--container .iti__country:hover { background-color: #E9ECFF !important; }
.iti .iti__search-input,
.iti--container .iti__search-input { color: #0A1024 !important; background: #fff !important; }
.iti .iti__search-input::placeholder,
.iti--container .iti__search-input::placeholder { color: #7B84AA !important; }