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

/*
 * 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 Bogdanovci-only tweaks.
 */

/* -- 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 parent lays the block out as a flex
 * row (crest | text); this child switches it to a 2-row grid so the logos
 * can span a second row that soaks up the column's remaining height and
 * pins them to the bottom of the footer's first column, below the crest.
 * Both source logos are dark artwork, so each sits on a small white chip to
 * stay legible on the dark footer. */

.mt-footer-brand-block {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: center;
	/* __main aligns its columns to start — stretch this one so the 1fr row
	   actually reaches the bottom of the footer's tallest column. */
	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;
}

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

/* -- Homepage hero slider --------------------------------------------------
 * Full-bleed auto-advancing image slider below the header (template-parts/
 * sections/section-hero-slider.php + assets/js/hero-slider.js). Slides are
 * stacked absolutely and cross-fade via .is-active. */

.mt-hero-slider {
	position: relative;
	/* Cap against the viewport so the "Brze veze" tiles stay above the fold:
	 * 36rem covers the utility strip + header (~16rem) and the quick-links
	 * section through its first tile row (~20rem). */
	height: clamp(16rem, 46vw, 36rem);
	height: clamp(16rem, min(46vw, 100svh - 38rem), 36rem);
	overflow: hidden;
	background: var(--mt-color-primary);
}

.mt-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.mt-hero-slider__slide.is-active {
	opacity: 1;
}

.mt-hero-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mt-hero-slider__controls {
	position: absolute;
	inset: auto 0 var(--mt-space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mt-space-sm);
	padding-inline: var(--mt-space-md);
}

.mt-hero-slider__dots {
	display: flex;
	align-items: center;
	gap: var(--mt-space-sm);
}

.mt-hero-slider__dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background var(--mt-motion-fast);
}

.mt-hero-slider__dot.is-active {
	background: #ffffff;
}

.mt-hero-slider__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mt-hero-slider__slide {
		transition: none;
	}
}

/* -- E-imovina quick-link tile icon ---------------------------------------
 * Same masked-glyph mechanism as the parent's .mt-mask-icon--* concepts
 * (section-utility-links.css); the base .mt-mask-icon class comes from
 * there. The svg lives in this child theme (the parent ships no building
 * glyph). URL resolves relative to this stylesheet (theme root). */
.mt-mask-icon--property {
	-webkit-mask-image: url("assets/svg/building-2.svg");
	mask-image: url("assets/svg/building-2.svg");
}

.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%;
}