/*
 * Moonlit Daisy — custom CSS.
 *
 * Only rules that block settings and theme.json cannot reproduce
 * belong in this file. Colours, typography, spacing and widths are
 * defined in theme.json — reference them here via the generated
 * custom properties, e.g. var(--wp--preset--color--primary).
 */

/* Site-wide starry sky. The Figma page frame layers this texture at 60%
   opacity beneath a vertical dimming gradient, behind the header, content
   and footer alike; the mobile frame reuses the identical treatment.
   Layers (top to bottom): dim gradient (.34 → .58), a 40% base-colour veil
   that bakes in the texture's 60% layer opacity, then the star tile at its
   designed 1920×965 size, repeating. The solid base colour from theme.json
   remains underneath as the fallback, so content contrast is unchanged. */
body {
	background-image:
		linear-gradient(to bottom, rgba(27, 22, 35, 0.34), rgba(27, 22, 35, 0.58)),
		linear-gradient(rgba(27, 22, 35, 0.4), rgba(27, 22, 35, 0.4)),
		url('../images/starry-background.webp');
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: 100% 100%, 100% 100%, 1920px 965px;
	background-position: top left;
}

/* Visible keyboard focus for links and buttons (blocks cannot set :focus-visible).
   Uses real element selectors (not :where()) so the indicator keeps enough
   specificity to survive competing resets — WCAG 2.4.7 (A11Y-003). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Glowing availability dot on the hero status line (::before + box-shadow
   glow are not reproducible with block settings). */
.md-status::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	margin-right: 0.625rem;
	vertical-align: 0.03em;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 10px 0 rgba(241, 202, 138, 0.7);
}

.md-status strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Hero lede wraps at ~500px in the design; paragraphs have no max-width control. */
.md-hero-lede {
	max-width: 31.25rem;
}

/* Hero on small screens: text column first (Figma mobile frame), image below,
   and full-width stacked buttons. Blocks cannot reorder stacked columns. */
@media (max-width: 781px) {
	.md-hero-columns > .wp-block-column:first-child {
		order: 2;
	}

	.md-hero-buttons .wp-block-button,
	.md-hero-buttons .wp-block-button__link,
	.md-hello-buttons .wp-block-button,
	.md-hello-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Say hello: the pitch wraps at ~560px in the design; paragraphs have no
   max-width control. */
.md-hello-lede {
	max-width: 35rem;
}

/* Selected work: card treatment for the project screenshots — drop shadow is
   not available in image block settings. */
.md-work-row .wp-block-image img {
	border-radius: 4px;
	box-shadow: 0 14px 20px rgba(0, 0, 0, 0.42);
}

/* Selected work on small screens: reversed rows put the image back on top
   (blocks cannot reorder stacked columns), and the Figma mobile frame omits
   the problem line. */
@media (max-width: 781px) {
	.md-work-reverse > .wp-block-column:first-child {
		order: 2;
	}

	.md-work-problem {
		display: none;
	}
}

/* About: tune the core drop cap to the design (lavender, light, two-line)
   — the drop cap has no block-level colour/size settings. */
.md-about-intro.has-drop-cap:not(:focus)::first-letter {
	color: var(--wp--preset--color--primary);
	font-size: 3.35em;
	font-weight: 300;
	margin: 0.1em 0.12em 0 0;
}

/* About: keep the upscaled pixel-art daisy crisp and float it on the deep
   shadow from the design. */
.md-about-daisy img {
	image-rendering: pixelated;
	filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

/* About on small screens: daisy first and centered text, drop cap off
   (per the Figma mobile frame). */
@media (max-width: 781px) {
	.md-about-columns > .wp-block-column:first-child {
		order: 2;
	}

	.md-about-columns .wp-block-column {
		text-align: center;
	}

	.md-about-intro.has-drop-cap:not(:focus)::first-letter {
		float: none;
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		margin: 0;
	}
}

/* Header: make the current menu item visually distinct (no block setting
   targets .current-menu-item / aria-current). */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* Header: style the native Navigation overlay toward the Figma menu-open
   frame — large light links with hairline dividers. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.75rem;
	font-weight: 300;
}

/* Header: grow the hamburger/close hit area to the 44px touch target the
   design annotates, without shifting the visual position. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* Footer on small screens: the three zones stack centered. Stacking through
   the whole tablet range (≤781px) avoids the awkward 2-row wrap that occurred
   at 600–781px when the brand line exceeded the row width (RESP-001). Long
   strings stay wrappable. */
.md-footer-row p {
	overflow-wrap: anywhere;
}

@media (max-width: 781px) {
	.md-footer-row {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
}

/* Pixel numerals used as flex items must not shrink or wrap (no block
   setting controls flex-shrink). */
.md-num {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Call-out bar on small screens: the vertical dividers between cells become
   horizontal rules between stacked rows (blocks cannot switch border sides
   responsively). */
@media (max-width: 781px) {
	.md-callout > .wp-block-column {
		border-left: none !important;
		padding: 1rem 0 !important;
	}

	.md-callout > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}