/*
 * Vela Atlas Theme — Base Styles
 *
 * Minimal. Keine Reset-Library, nur gezielte Normalisierung.
 * Native Page-Templates (siehe inc/pages/render.php) — kein Elementor.
 */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: #1a1a1a;
	background: #f8fbfe;
	/* Sticky-Footer: wenn der Inhalt kürzer als der Viewport ist, bleibt
	 * der Footer trotzdem am unteren Rand, statt in der Mitte zu "schweben".
	 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.vela-site-main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: #f45a2a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Headings ----------
 * 1.0.0-Release-Referenz (8889): H1 80px, H2 48px, H3 36px, H4 24px, H5 18px, H6 13px
 * Primary Heading-Color: #2f373d (dunkles Schiefer)
 */
h1 { font-size: 80px; font-weight: 700; line-height: 1.1;  margin: 0 0 24px; color: #2f373d; }
h2 { font-size: 48px; font-weight: 700; line-height: 1.2;  margin: 0 0 20px; color: #2f373d; }
h3 { font-size: 36px; font-weight: 700; line-height: 1.25; margin: 0 0 18px; color: #2f373d; }
h4 { font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0 0 14px; color: #2f373d; }
h5 { font-size: 18px; font-weight: 600; line-height: 1.4;  margin: 0 0 12px; color: #2f373d; }
h6 { font-size: 13px; font-weight: 600; line-height: 1.5;  margin: 0 0 10px; color: #2f373d; text-transform: uppercase; letter-spacing: 3px; }

@media (max-width: 768px) {
	h1 { font-size: 48px; }
	h2 { font-size: 34px; }
	h3 { font-size: 26px; }
}

/* ---------- Container ---------- */
.vela-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Skip-Link ---------- */
.vela-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 8px 12px;
	background: #000;
	color: #fff;
	z-index: 10000;
}
.vela-skip-link:focus {
	left: 12px;
	top: 12px;
}

/* ---------- Header ---------- */
.vela-site-header {
	background: #fff;
	border-bottom: 1px solid #e1e1e1;
	position: relative;
	z-index: 100;
}

/* Seiten mit blauem Hero: Header transparent, Logo weiß */
body.vela-blue-hero .vela-site-header {
	background: transparent;
	border-bottom: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
body.vela-blue-hero .vela-primary-nav .vela-menu a { color: #fff; }
body.vela-blue-hero .vela-primary-nav .vela-menu a:hover { color: #ffd9c9; }
body.vela-blue-hero .vela-primary-nav .vela-menu .current-menu-item > a,
body.vela-blue-hero .vela-primary-nav .vela-menu .current_page_item > a,
body.vela-blue-hero .vela-primary-nav .vela-menu a[aria-current="page"] {
	color: #f45a2a;
}
body.vela-blue-hero .vela-site-main { padding-top: 0; }

/* Logo-Umschaltung: Blaue-Hero-Seiten zeigen logo-light, alle anderen logo-dark */
.vela-site-branding .vela-logo-light { display: none; }
body.vela-blue-hero .vela-site-branding .vela-logo-dark { display: none; }
body.vela-blue-hero .vela-site-branding .vela-logo-light { display: inline-block; }
.vela-main-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 16px 0;
}

/* Nav + Actions werden rechts ausgerichtet, Logo bleibt links. */
.vela-primary-nav {
	margin-left: auto;
}
.vela-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Warenkorb-Icon: Count als kleines Badge oben-rechts auf das Icon. */
.vela-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	line-height: 1;
	padding: 4px;
}
.vela-cart-link:hover { color: #f45a2a; }
.vela-cart-icon {
	display: block;
}
.vela-cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #f45a2a;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
}
.vela-site-branding img,
.vela-site-branding .custom-logo {
	height: 48px;
	width: auto;
	max-width: 320px;
	display: block;
}
.vela-site-title {
	font-weight: 700;
	font-size: 20px;
	color: #1a1a1a;
}

/* Primary Nav */
.vela-primary-nav .vela-menu {
	display: flex;
	gap: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.vela-primary-nav .vela-menu a {
	color: #1a1a1a;
	font-weight: 400;
	font-size: 18px;
	display: inline-block;
	padding: 8px 0;
}
.vela-primary-nav .vela-menu a:hover {
	color: #f45a2a;
	text-decoration: none;
}
/* Aktive Seite — orange */
.vela-primary-nav .vela-menu .current-menu-item > a,
.vela-primary-nav .vela-menu .current_page_item > a,
.vela-primary-nav .vela-menu a[aria-current="page"] {
	color: #f45a2a;
}

/* CTA Button */
.vela-cta-button {
	display: inline-block;
	background: #f45a2a;
	color: #fff;
	padding: 10px 22px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background .2s ease;
}
.vela-cta-button:hover {
	background: #c34619;
	color: #fff;
	text-decoration: none;
}

/* Menu Toggle (mobile) */
.vela-menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	position: relative;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}
.vela-menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: #1a1a1a;
	transition: transform .25s ease, opacity .2s ease;
	transform-origin: center;
}
/* Offener Zustand: drei Bars werden zu X */
.vela-menu-toggle[aria-expanded="true"] {
	gap: 0;
}
.vela-menu-toggle[aria-expanded="true"] .vela-menu-toggle__bar {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -12px;
}
.vela-menu-toggle[aria-expanded="true"] .vela-menu-toggle__bar:nth-child(2) {
	transform: rotate(45deg);
}
.vela-menu-toggle[aria-expanded="true"] .vela-menu-toggle__bar:nth-child(3) {
	opacity: 0;
}
.vela-menu-toggle[aria-expanded="true"] .vela-menu-toggle__bar:nth-child(4) {
	transform: rotate(-45deg);
}

/* Nav-internal Actions (mobile/tablet burger). Desktop hides them. */
.vela-nav-actions { display: none; }

/* Startseite-Link nur im Mobile-Burger — auf Desktop geht das Logo zur Home. */
.vela-primary-nav .vela-menu > li.menu-item-home { display: none; }

@media (max-width: 1024px) {
	/* Mobile-Header: dunkler Background damit das weiß+orange Brand-Logo
	 * kontrastiert und unabhängig von Scroll/Hero-Position immer lesbar ist. */
	.vela-site-header {
		position: relative;
		background: #0a0a0a;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.vela-site-header .vela-container,
	.vela-main-header .vela-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.vela-main-header__inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}
	.vela-site-branding {
		flex: 0 1 auto;
		min-width: 0;
	}
	.vela-site-branding img,
	.vela-site-branding .custom-logo {
		max-width: 200px;
		height: 40px;
	}
	/* Auf Mobile immer das weiße+orange Brand-Logo auf dunklem Header. */
	.vela-site-branding .vela-logo-dark { display: none !important; }
	.vela-site-branding .vela-logo-light {
		display: inline-block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		height: 40px !important;
		max-width: 200px !important;
	}
	/* Burger-Bars hell auf dunklem Header. */
	.vela-menu-toggle__bar { background: #fff; }
	.vela-menu-toggle {
		display: inline-flex;
		margin-left: auto;
		order: 99;
		flex: 0 0 auto;
	}
	.vela-primary-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #0a0a0a;
		padding: 8px 24px 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
	}
	.vela-primary-nav.is-open {
		display: block;
	}
	.vela-primary-nav .vela-menu {
		flex-direction: column;
		gap: 0;
	}
	.vela-primary-nav .vela-menu li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.vela-primary-nav .vela-menu a {
		display: block;
		color: #f8fbfe;
		padding: 14px 0;
		font-size: 16px;
	}
	/* Startseite auf Mobile wieder sichtbar. */
	.vela-primary-nav .vela-menu > li.menu-item-home { display: list-item; }
	.vela-primary-nav .vela-menu a:hover {
		color: #f45a2a;
	}
	/* Nav-Actions im aufgeklappten Burger zeigen, Desktop-Actions ausblenden. */
	.vela-nav-actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 14px;
	}
	.vela-nav-cart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		color: #f8fbfe;
		padding: 12px 20px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 999px;
		text-decoration: none;
		font-size: 15px;
		font-weight: 500;
		background: transparent;
	}
	.vela-nav-cart:hover {
		color: #fff;
		border-color: #f45a2a;
		background: rgba(244, 90, 42, 0.1);
	}
	.vela-nav-cart svg { flex: 0 0 auto; }
	.vela-nav-cta {
		display: inline-block;
		background: #f45a2a;
		color: #fff;
		padding: 12px 20px;
		border-radius: 999px;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
		margin-top: 10px;
	}
	.vela-nav-cta:hover { background: #d94a1f; color: #fff; }
	/* Desktop-Actions in der Top-Bar verstecken (werden durch Nav-Actions ersetzt). */
	.vela-header-actions { display: none; }
	/* Hero responsive — independent von 8889, einfach lesbar. */
	.vela-blue-hero {
		--padding-top: 80px !important;
		--padding-bottom: 56px !important;
		--padding-left: 20px !important;
		--padding-right: 20px !important;
		--flex-direction: column !important;
		--align-items: stretch !important;
		--gap: 32px 0 !important;
	}
	.vela-blue-hero h1 {
		font-size: 40px !important;
		line-height: 1.15 !important;
	}
	.vela-blue-hero p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
	.vela-blue-hero img {
		max-width: 100% !important;
		height: auto !important;
	}
	/* Orange-Shape auf Mobile: füllt ganze Section, opaque — kein Weiß. */
	.vela-blue-hero::before {
		opacity: 1 !important;
		background-size: cover !important;
		background-position: bottom right !important;
	}
}

@media (max-width: 600px) {
	.vela-blue-hero h1 {
		font-size: 30px !important;
	}
}

/* ---------- Main ---------- */
.vela-site-main {
	/* Keine min-height — Footer soll direkt unter dem Inhalt sitzen
	 * (matched 1.0.0-Verhalten auf Cart und anderen kurzen Seiten).
	 */
}

/* Cart/Checkout: kurzer Inhalt soll nicht direkt am Header kleben —
 * etwas Atemluft oben und unten damit das Terminal mittiger wirkt.
 */
.woocommerce-cart .vela-site-main,
.woocommerce-checkout .vela-site-main {
	padding: 80px 0 40px;
}

/* Cart/Checkout nutzen den WC-Gutenberg-Block — die Page hat keinen .vela-container
 * um den Block. Wir zentrieren den Block selbst auf max. 1200px. */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Order-Received / Thank-You: Shortcode-Output liegt direkt im .vela-site-main
 * ohne .vela-container. Artikel zentriert auf 1200px begrenzen. */
.woocommerce-order-received .vela-site-main > article {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
.woocommerce-order-received .woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received p.woocommerce-thankyou-order-received {
	font-size: 20px;
	font-weight: 500;
	color: #2f373d;
	margin: 0 0 8px;
}
.woocommerce-order-received .woocommerce-order-overview {
	list-style: none;
	padding: 20px 24px;
	margin: 0;
	background: #fff;
	border: 1px solid #e5eaf0;
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
}
.woocommerce-order-received .woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: #7e868c;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	color: #2f373d;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
.woocommerce-order-received h2 {
	font-size: 22px;
	font-weight: 600;
	color: #2f373d;
	margin: 0 0 16px;
}
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-received .woocommerce-table--customer-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e5eaf0;
	border-radius: 8px;
	overflow: hidden;
}
.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
	padding: 14px 18px;
	border-bottom: 1px solid #e5eaf0;
	text-align: left;
	vertical-align: top;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
	font-weight: 600;
}
.woocommerce-order-received .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	padding: 18px;
	background: #fff;
	border: 1px solid #e5eaf0;
	border-radius: 8px;
}

/* Primary Cart-/Checkout-Button in Vela-Orange statt WC-Default-Dunkelgrau. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	background-color: #f45a2a !important;
	color: #fff !important;
	border-color: #f45a2a !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #d94a1f !important;
	border-color: #d94a1f !important;
}

/* ---------- Footer ---------- */
.vela-site-footer {
	background: #fff;
	color: #7e868c;
	padding: 56px 0 16px;
	margin-top: 0;
}
.vela-site-footer a { color: #1a1a1a; }
.vela-site-footer a:hover { color: #f45a2a; }

.vela-footer-widgets__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-bottom: 40px;
}
.vela-footer-widgets--cols-1 .vela-footer-widgets__grid { grid-template-columns: 1fr; }
.vela-footer-widgets--cols-2 .vela-footer-widgets__grid { grid-template-columns: repeat(2, 1fr); }
.vela-footer-widgets--cols-3 .vela-footer-widgets__grid { grid-template-columns: 2fr 1fr 1fr; }
.vela-footer-widgets--cols-4 .vela-footer-widgets__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

.vela-footer-menu { list-style: none; padding: 0; margin: 0; }
.vela-footer-menu li { padding: 4px 0; }
.vela-footer-menu a {
	color: #1a1a1a;
	font-size: 14px;
	display: inline-block;
}
.vela-footer-menu a:hover { color: #f45a2a; text-decoration: none; }
@media (max-width: 768px) {
	.vela-footer-widgets__grid {
		grid-template-columns: 1fr !important;
		gap: 28px;
	}
}

.vela-widget-title,
.vela-site-footer h3 {
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vela-site-footer ul { list-style: none; padding: 0; margin: 0; }
.vela-site-footer ul li { padding: 4px 0; }

.vela-copyright {
	margin: 24px 0 0;
	line-height: 1.6;
	font-size: 14px;
	color: #7e868c;
}

/* ---------- Entry (Posts/Pages) ---------- */
.vela-entry { padding: 40px 0; }
.vela-entry-title { font-size: 32px; font-weight: 700; margin: 0 0 16px; }
.vela-entry-content { font-size: 17px; line-height: 1.7; }

/* ---------- 404 ---------- */
.vela-404 { padding: 80px 0; text-align: center; }
.vela-404__title { font-size: 48px; margin: 0 0 16px; }

/* ---------- Search Form ---------- */
.vela-search-form { display: flex; gap: 8px; max-width: 400px; }
.vela-search-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	font-size: 14px;
}
.vela-search-submit {
	padding: 8px 16px;
	background: #f45a2a;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
}

/* ---------- WooCommerce minimal resets ---------- */
.vela-woocommerce-main { padding: 40px 0; }
.vela-breadcrumbs { margin: 0 0 24px; font-size: 14px; color: #646970; }

/* ---------- WooCommerce Single-Product ----------
 * Der Produkt-Titel soll nicht die volle h1-Größe (80px) haben — das wrapped
 * auf zwei Zeilen und wirkt übertrieben. 1.0.0-Referenz nutzt 40px/400.
 * Gallery links bekommt eine feste Breite damit das Bild nicht die halbe
 * Viewport einnimmt.
 */
.woocommerce div.product .product_title,
.single-product h1.product_title {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 20px;
	color: #2f373d;
}
.woocommerce div.product .woocommerce-product-gallery {
	max-width: 600px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	max-width: 100%;
	height: auto;
}

/* Add-to-Cart-Button: WC-Default ist lila, wir wollen Vela-Orange. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
	background-color: #f45a2a;
	color: #fff;
	border-color: #f45a2a;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background-color: #c34619;
	color: #fff;
	border-color: #c34619;
}

/* Produkt-Tabs: WC-Default rendert die Tab-Panels mit einer h2 als Label
 * (z.B. "Beschreibung"), was mit unserer h2-Größe (48px) riesig wirkt.
 * Außerdem läuft der Tab-Content bis zum Rand — wir packen ihn in einen
 * Container mit max-width 1200px.
 */
.woocommerce div.product .woocommerce-tabs {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 28px;
	margin: 32px 0 16px;
}
.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 22px;
	margin: 28px 0 14px;
}