/*
 * Member Directory - [member_directory]
 * Everything is scoped under .as-md so it cannot clash with the theme,
 * the Customizer CSS or WooCommerce. Tokens are set on the wrapper,
 * fonts are inherited from the theme.
 */

/* === TOKENS === */
.as-md {
	--as-color-primary: #005596;
	--as-color-primary-dark: #003f70;
	--as-color-on-primary: #ffffff;
	--as-color-secondary: #00a160;
	--as-color-secondary-soft: #e6f6ef;
	--as-color-text: #424242;
	--as-color-heading: #333333;
	--as-color-muted: #5b6776;
	--as-color-border: #d5dbe3;
	--as-color-divider: #eeeeee;
	--as-color-surface: #ffffff;
	--as-color-surface-alt: #f5f8fb;
	--as-color-focus: rgba(0, 85, 150, 0.25);

	--as-font-heading: inherit;
	--as-font-body: inherit;
	--as-weight-regular: 400;
	--as-weight-semibold: 600;
	--as-weight-bold: 700;

	/* px, not rem: the theme sets the root font size to 10px.
	   Sizes match the existing member list (easa9.org/membership/members). */
	--as-text-xs: 12px;
	--as-text-sm: 13px;
	--as-text-base: 15px;
	--as-text-md: 18px;
	--as-text-lg: 20px;
	--as-leading-base: 22px;
	--as-leading-md: 25px;
	--as-leading-lg: 28px;

	--as-space-1: 4px;
	--as-space-2: 8px;
	--as-space-3: 12px;
	--as-space-4: 16px;
	--as-space-5: 24px;
	--as-space-6: 32px;

	--as-radius: 6px;
	--as-radius-pill: 999px;
	--as-control-height: 48px;
	--as-logo-height: 96px;
	--as-chevron-size: 8px;
	--as-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	--as-shadow-hover: 0 8px 24px rgba(0, 85, 150, 0.12);
	--as-transition: 160ms ease;
}

/* === BASE === */
.as-md {
	font-family: var(--as-font-body);
	color: var(--as-color-text);
}

.as-md *,
.as-md *::before,
.as-md *::after {
	box-sizing: border-box;
}

/* === SECTION: FILTERS === */
.as-md .as-md__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-3);
	margin: 0 0 var(--as-space-4);
	padding: 0;
	border: 0;
	background: none;
}

.as-md .as-md__control {
	flex: 1 1 170px;
	min-width: 0;
	height: var(--as-control-height);
	margin: 0;
	padding: 0 var(--as-space-4);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	line-height: 1.2;
	color: var(--as-color-text);
	background-color: var(--as-color-surface);
	border: 1px solid var(--as-color-border);
	border-radius: var(--as-radius);
	box-shadow: none;
	transition: border-color var(--as-transition), box-shadow var(--as-transition);
}

.as-md .as-md__control--search {
	flex-basis: 300px;
	flex-grow: 2;
	order: -1;
}

/* Phone-only "Filters" button, hidden on larger screens */
.as-md .as-md__toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--as-space-2);
	height: var(--as-control-height);
	margin: 0;
	padding: 0 var(--as-space-4);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	font-weight: var(--as-weight-semibold);
	line-height: 1;
	color: var(--as-color-primary);
	background: var(--as-color-surface);
	border: 1px solid var(--as-color-primary);
	border-radius: var(--as-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--as-transition), color var(--as-transition);
}

.as-md .as-md__toggle:hover,
.as-md .as-md__toggle[aria-expanded="true"] {
	color: var(--as-color-on-primary);
	background: var(--as-color-primary);
}

.as-md .as-md__toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--as-color-focus);
}

.as-md .as-md__toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 var(--as-space-1);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-bold);
	color: var(--as-color-on-primary);
	background: var(--as-color-secondary);
	border-radius: var(--as-radius-pill);
}

.as-md .as-md__toggle-count[hidden] {
	display: none;
}

.as-md .as-md__control--select {
	cursor: pointer;
}

.as-md .as-md__control::placeholder {
	color: var(--as-color-text);
	opacity: 1;
}

.as-md .as-md__control:hover {
	border-color: var(--as-color-primary);
}

.as-md .as-md__control:focus {
	outline: none;
	border-color: var(--as-color-primary);
	box-shadow: 0 0 0 3px var(--as-color-focus);
}

.as-md .as-md__control.is-active {
	border-color: var(--as-color-primary);
	color: var(--as-color-primary);
	font-weight: var(--as-weight-semibold);
}

.as-md .as-md__reset {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	padding: var(--as-space-2) var(--as-space-1);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	color: var(--as-color-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.as-md .as-md__reset:hover,
.as-md .as-md__reset:focus-visible {
	color: var(--as-color-primary);
	background: none;
}

.as-md .as-md__count {
	margin: 0 0 var(--as-space-5);
	font-size: var(--as-text-sm);
	color: var(--as-color-muted);
}

.as-md .as-md__count span {
	font-weight: var(--as-weight-bold);
	color: var(--as-color-primary);
}

/* === SECTION: CARDS === */
.as-md .as-md__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--as-space-5);
}

.as-md .as-md__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--as-space-5);
	background: var(--as-color-surface);
	border: 1px solid var(--as-color-border);
	border-top: 4px solid var(--as-color-primary);
	border-radius: var(--as-radius);
	box-shadow: var(--as-shadow);
	transition: box-shadow var(--as-transition), border-color var(--as-transition);
}

.as-md .as-md__card:hover {
	border-top-color: var(--as-color-secondary);
	box-shadow: var(--as-shadow-hover);
}

.as-md .as-md__card[hidden] {
	display: none;
}

.as-md .as-md__logo {
	display: flex;
	align-items: center;
	height: var(--as-logo-height);
	margin: 0 0 var(--as-space-4);
}

.as-md .as-md__logo-img {
	display: block;
	width: auto;
	max-width: 70%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.as-md .as-md__card-head {
	margin: 0 0 var(--as-space-4);
}

.as-md .as-md__cats {
	display: grid;
	gap: var(--as-space-3);
	margin: 0 0 var(--as-space-4);
}

.as-md .as-md__cat-group {
	margin: 0;
}

.as-md .as-md__cat-main {
	margin: 0 0 var(--as-space-2);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-sm);
	font-weight: var(--as-weight-bold);
	line-height: 1.4;
	color: var(--as-color-text);
}

.as-md .as-md__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-md .as-md__tag {
	margin: 0;
	padding: var(--as-space-1) var(--as-space-3);
	font-size: var(--as-text-sm);
	line-height: 1.4;
	color: var(--as-color-primary);
	background: var(--as-color-surface-alt);
	border: 1px solid var(--as-color-border);
	border-radius: var(--as-radius-pill);
}

.as-md .as-md__tag::before {
	content: none;
}

.as-md .as-md__company {
	margin: 0 0 var(--as-space-2);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-lg);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-lg);
	color: var(--as-color-heading);
	overflow-wrap: anywhere;
}

.as-md .as-md__country {
	display: inline-block;
	padding: var(--as-space-1) var(--as-space-3);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--as-color-secondary);
	background: var(--as-color-secondary-soft);
	border-radius: var(--as-radius-pill);
}

/* Website, always visible, right below the categories */
.as-md .as-md__info {
	display: grid;
	gap: var(--as-space-3);
	margin: 0;
	padding: var(--as-space-4) 0 0;
	border-top: 1px solid var(--as-color-divider);
}

/* "Details" accordion, pinned to the bottom so buttons line up per row */
.as-md .as-md__more {
	margin: auto 0 0;
	padding: var(--as-space-4) 0 0;
}

.as-md .as-md__more-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: var(--as-space-3) 0 0;
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-base);
	color: var(--as-color-primary);
	text-align: left;
	background: none;
	border: 0;
	border-top: 1px solid var(--as-color-divider);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color var(--as-transition);
}

.as-md .as-md__more-toggle::after {
	content: "";
	width: var(--as-chevron-size);
	height: var(--as-chevron-size);
	margin: 0 var(--as-space-1) var(--as-space-1) 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--as-transition);
}

.as-md .as-md__more-toggle[aria-expanded="true"]::after {
	margin-bottom: 0;
	margin-top: var(--as-space-1);
	transform: rotate(-135deg);
}

.as-md .as-md__more-toggle:hover,
.as-md .as-md__more-toggle:focus-visible {
	color: var(--as-color-secondary);
	background: none;
}

.as-md .as-md__more-toggle:focus-visible {
	outline: 2px solid var(--as-color-focus);
	outline-offset: 2px;
}

.as-md .as-md__details {
	display: grid;
	gap: var(--as-space-3);
	margin: 0;
	padding: var(--as-space-4) 0 0;
}

.as-md .as-md__details[hidden] {
	display: none;
}

.as-md .as-md__row {
	margin: 0;
}

.as-md .as-md__label {
	margin: 0;
	font-family: var(--as-font-heading);
	font-size: var(--as-text-md);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-md);
	color: var(--as-color-text);
}

.as-md .as-md__value {
	margin: 0;
	font-size: var(--as-text-base);
	line-height: var(--as-leading-base);
	color: var(--as-color-text);
	overflow-wrap: anywhere;
}

.as-md .as-md__link {
	color: var(--as-color-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--as-transition), border-color var(--as-transition);
}

.as-md .as-md__link:hover,
.as-md .as-md__link:focus-visible {
	color: var(--as-color-secondary);
	border-bottom-color: currentColor;
}

.as-md .as-md__empty {
	margin: var(--as-space-5) 0;
	padding: var(--as-space-5);
	text-align: center;
	color: var(--as-color-muted);
	background: var(--as-color-surface-alt);
	border-radius: var(--as-radius);
}

.as-md .as-md__empty[hidden] {
	display: none;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
	.as-md .as-md__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.as-md .as-md__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Search + "Filters" button on one row, the rest opens below */
	.as-md .as-md__control {
		flex-basis: 100%;
	}

	.as-md .as-md__control--search {
		flex: 1 1 0;
	}

	.as-md .as-md__toggle {
		display: inline-flex;
	}

	.as-md .as-md__filters:not(:has(.as-md__control--select, .as-md__control--text)) .as-md__toggle {
		display: none;
	}

	.as-md:not(.is-filters-open) .as-md__control--select,
	.as-md:not(.is-filters-open) .as-md__control--text,
	.as-md:not(.is-filters-open) .as-md__reset {
		display: none;
	}

	.as-md .as-md__reset {
		margin-left: 0;
	}
}