/* ==========================================================================
   KURSRAUM LOOKALIKE — Ernesto skin mimicking the live Enfold site
   (kursraum.online). Design tokens extracted from the live dynamic Enfold
   CSS + kursraum26/css/samstyle.css:
     body/header bg  #fffd96   (pale yellow)
     primary/accent  #d97d5b   (terracotta)  → per-page var(--cat1-color)
     hover/highlight #deadff   (lavender)
     text/headings   #4b4a48   (charcoal)
     footer bg       #d97d5b   / socket #7e846b (olive)
   Also contains the .kr-* grid + component classes produced by the
   Enfold-shortcode → HTML content migration (2026-07-12).
   ========================================================================== */

/* ---- High Contrast mode: EventON tiles use a border, not a background ----
   EventON colors each tile inline (style="background-color: #b0c6ff") per
   its category — a colored background behind default text can fail
   contrast requirements. js/eventon-tile-hc.js copies that inline color
   into --evcal-tile-color on the same element; here we swap it to a
   border on Ernesto's own high-contrast surface color (matches the
   --bg-surface / --text-main navy pairing accessibility.css uses
   elsewhere, e.g. .etest__card). !important beats the inline
   background-color (a plain external rule can't). */
body.high-contrast .evcal_list_a {
	background-color: #fef8e3 !important;
	border: 3px solid var(--evcal-tile-color, #000066) !important;
	color: #000066 !important;
}

/* ---- Hide breadcrumbs on mobile ------------------------------------------ */
@media (max-width: 767px) {
	.breadcrumbs,
	.breadcrumbs-spacer {
		display: none;
	}
}

/* ---- Utility: hide-on-mobile / hide-on-desktop ----------------------------
   Neither Ernesto nor Gutenberg core ships a responsive-visibility toggle
   (that's a page-builder feature, e.g. Elementor/Divi — not available here,
   and this isn't a block theme/theme.json site either). Add "hide-on-mobile"
   or "hide-on-desktop" as an Additional CSS Class to any block in the editor
   — same convention as "mitmachpfeil" / "menubold" elsewhere in this file.
   767px matches the breakpoint used throughout this theme (Ernesto's own
   nav switches at min-width: 768px). !important since a utility class needs
   to reliably override whatever display value the block itself carries. */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* ---- "Datum auswählen" arrow ----------------------------------------------
   Add class "mitmachpfeil" to a heading (Additional CSS Class in the block
   editor) to point img/mitmachpfeil.png from it down into the EventON tile
   that follows. Positioned via ::after on the heading itself since the
   tile is a separate sibling element (EventON shortcode output), not
   something nestable inside the heading — an absolutely-positioned pseudo-
   element is free to visually overlap the next sibling's space as long as
   nothing clips overflow in between. Dark mode swaps in the light-colored
   variant (mitmachpfeil_dark.png) via the same .dark-mode ancestor class
   used elsewhere in this file — background-image can't use light-dark(),
   that only works for <color> values. */
.mitmachpfeil {
	position: relative;
}
.mitmachpfeil::after {
	content: '';
	position: absolute;
	right: 8%;
	bottom: -49px;
	width: 49px;
	height: 75px; /* matches the source image's ~68:104 aspect ratio */
	background: url('../img/mitmachpfeil.png') no-repeat center / contain;
	z-index: 2;
	pointer-events: none;
}
.dark-mode .mitmachpfeil::after {
	background-image: url('../img/mitmachpfeil_dark.png');
}

/* ---- Ernesto core bug: --color-bg / --color-border undefined on frontend --
   Ernesto only defines these two custom properties in assets/css/editor.css
   (the Gutenberg block-editor iframe) — never anywhere in the actual site
   frontend CSS. Every frontend rule that reads them (18 in woocommerce.css
   alone: account/login/checkout input backgrounds, table borders, card
   backgrounds, ...) silently resolves to transparent, since var() with an
   undefined property and no fallback computes to the property's initial
   value. On this site that made the Mein Konto login fields invisible
   (yellow input on the yellow page background). Defining them once here —
   matching editor.css's own light-mode values, extended for dark mode —
   fixes every one of those 18 spots at once instead of patching each rule. */
:root {
	--color-bg: light-dark(#ffffff, #33322f);
	--color-border: light-dark(#dee2e6, #4a4945);
}

/* ---- EventON list tiles: hyphenate long event names ----------------------
   German compound words ("Schwangerschaftsyoga") don't have natural break
   points, so a long one pushes the tile wider than the space next to the
   date instead of wrapping. The site is lang="de-CH" (checked in the page
   head), so native browser hyphenation just needs to be turned on — no
   manual &shy; placement needed, and it works for any future long event
   name automatically, not just the ones we think to hyphenate by hand. */
.evcal_event_title,
.evoet_title,
.evcal_desc2 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Date always above, title always below — was flex-direction: row, so a
   short title (e.g. "Feierabendyoga") sat beside the date while a long one
   wrapped underneath, giving each tile a different layout. Column stacks
   date then title consistently regardless of title length.
   !important: ties on specificity with EventON's own
   .eventon_list_event .evoet_in rule (eventon_styles.css), which would
   otherwise win depending on stylesheet load order. */
.eventon_list_event .evoet_in,
.evo_pop_body .evoet_in {
	flex-direction: column !important;
}

/* ---- Hero Slider: rounded-corner overlay fix -----------------------------
   Ernesto's Customizer "Image border radius" (Appearance → Customize →
   Design Elements) applies border-radius to a global `img, picture,
   .wp-post-image` selector — which rounds the <picture>/<img> inside each
   hero slide, but NOT its sibling .slide-image::after / .slide-video::after
   (the dark/light gradient overlay used for text contrast). That overlay is
   a separate full-rectangle pseudo-element, so its square corners still
   show past the now-rounded image underneath. Rounding + clipping the
   wrapper itself fixes both the image and the overlay in one step. */
.slide-image,
.slide-video {
	border-radius: var(--image-border-radius, 8px);
	overflow: hidden;
}

/* Remove the dark/light gradient scrim entirely — it existed only to keep
   text readable when it sat directly on the image. The description now
   lives in its own solid .hero-content-box, and the title keeps its own
   text-shadow (base hero-slider.css) for contrast, so the overlay is no
   longer needed. Overrides both .slide-text-light/.slide-text-dark variants. */
.ernesto-hero-slider .slide-image::after,
.ernesto-hero-slider .slide-text-light .slide-image::after,
.ernesto-hero-slider .slide-text-dark .slide-image::after {
	background: none;
}

/* ---- Hero Slider: title above a rounded content box ----------------------
   .slide-title / .slide-description / .slide-button are SIBLINGS inside
   .slide-content (parent theme markup, inc/hero-slider.php), so there's no
   element to hang a box background on that contains just the description +
   button. A CSS-only attempt (grid row-span pseudo-element) proved fragile
   to get pixel-right, so js/hero-content-box.js physically moves the
   description + button into one real wrapper div at runtime instead — a
   real element makes the box itself trivial, ordinary CSS. */
.ernesto-hero-slider .slide-content {
	text-align: left;
	/* Fill the slide's full height so the box can be pinned to the bottom
	   via margin-top: auto below — .slider-slide centers its content
	   vertically by default (align-items: center), which this overrides
	   for just this item. */
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: 100%;
	/* The box's own margin-bottom below is the real 22px offset from the
	   slide's bottom edge — zero out the base rule's --space-3xl (48px)
	   bottom padding so the two don't stack. */
	padding-bottom: 0;
}

.ernesto-hero-slider .slide-title {
	position: relative;
	z-index: 1;
	/* auto absorbs the empty space above, pushing title (and the box
	   right after it) down as one group — not just the box alone, which
	   left the title stranded near the top with a big gap between them. */
	margin: auto 0 -1rem; /* -1rem: small overlap with the box below */
}

.ernesto-hero-slider .hero-content-box {
	position: relative;
	background: light-dark(rgba(255, 255, 255, 0.8), rgba(51, 50, 47, 0.8));
	border-radius: 25px;
	padding: 2rem 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 22px; /* offset from the slide's bottom edge */
}

.ernesto-hero-slider .hero-content-box .slide-description {
	max-width: none;
	margin: 0 0 1.5rem;
	/* Standard body copy, not the oversized heading-ish size/font the base
	   rule uses for text sitting directly on the image. */
	font-family: var(--font-primary, sans-serif) !important;
	font-size: var(--font-size-body, 1rem) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	/* Sits on the solid box now, not the image — drop the on-image
	   light/dark overlay treatment (white text + shadow) from the base
	   rule and from both .slide-text-light/.slide-text-dark variants. */
	color: var(--text-main, #1a1a1b) !important;
	text-shadow: none !important;
}

.ernesto-hero-slider .hero-content-box .slide-button.button {
	align-self: flex-end; /* bottom-right corner of the box */
	margin: 0;
	font-family: var(--font-primary, sans-serif);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.6rem 1.25rem; /* smaller than the default hero CTA size */
}

/* ---- Page furniture ----------------------------------------------------
   Base palette (light + dark) comes from the Ernesto Customizer
   (--bg-body, --text-main, --color-primary, …) — no local palette needed.
   Card/tile surfaces are the one token the Customizer can't express
   (its --bg-surface equals --bg-body): */
:root {
	--kr-surface: light-dark(#ffffff, #33322f);
}

.site-header,
.header-main-wrapper,
.header-top-wrapper {
	background: var(--bg-body);
	border-bottom: 0;
	box-shadow: none;
}

/* Site title / logo — Gazpacho serif in terracotta like the live logo */
.site-title,
.site-title a {
	font-family: var(--font-special, Georgia, serif);
	font-weight: 900;
	color: var(--cat1-color, #d97d5b);
}
.site-description {
	display: none;
}

/* SVG logo in the per-page accent color.
   Ernesto outputs the logo as <img>, which CSS cannot recolor. Instead the
   link background is painted through a mask of the same SVG (theme copy in
   /img/); the img itself is made invisible but keeps its layout box and alt
   text. Recolors automatically per page (--cat1-color) and in dark mode. */
.custom-logo-link {
	display: inline-block;
	background-color: var(--cat1-color, #d97d5b);
	-webkit-mask: url("../img/logo_txt_kursraumonline.svg") no-repeat left center / contain;
	mask: url("../img/logo_txt_kursraumonline.svg") no-repeat left center / contain;
}
.custom-logo-link .custom-logo {
	opacity: 0;
}

/* ---- Mobile hamburger (Lottie burger icon): per-page accent color -------
   Ernesto's menu.css hardcodes the burger to var(--color-primary) so it
   never inherits hover/theme color changes. This site recolors nav/logo
   per page via --cat1-color (see custom-logo-link above and colours.css'
   body.page-id-N rules), so the burger should match rather than stay stuck
   on the site-wide primary color. Print order between this file and the
   parent's menu.css isn't reliable (menu.css isn't a dependency of this
   stylesheet, so WP doesn't guarantee it prints first) — critical.css also
   inlines the same rule in <head>. #masthead adds specificity to win
   outright rather than relying on source order, same trick used for the
   nav pill overrides below. NOTE: the #masthead id here outranks the
   parent's body.high-contrast override on specificity alone (an id beats
   any number of classes) — so high-contrast white-fill is re-declared
   below with the same #masthead id to win it back. */
#masthead .menu-lottie svg path,
#masthead .menu-lottie svg rect,
#masthead .menu-lottie svg ellipse {
	fill: var(--cat1-color, #d97d5b) !important;
}

/* High contrast: burger must stay white regardless of --cat1-color (blue
   accent colors are unreadable on the high-contrast blue background). */
body.high-contrast #masthead .menu-lottie svg path,
body.high-contrast #masthead .menu-lottie svg rect,
body.high-contrast #masthead .menu-lottie svg ellipse {
	fill: #ffffff !important;
}

/* ---- Main navigation: pill buttons (ported from kursraum26) ------------
   Scoped to min-width: 768px — the exact breakpoint where Ernesto's own
   menu.css switches .main-navigation from the mobile flyout to the desktop
   horizontal layout (assets/css/menu.css). Without this, these rules also
   applied inside the mobile flyout menu: full-width flex items forced into
   pill shapes with 22px rounded corners and inconsistent widths, instead of
   Ernesto's own clean mobile list — this is what looked "awful". Below
   768px the mobile menu is now entirely Ernesto's standard, untouched
   styling. */
@media (min-width: 768px) {
	/* !important: parent menu.css/critical.css load order varies, they must not win. */
	.main-navigation ul:not(.sub-menu) {
		display: flex;
		justify-content: flex-end; /* menu aligned right */
		align-items: center;
		gap: 8px;                  /* items close together */
		margin: 0;
		padding: 0;
	}
	.main-navigation > div > ul > li > a,
	.main-navigation > ul > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		line-height: 44px;
		padding: 0 18px;
		margin: 0;
		border-radius: 22px;
		font-family: var(--font-nav, var(--font-primary, sans-serif));
		font-size: 16px;
		font-weight: 700;
		border: none;
		background-color: var(--cat1-color, #d97d5b) !important;
		color: #ffffff !important;
	}
	/* Active page: lavender bg, text white like the other items */
	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current-menu-ancestor > a {
		background-color: #deadff !important;
		color: #ffffff !important;
		border-bottom: none !important; /* overrides ernesto-brand underline */
	}
	/* Dark mode (Ernesto a11y toggle): active text black instead of white */
	.dark-mode .main-navigation .current-menu-item > a,
	.dark-mode .main-navigation .current_page_item > a,
	.dark-mode .main-navigation .current-menu-ancestor > a {
		color: #000000 !important;
	}
	/* Hover: lavender bg, text takes the body background color (white → yellow) */
	.main-navigation > div > ul > li > a:hover,
	.main-navigation > ul > li > a:hover {
		background-color: #deadff !important;
		color: var(--bg-body) !important;
		border-bottom: none !important;
	}

	/* Bold menu items: add CSS class "menubold" to the item in Appearance → Menus.
	   #masthead id needed to out-rank the parent's `.main-navigation .sub-menu
	   li.menubold > a { font-weight: 500 !important; }`. */
	#masthead .main-navigation li.menubold > a,
	#masthead .main-navigation .sub-menu li.menubold > a {
		font-weight: 800 !important;
	}

	/* ---- Per-offer menu colors (Info / Success / Warning from the Customizer) --
	   Mirrors the live Enfold site, where each course category had its own menu
	   color. Add one of these CSS classes to a menu item in Appearance → Menus →
	   (Screen Options → CSS Classes) — same mechanism as "menubold":
	     menu-info     → var(--color-info)     (Light Blue  — used for Schwangerschaftsyoga)
	     menu-success  → var(--color-success)  (Olive Green — used for Angebote nach der Geburt)
	     menu-warning  → var(--color-warning)  (Salmon Pink — used for Stillberatung individuell)
	   The matching body.page-id-N rule in colours.css points --cat1-color at the
	   same variable, so the page's logo/title/buttons pick up the identical
	   color — change it once in the Customizer, both places update. */
	#masthead .main-navigation li.menu-info > a,
	#masthead .main-navigation .sub-menu li.menu-info > a {
		background-color: var(--color-info) !important;
	}
	#masthead .main-navigation li.menu-success > a,
	#masthead .main-navigation .sub-menu li.menu-success > a {
		background-color: var(--color-success) !important;
	}
	#masthead .main-navigation li.menu-warning > a,
	#masthead .main-navigation .sub-menu li.menu-warning > a {
		background-color: var(--color-warning) !important;
	}
	/* Dropdown items don't have a pill shape by default — give colored ones one,
	   and swap the hover treatment to a brightness tweak so the item keeps its
	   own color instead of turning transparent-on-lavender like plain items. */
	.main-navigation .sub-menu li.menu-info > a,
	.main-navigation .sub-menu li.menu-success > a,
	.main-navigation .sub-menu li.menu-warning > a {
		border-radius: 14px !important;
		margin: 2px 8px;
	}
	.main-navigation .sub-menu li.menu-info > a:hover,
	.main-navigation .sub-menu li.menu-success > a:hover,
	.main-navigation .sub-menu li.menu-warning > a:hover {
		filter: brightness(1.12);
		background: inherit;
	}

	/* Dropdown — same colors and rounding as the main menu pills */
	.main-navigation .sub-menu {
		background: var(--cat1-color, #d97d5b) !important;
		border-radius: 22px !important;
		padding: 10px 0 !important;
		border: none !important;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
		overflow: hidden;
	}
	.main-navigation .sub-menu li,
	.main-navigation .sub-menu li a {
		border: none !important;
		background: transparent !important;
	}
	.main-navigation .sub-menu li a {
		font-family: var(--font-nav, var(--font-primary, sans-serif));
		font-size: 15px;
		color: rgba(255, 255, 255, 0.8) !important;
		padding: 8px 25px !important;
		line-height: 1.3;
		border-radius: 0 !important;
	}
	/* Dropdown hover: subtle overlay only — text color stays unchanged */
	.main-navigation .sub-menu li a:hover,
	.main-navigation .sub-menu li a:focus {
		color: rgba(255, 255, 255, 0.8) !important;
		background: rgba(255, 255, 255, 0.12) !important;
	}
}

/* Parent header.php still renders its own toolbar instance in .header-end
   (the theme_mod must stay on — it gates the a11y assets); hide it, the
   working instance lives in .header-utilities via the child override. */
.header-end .ernesto-accessibility-toolbar {
	display: none;
}

/* ---- Header utilities: accessibility / account / cart as equal circles -- */
.header-utilities {
	display: flex;
	align-items: center;
	gap: 8px;
}
.header-utilities .accessibility-toolbar-toggle,
.header-account .account-btn,
.header-cart .cart-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: var(--cat1-color, #d97d5b) !important;
	color: #fff !important;
	border: none;
}
.header-utilities .accessibility-toolbar-toggle:hover,
.header-utilities .accessibility-toolbar-toggle[aria-expanded="true"],
.header-account .account-btn:hover,
.header-account .account-btn:focus,
.header-cart .cart-btn:hover,
.header-cart .cart-btn:focus {
	background: #deadff !important;
	color: var(--bg-body) !important; /* icon takes the body background color, like the pills */
}
.header-cart .cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #7e846b;
	color: #fff;
	border-radius: 50%;
	min-width: 20px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
}

/* ---- Content ------------------------------------------------------------ */
/* Page titles in the per-page accent color (system from colours.css) */
.entry-title,
.page-title,
.entry-content h1 {
	font-family: var(--font-heading, Georgia, serif);
	color: var(--cat1-color, #d97d5b);
}

/* Front page: content brings its own H1 ("Live Kurse …") — hide the page title */
body.home .entry-header .entry-title {
	display: none;
}

/* White rounded content tile (Enfold custom class, kept by the migration) */
.tile1 {
	margin-bottom: 8px;
	border-radius: 32px;
	padding: 20px 40px;
	overflow: hidden;
	background-color: var(--kr-surface);
}
@media (max-width: 767px) {
	.tile1 {
		padding: 20px;
	}
}

/* Rounded images everywhere content shows them */
.entry-content .gallery img,
.entry-content .kr-image img,
.entry-content .wp-block-image img {
	border-radius: 25px;
	width: 100%;
	height: auto;
	display: block;
}

/* Core [gallery] shortcode as a clean grid (replaces Enfold galleries) */
.entry-content .gallery {
	display: grid;
	gap: 12px;
	margin: 0 0 1.5em;
}
.entry-content .gallery .gallery-item {
	margin: 0;
	width: auto;
}
.entry-content .gallery-columns-1 { grid-template-columns: 1fr; }
.entry-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 767px) {
	.entry-content .gallery {
		grid-template-columns: repeat(2, 1fr) !important; /* mobile override of column count */
	}
}

/* ---- kr-* grid (Enfold columns → floated divs) -------------------------- */
.kr-col {
	float: left;
	box-sizing: border-box;
	padding: 0 15px;
	min-height: 1px;
}
.kr-first { clear: left; padding-left: 0; }
.kr-full { width: 100%; padding: 0; }
.kr-half { width: 50%; }
.kr-third { width: 33.333%; }
.kr-two-thirds { width: 66.666%; }
.kr-fourth { width: 25%; }
.kr-three-fourths { width: 75%; }
.kr-fifth { width: 20%; }
.kr-two-fifths { width: 40%; }
.kr-three-fifths { width: 60%; }
.kr-four-fifths { width: 80%; }

.entry-content::after,
.kr-section::after {
	content: "";
	display: table;
	clear: both;
}
.kr-section { clear: both; }

@media (max-width: 767px) {
	.kr-col {
		float: none;
		width: 100%;
		padding: 0;
	}
	.kr-spacer { height: 20px !important; } /* converted spacers carry inline desktop heights */
}

/* ---- Components from the content migration ------------------------------ */
.kr-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 1.5em 0;
}
.kr-buttons .button,
.entry-content .button {
	display: inline-block;
	background-color: var(--cat1-color, #d97d5b);
	color: #fff;
	font-family: var(--font-primary, sans-serif);
	font-weight: 700;
	border: none;
	border-radius: 16px;
	padding: 14px 26px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	transition: background-color 0.15s ease;
}
.kr-buttons .button:hover,
.entry-content .button:hover {
	background-color: #deadff;
	color: #fff;
}
.kr-buttons .button small {
	font-weight: 400;
	font-size: 0.8em;
}

/* Testimonials */
.kr-testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 1.5em 0;
}
@media (max-width: 767px) {
	.kr-testimonials { grid-template-columns: 1fr; }
}
.kr-testimonial {
	background: var(--kr-surface);
	border-radius: 25px;
	padding: 24px 28px;
	margin: 0;
	border: none;
	font-style: normal;
}
.kr-testimonial footer {
	margin-top: 12px;
	font-weight: 700;
	color: var(--cat1-color, #d97d5b);
}

/* Timeline */
.kr-timeline {
	border-left: 3px solid var(--cat1-color, #d97d5b);
	padding-left: 24px;
	margin: 1.5em 0;
}
.kr-timeline-item {
	position: relative;
	margin-bottom: 1.5em;
}
.kr-timeline-item::before {
	content: "";
	position: absolute;
	left: -31px;
	top: 6px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--cat1-color, #d97d5b);
}
.kr-timeline-item h4 {
	margin: 0 0 0.3em;
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
	background: #7e846b;
	color: #fff;
	border-top: none;
}
.site-footer a,
.site-footer .footer-widget-area,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
	color: #fff;
}
.site-footer .site-info {
	background: #7e846b;
	color: #fff;
}
.site-footer .site-info a {
	color: #fff;
}