/*
Theme Name: VATGLOBAL
Theme URI: https://vatglobal.eu
Author: VATGLOBAL
Description: Block theme for the VATGLOBAL / vatglobal.eu brand. Design system: Ledger & Harbor.
Version: 0.4.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: MIT
Text Domain: vat
Tags: block-patterns, full-site-editing
*/

/*
 * Component styles — everything that cannot be expressed in theme.json.
 * Palette/typography/spacing live in theme.json (Ledger & Harbor).
 */

/* Archive filter --------------------------------------------------- */

.vat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-block: var(--wp--preset--spacing--40);
}

.vat-filter__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vat-filter__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}

.vat-filter__select {
	appearance: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230F2B35' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

.vat-filter__select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.vat-filter__submit {
	border: 0;
	cursor: pointer;
}

/* Hero ledger ------------------------------------------------------ */

.vat-ledger__row + .vat-ledger__row {
	margin-top: 6px;
}

/* Full-height hero (Ledger & Harbor) — viewport minus header.
   Header height = logo max-height + 2 × spacing-20 (0.5rem) + 1px border. */
:root {
	--vat-header-h: calc(72px + 1rem + 1px);
}

@media (max-width: 600px) {
	:root {
		--vat-header-h: calc(60px + 1rem + 1px);
	}
}

.vat-hero {
	min-height: calc(100vh - var(--vat-header-h));
	min-height: calc(100svh - var(--vat-header-h));
	display: flex;
}

/* The 50/50 row stretches across the hero area between the section
   paddings; the row itself stays inside the constrained width. */
.vat-hero > .wp-block-columns {
	width: 100%;
	align-items: stretch;
}

/* Text column keeps its content vertically centered at full height. */
.vat-hero .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Breathing room between the hero h1 and its lead paragraph — default
   margin-block-start on a paragraph following a heading is too tight in
   display-size Fraunces. Applied to every hero pattern. */
.vat-hero .wp-block-column:first-child > h1 {
	margin-block-end: var(--wp--preset--spacing--30);
}

.vat-hero .wp-block-column:first-child > p {
	margin-block-start: 0;
}

/* Photo column: image fills the column edge-to-edge vertically. */
.vat-hero .wp-block-column:last-child {
	display: flex;
}

.vat-hero .wp-block-column:last-child .wp-block-image {
	flex: 1;
	margin: 0;
	display: flex;
}

.vat-hero .wp-block-column:last-child .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile: the photo is no longer hidden — it leaves the flow and becomes
   the hero background; the text row stacks on top of it. */
@media (max-width: 781px) {
	.vat-hero {
		position: relative;
		isolation: isolate;
	}

	/* Text block sits low — in the darkened zone of the scrim gradient —
	   but lifted off the very bottom (overrides the desktop centering). */
	.vat-hero .wp-block-column:first-child {
		justify-content: flex-end;
		padding-block-end: clamp(72px, 14svh, 128px);
	}

	/* Text row (in-flow) paints above; the photo drops to z-index:-1 —
	   the hero's isolation keeps it from sinking behind the page. */
	.vat-hero .wp-block-column:last-child {
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.vat-hero .wp-block-column:last-child .wp-block-image {
		height: 100%;
	}

	/* Full-bleed: drop the card radius; !important beats Gutenberg's
	   inline border-radius from the wp:image border support. */
	.vat-hero .wp-block-column:last-child .wp-block-image img {
		border-radius: 0 !important;
	}

	/* Scrim between photo and text: ink-toned gradient, nearly clear at
	   the top and darkest at the bottom, where the text block sits. */
	.vat-hero .wp-block-column:last-child::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(15, 43, 53, 0.05) 0%,
			rgba(15, 43, 53, 0.38) 42%,
			rgba(15, 43, 53, 0.88) 100%
		);
	}

	/* Contrast text over the photo: white, bumped to the heaviest loaded
	   weights (Fraunces/Inter ship up to 600 — 700 would be faux bold),
	   plus a dark "кант" — -webkit-text-stroke painted under the fill
	   (paint-order) so it rims the glyphs without muddying them. Shadow
	   stays as the backup layer. Colors need !important to beat WP core's
	   .has-*-color utilities. */
	.vat-hero .wp-block-column:first-child .is-style-ledger-index {
		color: var(--wp--preset--color--accent-soft) !important;
		font-weight: 600;
		-webkit-text-stroke: 0.75px rgba(15, 43, 53, 0.6);
		paint-order: stroke fill;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.55);
	}

	.vat-hero .wp-block-column:first-child h1,
	.vat-hero .wp-block-column:first-child p {
		color: #fff;
		font-weight: 600;
		-webkit-text-stroke: 0.75px rgba(15, 43, 53, 0.6);
		paint-order: stroke fill;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.55);
	}

	.vat-hero .wp-block-column:first-child p {
		color: rgba(255, 255, 255, 0.92) !important;
	}

	/* Mobile CTAs: white rim (кант) around both buttons so their edges
	   read on any photo, the default (ink-filled) button keeps its own
	   background; only the outline variant gets the warm taupe fill
	   (#7A614E) so it reads on the photo. Both get the theme.json button
	   padding so the thicker equal borders keep the two identical in
	   size (the outline selector is repeated to out-rank the block
	   style's inline padding rule). */
	.vat-hero .wp-block-button .wp-block-button__link,
	.vat-hero .wp-block-button.is-style-outline .wp-block-button__link {
		border: 2px solid #fff;
		padding: 0.75rem 1.5rem;
	}

	.vat-hero .wp-block-button.is-style-outline .wp-block-button__link {
		color: #fff;
		border-color: #fff;
		background-color: #7A614E;
	}
}

/* Service rows (/paslaugos/) ---------------------------------------- */

/* The desktop zig-zag alternates the photo column left/right for visual
   rhythm; stacked on mobile that would read text-first on every other
   row. Keep the photo above the text for all rows while stacked — order
   works on the wrapped flex container core uses below 782px. */
@media (max-width: 781px) {
	#pvm-registracija > .wp-block-columns > .wp-block-column:has(> .wp-block-image),
	#oss-registracija > .wp-block-columns > .wp-block-column:has(> .wp-block-image),
	#ioss-registracija > .wp-block-columns > .wp-block-column:has(> .wp-block-image),
	#fiskalinio-agentas > .wp-block-columns > .wp-block-column:has(> .wp-block-image),
	#apskaita > .wp-block-columns > .wp-block-column:has(> .wp-block-image) {
		order: -1;
	}
}

/* ISO grid --------------------------------------------------------- */

.vat-iso-grid p {
	color: var(--wp--preset--color--ink-soft);
	overflow-wrap: break-word;
}

/* Heading and the ISO list hug the left content edge in every viewport —
   never centered, on any display width. */
.vat-iso-grid {
	text-align: left;
}

/* Timeline --------------------------------------------------------- */

.vat-timeline__step {
	padding-left: 20px;
}

/* Post meta row ---------------------------------------------------- */

.vat-post-meta {
	font-family: var(--wp--preset--font-family--mono);
}

.vat-found-posts {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--ink-mute);
	letter-spacing: 0.02em;
}

/* Brand mark -------------------------------------------------------- */

.vat-brand-mark {
	flex-shrink: 0;
}

.vat-brand-mark__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.vat-brand-mark__img {
	display: block;
	height: auto;
	width: auto;
	max-height: 72px;
	max-width: 220px;
}

@media (max-width: 600px) {
	.vat-brand-mark__img {
		max-height: 60px;
		max-width: 180px;
	}
}

/* Tool blocks (Ledger & Harbor tool surfaces) ----------------------- */

.vat-tool-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}

.vat-tool-note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-mute);
}

.vat-tool-input,
.vat-tool-select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	padding: 0.65rem 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

.vat-tool-input:focus,
.vat-tool-select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Calculator ------------------------------------------------------- */

.vat-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.vat-calc__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vat-calc__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 14px 0;
	margin: 20px 0;
}

.vat-calc__radios legend {
	float: left;
	margin-right: 24px;
}

.vat-tool-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

.vat-tool-radio input[type="radio"] {
	accent-color: var(--wp--preset--color--ink);
	width: 16px;
	height: 16px;
}

.vat-calc__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	margin: 0;
}

.vat-calc__result {
	background: var(--wp--preset--color--accent-soft);
	padding: 16px 20px;
}

.vat-calc__result dd {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vat-calc__note {
	margin-top: 14px;
}

/* Checker forms (VIES / LT) ----------------------------------------- */

.vat-vies__form,
.vat-lt__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.vat-vies__field,
.vat-lt__field {
	flex: 1 1 280px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vat-vies__status:not([hidden]),
.vat-lt__status:not([hidden]) {
	margin-top: 14px;
}

/* Result panels ------------------------------------------------------ */

.vat-panel {
	border: 1px solid var(--wp--preset--color--rule);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radius--card);
	padding: 24px 28px;
	margin-top: 24px;
}

.vat-panel--ok {
	border-left-color: var(--vat-ok, #1e7a46);
	background: #eaf5ee;
}

.vat-panel--bad {
	border-left-color: var(--vat-bad, #b3261e);
	background: #fbedec;
}

.vat-panel__badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0 0 14px;
}

.vat-panel--ok .vat-panel__badge {
	color: #14603a;
	background: #cde8d6;
}

.vat-panel--bad .vat-panel__badge {
	color: #8f1d17;
	background: #f5d3d0;
}

.vat-panel__title {
	margin: 0 0 4px;
}

.vat-panel__sub {
	margin: 0 0 18px;
	color: var(--wp--preset--color--ink-soft);
}

.vat-panel__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.vat-panel__rows dd {
	margin: 4px 0 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	overflow-wrap: break-word;
}

.vat-panel__another {
	margin: 20px 0 0;
}



/* Navigation CTA item — ink button inside header nav (Ledger & Harbor) */
/* CTA nav item: ink-fill button (Ledger & Harbor). Target both the anchor and
   the label span — theme.json link color (ink) is more specific than the
   generic anchor rule and would otherwise render ink-on-ink. */
.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a,
.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a .wp-block-navigation-item__label {
	background-color: var(--wp--preset--color--ink, #0F2B35);
	color: #FAF8F4;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a:hover,
.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a:focus,
.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a:hover .wp-block-navigation-item__label {
	background-color: #14424F;
	color: #FAF8F4;
}

/* Header chrome: the global link style (theme.json elements.link) paints a
   1px amber border-bottom under every anchor. Header nav links are
   borderless at rest — the border returns only on hover/focus and on the
   current page item. The header keeps its own 1px bottom rule. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.vat-nav-cta > a,
.vat-brand-mark__link {
	border: 0;
}

.wp-block-navigation .wp-block-navigation-item:not(.vat-nav-cta) > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item:not(.vat-nav-cta) > .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* Language switcher (dropdown widget, after the nav): mono trigger whose
   label is the current language, picked per body class (inc/i18n.php).
   The panel lists all three languages; the active one keeps the ink +
   amber underline idiom of the current nav item. */
.vat-lang-switch {
	position: relative;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.vat-lang-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.vat-lang-switch__btn:hover,
.vat-lang-switch__btn:focus-visible {
	color: var(--wp--preset--color--accent-deep);
}

.vat-lang-switch__btn:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.vat-lang-switch__current {
	display: none;
}

body.vat-lang-lt .vat-lang-switch__current[data-lang="lt"],
body.vat-lang-en .vat-lang-switch__current[data-lang="en"],
body.vat-lang-ru .vat-lang-switch__current[data-lang="ru"],
body.vat-lang-pl .vat-lang-switch__current[data-lang="pl"],
body.vat-lang-tr .vat-lang-switch__current[data-lang="tr"] {
	display: inline;
}

.vat-lang-switch__chevron {
	transition: transform 0.15s ease;
}

.vat-lang-switch.is-open .vat-lang-switch__chevron {
	transform: rotate(180deg);
}

.vat-lang-switch__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	min-width: 148px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(15, 43, 53, 0.12);
}

.vat-lang-switch__menu a {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--ink-mute);
	border-bottom: 1px solid transparent;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0.02em;
}

.vat-lang-switch__menu a:hover,
.vat-lang-switch__menu a:focus-visible {
	color: var(--wp--preset--color--accent-deep);
}

body.vat-lang-lt .vat-lang-switch__menu a[data-lang="lt"],
body.vat-lang-en .vat-lang-switch__menu a[data-lang="en"],
body.vat-lang-ru .vat-lang-switch__menu a[data-lang="ru"],
body.vat-lang-pl .vat-lang-switch__menu a[data-lang="pl"],
body.vat-lang-tr .vat-lang-switch__menu a[data-lang="tr"] {
	color: var(--wp--preset--color--ink);
	/* text-decoration (not border-bottom): the amber rule must hug the
	   label's own width — the row-width border read as a divider. */
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* The header keeps only its 1px bottom rule. WP core paints
   `border-style: solid` on any .has-border-color element, so its three other
   sides fall back to the medium (3px) width in the inherited ink color —
   zero those widths. */
header .wp-block-group.has-border-color,
header.wp-block-group.has-border-color {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}

/* Header nav collapse: below 1025px the menu lives in the overlay (core's
   own collapse point is 600px, which leaves the inline nav wrapping
   awkwardly on tablets). Theme stylesheet loads after core, so the
   equal-property overrides win the cascade; the extra class keeps them
   ahead on specificity too. */
@media (max-width: 1024px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Overlay menu anatomy: items centered as a column, and the close (X)
   button kept level with the hamburger's position in the sticky header —
   core pins the X to the very top of the viewport (top: 0), which makes
   it drift upwards relative to where the menu was opened from. The top
   offset mirrors the header math: spacing-20 padding + centering the
   button inside the logo row height carried by --vat-header-h. */
@media (max-width: 1024px) {
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-page-list,
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item {
		align-items: center;
		text-align: center;
	}

	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
		top: calc(0.5rem + (var(--vat-header-h) - 1rem - 1px - 24px) / 2);
		right: var(--wp--custom--gutter);
	}

	/* First menu item must clear the repositioned X. */
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		padding-top: calc(var(--vat-header-h) + 0.5rem);
	}
}

/* Header is sticky: stays visible on scroll while remaining in flow — no
   body offset needed and the hero's `100svh - header` math stays true.
   Sits above page content, below the WP admin bar when logged in. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 90;
}

body.admin-bar .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* In-page anchors must not land underneath the sticky header. */
main [id] {
	scroll-margin-top: calc(var(--vat-header-h) + 0.5rem);
}

/* Zero the core root block-gap rule (`:where(.wp-site-blocks) > * { margin-block: 24px 0 }`):
   full-bleed bands must sit flush against header/footer with no paper sliver. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Same idea for nested flow containers: the last child of any flow layout
   should not stack a top margin onto whatever follows it. `:where()` keeps
   specificity at zero so block-level spacing can still override it locally. */
:root :where(.is-layout-flow) > :last-child {
	margin-block-start: 0;
}

/* Footer text links: the global link color (ink) disappears on the ink
   band — paragraph links render white; hover shifts to the amber accent
   (accent-deep would be too dark here). */
footer.wp-block-group p a {
	color: var(--wp--preset--color--base, #FFFFFF);
}

footer.wp-block-group p a:hover,
footer.wp-block-group p a:focus {
	color: var(--wp--preset--color--accent, #C87A1B);
}

/* Consultation modal (native <dialog>) — Bootstrap-like anatomy on the
   Ledger & Harbor palette: header (title + close), scrollable body, and
   the CF7 submit row pinned as the footer. */
.vat-modal {
	border: none;
	padding: 0;
	background: transparent;
	width: min(720px, calc(100vw - 32px));
}

.vat-modal::backdrop {
	background: rgba(15, 43, 53, 0.55);
}

.vat-modal__panel {
	display: flex;
	flex-direction: column;
	max-height: min(760px, calc(100svh - 64px));
	background: var(--wp--preset--color--paper, #FAF8F4);
	border-radius: 8px;
	box-shadow: 0 24px 64px rgba(15, 43, 53, 0.25);
	overflow: hidden;
}

.vat-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px 18px;
	border-bottom: 1px solid var(--wp--preset--color--rule, #E6E2D8);
}

.vat-modal__close {
	border: none;
	background: transparent;
	color: var(--wp--preset--color--ink, #0F2B35);
	font-size: 22px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
}

.vat-modal__close:hover,
.vat-modal__close:focus {
	background: var(--wp--preset--color--rule, #E6E2D8);
}

.vat-modal__title {
	font-family: var(--wp--preset--font-family--display, serif);
	color: var(--wp--preset--color--ink, #0F2B35);
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 4px;
}

.vat-modal__sub {
	margin: 0;
	color: var(--wp--preset--color--ink-soft, #40565f);
}

.vat-modal__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}

/* CF7 wraps the form in a .wpcf7 div — it, too, must be a constrained
   flex item, or the form sizes to its content and the footer overflows. */
.vat-modal__body > .wpcf7 {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.vat-modal .wpcf7 form {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.vat-modal .wpcf7 form p {
	margin: 0 0 14px;
}

/* modal.js wraps the field paragraphs in this container: the fields scroll
   here, while the footer row below stays pinned, outside the scroll. */
.vat-modal__fields {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 28px 0;
}

/* The submit row is the modal footer: a real, permanently visible bar
   below the scroll area. */
.vat-modal .wpcf7 form p:has(.wpcf7-submit) {
	margin: 0;
	padding: 14px 28px 20px;
	background: var(--wp--preset--color--base, #FFFFFF);
	border-top: 1px solid var(--wp--preset--color--rule, #E6E2D8);
}

/* modal.js moves the GDPR acceptance into this row: submit button on the
   LEFT, consent on the right. CF7 renders the consent text as bare text
   nodes — modal.js wraps them in .vat-modal__consent-text so they flow as
   one inline run instead of fragmenting into separate flex items. */
.vat-modal .wpcf7 form p.vat-modal__footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
}

.vat-modal .wpcf7 form p.vat-modal__footer-row .wpcf7-submit,
.vat-modal .wpcf7 form p.vat-modal__footer-row .wpcf7-spinner {
	order: -1;
}

.vat-modal__consent {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* Services multi-select: stack the CF7 checkbox items vertically. */
.vat-modal .wpcf7-checkbox .wpcf7-list-item {
	display: block;
	margin: 0 0 6px;
}

/* Feedback forms (CF7) — Bootstrap-like stacked controls on the Ledger &
   Harbor palette: block-width inputs, 1px rule border, amber focus ring,
   ink-fill submit matching the theme's primary button. */
.wpcf7 form p {
	margin: 0 0 1rem;
}

.wpcf7 label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
	box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	padding: 0.55rem 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
}

.wpcf7 .wpcf7-submit {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--ink, #0F2B35);
	color: var(--wp--preset--color--base, #FFFFFF);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
	background: var(--wp--preset--color--ink-hover, #14424F);
	color: var(--wp--preset--color--base, #FFFFFF);
}

.wpcf7 .wpcf7-submit:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Bootstrap-like invalid state (CF7 `.wpcf7-not-valid` + alert tip). */
.wpcf7 .wpcf7-not-valid {
	border-color: #b3261e;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
	color: #b3261e;
}

.wpcf7 select {
	display: block;
	width: 100%;
	padding: 0.55rem 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

/* Group labels ("Paslaugos") stay bold; the per-item labels CF7 generates
   for checkboxes / acceptance render as regular inline field text. */
.wpcf7 .wpcf7-checkbox label,
.wpcf7 .wpcf7-acceptance label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

/* CF7 wraps [acceptance] in a `display: block` form-control-wrap, which
   pushes the trailing label text onto its own line. Flatten the wrap into
   inline content when the wrap contains an acceptance, so the checkbox and
   the inline link label stay on the same row. */
.wpcf7 form p:has(> .wpcf7-form-control-wrap > .wpcf7-acceptance) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	margin: 0 0 1rem;
}

.wpcf7 form p:has(> .wpcf7-form-control-wrap > .wpcf7-acceptance)
	> .wpcf7-form-control-wrap {
	display: inline-flex;
	align-items: center;
}

.wpcf7 form p:has(> .wpcf7-form-control-wrap > .wpcf7-acceptance)
	.wpcf7-list-item {
	display: inline-flex;
	align-items: center;
}

.wpcf7 input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--ink);
}

/* Feature icons in band-features — pick up the amber accent via currentColor. */
.vat-feature-icon {
	color: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Aktualijos — ledger-style announcement list: rows separated by hairline
   rules, date in mono accent, muted teaser text. */
.vat-news-list {
	list-style: none;
}
.vat-news-list > li:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-block-end: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}
.vat-news-list .wp-block-post-date {
	font-family: var(--wp--preset--font-family--mono);
}
.vat-news-list .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--20);
}
.vat-news-list .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-soft);
}
.vat-news-list .wp-block-post-excerpt__more-text {
	display: none;
}