/*
Theme Name: Northeast Softwash
Theme URI: https://www.northeast-softwash.co.uk
Author: Northeast Softwash
Author URI: https://www.northeast-softwash.co.uk
Description: A minimal block-first FSE theme for Northeast Softwash. Provides a blank canvas so the custom blocks shipped by the Northeast Softwash plugin can fully control layout and styling. Brand palette and typography mirror the static SolidJS templates.
Version: 0.1.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northeast-softwash
Tags: full-site-editing, block-themes, blank, one-column, custom-colors, custom-logo
*/

/*
 * Zero out the WordPress flow-layout block gap between NES full-bleed sections.
 *
 * WordPress outputs `margin-block-start: var(--wp--style--block-gap)` (default
 * 1.5em) on every direct child of a flow-layout container. The theme.json
 * `blocks` overrides don't fire for core/post-content and core/template because
 * those blocks don't declare spacing.blockGap support. This rule is the
 * front-end equivalent of the editor.css backstop.
 */
.wp-site-blocks > *,
.wp-block-post-content > * {
	margin-block-start: 0;
}

/* 
 * FSE wraps the header template part in an outer <header> tag. 
 * This breaks position: sticky on the inner block because the outer 
 * wrapper scrolls away. display: contents removes the outer wrapper 
 * from the layout tree, allowing the inner block to stick properly.
 */
header.wp-block-template-part {
	display: contents;
}

/*
 * Make `--wp-admin--admin-bar--position-offset` available globally.
 *
 * WordPress only defines this variable inside `.is-position-sticky` (core's
 * position block-support output). The NES header is sticky by design via
 * Tailwind utilities and never receives that class, so the variable would be
 * undefined and any `top: var(--wp-admin--admin-bar--position-offset, 0px)`
 * would silently fall back to `0` — pushing the header behind the admin bar
 * for logged-in users (you'd see the header scroll up by 32px before pinning).
 *
 * `--wp-admin--admin-bar--height` is set on `html` by `admin-bar.css`, which
 * is only enqueued when the admin bar is rendered. For logged-out visitors
 * the variable is undefined and resolves to `0px`. On screens ≤600px WP
 * positions the admin bar absolutely (it scrolls away), so the offset must
 * be `0` there to match core's behaviour.
 */
html {
	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
}

@media screen and (max-width: 600px) {
	html {
		--wp-admin--admin-bar--position-offset: 0px;
	}
}

/* 
 * Navigation styling for NES header block
 * Ensure navigation links are visible and properly styled
 */
.wp-block-nes-header .wp-block-navigation {
	flex: 1;
	justify-content: center;
}

.wp-block-nes-header .wp-block-navigation-item {
	display: flex;
	align-items: center;
}

.wp-block-nes-header .wp-block-navigation-item a {
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--ink-700);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.wp-block-nes-header .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--brand-900);
}

/* Dark variant navigation styling */
.wp-block-nes-header.text-white .wp-block-navigation-item a {
	color: rgba(255, 255, 255, 0.8);
}

.wp-block-nes-header.text-white .wp-block-navigation-item a:hover {
	color: white;
}

/* 
 * Fallback for when navigation is empty or not yet configured
 * Shows a simple navigation structure to prevent empty header
 */
.wp-block-nes-header .wp-block-navigation:empty::before {
	content: "Home About Services Contact";
	display: flex;
	gap: 1rem;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--ink-700);
	font-weight: 500;
}

.wp-block-nes-header.text-white .wp-block-navigation:empty::before {
	color: rgba(255, 255, 255, 0.8);
}

/* 
 * Footer navigation styling
 * Ensure footer navigation links match the dark theme and vertical layout
 */
.wp-block-nes-footer .wp-block-navigation {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.wp-block-nes-footer .wp-block-navigation-item a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.2s ease;
	padding: 0.25rem 0;
}

.wp-block-nes-footer .wp-block-navigation-item a:hover {
	color: white;
}

/* 
 * Footer navigation fallback for empty state
 * Shows basic sitemap when no menu is configured
 */
.wp-block-nes-footer .wp-block-navigation:empty::before {
	content: "Home\nAbout\nServices\nContact";
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	white-space: pre-line;
}

/* 
 * Mobile menu toggle & drawer styling
 */
.nes-header__toggle[aria-expanded="true"] .menu-icon {
	display: none;
}
.nes-header__toggle[aria-expanded="false"] .close-icon {
	display: none;
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation {
	display: block;
	width: 100%;
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation-item a {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Light variant mobile navigation hover/active */
.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation-item a {
	color: var(--wp--preset--color--ink-700);
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--surface-100);
	color: var(--wp--preset--color--brand-900);
}

.wp-block-nes-header .nes-header__mobile-menu .wp-block-navigation-item.current-menu-item a {
	background-color: var(--wp--preset--color--surface-100);
	color: var(--wp--preset--color--brand-900);
}

/* Dark variant mobile navigation hover/active */
.wp-block-nes-header.bg-brand-900 .nes-header__mobile-menu .wp-block-navigation-item a {
	color: rgba(255, 255, 255, 0.8);
}

.wp-block-nes-header.bg-brand-900 .nes-header__mobile-menu .wp-block-navigation-item a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
}

.wp-block-nes-header.bg-brand-900 .nes-header__mobile-menu .wp-block-navigation-item.current-menu-item a {
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
}