/*
 * Accessibility fixes, 24 Sep 2026: findings of Zavod A11Y.si (April 2025) that were still open,
 * plus the site-wide audit of 24 Sep. See changes/2026-09-24-a11y-fixes.md.
 * Loaded after the theme but before the Customizer's inline CSS, hence the !important where the
 * Customizer (post 222) sets the same property.
 */

/* 1. Tiles (home page, Ptujski grad, Ptujski muzej virtualno …): the dark caption band grows with
 *    its text. It used to be fixed-height with the text absolutely positioned inside it, so text
 *    enlarged by zoom or by a reader's text-spacing settings climbed out of the band onto the photo
 *    and was clipped at the top of the tile. WCAG 1.4.10, 1.4.12, 1.4.3. */
/*    The band keeps GenerateBlocks' own height (5.25em, 4.375em below 768 px) as its minimum, so at
 *    normal settings nothing looks different. The text stays anchored 0.5em above the bottom, as
 *    before, but in the flow, so the band grows upwards when the text needs more room. */
.panel-slide-up-inner {
	top: auto !important;
	height: auto !important;
	min-height: 5.25em;
}
@media (max-width: 767px) {
	.panel-slide-up-inner { min-height: 4.375em; }
}
/*    On hover and keyboard focus the band slides up over the whole tile, as it always did. Height
 *    auto cannot be animated, so a jump from auto to 100% was instant: live 24 Sep, reported by
 *    Klemen Smrtnik. The slide therefore runs on min-height, from the band's resting minimum to the
 *    full tile, under the Customizer's `transition: all .5s`. The `html` raises specificity above
 *    the Customizer's own `height: 100% !important` hover rule, which comes later. */
html .panel-slide-up:hover .panel-slide-up-inner,
html .panel-slide-up:focus-visible .panel-slide-up-inner {
	height: auto !important;
	min-height: 100%;
}
/*    Where the browser can animate from auto (interpolate-size), the height slides too. The
 *    min-height slide alone starts late when the text is taller than the band's minimum: up to about
 *    0.1 s on phones, while the rising minimum catches up with the text. */
@supports (interpolate-size: allow-keywords) {
	.panel-slide-up-inner { interpolate-size: allow-keywords; }
	html .panel-slide-up:hover .panel-slide-up-inner,
	html .panel-slide-up:focus-visible .panel-slide-up-inner { height: 100% !important; }
}
.panel-slide-up-text {
	position: relative !important;
	bottom: auto !important;
	align-self: flex-end;
	margin: 0.5em 0 !important;
}

/* 2. Page titles: a long word may break instead of being cut off at the right edge (it did on six
 *    English pages at 400 % zoom), and the title shrinks on narrow screens. Each word stays on its
 *    own line as before. WCAG 1.4.10, 1.4.4. */
h1.page-title .word {
	white-space: normal !important;
	overflow-wrap: anywhere;
	hyphens: auto;
}
@media (max-width: 600px) {
	h1.page-title {
		font-size: clamp(1.6rem, 9vw, 2.625rem) !important;
		line-height: 1.15 !important;
	}
}

/* 3. German is the multimedia and audio guide only. Its pages offer no route into the rest of
 *    the site, which exists only in Slovenian and English: no locations menu, no search, no main
 *    menu. That also removes the "Locations" button, whose contrast failed (3.46 : 1). The logo,
 *    the colour-scheme switch and the language switch stay. */
html[lang^="de"] .locations-menu-button,
html[lang^="de"] #search-icon,
html[lang^="de"] #menu-toggle,
html[lang^="de"] .secondary-menu-container {
	display: none !important;
}
/* the divider drawn between the (now hidden) search and the colour-scheme switch */
html[lang^="de"] .dark-theme-container {
	border-left: 0 !important;
}

/* 4. The "page not found" page shows its heading. The Customizer hides every theme .entry-title,
 *    since the page hero shows the title; the 404 page has no hero, so it had no visible heading
 *    and no H1 at all for screen readers. WCAG 1.3.1, 2.4.6. */
.error404 .entry-title {
	display: block !important;
	/* in line with the text below it (the Customizer indents .entry-content children 120px / 40px),
	   and clear of the locations bar, which overlays the top of the page on wide screens */
	margin: 40px 120px 0;
}
@media (max-width: 767px) {
	.error404 .entry-title { margin: 0 40px; font-size: clamp(1.6rem, 8vw, 2.625rem); }
}

/* 5. The locations bar under the header grows with its rows. At 45 px it held one row only; the
 *    English menu wraps into two between 1100 and 1366 px (the Slovenian one around 1100 px), and
 *    the second row, white text, fell below the dark bar onto the photo. The Customizer's 4.5vw gap
 *    also applied between rows. WCAG 1.4.3, 1.4.10, 1.4.12. One row looks as before. */
.secondary-menu-container {
	height: auto !important;
	min-height: 45px;
	padding: 6px 0;
}
.secondary-menu-container .secondary-menu {
	row-gap: 0.35em;
}

/* 6. English and German page heads (collections, exhibitions, notices …) have the white title on
 *    the photo, down to 1.59 : 1 (A11Y.si 1.4.3). They now use the Slovenian head, changed after
 *    the audit: the title in dark text on the page background under the photo (migration 010).
 *    These rules repeat that head's block styles, so the title cannot show white on white while
 *    GenerateBlocks rewrites a page's CSS file, which it does at most one file per 5 seconds. */
.gb-element-b905493e {
	margin-left: auto;
	margin-right: auto;
	max-width: 1920px;
	padding-left: 120px;
	padding-right: 120px;
	border-right: 1px solid var(--contrast);
	border-left: 1px solid var(--contrast);
}
@media (max-width: 767px) {
	.gb-element-b905493e { padding-left: 30px; padding-right: 30px; }
}
.gb-element-b905493e .gb-text-edb9cee2 {
	color: var(--contrast);
	padding-top: 40px;
}
