/* Header bits that utilities can't express: the underline-grow hover and
   the mobile open dropdown panel (the .open class is toggled by app.js). */

/* Make the sticky header actually stick. FSE wraps this block in
   <header class="wp-block-template-part"> — a box only as tall as the header,
   which traps position:sticky (a sticky element can't escape its parent's box).
   Collapse just the header's wrapper so .site-header resolves against the page
   scroll root. Scoped via :has so the footer's template part is untouched. */
.wp-block-template-part:has(> .site-header) {
	display: contents;
}

/* Lock the logo size. On WooCommerce pages a plugin stylesheet overrides the
   h-[38px] utility and the image blows up to its natural size; this wins. */
.site-header .brand img { height: 38px !important; width: auto !important; }

/* Header CTA: compact to match the prototype. In the nav the "Jetzt bestellen"
   button is shorter and lighter than a full .btn (~36px, 600, .98rem). The .btn
   component class is unlayered and appended after Tailwind's utilities, so it
   beats equal-specificity utilities — override with a higher-specificity rule. */
.site-header .nav-cta {
	padding-block: 0.25rem;
	font-size: 0.98rem;
	font-weight: 600;
}

.nav-link {
	position: relative;
	padding-block: 0.25rem;
}
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 2px;
	width: 0;
	background: var(--rb-red);
	transition: width var(--rb-dur-mid) var(--rb-ease);
}
.nav-link:hover::after {
	width: 100%;
}

/* Mobile: open hamburger panel */
.nav.open .nav-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	position: absolute;
	top: 72px;
	left: 0;
	right: 0;
	background: var(--rb-bg);
	padding: 1.5rem var(--rb-gutter) 2rem;
	border-bottom: 1px solid var(--rb-line);
	box-shadow: var(--rb-shadow);
}
.nav.open .nav-links .nav-cta {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.nav-link::after {
		transition: none;
	}
}

/* ============================================================
   Utility bar — slim strip above the nav: phone, WhatsApp, VAT price toggle.
   Ported from ../rhinobag-design (index-vat-switch.html / styles-vat-switch.css),
   token-renamed to --rb-*. Desktop: contact left, toggle right. Hidden ≤860px,
   where its contents collapse into the hamburger panel via .nav-mobile-extra.
   ============================================================ */
.util-bar { background: var(--rb-surface); border-bottom: 1px solid var(--rb-line); }
.util-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7rem;
	min-height: 38px;
	padding-block: 0.3rem;
}
.util-bar .nav-tel { font-size: 0.9rem; }
.util-tax { display: inline-flex; align-items: center; gap: 0.7rem; }
.util-contact { display: inline-flex; align-items: center; }

/* Phone + WhatsApp share the monochrome treatment (red icon, ink label) — the
   single-accent rule keeps WhatsApp's brand green out of the chrome. */
.nav-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--rb-font-display);
	font-weight: 700;
	color: var(--rb-ink);
}
.nav-tel i { color: var(--rb-red); }
.util-wa {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--rb-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--rb-ink);
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 1px solid var(--rb-line);
	transition: color 0.2s var(--rb-ease);
}
.util-wa i { color: var(--rb-red); font-size: 1.15em; }
.util-wa:hover { color: var(--rb-red); }
.util-bar-label {
	font-family: var(--rb-font-display);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--rb-muted);
}

.nav-mobile-extra { display: none; }

/* VAT switch (the plugin's buttons style) themed as an iOS-style segmented
   control; red is used only as the ACTIVE text accent so the solid-red fill
   stays reserved for CTAs. The plugin's own build/switch/style-index.css
   enqueues during the shortcode render (after this file), so equal-specificity
   rules would lose on source order — hence the two-class container prefix
   `.wp-block-wdevs-tax-switch.rb-tax-switch`, which outranks the plugin's
   single-class base selectors. (We intentionally drop the plugin's
   `is-style-inline` variant: its rules render plain underlined text + a
   divider and sit at an even higher specificity.) */
.wp-block-wdevs-tax-switch.rb-tax-switch { display: inline-flex; align-items: center; }
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-buttons {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--rb-surface-2);
	border-radius: var(--rb-pill);
}
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-buttons .wdevs-tax-button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	margin: 0;
	cursor: pointer;
	color: var(--rb-muted);
	font-family: var(--rb-font-display);
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	padding: 0.4rem 0.85rem;
	border-radius: var(--rb-pill);
	transition: background 0.25s var(--rb-ease), color 0.25s var(--rb-ease), box-shadow 0.25s var(--rb-ease);
}
/* Kill the plugin's inline-variant divider, in case the style class lingers. */
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-button::after { content: none; }
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-buttons .wdevs-tax-button:hover {
	color: var(--rb-ink);
	text-decoration: none;
}
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-buttons .wdevs-tax-button.wdevs-tax-button-active {
	background: var(--rb-card);
	color: var(--rb-red);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(19, 26, 69, 0.12);
}
.wp-block-wdevs-tax-switch.rb-tax-switch .wdevs-tax-buttons .wdevs-tax-button:focus-visible { outline: 2px solid var(--rb-red); outline-offset: 2px; }

/* Mobile: hide the strip; its contents reappear stacked inside the hamburger
   panel (.nav-mobile-extra lives in .nav-links, shown only when .nav.open). */
@media (max-width: 860px) {
	.util-bar { display: none; }
	.nav-mobile-extra {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		width: 100%;
		margin-top: 0.5rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--rb-line);
	}
	/* Stacked in the menu: phone + WhatsApp share one size; drop the inline divider. */
	.nav-mobile-extra .nav-tel,
	.nav-mobile-extra .util-wa { font-size: 1rem; }
	.nav-mobile-extra .util-wa { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rb-tax-switch .wdevs-tax-button { transition: none !important; }
}

/* Cart — the WooCommerce mini-cart block (live count + slide-out drawer),
   restyled to the prototype's .nav-cart spec: a 2.6rem square icon button,
   --rb-r-sm radius, surface hover, red Phosphor cart glyph. WC's own SVG icon
   and price are hidden and swapped for the Phosphor glyph; the count badge is
   repositioned to our spec (WC writes some badge styles inline, hence
   !important). The drawer is portalled to <body>, so its rules are scoped by
   the block's own classes, not .site-header. */
.rb-cart,
.rb-cart .wc-block-mini-cart {
	display: inline-flex;
	flex-shrink: 0;
}
.rb-cart .wc-block-mini-cart__button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--rb-r-sm);
	background: transparent;
	color: var(--rb-ink);
	cursor: pointer;
	line-height: 0;
	transition: background var(--rb-dur-fast) var(--rb-ease),
		color var(--rb-dur-fast) var(--rb-ease);
}
.rb-cart .wc-block-mini-cart__button:hover {
	background: var(--rb-surface);
	color: var(--rb-red);
}
/* Swap WC's SVG icon + price amount for our Phosphor cart glyph. The glyph goes
   on the icon wrapper (not the button) so it keeps its box — hiding the SVG
   alone collapses the wrapper to 0×0 and the badge loses its anchor. The wrapper
   is set position:static so the badge below anchors to the (relative) button
   corner, matching the prototype's .nav-cart / .cart-count placement. */
.rb-cart .wc-block-mini-cart__icon,
.rb-cart .wc-block-mini-cart__amount {
	display: none;
}
.rb-cart .wc-block-mini-cart__quantity-badge {
	position: static;
	display: inline-flex;
	line-height: 0;
}
.rb-cart .wc-block-mini-cart__quantity-badge::before {
	font-family: "Phosphor";
	content: "\e420"; /* ph-shopping-cart-simple */
	font-size: 1.4rem;
	line-height: 1;
	color: inherit;
}
/* Count badge → our .cart-count spec. WC sets bg/colour/position inline. */
.rb-cart .wc-block-mini-cart__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	left: auto;
	margin: 0;
	transform: none;
	display: grid;
	place-items: center;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	border: 2px solid var(--rb-bg);
	border-radius: var(--rb-pill);
	background-color: var(--rb-red) !important;
	color: #fff !important;
	font-family: var(--rb-font-display);
	font-weight: 700;
	font-size: 0.62rem;
	line-height: 1;
}
/* Drawer (portalled to <body>): brand the primary action buttons red. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	background-color: var(--rb-red);
	border-radius: var(--rb-r-sm);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:hover {
	background-color: var(--rb-red-hover);
}