/*
 * Pflanzenschützer — Ernesto Child Theme
 * Economiesuisse-inspired design system
 */

:root {
  /* Showcase & news polygon colour — mirrors --color-primary set in Customizer */
	--ps-accent: var(--color-primary);
}


/* ============================================================
   3. GLOBAL RESETS / SITE TWEAKS
   ============================================================ */

body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* Crisp sticky header — always white */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border-light, #eee);
}

/* Remove default .container padding when sections go full-bleed */
#content {
	overflow-x: hidden;
}

/*
 * Front page only — parent theme's critical.css sets:
 *   .site-content { padding: var(--space-xl) 0; }   → gap below </header>
 *   .site-main     { min-height: 50vh; }             → gap above .hp-portfolio
 * Both exist so short single-post/page content doesn't look cramped, but
 * front-page.php has a hero slider + full content, so neither is needed.
 * Scoped to body.home (WordPress's built-in front-page body class) instead
 * of editing the parent theme file directly.
 */
body.home #content.site-content {
	padding: 0;
}
body.home .site-main {
	min-height: 0;
}


/* ============================================================
   HERO SLIDER OVERRIDES
   Compact "sticky note" card — rotated, overlapping the slide image,
   pinned bottom-right on desktop — instead of huge centred text.
   ============================================================ */

/*
 * Remove the parent theme's dark/light gradient overlay on the image.
 * That overlay exists to keep text readable when it sits directly on
 * the photo — now that the text lives inside its own opaque card, the
 * photo can show at full brightness/colour.
 * Qualified through .slide-text-light/.slide-text-dark (3 classes total)
 * to unconditionally beat the parent's 2-class rules of the same name.
 */
.ernesto-hero-slider .slide-text-light .slide-image::after,
.ernesto-hero-slider .slide-text-dark .slide-image::after {
	background: none !important;
}

.ernesto-hero-slider .slide-content {
	position:      absolute;
	left:          auto;
	right:         5%;
	bottom:        7%;
	top:           auto;
	z-index:       3;
	width:         88%;
	max-width:     420px;
	margin:        0;
	padding:       1.25rem 1.5rem;
	background:    var(--ps-accent);
	border-radius: var(--border-radius-md, 0.5rem);
	box-shadow:    var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3));
	transform:     rotate(-3deg);
	text-align:    left !important;
}

/*
 * Qualified through .slide-content (3 classes) rather than just
 * .ernesto-hero-slider .slide-title (2 classes) — this unconditionally
 * beats the parent's .slide-text-light/.slide-text-dark variant rules
 * (also 2 classes) regardless of stylesheet load order, instead of
 * relying on !important cascade tie-breaks.
 */
.ernesto-hero-slider .slide-content .slide-title {
	font-size:     clamp(1.1rem, 1.6vw, 1.5rem) !important;
	margin-bottom: 0.5rem                       !important;
	color:         #fff                         !important;
	text-shadow:   none                         !important;
}

.ernesto-hero-slider .slide-content .slide-description {
	font-size:     clamp(0.8rem, 1vw, 0.95rem) !important;
	line-height:   1.5;
	margin-bottom: 1rem                        !important;
	max-width:     none;
	margin-left:   0 !important;
	margin-right:  0 !important;
}

/* The whole card is already the accent colour — drop the per-line highlight
   background (it was designed for text sitting directly on the photo) and
   just use plain white text inside the card. */
.ernesto-hero-slider .slide-content .slide-desc-hl {
	display:           inline;
	background-color:  transparent !important;
	color:             #fff        !important;
	text-shadow:       none        !important;
	padding:           0           !important;
}

/* Button: explicit padding so the * { padding:0 } reset never wins */
.ernesto-hero-slider .slide-content .slide-button,
.ernesto-hero-slider .slide-content .slide-button.button {
	padding:          0.5rem 1.25rem !important;
	font-size:        0.85rem;
	background-color: #fff;
	color:            var(--ps-accent);
	border-color:     #fff;
}

.ernesto-hero-slider .slide-button:hover,
.ernesto-hero-slider .slide-button:focus {
	background-color: #fff;
	border-color:      #fff;
	opacity:           0.85;
}

/* ── Tablet / mobile: card hangs below the photo.
     CSS spec prevents overflow-y: visible when overflow-x: hidden is set
     on the same element (visible is upgraded to auto, which still clips
     abs-positioned children). Instead we shrink the slide-image so it
     only fills the top portion, leaving a clear strip at the bottom where
     the card sits — the card appears to hang below the photo. ── */
@media (max-width: 768px) {
	/* Image fills top portion only; the bottom strip is bare slide bg */
	.ernesto-hero-slider .slide-image {
		height: calc(100% - 100px);
	}

	/* Card: centred, slight tilt, overlapping the image-to-strip boundary */
	.ernesto-hero-slider .slide-content {
		position:  absolute;
		left:      50%;
		right:     auto;
		bottom:    8px;
		top:       auto;
		transform: translateX(-50%) rotate(-1.5deg);
		width:     calc(100% - 2rem);
		max-width: 420px;
		margin:    0;
	}

	/* Hide slider pagination dots — card sits where dots would be */
	.ernesto-hero-slider .slider-dots {
		display: none;
	}
}


/* ============================================================
   4. HP SHOWCASE — 3-column strip below the hero
   Col 1: orange polygon card (post 1)
   Col 2-3: plain text teasers (posts 2 & 3)
   ============================================================ */

/* ── Overlap the hero's bottom edge ─────────────────── */

.hp-showcase {
	width:      100%;
	position:   relative;
	z-index:    10;
	max-width:  1600px;
	margin-left:  auto;
	margin-right: auto;
	padding-left:  1rem;
	padding-right: 1rem;
}

.hp-showcase__grid {
	display: grid;
	grid-template-columns: 6fr 3fr 3fr;
	min-height: 360px;
	max-height: 420px;
	background: var(--bg-body, #fff);
}

/* ── Featured card (left) ────────────────────────────── */

.hp-showcase__primary {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background-color: var(--ps-accent);
	background-size: cover;
	background-position: center right;
	/* rise above the grid's white background */
	margin-top: -80px;
	padding-top: 80px;
}

/* Smooth SVG-curve colour overlay — gentle S-curve right edge */
.hp-showcase__primary::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: var(--ps-accent);
	z-index:    1;
	clip-path:  url(#ps-leaf);
	/* mouse-out: plain ease-out — no overshoot, left edge stays put */
	transition: transform 0.45s ease-out;
	transform-origin: right center;
}

/* Hover: breathe the curve outward — spring only on the way IN */
.hp-showcase__primary:hover::before {
	transform:  scaleX(1.03);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-showcase__primary-content {
	position:        relative;
	z-index:         2;
	width:           62%;        /* stay inside the polygon */
	height:          100%;
	padding:         0 2rem 2.5rem 2.5rem;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	color:           #fff;
}

.hp-showcase__arrow {
	display:     block;
	line-height: 1;
	flex-shrink: 0;
}

.hp-showcase__primary-title {
	font-family:   var(--font-heading);
	font-size:     clamp(1.15rem, 2vw, 1.75rem);
	font-weight:   300;
	line-height:   1.35;
	color:         #fff;
	margin:        auto 0;   /* vertically centres within flex-grow space */
	padding:       1.5rem 0;
	overflow-wrap: break-word;
	hyphens:       auto;
}

/* ── Shared "Read more" link ─────────────────────────── */

.hp-showcase__readmore {
	display:         inline-flex;
	align-items:     center;
	gap:             0.4rem;
	font-size:       0.875rem;
	font-weight:     500;
	text-decoration: none;
	color:           #fff;
	transition:      gap 0.2s ease;
}

.hp-showcase__primary:hover .hp-showcase__readmore,
.hp-showcase__secondary:hover .hp-showcase__readmore {
	gap: 0.7rem;
}

.hp-showcase__readmore-chevron {
	font-size: 1.1rem;
	line-height: 1;
}

/* ── Secondary text teasers (posts 2 & 3) ───────────── */

.hp-showcase__secondary {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         2rem 2rem 2.5rem;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	border-left:     1px solid var(--border-light, #e0e0e0);
	transition:      background 0.2s ease;
}

/* Inline text-highlight on hover — follows each line's width */
.hp-showcase__secondary-title span {
	display:                  inline;
	background-color:         transparent;
	color:                    var(--text-heading, #000);
	padding:                  3px 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break:     clone;
	transition:               background-color 0.25s ease, color 0.25s ease;
}

.hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: var(--ps-accent);
	color:            #fff;
}

a.hp-showcase__secondary:hover {
	text-decoration: none;
}

.hp-showcase__secondary-title {
	font-size:   clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.45;
	margin:      0 0 1.5rem;
	color:       var(--text-heading, #000);
}

.hp-showcase__secondary .hp-showcase__readmore {
	color: var(--text-main, #1a1a1b);
}


/* ============================================================
   4b. HP PORTFOLIO — grid of latest portfolio items (front page)
   ============================================================ */

.hp-portfolio {
	/* No top padding: now a grid sibling of <main> inside .content-area,
	   so spacing above comes from the grid's own `gap` (see parent style.css). */
	padding: 0 0 3rem;
}

.hp-portfolio__header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   2rem;
}


/* ============================================================
   5. HP NEWS — skyscraper + 2×2 card grid
   ============================================================ */

.hp-news {
	padding: 4rem 0 5rem;
}

/* ── Section header ──────────────────────────────────── */

.hp-news__header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   2rem;
}

.hp-news__heading {
	font-family:    var(--font-heading);
	font-size:      clamp(2rem, 4.5vw, 3.25rem);
	font-weight:    300;
	letter-spacing: -0.03em;
	color:          var(--text-heading, #000);
	margin:         0;
}

.hp-news__seeall {
	display:         flex;
	align-items:     center;
	gap:             0.3rem;
	font-size:       0.9rem;
	font-weight:     500;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	white-space:     nowrap;
	transition:      color 0.2s ease;
}

.hp-news__seeall:hover {
	color: var(--ps-accent);
}

/* ── Main grid wrapper ───────────────────────────────── */

.hp-news__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
	align-items:           stretch;
}

/* ── Skyscraper (left column) ────────────────────────── */

.hp-news__skyscraper {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	min-height:      480px;
}

.hp-news__skyscraper > img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform 0.55s ease;
}

.hp-news__skyscraper:hover > img {
	transform: scale(1.04);
}

/* Wave SVG — your exact path, closed into filled shape, sweeps up on hover */
.hp-news__skyscraper-wave {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     110%;   /* overshoot so the wave top clears the card edge */
	fill:       var(--ps-accent);
	z-index:    1;
	transform:  translateY(65%);
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-news__skyscraper:hover .hp-news__skyscraper-wave {
	transform: translateY(-5%);  /* push past top edge — fully filled */
}

/* Text overlay — sits above the wave (z-index 2) */
.hp-news__skyscraper-overlay {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	padding:         2rem 2rem 1.75rem;
	background:      transparent;
	color:           #fff;
	z-index:         2;
}

.hp-news__date {
	display:     block;
	font-size:   0.78rem;
	font-weight: 400;
	opacity:     0.9;
	margin-bottom: 0.4rem;
	letter-spacing: 0.03em;
}

.hp-news__skyscraper-title {
	font-family: var(--font-heading);
	font-size:   clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 300;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* ── Side grid — 2×3 smaller cards ──────────────────── */

.hp-news__side-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
}

.hp-news__card {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	aspect-ratio:    4 / 3;
}

.hp-news__card > img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.45s ease;
}

.hp-news__card:hover > img {
	transform: scale(1.06);
}

/* Gradient overlay + text at the bottom of each card */
.hp-news__card-overlay {
	position:   absolute;
	inset:      0;
	display:    flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:    1rem 1rem 0.9rem;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.55) 40%,
		rgba(0, 0, 0, 0.10) 70%,
		transparent         100%
	);
	color: #fff;
}

.hp-news__card-date {
	display:      block;
	font-size:    0.7rem;
	font-weight:  400;
	opacity:      0.85;
	margin-bottom: 0.25rem;
	letter-spacing: 0.03em;
}

.hp-news__card-title {
	font-family: var(--font-heading);
	font-size:   clamp(0.8rem, 1.1vw, 0.95rem);
	font-weight: 400;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* Placeholder when no featured image is available */
.hp-news__img-placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ── Tablet (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {
	.hp-showcase__grid {
		grid-template-columns: 3fr 2fr 2fr;
	}

	.hp-showcase__primary-content {
		width: 70%;
	}
}

/* ── Small tablet / large phone (≤ 768px) ───────────── */
@media (max-width: 768px) {
	/* Stack showcase vertically */
	.hp-showcase__grid {
		grid-template-columns: 1fr;
		max-height: none;
	}

	.hp-showcase__primary {
		min-height: 280px;
	}

	/* On mobile the curve covers the full card — no right-edge cutoff */
	.hp-showcase__primary::before {
		clip-path: none;
		transition: none;
	}

	.hp-showcase {
		margin-top: 0;
	}

	.hp-showcase__primary {
		margin-top: 0;
		padding-top: 0;
	}

	.hp-showcase__primary-content {
		width:         100%;
		padding-top:   1.5rem;
		padding-bottom: 1.5rem;
	}

	.hp-showcase__secondary {
		border-left:  none;
		border-top:   1px solid var(--border-light, #e0e0e0);
		min-height:   120px;
	}

	/* Stack news grid */
	.hp-news__grid {
		grid-template-columns: 1fr;
	}

	.hp-news__skyscraper {
		aspect-ratio: 16 / 9;
		min-height:   260px;
	}
}

/* ── Phone (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
	.hp-news__side-grid {
		grid-template-columns: 1fr;
	}

	.hp-news__card {
		aspect-ratio: 16 / 9;
	}
}


/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */

/* Slider arrow button positions (belt-and-suspenders over parent theme) */
.slider-arrow-prev {
	left:  1.5rem !important;
	right: auto  !important;
}

.slider-arrow-next {
	right: 1.5rem !important;
	left:  auto  !important;
}

/* Logo: no hover transform, shadow, or fade */
.custom-logo-link img,
.custom-logo-link:hover img,
.custom-logo-link:focus img {
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    1    !important;
	transition: none !important;
}


/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST — ernesto-pf specific
   Hero slider layout is handled by shared-child-a11y.css.
   These rules convert hp-showcase and hp-news grids into plain
   vertical lists of horizontal cards (text left, image right).
   ══════════════════════════════════════════════════════════════ */

/* Description highlight: remove coloured background; underline instead */
body.high-contrast .slide-desc-hl {
	background-color: transparent     !important;
	color:            #000066         !important;
	text-decoration:  underline solid #000066 2px !important;
	padding:          0               !important;
}

/* ── hp-showcase → horizontal card list ────────────────────── */

/* Reset the showcase grid to a flex column */
body.high-contrast .hp-showcase__grid {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* Primary card: horizontal (text left, image right) */
body.high-contrast .hp-showcase__primary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     200px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	clip-path:      none          !important;   /* remove polygon clip */
}

/* Primary card image → right 42% */
body.high-contrast .hp-showcase__primary::before {
	display: none !important;   /* remove polygon pseudo-element */
}

body.high-contrast .hp-showcase__primary-content {
	flex:       1       !important;
	order:      1       !important;
	position:   relative !important;
	color:      #000066 !important;
	padding:    1.5rem  !important;
}

body.high-contrast .hp-showcase__primary-title,
body.high-contrast .hp-showcase__primary .hp-showcase__readmore,
body.high-contrast .hp-showcase__primary .hp-showcase__arrow {
	color: #000066 !important;  /* now on light bg — navy text */
}

/* Secondary cards (right column) → each becomes a horizontal row */
body.high-contrast a.hp-showcase__secondary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	box-shadow:     none          !important;
}

body.high-contrast .hp-showcase__secondary-title {
	flex:    1   !important;
	order:   1   !important;
	padding: 1.5rem !important;
}

/* Remove the hover highlight span background */
body.high-contrast .hp-showcase__secondary-title span,
body.high-contrast .hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: transparent !important;
	color:            #000066     !important;
	padding:          0           !important;
}

/* ── hp-news → horizontal card list ────────────────────────── */

/* Reset the news grid to flex column */
body.high-contrast .hp-news__skyscraper,
body.high-contrast [class*="hp-news__grid"] {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* News/skyscraper cards: horizontal */
body.high-contrast [class*="hp-news__card"],
body.high-contrast [class*="hp-card"],
body.high-contrast .hp-news__skyscraper-card {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	box-shadow:     none          !important;
	outline:        2px solid #000066 !important;
	background:     #FFF9E5       !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"],
body.high-contrast [class*="hp-card"] [class*="__img"],
body.high-contrast .hp-news__skyscraper-card [class*="__img"] {
	flex:         0 0 42% !important;
	order:        2       !important;
	aspect-ratio: auto    !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"] img,
body.high-contrast [class*="hp-card"] [class*="__img"] img,
body.high-contrast .hp-news__skyscraper-card [class*="__img"] img {
	height:     100%;
	object-fit: cover;
}

body.high-contrast [class*="hp-news__card"] [class*="__body"],
body.high-contrast [class*="hp-card"] [class*="__body"] {
	flex:  1 !important;
	order: 1 !important;
}

/*
 * OS-level @media (prefers-contrast: high) mirror removed — high contrast is
 * opt-in via the accessibility toolbar only (body.high-contrast rules above).
 * This stops the site from auto-switching to the high-contrast layout for
 * visitors whose operating system has "Increase contrast" enabled.
 */