/* =========================================================
 * AdPro Site Tools — Audience Menu
 *
 * ONE page-level state drives everything: <html data-adpro-audience="1|2">.
 * The tab bar, the menu under it and (optionally) sections of the page are all
 * shown or hidden from that attribute in CSS, so they can never disagree.
 * Without JavaScript the default tab's menu simply stays visible.
 * Colors are CSS variables so the widget's Style tab (and the site's
 * palette) can change them without touching selectors.
 * ========================================================= */

.adpro-aud {
	--adpro-aud-tab-bg: #152131;
	--adpro-aud-tab-color: #ffffff;
	--adpro-aud-active-bg: #566B88; /* white text 5.4:1 (was #7287A3, 3.7:1) */
	--adpro-aud-active-color: #ffffff;
	--adpro-aud-bar-bg: #e4e7e6;
	--adpro-aud-link: #1b5270;
	--adpro-aud-link-hover: #132237;
	--adpro-aud-chip-bg: #ffffff;
	--adpro-aud-tab-h: 44px;

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* The header container this lives in: edge to edge, no padding (the old
   Additional CSS did this by hand; it now lives with the widget). Every
   ancestor is already flush with the viewport, so plain 100% is enough;
   the old 100vw trick counted a classic (Windows) scrollbar's width and
   pushed the bar about 9px past each side. */
.ppar-secondary-nav {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ppar-secondary-nav > .e-con-inner {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ppar-secondary-nav .elementor-widget-adpro-audience-nav,
.ppar-secondary-nav .elementor-widget-adpro-audience-nav > .elementor-widget-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ── Tabs ────────────────────────────────────────────────── */
.adpro-aud__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
}

/* The tabs are <button>s, and Astra + the Elementor kit style buttons in every
   state (:hover/:focus score 0,2,1). The doubled class scores 0,3,0 so this
   holds; the widget's Style controls only set the variables used here. */
.adpro-aud .adpro-aud__tab.adpro-aud__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--adpro-aud-tab-h);
	margin: 0;
	padding: 10px 16px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--adpro-aud-tab-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--adpro-aud-tab-color);
	cursor: pointer;
	font: inherit;
	font-size: max(14px, 0.95rem);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease;
}

.adpro-aud .adpro-aud__tab.adpro-aud__tab:hover,
.adpro-aud .adpro-aud__tab.adpro-aud__tab:focus {
	background: var(--adpro-aud-tab-bg);
	color: var(--adpro-aud-tab-color);
	filter: brightness(1.18);
}

/* Active tab: from the page-level state. */
html[data-adpro-audience="1"] .adpro-aud .adpro-aud__tab--1.adpro-aud__tab,
html[data-adpro-audience="2"] .adpro-aud .adpro-aud__tab--2.adpro-aud__tab,
html:not([data-adpro-audience]) .adpro-aud .adpro-aud__tab--def.adpro-aud__tab {
	background: var(--adpro-aud-active-bg);
	color: var(--adpro-aud-active-color);
	filter: none;
}

.adpro-aud .adpro-aud__tab.adpro-aud__tab:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -5px;
	box-shadow: inset 0 0 0 5px #152131;
}

/* ── Menu panels ─────────────────────────────────────────── */
.adpro-aud__panels {
	background: var(--adpro-aud-bar-bg);
}

.adpro-aud__panel {
	display: none;
}

html[data-adpro-audience="1"] .adpro-aud__panel--1,
html[data-adpro-audience="2"] .adpro-aud__panel--2,
html:not([data-adpro-audience]) .adpro-aud__panel--def {
	display: block;
}

/* The [hidden] attribute (kept in sync by the script for screen readers) must never beat the rules above. */
.adpro-aud__panel[hidden] {
	display: none;
}

html[data-adpro-audience="1"] .adpro-aud__panel--1[hidden],
html[data-adpro-audience="2"] .adpro-aud__panel--2[hidden] {
	display: block;
}

.adpro-aud .adpro-aud__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 4px 8px;
	margin: 0;
	padding: 12px 20px;
	list-style: none;
}

.adpro-aud .adpro-aud__links li {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tablets and up: the link row lines up with the header above it. Same box as the header (1400px max, centred, 24px
 * gutters), and the first / last link's TEXT sits on the logo's left edge and the Member Login button's right edge
 * (the links' own 8px side padding is pulled out with a negative margin; it stays as the tap area). */
@media (min-width: 768px) {
	.adpro-aud .adpro-aud__links {
		width: min(1400px, 100% - 48px);
		margin-inline: auto;
		padding-inline: 0;
		justify-content: center;
	}

	.adpro-aud .adpro-aud__links li {
		flex: 0 0 auto;
	}

	.adpro-aud .adpro-aud__links li:first-child a {
		margin-left: -8px;
	}

	.adpro-aud .adpro-aud__links li:last-child a {
		margin-right: -8px;
	}
}

/* Wide enough for one row (all nine links need about 925px): spread it from edge to edge of the header. */
@media (min-width: 980px) {
	.adpro-aud .adpro-aud__links {
		justify-content: space-between;
	}
}

.adpro-aud .adpro-aud__links a {
	padding: 6px 8px;
	color: var(--adpro-aud-link);
	font-size: max(14px, 0.92rem);
	text-align: center;
	text-decoration: none;
}

.adpro-aud .adpro-aud__links a:hover,
.adpro-aud .adpro-aud__links a:focus-visible {
	color: var(--adpro-aud-link-hover);
	text-decoration: underline;
}

.adpro-aud .adpro-aud__links a[aria-current="page"] {
	color: var(--adpro-aud-link-hover);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.adpro-aud .adpro-aud__links a:focus-visible {
	outline: 2px solid var(--adpro-aud-link-hover);
	outline-offset: 2px;
}

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 767px) {
	.adpro-aud .adpro-aud__tab.adpro-aud__tab {
		min-height: 48px;
		padding: 8px 8px;
		font-size: max(14px, 0.82rem);
	}

	/* One scrolling row of chips: ~50px tall instead of a 700px list. */
	.adpro-aud--m-scroll .adpro-aud__links {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		padding: 10px 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.adpro-aud--m-scroll .adpro-aud__links::-webkit-scrollbar {
		display: none;
	}

	.adpro-aud--m-scroll .adpro-aud__links li {
		flex: none;
		scroll-snap-align: start;
	}

	.adpro-aud--m-scroll .adpro-aud__links a,
	.adpro-aud--m-grid .adpro-aud__links a {
		display: block;
		padding: 7px 14px;
		background: var(--adpro-aud-chip-bg);
		border: 1px solid rgba(19, 34, 55, 0.22);
		border-radius: 999px;
		font-size: max(14px, 0.9rem);
		line-height: 1.3;
		white-space: nowrap;
		text-decoration: none;
	}

	.adpro-aud--m-scroll .adpro-aud__links a[aria-current="page"],
	.adpro-aud--m-grid .adpro-aud__links a[aria-current="page"] {
		background: var(--adpro-aud-link-hover);
		border-color: var(--adpro-aud-link-hover);
		color: #ffffff;
		text-decoration: none;
	}

	.adpro-aud--m-grid .adpro-aud__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 10px 14px;
	}

	.adpro-aud--m-grid .adpro-aud__links li {
		display: block;
	}

	.adpro-aud--m-grid .adpro-aud__links a {
		text-align: center;
		white-space: normal;
	}

	/* "Vertical list": the old layout, kept as an option. */
	.adpro-aud--m-stack .adpro-aud__links {
		display: block;
		padding: 0;
	}

	.adpro-aud--m-stack .adpro-aud__links a {
		display: block;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(19, 34, 55, 0.15);
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adpro-aud .adpro-aud__tab.adpro-aud__tab {
		transition: none;
	}
}