/* Viimsi Veeklubi — custom styles */

.ast-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* =============================================================================
   Design System — CSS Custom Properties
   ============================================================================= */
:root {
	--vk-primary:       #0066B3;
	--vk-primary-dark:  #004f8a;
	--vk-primary-light: #e8f3fb;
	--vk-accent:        #F28C28;
	--vk-accent-dark:   #d47620;
	--vk-text:          #1A1A2E;
	--vk-text-light:    #4A5568;
	--vk-text-muted:    #718096;
	--vk-bg-light:      #F7FAFC;
	--vk-border:        #E2E8F0;
	--vk-white:         #ffffff;

	--vk-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
	--vk-shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
	--vk-shadow-md: 0 10px 20px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
	--vk-shadow-lg: 0 20px 30px rgba(0,0,0,0.10), 0 8px 12px rgba(0,0,0,0.05);

	--vk-radius:    12px;
	--vk-radius-sm: 8px;
	--vk-radius-lg: 20px;
	--vk-ease:      0.22s ease;
}

/* =============================================================================
   Base
   ============================================================================= */
html {
	scroll-behavior: smooth;
}

body {
	background-color: #ffffff !important;
	color: var(--vk-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* =============================================================================
   Header / Navigation
   ============================================================================= */
/*
 * Header height tokens — adjust here to resize everything at once.
 * Logo height is derived from header height (minus a small bottom margin),
 * and the logo is pinned to the top of the header so its top edge sits flush
 * against the header's top edge with no gap.
 */
:root {
	--vk-header-h: 70px;
	--vk-logo-gap: 16px;
	--vk-logo-h:   calc(var(--vk-header-h) - 6px);
}

/* ---- Header — fixed height -------------------------------------------- */
.site-header,
#masthead {
	background-color: var(--vk-white) !important;
	overflow: visible !important;
}

.main-header-bar,
.ast-primary-header-bar {
	background-color: var(--vk-white) !important;
	box-shadow: 0 1px 0 var(--vk-border), 0 2px 8px rgba(0,0,0,0.04) !important;
	height: var(--vk-header-h) !important;
	min-height: var(--vk-header-h) !important;
	overflow: visible !important;
	position: relative !important;
}

.site-primary-header-wrap,
.ast-flex.main-header-bar-wrap,
.ast-mobile-header-wrap {
	overflow: visible !important;
	height: 100% !important;
	/* Astra defaults this wrap to min-height: 80px, taller than our header,
	 * which vertically centers everything inside it with a phantom gap. */
	min-height: var(--vk-header-h) !important;
	align-items: center !important;
}

/* ---- Mobile nav menu — explicit background, not Astra's palette var ------
 * Astra's own inline CSS sets this via
 * background-color:var(--ast-global-color-secondary, --ast-global-color-5),
 * but that fallback isn't wrapped in a nested var(), so on this build neither
 * half resolves and the panel ends up with no real background at all —
 * visually blending into the white page behind it. Set it explicitly instead
 * of depending on that variable chain.
 * This site's mobile menu uses Astra's "Dropdown" style (.ast-mobile-header-content
 * opens below the header) rather than the "Popup" drawer style, so that's the
 * element actually in the DOM — the popup-drawer selector is kept alongside it
 * as a harmless no-op in case that Customizer setting ever changes. */
.ast-mobile-header-wrap .ast-mobile-header-content {
	background-color: var(--vk-bg-light) !important;
	border-top: 1px solid var(--vk-border);
	box-shadow: var(--vk-shadow-lg);
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background-color: var(--vk-bg-light) !important;
	border-left: 1px solid var(--vk-border);
	box-shadow: var(--vk-shadow-lg);
}

/* ---- Site identity — logo + title side by side, normal flow ---------- */
.ast-builder-layout-element .ast-site-identity,
.ast-site-identity {
	position: relative !important;
	overflow: visible !important;
	z-index: 200 !important;
	height: var(--vk-header-h) !important;
	/* Astra defaults 16px top/bottom padding here, which shrinks the flex
	 * content box and forces the logo to overflow no matter how it's aligned. */
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--vk-logo-gap);
}

/* ---- Logo — pinned to the top edge of the header, no overhang -------- */
/* .site-logo-img is the actual flex child of .ast-site-identity — the
 * <a class="custom-logo-link"> is nested inside it, so align-self must be
 * set on the span, not the link, to override the parent's align-items:center. */
.ast-site-identity .site-logo-img {
	align-self: flex-start !important;
	line-height: 0;
	/* Astra pads this 1rem on the right by default — we use --vk-logo-gap
	 * on the parent flex container for logo-to-title spacing instead. */
	padding-right: 0 !important;
}

.ast-site-identity .custom-logo-link,
.ast-site-identity .custom-mobile-logo-link {
	display: block !important;
	line-height: 0;
}

.ast-site-identity .custom-logo-link img.custom-logo,
.ast-site-identity .custom-mobile-logo-link img.custom-logo {
	height: var(--vk-logo-h) !important;
	width: auto !important;
	max-width: none !important;
	display: block !important;
	transition: transform var(--vk-ease);
}

/* ---- Tablet (≤921 px) ------------------------------------------------- */
@media (max-width: 921px) {
	:root {
		--vk-header-h: 60px;
	}

	/* Sticky header — the hamburger/mobile nav takes over below this same
	 * breakpoint, so pin the header to the top of the viewport while
	 * scrolling instead of letting it scroll away with the content. */
	.site-header,
	#masthead {
		position: sticky !important;
		top: 0;
		z-index: 999;
	}

	/* WP admin bar is also fixed to the top on mobile (46px tall) — offset
	 * the sticky header below it so they don't overlap for logged-in admins. */
	.admin-bar .site-header,
	.admin-bar #masthead {
		top: 46px;
	}
}

/* ---- Mobile (≤544 px) — title shrunk to fit one line next to the logo - */
@media (max-width: 544px) {
	:root {
		--vk-header-h: 56px;
		--vk-logo-gap: 8px;
	}

	/* Astra's mobile header bar defaults to 20px side padding — tighten it
	 * up so the logo + title have more room. */
	.main-header-bar,
	.ast-primary-header-bar {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.ast-site-identity .site-logo-img {
		flex-shrink: 0;
	}

	.ast-site-identity .ast-site-title-wrap {
		min-width: 0;
	}

	.ast-site-identity .site-title {
		font-size: 22px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---- Hover lift ------------------------------------------------------- */
.ast-site-identity .custom-logo-link:hover img.custom-logo,
.ast-site-identity .custom-mobile-logo-link:hover img.custom-logo {
	transform: translateY(-2px);
}

.main-navigation a {
	font-weight: 500;
	transition: color var(--vk-ease);
}

.main-navigation a:hover {
	color: var(--vk-primary) !important;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--vk-primary) !important;
	font-weight: 600;
}

/* =============================================================================
   Page Titles — centered, standard gap from header
   Reference: .vvk-pai / .vvk-oppemaks-wrap already sit at margin-top:2.5rem
   from their own wrapper, which resolves to 40px desktop / ~36.5px mobile
   (2.5rem scaled by the html{font-size:91.2%} mobile rule). Every page below
   is made to match that same 2.5rem gap and centered text.
   Astra's own #primary has a hardcoded margin-top: 60px desktop / 0px mobile
   whenever a native page title is present — overridden here to the same
   2.5rem so it scales identically to the PAI/Õppemaks pages.
   Excluded per design: /kontakt, /meist/klubi-ajalugu (custom title layouts).
   ============================================================================= */
.vvk-page-treenerid #primary,
.vvk-page-ujulad #primary,
.vvk-page-koduope #primary,
.vvk-page-ujumiskooli-eeskiri #primary,
.vvk-page-liitu-klubiga #primary,
.vvk-page-voistlused #primary,
.vvk-page-taiskasvanutele #primary,
.vvk-page-eelkooliealised #primary {
	margin-top: 2.5rem !important;
}

.vvk-page-treenerid .entry-title,
.vvk-page-ujulad .entry-title,
.vvk-page-koduope .entry-title,
.vvk-page-voistlused .entry-title {
	text-align: center;
}

/* Ujumiskooli eeskiri's title is the first heading of its admin-editable
 * body text (no fixed template heading exists), so it's targeted structurally. */
.vvk-eeskiri-wrap > h3:first-child {
	text-align: center;
}

/* PAI / Õppemaks already sit at the standard gap — just need centering. */
.vvk-pai-header h2,
.vvk-oppemaks-wrap > h2:first-child {
	text-align: center;
}

/* Liitu klubiga: its Elementor section carries its own top padding on top
 * of #primary's margin above — zeroed out so #primary's 2.5rem is the only
 * gap, matching every other page. */
.vvk-page-liitu-klubiga .elementor-top-section:first-of-type {
	padding-top: 0 !important;
}
.vvk-page-liitu-klubiga .elementor-top-section:first-of-type > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-top: 0 !important;
}

/* =============================================================================
   Hero Section (.vk-hero-cover) — image carousel background
   ============================================================================= */
.vk-hero-cover,
.wp-block-cover.vk-hero-cover {
	background: #002d5a !important; /* fallback while images load */
	position: relative;
	overflow: hidden;
	min-height: 460px !important;
}

/* Dark overlay for text readability over photos */
.vk-hero-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 18, 45, 0.52);
	pointer-events: none;
	z-index: 1;
}

/* Subtle wave at bottom */
.vk-hero-cover::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 60px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat bottom center;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 3;
}

/* Cover block background span */
.vk-hero-cover .wp-block-cover__background {
	background-color: transparent !important;
	opacity: 1 !important;
}

/* Inner content sits above overlay and carousel */
.vk-hero-cover .wp-block-cover__inner-container,
.vk-hero-cover > .elementor-container {
	position: relative;
	z-index: 2;
	padding-bottom: 3rem !important;
}

/* ── Carousel backdrop (injected by JS) ── */
.vvk-hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vvk-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.vvk-hero-slide.is-active {
	opacity: 1;
}

/* Dot indicators */
.vvk-hero-dots {
	position: absolute;
	bottom: 72px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 4;
}

.vvk-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease, transform 0.25s ease;
}

.vvk-hero-dot.is-active {
	background: #ffffff;
	transform: scale(1.35);
}

/* Prevent mid-word breaks and auto-hyphenation in the hero heading.
 * Elementor hardcodes this heading at 72px with no responsive override, so
 * scale it with the viewport: 72px cap on desktop, down to 40px on phones. */
.vk-hero-cover .elementor-heading-title {
	font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
	text-align: center !important;
}

@media (max-width: 768px) {
	.vk-hero-cover,
	.wp-block-cover.vk-hero-cover {
		min-height: 360px !important;
	}

	.vk-hero-cover::after {
		height: 36px;
	}

	.vvk-hero-dots {
		bottom: 48px;
	}
}

/* =============================================================================
   Sections
   ============================================================================= */
.vk-section {
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}

.vk-section-alt {
	background-color: var(--vk-bg-light) !important;
}

.vk-section-title {
	margin-bottom: 2.5rem;
	text-align: center;
}

.vk-section-title .wp-block-heading {
	margin-bottom: 0.6rem;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.wp-block-button__link {
	border-radius: var(--vk-radius-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition: background-color var(--vk-ease), border-color var(--vk-ease),
	            color var(--vk-ease), transform var(--vk-ease), box-shadow var(--vk-ease) !important;
	text-decoration: none !important;
}

/* Primary — Orange CTA */
.vk-btn-primary .wp-block-button__link {
	background-color: var(--vk-accent) !important;
	color: var(--vk-white) !important;
	border: 2px solid var(--vk-accent) !important;
	padding: 0.8rem 2rem !important;
	box-shadow: 0 3px 8px rgba(242,140,40,0.35) !important;
}

.vk-btn-primary .wp-block-button__link:hover,
.vk-btn-primary .wp-block-button__link:focus {
	background-color: var(--vk-accent-dark) !important;
	border-color: var(--vk-accent-dark) !important;
	color: var(--vk-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(242,140,40,0.45) !important;
}

/* Secondary — White ghost (for dark/hero backgrounds) */
.vk-btn-secondary .wp-block-button__link {
	background-color: rgba(255,255,255,0.12) !important;
	color: var(--vk-white) !important;
	border: 2px solid rgba(255,255,255,0.75) !important;
	padding: 0.8rem 2rem !important;
	backdrop-filter: blur(4px);
}

.vk-btn-secondary .wp-block-button__link:hover,
.vk-btn-secondary .wp-block-button__link:focus {
	background-color: rgba(255,255,255,0.22) !important;
	border-color: var(--vk-white) !important;
	color: var(--vk-white) !important;
	transform: translateY(-2px);
}

/* Outline — Blue ghost (for light backgrounds) */
.vk-btn-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--vk-primary) !important;
	border: 2px solid var(--vk-primary) !important;
	padding: 0.65rem 1.5rem !important;
}

.vk-btn-outline .wp-block-button__link:hover,
.vk-btn-outline .wp-block-button__link:focus {
	background-color: var(--vk-primary) !important;
	color: var(--vk-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,102,179,0.3) !important;
}

/* Focus ring (accessibility) */
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--vk-accent);
	outline-offset: 3px;
}

/* Elementor fallback */
.elementor-button {
	cursor: pointer;
}

/* =============================================================================
   Cards (.vk-card)
   ============================================================================= */
.vk-card {
	background-color: var(--vk-white) !important;
	border-radius: var(--vk-radius) !important;
	border: 1px solid var(--vk-border) !important;
	box-shadow: var(--vk-shadow) !important;
	overflow: hidden !important;
	transition: transform var(--vk-ease), box-shadow var(--vk-ease) !important;
}

.vk-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--vk-shadow-md) !important;
}

/* Card images flush */
.vk-card .wp-block-image {
	margin: 0 !important;
	line-height: 0;
}

.vk-card .wp-block-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
}

/* Colored top accent border per course group */
/* Mudilased — purple */
.vk-card:has(p[style*="#8B5CF6"]) {
	border-top: 4px solid #8B5CF6 !important;
}
/* Lapsed — green */
.vk-card:has(p[style*="#10B981"]) {
	border-top: 4px solid #10B981 !important;
}
/* Võistlussport — red */
.vk-card:has(p[style*="#EF4444"]) {
	border-top: 4px solid #EF4444 !important;
}
/* Täiskasvanud — blue */
.vk-card:has(p[style*="#3B82F6"]) {
	border-top: 4px solid #3B82F6 !important;
}

/* =============================================================================
   Trainer Cards (.vk-trainer-card)
   ============================================================================= */
.vk-trainer-card {
	text-align: center;
}

.vk-trainer-card .vk-trainer-photo figure {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.vk-trainer-card .vk-trainer-photo img {
	border: 3px solid var(--vk-primary-light) !important;
	box-shadow: 0 0 0 5px rgba(0,102,179,0.08);
	transition: box-shadow var(--vk-ease);
}

.vk-trainer-card:hover .vk-trainer-photo img {
	box-shadow: 0 0 0 5px rgba(0,102,179,0.2);
}

/* =============================================================================
   News Grid (.vk-news-grid)
   ============================================================================= */
.vk-news-grid .wp-block-latest-posts.is-grid {
	gap: 1.5rem !important;
}

.vk-news-grid .wp-block-latest-posts__list-item {
	background: var(--vk-white);
	border-radius: var(--vk-radius-sm);
	overflow: hidden;
	border: 1px solid var(--vk-border);
	box-shadow: var(--vk-shadow-sm);
	transition: transform var(--vk-ease), box-shadow var(--vk-ease);
	padding: 1.25rem !important;
}

.vk-news-grid .wp-block-latest-posts__list-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--vk-shadow);
}

.vk-news-grid .wp-block-latest-posts__post-title {
	color: var(--vk-text) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	line-height: 1.4;
}

.vk-news-grid .wp-block-latest-posts__post-title:hover {
	color: var(--vk-primary) !important;
}

.vk-news-grid .wp-block-latest-posts__post-date {
	color: var(--vk-text-muted) !important;
	font-size: 0.8rem !important;
}

.vk-news-grid .wp-block-latest-posts__post-excerpt {
	color: var(--vk-text-light) !important;
	font-size: 0.9rem !important;
	margin-top: 0.5rem;
	line-height: 1.6;
}

/* =============================================================================
   CTA / Call-to-Action Section
   ============================================================================= */
/* Targets the blue CTA group on the homepage */
.vk-section[style*="background-color:#0066B3"],
.vk-section[style*="background-color: #0066B3"] {
	position: relative;
	overflow: hidden;
}

.vk-section[style*="background-color:#0066B3"]::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -5%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	pointer-events: none;
}

.vk-section[style*="background-color:#0066B3"]::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(255,255,255,0.04);
	pointer-events: none;
}

/* =============================================================================
   Footer
   ============================================================================= */
#colophon,
.site-footer {
	background-color: #111827 !important;
	color: rgba(255,255,255,0.65) !important;
}

.site-footer .ast-footer-widget-area,
.site-footer .ast-builder-grid-row {
	padding-top: 3rem;
	padding-bottom: 2rem;
}

.site-footer a {
	color: rgba(255,255,255,0.75) !important;
	transition: color var(--vk-ease);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--vk-white) !important;
}

.site-footer .ast-footer-copyright {
	color: rgba(255,255,255,0.4) !important;
	font-size: 0.85rem;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 1.25rem;
}

/* =============================================================================
   Miscellaneous Typography polish
   ============================================================================= */
.wp-block-heading {
	color: var(--vk-text);
	font-weight: 700;
	line-height: 1.2;
}

.wp-site-blocks > *:first-child {
	margin-top: 0;
}

/* Inline paragraph links */
.entry-content a:not(.wp-block-button__link) {
	color: var(--vk-primary);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--vk-ease), color var(--vk-ease);
}

.entry-content a:not(.wp-block-button__link):hover {
	color: var(--vk-primary-dark);
	text-decoration-color: currentColor;
}

/* =============================================================================
   Tunniplaan (Timetable)
   ============================================================================= */
/* !important: Astra's blocks-layout rules (.entry-content[data-ast-blocks-layout] > *)
 * force max-width:none on direct/grandchild content at higher specificity than a
 * plain class selector, so these have to win explicitly. */
.vvk-tunniplaan {
	max-width: 1160px !important;
	margin: 0 auto !important;
}

/* Standalone tunniplaan page — top padding matches the standard 2.5rem
 * header gap (see "Page Titles" section above); horizontal padding on mobile. */
.vvk-page-tunniplaan .vvk-tunniplaan {
	padding: 2.5rem 1.25rem 4rem;
}

.vvk-tunniplaan-title {
	text-align: center;
	margin: 0 0 2rem;
}

/* Avaleht has its own Elementor "Tunniplaan" heading above the shortcode —
   hide the shortcode's own duplicate title there so it isn't shown twice. */
.vvk-page-avaleht .vvk-tunniplaan-title {
	display: none;
}

/* Intro text above the timetable */
.vvk-tunniplaan-intro {
	max-width: 800px !important;
	margin: 0 auto 2rem !important;
	color: var(--vk-text-light);
	font-size: 1rem;
	line-height: 1.7;
}

.vvk-tunniplaan-intro p + p {
	margin-top: 1rem;
}

.vvk-tunniplaan-intro a {
	color: var(--vk-primary);
	font-weight: 600;
	text-decoration: underline;
}

.vvk-tunniplaan-intro a:hover {
	color: var(--vk-primary-dark);
}

/* Filter bar: pool ("Ujula"), level ("Tase") and age group ("Vanuserühm")
   dropdowns — always visible, row on desktop, stacked on mobile (see the
   max-width:600px rule in the "Timetable responsive" section below). */
.vvk-tunniplaan-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-bottom: 28px;
}

.vvk-filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 220px;
}

.vvk-filter-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vk-text-light);
}

.vvk-filter-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.6rem 2.25rem 0.6rem 0.9rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--vk-text);
	background-color: var(--vk-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230066B3'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	border: 1.5px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	cursor: pointer;
	transition: border-color var(--vk-ease), box-shadow var(--vk-ease);
}

.vvk-filter-select:hover {
	border-color: var(--vk-primary);
}

.vvk-filter-select:focus,
.vvk-filter-select:focus-visible {
	outline: 0;
	border-color: var(--vk-primary);
	box-shadow: 0 0 0 3px var(--vk-primary-light);
}

/* One card per training group, listing all of its weekly occurrences */
.vvk-tunniplaan-groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.vvk-group-card {
	background: var(--vk-white);
	border: 1px solid var(--vk-border);
	border-top: 4px solid var(--vk-primary); /* overridden per-card via inline style */
	border-radius: var(--vk-radius);
	box-shadow: var(--vk-shadow-sm);
	padding: 1.25rem 1.25rem 0.75rem;
}

/* Filtered-out cards are removed from view */
.vvk-group-card.vvk-group-card-hidden {
	display: none;
}

.vvk-group-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 4px;
}

.vvk-group-card-meta {
	font-size: 0.8rem;
	color: var(--vk-text-light);
	margin-bottom: 10px;
}

.vvk-group-occurrences {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vvk-occurrence {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 8px 0;
	border-top: 1px solid var(--vk-border);
	font-size: 13px;
}

.vvk-occurrence:first-child {
	border-top: none;
}

/* When a pool filter is active, occurrences at other pools are dimmed (not
   hidden) so the ones matching the selected pool stand out within the card */
.vvk-occurrence-dimmed {
	opacity: 0.4;
}

.vvk-occurrence-day {
	font-weight: 700;
	color: var(--vk-text);
	min-width: 90px;
}

.vvk-occurrence-time {
	font-weight: 600;
	color: var(--vk-text-light);
}

.vvk-occurrence-loc {
	color: var(--vk-primary);
	font-weight: 600;
}

/* Occurrence comment line — shown below the occurrence when present */
.vvk-occurrence-comment {
	flex-basis: 100%;
	color: var(--vk-text-light);
	font-style: italic;
	font-size: 11px;
	opacity: 0.7;
}

/* Group description disclosure */
.vvk-group-card-description {
	margin: 6px 0 10px;
	font-size: 0.85rem;
}

.vvk-group-card-description summary {
	cursor: pointer;
	list-style: none;
}

.vvk-group-card-description summary::-webkit-details-marker {
	display: none;
}

.vvk-group-card-description-toggle::before {
	content: "Loe lähemalt \25BE";
	color: var(--vk-primary);
	font-weight: 600;
}

.vvk-group-card-description[open] .vvk-group-card-description-toggle::before {
	content: "Loe vähem \25B4";
}

.vvk-group-card-description-text {
	margin: 8px 0 0;
	color: var(--vk-text-light);
	white-space: pre-line;
	line-height: 1.6;
}

/* Empty state */
.vvk-tunniplaan-empty {
	text-align: center;
	color: #718096;
	font-style: italic;
	padding: 48px 20px;
}

/* =============================================================================
   Teated (notices bar below hero)
   ============================================================================= */
.vvk-teated-bar {
	background: #fffbeb;
	padding: 1.5rem 0 1.75rem;
	border-top: 3px solid #f59e0b;
	border-bottom: 1px solid #fde68a;
}

.vvk-teated-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.vvk-teated-kiri {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #92400e;
	margin-bottom: 0.875rem;
}

.vvk-teated-kiri::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2392400e'%3E%3Cpath d='M18 11v2l4 1V10l-4 1zm-2 6.3c-.7.4-1.3.7-2 .7-1.1 0-2-.9-2-2h-2c0 2.2 1.8 4 4 4 1.2 0 2.2-.5 3-1.2l-1-1.5zM3 9v6h4l5 5V4L7 9H3zm12 3c0-1.7-.9-3.2-2-4v8c1.1-.8 2-2.3 2-4z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.vvk-teated-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.875rem;
}

.vvk-teade-card {
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-left: 4px solid #f59e0b;
	border-radius: var(--vk-radius-sm);
	padding: 1rem 1.25rem;
}

.vvk-teade-title {
	font-weight: 700;
	font-size: 0.95rem;
	color: #78350f;
	line-height: 1.3;
}

.vvk-teade-title:not(:last-child) {
	margin-bottom: 0.3rem;
}

.vvk-teade-content {
	font-size: 0.9rem;
	color: #92400e;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.vvk-teated-list {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Contact form (.vvk-contact-*)
   ============================================================================= */
.vvk-contact-form-wrap {
	max-width: 560px;
	margin: 2rem 0;
}

.vvk-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vvk-contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.vvk-contact-field label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--vk-text);
}

.vvk-required {
	color: #EF4444;
	margin-left: 2px;
}

.vvk-contact-field input,
.vvk-contact-field textarea {
	border: 1.5px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	padding: 0.65rem 0.9rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--vk-text);
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--vk-ease), box-shadow var(--vk-ease);
}

.vvk-contact-field input:focus,
.vvk-contact-field textarea:focus {
	outline: none;
	border-color: var(--vk-primary);
	box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12);
}

.vvk-contact-field input.vvk-field-error,
.vvk-contact-field textarea.vvk-field-error {
	border-color: #EF4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.vvk-field-error-msg {
	font-size: 0.82rem;
	color: #EF4444;
	font-weight: 500;
	margin-top: 2px;
}

.vvk-contact-submit {
	align-self: flex-start;
	background: var(--vk-accent);
	color: #fff;
	border: none;
	border-radius: var(--vk-radius-sm);
	padding: 0.8rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(242, 140, 40, 0.3);
	transition: background var(--vk-ease), transform var(--vk-ease), box-shadow var(--vk-ease);
}
.vvk-kontakt-wrap .vvk-contact-submit {
	padding: 0.8rem 2rem;
}

.vvk-contact-submit:hover {
	background: var(--vk-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(242, 140, 40, 0.4);
}

.vvk-contact-success,
.vvk-contact-error {
	max-width: 560px;
	border-radius: var(--vk-radius-sm);
	padding: 1rem 1.25rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.vvk-contact-success {
	background: #ecfdf5;
	border: 1.5px solid #10B981;
	color: #065f46;
}

.vvk-contact-error {
	background: #fef2f2;
	border: 1.5px solid #EF4444;
	color: #991b1b;
}

/* =============================================================================
   Mobile Navigation — collapsible submenus
   ============================================================================= */

/* Hide all sub-menus in mobile (any nav container) */
.ast-header-break-point .menu-item-has-children .sub-menu {
	display: none !important;
}

/* Show when our JS adds .vvk-open — higher specificity wins */
.menu-item-has-children.vvk-open > .sub-menu {
	display: block !important;
}

/* Rotate caret when open */
.menu-item-has-children.vvk-open > .ast-menu-toggle .ast-icon {
	transform: rotateX(180deg);
	display: inline-block;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
	.vk-section {
		padding-top: 3.5rem !important;
		padding-bottom: 3.5rem !important;
	}
}

@media (max-width: 768px) {
	.vk-section {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.vk-hero-cover::after {
		height: 40px;
	}

	.vk-card .wp-block-image img {
		height: 170px;
	}
}

@media (max-width: 480px) {
	.vk-section {
		padding-top: 2.25rem !important;
		padding-bottom: 2.25rem !important;
	}

	.vk-btn-primary .wp-block-button__link,
	.vk-btn-secondary .wp-block-button__link {
		padding: 0.7rem 1.5rem !important;
	}
}

/* Timetable responsive */
@media (max-width: 900px) {
	.vvk-tunniplaan-groups {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.vvk-tunniplaan-groups {
		grid-template-columns: 1fr;
	}

	.vvk-tunniplaan-filterbar {
		flex-direction: column;
	}

	.vvk-filter-group {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* =============================================================================
   Treenerid Page (.vvk-treenerid-*)
   ============================================================================= */
/* The default page title sits outside .vvk-treenerid-wrap, so it needs its
 * own matching horizontal padding on mobile. */
.vvk-page-treenerid .entry-title {
	padding: 0 1.25rem;
}

.vvk-treenerid-wrap {
	padding: 0 1.25rem;
}

.vvk-treenerid-intro {
	text-align: center;
	padding: 1.5rem 0 2.5rem;
	border-bottom: 2px solid var(--vk-border);
	margin-bottom: 2.5rem;
}

.vvk-treenerid-motto {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--vk-primary);
	margin: 0 0 0.4rem;
}

.vvk-treenerid-tagline {
	color: var(--vk-text-light);
	font-size: 1.05rem;
	margin: 0;
}

.vvk-treenerid-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-bottom: 2.5rem;
}

.vvk-treener-card {
	background: var(--vk-white);
	border: 1px solid var(--vk-border);
	border-top: 4px solid var(--vk-primary);
	border-radius: var(--vk-radius);
	box-shadow: var(--vk-shadow);
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform var(--vk-ease), box-shadow var(--vk-ease);
}

.vvk-treener-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--vk-shadow-md);
}

.vvk-treener-photo {
	margin-bottom: 1.25rem;
}

.vvk-treener-photo img {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--vk-primary-light);
	box-shadow: 0 0 0 5px rgba(0, 102, 179, 0.08);
	display: block;
	margin: 0 auto;
}

.vvk-treener-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 0.75rem;
}

.vvk-treener-verse {
	font-size: 0.95rem;
	color: var(--vk-text-light);
	line-height: 1.65;
	font-style: italic;
	margin: 0;
}

.vvk-treenerid-contact {
	text-align: center;
	padding: 1.75rem 2rem;
	background: var(--vk-bg-light);
	border-radius: var(--vk-radius);
	border: 1px solid var(--vk-border);
}

.vvk-treenerid-contact p {
	margin: 0;
	color: var(--vk-text-light);
}

.vvk-treenerid-contact a {
	color: var(--vk-primary);
	font-weight: 600;
}

.vvk-treenerid-contact a:hover {
	color: var(--vk-primary-dark);
}

@media (max-width: 900px) {
	.vvk-treenerid-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

@media (max-width: 480px) {
	.vvk-treenerid-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Klubi Ajalugu — History Page (.vvk-ajalugu-*)
   ============================================================================= */

/* Hide default WP page title — the hero carries the identity */
.vvk-page-klubi-ajalugu .entry-title,
.vvk-page-klubi-ajalugu .entry-header,
.vvk-page-klubi-ajalugu .ast-page-title-wrap { display: none; }

.vvk-page-ujumiskooli-eeskiri .entry-title,
.vvk-page-ujumiskooli-eeskiri .entry-header,
.vvk-page-ujumiskooli-eeskiri .ast-page-title-wrap { display: none; }

.vvk-eeskiri-wrap {
	padding: 0 1.25rem;
}

.vvk-ajalugu-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 1rem 5rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.vvk-ajalugu-hero {
	position: relative;
	background: linear-gradient(150deg, #002f55 0%, #004f8a 40%, #0066B3 75%, #0080d4 100%);
	border-radius: var(--vk-radius-lg);
	margin: 0 0 3.5rem;
	overflow: hidden;
}

.vvk-ajalugu-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Concentric ripple circles */
.vvk-ajalugu-hero-bg::before {
	content: '';
	position: absolute;
	top: 45%;
	left: -5%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow:
		0 0 0 50px  rgba(255, 255, 255, 0.03),
		0 0 0 100px rgba(255, 255, 255, 0.02),
		0 0 0 150px rgba(255, 255, 255, 0.01);
	transform: translateY(-50%);
}

.vvk-ajalugu-hero-bg::after {
	content: '';
	position: absolute;
	top: 20%;
	right: -2%;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow:
		0 0 0 40px rgba(255, 255, 255, 0.025),
		0 0 0 80px rgba(255, 255, 255, 0.012);
}

.vvk-ajalugu-hero-content {
	position: relative;
	z-index: 1;
	padding: 3.5rem 2.5rem 1.25rem;
	text-align: center;
}

.vvk-ajalugu-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1.1rem;
}

.vvk-ajalugu-motto {
	font-family: 'Lora', Georgia, 'Times New Roman', serif;
	font-size: clamp(1.85rem, 4.5vw, 2.9rem);
	font-style: italic;
	font-weight: 600;
	color: #ffffff;
	line-height: 1.22;
	margin: 0 auto 2.75rem;
	max-width: 560px;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.vvk-ajalugu-wave {
	display: block;
	width: 100%;
	height: 50px;
	margin-bottom: -3px;
}

/* ── Body text ──────────────────────────────────────────────────────────── */
.vvk-ajalugu-body {
	font-size: 1.0625rem;
	line-height: 1.82;
	color: var(--vk-text);
	margin-bottom: 3.5rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--vk-primary-light);
}

.vvk-ajalugu-body p {
	margin: 0 0 1.2rem;
}

.vvk-ajalugu-body p:last-child {
	margin-bottom: 0;
}

.vvk-ajalugu-body strong {
	color: var(--vk-primary);
	font-weight: 600;
}

/* ── Section heading ────────────────────────────────────────────────────── */
.vvk-ajalugu-section-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vk-text-muted);
	margin: 0 0 2.75rem;
	white-space: nowrap;
}

.vvk-ajalugu-section-line {
	display: block;
	flex: 1;
	height: 1px;
	background: var(--vk-border);
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.vvk-ajalugu-timeline {
	position: relative;
}

.vvk-aim-item {
	display: grid;
	grid-template-columns: 72px 28px 1fr;
	column-gap: 1rem;
}

/* Year badge */
.vvk-aim-year-col {
	padding-top: 0.1rem;
	text-align: right;
}

.vvk-aim-year {
	display: inline-block;
	font-family: 'Lora', Georgia, serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--vk-accent);
	letter-spacing: 0.01em;
	line-height: 1.5;
}

/* Spine */
.vvk-aim-spine {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vvk-aim-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--vk-primary);
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px var(--vk-primary);
	flex-shrink: 0;
	margin-top: 0.18rem;
	position: relative;
	z-index: 1;
}

.vvk-aim-line {
	flex: 1;
	width: 2px;
	background: linear-gradient(to bottom, var(--vk-primary) 0%, var(--vk-border) 100%);
	margin-top: 4px;
	min-height: 2rem;
}

/* Card */
.vvk-aim-card {
	padding-bottom: 2.5rem;
}

.vvk-aim-last .vvk-aim-card {
	padding-bottom: 0;
}

.vvk-aim-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 0.45rem;
	line-height: 1.35;
}

.vvk-aim-text {
	font-size: 0.94rem;
	color: var(--vk-text-light);
	line-height: 1.72;
	margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
	.vvk-ajalugu-hero {
		border-radius: 0;
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.vvk-ajalugu-hero-content {
		padding: 2.5rem 1.5rem 0.75rem;
	}

	.vvk-ajalugu-body {
		padding-left: 0.875rem;
	}

	.vvk-aim-item {
		grid-template-columns: 56px 24px 1fr;
		column-gap: 0.75rem;
	}

	.vvk-aim-year {
		font-size: 0.78rem;
	}
}

/* ── Page-specific overrides ────────────────────────────────────────── */
.vvk-page-kontakt .entry-title,
.vvk-page-kontakt .entry-header,
.vvk-page-kontakt .ast-page-title-wrap { display: none; }

.vvk-page-liitu-klubiga .entry-title,
.vvk-page-liitu-klubiga .entry-header,
.vvk-page-liitu-klubiga .ast-page-title-wrap { display: none; }

.vvk-page-kontakt .vvk-contact-form-wrap,
.vvk-page-kontakt .elementor-widget:has(.vvk-contact-form-wrap) { border: none !important; }

/* Kontakt-card component (icon + label + value) used by the vvk_*_card
   shortcodes in mu-plugins/registration-form/settings.php. The Kontakt page
   itself carries an identical copy of these rules inline in its Elementor
   content (in the database, not in this file) — duplicated here so the same
   shortcodes render correctly wherever else they're used (e.g. Õppemaks). */
.vvk-kontakt-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vvk-kontakt-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(0,102,179,0.1);
	border-color: #0066B3;
}
.vvk-kontakt-card-ico {
	flex-shrink: 0;
	width: 42px; height: 42px;
	background: linear-gradient(135deg, #deeef9, #c2dff5);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
}
.vvk-kontakt-card-ico svg { width: 20px; height: 20px; color: #0066B3; }
.vvk-kontakt-card-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4A5568;
	margin-bottom: 5px;
}
.vvk-kontakt-card-val {
	font-size: 0.93rem;
	font-weight: 500;
	color: #1A1A2E;
	line-height: 1.55;
}
.vvk-kontakt-card-val a { color: #0066B3; text-decoration: none; }
.vvk-kontakt-card-val a:hover { text-decoration: underline; }

.vvk-arve-val { display: flex; flex-direction: column; gap: 5px; }
.vvk-arve-row {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	padding: 6px;
	margin: -6px;
	border-radius: 6px;
	transition: background 0.15s;
}
.vvk-arve-row:hover,
.vvk-arve-row:focus-visible {
	background: rgba(0,102,179,0.08);
}
.vvk-arve-row:active {
	background: rgba(0,102,179,0.14);
}
.vvk-arve-row:focus-visible {
	outline: 2px solid var(--vk-primary);
	outline-offset: 2px;
}
.vvk-copy-btn {
	background: none;
	border: none;
	padding: 3px;
	cursor: pointer;
	color: #A0AEC0;
	line-height: 0;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
	flex-shrink: 0;
}
.vvk-arve-row:hover .vvk-copy-btn { color: var(--vk-primary); }
.vvk-copy-btn.vvk-copied { color: #10B981; }
.vvk-copy-btn svg { width: 13px; height: 13px; }
.vvk-copy-btn .vvk-check-icon { display: none; }
.vvk-copy-btn.vvk-copied .vvk-copy-icon { display: none; }
.vvk-copy-btn.vvk-copied .vvk-check-icon { display: inline; }

.vvk-kontakt-map-live {
	background: none;
	border: none;
	padding: 0;
	height: 360px;
}

/* =============================================================================
   Ujulad Page (.vvk-ujulad-*)
   ============================================================================= */
/* The default page title sits outside .vvk-ujulad-wrap, so it needs its own
 * matching horizontal padding on mobile. */
.vvk-page-ujulad .entry-title {
	padding: 0 1.25rem;
}

.vvk-ujulad-wrap {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 0 1.25rem 3rem;
}

.vvk-ujula-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-lg);
	overflow: hidden;
	box-shadow: var(--vk-shadow);
	background: var(--vk-white);
}

.vvk-ujula-map {
	position: relative;
	min-height: 320px;
	background: var(--vk-bg-light);
}

.vvk-ujula-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.vvk-ujula-map-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.vvk-ujula-info {
	padding: 2rem 2rem 2rem 2.25rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-left: 1px solid var(--vk-border);
}

.vvk-ujula-name {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 .85rem;
	line-height: 1.25;
}

.vvk-ujula-address {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	color: var(--vk-text-light);
	font-size: .95rem;
	margin: 0 0 1.5rem;
}

.vvk-ujula-address .dashicons {
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 1rem;
	color: var(--vk-primary);
}

.vvk-ujula-hours {
	background: var(--vk-bg-light);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	padding: 1.1rem 1.25rem;
}

.vvk-ujula-hours-title {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--vk-primary);
	margin: 0 0 .75rem;
}

.vvk-ujula-hours-title .dashicons {
	font-size: 1rem;
}

.vvk-ujula-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.vvk-ujula-hours-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
	font-size: .92rem;
	color: var(--vk-text);
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--vk-border);
}

.vvk-ujula-hours-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.vvk-ujula-hours-day {
	color: var(--vk-text-light);
	white-space: nowrap;
}

.vvk-ujula-hours-time {
	font-weight: 600;
	white-space: nowrap;
	color: var(--vk-text);
}

/* No opening hours yet — soften the card */
.vvk-ujula-info:has(.vvk-ujula-address:last-child) {
	justify-content: center;
}

@media (max-width: 768px) {
	.vvk-ujula-card {
		grid-template-columns: 1fr;
	}

	.vvk-ujula-map {
		min-height: 260px;
	}

	.vvk-ujula-info {
		border-left: none;
		border-top: 1px solid var(--vk-border);
		padding: 1.5rem;
	}
}

/* =============================================================================
   404 Page
   ============================================================================= */
.vvk-404-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 4rem 1.5rem;
}

.vvk-404-inner {
	text-align: center;
	max-width: 480px;
}

.vvk-404-code {
	font-size: 7rem;
	font-weight: 800;
	line-height: 1;
	color: var(--vk-border);
	margin-bottom: 0.25rem;
}

.vvk-404-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 1rem;
}

.vvk-404-text {
	color: var(--vk-text-light);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 2rem;
}

.vvk-404-btn {
	display: inline-block;
}

/* =============================================================================
   Koduõpe Page
   ============================================================================= */
.vvk-kodupe {
	max-width: 820px;
	padding: 0 1.25rem;
}

.vvk-kodupe-section {
	margin-bottom: 3rem;
}

.vvk-kodupe-section h2 {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--vk-primary);
	border-bottom: 2px solid var(--vk-border);
	padding-bottom: 0.6rem;
	margin-bottom: 1.25rem;
}

.vvk-video-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.vvk-video-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: var(--vk-bg-light);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-radius-sm);
	line-height: 1.5;
}

.vvk-video-item a {
	flex: 1;
	color: var(--vk-primary);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--vk-ease);
}

.vvk-video-item a:hover {
	color: var(--vk-primary-dark);
	text-decoration: underline;
}

.vvk-badge {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 2px;
}

.vvk-badge--kergem  { background: #d1fae5; color: #065f46; }
.vvk-badge--keskmine { background: #fef3c7; color: #92400e; }
.vvk-badge--raske   { background: #fee2e2; color: #991b1b; }

.vvk-eope-links {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.vvk-eope-links li a {
	color: var(--vk-primary);
	font-weight: 500;
	text-decoration: none;
}

.vvk-eope-links li a:hover {
	text-decoration: underline;
}

.vvk-eraamat-card {
	background: var(--vk-bg-light);
	border: 1px solid var(--vk-border);
	border-left: 4px solid var(--vk-primary);
	border-radius: var(--vk-radius-sm);
	padding: 1.25rem 1.5rem;
}

.vvk-eraamat-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: var(--vk-text);
}

.vvk-eraamat-card p {
	color: var(--vk-text-light);
	font-size: 0.95rem;
	margin: 0 0 1rem;
	line-height: 1.65;
}

/* =============================================================================
   Custom Site Footer
   ============================================================================= */
.vvk-site-footer {
	padding: 0 !important;
}

.vvk-footer-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	padding: 2.75rem 2rem 2.25rem;
	max-width: 640px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.vvk-footer-inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 2.25rem 1.5rem 1.75rem;
	}
}

/* Section headings */
.vvk-footer-heading {
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.32) !important;
	margin: 0 0 0.9rem !important;
	padding: 0 !important;
	border: none !important;
}

/* Contact items */
.vvk-footer-contact-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
	color: rgba(255,255,255,0.65) !important;
	margin-bottom: 0.6rem;
	text-decoration: none !important;
	transition: color var(--vk-ease);
}

.vvk-footer-contact-item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.55;
	transition: opacity var(--vk-ease);
}

.vvk-footer-contact-item:hover {
	color: var(--vk-white) !important;
}

.vvk-footer-contact-item:hover svg {
	opacity: 0.9;
}

/* Footer nav menu */
.vvk-footer-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.vvk-footer-menu li {
	margin: 0;
	padding: 0;
}

.vvk-footer-menu li a {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.65) !important;
	text-decoration: none !important;
	transition: color var(--vk-ease);
}

.vvk-footer-menu li a:hover {
	color: var(--vk-white) !important;
}

/* Bottom bar */
.vvk-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.07);
	padding: 1rem 2rem;
}

.vvk-footer-copy {
	text-align: center;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.28) !important;
	margin: 0 !important;
}

/* =============================================================================
   PAI – spordipearaha leht
   ============================================================================= */
/* !important: Astra's blocks-layout rules (.entry-content[data-ast-blocks-layout] > *)
 * force max-width:none on direct/grandchild content at higher specificity than a
 * plain class selector, so these have to win explicitly (see .vvk-tunniplaan above). */
.vvk-pai {
	max-width: 1160px !important;
	margin: 2.5rem auto !important;
	padding: 0 1.25rem 3rem;
	color: var(--vk-text);
}

.vvk-pai-tagline {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vk-primary);
	margin: 0 0 0.5rem;
}

.vvk-pai-header h2 {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 1rem;
	line-height: 1.35;
}

.vvk-pai-header p {
	color: var(--vk-text-light);
	line-height: 1.7;
	margin: 0 0 0.85rem;
}

.vvk-pai-nb {
	background: #fffbeb;
	border-left: 4px solid #f59e0b;
	border-radius: 0 6px 6px 0;
	padding: 0.85rem 1rem;
	font-size: 0.95rem;
	color: #78350f;
	margin: 1.25rem 0 2rem;
	line-height: 1.6;
}

.vvk-pai-municipalities {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 0 0 2.25rem;
}

@media (max-width: 600px) {
	.vvk-pai-municipalities {
		grid-template-columns: 1fr;
	}
}

.vvk-pai-card {
	background: var(--vk-bg-light);
	border: 1px solid var(--vk-border);
	border-radius: 10px;
	padding: 1.35rem 1.25rem;
}

.vvk-pai-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--vk-primary);
	margin: 0 0 0.75rem;
}

.vvk-pai-card p {
	font-size: 0.93rem;
	color: var(--vk-text-light);
	line-height: 1.65;
	margin: 0 0 0.5rem;
}

.vvk-pai-card p:last-child {
	margin-bottom: 0;
}

.vvk-pai-card a {
	color: var(--vk-primary);
	font-weight: 600;
}

.vvk-pai-steps,
.vvk-pai-pricing,
.vvk-pai-contact {
	margin: 0 0 2rem;
}

.vvk-pai-steps h3,
.vvk-pai-pricing h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 0.75rem;
}

.vvk-pai-steps ol {
	padding-left: 1.4rem;
	color: var(--vk-text-light);
	line-height: 1.8;
}

.vvk-pai-steps ol li {
	margin-bottom: 0.35rem;
}

.vvk-pai-deadline {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--vk-bg-light);
	border-radius: 8px;
	border-left: 4px solid var(--vk-primary);
}

.vvk-pai-deadline p {
	font-size: 0.95rem;
	color: var(--vk-text-light);
	line-height: 1.7;
	margin: 0;
}

.vvk-pai-pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
	margin-top: 0.75rem;
}

.vvk-pai-pricing-table th {
	background: var(--vk-primary);
	color: #fff;
	font-weight: 700;
	padding: 0.6rem 0.9rem;
	text-align: left;
	white-space: nowrap;
}

.vvk-pai-pricing-table td {
	padding: 0.55rem 0.9rem;
	border-bottom: 1px solid var(--vk-border);
	color: var(--vk-text-light);
}

.vvk-pai-pricing-table tr:last-child td {
	border-bottom: none;
}

.vvk-pai-pricing-table tr:nth-child(even) td {
	background: var(--vk-bg-light);
}

/* ---- Mobile (≤600px) — table doesn't fit 3 columns, so each row becomes
 * a card instead (matches .vvk-pai-card styling used elsewhere on this
 * page). Column 1 (training frequency) becomes the card heading; columns
 * 2–3 (prices) become labeled rows, with the header text re-supplied via
 * ::before since <thead> is hidden. ------------------------------------- */
@media (max-width: 600px) {
	.vvk-pai-pricing-table,
	.vvk-pai-pricing-table tbody {
		display: block;
	}

	.vvk-pai-pricing-table {
		border: none;
	}

	.vvk-pai-pricing-table thead {
		display: none;
	}

	.vvk-pai-pricing-table tr {
		display: block;
		background: var(--vk-bg-light);
		border: 1px solid var(--vk-border);
		border-radius: 10px;
		padding: 1.35rem 1.25rem;
	}

	.vvk-pai-pricing-table tr + tr {
		margin-top: 1rem;
	}

	.vvk-pai-pricing-table tr:nth-child(even) td {
		background: transparent;
	}

	.vvk-pai-pricing-table td {
		display: block;
		padding: 0;
		/* Astra's default table styling puts a border-right on each cell
		 * (a column divider, invisible when columns sit flush) — it has to
		 * be reset here too, or it shows through the gap between cards. */
		border: none;
		white-space: normal;
	}

	.vvk-pai-pricing-table td:nth-child(1) {
		font-size: 1.05rem;
		font-weight: 700;
		color: var(--vk-primary);
		margin-bottom: 0.75rem;
	}

	.vvk-pai-pricing-table td:nth-child(2),
	.vvk-pai-pricing-table td:nth-child(3) {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 0.75rem;
		padding: 0.35rem 0;
		font-weight: 700;
		color: var(--vk-text);
	}

	.vvk-pai-pricing-table td:nth-child(3) {
		border-top: 1px solid var(--vk-border);
	}

	.vvk-pai-pricing-table td:nth-child(2)::before,
	.vvk-pai-pricing-table td:nth-child(3)::before {
		font-weight: 400;
		font-size: 0.85rem;
		color: var(--vk-text-light);
	}

	.vvk-pai-pricing-table td:nth-child(2)::before {
		content: "Kuutasu PAI-toetusega";
	}

	.vvk-pai-pricing-table td:nth-child(3)::before {
		content: "Kuutasu ilma PAI-toetuseta";
	}
}

/* ---- Võistluste tulemused (competition results), grouped by season ---- */

/* The default page title sits outside .vvk-tulemused-wrap, so it needs its
 * own matching horizontal padding on mobile (same pattern as treenerid/ujulad). */
.vvk-page-voistlused .entry-title {
	padding: 0 1.25rem;
}

.vvk-tulemused-wrap {
	margin-top: 1rem;
	padding: 0 1.25rem;
}

.vvk-tulemused-kalender-card {
	max-width: 420px;
	margin: 0 0 2.5rem;
}

.vvk-tulemused-season {
	margin-bottom: 2.5rem;
}

.vvk-tulemused-season:last-child {
	margin-bottom: 0;
}

.vvk-tulemused-season-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--vk-primary);
	margin-bottom: 0.75rem;
}

.vvk-tulemused-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
}

.vvk-tulemused-table th {
	background: var(--vk-primary);
	color: #fff;
	font-weight: 700;
	padding: 0.6rem 0.9rem;
	text-align: left;
	white-space: nowrap;
}

.vvk-tulemused-table td {
	padding: 0.55rem 0.9rem;
	border-bottom: 1px solid var(--vk-border);
	color: var(--vk-text-light);
	vertical-align: top;
}

.vvk-tulemused-table tr:last-child td {
	border-bottom: none;
}

.vvk-tulemused-table tr:nth-child(even) td {
	background: var(--vk-bg-light);
}

.vvk-tulemused-table td:nth-child(2) {
	color: var(--vk-text);
	font-weight: 600;
}

.vvk-tulemused-files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vvk-tulemused-file {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--vk-border);
	color: var(--vk-primary);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vvk-tulemused-file::before {
	content: "⬇";
	font-size: 0.75rem;
}

.vvk-tulemused-file:hover {
	background: var(--vk-primary);
	border-color: var(--vk-primary);
	color: #fff;
}

.vvk-tulemused-none {
	color: var(--vk-text-light);
	opacity: 0.6;
}

/* ---- Mobile (≤600px) — same row-to-card collapse as .vvk-pai-pricing-table:
 * column 1 (date) becomes a small overline, column 2 (name) the card
 * heading, column 3 (files) a labeled wrapped badge row. ------------------ */
@media (max-width: 600px) {
	.vvk-tulemused-table,
	.vvk-tulemused-table tbody {
		display: block;
	}

	.vvk-tulemused-table {
		border: none;
	}

	.vvk-tulemused-table thead {
		display: none;
	}

	.vvk-tulemused-table tr {
		display: block;
		background: var(--vk-bg-light);
		border: 1px solid var(--vk-border);
		border-radius: 10px;
		padding: 1.25rem 1.25rem;
	}

	.vvk-tulemused-table tr + tr {
		margin-top: 1rem;
	}

	.vvk-tulemused-table tr:nth-child(even) td {
		background: transparent;
	}

	.vvk-tulemused-table td {
		display: block;
		padding: 0;
		border: none;
		white-space: normal;
	}

	.vvk-tulemused-table td:nth-child(1) {
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--vk-text-light);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-bottom: 0.35rem;
	}

	.vvk-tulemused-table td:nth-child(2) {
		font-size: 1.05rem;
		font-weight: 700;
		color: var(--vk-primary);
		margin-bottom: 0.75rem;
	}

	.vvk-tulemused-table td:nth-child(3)::before {
		content: "Tulemused";
		display: block;
		font-weight: 400;
		font-size: 0.85rem;
		color: var(--vk-text-light);
		margin-bottom: 0.35rem;
	}
}

.vvk-pai-contact {
	border-top: 1px solid var(--vk-border);
	padding-top: 1.5rem;
	font-size: 0.95rem;
	color: var(--vk-text-light);
}

.vvk-pai-contact a {
	color: var(--vk-primary);
	font-weight: 600;
}

/* =============================================================================
   Õppemaks – tasumise info
   ============================================================================= */
/* !important: same Astra blocks-layout override as .vvk-pai above. */
.vvk-oppemaks-wrap {
	max-width: 1160px !important;
	margin: 2.5rem auto !important;
	padding: 0 1.25rem 3rem;
	color: var(--vk-text);
}

.vvk-oppemaks-wrap h2 {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 0 0 1.25rem;
	line-height: 1.35;
}

.vvk-oppemaks-wrap h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--vk-text);
	margin: 2rem 0 0.75rem;
}

.vvk-oppemaks-wrap p {
	color: var(--vk-text-light);
	line-height: 1.7;
	margin: 0 0 1rem;
}

.vvk-oppemaks-wrap strong {
	color: var(--vk-text);
}

.vvk-oppemaks-wrap a {
	color: var(--vk-primary);
	font-weight: 600;
}

.vvk-oppemaks-wrap .vvk-pai-pricing {
	margin: 2rem 0;
}

.vvk-oppemaks-wrap .vvk-kontakt-card {
	max-width: 420px;
	margin: 1.5rem 0;
}

/* =============================================================================
   Täiskasvanutele — Adults Course Page (.vvk-taiskasvanutele-*)
   ============================================================================= */

/* Hide the default WP page title — the shortcode's own heading replaces it,
   same pattern as Klubi ajalugu / Ujumiskooli eeskiri. */
.vvk-page-taiskasvanutele .entry-title,
.vvk-page-taiskasvanutele .entry-header,
.vvk-page-taiskasvanutele .ast-page-title-wrap { display: none; }

.vvk-taiskasvanutele-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Matches Astra's own .entry-title typography/spacing (see e.g. /koduope)
   so this reads as the page's title despite living inside the content. */
.vvk-taiskasvanutele-title {
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	color: var(--ast-global-color-3, var(--vk-text));
	margin: 0 0 0.6em;
}

/* =============================================================================
   Eelkooliealised — Preschool Course Page (.vvk-eelkooliealised-*)
   ============================================================================= */

/* Hide the default WP page title — the shortcode's own heading replaces it,
   same pattern as Klubi ajalugu / Ujumiskooli eeskiri / Täiskasvanutele. */
.vvk-page-eelkooliealised .entry-title,
.vvk-page-eelkooliealised .entry-header,
.vvk-page-eelkooliealised .ast-page-title-wrap { display: none; }

.vvk-eelkooliealised-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Matches Astra's own .entry-title typography/spacing, same as
   .vvk-taiskasvanutele-title above. */
.vvk-eelkooliealised-title {
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	color: var(--ast-global-color-3, var(--vk-text));
	margin: 0 0 0.6em;
}