/* sucheoko.cz — site-wide style overrides for ProElements widgets that don't expose
 * the right control in the editor (form submit alignment, etc.). */

/* Form submit button: right-align in Elementor's FLEX-wrap form layout.
 * `.elementor-form-fields-wrapper` is `display:flex; flex-wrap:wrap` with -12px side
 * margins (12px gutter on each child). After the 100%-wide textarea row, the submit
 * lands at the START of a new flex row. `margin-left: auto` inside flex pushes it
 * to the END (right). `flex-basis: auto` + remove the 20% width override so the
 * column collapses to the button's intrinsic width. */
.elementor-form .elementor-field-type-submit,
.elementor-form .e-form__buttons {
	margin-left: auto !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	width: auto !important;
	max-width: calc(100% - 24px) !important;  /* respect the 24px gutter */
}
.elementor-form .elementor-field-type-submit .elementor-button {
	white-space: nowrap;
}

/* Square corners on form fields (over-ride Elementor's default minor radius if any) */
.elementor-form .elementor-field {
	border-radius: 0 !important;
}

/* Article featured-image banner — must reach 1440 even though hello-elementor's
 * .site-main caps article content at 1140 (or less on small viewports). Break
 * out of the parent constraint via position-relative + translateX, capped at
 * 1440 wide, centered relative to viewport. Subtract 16px so a vertical
 * scrollbar doesn't trigger horizontal scroll. */
.so-article-banner {
	width: min(calc(100vw - 16px), 1440px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 0 32px;
	padding: 0;
	box-sizing: border-box;
}
.so-article-banner__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
}

/* Article body width — cap at 1024px so long text isn't a single full-width column
 * on widescreens. Scoped to `body.single-post` so only single articles get this;
 * pages and products keep their own layout widths. The featured-image banner
 * (figure.so-article-banner) is a sibling of .page-content, not a child, so the
 * banner stays full-width (the visual anchor). The auto-injected back-to-articles
 * button + contact-form template appended via the_content filter also live inside
 * .page-content, so they inherit the same 1024 constraint — no separate rule needed. */
body.single-post .page-content {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

/* Auto-rendered article header (themes/sucheoko/template-parts/single.php).
 * Title + Czech-formatted date + Groups chip(s), read from WP canonical data —
 * webmaster never recreates these by hand in Elementor. Matches the visual
 * style the existing 6 articles had when those widgets lived inside Elementor. */
.so-article-header {
	max-width: 1024px;
	margin: 24px auto 16px;
	padding: 0 16px;
	text-align: center;
	box-sizing: border-box;
}
.so-article-header__title {
	font-family: Jost, -apple-system, sans-serif;
	font-weight: 700;            /* bold */
	font-size: 32px;
	line-height: 1.25;
	color: #3A3A3A;              /* canonical "Darkest Grey" */
	margin: 0 0 8px;
}
.so-article-header__date {
	font-family: Jost, -apple-system, sans-serif;
	font-weight: 600;            /* semibold */
	font-size: 14px;
	color: #3A3A3A;
	margin: 0 0 12px;
}
.so-article-header__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.so-article-header__chip {
	display: inline-block;
	padding: 6px 14px;
	background: #03838C;
	color: #FFFFFF;
	font-family: Jost, -apple-system, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	border-radius: 16px;
	text-decoration: none;
	text-transform: lowercase;
	transition: background-color 0.2s ease;
}
.so-article-header__chip:hover,
.so-article-header__chip:focus {
	background: #57C0D8;
	color: #FFFFFF;
}

/* ── Article body vertical rhythm ───────────────────────────────────────────
 * Article bodies are a stack of Elementor text-editor widgets, each holding one
 * section's HTML (h2/h3 + paragraphs + lists). Elementor + hello-elementor ship
 * almost no margins on these tags, so a lead line ("Jak na to:") sits flush
 * against its list and bullets crowd together (the reported defect). This block
 * restores a deliberate reading rhythm — ONE rule governs every article (the 5
 * originals + any new ones) without touching a single byte of _elementor_data,
 * so it can't clobber a webmaster's Elementor edits and applies to future
 * articles automatically. All gaps divisible by 4 per project convention.
 *
 * Scoped to .elementor-widget-text-editor so the auto-appended back-to-articles
 * button and contact form (also inside .page-content) are left alone. */
body.single-post .page-content .elementor-widget-text-editor {
	font-family: Jost, -apple-system, sans-serif;
	color: #3A3A3A;
}
body.single-post .page-content .elementor-widget-text-editor p {
	margin: 0 0 16px;
	line-height: 1.7;
}
body.single-post .page-content .elementor-widget-text-editor h2 {
	margin: 24px 0 12px;
	line-height: 1.3;
}
body.single-post .page-content .elementor-widget-text-editor h3 {
	margin: 24px 0 8px;
	line-height: 1.35;
}
body.single-post .page-content .elementor-widget-text-editor h4 {
	margin: 20px 0 8px;
	line-height: 1.4;
}
/* Lists keep their inline 24px indent; add block spacing + per-item breathing. */
body.single-post .page-content .elementor-widget-text-editor ul,
body.single-post .page-content .elementor-widget-text-editor ol {
	margin: 0 0 16px;
	line-height: 1.7;
}
body.single-post .page-content .elementor-widget-text-editor li {
	margin: 0 0 8px;
}
body.single-post .page-content .elementor-widget-text-editor li:last-child {
	margin-bottom: 0;
}
/* A lead line that introduces a list ("Jak na to:") hugs its list a touch
 * tighter than a full paragraph gap — but never sits flush (the defect). */
body.single-post .page-content .elementor-widget-text-editor p:has(> strong:only-child) {
	margin-bottom: 8px;
}
/* Inline images (pollen calendar) + self-hosted video need breathing room. */
body.single-post .page-content .elementor-widget-text-editor img,
body.single-post .page-content .elementor-widget-text-editor video {
	margin: 16px 0;
	max-width: 100%;
	height: auto;
}
/* Don't let the first element's top margin push the body off the header. */
body.single-post .page-content .elementor-widget-text-editor > .elementor-widget-container > *:first-child {
	margin-top: 0;
}
/* Article body links — brand teal, not the theme's default red/magenta. Scoped to
 * text-editor so the teal-on-white CTA buttons (back-to-articles, form submit)
 * keep their own colors. */
body.single-post .page-content .elementor-widget-text-editor a {
	color: #03838C;
}
body.single-post .page-content .elementor-widget-text-editor a:hover {
	color: #57C0D8;
}

/* ── Article forms (Test suchého oka + contact form) ────────────────────────
 * Elementor forms ship near-zero spacing, so question labels sit flush on their
 * radio options, options crowd together, and questions run into each other (the
 * reported "too cramped"). Restore breathing room. Scoped to article context. */
body.single-post .page-content .elementor-form .elementor-field-group {
	margin-bottom: 24px;
}
body.single-post .page-content .elementor-form .elementor-field-group > .elementor-field-label {
	margin-bottom: 12px;
	font-weight: 600;
	line-height: 1.4;
}
/* Radio/checkbox option lists — vertical breathing room + aligned control/label. */
body.single-post .page-content .elementor-form .elementor-field-subgroup .elementor-field-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
body.single-post .page-content .elementor-form .elementor-field-subgroup .elementor-field-option:last-child {
	margin-bottom: 0;
}
body.single-post .page-content .elementor-form .elementor-field-subgroup .elementor-field-option input {
	margin: 0;
}
/* Text inputs a touch taller for comfort. */
body.single-post .page-content .elementor-form .elementor-field-group input[type="text"],
body.single-post .page-content .elementor-form .elementor-field-group input[type="email"],
body.single-post .page-content .elementor-form .elementor-field-group textarea {
	padding: 12px 14px;
}

/* Poradna article cards — slide-in animation triggered by the IntersectionObserver
 * in sucheoko-filter.js (adds .so-anim-visible when each card enters viewport).
 * Image slides in from the left, title/date/excerpt block slides in from the right.
 *
 * The Posts widget renders cards as a single Elementor widget, so we can't use
 * the per-element entrance animation control. CSS + JS observer is the way. */
.so-articles-poradna .elementor-post {
	overflow: hidden;  /* contains the off-screen transforms during animation */
}
.so-articles-poradna .elementor-post .elementor-post__thumbnail__link,
.so-articles-poradna .elementor-post .elementor-post__text {
	opacity: 0;
	transition:
		opacity   650ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--so-anim-delay, 0ms),
		transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--so-anim-delay, 0ms);
	will-change: transform, opacity;
}
.so-articles-poradna .elementor-post .elementor-post__thumbnail__link {
	transform: translateX(-40px);
}
.so-articles-poradna .elementor-post .elementor-post__text {
	transform: translateX(40px);
}
.so-articles-poradna .elementor-post.so-anim-visible .elementor-post__thumbnail__link,
.so-articles-poradna .elementor-post.so-anim-visible .elementor-post__text {
	opacity: 1;
	transform: translateX(0);
}
/* Respect users who've opted out of motion. Above-fold cards are visible
 * immediately at their final position; no slide. */
@media (prefers-reduced-motion: reduce) {
	.so-articles-poradna .elementor-post .elementor-post__thumbnail__link,
	.so-articles-poradna .elementor-post .elementor-post__text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* HP product carousel — Swiper renders a `swiper-wrapper` element whose intrinsic
 * width is the SUM of all slide widths (e.g., 10 × 249px ≈ 2490px). ProElements
 * doesn't enforce overflow clipping on the widget container, so this width leaks
 * into document scrollWidth and produces a horizontal scrollbar on every page that
 * embeds the carousel. Clip overflow on the .swiper element (Swiper's natural
 * track), and keep the widget itself overflow-visible so the gradient overlays
 * below can bleed past the widget edges.
 *
 * Both class names cover ProElements <4.0 (nested-carousel) and ≥4.0 (n-carousel).
 */
.elementor-widget-nested-carousel .swiper,
.elementor-widget-n-carousel .swiper {
	overflow: hidden;
}

/* FOUC mask — before Swiper runs, EWWW's WebP rewriter swaps the 1px placeholder
 * gif for the real product image at its intrinsic size (~800px wide). The result
 * is a row of giant cropped product photos that flashes for ~200ms until Swiper
 * constrains each slide to its computed slidesPerView width. Hide the entire
 * swiper track until Swiper adds its `swiper-initialized` class, and reserve the
 * height so the section doesn't jump on reveal. Final height ≈ 248px (slide) +
 * ~32px (bullet pagination row); 296px keeps room for both. */
.elementor-widget-nested-carousel .swiper,
.elementor-widget-n-carousel .swiper {
	min-height: 296px;
}
.elementor-widget-nested-carousel .swiper:not(.swiper-initialized) .swiper-wrapper,
.elementor-widget-n-carousel .swiper:not(.swiper-initialized) .swiper-wrapper {
	visibility: hidden;
}

/* 3D-scale effect — handled by assets/js/carousel-3d.js, which writes inline
 * transforms during the `setTranslate` / `progress` Swiper events. We rely on
 * inline styles (no CSS rule here) so the scale value can be continuous rather
 * than stepped by class name. transform-origin centered so cards shrink toward
 * the carousel midline; pointer-events stay normal so flip-box hover works. */
.elementor-widget-nested-carousel .swiper-slide,
.elementor-widget-n-carousel .swiper-slide {
	transform-origin: center center;
	will-change: transform;
}

/* Edge gradient overlays — products fade from white at the carousel edges
 * instead of being chopped by a hard line. Anchored 40px OUTSIDE the widget
 * so the gradient is "a bit wider than the container".
 *
 * Only rendered above the container's boxed max-width (1376 px). At narrower
 * viewports the carousel fills the screen with no margin, so an edge fade
 * has nowhere to live — hiding it avoids covering the outermost product.
 *
 * z-index must sit above ANY in-carousel element including activated flip-boxes
 * (which lift their stacking context on hover and otherwise paint their 40px
 * box-shadow over the gradient — producing the "double shadow" artifact at the
 * carousel edge). 50 clears every Elementor widget hover state we use; nothing
 * in this site stacks above it inside the carousel.
 *
 * pointer-events: none so the gradient doesn't intercept hover/click on the
 * outermost slides — flip-boxes still trigger fine since the cursor passes
 * straight through.
 */
.elementor-widget-nested-carousel,
.elementor-widget-n-carousel {
	position: relative;
}
@media (min-width: 1376px) {
	.elementor-widget-nested-carousel::before,
	.elementor-widget-nested-carousel::after,
	.elementor-widget-n-carousel::before,
	.elementor-widget-n-carousel::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 120px;
		z-index: 50;
		pointer-events: none;
	}
	.elementor-widget-nested-carousel::before,
	.elementor-widget-n-carousel::before {
		left: -40px;
		background: linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
		margin-bottom: -40px;
		padding-top: 40px;
	}
	.elementor-widget-nested-carousel::after,
	.elementor-widget-n-carousel::after {
		right: -40px;
		background: linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
		margin-bottom: -40px;
		padding-top: 40px;
	}
}

/* Native Elementor Posts widget — whole-card click handled by sucheoko-filter.js
 * which promotes the title link to a `data-card-link` attribute and routes
 * non-link clicks to it. Just need pointer + hover color here. */
.elementor-widget-posts .elementor-post {
	cursor: pointer;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__title a {
	color: #03838C;
}

/* Filter hide must override our per-card display rules (which have !important
 * for the Poradna row layout). Specificity bumped to beat
 * `.so-articles-poradna.elementor-widget-posts .elementor-post { display:flex !important }`
 * which appears LATER in the file (equal specificity › later wins). */
.so-articles-poradna.elementor-widget-posts .elementor-post.is-hidden,
.so-articles-hp.elementor-widget-posts .elementor-post.is-hidden,
.elementor-widget-posts .elementor-post.is-hidden {
	display: none !important;
}

/* Load-more "Další" button styling — match brand pill button (teal, white text). */
.so-articles-poradna .elementor-button-wrapper .elementor-button {
	background-color: #03838C !important;
	color: #FFFFFF !important;
	font-family: "Jost", sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	padding: 14px 32px !important;
	border-radius: 16px !important;
	text-transform: none !important;
	border: 0 !important;
}
.so-articles-poradna .elementor-button-wrapper .elementor-button:hover {
	background-color: #57C0D8 !important;
}
.so-articles-poradna .elementor-button-wrapper {
	text-align: center;
	margin-top: 32px;
}

/* HP article cards (so-articles-hp) — image-top, 3 columns, large hero image,
 * Jost typography to match brand. */
.so-articles-hp .elementor-post__thumbnail {
	border-radius: 0;
	overflow: hidden;
}
.so-articles-hp .elementor-post__thumbnail__link {
	margin-bottom: 16px;
}
.so-articles-hp .elementor-post__meta-data {
	font-family: "Jost", sans-serif;
	font-size: 13px;
	color: #7EC39E;
	margin-bottom: 8px;
}
.so-articles-hp .elementor-post__title {
	margin: 0 0 16px !important;
}
.so-articles-hp .elementor-post__title,
.so-articles-hp .elementor-post__title a {
	font-family: "Jost", sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	color: #3A3A3A !important;
	text-decoration: none !important;
}
.so-articles-hp .elementor-post__excerpt p {
	font-family: "Jost", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #3A3A3A;
	margin: 0;
}

/* Poradna article cards (so-articles-poradna) — image-LEFT row layout,
 * single column, stacked rows. Match Figma: no delimiter lines, just
 * whitespace between rows. */
.so-articles-poradna.elementor-widget-posts .elementor-post {
	display: flex !important;
	flex-direction: row;
	gap: 32px;
	align-items: flex-start;
	padding: 0;
}
.so-articles-poradna.elementor-widget-posts .elementor-post__thumbnail__link {
	flex: 0 0 42%;
	margin: 0;
	max-width: 42%;
	width: 42% !important;
	overflow: hidden;
	display: block;
}
.so-articles-poradna .elementor-post__thumbnail {
	border-radius: 0;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.so-articles-poradna .elementor-post__thumbnail img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	display: block;
}
.so-articles-poradna .elementor-post__text {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 0;            /* per-element margins below give the Figma-spec gaps */
}
/* Figma order: title › date › excerpt. CSS flex order overrides default
 * Elementor render order (which has meta BEFORE title). */
.so-articles-poradna .elementor-post__title       { order: 1; margin: 0 0 16px !important; }
.so-articles-poradna .elementor-post__meta-data   { order: 2; margin: 0 0 16px !important; }
.so-articles-poradna .elementor-post__excerpt     { order: 3; margin: 0 !important; }
.so-articles-poradna .elementor-post__meta-data,
.so-articles-poradna .elementor-post-date {
	font-family: "Jost", sans-serif;
	font-size: 14px;
	color: #3A3A3A;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.so-articles-poradna .elementor-post__title,
.so-articles-poradna .elementor-post__title a {
	font-family: "Jost", sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1.3 !important;
	color: #3A3A3A !important;
	text-decoration: none !important;
}
.so-articles-poradna .elementor-post:hover .elementor-post__title a {
	color: #03838C !important;
}
.so-articles-poradna .elementor-post__excerpt p {
	font-family: "Jost", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	color: #3A3A3A;
	margin: 0;
}
/* Mobile: stack vertically again */
@media (max-width: 767px) {
	.so-articles-poradna .elementor-post {
		flex-direction: column;
		gap: 16px;
	}
	.so-articles-poradna .elementor-post__thumbnail__link {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

/* Safety net for horizontal scrollbar: clip document-level overflow on x.
 * Used `clip` (not `hidden`) so any sticky/affix elements continue to work
 * (`overflow: hidden` creates a new containing block and breaks `position: sticky`).
 * Catches stragglers like the header nav-menu's `margin-right: -48px` that
 * pushes its right edge 16px past the viewport. */
html, body {
	overflow-x: clip;
}