/* =========================================================================
   Zonta District 4 theme: layout and components.
   Tokens, fonts, base typography and buttons live in base.css.
   ========================================================================= */

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

body { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

.zd4t-header a:not(.zd4t-btn), .zd4t-topbar a, .zd4t-footer a:not(.zd4t-btn) { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.zd4t-container { width: 100%; max-width: var(--zd4t-maxw); margin: 0 auto; padding: 0 var(--zd4t-gutter); }
.zd4t-section { padding: var(--zd4t-space-8) 0; }
.zd4t-section--soft { background: var(--zd4t-bg-soft); }
.zd4t-section--dark { background: var(--zd4t-bg-dark); }
.zd4t-section--warm { background: var(--zd4t-bg-warm); }

/* ---------- Top bar ---------- */
.zd4t-topbar { background: var(--zd4t-cyan); color: #fff; font-size: var(--zd4t-text-sm); }
.zd4t-topbar__inner {
	max-width: var(--zd4t-maxw);
	margin: 0 auto;
	padding: 6px var(--zd4t-gutter);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--zd4t-space-5);
}
.zd4t-topbar__item, .zd4t-topbar__cta { display: inline-flex; align-items: center; gap: var(--zd4t-space-2); min-height: 32px; }
.zd4t-topbar__item:hover { text-decoration: underline; }
.zd4t-topbar__cta { font-weight: 700; }

/* ---------- Header ---------- */
.zd4t-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--zd4t-border); }
.admin-bar .zd4t-header { top: var(--wp-admin--admin-bar--height, 32px); }
.zd4t-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }

.zd4t-header__inner {
	max-width: var(--zd4t-maxw);
	margin: 0 auto;
	padding: 0 20px;
	min-height: var(--zd4t-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
/* Logo: fixed height, natural width (never stretched). Clear space around the
   lockup approximates the brand rule of one "Z" height; recheck with the D4 logo. */
.zd4t-logo { --zd4t-logo-h: 52px; display: inline-flex; align-items: center; gap: var(--zd4t-space-3); margin: calc(var(--zd4t-logo-h) * .2) 0; font-weight: 700; }
.zd4t-logo__img { height: var(--zd4t-logo-h); width: auto; max-width: 260px; object-fit: contain; }
.zd4t-logo__text { font-size: var(--zd4t-text-lg); line-height: 1.2; }

/* ---------- Primary nav ---------- */
.zd4t-header__nav { display: flex; align-items: center; gap: var(--zd4t-space-1); position: relative; }
.zd4t-menu { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; font-size: 1rem; }
.zd4t-menu > li { position: relative; display: flex; align-items: center; }
.zd4t-menu a { display: block; padding: 10px 7px; white-space: nowrap; }
.zd4t-menu > li.menu-item-has-children > a { padding-right: 2px; }
.zd4t-menu a:hover { color: var(--zd4t-primary); }
.zd4t-menu .current-menu-item > a, .zd4t-menu .current_page_item > a,
.zd4t-menu > .current-menu-ancestor > a, .zd4t-menu > .current-page-ancestor > a { color: var(--zd4t-primary); font-weight: 700; }

.zd4t-header__portal { margin-left: var(--zd4t-space-2); white-space: nowrap; }
.zd4t-header__search { background: none; border: none; cursor: pointer; color: inherit; padding: 10px; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.zd4t-header__toggle { display: none; }

/* Sliding underline */
.zd4t-menu__underline {
	position: absolute;
	bottom: 4px;
	height: 2px;
	background: var(--zd4t-primary);
	left: 0;
	width: 0;
	opacity: 0;
	transition: left .25s ease, width .25s ease, opacity .2s ease;
	pointer-events: none;
}
.zd4t-menu__underline.is-visible { opacity: 1; }

/* Submenu: opens on hover or with its toggle button; Escape dismisses both. */
.zd4t-submenu-toggle { background: none; border: none; cursor: pointer; color: inherit; padding: 10px 4px; display: inline-flex; }
.zd4t-submenu-toggle svg { transition: transform .2s ease; }
.zd4t-menu li.is-open > .zd4t-submenu-toggle svg { transform: rotate(180deg); }
.zd4t-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--zd4t-space-2) 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	color: var(--zd4t-fg);
	border: 1px solid var(--zd4t-border);
	border-top: 3px solid var(--zd4t-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s ease, visibility 0s linear .15s;
	z-index: 60;
}
.zd4t-menu .sub-menu a { padding: 8px var(--zd4t-space-4); }
.zd4t-menu .sub-menu a:hover { background: var(--zd4t-bg-soft); }
.zd4t-menu li:hover > .sub-menu, .zd4t-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.zd4t-menu li.is-dismissed:not(.is-open) > .sub-menu { opacity: 0; visibility: hidden; }

/* ---------- Search dialog ---------- */
.zd4t-search-overlay {
	--zd4t-focus: var(--zd4t-gold);
	position: fixed;
	inset: 0;
	background: rgba(31, 26, 26, .96);
	color: #fff;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zd4t-search-overlay[hidden] { display: none; }
.zd4t-search-overlay__close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: #fff; cursor: pointer; padding: 6px; }
.zd4t-search-overlay__form { display: flex; align-items: center; gap: 12px; width: min(680px, 90vw); border-bottom: 2px solid #fff; padding-bottom: 12px; }
.zd4t-search-overlay__form input { flex: 1; min-width: 0; background: none; border: none; color: #fff; font: inherit; font-size: var(--zd4t-text-2xl); }
.zd4t-search-overlay__form input::placeholder { color: rgba(255, 255, 255, .75); }
.zd4t-search-overlay__form button { background: none; border: none; color: #fff; cursor: pointer; padding: 6px; }

/* ---------- Hero ---------- */
/* The photo stays unshaded; the text sits on a solid Mahogany panel. */
.zd4t-hero { position: relative; background: var(--zd4t-mahogany); border-bottom: 6px solid var(--zd4t-gold); }
.zd4t-hero__media { position: absolute; inset: 0; }
.zd4t-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.zd4t-hero__inner { position: relative; display: flex; align-items: center; max-width: var(--zd4t-maxw); min-height: min(640px, 75vh); margin: 0 auto; padding: var(--zd4t-space-8) var(--zd4t-gutter); }
.zd4t-hero__panel { max-width: 640px; }
.zd4t-hero--photo .zd4t-hero__panel { padding: var(--zd4t-space-7) var(--zd4t-space-6); background: var(--zd4t-mahogany); border-top: 6px solid var(--zd4t-gold); border-radius: var(--zd4t-radius-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.zd4t-hero__title { font-size: var(--zd4t-text-4xl); margin: 0 0 var(--zd4t-space-4); }
.zd4t-hero__subtitle { font-size: var(--zd4t-text-lg); margin: 0 0 var(--zd4t-space-6); }
.zd4t-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zd4t-space-3); }
@media (max-width: 719px) {
	.zd4t-hero--photo .zd4t-hero__media { position: static; aspect-ratio: 3 / 2; }
	.zd4t-hero__inner { min-height: 0; padding: var(--zd4t-space-7) var(--zd4t-gutter); }
	.zd4t-hero--photo .zd4t-hero__inner { padding: 0; }
	.zd4t-hero--photo .zd4t-hero__panel { max-width: none; border-radius: 0; box-shadow: none; padding: var(--zd4t-space-6) var(--zd4t-gutter); }
}

/* ---------- Homepage ---------- */
.zd4t-home__heading { font-size: var(--zd4t-text-3xl); margin: 0 0 var(--zd4t-space-6); }

.zd4t-home-split__grid { display: grid; gap: var(--zd4t-space-7); align-items: center; }
.zd4t-home-split__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--zd4t-radius-lg); box-shadow: 0 16px 40px rgba(31, 26, 26, .14); }
.zd4t-home-split__body { max-width: 62ch; font-size: var(--zd4t-text-lg); }
.zd4t-home-split__body .zd4t-home__heading { border-top: 4px solid var(--zd4t-gold); padding-top: var(--zd4t-space-4); display: inline-block; }
@media (min-width: 960px) {
	.zd4t-home-split__grid { grid-template-columns: 1fr 1fr; gap: var(--zd4t-space-8); }
	.zd4t-home-split--reverse .zd4t-home-split__media { order: 2; }
}

.zd4t-milestones { list-style: none; margin: var(--zd4t-space-6) 0; padding: 0; border-left: 4px solid var(--zd4t-gold); }
.zd4t-milestones li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--zd4t-space-4); padding: var(--zd4t-space-3) 0 var(--zd4t-space-3) var(--zd4t-space-5); font-size: var(--zd4t-text-base); }
.zd4t-milestones__year { font-size: var(--zd4t-text-2xl); font-weight: 900; line-height: 1.1; color: var(--zd4t-mahogany); }

.zd4t-home-clubs__intro { max-width: 62ch; font-size: var(--zd4t-text-lg); }
.zd4t-home-clubs__grid { display: grid; gap: var(--zd4t-space-7); align-items: start; }
@media (min-width: 960px) { .zd4t-home-clubs__grid { grid-template-columns: 3fr 2fr; } }
.zd4t-home-clubs .zd4t-club-map { margin: 0; }
.zd4t-home-clubs .zd4t-club-map__canvas { height: 460px; }
.zd4t-home-clubs .zd4t-club-map__legend { display: none; }
.zd4t-home-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zd4t-space-4); }
.zd4t-home-areas__item { display: flex; gap: var(--zd4t-space-4); align-items: flex-start; padding-bottom: var(--zd4t-space-4); border-bottom: 1px solid var(--zd4t-border); }
.zd4t-home-areas__item .zd4t-pin { flex: none; margin-top: 2px; }
.zd4t-home-areas__name { font-weight: 700; font-size: var(--zd4t-text-lg); }
.zd4t-home-areas__clubs { margin: var(--zd4t-space-1) 0 0; font-size: var(--zd4t-text-sm); color: var(--zd4t-muted); }
.zd4t-home-clubs__more { margin: var(--zd4t-space-6) 0 0; }

.zd4t-home-links { padding: var(--zd4t-space-8) 0; background: var(--zd4t-bg-warm); }
.zd4t-home-links__intro { max-width: 62ch; font-size: var(--zd4t-text-lg); margin: calc(-1 * var(--zd4t-space-3)) 0 var(--zd4t-space-6); }
.zd4t-home-links__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--zd4t-space-4); }
.zd4t-home-links__link { display: flex; flex-direction: column; align-items: center; gap: var(--zd4t-space-2); height: 100%; padding: var(--zd4t-space-5) var(--zd4t-space-4); background: #ffffff; color: var(--zd4t-fg); border-radius: var(--zd4t-radius-lg); text-align: center; text-decoration: none; font-weight: 700; font-size: var(--zd4t-text-lg); transition: transform .2s ease, box-shadow .2s ease; }
.zd4t-home-links__link:hover { color: var(--zd4t-mahogany); text-decoration: underline; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31, 26, 26, .12); }
.zd4t-home-links__link .zd4t-card__icon { margin-bottom: 0; }

.zd4t-home-stats { background: var(--zd4t-cyan); }
.zd4t-home-stats__more { margin: var(--zd4t-space-6) 0 0; }

.zd4t-home-news { display: grid; gap: var(--zd4t-space-8); }
@media (min-width: 960px) { .zd4t-home-news--split { grid-template-columns: 1fr 1fr; } }
.zd4t-home-story .zd4t-card { margin-bottom: var(--zd4t-space-5); }

/* ---------- Page banner ---------- */
.zd4t-page-header { position: relative; padding: var(--zd4t-space-8) 0 var(--zd4t-space-7); background: var(--zd4t-mahogany); border-bottom: 6px solid var(--zd4t-gold); overflow: hidden; }
.zd4t-page-header--photo { padding: var(--zd4t-space-9) 0 var(--zd4t-space-8); }
.zd4t-page-header__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* At least 80% Mahogany everywhere keeps white text above 6:1 on any photo. */
.zd4t-page-header__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(128, 37, 40, .94), rgba(128, 37, 40, .8)); }
.zd4t-page-header__inner { position: relative; max-width: var(--zd4t-maxw); margin: 0 auto; padding: 0 var(--zd4t-gutter); }
.zd4t-page-header__title { font-size: var(--zd4t-text-4xl); margin: 0; max-width: 20ch; }
.zd4t-page-header__intro { font-size: var(--zd4t-text-lg); max-width: 60ch; margin: var(--zd4t-space-4) 0 0; }

/* ---------- Prose (the_content) ---------- */
.zd4t-prose { max-width: var(--zd4t-maxw-narrow); }
.zd4t-prose h2 { margin-top: 1.6em; }
.zd4t-prose img { margin: 1.4em 0; border-radius: 4px; }

/* ---------- Section menu ---------- */
.zd4t-with-aside { display: grid; grid-template-columns: 240px minmax(0, var(--zd4t-maxw-narrow)); gap: var(--zd4t-space-8); align-items: start; }
.zd4t-section-nav { position: sticky; top: 150px; border-left: 4px solid var(--zd4t-gold); padding-left: var(--zd4t-space-4); }
.zd4t-section-nav__title { font-weight: 700; color: var(--zd4t-primary); margin: 0 0 var(--zd4t-space-2); }
.zd4t-section-nav ul { list-style: none; margin: 0; padding: 0; }
.zd4t-section-nav a { display: block; padding: 6px 0; color: var(--zd4t-fg); text-decoration: none; }
.zd4t-section-nav a:hover { color: var(--zd4t-primary); text-decoration: underline; }
.zd4t-section-nav a[aria-current="page"] { color: var(--zd4t-primary); font-weight: 700; }
@media (max-width: 880px) {
	.zd4t-with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--zd4t-space-6); }
	.zd4t-section-nav { position: static; }
}

.zd4t-icon { flex-shrink: 0; }

/* ---------- Footer ---------- */
.zd4t-footer { background: var(--zd4t-cyan); color: #fff; padding: var(--zd4t-space-8) var(--zd4t-gutter) var(--zd4t-space-5); }
.zd4t-footer__inner { max-width: calc(var(--zd4t-maxw) - 2 * var(--zd4t-gutter)); margin: 0 auto; display: grid; gap: var(--zd4t-space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.zd4t-footer__logo { --zd4t-logo-h: 64px; }
.zd4t-footer__heading { font-size: var(--zd4t-text-base); color: #fff; margin: 0 0 var(--zd4t-space-3); }
.zd4t-footer__links, .zd4t-footer__socials { list-style: none; margin: 0; padding: 0; }
.zd4t-footer__links li { margin-bottom: var(--zd4t-space-2); }
.zd4t-footer a:not(.zd4t-btn):hover { text-decoration: underline; }
.zd4t-footer__socials { display: flex; gap: var(--zd4t-space-4); margin-bottom: var(--zd4t-space-5); }
.zd4t-footer__socials a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.zd4t-footer__bar { max-width: calc(var(--zd4t-maxw) - 2 * var(--zd4t-gutter)); margin: var(--zd4t-space-7) auto 0; padding-top: var(--zd4t-space-4); border-top: 1px solid rgba(255, 255, 255, .3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--zd4t-space-3); font-size: var(--zd4t-text-sm); }
.zd4t-footer__bar p { margin: 0; }

/* ---------- Pagination ---------- */
.pagination, .navigation.pagination { margin-top: 48px; display: flex; justify-content: center; }
.page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid var(--zd4t-border); border-radius: 4px; }
.page-numbers.current { background: var(--zd4t-primary); color: #fff; border-color: var(--zd4t-primary); }

/* ---------- Club pages ---------- */
.zd4t-club-facts { background: var(--zd4t-bg-soft); border-bottom: 1px solid var(--zd4t-border); padding: var(--zd4t-space-6) 0; }
.zd4t-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--zd4t-space-4) var(--zd4t-space-6); margin: 0 0 var(--zd4t-space-5); }
.zd4t-facts__item { min-width: 0; }
.zd4t-facts dt { display: flex; align-items: center; gap: var(--zd4t-space-2); font-size: var(--zd4t-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--zd4t-primary); }
.zd4t-facts dd { margin: var(--zd4t-space-1) 0 0; overflow-wrap: anywhere; }
.zd4t-club-facts__actions { display: flex; flex-wrap: wrap; gap: var(--zd4t-space-3); }

.zd4t-club { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--zd4t-space-8); align-items: start; }
.zd4t-club__main > h2:first-child { margin-top: 0; }
.zd4t-club__section { margin-top: var(--zd4t-space-7); }
.zd4t-club__list { padding-left: 1.2em; }
.zd4t-club__list li { margin-bottom: var(--zd4t-space-2); }
.zd4t-club__aside { display: grid; gap: var(--zd4t-space-5); }
.zd4t-club__box { padding: var(--zd4t-space-5); background: var(--zd4t-bg-soft); border-top: 4px solid var(--zd4t-gold); border-radius: var(--zd4t-radius); }
.zd4t-club__box h2 { font-size: var(--zd4t-text-lg); margin: 0 0 var(--zd4t-space-3); }
.zd4t-officers { margin: 0; display: grid; gap: var(--zd4t-space-3); }
.zd4t-officers dt { font-size: var(--zd4t-text-sm); font-weight: 700; color: var(--zd4t-primary); }
.zd4t-officers dd { margin: 0; }
.zd4t-club__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zd4t-space-2); }
.zd4t-club__links a { display: inline-flex; align-items: center; gap: var(--zd4t-space-2); min-height: 32px; }
.zd4t-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--zd4t-space-3); }
.zd4t-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--zd4t-radius); }
.zd4t-embed { margin-bottom: var(--zd4t-space-5); }
.zd4t-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 880px) {
	.zd4t-club { grid-template-columns: minmax(0, 1fr); gap: var(--zd4t-space-6); }
}

.zd4t-area + .zd4t-area { margin-top: var(--zd4t-space-7); }
.zd4t-area > h2 { margin-top: 0; }
.zd4t-card__fact { display: flex; gap: var(--zd4t-space-2); align-items: flex-start; margin: 0 0 var(--zd4t-space-1); font-size: var(--zd4t-text-sm); color: var(--zd4t-muted); }
.zd4t-card__fact .zd4t-icon { margin-top: 2px; color: var(--zd4t-primary); }
.zd4t-card__distance { font-weight: 700; color: var(--zd4t-fg); }
.zd4t-card[hidden], .zd4t-area[hidden], .zd4t-club-finder__tools[hidden], .zd4t-club-finder__tools [hidden], .zd4t-club-map[hidden] { display: none; }

/* ---------- District map and Find a Club ---------- */
.zd4t-club-map { margin-bottom: var(--zd4t-space-8); }
/* Its own stacking context keeps Leaflet's panes (z-index 400–1000) under the sticky header. */
.zd4t-club-map__canvas { isolation: isolate; height: 520px; border: 1px solid var(--zd4t-border); border-radius: var(--zd4t-radius-lg); font: inherit; }
@media (max-width: 719px) { .zd4t-club-map__canvas { height: 360px; } }

/* [zd4t_club_links]: club names by Area. */
.zd4t-club-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--zd4t-space-5); margin-top: var(--zd4t-space-6); }
.zd4t-prose .zd4t-club-links h3 { margin: 0 0 var(--zd4t-space-2); padding-bottom: var(--zd4t-space-2); font-size: var(--zd4t-text-base); border-bottom: 4px solid var(--zd4t-gold); }
.zd4t-club-links ul { list-style: none; margin: 0; padding: 0; }
.zd4t-club-links li { margin: 0; }
.zd4t-club-links li a { display: inline-block; padding: var(--zd4t-space-1) 0; }
.zd4t-club-links__more { margin-top: var(--zd4t-space-5); }
.zd4t-club-map__canvas:focus-visible { outline: 3px solid var(--zd4t-focus); outline-offset: 2px; }
.zd4t-club-map__legend { display: flex; flex-wrap: wrap; gap: var(--zd4t-space-2) var(--zd4t-space-6); margin: var(--zd4t-space-3) 0 0; padding: 0; list-style: none; font-size: var(--zd4t-text-sm); }
.zd4t-club-map__legend li { display: flex; align-items: center; gap: var(--zd4t-space-2); }
.zd4t-club-map__legend .zd4t-pin { flex: none; }
.zd4t-club-map .zd4t-club-map__popup p { margin: 0 0 4px; font-size: var(--zd4t-text-sm); }
.zd4t-club-map .zd4t-club-map__popup .zd4t-club-map__name { font-size: var(--zd4t-text-base); font-weight: 700; }
.zd4t-club-map .leaflet-popup-content .zd4t-club-map__link { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--zd4t-link); }

/* Leaflet's own marker styles load later and set display. */
.zd4t-pin { display: inline-block; box-sizing: border-box; text-align: center; line-height: 24px; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(31, 26, 26, .7), 0 2px 4px rgba(31, 26, 26, .35); font-weight: 700; font-size: 14px; color: var(--zd4t-fg); background: var(--zd4t-gray); }
.zd4t-pin.leaflet-marker-icon { display: inline-block; }
.zd4t-pin:focus-visible { outline: 3px solid var(--zd4t-focus); outline-offset: 2px; }
.zd4t-pin--1 { background: var(--zd4t-mahogany); color: #fff; }
.zd4t-pin--2 { background: var(--zd4t-cyan); color: #fff; }
.zd4t-pin--3 { background: var(--zd4t-orange); }
.zd4t-pin--4 { background: var(--zd4t-gold); }
.zd4t-pin--5 { background: var(--zd4t-gray); }

.zd4t-club-finder__tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--zd4t-space-3) var(--zd4t-space-4); margin-bottom: var(--zd4t-space-3); }
.zd4t-club-finder__search { flex: 1 1 280px; max-width: 480px; }
.zd4t-club-finder__search label { display: block; margin-bottom: var(--zd4t-space-1); font-weight: 700; }
.zd4t-club-finder__search input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--zd4t-muted); border-radius: var(--zd4t-radius); font: inherit; color: var(--zd4t-fg); background: #fff; }
.zd4t-club-finder__search input:focus-visible { outline: 3px solid var(--zd4t-focus); outline-offset: 1px; }
.zd4t-club-finder__status { min-height: 1.5em; margin: 0 0 var(--zd4t-space-4); font-weight: 700; }
.zd4t-club-finder__nearest-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--zd4t-space-3); }

/* ---------- Responsive ---------- */
/* Eight links, the portal button and search take about 900px, which leaves room
   for a logo up to about 250px wide from 1280px up. */
@media (max-width: 1279px) {
	.zd4t-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--zd4t-space-2);
		min-height: 44px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 10px;
		color: inherit;
		font: inherit;
		font-weight: 700;
	}
	.zd4t-header__bars { display: inline-flex; flex-direction: column; gap: 5px; }
	.zd4t-header__bars span { width: 22px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
	.zd4t-header__toggle[aria-expanded="true"] .zd4t-header__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.zd4t-header__toggle[aria-expanded="true"] .zd4t-header__bars span:nth-child(2) { opacity: 0; }
	.zd4t-header__toggle[aria-expanded="true"] .zd4t-header__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Drops down under the sticky header, so the toggle stays in view. */
	.zd4t-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		background: #fff;
		border-top: 1px solid var(--zd4t-border);
		box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
		flex-direction: column;
		align-items: stretch;
		padding: var(--zd4t-space-3) var(--zd4t-gutter) var(--zd4t-space-5);
	}
	.zd4t-header__nav.is-open { display: flex; }
	.zd4t-menu { flex-direction: column; align-items: stretch; width: 100%; }
	.zd4t-menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--zd4t-border); }
	.zd4t-menu > li > a { flex: 1; padding: 12px 0; }
	.zd4t-submenu-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
	.zd4t-menu__underline { display: none; }
	.zd4t-menu .sub-menu {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		border: none;
		box-shadow: none;
		padding: 0 0 var(--zd4t-space-2) var(--zd4t-space-4);
		display: none;
		opacity: 1;
		visibility: visible;
	}
	.zd4t-menu .sub-menu a { padding: 8px 0; }
	.zd4t-menu li.is-open > .sub-menu { display: block; }
	.zd4t-header__portal { margin: var(--zd4t-space-4) 0 0; align-self: flex-start; }
	.zd4t-header__search { align-self: flex-start; }
}