/* ----------------------------------------------------------
 * Camino Lituano — front-end overrides
 *
 * theme.json handles 95% of styling via design tokens.
 * This file is only for things tokens can't express cleanly:
 *  - micro-interactions (hover transitions)
 *  - one-off accessibility refinements
 *  - federation/logo lockup positioning
 *  - map widget shells (Leaflet container, etc.)
 * --------------------------------------------------------- */

/* ── Reset / smooth motion ────────────────────────────────── */
:root {
	--camino-transition: 160ms ease-out;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a,
.wp-element-button {
	transition: color var(--camino-transition), background-color var(--camino-transition), border-color var(--camino-transition);
}

/* ── Outline button — minimal, monochrome with red hover ── */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--black);
}

/* ── Site logo: keep crisp, no fancy effects ─────────────── */
.wp-block-site-logo img {
	display: block;
	height: auto;
}

/* ── Navigation: red underline on active/hover ───────────── */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.25rem;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--red);
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--wp--preset--color--red);
}

/* Hover effects are handled per card type below — no generic li shift. */

/* ── Featured images: subtle frame for off-white surfaces ── */
.has-off-white-background-color .wp-block-post-featured-image img,
.has-muted-bg-background-color .wp-block-post-featured-image img {
	border: 1px solid var(--wp--preset--color--rule);
}

/* ── Accessibility: visible focus ring ────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

/* ── Municipality archive card ───────────────────────────── */
.camino-mun-card {
	position: relative;
	overflow: hidden;
	transition: transform var(--camino-transition);
}

.camino-mun-card:hover .camino-mun-hero__img {
	transform: scale(1.03);
}

/* Title turns red on hover, matching news-card behaviour */
.camino-mun-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--red, #BF2939);
}

/* Excerpt matches news-card excerpt (gray-60) */
.camino-mun-card__body .wp-block-post-excerpt p {
	color: var(--wp--preset--color--gray-6, #666);
	margin: 0;
}

/* Featured hero */
.camino-mun-hero {
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--muted-bg, #f4f4f4);
	color: var(--wp--preset--color--gray-3, #b0b0b0);
}

.camino-mun-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease-out;
}

.camino-mun-hero__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--gray-3, #b0b0b0);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	background:
		linear-gradient(135deg, var(--wp--preset--color--muted-bg, #f4f4f4) 0%, var(--wp--preset--color--off-white, #fafafa) 100%);
}

.camino-mun-hero__placeholder-label {
	max-width: 80%;
	font-family: var(--wp--preset--font-family--outfit, system-ui);
}

/* Circular coat-of-arms overlay (Facebook profile picture style):
   sits between the hero and the body, lifted by half its height to
   overlap the bottom of the hero image. */
.camino-mun-card .camino-mun-logo-badge {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 var(--wp--preset--spacing--40, 1.5rem);
	border-radius: 50%;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.camino-mun-card .camino-mun-logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* When the card has no logo, pull the body up so it doesn't look gap-y */
.camino-mun-card:not(:has(.camino-mun-logo-badge)) .camino-mun-card__body {
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* The body needs less top-padding when the badge is overlapping into it */
.camino-mun-card:has(.camino-mun-logo-badge) .camino-mun-card__body {
	padding-top: var(--wp--preset--spacing--30) !important;
}

@media (min-width: 781px) {
	.camino-mun-card .camino-mun-logo-badge {
		width: 84px;
		height: 84px;
		margin-top: -42px;
	}
}

/* ── Leaflet container (used by camino-map-display mu-plugin) ── */
.camino-map {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--muted-bg);
}

@media (max-width: 768px) {
	.camino-map { aspect-ratio: 4 / 3; }
}

/* ── Homepage news loop: let Query Loop's <ul><li> participate
   directly in the .news-grid layout (cards become grid children). ── */
.news-grid .camino-news-loop,
.news-grid .wp-block-post-template,
.news-grid .wp-block-post-template > li {
	display: contents;
}

/* Featured image inside .card-news fills the aspect-ratio container. */
.card-news__media .card-news__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur, 220ms) var(--ease, ease);
}
.card-news:hover .card-news__media .card-news__img {
	transform: scale(1.03);
}

/* Header is position:fixed (lifted out of flow), so <main> is the first
   in-flow child of .wp-site-blocks. WP's global styles still treat the
   <header> as the first DOM child and apply margin-block-start:1.5rem to
   <main>, creating a 24px white gap under the fixed header. Zero it out. */
.wp-site-blocks > main { margin-block-start: 0; }

/* When the WP admin bar is visible, push the fixed header below it.
   body.admin-bar is added by WordPress for logged-in front-end views.
   Admin bar is 32px on ≥782px screens, 46px on smaller screens. */
body.admin-bar .site-header {
	top: 32px;
}

body.admin-bar.has-fixed-header {
	padding-top: 72px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}

	body.admin-bar.has-fixed-header {
		padding-top: 72px;
	}
}

@media screen and (max-width: 600px) {
	/* Admin bar is not fixed on very small screens — header returns to top: 0 */
	body.admin-bar .site-header {
		top: 0;
	}

	body.admin-bar.has-fixed-header {
		padding-top: 72px;
	}
}

/* Homepage hero photo (set via ACF site_home_hero_image). Replaces the
   .ph--dusk gradient placeholder when an editor uploads a real image. */
.hero > .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero > .hero__media .hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Global featured-image placeholder (scallop shell on off-white).
   Used everywhere a real featured image is missing — news cards,
   archive thumbnails, single-post hero, mun-hero, etc. The image
   already encodes the off-white surround, so we just need to make
   it fill any container shape. */
.camino-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: var(--off-white, #fafafa);
}

/* ── Query Loop Pagination — matches .pagination design spec ──
   .wp-block-query-pagination-numbers is flattened via display:contents
   so page number items join the same flex row as the prev/next links. */
.wp-block-query-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-20);
	margin-top: var(--sp-70);
}

.wp-block-query-pagination-numbers {
	display: contents;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rule);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--text-s);
	text-decoration: none;
	color: var(--black);
	background: var(--white);
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	line-height: 1;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-numbers a.page-numbers:hover {
	border-color: var(--red);
	color: var(--red);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--black);
	color: #fff;
	border-color: var(--black);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	border: none;
	background: transparent;
	color: var(--gray-30);
	min-width: auto;
	padding: 0 0.25rem;
}

/* ── Sanctuary card: unified hover — white, no border, name → red ─
   Overrides design-components.css which has off-white bg, 1px border,
   and border-color:red on hover. */
.card-sanctuary {
	background: var(--white, #fff);
	border: none;
	transition: none; /* kill design's border-color + background transitions */
}

.card-sanctuary__name {
	transition: color var(--dur, 220ms) var(--ease, ease);
}

.card-sanctuary:hover .card-sanctuary__name {
	color: var(--red, #BF2939);
}

/* ── Sanctuaries grid: 3-col consistent with news/archive grids ──
   Overrides the design's 4-col .sanct-grid. Breakpoints in
   design-pages.css (980px→2col, 560px→1col) still apply. */
.sanct-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-60) var(--sp-50);
}

/* ── Sanctuaries region groups: space between Aukštaitija, Dzūkija… ── */
.sanct-region + .sanct-region {
	margin-top: var(--sp-80, 4rem);
}

/* ── Sanctuary card image fills the aspect-ratio container ── */
.card-sanctuary__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur, 220ms) var(--ease, ease);
}
.card-sanctuary:hover .card-sanctuary__img {
	transform: scale(1.03);
}

/* ── Contacts page: 3-card grid (design has 2, we have 3) ── */
.contact-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* ── Contacts page: form section ─────────────────────────── */
.contact-form-wrap {
	max-width: var(--content, 720px);
	margin-top: var(--sp-80);
	margin-left: auto;
	margin-right: auto;
}

.contact-form-wrap .section-head {
	margin-bottom: var(--sp-50);
}

/* CF7 form: 2-column grid */
.contact-form-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-40);
	align-items: start;
}

.contact-form-wrap .wpcf7-form > p {
	margin: 0;
}

.contact-form-wrap .wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20);
	font-size: var(--text-s);
	font-weight: 600;
	font-family: var(--font-head);
	letter-spacing: 0.02em;
}

.contact-form-wrap .wpcf7-form label br { display: none; }

.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"] {
	width: 100%;
	height: 48px;
	padding: 0 var(--sp-40);
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-m);
	color: var(--black);
	outline: none;
	transition: border-color var(--dur) var(--ease);
}

.contact-form-wrap .wpcf7-form textarea {
	width: 100%;
	padding: var(--sp-30) var(--sp-40);
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-m);
	color: var(--black);
	outline: none;
	resize: vertical;
	min-height: 140px;
	transition: border-color var(--dur) var(--ease);
}

.contact-form-wrap .wpcf7-form input[type="text"]:hover,
.contact-form-wrap .wpcf7-form input[type="email"]:hover,
.contact-form-wrap .wpcf7-form textarea:hover {
	border-color: var(--gray-30);
}

.contact-form-wrap .wpcf7-form input:focus-visible,
.contact-form-wrap .wpcf7-form textarea:focus-visible {
	border-color: var(--black);
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

/* Textarea and submit span both columns */
.contact-form-wrap .wpcf7-form > p:has(textarea),
.contact-form-wrap .wpcf7-form > p:has(input[type="submit"]) {
	grid-column: span 2;
}

/* Submit = .btn.btn--primary */
.contact-form-wrap .wpcf7-form input[type="submit"] {
	height: 48px;
	padding: 0 var(--sp-50);
	background: var(--black);
	color: #fff;
	border: 1px solid var(--black);
	border-radius: 0;
	font-family: var(--font-head);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.contact-form-wrap .wpcf7-form input[type="submit"]:hover {
	background: var(--red);
	border-color: var(--red);
}

/* Response output spans both columns */
.contact-form-wrap .wpcf7-response-output {
	grid-column: span 2;
	margin: 0;
	padding: var(--sp-30) var(--sp-40);
	font-size: var(--text-s);
}

@media (max-width: 600px) {
	.contact-form-wrap .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.contact-form-wrap .wpcf7-form > p:has(textarea),
	.contact-form-wrap .wpcf7-form > p:has(input[type="submit"]),
	.contact-form-wrap .wpcf7-response-output {
		grid-column: span 1;
	}
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Active nav item is driven by the [aria-current="page"] attribute set
   in functions.php camino_mobile_menu_script() via window.location.pathname.
   Styles for that state already live in design-site.css. The previous
   body.{class} CSS rules were too broad (body.page matches every Page,
   so /naujienos/ would also highlight "Apie mus"). */