/*
 * Apollo Health — navigation and footer
 * ---------------------------------------------------------------------------
 * Self-contained on purpose. Every selector is namespaced .ap-* and scoped
 * under .ap-shell, so nothing here can reach into Bootstrap 4 or the legacy
 * style.css — and the whole file can be lifted out in one piece when the site
 * moves to Tailwind.
 *
 * Loaded after style.css (see BredesenScripts in functions.php).
 */

.ap-shell {
	/* Palette, taken from the values already in style.css. */
	--ap-brand: #13374b;
	--ap-brand-mid: #1f516d;
	--ap-brand-tint: #d0e1e7;
	--ap-brand-pale: #eef4f7;
	--ap-link: #176a98;
	--ap-cta: #708c66;
	--ap-cta-deep: #5f7757;
	--ap-ink: #202d2d;
	--ap-ink-2: #6a818d;
	--ap-ink-3: #90a3ac;
	--ap-paper: #ffffff;
	--ap-rule: #dbe3e8;
	--ap-rule-soft: #edf1f4;
	--ap-shadow: 0 24px 48px -12px rgba(19, 55, 75, 0.22), 0 2px 6px rgba(19, 55, 75, 0.08);

	/* Header height. --ap-bar adds the 3px accent stripe above the bar; the
	   mobile sheet measures itself against the full bar. */
	--ap-h: 64px;
	--ap-accent: 3px;
	--ap-bar: 67px;
	--ap-bar: calc(var(--ap-h) + var(--ap-accent));

	font-family: GilroyRegular, sans-serif;
}

@media (min-width: 1024px) {
	.ap-shell {
		--ap-h: 72px;
	}
}

/* Scoped reset. style.css styles bare ul/li/button/p globally; this keeps
   those rules out of the component without touching them.
 *
 * Everything below is wrapped in :where(), which contributes NO specificity.
 * Without it `.ap-shell button` (0,1,1) would outrank every component class
 * (0,1,0) and silently zero out their padding and margins. */
.ap-shell,
.ap-shell :where(*, *::before, *::after) {
	box-sizing: border-box;
}

.ap-shell :where(p) {
	margin: 0;
	padding: 0;
}

/* style.css sets `a { font-family: GilroyBold }` at 18px. Anything in the
   component that doesn't name its own face would inherit the bold one, so
   links start from the shell's type and opt back in where they need to. */
.ap-shell :where(a) {
	text-decoration: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.ap-shell :where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-shell :where(li) {
	width: auto;
	margin: 0;
	padding: 0;
}

.ap-shell :where(li)::before {
	content: none;
	display: none;
}

.ap-shell :where(button) {
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ap-shell :where(img) {
	max-width: 100%;
}

/* ========================================================================
   Header
   ======================================================================== */

/* Sticky lives on the wrapper, not the bar: a sticky element only travels
   inside its own containing block, and .ap-shell is exactly bar-height, so
   sticking .ap-header to it did nothing. The bar itself stays positioned so
   the mega panels and the mobile sheet can anchor to it. */
.ap-shell--head {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Logged-in offsets. WordPress reserves 32px for the admin bar, 46px below
   782px, and below 600px it switches the bar to position:absolute so it
   scrolls away entirely — reserving anything there pins the nav below the top
   of the screen with a strip of page showing above it. */
.admin-bar .ap-shell--head {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ap-shell--head {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .ap-shell--head {
		top: 0;
	}
}

.ap-header {
	position: relative;
	background: var(--ap-brand);
	/* Separates the bar from whatever it sits on — it is sticky, so it passes
	   over page content, and interior heroes now run a navy band directly
	   beneath it. */
	box-shadow: 0 2px 10px rgba(9, 26, 36, 0.28);
}


@media screen and (max-width: 782px) {
	.admin-bar .ap-header {
		top: 46px;
	}
}

.ap-header__accent {
	height: var(--ap-accent);
	width: 100%;
	background: var(--ap-cta);
}

.ap-header__inner {
	display: flex;
	align-items: stretch;
	gap: 8px;
	height: var(--ap-h);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 1024px) {
	.ap-header__inner {
		padding: 0 24px;
	}
}

.ap-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 12px 8px 12px 0;
}

.ap-logo img {
	display: block;
	height: 32px;
	width: auto;
}

/* Below 360px the short label alone isn't enough — a 320px screen still
   overflows by 12px — so the logo and the header's own padding give up a
   little too. */
@media (max-width: 359px) {
	.ap-header__inner {
		padding: 0 12px;
	}

	.ap-logo img {
		height: 28px;
	}
}

/* 36px until the bar has room to spare, 40px from 1280. With the search
   icon beside Log In the 40px mark left the 1024px window 16px short and
   the 1120px one 4px short, and the labels wrapped. */
@media (min-width: 1024px) {
	.ap-logo img {
		height: 36px;
	}
}

@media (min-width: 1280px) {
	.ap-logo img {
		height: 40px;
	}
}

/* ------------------------------------------------ desktop menu bar */

.ap-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ap-nav {
		display: flex;
		flex: 1 1 auto;
		align-items: stretch;
	}
}

.ap-nav-item {
	display: flex;
	align-items: stretch;
}

.ap-nav-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	/* 6px: at 16px type the four labels, search, Log In and the button clear
	   a 1024px window by 8px — by 12px less at 8px padding, which is where the
	   labels start to wrap. The padding comes back in two steps below, once
	   the window has the room for it. */
	padding: 0 6px;
	font-family: GilroyMedium, sans-serif;
	font-size: 16px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.9);
	transition: color 0.15s ease;
}

.ap-nav-btn:hover,
.ap-nav-btn:focus-visible {
	color: #ffffff;
}

@media (min-width: 1120px) {
	.ap-nav-btn {
		padding: 0 14px;
	}
}

@media (min-width: 1280px) {
	.ap-nav-btn {
		padding: 0 16px;
		gap: 6px;
		font-size: 17px;
	}
}

.ap-caret {
	flex: 0 0 auto;
	width: 11px;
	height: 7px;
	color: rgba(255, 255, 255, 0.6);
	transition: transform 0.16s ease;
}

/* ------------------------------------------------------ the panel */

.ap-panel {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	background: var(--ap-paper);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--ap-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.ap-nav-item.is-open > .ap-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ap-nav-item.is-open > .ap-nav-btn .ap-caret {
	transform: rotate(180deg);
	color: rgba(255, 255, 255, 0.9);
}

/* The open tab is lit and underlined in the accent green, so the panel below
   reads as belonging to it. Inset shadow rather than a border, so nothing
   shifts by a pixel when it opens. */
.ap-nav-item.is-open > .ap-nav-btn {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 -3px 0 var(--ap-cta);
}

.ap-panel__body {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 24px;
}

.ap-panel__grid {
	display: grid;
	gap: 32px 40px;
}

@media (min-width: 1024px) {
	.ap-panel__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ap-panel__grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.ap-panel__grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Where a column of cards sits between two columns of links, equal thirds
	   waste the left one — four short links leave a third of the track empty —
	   while the cards are the content that could use the width. Move 60px from
	   the first track to the second; the third is untouched. */
	.ap-panel__grid--cards {
		grid-template-columns: 0.85fr 1.15fr 1fr;
	}

	.ap-col--wide {
		grid-column: span 2;
	}

	/* A column of cards is the only one with a hard edge of its own, so it
	   takes a little air on each side to keep that edge off the neighbouring
	   text. Text columns space themselves with their ragged edge. The heading
	   and the footnote move with the cards, so the column insets as one block.
	   The gutters carry no rules: the columns are told apart by their
	   headings and their spacing alone. */
	.ap-col--cards {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ------------------------------------------------ a column of links */

.ap-group__h {
	margin: 0 0 12px;
	font-family: GilroyBold, sans-serif;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ap-ink-3);
}

.ap-links > * + * {
	margin-top: 1px;
}

.ap-links--cards > * + * {
	margin-top: 16px;
}

.ap-links--split {
	display: grid;
	gap: 2px 32px;
}

@media (min-width: 640px) {
	.ap-links--split {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ap-link {
	display: block;
	/* Sides only, never the `margin` shorthand: it would reset the margin-top
	   that .ap-links--cards uses to space stacked cards, and it wins on
	   source order. */
	margin-left: -8px;
	margin-right: -8px;
	padding: 7px 8px;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.ap-link:hover {
	background: var(--ap-brand-pale);
}

.ap-link--card {
	/* Cards sit flush with the column, so undo .ap-link's side pull. */
	margin-left: 0;
	margin-right: 0;
	padding: 16px;
	border: 1px solid var(--ap-rule);
	border-radius: 10px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ap-link--card:hover {
	border-color: var(--ap-cta);
	background: var(--ap-brand-pale);
}

.ap-link__t {
	display: block;
	font-family: GilroyMedium, sans-serif;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ap-brand);
	transition: color 0.15s ease;
}

.ap-link:hover .ap-link__t {
	color: var(--ap-link);
}

.ap-link__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
}

.ap-link__price {
	font-family: GilroyBold, sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--ap-cta-deep);
	white-space: nowrap;
}

.ap-link__d {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ap-ink-2);
}

.ap-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(112, 140, 102, 0.12);
	font-family: GilroyBold, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ap-cta-deep);
	vertical-align: middle;
}

.ap-group__foot {
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--ap-brand-pale);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ap-ink-2);
}

.ap-group__foot b {
	font-family: GilroyBold, sans-serif;
	font-weight: normal;
	color: var(--ap-brand);
}

/* ------------------------------------------------------- the rail */

.ap-rail {
	align-self: start;
	padding: 20px;
	border-radius: 12px;
	background: var(--ap-brand-pale);
}

.ap-rail__h {
	font-family: GilroyBold, sans-serif;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ap-brand);
}

.ap-rail__p {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ap-ink-2);
}

.ap-rail__cta {
	display: inline-block;
	margin-top: 12px;
	font-family: GilroyBold, sans-serif;
	font-size: 15px;
	color: var(--ap-link);
}

.ap-rail__cta:hover {
	color: var(--ap-link);
	text-decoration: underline;
}

.ap-rail__btn {
	margin-top: 16px;
}

/* --------------------------------------- closing banner in a panel */

.ap-banner {
	border-top: 1px solid var(--ap-rule);
	background: rgba(238, 244, 247, 0.6);
}

.ap-banner__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 16px 24px;
}

.ap-banner__p {
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ap-ink-2);
}

/* ----------------------------------------------------- the button */

.ap-btn {
	display: inline-block;
	flex: 0 0 auto;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--ap-cta);
	font-family: GilroyBold, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: #ffffff;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.ap-btn:hover,
.ap-btn:focus-visible {
	background: var(--ap-cta-deep);
	color: #ffffff;
}

/* On the narrowest phones the full label leaves the burger about a pixel of
   room — logo, button and burger come to 374px inside a 375px screen — so the
   button drops to its short label. Only one span is ever rendered, so screen
   readers hear one name, not both. */
.ap-btn__short {
	display: none;
}

@media (max-width: 389px) {
	.ap-btn__long {
		display: none;
	}

	.ap-btn__short {
		display: inline;
	}
}

/* Second tier. The green belongs to "Check Your Score" in the header; a
   panel's closing CTA sits below it in the same eyeline, so it takes the
   navy and stops competing. */
.ap-btn--alt {
	background: var(--ap-brand);
}

.ap-btn--alt:hover,
.ap-btn--alt:focus-visible {
	background: var(--ap-brand-mid);
	color: #ffffff;
}

/* ------------------------------------------------ right-hand side */

.ap-actions {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin-left: auto;
	/* Positioning context for the Log In panel. Without it the panel resolves
	   against .ap-header, which is full-bleed, so it drifts away from the
	   button as the window grows past the 1320px content container. */
	position: relative;
}

.ap-actions__cta {
	display: flex;
	align-items: center;
}

/* The header CTA sits in the same eyeline as the tabs, so it takes their type
   scale and their two steps rather than the 14px the panels' buttons use.
   Scoped to the header: a panel's closing CTA answers 15px banner copy, not
   the bar. */
.ap-actions__cta .ap-btn {
	padding-right: 16px;
	padding-left: 16px;
	font-size: 16px;
}

@media (min-width: 1280px) {
	.ap-actions__cta .ap-btn {
		padding-right: 20px;
		padding-left: 20px;
		font-size: 17px;
	}
}

/* Search sits with Log In: an icon only, desktop only, on the same eyeline
   and in the same off-white as the tabs. Its padding follows the tabs' two
   steps so the gap to Log In matches the gaps between the labels. */
.ap-search {
	display: none;
	align-items: center;
	padding: 0 6px;
	color: rgba(255, 255, 255, 0.9);
	transition: color 0.15s ease;
}

@media (min-width: 1024px) {
	.ap-search {
		display: flex;
	}
}

@media (min-width: 1120px) {
	.ap-search {
		padding: 0 12px;
	}
}

/* Hover matches an open tab's lit background, so an icon with no label
   still answers the pointer. style.css turns focused links green (a:focus),
   and the icon gets focus back when the modal closes, so it is pinned to
   its own colour and shows focus as a ring. */
.ap-search:hover,
.ap-search:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.07);
}

.ap-search:focus {
	color: rgba(255, 255, 255, 0.9);
}

.ap-search:focus-visible {
	color: #ffffff;
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: -4px;
}

/* The header CTA and the mobile Search row are links too. */
.ap-actions__cta .ap-btn:focus,
.ap-m-cta:focus {
	color: #ffffff;
}

.ap-m-search:focus {
	color: var(--ap-brand);
}

.ap-search-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.ap-login {
	display: none;
	/* Positioning context for the panel, so it hangs off the Log In control
	   itself. .ap-actions is also relative — that was what stopped the panel
	   drifting toward the page edge on wide screens — but anchoring one level
	   in aligns the panel's edge with the tab that opens it. */
	position: relative;
}

@media (min-width: 1024px) {
	.ap-login {
		display: flex;
		align-items: stretch;
	}
}

.ap-panel--login {
	left: auto;
	right: 0;
	width: 280px;
	padding: 8px;
	border-radius: 0 0 12px 12px;
}

.ap-login-link {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.ap-login-link:hover {
	background: var(--ap-brand-pale);
}

.ap-login-link b {
	display: block;
	font-family: GilroyMedium, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: var(--ap-brand);
}

.ap-login-link span {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--ap-ink-2);
}

/* ---------------------------------------------------- the burger */

.ap-burger {
	display: flex;
	align-items: center;
	margin-right: -8px;
	padding: 0 12px;
	color: #ffffff;
}

@media (min-width: 1024px) {
	.ap-burger {
		display: none;
	}
}

.ap-burger svg {
	width: 24px;
	height: 24px;
}

.ap-burger__close {
	display: none;
}

.ap-header.is-mobile-open .ap-burger__open {
	display: none;
}

.ap-header.is-mobile-open .ap-burger__close {
	display: block;
}

/* ========================================================================
   Mobile sheet
   ======================================================================== */

.ap-mobile {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	/* Full screen: the sheet owns the viewport below the bar rather than
	   hugging its content, so the page behind never shows through a gap and
	   the panel looks the same on every device height. */
	height: calc(100vh - var(--ap-bar));
	height: calc(100dvh - var(--ap-bar));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--ap-paper);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--ap-shadow);
}

.ap-mobile.is-open {
	display: block;
}

/* The sheet covers everything, so the page behind must not scroll under it.
   Set on <body> by the nav script while the sheet is open. The search modal
   (js/ap-search.js) sets its own class for the same lock, because the nav
   script clears ap-nav-locked on resize and would pull the rug from under
   an open modal. */
body.ap-nav-locked,
body.ap-search-open {
	overflow: hidden;
}

/* The Zendesk launcher floats at z-index 999998 and lands on top of the
   sheet's CTA. Hide it while the menu or the modal owns the screen. */
body.ap-nav-locked iframe#launcher,
body.ap-search-open iframe#launcher {
	display: none;
}

@media (min-width: 1024px) {
	.ap-mobile,
	.ap-mobile.is-open {
		display: none;
	}
}

/* Full-height sheet: sections stack from the top, the CTA is pushed to the
   bottom so the empty space below the last section reads as deliberate and
   the button lands in easy thumb reach. */
.ap-mobile__in {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 12px 16px 24px;
}

.ap-acc {
	border-bottom: 1px solid var(--ap-rule-soft);
}

/* Search heads the sheet, as a row in the same type as the section heads,
   with the magnifier where their caret sits. */
.ap-m-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--ap-rule-soft);
	font-family: GilroyBold, sans-serif;
	font-size: 18px;
	color: var(--ap-brand);
}

.ap-m-search .ap-search-icon {
	color: var(--ap-ink-3);
}

.ap-acc__head {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	text-align: left;
	font-family: GilroyBold, sans-serif;
	font-size: 18px;
	color: var(--ap-brand);
}

.ap-acc__head .ap-caret {
	color: var(--ap-ink-3);
}

.ap-acc__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.22s ease;
}

.ap-acc.is-open > .ap-acc__body {
	grid-template-rows: 1fr;
}

.ap-acc__body > div {
	overflow: hidden;
}

.ap-acc.is-open > .ap-acc__head .ap-caret {
	transform: rotate(180deg);
}

.ap-acc__inner {
	padding-bottom: 16px;
}

.ap-m-h {
	margin: 12px 0 8px;
	font-family: GilroyBold, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ap-ink-3);
}

.ap-m-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 17px;
	color: var(--ap-brand);
}

.ap-m-link__price {
	flex: 0 0 auto;
	font-family: GilroyBold, sans-serif;
	font-size: 14px;
	color: var(--ap-cta-deep);
}

.ap-m-login {
	display: block;
	padding: 8px 0;
}

.ap-m-login b {
	display: block;
	font-weight: normal;
	font-size: 17px;
	color: var(--ap-brand);
}

.ap-m-login span {
	display: block;
	font-size: 14px;
	color: var(--ap-ink-2);
}

.ap-m-cta {
	display: block;
	margin-top: 12px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--ap-cta);
	text-align: center;
	font-family: GilroyBold, sans-serif;
	font-size: 15px;
	letter-spacing: 0.03em;
	color: #ffffff;
}

.ap-m-cta:hover {
	color: #ffffff;
}

.ap-mobile__cta {
	margin: 24px 0 0;
	margin-top: auto;
	font-size: 15px;
	padding: 13px 20px;
}

/* ========================================================================
   Footer archive
   ======================================================================== */

.ap-footer {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: left;
	font-family: GilroyRegular, sans-serif;
}

.ap-footer__logo {
	display: inline-block;
}

.ap-footer__logo img {
	display: block;
	height: 40px;
	width: auto;
}

/* Nine stacked columns is a long scroll on a phone, so below 640px each one
   collapses into an accordion. Above it the heads stop being controls and
   every panel is forced open, so the desktop footer is unchanged. */
.ap-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 32px;
}

.ap-facc {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ap-facc__head {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	text-align: left;
}

.ap-facc__head .ap-caret {
	color: rgba(255, 255, 255, 0.5);
}

.ap-facc__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.22s ease;
}

.ap-facc.is-open > .ap-facc__body {
	grid-template-rows: 1fr;
}

.ap-facc__body > div {
	overflow: hidden;
}

.ap-facc.is-open > .ap-facc__head .ap-caret {
	transform: rotate(180deg);
}

.ap-facc__inner {
	padding-bottom: 12px;
}

@media (min-width: 640px) {
	.ap-footer__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 36px 24px;
		margin-top: 40px;
	}

	.ap-facc {
		border-bottom: 0;
	}

	.ap-facc__head {
		padding: 0;
		cursor: default;
	}

	.ap-facc__head .ap-caret {
		display: none;
	}

	/* Always open, never animated, whatever the accordion class says. */
	.ap-facc__body,
	.ap-facc.is-open > .ap-facc__body {
		grid-template-rows: 1fr;
		transition: none;
	}

	.ap-facc__inner {
		padding-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.ap-footer__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.ap-footer__h {
	margin: 0;
	font-family: GilroyBold, sans-serif;
	font-size: 11px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #ffffff;
}

@media (min-width: 640px) {
	.ap-footer__h {
		margin-bottom: 12px;
	}
}

.ap-footer__l {
	display: block;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.15s ease;
}

.ap-footer__l:hover {
	color: #ffffff;
}

.ap-footer__text {
	margin-top: 48px;
}

.ap-footer__rule {
	height: 1px;
	margin-top: 40px;
	background: rgba(255, 255, 255, 0.12);
}

.ap-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
}

/* ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ap-panel,
	.ap-caret,
	.ap-acc__body,
	.ap-link,
	.ap-btn {
		transition: none;
	}
}

/* One legacy rule reaches into the new footer by ID and has to be answered
   in kind: #colophon .bottom-left { padding-top: 40px }. */
#colophon .ap-footer__bottom .bottom-left {
	padding-top: 0;
}