/**
 * Tando theme — final-polish overrides.
 * Author: Tobalt — https://tobalt.lt
 *
 * Enqueued LAST (after style.css / tando-main), so these rules win without
 * editing the vendor stylesheet directly. Fixes:
 *  1) Hero (.main-slider) heading/subtext/CTA must stay visible regardless
 *     of the Owl Carousel `.active` class state (single-slide hero).
 *  2) Header logo fallback is a text wordmark ("Tando"), not the vendor's
 *     "200 X 70" placeholder image.
 *  7) Projects section card titles/excerpts visible by default, not only
 *     on hover (vendor ships .overlay-box hidden until :hover).
 */

/* --- 1) Hero content: always visible, no dependency on carousel .active --- */
.main-slider h1,
.main-slider .text,
.main-slider .btns-box,
.main-slider .content-boxed .content {
	opacity: 1 !important;
	transform: none !important;
}

/* Belt-and-suspenders legibility: heading/subtext stay white (they sit on
   the brand-color circle, .content-boxed .inner-box, which already provides
   contrast) and the CTA button keeps its own high-contrast styling. */
.main-slider h1,
.main-slider .text {
	color: var(--white-color);
}

.main-slider .theme-btn {
	opacity: 1 !important;
	visibility: visible !important;
}

/* --- 1b) Hero content: never allowed to exceed the viewport on mobile ---
   Root cause: `.content-boxed .inner-box` is a fixed 830px circle
   (overflow:hidden) and `.content` has max-width:700px, so on phones the
   text lays out at 700px inside a clipped circle and gets chopped at the
   viewport edge — worsened by the hero H1/subtext momentarily rendering in
   a font-swap fallback font before the custom Archivo webfont
   (`font-display:swap`) loads, whose metrics can size wider than the fixed
   heading. Fix: below 767px turn the circle into a full-width block,
   constrain `.content` to 100%, and clamp the heading/subtext sizes +
   wrapping so they never overflow in either font. Desktop circle is
   untouched. */
@media only screen and (max-width: 767px) {
	.main-slider .content-boxed .inner-box {
		width: 100% !important;
		height: auto !important;
		border-radius: 18px !important;
		display: block !important;
		padding: 44px 24px !important;
		overflow: visible !important;
	}

	.main-slider .content-boxed .content {
		max-width: 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.main-slider h1,
	.main-slider .text {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.main-slider h1 {
		font-size: 30px !important;
		line-height: 38px !important;
	}

	.main-slider .text {
		font-size: 16px !important;
		line-height: 26px !important;
	}
}

@media only screen and (max-width: 480px) {
	.main-slider .content-boxed .inner-box { padding: 34px 20px !important; }
	.main-slider h1 { font-size: 25px !important; line-height: 32px !important; }
}

/* --- 1c) wow.js entrance-animation gating: same class of JS-timing bug as
   the hero above. wow.js sets inline `visibility:hidden` on `.wow` elements
   until it scroll-detects them (setInterval poll, live in-viewport check)
   and then animates them in with an animate.css opacity keyframe. If that
   poll/scroll timing doesn't fire the way the vendor demo expected (rapid
   scroll, `prefers-reduced-motion`, JS delay, etc.) the section-body copy
   below the hero — the two "kryptys" blocks — is left invisible/near-
   invisible. Force it reliably visible; the entrance animation is cosmetic,
   the content is not. */
.wow {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

/* --- 1d) Section body-copy contrast: `--color-four` (the vendor's default
   `.text, p` color, rgb(136,134,134) ≈ #888686) is a genuine WCAG AA
   failure on a white background (~3.6:1, needs 4.5:1) — this is the
   persistent cause of the faint "kryptys" body text even once wow.js has
   fully settled, not just an animation artifact. Darken sitewide (this
   variable is only ever used as a text `color`, never a background/border —
   confirmed via CSS audit) to an accessible neutral gray (~7:1). */
:root {
	--color-four: #595959;
	--color-four-rgb: 89, 89, 89;
}

/* --- 1e) CTA section heading swash vs. mobile h3 size (Task 5, design-fidelity) ---
   Vendor's `.cta-section .title h3:before` draws a decorative underline swash at a
   fixed `bottom:10px; height:9px` offset from the h3 box's bottom edge. That reads fine
   at the desktop h3 size (36px), but responsive.css shrinks h3 to 30px under 1140px —
   the same fixed pixel offset then lands mid-glyph instead of under the text, rendering
   as a strikethrough through the CTA heading. Cosmetic-only element (bearing no content),
   so simplest safe fix is to drop it below that breakpoint rather than rescale it. First
   hit on this component was Task 5 (added to page-sprendimo-detale.php/page-magento.php),
   but it's the same class used by the front page's own CTA, so this fixes both. */
@media only screen and (max-width: 1140px) {
	.cta-section .title h3:before {
		display: none;
	}
}

/* --color-four is a text-only color, but one spot on the home page renders
   it on a dark teal CTA background instead of white/light — inheriting the
   default gray there was already broken (contrast ~1.7:1 with the vendor's
   original lighter gray) and got worse once darkened above. Match its
   sibling <h3>, which already correctly uses --white-color on this bg. */
.cta-section .title .text {
	color: var(--white-color);
	opacity: 0.9;
}

/* --- 2) Logo wordmark fallback (used when no WP custom logo is set) --- */
.tando-wordmark {
	display: inline-block;
	font-family: var(--font-family-Archivo), sans-serif;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: var(--main-color);
	line-height: 1;
	white-space: nowrap;
}

.header-lower .logo-box .tando-wordmark {
	font-size: 30px;
	padding: 10px 0;
}

.sticky-header .logo .tando-wordmark {
	font-size: 24px;
}

.mobile-menu .nav-logo .tando-wordmark {
	font-size: 26px;
}

/* --- 3) "Ką darome" section (template-parts/home/kadarome.php) ---
   The vendor's .information-section has no 4-block image grid (that layout
   only exists in this theme, replacing the vendor's duplicate "Free
   Consultation" form-column). Minimal card treatment: full-bleed brand-fill
   photo + bottom-left label on a dark gradient, no vendor precedent to reuse. */
.kadarome-blocks {
	margin-top: 40px;
}

.kadarome-block {
	margin-bottom: 30px;
}

.kadarome-block .inner-box {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.kadarome-block .inner-box::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60%;
	background-image: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), rgba( 0, 0, 0, 0 ) );
}

.kadarome-block .label {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 0 20px 20px;
	color: var( --white-color );
	font-weight: 600;
	font-family: var( --font-family-Archivo );
}

/* --- 4) "Priežiūros planai" cards (template-parts/home/planai.php) ---
   Vendor .price-box + .price-tab are designed as two separate fixed columns
   (shared feature list + stacked price rows); here each `planas` post needs
   its own self-contained card. Wrap both in one bordered card and highlight
   the isskirtas=true plan with the brand color, matching --main-color used
   sitewide (global.css). */
.planas-block {
	position: relative;
	height: 100%;
	padding: 34px 30px;
	border: 1px solid rgba( var( --color-two-rgb ), 0.1 );
	border-radius: 8px;
	box-shadow: 0px 10px 20px rgba( 0, 0, 0, 0.04 );
}

.planas-block.isskirtas {
	border: 2px solid var( --main-color );
	box-shadow: 0px 15px 30px rgba( var( --main-color-rgb ), 0.15 );
}

.planas-badge {
	position: absolute;
	top: -14px;
	right: 30px;
	background-color: var( --main-color );
	color: var( --white-color );
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 20px;
}

.planas-block .price-box {
	margin-bottom: 10px;
}

/* --- 5) Testimonial section background (template-parts/home/atsiliepimai.php) ---
   No stock photography per the design-fidelity brief — the vendor's inline
   background-image is intentionally omitted in the template part; supply a
   neutral brand-color gradient instead of a blank white section. */
.testimonial-section {
	background-image: linear-gradient( 135deg, #1f1f1f 0%, #3a2420 100% );
}

/* --- 6) News section (template-parts/home/naujienos.php) ---
   Vendor's .news-info-box relies on a fixed-width author-image to balance
   the flex row; the LT news copy has no fabricated author identity, so
   .news-info-box is narrower than the vendor intended. Rebalance the row. */
.news-block .inner-box {
	flex-wrap: wrap;
}

.news-block .news-info-box {
	flex: 0 0 auto;
}

.news-block .middle-content {
	flex: 1 1 55%;
	padding: 0 20px;
}

.news-block .read-more {
	flex: 0 0 auto;
	align-self: flex-end;
}

/* --- 7c) Service-detail "pavyzdys" blockquote (page-sprendimo-detale.php /
   page-magento.php, Task 5, design-fidelity) — `.pavyzdys` has no vendor precedent
   (not a Barnix class), so it fell back to the browser's default blockquote styling —
   noticeably smaller/plainer than the surrounding `.service-detail-section p` copy.
   Style it as an accent pull-quote so the "pavyzdys_tekstas" example line reads as
   an intentional callout, not a formatting accident. */
.service-detail-section .pavyzdys {
	margin: 30px 0;
	padding: 20px 25px;
	border-left: 4px solid var( --main-color );
	background-color: rgba( var( --main-color-rgb ), 0.05 );
	font-style: italic;
	font-size: var( --font-18 );
	line-height: 30px;
	color: var( --color-thirtyeight );
	font-family: var( --font-family-DMSans );
}

/* --- 7a) Service-detail feature image (page-sprendimo-detale.php / page-magento.php,
   Task 5, design-fidelity) — the reused Task 2 brand-fill assets (blokas-*.jpg) are
   portrait (600x800, sized for the home "Ką darome" 3:4 card grid); the vendor's
   `.service-detail-section .image img` has no fixed height (width:100% only), so at
   full page width a portrait image renders as an oversized wall of color before any
   text. Cap it to a landscape banner via object-fit so the same asset works in both
   places without generating a second image. */
.service-detail-section .image img {
	height: 420px;
	object-fit: cover;
}

@media only screen and (max-width: 767px) {
	.service-detail-section .image img {
		height: 220px;
	}
}

/* --- 7b) Kontaktai page (Task 5, design-fidelity) ---
   (a) `.rekvizitai` (page-kontaktai.php) has no vendor precedent — a plain bordered card,
   consistent with the sidebar `.info-block` cards stacked above it.
   (b) `.map-section .brand-fill-panel` replaces the demo's real Google-Maps iframe with a
   neutral generated visual (assets/images/blocks/kontaktu-panelis.jpg — non-cartographic,
   no roads/pins/labels) — same full-bleed label treatment as the home `.kadarome-block`. */
/* The vendor's `.contact-info-section .inner-container{margin-top:-150px}` intentionally
   pulls the whole row up to float the (tall, self-contained) `.info-block` cards over the
   page-title banner's bottom edge — that part looks right. But the form column now starts
   with plain intro text (no card/box), which has nothing to clear the pulled-up banner
   overlap and collides with the "Kontaktai" <h2> above it. Push the text column down by the
   same amount the row was pulled up, on all breakpoints (no vendor override exists at any
   width for `.inner-container` either). */
.kontaktai-form-col {
	padding-top: 150px;
}

@media only screen and (max-width: 767px) {
	.kontaktai-form-col {
		padding-top: 110px;
	}
}

.rekvizitai {
	position: relative;
	margin-top: 10px;
	padding: 20px 24px;
	border: 1px solid rgba( var( --color-two-rgb ), 0.1 );
	border-radius: 8px;
	color: var( --color-thirtyeight );
	font-size: var( --font-16 );
	line-height: 26px;
}

.map-section .brand-fill-panel {
	position: relative;
	height: 380px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.map-section .brand-fill-panel::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background-image: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0 ) );
}

.map-section .brand-fill-panel .label {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 24px;
	color: var( --white-color );
	font-weight: 600;
	font-size: var( --font-18 );
	font-family: var( --font-family-Archivo );
}

@media only screen and (max-width: 767px) {
	.map-section .brand-fill-panel {
		height: 260px;
	}
}

/* --- 7) Projects section overlay (template-parts/home/projektai.php) ---
   Vendor's .overlay-box ships hidden by default (transform: scale(0,1)) and
   only reveals the title+excerpt content on :hover — fine for a mouse, but it
   means the card's label never appears at all on touch/static views (no
   hover state). Force the overlay content visible by default; keep the
   vendor's hover-only image zoom (.inner-box:hover .image img) since that
   doesn't hide anything. The overlay's own dark-gradient ::before (top
   transparent → bottom black) already sits behind the bottom-anchored
   .content box, so white title/excerpt text stays legible without the
   hover-only reveal. */
.projects-section .project-block .overlay-box {
	opacity: 1 !important;
	transform: scale( 1, 1 ) !important;
}

/* --- 8) Kontaktai info-block content case (Task 6, full sweep must-fix) ---
   Vendor `.info-block .text{text-transform:capitalize}` (style.css) was written for
   short EN address/hours fragments in the original demo, but here `.text` also wraps
   the real email address (mailto link) and the "Kaip dirbame" LT sentence copy —
   CSS capitalize forces every word's first letter up, mangling `labas@tando.lt` into
   "Labas@Tando.Lt" and turning normal LT sentences into Title Case, which is wrong for
   Lithuanian body copy. The `.info-block h5` card LABELS ("Telefonas", "El. paštas")
   keep the vendor capitalize (harmless — already single/short capitalized words).
   Restore natural case for the value/content only. */
.info-block .text {
	text-transform: none;
}

/* --- 9) Priežiūros planai feature-list icon collision (Task 6, full sweep) ---
   Vendor `.price-list li:before{position:absolute;right:0}` (style.css) puts the
   checkmark glyph flush against the list item's right edge with no reserved
   padding on the `<li>` text — harmless for the demo's short EN feature phrases,
   but our LT feature lines (`template-parts/home/planai.php`, CPT `planas`
   `savybes` field) are long enough on 2 of 3 cards to run text under/behind the
   icon (e.g. "apsaugą", "mėn)", "dieną)", "telefonu" characters hidden behind
   the checkmark). Reserve right-hand space on the text so it can never collide. */
.price-list li {
	padding-right: 34px;
}