/*
 * Author: Tobalt — https://tobalt.lt
 * Tandemum-specific overrides layered on top of Sana's theme.css.
 * Loaded after theme.css so these rules win on equal specificity.
 */

/* Form button reset — Sana's .button is tuned for <a>; browser default <button> border/padding
 * was clipping the label to "Išsi" inside the rounded pill. */
.theme-light .contact-form button.button,
.theme-light form button.button {
	border: 0;
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
}

/* Contact form input normalization so fields match Sana's input style on light bg. */
.theme-light .contact-form input,
.theme-light .contact-form textarea {
	width: 100%;
	margin-bottom: 1rem;
	padding: 14px 18px;
	border: 1px solid #d9dbe0;
	border-radius: 8px;
	background: #fff;
	color: #181a1c;
	font: inherit;
}
.theme-light .contact-form input:focus,
.theme-light .contact-form textarea:focus {
	outline: 0;
	border-color: #181a1c;
}
.theme-light .contact-form textarea {
	min-height: 140px;
	resize: vertical;
}
.theme-light .contact-form .submit-result span {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 0.9rem;
}
.theme-light .contact-form .submit-result #tandemum-contact-success {
	background: #e7f6ec;
	color: #1d6a34;
}
.theme-light .contact-form .submit-result #tandemum-contact-error {
	background: #fbe8e8;
	color: #8a1f1f;
}

/* Process-step wrapping — long Lithuanian titles broke across lines inside narrow col-lg-3.
 * Don't use hyphens:auto — browser splits Lithuanian words in confusing places (Paleidžia-me → "Paleidžiam" on one line then "optimizuo-jame" as "pti mizurjan"). */
.theme-light .order-box h3 {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: manual;
}

/* Hero checklist — our <ul> used Sana default list disc style which looked off. */
.theme-light .hero-checklist {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
}
.theme-light .hero-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

/* GMap iframe — make sure it fills the wrapper, don't inherit ::after overlays. */
.theme-light .gmap iframe {
	display: block;
	width: 100%;
}

/* Screen reader skip link visible on focus for a11y. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #181a1c;
	color: #fff;
	z-index: 100;
}

/* Section kickers use Sana's .title-heading everywhere; ensure consistent spacing
 * when block-head is reused inside different section wrappers. */
.theme-light .section-head .title-heading {
	margin-bottom: 0.75rem;
}

/* Sticky header background on scroll.
 * At top of page the header is transparent over the hero;
 * after ~60px scroll, a solid bg + shadow kicks in via JS toggling
 * `data-tdm-scrolled` on the .header element. */
.theme-light .header[data-tdm-sticky] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: background-color 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease;
	background-color: transparent;
}
.theme-light .header[data-tdm-sticky][data-tdm-scrolled] {
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.04);
}
/* Reserve layout space below the fixed header so content isn't pushed under it.
 * Sana's `.with-placeholder` modifier already implies an offset intention —
 * we just make it explicit at a concrete height. */
.theme-light .header.with-placeholder {
	--tdm-header-h: 88px;
}
.theme-light body:not(.no-header-offset) main#main-content {
	padding-top: calc(var(--tdm-header-h, 88px) + 1.5rem);
}
/* Home hero already reserves its own top padding via .section-lg; avoid double gap there. */
.theme-light .home main#main-content > .section-lg:first-child {
	padding-top: calc(var(--tdm-header-h, 88px) + 3rem);
}
@media (max-width: 991px) {
	.theme-light .header.with-placeholder { --tdm-header-h: 72px; }
}

/* ROI calculator block. */
.theme-light .roi-calc { display: grid; gap: 1.5rem; }
.theme-light .roi-calc .roi-field label { display: block; font-size: 0.95rem; margin-bottom: 0.5rem; }
.theme-light .roi-calc .roi-row { display: flex; align-items: center; gap: 1rem; }
.theme-light .roi-calc input[type="range"] { flex: 1; accent-color: #181a1c; }
.theme-light .roi-calc output {
	min-width: 3ch;
	padding: 0.2rem 0.7rem;
	background: #181a1c;
	color: #fff;
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.theme-light .roi-result { text-align: left; }

/* Trust stats — center the numeric column visually, prevent order/text overlap. */
.theme-light .order-box.align-items-center { flex-direction: column; text-align: center; }
.theme-light .order-box.align-items-center .order { margin-bottom: 0; }

/* Client strip — pill list, favicon + name. */
.theme-light .client-strip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 0;
	padding: 0;
}
.theme-light .client-strip-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #181a1c;
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color 150ms ease, transform 150ms ease;
}
.theme-light .client-strip-item:hover {
	border-color: #181a1c;
	transform: translateY(-1px);
}
.theme-light .client-strip-fav {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Booking widget. */
.theme-light .booking-slot {
	padding: 1rem 0.75rem;
	text-align: center;
	border-radius: 10px;
	transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.theme-light .booking-slot:hover {
	background: #181a1c;
	color: #fff;
	transform: translateY(-1px);
}
.theme-light .booking-slot:hover .text-muted { color: rgba(255,255,255,0.7) !important; }
.theme-light .booking-form input[type="text"],
.theme-light .booking-form input[type="email"],
.theme-light .booking-form textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid #d9dbe0;
	border-radius: 8px;
	background: #fff;
	margin-bottom: 0.75rem;
	font: inherit;
}
.theme-light .booking-form input:focus,
.theme-light .booking-form textarea:focus { outline: 0; border-color: #181a1c; }
.theme-light .booking-result .booking-ok {
	display: inline-block; padding: 10px 16px; border-radius: 8px;
	background: #e7f6ec; color: #1d6a34; font-size: 0.9rem;
}
.theme-light .booking-result .booking-err {
	display: inline-block; padding: 10px 16px; border-radius: 8px;
	background: #fbe8e8; color: #8a1f1f; font-size: 0.9rem;
}

/* ===================================================================
 * Mobile heading sizing fix — prevents H1 right-edge overflow at narrow viewports
 * Override theme.css responsive H1 sizes (4rem at small bp) which still overflow
 * Lithuanian long words at <480px viewport.
 * Added 2026-05-24 per pre-launch audit.
 * =================================================================== */
@media (max-width: 575.98px) {
  h1,
  .display-1,
  .display-2,
  .display-3,
  .display-4,
  .display-5,
  .display-6 {
    font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
  }
}

/* ===================================================================
 * Site-wide polish (2026-05-25):
 *   A. .order-box text cutoff fix (long LT titles)
 *   B. Header: scroll-shrink + glassmorphism + hover underlines + active state
 *   C. Footer: link hovers + grid spacing
 * Companion JS: assets/js/tandemum.js (is-scrolled body toggle)
 * =================================================================== */

/* ---- A. ORDER-BOX TEXT CUTOFF FIX (v2 2026-05-25) ------------------- */
/* Sana .order-box defaults to overflow:hidden + can be h-100. Long LT
 * heading titles ('Skaičiuokite kompensacijas pagal nustatytą tvarką')
 * were getting visually clipped. ALSO original Sana flex-row layout
 * squeezed text column in 4-col card grids (number took ~50% width,
 * leaving ~100px for text). Solution: flex-column always (number on top,
 * text below) — works at any card width, matches editorial vertical rhythm. */
.order-box {
	overflow: visible !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 0.875rem;
}
.h-100 > .order-box,
.order-box.h-100 {
	min-height: 100%;
}
.order-box .order {
	flex: 0 0 auto;
	width: auto !important;
	min-width: 0 !important;
}
/* Targets BOTH <h2> (older Sana markup) and <span.display-4> (process_steps block) */
.order-box .order h2,
.order-box .order .stroke-text,
.order-box .order .display-4 {
	font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
	line-height: 1 !important;
	margin: 0 !important;
	display: block;
}
.order-box > div:last-child {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0; /* allow shrink for word-wrap */
}
.order-box h3 {
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	word-break: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.order-box p {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
	.order-box .order h2,
	.order-box .order .stroke-text,
	.order-box .order .display-4 {
		font-size: 2.25rem !important;
	}
}

/* ---- B. HEADER POLISH ---------------------------------------------- */
.header {
	transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
				background 0.3s ease,
				box-shadow 0.3s ease,
				backdrop-filter 0.3s ease;
}
/* Existing theme rule already handles bg + backdrop-blur + shadow on scroll.
 * Here we just shrink padding + logo size for compact scroll-state. */
.header[data-tdm-scrolled] {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.header[data-tdm-scrolled] .header-logo h2 {
	font-size: 1.125rem;
}
.header-logo h2 {
	transition: font-size 0.3s ease;
}

/* Hover underline animation on nav links */
.header-menu .nav-link {
	position: relative;
	transition: color 0.2s ease;
}
.header-menu .nav-link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 0;
	height: 2px;
	background: #ff7582;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
				left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-menu .nav-link:hover::after,
.header-menu .current-menu-item > .nav-link::after,
.header-menu .current-menu-parent > .nav-link::after,
.header-menu .current-menu-ancestor > .nav-link::after {
	width: calc(100% - 2rem);
	left: 1rem;
}
.header-menu .current-menu-item > .nav-link {
	color: #181a1c;
	font-weight: 600;
}

/* ---- C. FOOTER POLISH ---------------------------------------------- */
footer {
	font-family: Open Sans, sans-serif;
}
footer .section-sm {
	padding: 4rem 0;
}
footer a:not(.button) {
	transition: color 0.2s ease, opacity 0.2s ease;
	position: relative;
}
footer a:not(.button):hover {
	color: #ff7582;
}
footer h3 a {
	display: inline-block;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, color 0.2s ease;
}
footer h3 a:hover {
	border-bottom-color: #ff7582;
}
footer .list-inline-dot a {
	color: #4a4b4d;
	font-size: 0.875rem;
	transition: color 0.2s ease;
}
footer .list-inline-dot a:hover {
	color: #181a1c;
}
footer .sm-heading {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #828385;
	margin-bottom: 0.5rem;
}

/* About-split placeholder — gradient SVG block when block_image is empty */
.about-split-placeholder {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(24, 26, 28, 0.08);
}
.about-split-placeholder svg { display: block; width: 100%; height: auto; }

/* ===================================================================
 * Portfolio grid Swiper carousel (2026-05-25)
 * Used by template-parts/blocks/portfolio_grid.php on /darbai + homepage.
 * Shows 3 cards desktop / 2 tablet / 1.15 mobile (peek of next card).
 * =================================================================== */
.tandemum-portfolio-swiper-wrap {
	position: relative;
	padding: 0 0 3.5rem;
}
.tandemum-portfolio-swiper {
	overflow: visible;
}
.tandemum-portfolio-swiper .swiper-wrapper { align-items: stretch; }
.tandemum-portfolio-swiper .swiper-slide { height: auto; }
.tdm-pg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tdm-pg-card:hover { color: inherit; text-decoration: none; transform: translateY(-4px); }
.tdm-pg-card__cover {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	background: #f1f5f9;
	margin-bottom: 1.25rem;
}
.tdm-pg-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tdm-pg-card:hover .tdm-pg-card__cover img { transform: scale(1.04); }
.tdm-pg-card__title {
	font-family: Outfit, sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #181a1c;
	margin: 0 0 0.5rem;
	text-wrap: balance;
}
.tdm-pg-card__tagline {
	font-family: Open Sans, sans-serif;
	font-size: 0.9375rem;
	color: #4a4b4d;
	line-height: 1.5;
	margin: 0 0 0.625rem;
}
.tdm-pg-card__meta {
	list-style: none;
	padding: 0;
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.875rem;
	font-family: Open Sans, sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #828385;
}
.tdm-pg-card__meta li { position: relative; }
.tdm-pg-card__meta li + li::before {
	content: '·';
	position: absolute;
	left: -0.625rem;
	color: #d9dbe0;
}

/* Pagination dots */
.tdm-pg-pagination {
	position: static !important;
	margin-top: 2rem;
	text-align: center;
}
.tdm-pg-pagination .swiper-pagination-bullet {
	background: #d9dbe0;
	opacity: 1;
	width: 8px;
	height: 8px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.tdm-pg-pagination .swiper-pagination-bullet-active {
	background: #ff7582;
	transform: scale(1.25);
}

/* Navigation arrows */
.tdm-pg-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: #181a1c;
	border: 1px solid #d9dbe0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(24, 26, 28, 0.08);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
.tdm-pg-nav:hover { background: #181a1c; color: #fff; transform: translateY(-50%) scale(1.05); }
.tdm-pg-nav.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
.tdm-pg-nav--prev { left: -22px; }
.tdm-pg-nav--next { right: -22px; }

@media (max-width: 991.98px) {
	.tdm-pg-nav { display: none; } /* mobile/tablet — swipe gesture only, no arrows clutter */
}

/* ===================================================================
 * Mobile section padding bump (2026-05-25)
 * Default Sana .section-lg mobile padding (70px 0) feels tight when
 * cards stack vertically. Add +0.5rem inner card padding for breathing.
 * =================================================================== */
@media (max-width: 767.98px) {
	.section-lg { padding: 56px 0 !important; }
	.section { padding: 40px 0 !important; }
	.client-box,
	.order-box { padding: 24px !important; }
	/* Stats card inner spacing on mobile */
	.section .order-box .order h2,
	.section-lg .order-box .order h2 { margin-bottom: 0.5rem !important; }
	/* Reduce excessive bottom space on hero sections */
	.editorial-hero { padding: 3rem 0 1.5rem !important; }
	/* Tighten the bottom-most container padding so footer transition is cleaner */
	footer .section-sm { padding: 2.5rem 0 !important; }
}

/* Contact info — phone + email icon links (click-to-call/mail visual cue on desktop) */
.contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-link i {
	font-size: 0.85em;
	opacity: 0.7;
	color: #ff7582;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-link:hover {
	color: #ff7582;
}
.contact-link:hover i {
	opacity: 1;
	transform: translateY(-1px);
}