/*
Theme Name: Luce
Theme URI: https://wordpress.com/themes/luce/
Description: Simple resume and blog theme with bright personality.
Version: 1.0.16
Author: Automattic
Author URI: https://automattic.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luce
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: .0625em !important;
	text-underline-offset: .15em;
}

/*
 * Vertical "Schriftzug" wordmark in the yellow sidebar, repeated as
 * many times as fit down the sidebar's actual length (which matches
 * the page's real content height, not just one screen). More copies
 * are rendered (30) than could ever fit on a real page; `overflow:
 * hidden` clips whatever doesn't fit, so exactly the right count
 * always shows, on any page length, with no JS needed to calculate
 * it.
 *
 * The repeat container is deliberately `position:absolute`, filling
 * `.sidebar-fill-anchor` (its `position:relative` parent) completely
 * — NOT sized via `height:100%` while participating in normal flow.
 * That was tried first and created a feedback loop: 30 real, full-
 * size copies sitting in normal flow made the sidebar's own content
 * enormous (~13,400px), and since flex "stretch" sizing derives the
 * row's height from its tallest column, the sidebar ended up
 * dictating the whole page's height instead of the other way around
 * — every page rendered at the same inflated height regardless of
 * its actual content length. Taking the repeat container out of
 * normal flow (`position:absolute`) means its content can no longer
 * inflate its ancestors' size — it just fills whatever height the
 * *content* column ends up being, which is what determines the
 * page's real length.
 */
.sidebar-fill-anchor {
	position: relative;
	height: 100%;
	min-height: 100vh;
}
.vertical-logotype-repeat {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5cm;
	overflow: hidden;
	box-sizing: border-box;
	padding-top: calc(2.5rem + 0.5cm);
}
.vertical-logotype {
	position: relative;
	width: 72px;
	height: 390px;
	max-width: 100%;
	flex-shrink: 0;
	overflow: hidden;
}
.vertical-logotype img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 390px;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%) rotate(-90deg);
}

/*
 * Homepage "Seit 30 Jahren..." hero group sits inside a full-width
 * accent-colored band, which centers it (via WordPress core's
 * `.is-layout-constrained > * { margin: auto !important }` rule)
 * instead of letting it hug the left edge like the rest of the
 * page's content. Override back to left-aligned.
 */
.hero-align-left {
	margin-left: calc(-1 * var(--wp--preset--spacing--50)) !important;
	margin-right: auto !important;
}

/*
 * Yellow sidebar (Kröte logo + vertical Schriftzug wordmark) shrinks
 * in two steps as the viewport narrows, instead of staying a fixed
 * 80px at every screen size. The logo image and the wordmark's box
 * are scaled down proportionally at each step so nothing overflows
 * the narrower column. `!important` needed since both the column's
 * flex-basis and the image's width are inline styles.
 */
@media (max-width: 900px) {
	.sidebar-col {
		flex-basis: 60px !important;
	}
	.sidebar-col figure img {
		width: 60px !important;
	}
	.vertical-logotype {
		width: 36px;
		height: 195px;
	}
	.vertical-logotype img {
		width: 195px;
	}
}
@media (max-width: 480px) {
	.sidebar-col {
		flex-basis: 20px !important;
	}
	.sidebar-col figure,
	.vertical-logotype-repeat {
		display: none;
	}
}

/*
 * Mobile nav ("=" hamburger): by default WordPress opens this as a
 * full-screen modal overlay (fixed, covers the whole viewport, huge
 * empty space around a few links). Override it to unfold inline
 * instead — a plain vertical list right under the header that pushes
 * the rest of the page content down, no overlay.
 */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		position: static !important;
		inset: auto !important;
		height: auto !important;
		width: auto !important;
		z-index: auto !important;
		overflow: visible !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: transparent !important;
		padding: 0 !important;
	}
	html.has-modal-open {
		overflow: visible !important;
	}
	.wp-block-navigation__responsive-container-content {
		padding-top: var(--wp--preset--spacing--30) !important;
	}
	.wp-block-navigation__responsive-container-close {
		position: static !important;
		display: flex !important;
		justify-content: flex-end;
		width: 100%;
	}
	.wp-block-navigation__responsive-container-close svg {
		width: 16px;
		height: 16px;
	}
	/* The hamburger button and the unfolding list are flex siblings in
	   a row container — stack them vertically instead, and hide the
	   now-redundant hamburger (the "X" inside the unfolded list closes
	   it) while it's open. */
	.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) {
		flex-direction: column;
		align-items: flex-start;
	}
	.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) > .wp-block-navigation__responsive-container-open {
		display: none;
	}
}