/* ==========================================================================
   Husí kůže – proměnné a základní vzhled
   ========================================================================== */

:root {
	--hk-barva-pozadi: #f4ede1;
	--hk-barva-text: #2b1d14;
	--hk-barva-tmava: #23160f;
	--hk-barva-akcent: #a8402f;
	--hk-barva-akcent-tmava: #7d2f22;
	--hk-barva-okraj: #c9b79c;
	--hk-barva-pole-pozadi: #ffffff;

	/* Sancreek - stejná westernová "wanted poster" nálada jako původní Rye,
	   ale ověřeno (rozbaleno a zkontrolovány skutečné glyfy ve fontu),
	   že má kompletní českou diakritiku vč. ě/ř/ů/ž/š/č/ď/ť/ň. */
	--hk-font-display: 'Sancreek', cursive;
	--hk-font-heading: 'Oswald', sans-serif;
	--hk-font-text: 'PT Serif', Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var( --hk-barva-pozadi );
	color: var( --hk-barva-text );
	font-family: var( --hk-font-text );
	font-size: 18px;
	line-height: 1.65;
	/* "Lepivá" patička - ať je vždy aspoň na spodku okna, ne že by na
	   krátkých stránkách vyskočila nahoru a na dlouhých dolů. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.hk-main { flex: 1 0 auto; }

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

a { color: var( --hk-barva-akcent ); }
a:hover { color: var( --hk-barva-akcent-tmava ); }

h1, h2, h3, h4 {
	font-family: var( --hk-font-heading );
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --hk-barva-tmava );
	line-height: 1.2;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
}
.hk-skip-link:focus {
	position: fixed;
	top: 8px; left: 8px;
	width: auto; height: auto;
	background: var( --hk-barva-akcent );
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}

.hk-container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Jen top/bottom - horizontalni padding necháváme čistě na .hk-container,
   plný "padding: 56px 0" shorthand by přepsal i jeho boční 24px (stejná
   specificita, pozdější pravidlo vyhraje na všech 4 stranách). */
.hk-section { padding-top: 56px; padding-bottom: 56px; }

/* ==========================================================================
   Hlavička
   ========================================================================== */

.hk-header {
	background: var( --hk-barva-tmava );
	border-bottom: 4px solid var( --hk-barva-akcent );
}

.hk-header-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.hk-logo-text {
	font-family: var( --hk-font-display );
	font-size: 1.8rem;
	color: #f4ede1;
	text-decoration: none;
	letter-spacing: 0.02em;
}
.hk-logo img { max-height: 70px; width: auto; }

.hk-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.hk-menu-toggle span {
	width: 26px; height: 3px;
	background: #f4ede1;
	display: block;
}

.hk-menu, .hk-footer-menu {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.hk-menu a, .hk-footer-menu a {
	color: #f4ede1;
	text-decoration: none;
	font-family: var( --hk-font-heading );
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}
.hk-menu a:hover, .hk-footer-menu a:hover {
	color: var( --hk-barva-akcent );
}

/* ==========================================================================
   Hero (úvodní sekce domovské stránky)
   ========================================================================== */

.hk-hero {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	background-color: var( --hk-barva-tmava );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.hk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 20, 12, 7, 0.05 ) 0%, rgba( 20, 12, 7, 0.15 ) 60%, rgba( 20, 12, 7, 0.85 ) 100% );
}
.hk-hero-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 16px 24px 20px;
	text-align: center;
}
.hk-hero-obsah {
	max-width: 720px;
	margin: 0 auto;
}
.hk-hero-nadpis {
	font-family: var( --hk-font-display );
	font-size: clamp( 2.2rem, 5vw, 3.6rem );
	color: #ffffff;
	margin: 0;
	text-transform: none;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.6 );
}
.hk-hero-podtitulek {
	color: #ffffff;
	font-size: 1.1rem;
	margin-top: 6px;
	font-style: italic;
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.6 );
}
.hk-hero-tlacitka {
	margin-top: 14px;
}

/* ==========================================================================
   Karty na domovské stránce (odkazy na podstránky) - vzor nehupo.cz
   ========================================================================== */

.hk-domu-karty {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 24px;
	margin-top: 40px;
}
.hk-karta {
	background: var( --hk-barva-pole-pozadi, #fff );
	border: 1px solid var( --hk-barva-okraj, #c9b79c );
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
	padding: 24px;
}
.hk-karta h3 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}
.hk-karta p {
	margin: 0 0 14px;
}
.hk-karta a {
	font-family: var( --hk-font-heading );
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	font-weight: 600;
}

/* ==========================================================================
   Obsah stránek / článků
   ========================================================================== */

.hk-nadpis { font-size: 2.2rem; margin-bottom: 24px; }

.hk-clanek-obrazek { margin-bottom: 24px; border-radius: 4px; overflow: hidden; }

.hk-clanek-obrazek-velky {
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.2 );
	margin: 1.5em 0 0.5em;
}

.hk-obsah :is( h2, h3 ) { margin-top: 2em; }
.hk-obsah p { margin: 0 0 1.2em; }

.hk-uvodni-veta {
	font-family: var( --hk-font-display );
	font-size: 1.5rem;
	color: var( --hk-barva-akcent );
	margin-bottom: 1em !important;
}
.hk-foto-caption-pripravovana {
	font-size: 0.95em;
	opacity: 0.75;
	border-top: 1px solid var( --hk-barva-okraj, #c9b79c );
	padding-top: 20px;
	margin-top: 8px !important;
}

.hk-clenove {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 28px;
	margin: 1.5em 0;
}
.hk-clen { text-align: center; }
.hk-clen-foto-placeholder,
.hk-clen img {
	width: 160px;
	height: 160px;
	margin: 0 auto 14px;
	border-radius: 50%;
	-o-object-fit: cover;
	object-fit: cover;
	background: var( --hk-barva-tmava, #23160f );
}
.hk-clen h3 {
	margin: 0 0 2px;
	font-size: 1.2rem;
}
.hk-clen-nastroj {
	color: var( --hk-barva-akcent );
	font-family: var( --hk-font-heading );
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	margin: 0 0 8px !important;
}
.hk-clen-veta {
	font-style: italic;
	font-size: 0.95em;
	margin: 0 !important;
}

.hk-obsah .wp-block-button__link,
.hk-btn {
	display: inline-block;
	padding: 12px 28px;
	background: var( --hk-barva-akcent );
	color: #fff !important;
	border-radius: 3px;
	font-family: var( --hk-font-heading );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	font-size: 0.95rem;
}
.hk-obsah .wp-block-button__link:hover,
.hk-btn:hover { background: var( --hk-barva-akcent-tmava ); }

.hk-obsah .wp-block-gallery img,
.hk-obsah .wp-block-image img { border-radius: 4px; }

/* Styl podle vzoru nehupo.cz: název písně normálním textem, interpret
   kurzívou, menší, jinou barvou o řádek níž. */
.hk-repertoar-seznam {
	column-count: 2;
	column-gap: 48px;
	list-style: decimal;
	padding-left: 1.4em;
	margin: 1.5em 0 0;
}
.hk-repertoar-seznam li {
	break-inside: avoid;
	padding: 5px 0;
	border-bottom: 1px dotted var( --hk-barva-okraj, #c9b79c );
	font-family: var( --hk-font-heading );
	font-size: 1rem;
}
.hk-repertoar-autor {
	display: inline-block;
	margin-top: 2px;
	font-family: var( --hk-font-text );
	font-style: italic;
	font-size: 0.85rem;
	color: var( --hk-barva-akcent-tmava );
}
@media ( max-width: 560px ) {
	.hk-repertoar-seznam { column-count: 1; }
}

/* Klasický [gallery] shortcode - theme deklaruje html5 gallery support,
   takže WP negeneruje žádné vlastní inline styly, mřížku řešíme tady.
   Skutečná mozaika (masonry) přes CSS grid: řádky jsou jemné (8px) a
   JS (main.js) každé fotce nastaví, kolik řádků má "span" podle svého
   skutečného vykresleného poměru stran - výškové fotky tak nenechávají
   díru vedle sebe a poslední fotka se nenafukuje přes celou šířku.
   grid-auto-flow: dense navíc doplňuje mezery pozdějšími fotkami, ale
   pořadí zůstává v zásadě po řádcích (ne odshora dolů po sloupcích). */
.hk-obsah .gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	grid-auto-rows: 8px;
	grid-auto-flow: row dense;
	gap: 16px;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}
.hk-obsah .gallery-item {
	margin: 0;
	overflow: hidden;
}
.hk-obsah .gallery-icon a {
	display: block;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
}
.hk-obsah .gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ==========================================================================
   Patička
   ========================================================================== */

.hk-footer {
	background: var( --hk-barva-tmava );
	color: #cbb99f;
	margin-top: 60px;
	border-top: 4px solid var( --hk-barva-akcent );
}
.hk-footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 24px;
	text-align: center;
}
.hk-footer-logo {
	font-family: var( --hk-font-display );
	font-size: 1.5rem;
	color: #f4ede1;
}
.hk-footer-tagline { font-style: italic; margin: 6px 0 20px; }
.hk-footer-nav { margin-bottom: 20px; }
.hk-footer-nav .hk-footer-menu { justify-content: center; }
.hk-footer-copy { font-size: 0.8rem; opacity: 0.7; margin: 0; }

/* ==========================================================================
   Responzivita
   ========================================================================== */

@media ( max-width: 720px ) {
	.hk-menu-toggle { display: flex; }
	.hk-nav {
		display: none;
		width: 100%;
		order: 3;
	}
	.hk-nav.hk-nav--otevrene { display: block; }
	.hk-menu {
		flex-direction: column;
		gap: 0;
		padding: 16px 0;
	}
	.hk-menu a {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid rgba( 244, 237, 225, 0.1 );
	}
	.hk-hero-overlay { padding: 70px 20px; }
}

/* ==========================================================================
   Lightbox fotogalerie
   ========================================================================== */

body.hk-lightbox-aktivni { overflow: hidden; }

.hk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba( 10, 6, 4, 0.94 );
}
.hk-lightbox.hk-lightbox--otevreny {
	display: flex;
}
.hk-lightbox-obrazek {
	max-width: 88vw;
	max-height: 82vh;
	-o-object-fit: contain;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.6 );
}
.hk-lightbox-zavrit,
.hk-lightbox-predchozi,
.hk-lightbox-dalsi {
	position: absolute;
	background: rgba( 244, 237, 225, 0.12 );
	color: #f4ede1;
	border: none;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease;
}
.hk-lightbox-zavrit:hover,
.hk-lightbox-predchozi:hover,
.hk-lightbox-dalsi:hover {
	background: var( --hk-barva-akcent, #a8402f );
}
.hk-lightbox-zavrit {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.8rem;
}
.hk-lightbox-predchozi,
.hk-lightbox-dalsi {
	top: 50%;
	transform: translateY( -50% );
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 1.6rem;
}
.hk-lightbox-predchozi { left: 16px; }
.hk-lightbox-dalsi { right: 16px; }
.hk-lightbox-info {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: center;
}
.hk-lightbox-pocitadlo {
	color: #f4ede1;
	font-family: var( --hk-font-heading );
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	background: rgba( 0, 0, 0, 0.4 );
	padding: 5px 14px;
	border-radius: 20px;
}
@media ( max-width: 600px ) {
	.hk-lightbox-predchozi,
	.hk-lightbox-dalsi {
		width: 42px;
		height: 42px;
		font-size: 1.3rem;
	}
	.hk-lightbox-obrazek { max-width: 92vw; max-height: 76vh; }
}