/*
Theme Name:   Klubska tema
Theme URI:    https://digitalnimarketing.si
Description:  Lahka tema za spletni urnik kluba (vtičnik Klubski urnik). Temna glava, velik uvodni del z imenom kluba, urnik kot naslovna stran ter strani za starše in trenerje. Barve in logotip nastavite v Videz → Urejevalnik.
Author:       Miklavčič marketing d.o.o.
Author URI:   https://digitalnimarketing.si
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  klubska-tema
*/

:root {
	--klub-temna: var(--wp--preset--color--contrast, #141416);
	--klub-temna-2: #1f2023;
	--klub-poudarek: var(--wp--preset--color--accent-1, #7a1f2b);
	--klub-poudarek-2: var(--wp--preset--color--accent-2, #a3283a);
	--klub-papir: var(--wp--preset--color--base, #f4f2ef);
	--klub-bela: #ffffff;
	--klub-siva: var(--wp--preset--color--accent-4, #6b6466);
	--klub-crta: var(--wp--preset--color--accent-6, #e3ddd8);
	--klub-sirina: 1240px;
	--klub-rob: clamp(16px, 4vw, 40px);
	--klub-rob-x: max(var(--klub-rob), calc((100% - var(--klub-sirina)) / 2));
	--klub-naslovi: var(--wp--preset--font-family--barlow, "Barlow Condensed", "Arial Narrow", sans-serif);
	--klub-pisava: var(--wp--preset--font-family--source-sans, "Source Sans 3", system-ui, sans-serif);
	/* Svetle črte igrišča v ozadju uvodnega dela. */
	--klub-igrisce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='white' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='40' y='40' width='1120' height='520'/%3E%3Cline x1='600' y1='40' x2='600' y2='560'/%3E%3Ccircle cx='600' cy='300' r='90'/%3E%3Ccircle cx='600' cy='300' r='3' fill='white' fill-opacity='.08'/%3E%3Crect x='40' y='170' width='170' height='260'/%3E%3Crect x='40' y='235' width='60' height='130'/%3E%3Crect x='990' y='170' width='170' height='260'/%3E%3Crect x='1100' y='235' width='60' height='130'/%3E%3Cpath d='M210 250a60 60 0 0 1 0 100M990 250a60 60 0 0 0 0 100'/%3E%3C/svg%3E");
}

body {
	background: var(--klub-papir);
	color: var(--klub-temna);
	font-family: var(--klub-pisava);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Glava ---------- */
.klub-glava {
	background: var(--klub-temna);
	color: var(--klub-bela);
	padding: 14px var(--klub-rob-x) !important;
	position: relative;
	z-index: 20;
}
.klub-glava::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--klub-poudarek); }
.klub-glava-vrstica { gap: 20px; }
.klub-znak { gap: 12px; align-items: center; }
.klub-znak .wp-block-site-logo img { display: block; }
.klub-ime, .klub-ime a {
	font-family: var(--klub-naslovi) !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--klub-bela) !important;
	text-decoration: none !important;
	margin: 0 !important;
	line-height: 1.1;
}
.klub-meni { font-family: var(--klub-naslovi); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.klub-glava .klub-meni a { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.klub-glava .klub-meni a:hover,
.klub-glava .klub-meni .current-menu-item > a,
.klub-glava .klub-meni a[aria-current="page"] { color: var(--klub-bela); border-bottom-color: var(--klub-poudarek-2); }
.klub-glava .wp-block-navigation__responsive-container-open,
.klub-glava .wp-block-navigation__responsive-container-close { color: var(--klub-bela); }
.klub-glava .wp-block-navigation__responsive-container.is-menu-open { background: var(--klub-temna); color: var(--klub-bela); padding: 24px var(--klub-rob); }
.klub-glava .wp-block-navigation__responsive-container.is-menu-open a { font-size: 26px; }

/* ---------- Uvodni del (naslovna stran) ---------- */
.klub-main { margin: 0 !important; }
.klub-hero {
	--klub-slika: none;
	background-color: var(--klub-temna);
	background-image:
		linear-gradient(100deg, rgba(20, 20, 22, .96) 0%, rgba(20, 20, 22, .82) 45%, rgba(20, 20, 22, .55) 100%),
		var(--klub-slika),
		var(--klub-igrisce),
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--klub-poudarek) 55%, transparent) 0%, transparent 60%);
	background-size: cover, cover, min(1100px, 120%) auto, cover;
	background-position: center, center, right -80px center, center;
	background-repeat: no-repeat;
	color: var(--klub-bela);
	padding: clamp(48px, 8vw, 96px) var(--klub-rob-x) clamp(120px, 14vw, 170px) !important;
	margin: 0 !important;
	position: relative;
	overflow: hidden;
}
.klub-hero::before {
	/* Diagonalni klubski trak */
	content: ""; position: absolute; right: -8%; top: -30%; width: 38%; height: 170%;
	background: linear-gradient(180deg, var(--klub-poudarek), color-mix(in srgb, var(--klub-poudarek) 60%, #000));
	transform: skewX(-18deg); opacity: .9; z-index: 0; pointer-events: none;
}
.klub-hero::after {
	content: ""; position: absolute; right: calc(-8% + 40.5%); top: -30%; width: 14px; height: 170%;
	background: var(--klub-bela); opacity: .9; transform: skewX(-18deg); z-index: 0; pointer-events: none;
}
.klub-hero > * { position: relative; z-index: 1; margin-left: 0 !important; margin-right: 0 !important; }
.klub-nadnaslov {
	font-family: var(--klub-naslovi); font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(255, 255, 255, .75); margin-bottom: 10px !important;
	display: flex; align-items: center; gap: 12px;
}
.klub-nadnaslov::before { content: ""; width: 34px; height: 3px; background: var(--klub-poudarek-2); display: inline-block; }
.klub-hero-naslov, .klub-hero-naslov a {
	font-family: var(--klub-naslovi) !important;
	font-weight: 700 !important;
	font-size: clamp(46px, 8.5vw, 104px) !important;
	line-height: .92 !important;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--klub-bela) !important;
	text-decoration: none !important;
	margin: 0 !important;
	max-width: 12ch;
	text-wrap: balance;
}
.klub-hero-podnaslov {
	font-family: var(--klub-naslovi) !important; font-weight: 500 !important;
	font-size: clamp(24px, 3.2vw, 38px) !important; line-height: 1.1 !important;
	color: rgba(255, 255, 255, .9) !important; text-transform: uppercase; letter-spacing: .02em;
	margin: 14px 0 0 !important;
}
.klub-hero-opis { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 56ch; margin-top: 18px !important; }
.klub-hero .wp-block-buttons { margin-top: 28px !important; gap: 12px; }

/* Gumbi */
.wp-block-button__link, .wp-element-button {
	font-family: var(--klub-naslovi) !important; font-weight: 600 !important; font-size: 17px !important;
	letter-spacing: .08em; text-transform: uppercase; border-radius: 8px !important;
	padding: 13px 24px !important; line-height: 1.1 !important;
	background: var(--klub-poudarek) !important; color: var(--klub-bela) !important; border: 2px solid var(--klub-poudarek) !important;
	transition: background .15s, border-color .15s, color .15s;
}
.wp-block-button__link:hover, .wp-element-button:hover { background: var(--klub-poudarek-2) !important; border-color: var(--klub-poudarek-2) !important; }
.is-style-outline .wp-block-button__link { background: transparent !important; border-color: rgba(255, 255, 255, .55) !important; color: var(--klub-bela) !important; }
.is-style-outline .wp-block-button__link:hover { border-color: var(--klub-bela) !important; background: rgba(255, 255, 255, .08) !important; }

/* ---------- Urnik v kartici ---------- */
.klub-urnik-kartica {
	margin: calc(-1 * clamp(84px, 10vw, 120px)) 0 0 !important;
	padding: 0 var(--klub-rob-x) !important;
	position: relative; z-index: 5;
}
.klub-urnik-kartica .wp-block-post-content > *, .klub-vsebina-siroka .wp-block-post-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.klub-urnik-kartica .ku-urnik,
.klub-vsebina-siroka .ku-urnik {
	background: var(--klub-bela);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20, 20, 22, .06), 0 24px 60px -24px rgba(20, 20, 22, .35);
	padding: clamp(16px, 2.4vw, 28px);
	margin: 0;
}
/* Naslov kluba je že v uvodnem delu – v kartici ga ne ponavljamo. */
.klub-urnik-kartica .ku-urnik[data-nacin="javni"] .ku-glava h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klub-urnik-kartica .ku-urnik[data-nacin="javni"] .ku-glava { justify-content: flex-start; }
.klub-urnik-kartica .ku-urnik[data-nacin="javni"] .ku-glava::before {
	content: "Ta teden na igriščih"; font-family: var(--klub-naslovi); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .02em;
	margin-right: auto; align-self: center;
}

/* Barve urnika sledijo barvam teme (Videz → Urejevalnik → Slogi). */
.ku-urnik, .ku-dialog, .ku-toast {
	--ku-poudarek: var(--klub-poudarek);
	--ku-ozadje: #ffffff;
	--ku-ploskev: #ffffff;
	--ku-ploskev-2: #f4f1ee;
	--ku-crta: #e6e0db;
	--ku-crta-mocna: #cbc3bd;
	--ku-besedilo: #16171a;
	--ku-sivo: #6b6466;
	--ku-danes: color-mix(in srgb, var(--klub-poudarek) 9%, #ffffff);
	--ku-naslovi: var(--klub-naslovi);
	--ku-pisava: var(--klub-pisava);
}

/* ---------- Prednosti (naslovna stran) ---------- */
.klub-prednosti { padding: clamp(48px, 7vw, 88px) var(--klub-rob-x) !important; margin: 0 !important; }
.klub-prednosti .wp-block-columns { gap: clamp(20px, 3vw, 40px); }
.klub-prednost { border-top: 3px solid var(--klub-poudarek); padding-top: 16px; }
.klub-prednost h3 { font-family: var(--klub-naslovi) !important; font-weight: 700 !important; font-size: 26px !important; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px !important; line-height: 1.05; }
.klub-prednost p { color: var(--klub-siva); margin: 0; line-height: 1.55; }

/* ---------- Podstrani ---------- */
.klub-pas {
	background: var(--klub-temna);
	background-image: var(--klub-igrisce), radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--klub-poudarek) 45%, transparent) 0%, transparent 55%);
	background-size: min(900px, 120%) auto, cover;
	background-position: right -60px center, center;
	background-repeat: no-repeat;
	color: var(--klub-bela);
	padding: clamp(40px, 6vw, 72px) var(--klub-rob-x) clamp(40px, 6vw, 64px) !important;
	margin: 0 !important;
}
.klub-pas .wp-block-post-title {
	font-family: var(--klub-naslovi) !important; font-weight: 700 !important; text-transform: uppercase;
	font-size: clamp(38px, 6vw, 72px) !important; line-height: .95 !important; color: var(--klub-bela) !important; margin: 0 !important;
}
.klub-pas.klub-pas-z-urnikom { padding-bottom: clamp(90px, 10vw, 120px) !important; }
.klub-vsebina { padding: clamp(32px, 5vw, 64px) var(--klub-rob) clamp(48px, 7vw, 88px) !important; margin: 0 !important; }
.klub-vsebina-siroka { padding: 0 var(--klub-rob-x) clamp(48px, 7vw, 88px) !important; margin: calc(-1 * clamp(64px, 7vw, 84px)) 0 0 !important; position: relative; z-index: 5; }
.klub-vsebina h2 { font-family: var(--klub-naslovi) !important; font-weight: 700 !important; text-transform: uppercase; font-size: clamp(26px, 3vw, 34px) !important; letter-spacing: .01em; margin-top: 1.6em !important; }
.klub-vsebina h2:first-child { margin-top: 0 !important; }
.klub-vsebina p, .klub-vsebina li { font-size: 18px; line-height: 1.65; }
.klub-vsebina a { color: var(--klub-poudarek); }
.klub-vsebina .klub-okvir { background: var(--klub-bela); border-left: 4px solid var(--klub-poudarek); border-radius: 10px; padding: 18px 22px !important; }

/* Prijava za trenerje */
.ku-prijava { background: var(--klub-bela); border-radius: 18px; padding: 28px !important; max-width: 440px !important; box-shadow: 0 24px 60px -24px rgba(20, 20, 22, .35); }
.ku-prijava h3 { font-family: var(--klub-naslovi); font-weight: 700; text-transform: uppercase; font-size: 28px; margin: 0 0 14px; }
.ku-prijava form p { margin: 0 0 12px; }
.ku-prijava label { display: block; font-size: 14px; color: var(--klub-siva); margin-bottom: 4px; }
.ku-prijava input[type="text"], .ku-prijava input[type="password"] { width: 100%; font: inherit; font-size: 16px; border: 1px solid #cbc3bd; border-radius: 8px; padding: 10px 12px; background: #fff; }
.ku-prijava .login-remember label { display: flex; align-items: center; gap: 8px; color: var(--klub-temna); }
.ku-prijava input[type="submit"] {
	font-family: var(--klub-naslovi); font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
	background: var(--klub-poudarek); color: #fff; border: 0; border-radius: 8px; padding: 12px 24px; cursor: pointer; width: 100%;
}
.ku-prijava input[type="submit"]:hover { background: var(--klub-poudarek-2); }
.ku-odjava { max-width: var(--klub-sirina); margin: 12px auto 0 !important; }
.ku-odjava a { color: var(--klub-siva); }

/* ---------- Noga ---------- */
.klub-noga {
	background: var(--klub-temna);
	color: rgba(255, 255, 255, .72);
	padding: clamp(36px, 5vw, 56px) var(--klub-rob-x) 28px !important;
	margin: 0 !important;
	border-top: 3px solid var(--klub-poudarek);
}
.klub-noga-vrstica { gap: 24px 48px; align-items: flex-start !important; }
.klub-noga .klub-ime, .klub-noga .klub-ime a { font-size: 28px !important; }
.klub-noga p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.klub-noga a { color: rgba(255, 255, 255, .88); }
.klub-noga .klub-meni a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.klub-noga .klub-meni a:hover { color: #fff; }
.klub-noga-spodaj { margin-top: 28px !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px !important; color: rgba(255, 255, 255, .55); }
.klub-noga-spodaj a { color: rgba(255, 255, 255, .75); }

/* Telefon */
@media (max-width: 781px) {
	.klub-hero::before { width: 60%; right: -38%; opacity: .75; }
	.klub-hero::after { display: none; }
	.klub-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.klub-hero .wp-block-button { width: 100%; }
	.klub-hero .wp-block-button__link { width: 100%; text-align: center; }
	.klub-urnik-kartica .ku-urnik[data-nacin="javni"] .ku-glava::before { font-size: 22px; flex: 1 1 100%; }
	.klub-urnik-kartica .ku-urnik, .klub-vsebina-siroka .ku-urnik { padding: 16px 12px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}