/* ============================================================
   Volunteer Blue — key_state (Take Action [State]) redesign
   Layout A (Stacked). All rules scoped under .ks-page so nothing
   here can affect the rest of the site.
   Load only on single key_state (see functions enqueue snippet).
   ============================================================ */
.ks-page {
	--ks-navy: #0a2852;
	--ks-blue: #1a56b0;
	--ks-sky: #38b6ff;
	--ks-sky-soft: #e8f4ff;
	--ks-red: #e03131;
	--ks-red-deep: #c0392b;
	--ks-amber: #f08c00;
	--ks-ink: #20262e;
	--ks-muted: #5a6675;
	--ks-line: #e3e8ef;
	--ks-bg: #f4f7fb;
	--ks-card: #fff;
	--ks-radius: 14px;
	--ks-shadow: 0 2px 14px rgba(10, 40, 82, .08);
	--ks-shadow-lg: 0 8px 30px rgba(10, 40, 82, .14);
	background: var(--ks-bg);
	color: var(--ks-ink);
}

.ks-page * {
	box-sizing: border-box;
}

.ks-wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

.ks-page a {
	color: var(--ks-blue);
	text-decoration: none;
}

/* ---------- HERO ---------- */
.ks-hero {
	background: radial-gradient(1200px 300px at 80% -40%, #14418a 0%, transparent 60%), linear-gradient(120deg, var(--ks-navy) 0%, #10346a 60%, #14418a 100%);
	color: #fff;
	padding: 26px 0 30px;
}

.ks-herogrid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 26px;
	align-items: start;
}

.ks-crumbs {
	font-size: 12.5px;
	color: #9fc0ec;
	font-weight: 600;
	margin-bottom: 8px;
}

.ks-page .ks-crumbs a {
	color: #9fc0ec;
}

.ks-h1 {
	margin: 0 0 10px !important;
	color: #fff !important;
	font-size: 38px;
	line-height: 1.05;
	text-shadow: none;
}

.ks-racechips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.ks-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
	padding: 5px 11px;
	border-radius: 999px;
}

.ks-chip.office {
	background: rgba(56, 182, 255, .16);
	color: #cfeeff;
	border: 1px solid rgba(56, 182, 255, .5);
}

.ks-chip.date {
	background: rgba(255, 255, 255, .1);
	color: #e9f1fb;
	border: 1px solid rgba(255, 255, 255, .25);
}

.ks-lead {
	color: #dbe8fb;
	font-size: 16px;
	margin: 2px 0 8px;
	max-width: 60ch;
}

.ks-primary {
	color: #bcd4f2;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
}

/* one chip per race, colored by status */
.ks-chip.ks-race {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #eaf2fd;
}

.ks-chip.ks-race .ks-race-tag {
	font-weight: 800;
	letter-spacing: .5px;
	font-size: 11px;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 6px;
}

.ks-chip.ks-flip {
	border-color: rgba(255, 120, 120, .6);
}

.ks-chip.ks-flip .ks-race-tag {
	background: rgba(224, 49, 49, .4);
	color: #ffe0e0;
}

.ks-chip.ks-hold {
	border-color: rgba(56, 182, 255, .6);
}

.ks-chip.ks-hold .ks-race-tag {
	background: rgba(56, 182, 255, .32);
	color: #dbf1ff;
}

.ks-chip.ks-open {
	border-color: rgba(240, 140, 0, .6);
}

.ks-chip.ks-open .ks-race-tag {
	background: rgba(240, 140, 0, .4);
	color: #ffe9c9;
}

.ks-chip.ks-watch {
	border-color: rgba(255, 255, 255, .4);
}

.ks-chip.ks-watch .ks-race-tag {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* hero actions row: "About this race" toggle + "Meet with an Action Coach" CTA */
.ks-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.ks-acc-full {
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease;
	color: #d3e2f7;
	font-size: 15px;
	padding-top: 0;
}

.ks-acc-full.open {
	max-height: 1400px;
	padding-top: 16px;
	margin-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.ks-acc-full p {
	margin: 0 0 10px;
}

.ks-acc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 15px;
	border-radius: 8px;
	cursor: pointer;
}

.ks-caret {
	transition: transform .3s;
}

.ks-acc-toggle.open .ks-caret {
	transform: rotate(180deg);
}

.ks-coach-btn {
	display: inline-block;
	background: var(--ks-red);
	color: #fff !important;
	font-weight: 700;
	font-size: 13.5px;
	padding: 9px 16px;
	border-radius: 8px;
	text-decoration: none;
	border: 1px solid transparent;
}

.ks-coach-btn:hover {
	filter: brightness(1.06);
}

/* map card */
.ks-mapcard {
	background: #fff;
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow-lg);
	padding: 14px;
	text-align: center;
	color: var(--ks-ink);
}

.ks-maplabel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--ks-muted);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.ks-mapcard img.ks-map-img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

@media (max-width:820px) {
	.ks-herogrid {
		grid-template-columns: 1fr;
	}
	
	.ks-hero-map {
		order: -1;
	}
	
	.ks-mapcard {
		max-width: 300px;
	}
	
	.ks-h1 {
		font-size: 30px;
	}
}

/* ---------- SECTION SCAFFOLD ---------- */
.ks-page main, .ks-page.l-main {
	padding-bottom: 70px;
}

.ks-section {
	margin-top: 24px;
}

.ks-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 22px 0 12px;
}

.ks-section-head h2 {
	margin: 0 !important;
	font-size: 21px !important;
	color: var(--ks-navy) !important;
	display: flex;
	align-items: center;
	gap: 10px;
	text-shadow: none;
}

.ks-section-head h2.ks-h3 {
	font-size: 18px !important;
}

.ks-dot {
	width: 10px;
	height: 22px;
	border-radius: 3px;
	background: var(--ks-sky);
	display: inline-block;
}

.ks-link {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.ks-kr-sub {
	color: var(--ks-muted);
	margin: -4px 0 12px;
}

.ks-kr-block {
	margin-bottom: 16px;
}

.ks-kr-block:last-child {
	margin-bottom: 0;
}

.ks-kr-chamber {
	margin: 0 0 8px !important;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--ks-navy) !important;
}

.ks-card {
	background: var(--ks-card);
	border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
}

.ks-pad {
	padding: 16px 18px;
}

.ks-empty {
	color: var(--ks-muted);
	font-size: 14px;
	padding: 8px 0;
}

/* ---------- KEY RACES — restyle the Ninja Table output ---------- */
.ks-kr-card {
	overflow-x: auto;
	padding: 0;
}

/* target whatever table the ninja shortcode renders inside this card */
.ks-kr-card table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	font-size: 14px;
	margin: 0;
}

.ks-kr-card table thead th, .ks-kr-card table thead td {
	background: var(--ks-navy) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 11px 12px !important;
	text-align: left;
	white-space: nowrap;
	border: 0 !important;
}

.ks-kr-card table td {
	padding: 12px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ks-line) !important;
	vertical-align: middle;
}

.ks-kr-card table tbody tr:hover {
	background: #f7fbff;
}

/* keep the plugin's own conditional cell colors, just soften corners */
.ks-kr-card table td[style*="background"], .ks-kr-card table td[class*="highlight"] {
	border-radius: 4px;
}

/* hide Ninja's search/length/pagination chrome for a clean embedded look */
.ks-kr-card .ninja_footer, .ks-kr-card .ninja_table_search, .ks-kr-card .dataTables_filter, .ks-kr-card .dataTables_length, .ks-kr-card .dataTables_info, .ks-kr-card .dataTables_paginate {
	display: none !important;
}

/* Responsive: stack the key-races table into cards on phones.
   Requires each cell to carry data-label; Ninja Tables' responsive
   mode also handles this — this is a graceful fallback.            */
@media (max-width:720px) {
	.ks-kr-card {
		overflow: visible;
	}
	
	.ks-kr-card table {
		min-width: 0;
	}
	
	.ks-kr-card table.ks-stackable, .ks-kr-card table.ks-stackable thead, .ks-kr-card table.ks-stackable tbody, .ks-kr-card table.ks-stackable tr, .ks-kr-card table.ks-stackable td {
		display: block;
		width: 100%;
	}
	
	.ks-kr-card table.ks-stackable thead {
		display: none;
	}
	
	.ks-kr-card table.ks-stackable tr {
		border: 1px solid var(--ks-line);
		border-radius: 10px;
		margin: 10px;
	}
	
	.ks-kr-card table.ks-stackable td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		padding: 9px 12px !important;
		border-bottom: 1px solid #eef2f7 !important;
	}
	
	.ks-kr-card table.ks-stackable td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--ks-navy);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .4px;
	}
}

/* ---------- ACTION ZONE (2 columns: Events | Do Anytime Actions) ---------- */
.ks-cols3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
	align-items: start;
}

@media (max-width:820px) {
	.ks-cols3 {
		grid-template-columns: 1fr;
	}
}

.ks-daa-sub {
	font-size: 12.5px;
	color: var(--ks-muted);
	margin: -4px 0 12px;
}

/* events (styling around The Events Calendar list shortcode output) */
.ks-events {
	margin-bottom: 0;
}

.ks-events .tribe-events-l-container, .ks-events .tribe-common {
	padding: 0 !important;
	margin: 0 !important;
}

.ks-events .tribe-events-calendar-list__event-row {
	margin-bottom: 10px;
}

/* collapse the empty title/search/events-bar rows TEC stacks above the date
   selector — keep only the top-bar (the "Now – date" datepicker + nav) */
.ks-page .tribe-events-header {
	margin: 0 !important;
	padding: 0 !important;
}

.ks-page .tribe-events-header > :not(.tribe-events-header__top-bar) {
	display: none !important;
}

.ks-page .tribe-events-c-top-bar {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.ks-page .tribe-events-view, .ks-page .tribe-events {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* hide the "Subscribe to calendar" dropdown that TEC prints under the list */
.ks-page .tribe-events-c-subscribe-dropdown__container, .ks-page .tribe-events-c-subscribe-dropdown {
	display: none !important;
}

/* shrink the TEC datepicker label ("Now – 7/29/2026"), which ships as an h3 */
.ks-page .tribe-events-c-top-bar__datepicker-button, .ks-page .tribe-events-c-top-bar__datepicker-time {
	font-size: 14px !important;
	line-height: 1.3 !important;
}

/* "Full [State] calendar" + "More Anytime Actions" — matching navy pills, centered */
.ks-cal-btn, .ks-more-btn {
	display: block;
	width: fit-content;
	margin: 14px auto 0;
	background: var(--ks-navy);
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 9px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	text-align: center;
}

.ks-cal-btn:hover, .ks-more-btn:hover {
	filter: brightness(1.08);
}

/* extra action kits (beyond the first 8) stay hidden until "More" is clicked.
   Higher specificity than .ks-kit so display:none actually wins. */
.ks-kits .ks-kit-extra {
	display: none;
}

.ks-kits .ks-kit-extra.ks-show {
	display: flex;
}

/* action kit cards */
.ks-kits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width:520px) {
	.ks-kits {
		grid-template-columns: 1fr;
	}
}

.ks-kit {
	border: 1px solid var(--ks-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.ks-kit-thumb {
	display: block;
	height: 88px;
	background: linear-gradient(135deg, var(--ks-blue), var(--ks-sky));
	background-size: cover;
	background-position: center;
}

.ks-kit-body {
	padding: 9px 11px;
}

.ks-kit-title {
	margin: 0 0 4px !important;
	font-size: 13.5px !important;
	line-height: 1.25;
	color: var(--ks-navy) !important;
}

.ks-kit-state {
	font-size: 11.5px;
	color: var(--ks-muted);
}

/* resources / get involved */
.ks-res .ks-res-row {
	padding: 11px 0;
	border-bottom: 1px solid var(--ks-line);
}

.ks-res .ks-res-row:last-child {
	border-bottom: 0;
}

.ks-lbl {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--ks-muted);
	margin-bottom: 6px;
}

.ks-person {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px;
}

.ks-person img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

/* buttons */
.ks-btn {
	display: inline-block;
	background: var(--ks-red);
	color: #fff !important;
	font-weight: 700;
	padding: 10px 15px;
	border-radius: 9px;
	font-size: 13.5px;
	cursor: pointer;
	border: 0;
	text-align: center;
}

.ks-btn.block {
	display: block;
	margin-bottom: 10px;
}

.ks-btn.ghost {
	background: #fff;
	color: var(--ks-blue) !important;
	border: 1.5px solid var(--ks-blue);
}

.ks-btn.navy {
	background: var(--ks-navy);
	color: #fff !important;
}

.ks-btn:hover {
	filter: brightness(1.05);
}

/* ---- Events Calendar list card: title on top; image left + location right, time full-width below ---- */
.ks-page .tribe-events-calendar-list__event {
	display: grid !important;
	grid-template-columns: 170px 1fr;
	column-gap: 14px;
	row-gap: 4px;
	align-items: start;
	margin: 0 !important;
}

.ks-page .tribe-events-calendar-list__event-details, .ks-page .tribe-events-calendar-list__event-header {
	display: contents;
}

.ks-page .tribe-events-calendar-list__event-title {
	grid-row: 1;
	grid-column: 1/-1;
	margin: 0 0 4px;
	padding: 0;
}

.ks-page .tribe-events-calendar-list__event-featured-image-wrapper {
	grid-row: 2;
	grid-column: 1;
	justify-self: start;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 170px;
}

.ks-page .tribe-events-calendar-list__event-featured-image {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 7/4;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	margin: 0;
}

.ks-page .tribe-events-calendar-list__event-venue {
	grid-row: 2;
	grid-column: 2;
	align-self: center;
	margin: 0 !important;
	padding: 0 !important;
}

.ks-page .tribe-events-calendar-list__event-datetime-wrapper {
	grid-row: 3;
	grid-column: 1/-1;
	align-self: start;
	margin: 2px 0 0;
	padding: 0 !important;
}

.ks-page .tribe-events-calendar-list__event-description, .ks-page .tribe-events-calendar-list__event-cost {
	grid-row: 4;
	grid-column: 1/-1;
}

/* No featured image -> text fills the whole width */
.ks-page .tribe-events-calendar-list__event:not(:has(.tribe-events-calendar-list__event-featured-image-wrapper)) {
	grid-template-columns: 1fr;
}

.ks-page .tribe-events-calendar-list__event:not(:has(.tribe-events-calendar-list__event-featured-image-wrapper)) .tribe-events-calendar-list__event-venue {
	grid-column: 1/-1;
}

.ks-page .tribe-events-calendar-list__event-row {
	margin-bottom: 16px;
}