/* ============================================================================
   Solidum landing-page overrides  (managed by Claude Code)
   Loaded via mu-plugin solidum-landing-overrides.php on the FRONT PAGE ONLY.

   Update-safe: lives in wp-content/mu-plugins/, survives theme & plugin updates.
   Re-deploy: scp this file to the server, then `wp @solidum litespeed-purge all`,
   then prime (see SOLIDUM_CC_SETUP.md §3).

   ----------------------------------------------------------------------------
   CASCADE NOTES (why specific selectors / why !important is or isn't used)
   This sheet is enqueued at priority 9999, but #wp-custom-css (the ~40 KB
   Additional CSS) and Uncode's generated style-custom.css still emit LATER in
   wp_head. So every rule here is scoped to an ID (#page-header / #row-unique-2 /
   #row-unique-6) to out-specify the theme + Additional CSS.
   !important is used ONLY where a competitor declaration is itself !important or
   inline (the only cases specificity alone cannot win):
     • Hero CTAs  → beat style-custom.css `.style-dark .btn-default.btn-outline
                    { color/background/border …!important }`.
     • Brand strip (mobile) → beat #wp-custom-css `@media(max-width:959px)
                    .solidum-brandstrip{…!important}` + `img{max-width:60px!important}`.
     • Servisas   → beat an INLINE `background-position:center center` on .background-inner.
   Where the only competitors are non-!important (hero box-shadow; the whole
   desktop brand-strip block) the ID scope already wins, so no !important is used.

   Brand tokens are defined once in :root and every color is routed through them.
   ========================================================================== */

:root {
	--solidum-blue:       #0055ba;  /* logo wordmark + style-accent blue (reference) */
	--solidum-red:        #ff1d25;  /* logo "°" mark — standardized accent */
	--solidum-red-hover:  #d10f16;  /* darker shade for CTA hover */
	--solidum-white:      #fff;     /* CTA label/icon on the red fill */
}

/* ============================================================================
   1. HERO CTAs — "Plačiau" ghost buttons → solid red
   ----------------------------------------------------------------------------
   Scope: #page-header a.btn.btn-outline matches EXACTLY the 2 hero CTAs
   (verified: only 2 .btn-outline on the page). The white-on-red buttons
   elsewhere are .btn-default WITHOUT .btn-outline and stay untouched.
   Size/position unchanged (same padding / radius / 2px border, now red).

   !important REQUIRED on color/background/border: style-custom.css forces these
   on `.style-dark .btn-default.btn-outline` with !important (incl. a DARK text +
   white bg on hover we must override). box-shadow has no !important competitor,
   so it stays plain.
   ========================================================================== */

/* Rest state */
#page-header a.btn.btn-outline,
#page-header a.btn.btn-outline:link,
#page-header a.btn.btn-outline:visited {
	background-color: var(--solidum-red) !important;
	border-color:     var(--solidum-red) !important;
	color:            var(--solidum-white) !important;
	box-shadow:       none;
	transition:       background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Hover / focus — darker red, text stays white */
#page-header a.btn.btn-outline:hover,
#page-header a.btn.btn-outline:focus,
#page-header a.btn.btn-outline:focus-visible {
	background-color: var(--solidum-red-hover) !important;
	border-color:     var(--solidum-red-hover) !important;
	color:            var(--solidum-white) !important;
}

/* Keep label + icon white in every state (Uncode flips outline-button text on hover) */
#page-header a.btn.btn-outline .btn-icon,
#page-header a.btn.btn-outline span {
	color: var(--solidum-white) !important;
}

/* ============================================================================
   1b. HERO PHOTO OVERLAY — one uniform black scrim ON THE PHOTOS of BOTH panels
   ----------------------------------------------------------------------------
   Goal: dim ONLY the photos behind the white hero text, equally on both halves,
   so text is legible wherever it sits — WITHOUT dimming the text/buttons and
   WITHOUT any text glow. Replaces the old per-text text-shadow scrim (deleted).

   Layer used: Uncode renders, inside each column's .uncell, a .column-background
   (absolute) holding .background-inner (the photo) + .block-bg-overlay (the
   overlay), and a sibling .uncont (the text/buttons). The overlay already sits
   ABOVE the photo and BELOW .uncont — i.e. exactly the layer we want — so we
   simply normalise BOTH overlays to the same flat black. We do NOT touch .uncont,
   so text and buttons are never dimmed.

   Before: LEFT overlay = flat black @ inline opacity .5 (.style-color-jevc-bg);
   RIGHT overlay = a black→transparent GRADIENT @ inline opacity .6
   (.style-color-186264-bg) that is light at the top, where "Jaukiems namams"
   sits — the reason that heading was hard to read. We kill the gradient and set
   both to flat black at the SAME opacity (.5 — matches the left's existing look,
   so both halves are symmetric).

   CASCADE:
   • background-image:none / background-color:#000 → NO !important: the
     #page-header #row-unique-0 .block-bg-overlay scope (2 ids,1 class) already
     out-specifies Uncode's overlay color classes (1 class, not !important).
     Verified: gradient drops to none, color to black, with plain declarations.
   • opacity:.5 → !important REQUIRED: opacity is set INLINE on each overlay
     (style="opacity:.5" / ".6"); only !important beats inline. Verified the
     right panel (which also runs Uncode's zoom-out animation) settles to .5
     once the animation finishes (it transiently renders .6 mid-zoom — still
     legible, only darker).

   Measure with audit-contrast.mjs (hides hero text — incl. the .split-word-inner
   spans Uncode wraps headings in — then samples the real background luminance).
   ========================================================================== */
#page-header #row-unique-0 .block-bg-overlay {
	background-image: none;        /* drop the right panel's gradient */
	background-color: #000;        /* flat black on both panels */
	opacity: .5 !important;        /* uniform darkness; beats inline opacity .5/.6 */
}

/* ============================================================================
   2. BRAND STRIP — "Atstovaujami prekių ženklai" (5 partner logos, coral band)
   ----------------------------------------------------------------------------
   Scope: #row-unique-2 is the coral band's row (.style-accent-bg). The strip is
   NOT inside #page-header, so specificity is anchored on this row ID.
   Logo ASSETS are pre-balanced to a common optical box (cap-height = 30.4% of
   each canvas), so a single max-height equalises optical cap-height across all 5.

   Desktop: the ID scope out-specifies every (non-!important) #wp-custom-css
   competitor, so NO !important here. (At ≤959px the Additional CSS adds
   !important rules — those are beaten in section 2b below, which governs that
   range, so these desktop rules are safe even though they aren't media-scoped.)
   ========================================================================== */

/* 2a. Desktop / base — uniform cap-height, single centered row, even gaps.
   canvas 64px → cap ≈ 19.5px; the 5 logos total ≈ 924px and fit the ~1053px
   strip in one row with 28px gaps. flex:0 1 auto shrinks proportionally if tight. */
#row-unique-2 .solidum-brandstrip {
	display:         flex;
	flex-wrap:       nowrap;          /* one row on desktop */
	align-items:     center;          /* vertical centering */
	justify-content: center;          /* centered cluster, even gaps */
	gap:             28px;
	padding:         8px 0 0;
}
#row-unique-2 .solidum-brandstrip a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex:            0 1 auto;         /* natural width; shrink proportionally if tight */
	min-width:       0;
}
#row-unique-2 .solidum-brandstrip img {
	max-height: 64px;                 /* single canvas height → uniform optical cap */
	max-width:  100%;                 /* scale down with the anchor when shrinking */
	width:      auto;
	height:     auto;
	object-fit: contain;
	display:    block;
}

/* 2b. Mobile / tablet (≤959px) — the logos are very wide-aspect (Saunier ~4.75:1),
   so one uniform-height row would force ~6px caps. Instead ALLOW WRAP: at
   max-height 46px the DOM order wraps into two width-balanced rows
   (Saunier+inVENTer / Solarfocus+Jäspi+Heatpex) with EQUAL caps, and we reclaim
   the band's heavy side padding to give them room.
   !important REQUIRED here: #wp-custom-css emits competing !important rules in
   this same breakpoint (flex-wrap:nowrap!important; gap:8px!important;
   img{max-width:60px!important;width:100%!important}). */
@media (max-width: 959px) {
	#row-unique-2 .row.limit-width.row-parent {
		padding-left:  12px !important;
		padding-right: 12px !important;
	}
	#row-unique-2 .uncell.double-block-padding {
		padding-left:  0 !important;
		padding-right: 0 !important;
	}
	#row-unique-2 .solidum-brandstrip {
		flex-wrap:       wrap !important;   /* two rows so logos stay readable + even */
		justify-content: center !important;
		gap:             14px 12px !important;  /* row-gap col-gap */
		padding:         10px 0 6px !important;
	}
	#row-unique-2 .solidum-brandstrip a {
		flex:      0 0 auto !important;     /* natural width (no slot-stretching) */
		min-width: 0 !important;
	}
	#row-unique-2 .solidum-brandstrip img {
		max-height: 46px !important;        /* cap ≈ 14px; DOM-order wrap → 2 balanced rows */
		max-width:  100% !important;
		width:      auto !important;
		height:     auto !important;
		object-fit: contain !important;
	}
}

/* ============================================================================
   3. SERVISAS band portrait — keep the worker's head in frame
   ----------------------------------------------------------------------------
   Scope: #row-unique-6 .background-inner — the man02.jpg side image of the red
   "Servisas" / "PROFESIONALI ĮRANGOS PRIEŽIŪRA" band. The photo is a CSS
   background-image (NOT an <img>), so we tune background-position.

   The image box is a FIXED 421px height on desktop, so wider viewports flatten
   the box and `background-size:cover` crops harder vertically; the worker's face
   sits in the upper third, so default `center center` slices the top of his hard
   hat on wide desktops (≈1680px+) and tablet (~768px). Shifting the focal point
   to `center 25%` keeps the full head in frame (verified 390/1440/1920px; mobile
   is crop-insensitive, box AR ~1.56 ≈ image AR ~1.45, so it takes the same 25%).

   !important REQUIRED: background-position is set INLINE on .background-inner, and
   only !important beats an inline style. If Uncode renumbers the row id this rule
   safely no-ops (reverts to default).

   Written as the ALL-PERCENTAGE form `50% 25%` (not the keyword+percentage mix
   `center 25%`): unambiguous, X/Y order explicit, parses identically everywhere.
   ========================================================================== */
#row-unique-6 .background-inner {
	background-position: 50% 25% !important;
}
@media (max-width: 959px) {
	#row-unique-6 .background-inner {
		background-position: 50% 25% !important;
	}
}

/* ----------------------------------------------------------------------------
   3b. SERVISAS photo — Safari column-height collapse (THE real "pushed down in
   Safari" bug; verified in real Safari 26.5 + Playwright webkit/Safari-UA, 2026-06-18)
   ----------------------------------------------------------------------------
   Symptom: in Safari the worker's photo collapsed to a ~100px-tall strip (only a
   squished sliver of the face), while Chrome framed it at the full 420px. NOT a
   background-position problem — the position computed `50% 25%` correctly in BOTH
   engines. The PHOTO COLUMN'S HEIGHT collapsed, so `background-size:cover` over-
   scaled the image into a thin band ("pushed down / only top of head shows").

   Root cause: the band is a two-cell `display:table` row. The photo cell
   (`.wpb_column`, table-cell) is stretched to the row height (420px) by the text
   cell. Inside it the `.uncol` uses `height:100%` to fill the cell — but Safari
   refuses to resolve a percentage height against a `display:table-cell` parent
   (Chrome resolves it). So `.uncol`→`.uncoltable`→`.uncell` and the absolutely-
   positioned `.column-background`/`.background-inner` all collapse to ~100px.
   (Why the user's UA-spoof "fixed" it: Uncode's column-height JS is UA-gated —
   the Chrome path sets explicit heights that paper over the collapse; the Safari
   path doesn't. Spoofing Chrome took the JS path. The CSS bug is the real cause.)

   Fix: re-anchor the absolutely-positioned `.column-background` to the FULL-HEIGHT
   `.wpb_column` by making ONLY the photo column's table chain `position:static`
   (its nearest positioned ancestor then becomes `.wpb_column`, 420px, instead of
   the collapsed `.uncell`). Scoped to the first column (`:first-child`, the photo;
   the text column is `:nth-child(2)`/`.style-dark`) so the red text cell is
   untouched. Verified: webkit/Safari-UA innerH 100→421 @1440; Chrome 421→421 and
   both engines @390 stay 250 (mobile stacks → no table-cell, no bug, fix is a
   no-op there). Shots: shots/verify-{chromium,webkit}-*; real Safari before/after
   /tmp/safari-band-{BEFORE,scoped}.png. Probe: diag-verify-fix.mjs / diag-ua.mjs. */
#row-unique-6 .row-inner > .wpb_column:first-child .uncol,
#row-unique-6 .row-inner > .wpb_column:first-child .uncoltable,
#row-unique-6 .row-inner > .wpb_column:first-child .uncell {
	position: static !important;
}