/*
 * LP@S — main.css
 * ============================================================================
 * THE single front-end styling surface for all plugin UI (client design).
 * Every plugin form/panel emits the unified element vocabulary below —
 * style each element ONCE here and it applies everywhere:
 *
 *   .atwm-btn        buttons + button-like links ( --primary / --secondary /
 *                    --danger / --small )
 *   .atwm-input      text inputs, selects, textareas ( + --checkbox / --file )
 *   .atwm-label      field labels
 *   .atwm-required   the * required marker
 *   .atwm-field      one field: label + control ( --text/--textarea/--select/
 *                    --date/--file/--checkboxes ... )
 *   .atwm-notice     notices ( --info / --error / --success )
 *
 * Sections: Elements → Forms engine → Institution → LPS activity panel →
 * Auth0 button → Members login. Surface classes stay namespaced per plugin
 * (e.g. .atwm-school-wizard, .atwm-lps-panel__box) for layout/positioning.
 * Plugins themselves ship NO visual CSS — only behavior (conditional
 * hiding, honeypot). Colors/typography are placeholders until the Adobe XD
 * design is applied.
 * ============================================================================
 */

/* ==========================================================================
   Elements — buttons
   ========================================================================== */
.atwm-btn {
	display: inline-block;
	padding: 10px 50px;
	border: 0;
	border-radius: 20px;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.atwm-school-forms-shortcode .atwm-btn {
	padding: 10px 50px;
	border-radius: 20px;
}
.atwm-btn--primary,
button.atwm-btn:not(.atwm-btn--secondary):not(.atwm-btn--danger) {
	background: #00728f; /* WWF brand */
	color: #fff;
}

a.atwm-btn--primary:hover,
button.atwm-btn:not(.atwm-btn--secondary):not(.atwm-btn--danger):hover,
input.atwm-btn:not(.atwm-btn--secondary):not(.atwm-btn--danger):hover {
	background: var(--color-pine-teal);
	color: #fff;
}

.atwm-btn--secondary {
	background: #eef1f3;
	color: #333;
	border: 1px solid #cfd6dd;
}

.atwm-btn--secondary:hover {
	background: #e3e8eb;
}

.atwm-btn--danger {
	background: #fff;
	color: #c0392b;
	border: 1px solid #c0392b;
}

.atwm-btn--danger:hover {
	background: #fdf3f2;
}

.atwm-btn--small {
	padding: 0.35rem 0.75rem;
	font-size: 0.85rem;
}
.atwm-baseline-submit {
	margin-top: 40px;
}

/* ==========================================================================
   Elements — inputs, labels, fields
   ========================================================================== */
.atwm-input {
	padding: 8px 10px;
	border: 1px solid #cfd6dd;
	border-radius: 4px;
	max-width: 100%;
	font-size: 0.95rem;
}

/* Element-qualified: outranks theme-global input[type] selectors so the
   unified class really is the single styling handle. */
input.atwm-input,
select.atwm-input,
textarea.atwm-input {
	padding: 8px 10px;
	border: 1px solid #cfd6dd;
	border-radius: 4px;
	max-width: 100%;
	font-size: 0.95rem;
}

input.atwm-input:focus,
select.atwm-input:focus,
textarea.atwm-input:focus {
	outline: 2px solid #00728f;
	outline-offset: 1px;
}

/* Checkboxes/radios: never pad like a text box. */
input.atwm-input--checkbox,
input[type="checkbox"].atwm-input,
input[type="radio"].atwm-input {
	padding: 0;
	border: 0;
	max-width: none;
}

input[type="file"].atwm-input {
	padding: 6px;
}

.atwm-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.atwm-school-inline .atwm-label,
.atwm-school-grade .atwm-label {
	display: inline-flex;
	font-weight: normal;
}

.atwm-required {
	color: #c00;
}

.atwm-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.atwm-field__help {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #5f5f5f;
}

.atwm-field__options {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 0;
	padding: 0;
	margin: 0;
}
.atwm-field__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.atwm-field__option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 2px solid #707070;
  border-radius: 2px;
  background: #fff center / 100% 100% no-repeat;  /* holds the check SVG when checked */
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}

/* the checkmark itself */
.atwm-field__option input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  background: #707070;                        /* <-- your check color */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M6 16 L13 23 L24 8' fill='none' stroke='%23707070' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.atwm-field__option input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* keep keyboard users happy */
.atwm-field__option input[type="checkbox"]:focus-visible {
  outline: 2px solid #707070;
  outline-offset: 2px;
}

.atwm-file-current {
	font-size: 0.85em;
	margin: 0 0 0.35rem;
}



/* ==========================================================================
   Elements — notices
   ========================================================================== */
.atwm-notice {
	background: #f3f8f4;
	border: 1px solid #d7e8dc;
	border-radius: 4px;
	padding: 12px 16px;
	margin: 1em 0;
}

.atwm-notice--info {
	background: #fff8e6;
	border-color: #f0dfa8;
}

.atwm-notice--error {
	background: #fdf3f2;
	border-color: #f2d3cf;
}

.atwm-notice--success {
	background: #f0f8f3;
	border-left: 4px solid #0f7b3f;
}

p.atwm-notice--error {
	background: transparent;
	border: 0;
	padding: 0;
	color: #c00;
}

/* ==========================================================================
   Forms engine styling (all submission forms)
   ========================================================================== */
.atwm-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.atwm-form__actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Repeater rows */
.atwm-repeater {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.atwm-repeater__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px dashed #bbb;
	border-radius: 4px;
}

.atwm-repeater__row .atwm-field {
	flex: 1 1 180px;
}

.atwm-repeater__add {
	align-self: flex-start;
}

.atwm-repeater__remove {
	align-self: flex-end;
}

/* ==========================================================================
   Institution styling (register/join wizard, school profile, user profile,
   My Team, identity card)
   ========================================================================== */
.atwm-school-wizard {
	max-width: 720px;
	margin: 1em auto;
}

.atwm-school-wizard h2,
.atwm-school-wizard h3 {
	margin: 0.8em 0 0.4em;
}

.atwm-school-forms-shortcode h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
}
.atwm-school-forms-shortcode h2 span {
	position: relative;
	padding-right: 30px;
}
.atwm-school-forms-shortcode h2 span:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 5px;
	background-color: var( --color-pine-teal );
}
.atwm-school-forms-shortcode h3 {
	margin-top: 1.5em;
}

.atwm-school-wizard p {
	line-height: 1.6;
}

.atwm-school-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.atwm-school-results {
	list-style: none;
	padding: 0;
	margin: 0.5em 0;
}

.atwm-school-results li {
	padding: 0.5em 0;
	border-bottom: 1px solid #eef1f3;
}

.atwm-school-result-link,
.atwm-school-link {
	font-weight: 600;
}

.atwm-school-card {
	background: #f8faf9;
	border: 1px solid #e3ebe6;
	border-radius: 4px;
	padding: 12px 16px;
}

.atwm-school-status {
	font-weight: 600;
}

.atwm-school-status-pending {
	color: #b56a00;
}

.atwm-school-status-approved {
	color: #0f7b3f;
}

.atwm-school-status-inactive,
.atwm-school-status-deactivated {
	color: #777;
	font-style: italic;
}

.atwm-school-grades {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.2em;
	margin: 0.4em 0;
}

.atwm-school-grade {
	font-weight: normal;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.atwm-school-inline {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	font-weight: normal;
	margin-right: 1em;
}

.atwm-school-inline input {
	margin: 0;
}

.atwm-school-form fieldset {
	margin: 1em 0;
	padding: 12px 16px;
	border: 1px solid #e3ebe6;
	border-radius: 4px;
}

.atwm-school-actions {
	margin-top: 1em;
}

.atwm-school-note {
	font-size: 0.9em;
	opacity: 0.8;
	margin-top: -0.4em;
}

/* Identity card ([atwm_school_user_card]) — header element. Two links:
   name → My profile, school → school profile (management). */
.atwm-user-card {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5em;
	line-height: 1.2;
	background: transparent;
	color: #1A1919;
	margin-left: 30px;
	margin-top: 40px;
}

.atwm-user-card-name-link,
.atwm-user-card-school-link {
	text-decoration: none;
	color: inherit;
}

.atwm-user-card-name-link:hover,
.atwm-user-card-name-link:focus,
.atwm-user-card-school-link:hover,
.atwm-user-card-school-link:focus {
	text-decoration: underline;
}

.atwm-user-card-name {
}

.atwm-user-card-school {
}

.atwm-user-card-pending {
	font-size: 0.75em;
	font-style: italic;
	opacity: 0.7;
}

.atwm-user-card-incomplete {
	border-style: dashed;
	border-color: #b56a00;
}

/* My Team */
.atwm-team-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
}

.atwm-team-member {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid #e8e8e8;
}

.atwm-team-member:last-child {
	border-bottom: none;
}

.atwm-team-list .atwm-team-request {
	background: #fff8e6;
}

.atwm-team-email {
	color: #666;
}

.atwm-team-meta {
	color: #555;
	font-size: 0.9em;
}

.atwm-team-actions {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

.atwm-team-deactivated .atwm-team-name {
	color: #777;
}

.atwm-team-invites .atwm-team-meta {
	font-style: italic;
}

@media (max-width: 600px) {
	.atwm-team-member {
		flex-direction: column;
		align-items: flex-start;
	}

	.atwm-team-actions {
		margin-left: 0;
	}
}

/* ==========================================================================
   LPS activity panel styling
   ========================================================================== */
.atwm-lps-panel {
	margin: 1.5rem 0;
	font-size: 1rem;
}

.atwm-lps-panel__intro {
	margin-bottom: 0.75rem;
}

.atwm-lps-panel__box,
.atwm-lps-panel__status {
	background: #f5f7f6;
	border: 1px solid #dfe6e3;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.atwm-lps-panel__box--done {
	background: #eaf4ec;
	border-color: #bcd9c2;
}

.atwm-lps-panel__badge {
	display: inline-block;
	font-weight: 700;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	background: #e3ecfa;
	color: #1d4a8f;
}

.atwm-lps-panel__badge--in_progress {
	background: #e3ecfa;
	color: #1d4a8f;
}

.atwm-lps-panel__badge--submitted {
	background: #fff2d9;
	color: #8a6116;
}

.atwm-lps-panel__badge--completed {
	background: #e1f0e5;
	color: #1e6b34;
}

.atwm-lps-panel__meta {
	margin: 0.25rem 0 0.75rem;
	color: #4a5551;
}

.atwm-lps-panel__progress {
	background: #e6ebe9;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.atwm-lps-panel__progress-fill {
	background: #1e9e5a;
	height: 100%;
	transition: width 0.3s ease;
}

.atwm-lps-panel__progress-text {
	font-size: 0.85rem;
	color: #4a5551;
	margin: 0.35rem 0 0;
}

.atwm-lps-panel__heading {
	margin: 1.25rem 0 0.5rem;
	font-size: 1.15rem;
}

.atwm-lps-panel__hint {
	color: #55605c;
	margin: 0 0 0.75rem;
}

.atwm-lps-panel__report {
	margin-top: 1rem;
}

/* Milestone checklist */
.atwm-lps-milestones {
	margin-top: 1rem;
}

.atwm-lps-milestones__item {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid #e4e9e7;
}

.atwm-lps-milestones__item:first-of-type {
	border-top: none;
}

.atwm-lps-milestones__item.is-done .atwm-lps-milestones__label {
	text-decoration: line-through;
	color: #6a756f;
}

.atwm-lps-milestones__check {
	font-size: 1.1rem;
	color: #1e9e5a;
}

.atwm-lps-milestones__body {
	flex: 1;
}

.atwm-lps-milestones__label {
	margin: 0;
	font-weight: 600;
}

.atwm-lps-milestones__note {
	margin: 0.25rem 0 0;
	color: #55605c;
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	.atwm-lps-panel__status,
	.atwm-lps-panel__box {
		padding: 0.75rem;
	}

	.atwm-lps-milestones__form {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}
}

/* ==========================================================================
   Auth0 button ([atwm_auth0_login] — plugin set to "Theme styles" mode)
   ========================================================================== */
.atwm-auth0-btn {
	display: inline-block;
	padding: 8px 16px;
	background: var(--color-pine-teal);
	color: #fff;
	text-decoration: none;
	border-radius: 20px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.atwm-auth0-btn:hover,
.atwm-auth0-btn:focus {
	background: #000000;
	color: #fff;
}

/* ==========================================================================
   Members login form ([atwm_wp_login] — core wp_login_form markup with the
   unified element classes added by the plugin)
   ========================================================================== */
#atwm-loginform p {
	margin: 0 0 1em;
}

#atwm-loginform .login-remember {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

#atwm-loginform .login-remember .atwm-label {
	font-weight: normal;
	display: inline;
	margin: 0;
}

#atwm-loginform .login-submit .atwm-btn {
	background: #00728f;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
}

#atwm-loginform .login-submit .atwm-btn:hover {
	background: #005a70;
}
/* ==========================================================================
   Section-scoped overrides (Page Section taxonomy → body class)
   The Page Section taxonomy (wwf_page_section) adds wwf-section-{slug} to
   the body of the pages you tick, so ONE shared Elementor header can be
   styled per section instead of duplicating header templates.
   ========================================================================== */

/*
 * Schools frontpage: the header CTA needs more top padding (logged-out
 * visitors — logged-in users already get the dashboard header via the
 * page-tree Theme Builder conditions).
 *
 * Overrides Elementor widget styles: they print with very high specificity
 * (template id + element id + widget class), so the override needs
 * !important to win.
 *
 * If your header has more than one Button widget, narrow the selector to
 * the CTA's own custom CSS class (Advanced → CSS Classes), e.g.
 * .wwf-section-schools .header-cta.elementor-button { … }
 */

/* ==========================================================================
   Custom mobile menu (assets/js/code.js toggles .open)
   The JS toggles one class; these rules own show/hide + the animation.
   If you set display:block/none on .atwm-mobile-menu anywhere (JS or
   custom CSS), remove it — display:none kills the close animation and
   inline styles beat this sheet.
   ========================================================================== */

/* Hidden state — visibility-based (not display) so closing can animate.
   Hidden on ALL viewport sizes (this is also the desktop gate: without
   .open styles below — which only exist at ≤1024px — the menu never
   shows on desktop). */
.atwm-mobile-menu {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-14px) scaleY(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition:
		visibility 0s linear 260ms, /* keeps it hidden while it fades out */
		opacity 240ms ease-out,
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Open state — MOBILE ONLY (matches the breakpoint used by the rest of
   the menu styling). The keyframe runs the entrance; after it ends the
   states match, so removing .open hands over to the transition above
   for a smooth exit. On desktop (>1024px) these rules don't exist, so
   .open has no visible effect. */
@media (max-width: 1024px) {
	.atwm-mobile-menu.open {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
		animation: wwf-mobile-menu-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes wwf-mobile-menu-in {
	from {
		opacity: 0;
		transform: translateY(-14px) scaleY(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}


.elementor-widget-atwm_lps_activity_card {
	border: solid 1px var(--color-pine-teal);
	background-color: #ffffff;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-direction: column;
}
.elementor.elementor .e-con > .elementor-widget.elementor-widget-atwm_lps_activity_card {
	max-width: unset;
}
.elementor.elementor .e-con > .elementor-widget.elementor-widget-atwm_lps_activity_card > .elementor-widget-container {
	width: 100%;
}
.elementor-widget-atwm_lps_activity_card .atwm-activity-card__icon {
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: center;
	padding-top: 10px;
}
.elementor-widget-atwm_lps_activity_card .atwm-activity-card svg {
	fill: var(--color-pine-teal);
	height: auto;
  	max-width: 50%;
	max-height: 90%;
}
.elementor-widget-atwm_lps_activity_card .atwm-activity-card__status  {
	background-color: var(--color-pine-teal);
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 8px;
	font-weight: 700;
	height: 30%;
}

.atwm-activity-btn {
	font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-block-start: 10px;
    padding-block-end: 10px;
    padding-inline-start: 50px;
    padding-inline-end: 50px;
    border-radius: 20px;
    background-color: var(--school-color);
}
.atwm-activity-btn:hover {
	background-color:#B8DDDD;
	color: var(--school-color);
}

/* ==========================================================================
   Canada map widget (.wwf-canada-map, elementor widget "wwf-canada-map")
   Grey map at rest; teal on hover/focus. Popup cards are positioned by
   code.js (atwm_setup_canada_map); their look is the client's Elementor
   template — only the positioning shell + entrance is styled here.
   ========================================================================== */

.wwf-ca-map {
	position: relative;
	max-width: 897px;
	margin-inline: auto;
}

.wwf-ca-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.wwf-ca-map .ca-province {
	fill: #DDDDDD;
	stroke: #FFFFFF;
	stroke-width: 1.643;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s ease;
}

.wwf-ca-map .ca-province:hover,
.wwf-ca-map .ca-province:focus-visible,
.wwf-ca-map .ca-province.is-hot {
	fill: #118E8F;
	outline: none;
}

.wwf-ca-map .ca-province:focus-visible {
	stroke: #118E8F;
	stroke-width: 2.5;
}

.wwf-ca-map .ca-province.is-active {
	fill: #118E8F;
}

.wwf-ca-map .ca-province.has-card {
	cursor: pointer;
}

/* Enlarged invisible hit areas behind the tiny Maritime shapes. */
.wwf-ca-map .ca-province__hit {
	fill: transparent;
	stroke: none;
}

/* Popup card shell. The template inside brings its own background/padding. */
.wwf-ca-map__card {
	position: absolute;
	z-index: 30;
	width: 340px;
	max-width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.wwf-ca-map__card.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.wwf-ca-map__card .elementor {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {

	.wwf-ca-map .ca-province,
	.wwf-ca-map__card {
		transition: none;
	}
}

/* --- File-value thumbnails (atwm-forms submission renderers, 0.1.20) ---
   Shared markup: .atwm-file-current (grid) > .atwm-file-item > thumb/link
   + optional .atwm-file-drop delete checkbox. Rendered by the engine's
   atwm_forms_file_value_html() (form prefill, LPS post-submit strip);
   wp-admin answers boxes are unstyled by design. */
.atwm-file-current-heading {
	margin: 0 0 6px;
	font-size: 0.9rem;
	font-weight: 600;
}

.atwm-file-current {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
	margin: 8px 0 12px;
}

.atwm-file-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.atwm-file-item img.atwm-file-thumb {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #d9d9d6;
	background: #fff;
}

.atwm-file-drop {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	color: #5a5a56;
	cursor: pointer;
}

.atwm-file-drop input[type="checkbox"] {
	margin: 0;
}

.atwm-lps-panel__photos .atwm-file-current {
	margin: 0;
}

/* ==========================================================================
   Impact table (.wwf-impact — Elementor widget "wwf-impact-table",
   [wwf_impact_table]). Per-school portfolio table drawn under the Canada map.

   Markup: includes/impact-table.php; data: atwm-reports (Query.php) for the
   portfolio badges, atwm-institution (Directory.php) for the school rows.
   State is in the URL (?school=&province=&activity=&p=) so every view is
   server-rendered, shareable and crawlable; code.js only opens the Filters
   panel — the panel is a plain GET form and works without JS.
   ========================================================================== */

.wwf-impact {
	max-width: 1144px;
	margin-inline: auto;
}

.wwf-impact__card {
	padding-bottom: 22px;
	border: 1px solid #707070;
	border-radius: 24px;
	background: #fff;
	overflow: hidden; /* keep the row stripes inside the rounded corners */
}

/* AJAX page/filter swaps: dim the listing while the next page is fetched. */
.wwf-impact.is-loading {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* Programmatic focus target for the swapped listing (no visible ring). */
.wwf-impact:focus {
	outline: none;
}

/* Screen-reader-only live region (result announcements). */
.wwf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- toolbar: search + Filters + program pills --------------------------- */

.wwf-impact__toolbar {
	display: grid;
	grid-template-columns: 208px max-content minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	padding: 33px 26px 22px;
	border-bottom: 1px solid #707070;
}

.wwf-impact__search {
	position: relative;
	display: flex;
	align-items: center;
	width: 208px;
	max-width: 100%;
}

input.wwf-impact__search-input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 46px 0 18px;
	border: 1px solid #9D9D9D;
	border-radius: 20px;
	background: #E8E8E8;
	color: #1A1919;
	font-size: 14px;
	font-weight: 700;
	line-height: 40px;
	-webkit-appearance: none;
	appearance: none;
}

input.wwf-impact__search-input::placeholder {
	color: #1A1919;
	font-weight: 700;
	opacity: 1;
}

input.wwf-impact__search-input::-webkit-search-cancel-button {
	margin-right: 40px;
}

input.wwf-impact__search-input:focus {
	outline: 2px solid #118E8F;
	outline-offset: 1px;
}

.wwf-impact .wwf-impact__search-btn {
	position: absolute;
	right: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 17px;
	background: #118E8F;
	color: #fff;
	cursor: pointer;
}

.wwf-impact .wwf-impact__search-btn:hover {
	background: #0d7475;
}

/* Filters: a button + a floating GET form. */
.wwf-impact__filters {
	position: relative;
}

.wwf-impact .wwf-impact__filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 164px;
	max-width: 100%;
	height: 40px;
	padding: 0 22px;
	border: 0;
	border-radius: 20px;
	background: #118E8F;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.wwf-impact .wwf-impact__filter-btn:hover {
	background: #0d7475;
}

.wwf-impact__caret {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.15s ease;
}

.wwf-impact__filters.is-open .wwf-impact__caret {
	transform: rotate(180deg);
}

.wwf-impact__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	width: 340px;
	max-width: 86vw;
	padding: 18px 20px 20px;
	border: 1px solid #707070;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.wwf-impact__panel[hidden] {
	display: none;
}

.wwf-impact__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.wwf-impact__legend {
	margin-bottom: 10px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: #1A1919;
}

.wwf-impact__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 9px 14px;
	max-height: 260px;
	overflow: auto;
}

.wwf-impact__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.25;
	color: #1A1919;
	cursor: pointer;
}

.wwf-impact__check input {
	margin: 2px 0 0;
	accent-color: #118E8F;
}

.wwf-impact__panel-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.wwf-impact .wwf-impact__apply {
	height: 36px;
	padding: 0 22px;
	border: 0;
	border-radius: 18px;
	background: #118E8F;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.wwf-impact .wwf-impact__apply:hover {
	background: #0d7475;
}

.wwf-impact__clear {
	font-size: 14px;
	font-weight: 600;
	color: #118E8F;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wwf-impact__clear:hover {
	color: #0d7475;
}

/* Program pills (one per portfolio slot — a facet, not a legend). */
.wwf-impact__pills {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 13px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wwf-impact__pill {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-width: 0;
	min-height: 51px;
	padding: 6px 12px 6px 10px;
	border: 1px solid #118E8F;
	border-radius: 26px;
	background: #fff;
	color: #1A1919;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.wwf-impact__pill:hover,
.wwf-impact__pill:focus-visible {
	background: #EAF4F4;
	color: #1A1919;
}

.wwf-impact__pill.is-active {
	background: #118E8F;
	color: #fff;
}

.wwf-impact__pill.is-active:hover,
.wwf-impact__pill.is-active:focus-visible {
	background: #0d7475;
	color: #fff;
}

.wwf-impact__pill-icon {
	flex: 0 0 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wwf-impact__pill-icon img {
	display: block;
	width: 26px;
	height: 26px;
}

/* The line-art icons are teal; invert them on the teal active pill. */
.wwf-impact__pill.is-active .wwf-impact__pill-icon img {
	filter: brightness(0) invert(1);
}

/* ---- table --------------------------------------------------------------- */

.wwf-impact__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

/* The kit styles every table cell with a 1px frame — the XD has none. */
.wwf-impact__table th,
.wwf-impact__table td {
	border: 0;
}

.wwf-impact__table th {
	padding: 20px 16px 14px;
	color: #1A1919;
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
}

.wwf-impact__table td {
	padding: 12px 16px;
	color: #1A1919;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	vertical-align: middle;
}

.wwf-impact__table th:first-child,
.wwf-impact__table td:first-child {
	padding-left: 32px;
}

.wwf-impact__table th:last-child,
.wwf-impact__table td:last-child {
	padding-right: 32px;
}

.wwf-impact__th--school {
	width: 42%;
}

.wwf-impact__th--location {
	width: 31%;
}

.wwf-impact__row {
	height: 71px;
}

.wwf-impact__row:nth-child(odd) {
	background: #F5F5F5;
}

.wwf-impact__badges {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}

.wwf-impact__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid #118E8F;
	border-radius: 50%;
	background: #fff;
}

.wwf-impact__badge img {
	display: block;
	width: 28px;
	height: 28px;
}

.wwf-impact__none {
	color: #9D9D9D;
}

.wwf-impact__empty-row td {
	padding: 32px;
}

.wwf-impact__empty-title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
}

.wwf-impact__empty-text {
	margin: 0;
	color: #5A5A56;
}

/* ---- footer: entry count + paging ---------------------------------------- */

.wwf-impact__footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 22px 26px 0;
}

.wwf-impact__count {
	margin: 0;
	color: #1A1919;
	font-size: 17px;
}

.wwf-impact__pager {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 20px;
	line-height: 1;
}

.wwf-impact__page {
	padding: 2px 4px;
	color: #1A1919;
	text-decoration: none;
}

a.wwf-impact__page:hover {
	color: #118E8F;
}

.wwf-impact__page.is-current {
	color: #118E8F;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wwf-impact__page.is-disabled {
	color: #C4C4C4;
}

.wwf-impact__page--dir {
	color: #118E8F;
	font-size: 22px;
	line-height: 0.8;
}

.wwf-impact__page--dir.is-disabled,
.wwf-impact__page--dir.is-disabled:hover {
	color: #C4C4C4;
}

.wwf-impact__page--gap {
	color: #9D9D9D;
}

/* Narrow desktop / tablet: stack the toolbar, pills 2 x 2 (as on mobile). */
@media (max-width: 1024px) {
	.wwf-impact__toolbar {
		grid-template-columns: minmax(0, 1fr);
	}

	.wwf-impact__search,
	.wwf-impact__filters {
		width: 100%;
	}

	.wwf-impact .wwf-impact__filter-btn {
		justify-content: center;
		width: 100%;
	}

	.wwf-impact__pills {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- mobile (XD "Impact Map Mobile", 430px artboard) -------------------- */

@media (max-width: 900px) {
	.wwf-impact {
		max-width: none;
	}

	.wwf-impact__card {
		padding-bottom: 8px;
		border: 0;
		border-radius: 0;
	}

	.wwf-impact__toolbar {
		gap: 10px;
		padding: 0 20px 18px;
		border-bottom: 0;
	}

	.wwf-impact__search,
	.wwf-impact__filters {
		width: 100%;
	}

	.wwf-impact .wwf-impact__filter-btn {
		justify-content: center;
		width: 100%;
	}

	.wwf-impact__panel {
		width: 100%;
		max-width: none;
	}

	.wwf-impact__pills {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}

	.wwf-impact__pill {
		width: 100%;
	}

	/* Rows become full-bleed cards: name, location, badges (no header row). */
	.wwf-impact__table,
	.wwf-impact__table tbody,
	.wwf-impact__table tr,
	.wwf-impact__table td {
		display: block;
		width: 100%;
	}

	.wwf-impact__table thead {
		display: none;
	}

	.wwf-impact__row {
		height: auto;
		padding: 18px 20px 20px;
		border-top: 0;
	}

	.wwf-impact__table td,
	.wwf-impact__table td:first-child {
		padding: 0;
	}

	.wwf-impact__table td.wwf-impact__school {
		font-weight: 700;
	}

	.wwf-impact__table td.wwf-impact__portfolio {
		padding-top: 14px;
	}

	.wwf-impact__table td.wwf-impact__empty-row {
		padding: 24px 20px;
	}

	.wwf-impact__footer {
		grid-template-columns: 1fr;
		padding: 18px 20px 0;
	}

	.wwf-impact__count {
		display: none;
	}

	.wwf-impact__pager {
		grid-column: 1;
		gap: 12px;
		font-size: 18px;
	}

	.wwf-impact__page--dir {
		font-size: 20px;
	}
}