/*
Theme Name: Rebecca Sham
Description: Custom block theme for rebeccasham.com, child of Twenty Twenty-Five.
             Cream/serif quilting portfolio with diamond grid homepage.
Template: twentytwentyfive
Theme URI: https://www.rebeccasham.com
Author: Paul Sham
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rebeccasham
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
*/

.wp-block-post-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

.wp-site-blocks {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

footer.wp-block-template-part {
	margin-top: auto;
}

.wp-block-site-title {
	margin-block: 0;
	align-self: center;
	translate: 0 0.07em;
}

.wp-block-site-logo {
	align-self: center;
}

.has-footer-bg-background-color .wp-block-site-title a {
	color: var(--wp--preset--color--footer-text);
	text-decoration: none;
}

.footer-brand.wp-block-group {
	align-items: flex-start;
}

.footer-brand .wp-block-site-title {
	font-size: var(--wp--preset--font-size--md);
}

.footer-brand .wp-block-site-logo {
	align-self: flex-start;
}


.has-footer-bg-background-color .wp-block-navigation a {
	font-size: var(--wp--preset--font-size--sm);
}

.has-footer-bg-background-color .wp-block-navigation .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

/* ─── Mobile overlay: cream background, centered links ─────────────────── */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	gap: calc(var(--wp--preset--spacing--60) * 1.1) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--playfair-display) !important;
	font-size: var(--wp--preset--font-size--xl) !important;
	font-weight: 400;
	color: var(--wp--preset--color--foreground) !important;
	text-decoration: none !important;
	letter-spacing: 0;
	line-height: 1;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* Replace the default browser box outline with a clean rule */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus-visible {
	outline: 1.5px solid var(--wp--preset--color--foreground);
	outline-offset: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}

/* ─── Utility: reverse column stacking order on mobile ─────────────────── */
/* Add class "reverse-on-mobile" to any wp:columns block via Advanced → CSS class.
   Matches WP core's own stacking breakpoint (max-width: 599px). */

@media (max-width: 599px) {
	.reverse-on-mobile > .wp-block-column:first-child { order: 2; }
	.reverse-on-mobile > .wp-block-column:last-child  { order: 1; }
}

@media (max-width: 781px) {
	.header-inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.header-inner > .wp-block-group:first-child {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.header-inner > .wp-block-group:first-child .wp-block-site-logo {
		align-self: flex-start;
	}

	.header-inner > .wp-block-group:first-child .wp-block-site-logo img {
		width: 144px;
		height: auto;
	}

	.header-inner .wp-block-site-title {
		font-size: 1.35rem;
	}

	.header-inner > .wp-block-group {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none;
	}

	.header-inner > .wp-block-group:last-child {
		padding-bottom: 0;
		flex-shrink: 0;
	}

	.has-footer-bg-background-color .wp-block-navigation .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
	}
}