/*
Theme Name: Općina Ernestinovo
Theme URI: https://ernestinovo.hr/
Template: opcinaTema
Author: Sven Hartl PlaviLink
Author URI: https://plavilink.hr/
Description: Site-specific child theme for Općina Ernestinovo. Owns the municipality's brand palette on top of the reusable "Opcina Tema" parent; structure, sections and logic come from the parent.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ernestinovo
*/

/*
 * Site-specific CSS overrides go here (loaded after the parent styles).
 * The brand palette lives in functions.php (base colors) + assets/css/brand.css
 * (shade variants). Keep this file for genuine Ernestinovo-only tweaks.
 */

/* Homepage "Brze veze": seven tiles (see ernestinovo_home_utility_links) in
   ONE row on wide screens, where the parent grid is 6 columns. Between 900 and
   1280px the parent's 4 columns give 4 + 3. */
@media (min-width: 1281px) {
	.mt-section--utility-links {
		--mt-section-utility-links-grid: repeat(7, minmax(0, 1fr));
	}
}

/* The seventh tile's glyph (not one of the parent's icon keys): a folder of
   strategies / plans, masked like the parent's tile icons. */
.mt-mask-icon--strategic {
	-webkit-mask-image: url("../opcinaTema/assets/svg/folder-open.svg");
	mask-image: url("../opcinaTema/assets/svg/folder-open.svg");
}

/* Homepage "Lokalne vijesti": all six cards in a 3 × 2 grid instead of the
   parent's paged slider (see ernestinovo_home_news_grid). The slider wrapper
   markup stays; only the track becomes a grid, so the cards keep their
   equal-height flex behaviour from the parent. */
.mt-local-news .mt-cards-slider--grid .mt-cards-slider__viewport {
	overflow: visible;
	cursor: default;
	touch-action: auto;
	-webkit-user-select: auto;
	user-select: auto;
}

.mt-local-news .mt-cards-slider--grid .mt-cards-slider__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	transition: none;
}

.mt-local-news .mt-cards-slider--grid .mt-cards-slider__slide {
	flex: none;
	min-width: 0;
}

/* The parent's dot row is reused by the phone slider below (filled by
   mt-home-news-slider.js); while the cards sit in the grid it stays hidden. */
.mt-local-news .mt-cards-slider--grid .mt-cards-slider__dots {
	display: none;
}

/* Phones and tablets (client request 2026-09-28): the six cards as a swipe
   slider instead of a stack — the track scrolls horizontally with scroll-snap,
   one card per screen on phones, two on tablets; no buttons, a row of
   non-interactive dots (the parent's dot styling) mirrors the position. */
@media (max-width: 899px) {
	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__track {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Room for the card shadow/lift, which overflow:auto would otherwise clip. */
		padding-block: 0.25rem 0.75rem;
		margin-block: -0.25rem -0.75rem;
	}

	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__track::-webkit-scrollbar {
		display: none;
	}

	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__slide {
		flex: 0 0 calc((100% - 1rem) / 2);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__dots {
		display: flex;
	}

	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__dot {
		cursor: default;
	}
}

@media (max-width: 599px) {
	.mt-local-news .mt-cards-slider--grid .mt-cards-slider__slide {
		flex-basis: 100%;
	}
}

/* Header: no hamburger "Meni" trigger on desktop (client request, 2026-09-21).
   Above the parent's 1280px collapse point the five nav tabs sit fully visible
   in the header bar, so the Izbornik trigger beside them is redundant. It stays
   at ≤1280px, where the parent folds the tabs away and the hamburger (plus the
   bottom tab-bar "Meni" on phones) is the way into the navigation. The button
   keeps rendering, so mt-izbornik.js still finds its toggles; the search icon
   stays right-aligned via the parent's margin-left:auto on the actions cluster.
   Specificity (0,2,0) beats the parent's (0,1,0) display:inline-flex regardless
   of where the parent bundle lands in the cascade. */
@media (min-width: 1281px) {
	.mt-site-header .mt-site-header__menu--izbornik {
		display: none;
	}
}

/* Footer: the parent's two link columns are gone (ernestinovo_footer_links +
   the child's site-footer.php override) and the DHMZ weather block sits in
   their place. Above 900px the parent's 4-column grid is kept: the weather
   block spans the two middle columns and Kontakt is pinned to the last one, so
   the layout holds even while there is no weather data yet (the block then
   renders nothing). ≤900px the parent stacks everything in one column. */
@media (min-width: 901px) {
	.mt-footer-weather {
		grid-column: span 2;
	}

	.mt-site-footer__connect {
		grid-column: -2 / -1;
	}
}

/* Footer weather (template-parts/molecules/footer-weather.php). Colours follow
   the footer's own light-on-primary palette; the eyebrow reuses the parent's
   .mt-site-footer__eyebrow so it matches "Kontakt". */
.mt-footer-weather {
	display: grid;
	align-content: start;
	gap: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}

.mt-footer-weather__now {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.mt-footer-weather__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	color: #ffffff;
}

.mt-footer-weather__icon svg,
.mt-footer-weather__day-icon svg {
	width: 100%;
	height: 100%;
}

.mt-footer-weather__now-text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.mt-footer-weather__temp {
	color: #ffffff;
	font-size: 2.1rem;
	font-weight: var(--mt-font-weight-bold);
	letter-spacing: -0.01em;
	line-height: 1;
}

.mt-footer-weather__desc {
	font-size: var(--mt-font-size-sm);
	line-height: 1.35;
}

.mt-footer-weather__desc::first-letter {
	text-transform: uppercase;
}

.mt-footer-weather__details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
	padding: 0;
	margin: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.74);
	font-size: var(--mt-font-size-sm);
	line-height: 1.45;
}

.mt-footer-weather__details abbr[title] {
	text-decoration: none;
	border-bottom: 0;
}

.mt-footer-weather__days {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	max-width: 22rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mt-footer-weather__day {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	padding: 0.6rem 0.4rem;
	border-radius: var(--mt-radius-md);
	background: rgba(255, 255, 255, 0.08);
	font-size: var(--mt-font-size-xs);
	line-height: 1.3;
	text-align: center;
}

.mt-footer-weather__day-name {
	color: #ffffff;
	font-weight: var(--mt-font-weight-bold);
}

.mt-footer-weather__day-icon {
	display: inline-flex;
	width: 1.6rem;
	height: 1.6rem;
	color: #ffffff;
}

.mt-footer-weather__day-temps {
	color: rgba(255, 255, 255, 0.78);
	white-space: nowrap;
}

.mt-footer-weather__day-temps b {
	color: #ffffff;
	font-weight: var(--mt-font-weight-bold);
}

.mt-footer-weather__source {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--mt-font-size-2xs);
	line-height: 1.45;
}

.mt-footer-weather__source a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mt-footer-weather__source a:hover,
.mt-footer-weather__source a:focus-visible {
	color: #ffffff;
}

/* -- Term-archive pages: udruge, Kiparska kolonija ------------------------- */

/* The page body sits in the hero and spans the archive's full 1260px frame
   (the hero copy is otherwise capped at 54rem) — lists, prose and galleries
   alike, so the intro reads as wide as the filter panel and cards below. */
.mt-term-archive-page .mt-page-hero__copy {
	--mt-page-hero-copy-max-width: none;
	justify-self: stretch;
	width: 100%;
	max-width: none;
}

.mt-term-archive-page__content {
	width: 100%;
	max-width: none;
}

/* The body opens with a contact list or a heading, not an intro paragraph —
   keep the global lede rule (first p reads larger) off a mid-text paragraph. */
.mt-term-archive-page__content > p:first-of-type {
	color: inherit;
	font-size: inherit !important;
	line-height: inherit;
}

.mt-term-archive-page__content h2 {
	margin: var(--mt-space-lg) 0 var(--mt-space-sm);
	font-size: 1.35rem;
	line-height: var(--mt-line-height-tight);
}

/* -- YouTube embeds (Turizam pages) ------------------------------------------ */

.mt-editor-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
}

.mt-editor-content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.mt-editor-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -- Istaknuti projekti: this site's palette for the parent's showcase band --
   The parent draws the tabbed showcase (section-featured-projects.css, since
   2026-10-15) on the primary colour with the warning colour as the accent; this
   site keeps the deep green of its header and footer bands and its gold. The
   selector matches the parent's so the tokens land at the same weight. */

.mt-home > .mt-section.mt-featured-showcase,
.mt-section.mt-featured-showcase {
	--mt-featured-showcase-bg: #1b4a28;
	--mt-featured-showcase-bg-deep: #143a1f;
	--mt-featured-showcase-gold: #e2b653;
}

/* -- Projekti hub: featured projects as photo banners, then the all-projects
   button, then the project-news archive (inc/projekti-hub.php). The hero copy
   spans the archive's frame so the banner grid can use the full width. ------- */

.mt-projekti-hub .mt-page-hero__copy.mt-projekti-hub__copy {
	--mt-page-hero-copy-max-width: none;
	justify-self: stretch;
	width: 100%;
	max-width: none;
}

.mt-projekti-hub__lead {
	max-width: 54rem;
}

/* One banner per row, full width (client feedback 2026-09-24). */
.mt-project-banners {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Full-width banners: a wide, fixed band rather than 16:9 (which would be
   ~700px tall at 1260px). */
.mt-project-banner {
	position: relative;
	display: block;
	height: clamp(17rem, 34vw, 26rem);
	overflow: hidden;
	background: #14361f;
	border-radius: var(--mt-radius-lg);
	box-shadow: var(--mt-shadow-elevated);
	color: #ffffff;
	text-decoration: none;
}

.mt-project-banner__media,
.mt-project-banner__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mt-project-banner__media img {
	transition: transform var(--mt-motion-base);
}

.mt-project-banner:hover .mt-project-banner__media img,
.mt-project-banner:focus-visible .mt-project-banner__media img {
	transform: scale(1.04);
}

/* Readability scrim: photo on top, text on a dark gradient at the foot. */
.mt-project-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 20, 12, 0) 28%, rgba(8, 20, 12, 0.55) 60%, rgba(8, 20, 12, 0.88) 100%);
}

.mt-project-banner__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: grid;
	gap: 0.45rem;
	justify-items: start;
	padding: clamp(1rem, 2.2vw, 1.6rem);
	font-size: 1rem;
	line-height: 1.4;
}

.mt-project-banner__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.mt-project-banner__year {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--mt-radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.mt-project-banner__title {
	display: -webkit-box;
	overflow: hidden;
	color: #ffffff;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: var(--mt-heading-letter-spacing);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-project-banner__excerpt {
	display: -webkit-box;
	overflow: hidden;
	max-width: 46rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.95rem;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mt-project-banner__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.15rem;
	color: #e2b653;
	font-size: 0.9rem;
	font-weight: 700;
}

.mt-project-banner__more > span,
.mt-projekti-hub__all-arrow {
	width: 0.85rem;
	height: 0.85rem;
	background: currentColor;
	-webkit-mask: url("../opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	mask: url("../opcinaTema/assets/svg/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--mt-motion-fast);
}

.mt-project-banner:hover .mt-project-banner__more > span,
.mt-projekti-hub__all .mt-button:hover .mt-projekti-hub__all-arrow {
	transform: translateX(0.2rem);
}

.mt-project-banner:focus-visible {
	outline: var(--mt-focus-ring-width) solid var(--mt-focus-ring-color);
	outline-offset: 3px;
}

/* The hero zeroes every paragraph margin (.mt-page-hero__copy p), so the
   button row needs the stronger selector to keep its distance from the
   last banner. */
.mt-projekti-hub .mt-page-hero__copy .mt-projekti-hub__all {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	font-size: 1rem;
}

.mt-projekti-hub__all .mt-button {
	gap: 0.6rem;
}

.mt-projekti-hub__anchor {
	display: block;
	height: 0;
	margin-top: var(--mt-space-lg);
	scroll-margin-top: 6rem;
}

@media (max-width: 767px) {
	.mt-project-banners {
		grid-template-columns: minmax(0, 1fr);
	}

	.mt-project-banner {
		height: auto;
		min-height: 14rem;
		aspect-ratio: 16 / 9;
	}

	.mt-project-banner__excerpt {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-project-banner__media img,
	.mt-project-banner__more > span,
	.mt-projekti-hub__all-arrow {
		transition: none;
	}
}

/* -- Hub pages (Općina, Mještani, Poduzetnici, Projekti, Posjetitelji): the
   links inside the service-panel cards no longer slide right on hover/focus
   (client request, 2026-09-28) — only the colour change remains. The parent
   (pages.css) shifts the link 0.18rem and its arrow 0.12rem; the :is() list
   matches its (0,3,1) specificity, so this later rule wins the cascade. --- */

:is(.mt-opcina-page, .mt-mjestani-page, .mt-poduzetnici-page, .mt-projekti-page, .mt-posjetitelji-page) .mt-service-panel a:hover,
:is(.mt-opcina-page, .mt-mjestani-page, .mt-poduzetnici-page, .mt-projekti-page, .mt-posjetitelji-page) .mt-service-panel a:focus-visible,
:is(.mt-opcina-page, .mt-mjestani-page, .mt-poduzetnici-page, .mt-projekti-page, .mt-posjetitelji-page) .mt-service-panel a:hover::before,
:is(.mt-opcina-page, .mt-mjestani-page, .mt-poduzetnici-page, .mt-projekti-page, .mt-posjetitelji-page) .mt-service-panel a:focus-visible::before {
	transform: none;
}

/* -- Event cards (archive grids: vijesti, projektne vijesti, termini, term
   archives; also the --pill variant): no movement on hover/focus (client
   request, 2026-09-28). The parent (organisms/card-event.css) lifts the card
   2px and slides the "Pročitaj više" link 0.15rem; the shadow and colour
   changes and the photo zoom stay. Same selectors as the parent, so equal
   specificity and the later cascade position win. ------------------------- */

.mt-event-card:hover,
.mt-event-card:focus-within,
.mt-event-card--pill:hover,
.mt-event-card--pill:focus-within,
.mt-event-card__more:hover,
.mt-event-card__more:focus-visible,
.mt-event-card:not(.mt-event-card--pill):hover .mt-event-card__more,
.mt-event-card:not(.mt-event-card--pill):focus-within .mt-event-card__more,
.mt-event-card--pill:hover .mt-event-card__more,
.mt-event-card--pill:focus-within .mt-event-card__more {
	transform: none;
}

/* -- Homepage "Lokalne vijesti" media cards: no movement on hover/focus either
   (client request, 2026-09-28). The parent (sections/section-local-news.css)
   lifts the card 2px and nudges the "Pročitaj više" arrow 0.14rem; the
   elevated shadow and the photo zoom stay. Same selectors as the parent. -- */

.mt-media-card:hover,
.mt-media-card:focus-visible,
.mt-media-card:hover .mt-media-card__more-arrow,
.mt-media-card:focus-visible .mt-media-card__more-arrow {
	transform: none;
}

/* -- Načelnica: her profile card alone in the row (client request 2026-09-28,
   the zamjenik's card is dropped in functions.php). The parent sizes the card
   for two side by side, so on its own it looked empty — a bigger portrait,
   more air and larger type fill the full width; the parent's phone stack
   (≤768px, photo above the text) is left as it is. Selectors carry the
   .mt-nacelnik-archive__people ancestor to outweigh the parent's. ----------- */

@media (min-width: 769px) {
	.mt-nacelnik-archive__people .mt-nacelnik-archive__about {
		gap: clamp(2rem, 4vw, 3.5rem);
		padding: clamp(1.5rem, 3vw, 2.5rem);
	}

	.mt-nacelnik-archive__people .mt-nacelnik-archive__about > .wp-block-image,
	.mt-nacelnik-archive__people .mt-nacelnik-archive__about-avatar {
		width: min(24rem, 40%);
	}

	.mt-nacelnik-archive__people .mt-nacelnik-archive__about img {
		border-radius: var(--mt-radius-lg);
	}

	.mt-nacelnik-archive__people .mt-nacelnik-archive__about-text {
		gap: 0.35rem;
		padding-block: var(--mt-space-sm);
	}

	.mt-nacelnik-archive__people .mt-nacelnik-archive__about-text > * {
		margin-block: 0;
		font-size: 1.1rem;
		line-height: 1.6;
	}

	/* Name, then the office line as a lead. */
	.mt-nacelnik-archive__people .mt-nacelnik-archive__about-text > :first-child {
		margin-bottom: 0.35rem;
		font-size: clamp(1.7rem, 2.4vw, 2.2rem);
		font-weight: 800;
		letter-spacing: var(--mt-heading-letter-spacing);
	}

	.mt-nacelnik-archive__people .mt-nacelnik-archive__about-text > :nth-child(2) {
		margin-bottom: 1rem;
		color: var(--mt-color-primary);
		font-size: 1.2rem;
		font-weight: 600;
	}
}

/* -- Općinsko vijeće: the saziv president's card in the hero (inc/opcinsko-
   vijece.php), between the saziv switcher and the member list. Same profile
   card as the načelnica's (.mt-nacelnik-archive__about, standalone parent
   styles), but in its own row so the full-width načelnica tweaks above do not
   apply; the photo slot stays modest — the president has no photo yet, so
   the neutral avatar fills it. ------------------------------------------- */

.mt-council-president {
	margin-top: var(--mt-space-sm);
	margin-bottom: var(--mt-space-md);
}

@media (min-width: 769px) {
	.mt-council-president .mt-nacelnik-archive__about > .wp-block-image,
	.mt-council-president .mt-nacelnik-archive__about-avatar {
		width: min(12rem, 34%);
	}
}

/* -- Footer: EU project logos at the bottom of the brand column ------------
 * Rendered by this child's footer-brand-block override (template-parts/
 * molecules/footer-brand-block.php), the same way the Bogdanovci child does
 * it. The parent lays the block out as a flex row (crest | text); this
 * switches it to a 2-row grid so the logos span a second row that soaks up the
 * column's remaining height and sit at the bottom of the footer's first
 * column. Both logos are dark artwork, so each sits on a small white chip. */

.mt-footer-brand-block {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: center;
	align-self: stretch;
	column-gap: var(--mt-footer-brand-block-gap);
	row-gap: var(--mt-space-md);
}

.mt-footer-brand-block__partners {
	grid-column: 1 / -1;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-footer-brand-block__partner {
	display: inline-flex;
	align-items: center;
	padding: var(--mt-space-xs);
	background: #ffffff;
	border-radius: var(--mt-radius-sm);
}

.mt-footer-brand-block__partner img {
	display: block;
	height: 2.5rem;
	width: auto;
	max-width: 100%;
}

/* Footer stacks to a single column under 900px: the chips sit right below
   the crest + text, centered. */
@media (max-width: 900px) {
	.mt-footer-brand-block__partners {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Projekti: funder/programme logos at the top of a project description.
   The old-site project pages (imported 2026-09-25) opened with the EU / ITU /
   ministry logos pasted inline; the importer lifts them into one wp:html
   block, a <ul class="mt-project-logos">, so they render as a compact row of
   white chips instead of full-width images (the <ul> also keeps the parent's
   content-gallery filter from grouping them as photos).
   -------------------------------------------------------------------------- */
.mt-project-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-space-sm);
	margin: 0 0 var(--mt-space-lg);
	padding: 0;
	list-style: none;
}

.mt-project-logos li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: var(--mt-space-xs) var(--mt-space-sm);
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
}

.mt-project-logos li::before,
.mt-project-logos li::marker {
	content: none;
}

.mt-project-logos img {
	display: block;
	width: auto;
	height: 3.5rem;
	max-width: 100%;
}