/*
Theme Name: Net Launch
Theme URI: https://www.netlaunch.co.uk
Author: Net Launch
Author URI: https://www.netlaunch.co.uk
Description: The Net Launch base theme. A fast, core-only block theme with switchable header and footer layouts, separate desktop, mobile and footer menus, and style variations for every kind of business. Pair it with the Net Launch Core plugin for the full options panel.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: netlaunch
Tags: block-theme, full-site-editing, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, block-patterns, style-variations
*/

/*
 * House rules for this file:
 * - Anything that can live in theme.json lives there.
 * - Our own classes are prefixed "nl-".
 * - The only WordPress classes styled here are the long-standing navigation
 *   overlay classes (stable since WordPress 5.9), needed for the mobile menu styles.
 */

/* ---------- Basics ---------- */

:root {
	--nl-breakpoint: 900px;
	--nl-header-pad: 16px;
	--nl-logo-w: 170px;
	--nl-logo-w-mobile: 130px;
	--nl-menu-bg: var(--wp--preset--color--base);
	--nl-menu-text: var(--wp--preset--color--contrast);
	--nl-header-h: 72px;
	--nl-radius: 12px;
}

a,
.wp-element-button {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The page always fills the screen, so the footer sits at the bottom even on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .nl-main {
	flex: 1 0 auto;
}

.wp-site-blocks > * {
	flex-shrink: 0;
}

/* Edge-to-edge sections: no gaps between header, sections and footer. */
.wp-site-blocks > * + *,
.nl-section,
.nl-main,
main.wp-block-group {
	margin-block-start: 0;
}

.nl-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.nl-main {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.nl-card {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--nl-radius);
	padding: var(--wp--preset--spacing--40);
}

/* ---------- Header ---------- */

.nl-site-header {
	position: relative;
	z-index: 100;
}

.nl-header {
	padding-top: var(--nl-header-pad);
	padding-bottom: var(--nl-header-pad);
	transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.nl-header-border .nl-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.nl-header__inner {
	gap: var(--wp--preset--spacing--30);
}

.nl-header__actions {
	gap: var(--wp--preset--spacing--30);
}

.nl-brand {
	gap: 0.75rem;
	min-width: 0;
}

.nl-header .wp-block-site-logo img {
	width: var(--nl-logo-w) !important;
	max-width: 100%;
	height: auto;
	transition: width 0.25s ease;
}

.nl-header .wp-block-site-logo {
	line-height: 0;
}

/* Sticky header */
.nl-sticky-header .nl-site-header {
	position: sticky;
	top: 0;
}

.admin-bar.nl-sticky-header .nl-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.nl-sticky-header .nl-site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar.nl-sticky-header .nl-site-header {
		top: 0;
	}
}

/* Shrink on scroll */
.nl-shrink-header.nl-scrolled .nl-header {
	padding-top: calc(var(--nl-header-pad) * 0.5);
	padding-bottom: calc(var(--nl-header-pad) * 0.5);
}

.nl-shrink-header.nl-scrolled .nl-header .wp-block-site-logo img {
	width: calc(var(--nl-logo-w) * 0.8) !important;
}

.nl-header-shadow.nl-scrolled .nl-header {
	box-shadow: 0 6px 24px rgba(11, 16, 34, 0.08);
}

/* Centred layout */
.nl-header--centred .nl-header__row {
	padding-top: var(--wp--preset--spacing--20);
	gap: var(--wp--preset--spacing--40);
}

/* Split layout: menu | logo | button */
.nl-header--split .nl-header__inner > .nl-header__left,
.nl-header--split .nl-header__inner > .nl-header__actions {
	flex: 1 1 0;
}

.nl-header--split .nl-brand {
	justify-content: center;
}

/* Transparent header over the hero */
.nl-header-transparent .nl-site-header {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.admin-bar.nl-header-transparent .nl-site-header {
	top: 32px;
}

.nl-header-transparent.nl-sticky-header .nl-site-header {
	position: fixed;
}

@media (max-width: 782px) {
	.admin-bar.nl-header-transparent .nl-site-header {
		top: 46px;
	}
}

.nl-header-transparent:not(.nl-scrolled) .nl-header {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	box-shadow: none !important;
	color: var(--nl-transparent-text, #fff) !important;
}

.nl-header-transparent:not(.nl-scrolled) .nl-header a:not(.wp-element-button),
.nl-header-transparent:not(.nl-scrolled) .nl-header .wp-block-navigation__responsive-container-open {
	color: var(--nl-transparent-text, #fff) !important;
}

/* Alternative logo (e.g. white logo over a dark hero) */
.nl-logo-alt {
	display: none !important;
}

.nl-header-transparent:not(.nl-scrolled) .nl-header .nl-has-alt-logo img:not(.nl-logo-alt) {
	display: none !important;
}

.nl-header-transparent:not(.nl-scrolled) .nl-header .nl-has-alt-logo .nl-logo-alt {
	display: inline-block !important;
}

/* Desktop navigation dropdowns */
.nl-nav-desktop .wp-block-navigation__submenu-container {
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border) !important;
	box-shadow: 0 12px 32px rgba(11, 16, 34, 0.12);
	padding: 6px 0;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.nl-nav-desktop .wp-block-navigation__submenu-container a {
	padding: 8px 18px !important;
}

/* ---------- Desktop / mobile switching ---------- */
/* Default switch point is 900px. The Net Launch Core plugin can change it. */

@media (max-width: 899.98px) {
	body:not(.nl-bp) {
		--nl-logo-w: var(--nl-logo-w-mobile);
	}

	body:not(.nl-bp) .nl-nav-desktop,
	body:not(.nl-bp) .nl-desktop-only,
	body:not(.nl-bp) .nl-header .nl-header-cta {
		display: none !important;
	}

	body:not(.nl-bp) .nl-header--centred .nl-header__top {
		justify-content: space-between !important;
	}

	body:not(.nl-bp) .nl-header--split .nl-brand {
		justify-content: flex-start;
	}
}

@media (min-width: 900px) {
	body:not(.nl-bp) .nl-nav-mobile:not(.nl-nav-always),
	body:not(.nl-bp) .nl-mobile-only {
		display: none !important;
	}
}

/* ---------- Mobile menu styles ---------- */

.nl-nav-mobile .wp-block-navigation__responsive-container-open,
.nl-nav-mobile .wp-block-navigation__responsive-container-close {
	padding: 6px;
}

.nl-nav-mobile .wp-block-navigation__responsive-container-open svg,
.nl-nav-mobile .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.nl-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--nl-menu-bg) !important;
	color: var(--nl-menu-text) !important;
}

.nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	gap: 0;
}

.nl-nav-mobile .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	width: 100%;
	gap: 0 !important;
}

.nl-nav-mobile .is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start !important;
}

.nl-nav-mobile .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 0 !important;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--nl-menu-text) !important;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.nl-nav-mobile .is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 16px !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

.nl-nav-mobile .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem;
	font-weight: 500;
	opacity: 0.85;
}

/* Menu links always use the menu colours, even over a transparent header */
body .nl-header .nl-nav-mobile .is-menu-open a.wp-block-navigation-item__content,
body .nl-header .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--nl-menu-text) !important;
}

/* Full screen (default) */
.nl-menu-fullscreen .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top: 56px;
}

.nl-menu-fullscreen .nl-nav-mobile .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
}

/* Side drawer and dropdown share a dimmed backdrop */
.nl-menu-drawer .nl-nav-mobile .wp-block-navigation__responsive-container.is-menu-open,
.nl-menu-dropdown .nl-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(11, 16, 34, 0.55) !important;
	padding: 0 !important;
	animation: none;
}

.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-close,
.nl-menu-dropdown .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
}

.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog,
.nl-menu-dropdown .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
	position: fixed;
	background-color: var(--nl-menu-bg);
	color: var(--nl-menu-text);
	overflow-y: auto;
	margin: 0 !important;
	box-sizing: border-box;
}

.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-content,
.nl-menu-dropdown .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0 !important;
}

/* Side drawer */
.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 86vw);
	padding: 72px 28px 32px;
	box-shadow: -12px 0 40px rgba(11, 16, 34, 0.25);
	animation: nl-drawer-in 0.28s ease;
}

.admin-bar.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
		top: 32px;
	}
}

/* Dropdown under the header */
.nl-menu-dropdown .nl-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--nl-header-h) !important;
}

.nl-menu-dropdown .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-dialog {
	top: var(--nl-header-h);
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--nl-header-h));
	padding: 12px 24px 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 18px 40px rgba(11, 16, 34, 0.2);
	animation: nl-dropdown-in 0.22s ease;
}

.nl-menu-dropdown .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-close {
	display: none;
}

.nl-menu-drawer .nl-nav-mobile .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 20px;
	right: 20px;
}

@keyframes nl-drawer-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes nl-dropdown-in {
	from { transform: translateY(-12px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ---------- Title banner and sidebar templates ---------- */

.nl-title-banner {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
}

.nl-title-banner .wp-block-post-title {
	margin-top: 0;
}

.nl-title-banner__intro {
	font-size: var(--wp--preset--font-size--large);
	opacity: 0.85;
}

.nl-header-transparent .nl-title-banner,
.nl-header-transparent .wp-site-blocks > main > .wp-block-post-content > :first-child.alignfull {
	padding-top: calc(var(--wp--preset--spacing--70) + var(--nl-header-h));
}

.nl-with-sidebar {
	gap: var(--wp--preset--spacing--60);
}

.nl-sidebar > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------- Section patterns ---------- */

.nl-eyebrow {
	margin-bottom: 0;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nl-faq {
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.nl-faq summary {
	font-weight: 600;
	cursor: pointer;
}

.nl-faq > :not(summary) {
	margin-top: 10px;
}

.nl-price-row {
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.nl-price-row p {
	margin: 0;
}

.nl-price {
	white-space: nowrap;
	font-size: 1.15em;
}

.nl-contact-strip .wp-block-heading {
	margin-bottom: 8px;
}

.nl-contact-strip a {
	color: inherit;
}

/* ---------- Footer ---------- */

.nl-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.nl-footer a {
	color: inherit;
	text-decoration: none;
}

.nl-footer a:hover {
	opacity: 0.75;
}

.nl-footer .wp-block-site-title a {
	color: inherit;
}

.nl-footer .wp-block-site-logo img {
	width: var(--nl-footer-logo-w, 170px) !important;
	height: auto;
}

.nl-footer :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.nl-footer-heading {
	margin-bottom: var(--wp--preset--spacing--20);
	letter-spacing: 0.02em;
}

.nl-footer-tagline {
	opacity: 0.8;
}

.nl-footer-menu {
	gap: 0.6em !important;
}

.nl-footer-sep {
	opacity: 0.2;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.nl-footer-bottom p {
	margin: 0;
	opacity: 0.8;
}

.nl-footer--centred,
.nl-footer--centred .nl-footer-bottom {
	text-align: center;
	justify-content: center !important;
}

.nl-footer-stack {
	gap: var(--wp--preset--spacing--30);
}

.nl-footer .nl-footer-cols > .wp-block-column {
	min-width: 0;
}

.nl-footer .nl-cols-trimmed > .wp-block-column {
	flex-grow: 1;
}

.nl-fitem > .nl-footer-heading {
	margin-top: 0;
}

.nl-fitem + .nl-fitem {
	margin-top: var(--wp--preset--spacing--50);
}

.nl-footer-about {
	opacity: 0.8;
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.nl-footer-bottom {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 4px;
	}

	.nl-footer--centred .nl-footer-bottom {
		align-items: center !important;
	}
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

.nl-footer--centred .nl-footer-menu,
.nl-footer-row .nl-footer-menu {
	gap: 0.5em 1.6em !important;
}

/* ---------- Page title (fallback without Net Launch Core) ---------- */

.nl-title-slot {
	margin-block-start: 0;
}

.nl-page-title {
	padding-top: var(--wp--preset--spacing--60);
}

.nl-page-title + * {
	margin-block-start: 0;
}

.nl-title-slot + .nl-main {
	padding-top: var(--wp--preset--spacing--40);
}

/* Editor only: hide the automatic site name next to a logo, as on the live site. */
.editor-styles-wrapper .wp-block-site-logo:not(:empty) ~ .nl-site-title-auto {
	display: none;
}

/* Headings inside coloured sections follow the section's text colour. */
.has-text-color :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}