/*
Theme Name: Moustique TT4
Description: Full Site Editing child theme for Twenty Twenty-Four, created for the fictional Visit Moustique, Louisiana destination site.
Author: D.P. Harlan
Template: twentytwentyfour
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: moustique-tt4
*/

/*
 * The design system comes from Twenty Twenty-Four. This stylesheet is intentionally
 * limited to effects and responsive behavior not expressible through core block supports.
 */

body {
	background: var(--wp--preset--color--base);
}

.moustique-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--contrast);
}

/*
 * The front-page header occupies no document height, so the hero still begins
 * behind it like the visual mockup. The header itself remains sticky while
 * scrolling. The translucent background keeps navigation readable over both
 * photography and the light paper sections below.
 */
.moustique-site-header--overlay {
	height: 0;
	overflow: visible;
	background: transparent;
}

.moustique-site-header--overlay .moustique-header-bar {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 76%, transparent);
	backdrop-filter: blur(0.4rem);
	-webkit-backdrop-filter: blur(0.4rem);
}

.moustique-header-row {
	gap: var(--wp--preset--spacing--20);
}

.moustique-site-header a,
.moustique-footer a {
	text-decoration: none;
}

.moustique-wordmark {
	min-inline-size: max-content;
}

.moustique-main,
.moustique-main > .wp-block-post-content,
.moustique-main > .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.moustique-hero .wp-block-cover__image-background {
	object-position: center center;
}

.moustique-paper {
	background-image: url("./assets/images/paper-texture.png");
	background-repeat: repeat;
}

.moustique-feature-grid {
	align-items: stretch;
}

.moustique-feature-card {
	height: 100%;
	text-align: center;
}

.moustique-feature-grid > .wp-block-column + .wp-block-column {
	border-inline-start: thin solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.moustique-icon,
.moustique-rule-icon,
.moustique-mini-icon {
	margin-inline: auto;
}

.moustique-icon {
	max-inline-size: 4.25em;
}

.moustique-rule-icon {
	max-inline-size: 4.5em;
}

.moustique-mini-icon {
	max-inline-size: 2.25em;
}

.moustique-icon img,
.moustique-rule-icon img,
.moustique-mini-icon img {
	inline-size: 100%;
	height: auto;
}

.moustique-stamp {
	display: inline-block;
	margin-inline: auto;
	transform: rotate(-2deg);
	transform-origin: center;
}

.moustique-stories-grid,
.moustique-bottom-grid > .wp-block-columns {
	align-items: stretch;
}

.moustique-stories-grid > .wp-block-column,
.moustique-bottom-grid .wp-block-column {
	margin-block-start: 0;
}

.moustique-stories-image,
.moustique-stories-image .wp-block-cover__image-background {
	height: 100%;
}

.moustique-stay-image img {
	inline-size: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.moustique-rules > .wp-block-column + .wp-block-column {
	border-inline-start: thin solid color-mix(in srgb, var(--wp--preset--color--accent-4) 52%, transparent);
}

.moustique-bordered-column {
	height: 100%;
	border-inline-start: thin solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.moustique-card-link a,
.moustique-footer a,
.moustique-site-header a {
	transition: opacity 160ms ease;
}

.moustique-card-link a:hover,
.moustique-footer a:hover,
.moustique-site-header a:hover {
	opacity: .72;
}

/*
 * Dedicated native Navigation block used as the always-available hamburger.
 * Core owns the dialog, focus handling, scroll lock, open/close buttons, and
 * accessibility behavior. Do not hide the block itself at desktop widths.
 */
.moustique-menu-toggle {
	display: flex;
	flex: 0 0 auto;
}

.moustique-menu-toggle .wp-block-navigation__responsive-container-open,
.moustique-menu-toggle .wp-block-navigation__responsive-container-close {
	color: currentColor;
}

.moustique-menu-toggle .wp-block-navigation__responsive-container.is-menu-open {
	z-index: 1000;
}

.moustique-menu-toggle .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--30);
}

.moustique-menu-toggle .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
}

.moustique-menu-toggle .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Keep the two hero CTAs on one row except on very small screens. */
.moustique-hero .wp-block-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.moustique-hero .wp-block-button {
	flex: 0 0 auto;
	width: auto !important;
}

.moustique-hero .wp-block-button__link {
	white-space: nowrap;
}

.moustique-interior-hero .wp-block-cover__image-background {
	object-position: center;
}

@media (max-width: 64em) {
	.moustique-desktop-nav {
		display: none;
	}

	.moustique-header-row {
		justify-content: space-between;
	}
}

@media (max-width: 48em) {
	.moustique-header-bar {
		padding-inline: var(--wp--preset--spacing--20) !important;
	}

	.moustique-hero {
		min-height: 90vh !important;
	}

	.moustique-feature-grid > .wp-block-column + .wp-block-column,
	.moustique-rules > .wp-block-column + .wp-block-column,
	.moustique-bordered-column {
		border-inline-start: 0;
		border-block-start: thin solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	}

	.moustique-stories-image {
		min-height: 48vh !important;
	}
}

@media (max-width: 32em) {
	.moustique-hero .wp-block-buttons {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.moustique-card-link a,
	.moustique-footer a,
	.moustique-site-header a {
		transition: none;
	}
}