/*
Theme Name: Lendwabe
Template: twentytwentyfive
Version: 0.1.0
Text Domain: lendwabe
Description: Lean child theme of Twenty Twenty-Five for the Lendwabe urban beekeeping brand.
*/

/* Hexagon shapes. POINTY-TOP: point at the top and bottom, flat sides.
   Measured off HOMEPAGE(1).jpg — every hexagon in the design has a height/width
   ratio of ~1.11, essentially the regular pointy-top 1.1547 (flat-top would be
   0.866). These were flat-top until 2026-08-29; the original note claiming
   flat-top "matches brand mockups" was wrong. */
.lendwabe-hexagon {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	aspect-ratio: 1 / 1.1547;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Padding percentages always resolve against WIDTH, both axes — so the
	   vertical value is 0.22 x height expressed as a share of width. */
	padding: 25% 10%;
	box-sizing: border-box;
}

.lendwabe-hexagon.is-style-filled {
	background-color: var(--wp--preset--color--lendwabe-plum);
	color: var(--wp--preset--color--lendwabe-cream);
}

.lendwabe-hexagon.is-style-filled * {
	color: inherit;
}

/* Outline hexagons use a background SVG stroke rather than CSS border,
   since clip-path clips borders unevenly at the polygon vertices. */
.lendwabe-hexagon.is-style-outline {
	background-color: transparent;
	background-image: url('assets/images/hexagon-outline.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	clip-path: none;
}

.lendwabe-hexagon-outline-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Hero: oversized headline bleeding above the photo's top edge */
.lendwabe-hero {
	position: relative;
}

.lendwabe-hero-headline {
	margin-bottom: calc(-1 * clamp(20px, 6vw, 70px)) !important;
	padding-top: clamp(0.75rem, 5vw, 3rem);
	position: relative;
	z-index: 2;
}

.lendwabe-hero-headline h1 {
	text-align: center;
	line-height: 0.85;
	color: var(--wp--preset--color--lendwabe-cream) !important;
	font-family: var(--wp--preset--font-family--anton) !important;
	font-size: clamp(4rem, 14vw, 11rem) !important;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.lendwabe-hero-mehr {
	/* Sits in normal document flow now, centered by the Cover block's own
	   contentPosition — no position:absolute needed. width/height/aspect-ratio
	   are forced because this element (clip-path + display:flex + aspect-ratio)
	   otherwise ignores its declared size — see tips-and-pitfalls.md. */
	/* Swapped for the pointy-top orientation: taller than wide, 1:1.1547. */
	width: 10rem !important;
	height: 11.55rem !important;
	aspect-ratio: auto !important;
	padding: 14px 38px !important;
	margin-top: var(--wp--preset--spacing--40, 2rem);
}

/* Mockup shows this one hexagon inverted (cream fill, plum text)
   rather than the standard filled plum/cream used elsewhere. */
.lendwabe-hero-mehr.is-style-filled {
	background-color: var(--wp--preset--color--lendwabe-cream);
	color: var(--wp--preset--color--lendwabe-plum);
}

.lendwabe-hero-mehr a {
	text-decoration: none;
}

/* Script accent font, e.g. "Oxymel" / "Honig" in headings */
.lendwabe-script {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	text-transform: none;
}

/* Decorative squiggle divider under product-card headings */
.lendwabe-squiggle {
	display: block;
	margin: 0.5em auto;
	width: 90px;
	height: auto;
}

/* Hexagon cluster tessellation helpers.
   aspect-ratio keeps the % top/left coordinates of each absolutely
   positioned hexagon proportionally correct at every viewport width. */
.lendwabe-hexcluster {
	position: relative;
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
}

.lendwabe-hexcluster .lendwabe-hexagon {
	position: absolute;
	width: 42%;
	font-size: clamp(0.75rem, 1.6vw, 1rem);
	/* A flex box's automatic minimum size lets long text override aspect-ratio,
	   which is what stretched these hexagons out of shape. min-height:0 lets the
	   ratio win and the text overflow instead. (The .lendwabe-hexgrid component
	   avoids this properly, by setting an explicit width AND height.) */
	min-height: 0;
}

.lendwabe-hexcluster-decor {
	opacity: 0.6;
}

@media (max-width: 600px) {
	.lendwabe-hexcluster-decor {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Hexagon grid — a honeycomb authored as rows of uniform cells, where every
   second row is shifted half a cell sideways and (in honeycomb mode) pulled
   up so the rows interlock.

   Supersedes .lendwabe-hexcluster above, where each hexagon was absolutely
   positioned in % and sized only by aspect-ratio. That let content height
   override the ratio, so a hexagon with more text grew taller than its
   neighbours — the "stretched hexagons" bug. Here every cell has an explicit
   width AND height derived from one variable, so they cannot drift apart.

   Author-facing knobs, all custom properties set inline on the wrapper:
     --hex-size    ONE size; the other dimension is derived (2/√3 = 1.1547)
     --hex-gap     space between cells
     --hex-bg / --hex-fg / --hex-border / --hex-border-w
     --hex-text    font-size as a fraction of --hex-size, so type scales too

   Modes:  .is-staggered  flat-top brand hexagon, small gaps (matches mockups)
           .is-honeycomb  pointy-top, gapless (decorative honeycomb graphic)
   Layout: .is-offset-first  shift odd rows instead of even, so a single top
                             cell sits centred above the pair below (pyramid)
   Cells:  .is-empty      holds its slot but invisible — lets you build shapes
           .is-outline    stroked instead of filled
           .is-lead       larger display type, e.g. "Wir sind"
   --------------------------------------------------------------------------- */
.lendwabe-hexgrid {
	/* Measured off the mockup: hexagons are ~300px wide on a 1280px page. */
	--hex-size: clamp(6rem, 23.5vw, 19rem);
	--hex-gap: 0.4rem;
	--hex-bg: var(--wp--preset--color--lendwabe-plum);
	--hex-fg: var(--wp--preset--color--lendwabe-cream);
	--hex-border: transparent;
	--hex-border-w: 0rem;
	--hex-text: 0.145;

	display: flex;
	flex-direction: column;
	/* Must be flex-start: centring each row independently would add a second,
	   cell-count-dependent offset on top of the half-step shift below and the
	   tessellation would not line up. */
	align-items: flex-start;
	width: fit-content;
	margin-inline: auto;
}

.lendwabe-hexgrid__row {
	display: flex;
	gap: var(--hex-gap);
}

.lendwabe-hexgrid__row:nth-child(even) {
	/* margin, not transform: a transform does not contribute to the grid's
	   fit-content width, so a right-aligned grid overflowed the page by half a
	   cell and produced a horizontal scrollbar. */
	margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2);
}

/* Which rows are offset decides whether a cluster reads as a pyramid (one cell
   centred above two) or a staircase. By default even rows shift; with
   .is-offset-first the odd rows shift instead, so a single top cell lands
   centred over the pair below it — the arrangement the mockups use. */
.lendwabe-hexgrid.is-offset-first .lendwabe-hexgrid__row:nth-child(even) {
	margin-left: 0;
}

.lendwabe-hexgrid.is-offset-first .lendwabe-hexgrid__row:nth-child(odd) {
	margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2);
}

.lendwabe-hexgrid__cell {
	flex: 0 0 auto;
	width: var(--hex-w);
	height: var(--hex-h);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	isolation: isolate; /* so the fill layer can sit behind the text */
	clip-path: var(--hex-clip);
	background: var(--hex-border);
	color: var(--hex-fg);
	font-size: calc(var(--hex-size) * var(--hex-text));
	line-height: 1.2;
	/* calc(), not %: percentage padding on a flex item resolves against the
	   ROW's width, not the cell's, which silently blows the text box up. */
	padding: var(--hex-pad-y) var(--hex-pad-x);
}

.lendwabe-hexgrid__cell::before {
	content: "";
	position: absolute;
	inset: var(--hex-border-w);
	clip-path: var(--hex-clip);
	background: var(--hex-bg);
	z-index: -1;
}

.lendwabe-hexgrid__cell > * {
	margin: 0;
}

.lendwabe-hexgrid__cell.is-empty {
	visibility: hidden;
}

/* flat-top brand hexagon, offset rows with visible gaps — the mockup look */
.lendwabe-hexgrid.is-staggered {
	--hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	--hex-w: calc(var(--hex-size) * 1.1547);
	--hex-h: var(--hex-size);
	--hex-pad-y: calc(var(--hex-h) * 0.10);
	--hex-pad-x: calc(var(--hex-w) * 0.22);
}

.lendwabe-hexgrid.is-staggered .lendwabe-hexgrid__row + .lendwabe-hexgrid__row {
	margin-top: var(--hex-gap);
}

/* pointy-top, tight tessellation — rows overlap by a quarter of a cell */
.lendwabe-hexgrid.is-honeycomb {
	--hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	--hex-w: var(--hex-size);
	--hex-h: calc(var(--hex-size) * 1.1547);
	--hex-pad-y: calc(var(--hex-h) * 0.22);
	--hex-pad-x: calc(var(--hex-w) * 0.10);
}

.lendwabe-hexgrid.is-honeycomb .lendwabe-hexgrid__row + .lendwabe-hexgrid__row {
	margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.866);
}

/* Abutting clip-path shapes each antialias against transparency, leaving a
   hairline seam that pools into light diamonds where three cells meet.
   A sub-pixel upscale makes neighbours overlap just enough to hide it. */
.lendwabe-hexgrid.is-honeycomb .lendwabe-hexgrid__cell {
	transform: scale(1.006);
}

.lendwabe-hexgrid__cell.is-outline {
	--hex-bg: var(--wp--preset--color--lendwabe-cream);
	--hex-border: var(--wp--preset--color--lendwabe-plum);
	--hex-border-w: 0.16rem;
	--hex-fg: var(--wp--preset--color--lendwabe-plum);
}

/* Clusters that sit against the page edge and overlap the photo beside them,
   the way the mockups place them. Two constraints drive the shape of this:
   - The constrained layout sets margin-inline:auto !important on its children,
     so the wrapper uses the .alignfull escape hatch rather than fighting that.
   - .wp-block-cover has overflow:clip, so a cluster CANNOT straddle a Cover's
     edge from inside it. It has to be a sibling, pulled over the Cover with a
     negative margin, which is why this establishes a stacking context. */
.lendwabe-cluster-bleed {
	display: flex;
	position: relative;
	z-index: 1;
	pointer-events: none; /* the empty half of the strip must not eat clicks */
}

.lendwabe-cluster-bleed > * {
	pointer-events: auto;
}

/* The grid centres itself with margin-inline:auto, and auto margins beat
   justify-content inside a flex container — so clear them here or is-left /
   is-right would have no effect. */
.lendwabe-cluster-bleed > .lendwabe-hexgrid {
	margin-inline: 0;
}

.lendwabe-cluster-bleed.is-right {
	justify-content: flex-end;
}

/* Lift a block above a LATER sibling that overlaps it — e.g. the Standorte
   photo over the decorative hexagons below it.

   Lowering the overlapping block to z-index:0 does not work: a positioned
   element with z-index:0 still paints above all non-positioned in-flow
   content, so the block underneath has to be raised instead. z-index:-1 on the
   overlapper would work too, but then it disappears the moment any ancestor
   gains a background — raising is the safer direction. */
.lendwabe-above {
	position: relative;
	z-index: 2;
}

.lendwabe-cluster-bleed.is-left {
	justify-content: flex-start;
}

/* A bleed cluster overlaps its neighbour deliberately, so the layout's
   automatic block gap on either side works against the negative margins that
   create the overlap. Cancel it on the cluster and on whatever follows it. */
.lendwabe-cluster-bleed,
.lendwabe-cluster-bleed + * {
	margin-block-start: 0 !important;
}

.lendwabe-hexgrid__cell.is-lead {
	font-family: var(--wp--preset--font-family--anton);
	font-size: calc(var(--hex-size) * 0.2);
	letter-spacing: 0.02em;
}

/* Site nav — a full-width semi-transparent bar pinned to the top, collapsing
   to the Navigation block's built-in burger menu on small screens.

   The BAR is the header Group (.lendwabe-nav-bar), not the Navigation block.
   That is deliberate: its padding is what sets the bar's depth, and as a Group
   attribute it is editable in the Site Editor (Appearance > Editor > Patterns >
   Template Parts > Header, select the Group, Dimensions > Padding) instead of
   being buried in this stylesheet. Only what the UI cannot express lives here:
   the fixed positioning and the translucent fill.

   Note the Navigation block copies its custom className onto the inner <ul>
   as well as the <nav>, so any rule meant for the nav wrapper alone must be
   scoped with nav. — an unscoped position:fixed here previously hit the <ul>
   too, took the links out of flow and left them hanging below the bar. */
.lendwabe-nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	max-width: none !important;
	/* Semi-transparent so the hero photo reads through. Deliberately NOT
	   backdrop-filter: it makes this a containing block for fixed-position
	   descendants, which collapses the mobile burger overlay into this bar —
	   see the backdrop-filter entry in tips-and-pitfalls.md. */
	background-color: color-mix(in srgb, var(--wp--preset--color--lendwabe-cream) 72%, transparent);
}

/* Logged-in views put the fixed wp-admin bar at top:0, which would otherwise
   sit right on top of this bar. WP adds .admin-bar to <body> only when it is
   showing, so visitors still get a bar flush to the top. */
body.admin-bar .lendwabe-nav-bar {
	top: var(--wp-admin--admin-bar--height, 32px);
}

nav.lendwabe-floating-nav {
	width: auto !important;
	/* The header's constrained layout caps children at the content width. */
	max-width: none !important;
	flex-wrap: nowrap !important;
}

/* Core sets background-color:inherit on the closed container, which would
   paint the bar's translucent fill a second time and double its opacity. */
.lendwabe-nav-bar .wp-block-navigation__responsive-container:not(.is-menu-open) {
	background-color: transparent !important;
}

/* The container itself is display:block, so centring has to go on the content. */
.lendwabe-floating-nav .wp-block-navigation__responsive-container-content {
	justify-content: center;
}

.lendwabe-floating-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	flex-direction: row !important;
}

.lendwabe-floating-nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--lendwabe-plum);
	font-family: var(--wp--preset--font-family--anton);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: clamp(1rem, 1.15vw, 1.25rem);
	text-decoration: none;
	padding: 0.2rem 1.25rem;
}

.lendwabe-floating-nav .wp-block-navigation__responsive-container-open,
.lendwabe-floating-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--lendwabe-plum);
}

/* The open burger overlay. !important because core/TT5 paint it with the
   white Base palette colour at a specificity this would otherwise lose to,
   and the same applies to the link colour inside it. */
.lendwabe-floating-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--lendwabe-cream) !important;
}

.lendwabe-floating-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--lendwabe-plum) !important;
}

/* Footer links — Anton, plum and unadorned, as the mockup shows, rather than
   the theme's default small underlined body links. */
.lendwabe-footer-links a {
	font-family: var(--wp--preset--font-family--anton);
	color: var(--wp--preset--color--lendwabe-plum);
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.lendwabe-footer-links a:hover,
.lendwabe-footer-links a:focus-visible {
	text-decoration: underline;
}

/* Events list row: label, a rule that stretches to fill, then the date.
   The rule is a pseudo-element ordered between the two paragraphs, so the
   block markup stays a plain flex group with two paragraphs in it — the
   mockup draws the line only in the gap, not under the text. */
.lendwabe-event-row {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(1.1rem, 2.2vw, 1.8rem);
	line-height: 1.35;
}

.lendwabe-event-row > :first-child { order: 0; }

.lendwabe-event-row::after {
	content: "";
	order: 1;
	flex: 1 1 auto;
	align-self: flex-end;
	margin-bottom: 0.18em;
	border-bottom: 1px solid var(--wp--preset--color--lendwabe-ink);
}

.lendwabe-event-row > :last-child { order: 2; }

/* ---------------------------------------------------------------------------
   Produkte page components
   --------------------------------------------------------------------------- */

/* "mit" divider inside a product card. One native paragraph carrying the word;
   the hand-drawn rule behind it is a background SVG, so the markup stays a
   plain block and the word keeps the real Caveat webfont.
   Measured off the mockup: rule spans 65% of the card's content width. */
.lendwabe-mit-divider {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	line-height: 1;
	text-align: center;
	text-transform: none;
	color: var(--wp--preset--color--lendwabe-ink);
	background-image: url('assets/images/mit-line.svg');
	background-repeat: no-repeat;
	background-position: center 42%;
	background-size: 65% auto;
	margin-block: 0.3rem 0.45rem;
	padding-block: 0.55rem;
}

/* Product card. The photo is flush to the card's inner edges and the text
   block sits above it (or below, on the offset middle card). */
.lendwabe-product-card {
	container-type: inline-size;
}

.lendwabe-product-card .lendwabe-card-label {
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(0.95rem, 1.95vw, 1.55rem);
	line-height: 1.1;
	text-align: center;
	margin-block: 0;
}

.lendwabe-product-card .lendwabe-card-name {
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(1.4rem, 3.1vw, 2.5rem);
	line-height: 1.05;
	text-align: center;
	text-transform: none;
	margin-block: 0;
}

/* Section headline pairing the condensed display face with the script accent,
   e.g. "Unser Oxymel". The script word is set larger and pulled onto the same
   optical line, which is how the mockup draws it. */
.lendwabe-script-headline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.1em;
	font-size: clamp(2.5rem, 9.6vw, 9rem);
	line-height: 1;
	margin-block: 0;
}

.lendwabe-script-headline .lendwabe-script {
	font-size: 1.3em;
	line-height: 0.8;
}

/* The Tip paragraph hangs further left than the description above it, tucking
   under the tail of the script word — a deliberate stagger in the mockup.
   It only clears the script glyphs because the heading row is TOP-aligned and
   a spacer pushes the Tip below them; with the row centre-aligned this much
   hang collides with the word. Change those together, not separately.
   Used in exactly one place: the Oxymel intro on the Produkte page. */
.lendwabe-tip {
	margin-left: -45%;
}

/* Static carousel hint at the right edge of a card row. Decorative only:
   there is no real carousel behind it. */
.lendwabe-card-row {
	position: relative;
}

.lendwabe-card-row::after {
	content: "";
	position: absolute;
	right: -2.6rem;
	top: 50%;
	translate: 0 -50%;
	border-style: solid;
	border-width: 0.85rem 0 0.85rem 1.15rem;
	border-color: transparent transparent transparent var(--wp--preset--color--lendwabe-cream);
	pointer-events: none;
}

@media (max-width: 781px) {
	.lendwabe-card-row::after { display: none; }
	.lendwabe-tip { margin-left: 0; }
}

/* Decorative squiggles flanking the intro copy. */
.lendwabe-squiggle-tall img {
	width: clamp(3.5rem, 8vw, 6.5rem);
	height: auto;
}

/* The mockup's right-hand squiggle is the same motif flipped, sitting against
   the right edge of its column rather than the left. */
.lendwabe-squiggle-tall.is-mirrored {
	width: fit-content;
	margin-left: auto;
	margin-right: 30%;
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   Events page components
   --------------------------------------------------------------------------- */

/* The decorative honeycomb behind the closing photo is wider than the page on
   purpose, so cells run off both edges. Clip rather than let it scroll. */
.lendwabe-hexfield {
	position: relative;
	overflow-x: clip;
}

/* Centring a box that is WIDER than its container is the whole problem here.
   Neither margin-inline:auto nor a centring flex parent will do it: both pin an
   over-wide box to the start edge so it hangs off one side only (browsers avoid
   pushing content off the start edge, where it would be unreachable).

   A translateX(-50%) does centre it, but a transform creates a STACKING
   CONTEXT, which traps every cell inside the grid — the "Wir freuen" cell then
   cannot paint above the photo no matter what z-index it carries. So the
   offset is done with a margin instead. --hex-span is the grid's width in
   cell units (columns + 0.5 for the offset rows), set inline beside --hex-size.
   The field clips the overflow, so this cannot raise a scrollbar. */
.lendwabe-hexfield .lendwabe-hexgrid {
	margin-inline: calc(50% - (var(--hex-span, 5.5) * var(--hex-size) / 2)) 0;
}

/* The photo covers the decorative cells, but the "Wir freuen uns auf dich!"
   hexagon sits in FRONT of it — so the photo takes a stacking level of its own
   and that one cell is lifted above it. The grid itself must NOT get a
   z-index, or its children could not out-paint the photo. */
.lendwabe-hexfield__photo {
	--hex-size: clamp(6rem, 23.5vw, 19rem);
	position: relative;
	z-index: 1;
	width: 85.5%;
	margin-inline: auto;
	/* Pull the photo up over the honeycomb so the "Wir freuen" cell overlaps
	   its top edge. The grid is five rows tall; expressing the pull in
	   --hex-size (the same clamp the grid uses) keeps the overlap correct at
	   every viewport width instead of drifting the way a vw value would. */
	margin-top: calc(var(--hex-size) * -2.38);
}

.lendwabe-hexgrid__cell.is-front {
	z-index: 2;
}

/* Staggered founder portraits: the second sits lower, as the mockup draws it.
   !important because core zeroes margin-block-start on every column. */
.wp-block-columns > .wp-block-column.lendwabe-portrait-late {
	margin-block-start: clamp(1rem, 15.5vw, 13rem) !important;
}

@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column.lendwabe-portrait-late {
		margin-block-start: 0 !important;
	}
}