/*
Theme Name: Sejkan School
Theme URI: https://github.com/SejkanDesign/SejkanSchool
Author: Sejkan Design
Author URI: https://sejkan.com
Description: Block tema za osnovne i srednje škole. Puni Site Editor, bez page buildera. Dizajn se mijenja kroz style variations, sadržajni moduli kroz dodatak Sejkan School Core. Ništa vezano za pojedinu školu nije zakucano u kod.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sejkan-school
Tags: education, block-theme, full-site-editing, accessibility-ready, translation-ready, block-patterns, style-variations
*/

/*
 * Sav dizajn živi u theme.json i u styles/*.json.
 * Ovdje je samo ono što theme.json ne može izraziti: ponašanje pri interakciji,
 * ciljanje potomaka i raspored zaglavlja na uskim ekranima.
 */

/* ===========================================================================
 * 1. Uslužna traka
 * ======================================================================== */

.sejkan-usluzna {
	line-height: 1.35;
}

.sejkan-usluzna p,
.sejkan-usluzna .sejkan-podaci,
.sejkan-usluzna .wp-block-navigation {
	margin-block: 0;
}

.sejkan-usluzna > .wp-block-group {
	padding-block: 0.35rem;
}

/*
 * Dodatak podacima o školi daje vezama min-height: 44px kao dodirnu metu.
 * Ispravno na kontakt stranici, ali u uskoj traci diže cijeli red na 57px.
 * Ovdje se cilj dodira postiže razmakom umjesto visinom.
 */
.sejkan-usluzna .wp-block-sejkan-school-core-podaci-skole a {
	min-height: 0;
	padding-block: 0.25rem;
}

.sejkan-usluzna .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

/* ===========================================================================
 * 2. Glavna navigacija
 *
 * Podvlaka se ne pojavljuje naglo nego izrasta iz sredine. Trenutna stranica
 * je označena trajno, da posjetilac zna gdje je — a ne samo pri prelasku mišem.
 * ======================================================================== */

.sejkan-zaglavlje .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	text-decoration: none;
}

.sejkan-zaglavlje .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.1rem;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	scale: 0 1;
	transition: scale 0.22s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.sejkan-zaglavlje .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.sejkan-zaglavlje .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.sejkan-zaglavlje .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.sejkan-zaglavlje .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
	scale: 1 1;
}

/* Strelica podmenija: tanja i bliže tekstu. */
.sejkan-zaglavlje .wp-block-navigation__submenu-icon {
	padding-inline: 0.15rem;
}

.sejkan-zaglavlje .wp-block-navigation__submenu-icon svg {
	width: 0.7em;
	height: 0.7em;
}

/* Podmeni kao ploča koja se spusti, umjesto tvrdog okvira. */
.sejkan-zaglavlje .wp-block-navigation__submenu-container {
	padding-block: 0.35rem;
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 3px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--istaknuto);
	min-width: 15rem;
}

.sejkan-zaglavlje .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	font-weight: 500;
	text-decoration: none;
}

.sejkan-zaglavlje .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.sejkan-zaglavlje .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary-dark);
}

@media ( prefers-reduced-motion: reduce ) {

	.sejkan-zaglavlje .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ===========================================================================
 * 3. Pretraga
 *
 * Podrazumijevano se polje širi unutar flex reda i gura navigaciju i logotip,
 * pa zaglavlje "skoči". Polje zato izlazi iz toka i izlijeće lijevo od dugmeta.
 * Sklopljeno je prozirno i pomjereno udesno, pa prijelaz izgleda kao klizanje.
 * ======================================================================== */

.sejkan-zaglavlje .wp-block-search__button-only .wp-block-search__inside-wrapper {
	position: relative;
	min-width: 0;
}

.sejkan-zaglavlje .wp-block-search__button-only .wp-block-search__input {
	position: absolute;
	right: calc( 100% + 0.4rem );
	top: 50%;
	z-index: 4;
	width: 17rem;
	max-width: calc( 100vw - 8rem );
	height: 2.75rem;
	padding: 0.5rem 2.6rem 0.5rem 0.8rem;
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 3px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--istaknuto);
	font-size: var(--wp--preset--font-size--small);
	opacity: 1;
	translate: 0 -50%;
	transition: opacity 0.2s ease, translate 0.24s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

/* Sklopljeno: nevidljivo, van dohvata miša i čitača ekrana. */
.sejkan-zaglavlje .wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
	opacity: 0;
	translate: 1.25rem -50%;
	pointer-events: none;
}

/*
 * Preglednikov fokusni okvir se nacrta kao kutija oko cijelog polja — na
 * uskim ekranima oko cijele trake zaglavlja. Zamjena je u jeziku teme:
 * rub polja poplavi, a na traci bez ruba fokus nosi plava linija na dnu
 * (ista boja kao podvlaka u meniju).
 */
.sejkan-zaglavlje .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

/* Ugrađeno preglednikovo × u search polju; blok ima svoje dugme. */
.sejkan-zaglavlje .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Dugme: samo ikona, bez teške podloge; puna dodirna meta od 44px. */
.sejkan-zaglavlje .wp-block-search__button.has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	min-width: 0;
	border-radius: 3px;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.sejkan-zaglavlje .wp-block-search__button.has-icon:hover,
.sejkan-zaglavlje .wp-block-search__button.has-icon:focus-visible {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary-dark);
}

.sejkan-zaglavlje .wp-block-search__button.has-icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/*
 * Dugme × za zatvaranje; u blok ga ubacuje functions.php. Osnovni izgled je
 * globalan da pretraga „samo dugme" van zaglavlja ne ostane sa golim dugmetom;
 * smještanje u desni rub polja vrijedi samo u zaglavlju.
 */
.wp-block-search .sejkan-pretraga__zatvori {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
	transition: opacity 0.2s ease, visibility 0.2s;
}

.wp-block-search .sejkan-pretraga__zatvori svg {
	fill: currentColor;
}

.wp-block-search .sejkan-pretraga__zatvori:hover,
.wp-block-search .sejkan-pretraga__zatvori:focus-visible {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary-dark);
}

/* Sklopljeno: nestaje zajedno sa poljem. */
.wp-block-search .wp-block-search__searchfield-hidden .sejkan-pretraga__zatvori,
.wp-block-search.wp-block-search__searchfield-hidden .sejkan-pretraga__zatvori {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sejkan-zaglavlje .wp-block-search__button-only .sejkan-pretraga__zatvori {
	position: absolute;
	z-index: 5;
	top: 50%;
	right: calc( 100% + 0.65rem );
	translate: 0 -50%;
}

@media ( prefers-reduced-motion: reduce ) {

	.sejkan-zaglavlje .wp-block-search__input,
	.wp-block-search .sejkan-pretraga__zatvori {
		transition: none;
	}
}

/* ===========================================================================
 * 4. Zaglavlje na uskim ekranima
 *
 * Raspored u tri stupca: hamburger lijevo, logotip u sredini, pretraga desno.
 * Navigacija i pretraga su u DOM-u zajedno, unutar desne grupe. Grupa se
 * pretvara u display: contents da njena djeca postanu izravna djeca mreže,
 * pa se mogu rasporediti neovisno o redoslijedu u dokumentu.
 * ======================================================================== */

@media ( max-width: 1023px ) {

	.sejkan-zaglavlje > .wp-block-group.alignwide {
		display: grid;
		grid-template-columns: 2.75rem 1fr 2.75rem;
		align-items: center;
		gap: 0.5rem;
	}

	.sejkan-zaglavlje .sejkan-zaglavlje__desno {
		display: contents;
	}

	/*
	 * Red se mora navesti izričito. Sa zadanom kolonom a automatskim redom,
	 * raspoređivanje gura elemente u sljedeći red i zaglavlje naraste
	 * dvostruko — logotip u prvom, hamburger i pretraga u drugom.
	 */

	/* Hamburger lijevo. */
	.sejkan-zaglavlje .sejkan-zaglavlje__desno > .wp-block-navigation {
		grid-area: 1 / 1;
		justify-self: start;
	}

	/* Logotip u sredini. */
	.sejkan-zaglavlje > .wp-block-group.alignwide > .wp-block-group:first-child {
		grid-area: 1 / 2;
		justify-self: center;
	}

	/* Pretraga desno. */
	.sejkan-zaglavlje .sejkan-zaglavlje__desno > .wp-block-search {
		grid-area: 1 / 3;
		justify-self: end;
	}

	/*
	 * Ikone uz rub: dugmad od 2.75rem nose ~0.625rem unutrašnjeg razmaka oko
	 * ikone od 24px, pa ikone optički bježe od ruba ekrana. Relativni pomak
	 * ih izvuče u padding zaglavlja i ikona se poravna sa rubom sadržaja.
	 * Pomak, a ne negativna margina: margina bi u flex omotaču pretrage
	 * stisnula dugme; pomak ne dira raspored, a polje pretrage ostaje u
	 * granicama sadržaja jer je vezano za omotač, ne za dugme.
	 */
	.sejkan-zaglavlje .wp-block-navigation__responsive-container-open {
		position: relative;
		inset-inline-start: -0.625rem;
	}

	.sejkan-zaglavlje .wp-block-search__button.has-icon {
		position: relative;
		inset-inline-end: -0.625rem;
	}

	.sejkan-zaglavlje .wp-block-site-logo img,
	.sejkan-zaglavlje .custom-logo {
		max-width: 200px;
		height: auto;
	}

	/*
	 * Pretraga preko zaglavlja: lijevo od dugmeta nema mjesta, a polje ispod
	 * zaglavlja izgleda kao zakrpa. Otvoreno polje zato preuzme cijelu traku
	 * zaglavlja i uklizi s desna preko nje: lupa (sada potvrda) preleti na
	 * lijevi rub — tačno gdje stoji hamburger — a dugme × na desni, otprilike
	 * gdje je maloprije bila lupa. Kontekst pozicioniranja postaje zaglavlje,
	 * pa omotač pretrage mora nazad u tok.
	 */
	.sejkan-zaglavlje {
		position: relative;
	}

	.sejkan-zaglavlje .wp-block-search__button-only .wp-block-search__inside-wrapper {
		position: static;
	}

	.sejkan-zaglavlje .wp-block-search__button-only .wp-block-search__input {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		padding: 0 3.9rem 0 4rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		font-size: var(--wp--preset--font-size--medium);
		translate: 0 0;
	}

	.sejkan-zaglavlje .wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
		translate: 1.5rem 0;
	}

	/* Traka nema rub koji bi poplavio, pa fokus nosi linija na dnu. */
	.sejkan-zaglavlje .wp-block-search__button-only .wp-block-search__input:focus {
		box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary);
	}

	/* Otvoreno: lupa postane potvrda i sjedne na lijevi rub trake. */
	.sejkan-zaglavlje .wp-block-search__button-only:not( .wp-block-search__searchfield-hidden ) .wp-block-search__button.has-icon {
		position: absolute;
		z-index: 5;
		top: 50%;
		left: 0.875rem;
		translate: 0 -50%;
		inset-inline-end: auto;
	}

	/* Dugme × na desni rub trake. */
	.sejkan-zaglavlje .wp-block-search__button-only .sejkan-pretraga__zatvori {
		top: 50%;
		right: 0.875rem;
		translate: 0 -50%;
	}

	.sejkan-usluzna__email {
		display: none;
	}

	.sejkan-usluzna > .wp-block-group {
		padding-block: 0.25rem;
	}
}

/*
 * Blok navigacije prelazi na hamburger tek na 600px, a raspored u tri stupca
 * počinje na 781px. U tom pojasu se meni prikazivao kao pun spisak stisnut u
 * stupac od 2.75rem, pa se slagao vertikalno. Ovdje se hamburger nameće i u
 * tom pojasu, da se prekidne tačke poklope.
 *
 * Stanje otvorenog preklopa (.is-menu-open) je globalno u jezgri i ne dira se.
 */
@media ( min-width: 600px ) and ( max-width: 1023px ) {

	.sejkan-zaglavlje .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.sejkan-zaglavlje .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none;
	}
}

@media ( max-width: 430px ) {

	.sejkan-zaglavlje .wp-block-site-logo img,
	.sejkan-zaglavlje .custom-logo {
		max-width: 168px;
	}
}

/* ===========================================================================
 * 5. Mobilni preklop navigacije
 *
 * Jezgra u preklop preslika poravnanje „desno" iz širokog reda
 * (--navigation-layout-justification-setting postane align-items), pa sve
 * stavke vise uz desni rub u nejednakim širinama. Preklop se zato slaže kao
 * lista preko pune širine: krupne stavke razdvojene tankim linijama,
 * podmeniji stalno rasklopljeni i uvučeni uz lijevu liniju, a trenutna
 * stranica označena zlatnom trakom uz rub — isti jezik kao podvlaka u
 * širokom meniju. Sve je vezano za .is-menu-open, pa široki red ne dira.
 * ======================================================================== */

/*
 * Ne samo na preklopu: <ul> u preklopu nosi i klase wp-block-navigation
 * items-justified-right, pa jezgra „flex-end" deklariše direktno na njemu
 * i deklaracija gazi nasljeđivanje. Zato i <ul> mora dobiti svoju.
 */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open,
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: stretch;
}

/* Bez naslijeđenih razmaka između stavki — ritam daju linije i padding. */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 30rem;
	gap: 0;
}

.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
}

/*
 * Stavke prvog nivoa: krupno, cijeli red je dodirna meta. Punu širinu daje
 * align-items: stretch, ne width — width: 100% bi se sa paddingom prelio
 * preko roditelja (content-box).
 */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.8rem 0.6rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/* Podvlaka iz širokog menija preko cijelog reda ovdje nema smisla. */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: none;
}

/*
 * Podmeni: umjesto spuštene ploče, uvučena lista uz tanku liniju.
 * .has-child i klasa sadržaja su tu zbog specificiteta — jezgrino pravilo
 * za preklop ima pet klasa i inače bi zadržalo svoj padding od 2rem.
 */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	margin: 0 0 0.6rem 0.6rem;
	padding: 0 0 0 0.85rem;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--base-3);
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	gap: 0;
}

.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
}

/* Poslije osnovnih pravila, da pri istom specificitetu prevagne stanje. */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary-dark);
}

/* Trenutna stranica: zlatna traka uz rub, bez pomjeranja rasporeda. */
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.sejkan-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	box-shadow: inset 0.2rem 0 0 var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

/*
 * Hamburger i dugme × : gola ikona od 24px je premala dodirna meta, pa oba
 * dobiju punih 44px — koliko je i stupac mreže u koji hamburger sjeda.
 * Hamburgeru se ne smije dirati display: njime jezgra skriva dugme na
 * širokim ekranima.
 */
.sejkan-zaglavlje .wp-block-navigation__responsive-container-open,
.sejkan-zaglavlje .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 3px;
}

.sejkan-zaglavlje .wp-block-navigation__responsive-container-open:hover,
.sejkan-zaglavlje .wp-block-navigation__responsive-container-open:focus-visible,
.sejkan-zaglavlje .wp-block-navigation__responsive-container-close:hover,
.sejkan-zaglavlje .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--primary-dark);
}

.sejkan-zaglavlje .wp-block-navigation__responsive-container-close {
	display: flex;
}

/* ===========================================================================
 * 6. Podnožje
 *
 * Dva sloja na istoj tamnoj podlozi. Nijanse kartice i donje trake se
 * izvode iz boja palete sa color-mix(), a ne dodaju kao nove boje: style
 * variation koja promijeni „primary-dark" tako automatski dobije i podnožje
 * u svojoj nijansi.
 * ======================================================================== */

.sejkan-podnozje {
	line-height: 1.5;
}

/*
 * Naslovna se završava punom obojenom sekcijom koja naliježe na podnožje.
 * Root razmak .wp-site-blocks > * + * iznad podnožja ostavi prazninu — istu
 * koju main kod sebe gasi margin-topom. Samo na naslovnoj (body klasa iz
 * functions.php); ostale stranice zadrže svoj razmak do podnožja.
 */
.sejkan-naslovna .wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

.sejkan-podnozje .wp-block-navigation-item__content {
	text-decoration: none;
}

.sejkan-podnozje .wp-block-navigation-item__content:hover,
.sejkan-podnozje .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Kratki opis: tiši od naziva, ali još čitljiv na tamnoj podlozi (≈9:1). */
.sejkan-podnozje__opis {
	color: color-mix( in srgb, var(--wp--preset--color--base) 80%, var(--wp--preset--color--primary-dark) );
}

/* Ikone mreža: prozirna pločica koja se ispuni pri prelasku. */
.sejkan-podnozje__mreze .sejkan-podaci__mreze--ikone a {
	background-color: color-mix( in srgb, var(--wp--preset--color--base) 10%, transparent );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sejkan-podnozje__mreze .sejkan-podaci__mreze--ikone a:hover,
.sejkan-podnozje__mreze .sejkan-podaci__mreze--ikone a:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

/* Kontakt kartica. */
.sejkan-podnozje__kartica {
	background-color: color-mix( in srgb, var(--wp--preset--color--base) 8%, transparent );
}

/*
 * Blok podataka daje vezama min-height: 44px — na kontakt stranici ispravno,
 * u kartici razvuče svaki red. Dodirna meta se ovdje postiže razmakom.
 */
.sejkan-podnozje__kartica .wp-block-sejkan-school-core-podaci-skole a {
	min-height: 0;
	padding-block: 0.2rem;
}

.sejkan-podnozje__kartica .sejkan-podaci__lista {
	gap: var(--wp--preset--spacing--10);
}

/* Naziv iznad vrijednosti, ne pored — u kartici nema mjesta za dvije kolone. */
.sejkan-podnozje__radno .sejkan-podaci__stavka {
	grid-template-columns: 1fr;
	gap: 0.25em;
}

.sejkan-podnozje__radno .sejkan-podaci__oznaka {
	display: block;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Donja traka: tamnija od glavnog sloja, sa tankom linijom na spoju. */
.sejkan-podnozje__traka {
	background-color: color-mix( in srgb, var(--wp--preset--color--primary-dark) 65%, black );
	border-top: 1px solid color-mix( in srgb, var(--wp--preset--color--base) 12%, transparent );
}

.sejkan-podnozje__traka p,
.sejkan-podnozje__traka .sejkan-podaci,
.sejkan-podnozje__traka .wp-block-navigation {
	margin-block: 0;
}

.sejkan-podnozje__traka .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.sejkan-podnozje__vrh a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-height: 44px;
	text-decoration: none;
	font-weight: 600;
}

.sejkan-podnozje__vrh a:hover,
.sejkan-podnozje__vrh a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Klik na „Na vrh" klizi umjesto da skoči; ko ne želi pokret, ne dobije ga. */
@media ( prefers-reduced-motion: no-preference ) {

	html {
		scroll-behavior: smooth;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.sejkan-podnozje__mreze .sejkan-podaci__mreze--ikone a {
		transition: none;
	}
}

/*
 * Tablet: jezgra slaže sve kolone jednu ispod druge ispod 782px. Dvije liste
 * veza su kratke, pa se tu drže jedna pored druge; identitet i kartica idu
 * preko cijele širine. !important je nužan jer ga koristi i jezgra.
 */
@media ( min-width: 600px ) and ( max-width: 781px ) {

	.sejkan-podnozje .wp-block-columns > .sejkan-podnozje__veze {
		flex-basis: calc( 50% - var(--wp--preset--spacing--40) / 2 ) !important;
	}
}

/* Uski ekrani: donja traka centrirana, ostalo ostaje lijevo kao i sadržaj. */
@media ( max-width: 781px ) {

	.sejkan-podnozje__traka > .wp-block-group {
		justify-content: center;
		text-align: center;
	}
}

/* ===========================================================================
 * 7. Naslovna traka
 *
 * Puna traka na vrhu podstranica, objava i arhiva: daje svakoj stranici
 * identitet umjesto golog naslova. Gradijent i akcentna linija se izvode iz
 * palete color-mix()-om, pa style variation (npr. zelena-oker) dobije svoju
 * nijansu bez ijedne nove boje. Traka je alignfull dijete constrained main-a,
 * a njen sadržaj ostaje u širini teksta — poravnat sa sadržajem ispod.
 * ======================================================================== */

.sejkan-naslovna-traka {
	padding-block: var(--wp--preset--spacing--40);
	background-image: linear-gradient(
		108deg,
		var(--wp--preset--color--primary-dark),
		color-mix( in srgb, var(--wp--preset--color--primary-dark) 45%, var(--wp--preset--color--primary) )
	);
	border-bottom: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/*
 * Traka naliježe na zaglavlje: root razmak `.wp-site-blocks > * + *` inače
 * ostavi ~24px bijelog iznad main-a. Gasi se samo kad main otvara traka, pa
 * naslovna (sa herojem umjesto trake) zadrži svoj razmak.
 */
.wp-site-blocks > main:has( > .sejkan-naslovna-traka:first-child ) {
	margin-top: 0;
}

/* Naslov i pomoćni tekst na tamnoj podlozi idu u base (bijelo). */
.sejkan-naslovna-traka :is(h1, .wp-block-heading, .wp-block-post-title, .wp-block-query-title),
.sejkan-naslovna-traka .wp-block-post-terms,
.sejkan-naslovna-traka .wp-block-post-terms a {
	color: var(--wp--preset--color--base);
}

/* Natpis iznad naslova: zlatni „eyebrow", verzal, prošireni razmak. */
.sejkan-naslovna-traka .sejkan-natpis {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Datum objave/albuma: tiši od naslova, ali čitljiv na tamnoj podlozi. */
.sejkan-naslovna-traka .wp-block-post-date {
	font-size: var(--wp--preset--font-size--x-small);
	color: color-mix( in srgb, var(--wp--preset--color--base) 82%, var(--wp--preset--color--primary-dark) );
}

/*
 * Mrvice: uređena lista u red. Razdvojnica „›" je čisto vizuelna (::before),
 * pa je čitač ekrana ne izgovara; zadnja stavka nosi aria-current.
 */
.sejkan-mrvice ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15em 0.5em;
	margin: 0 0 0.35rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
}

.sejkan-mrvice li {
	display: inline-flex;
	align-items: center;
	color: color-mix( in srgb, var(--wp--preset--color--base) 80%, var(--wp--preset--color--primary-dark) );
}

.sejkan-mrvice li + li::before {
	content: "\203A";
	margin-inline-end: 0.5em;
	opacity: 0.65;
}

.sejkan-mrvice a {
	color: inherit;
	text-decoration: none;
}

.sejkan-mrvice a:hover,
.sejkan-mrvice a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sejkan-mrvice [aria-current] {
	color: var(--wp--preset--color--base);
}

/* ===========================================================================
 * 8. Pristupačnost
 * ======================================================================== */

/*
 * theme.json daje vezama plavi fokusni okvir — na tamnoj podlozi se gubi.
 * Vezano za klasu podloge, ne za sekciju: svaka sadašnja i buduća tamna
 * površina (servisna traka, podnožje, pozivne sekcije, naslovna traka)
 * dobije zlatni okvir.
 */
.has-primary-dark-background-color a:focus,
.has-primary-dark-background-color .wp-element-button:focus,
.sejkan-naslovna-traka a:focus {
	outline-color: var(--wp--preset--color--accent);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}