/*
Theme Name: Little Nick
Description: Custom child theme for Little Nick Nursery & Preschool
Author: Simon Digweed
Template: twentytwentyfive
Version: 1.0
Text Domain: little-nick
*/

/*
Theme Name: Little Nick
Description: Custom child theme for Little Nick Nursery & Preschool
Author: Simon Digweed
Template: twentytwentyfive
Version: 1.0
Text Domain: little-nick
*/


/* Remove default top margin from main content site-wide */

main#wp--skip-link--target {
    margin-top: 0 !important;
}


/* ==================================================
   MAIN NAVIGATION DROPDOWNS
   ================================================== */

@media (min-width: 782px) {
	ul.wp-block-navigation__submenu-container {
	min-width: 240px !important;

	padding: 0.7rem !important;

	background: #fffaf4 !important;

	border: 2px solid rgba(52, 72, 223, 0.10) !important;
	border-radius: 20px !important;

	box-shadow: 0 14px 32px rgba(35, 27, 28, 0.14) !important;

	overflow: hidden !important;
}

/* Dropdown items */

ul.wp-block-navigation__submenu-container > li {
	background: transparent !important;
	border: 0 !important;
}

/* Dropdown links */

ul.wp-block-navigation__submenu-container
> li
> a.wp-block-navigation-item__content {
	display: block !important;

	width: 100% !important;
	box-sizing: border-box !important;

	padding: 0.75rem 0.9rem !important;

	background: transparent !important;
	border-radius: 12px !important;

	color: #34364a !important;

	font-size: 0.9rem !important;
	font-weight: 600 !important;

	text-decoration: none !important;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

/* Hover */

ul.wp-block-navigation__submenu-container
> li
> a.wp-block-navigation-item__content:hover {
	background: #edf7f9 !important;
	color: #3448DF !important;

	transform: translateX(3px);
}

/* Current page */

ul.wp-block-navigation__submenu-container
.current-menu-item
> a.wp-block-navigation-item__content {
	background: #e5e9ff !important;
	color: #3448DF !important;
}

/* Keep header/navigation above hero content */

header.wp-block-template-part {
	position: relative;
	z-index: 1000;
}

.wp-block-navigation {
	position: relative;
	z-index: 1001;
}

ul.wp-block-navigation__submenu-container {
	z-index: 1002 !important;
}

ul.wp-block-navigation__submenu-container {
	margin-top: 0.5rem !important;
}

ul.wp-block-navigation__submenu-container
> li
> a.wp-block-navigation-item__content:hover {
	background: #edf7f9 !important;
	color: #3448DF !important;
	transform: translateX(3px);
}
}

/* ==================================================
   MOBILE NAVIGATION
   ================================================== */

@media (max-width: 781px) {

	/* Floating menu panel */

	.wp-block-navigation__responsive-container.is-menu-open {
		top: 145px !important;
		right: 1rem !important;
		left: 1rem !important;
		bottom: auto !important;

		width: auto !important;
		max-width: none !important;

		height: auto !important;
		max-height: calc(100dvh - 165px) !important;

		padding: 0.7rem 1.1rem 1.25rem !important;

		background: #fffaf4 !important;

		border-radius: 22px !important;

		box-shadow: 0 16px 40px rgba(35, 27, 28, 0.16) !important;

		overflow-y: auto !important;
	}

	/* Reduce space above first menu item */

	.wp-block-navigation__responsive-container-content {
		padding-top: 0.25rem !important;
	}

	/* Main menu */

	.wp-block-navigation__responsive-container
	.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;

		gap: 0.2rem !important;
	}

	/* Main links */

	.wp-block-navigation__responsive-container
	.wp-block-navigation-item__content {
		width: 100% !important;

		padding: 0.65rem 0.75rem !important;

		color: #34364a !important;

		font-size: 1rem !important;
		font-weight: 600 !important;

		border: 0 !important;
		border-radius: 10px !important;

		background: transparent !important;
	}

	/* Submenus */

	.wp-block-navigation__responsive-container
	.wp-block-navigation__submenu-container {
		position: static !important;

		width: 100% !important;
		min-width: 0 !important;

		margin: 0.15rem 0 0.4rem 0 !important;
		padding: 0 0 0 1rem !important;

		background: transparent !important;

		border: 0 !important;
		border-radius: 0 !important;

		box-shadow: none !important;
	}

	.wp-block-navigation__responsive-container
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
		padding: 0.5rem 0.65rem !important;

		font-size: 0.92rem !important;
		font-weight: 500 !important;
	}

	/* Close button */

	.wp-block-navigation__responsive-container-close {
		top: 0.35rem !important;
		right: 0.65rem !important;

		color: #3448DF !important;
	}

	/* Remove ugly browser focus outline */

	.wp-block-navigation__responsive-container
	.wp-block-navigation-item__content:focus,
	.wp-block-navigation__responsive-container
	.wp-block-navigation-item__content:focus-visible,
	.wp-block-navigation__responsive-container
	.wp-block-navigation-submenu:focus,
	.wp-block-navigation__responsive-container
	.wp-block-navigation-submenu:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}

	/* Accessible focus style */

	.wp-block-navigation__responsive-container
	.wp-block-navigation-item__content:focus-visible {
		background: #edf7f9 !important;
		color: #3448DF !important;
		box-shadow: 0 0 0 3px rgba(52, 72, 223, 0.16) !important;
	}
}

/* ==================================================
   LN site background override
   ================================================== */

body {
	background: #fffaf4;
}

/* ==================================================
   Prevent horizontal scrolling on mobile
   ================================================== */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* ==================================================
   Little Nick Header
   ================================================== */

.ln-site-header {
	background: var(--wp--preset--color--white);
	position: relative;
	z-index: 100;
}

.ln-site-header__inner {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	min-height: 125px;
	gap: 2rem;
}

.ln-site-header .wp-block-site-logo {
	flex-shrink: 0;
}

.ln-site-header .wp-block-site-logo img {
	width: auto;
	max-width: 270px;
	height: auto;
}

/* Navigation */

.ln-site-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--manrope), "Manrope", sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
}

.ln-site-header .wp-block-navigation__container {
	gap: 1.75rem;
}

.ln-site-header .wp-block-navigation-item__content {
	position: relative;
	color: #34364a;
	text-decoration: none;
	letter-spacing: -0.01em;
	padding: 0.45rem 0;
	transition: color 0.2s ease;
}

.ln-site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blue);
}

.ln-site-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue);
}

/* Active-page underline */

.ln-site-header .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--blue);
	border-radius: 10px;
}

/* Dropdown arrows */

.ln-site-header .wp-block-navigation__submenu-icon {
	color: #34364a;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.25rem;
}

/* Header CTA */

.ln-header-cta .wp-block-button__link {
	padding: 0.9rem 1.6rem;
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.ln-header-cta .wp-block-button__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;

	background-color: currentColor;

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;

	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ln-header-cta {
	flex: 0 0 auto !important;
}

.ln-header-cta .wp-block-button__link {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

@media (max-width: 480px) {

	.ln-header-cta .wp-block-button__link {
		padding: 0.75rem 1rem !important;
		font-size: 0.85rem !important;
	}
}

/* Mobile menu button */

.ln-site-header .wp-block-navigation__responsive-container-open,
.ln-site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--blue);
}

/* Mobile */

@media (max-width: 781px) {

	.ln-site-header__inner {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}

	.ln-site-header .wp-block-site-logo {
		max-width: 150px;
	}

	.ln-header-cta {
		display: none;
	}

}

/* ==================================================
   SITE FOOTER
   ================================================== */

/* Footer template part itself stays transparent */
footer.wp-block-template-part {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Remove Gutenberg spacing between footer blocks */
footer.wp-block-template-part > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

footer.wp-block-template-part {
	gap: 0 !important;
}

/* Full-width blue footer background */
.ln-site-footer {
	width: 100vw !important;
	max-width: none !important;

	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 0 !important;

	background: #7C4BC4 !important;
	color: #ffffff;
}

/* Actual footer content stays neatly constrained */
.ln-site-footer__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);

	margin-left: auto !important;
	margin-right: auto !important;

	padding-top: 2.5rem;
	padding-bottom: 2rem;
}

/* ==================================================
   MAIN SITE FOOTER
   ================================================== */

.ln-site-footer {
	margin-block-start: 0 !important;

	background: #7C4BC4 !important;
	color: #ffffff;
}

.ln-site-footer__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);

	margin-left: auto !important;
	margin-right: auto !important;

	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}


/* ==================================================
   FOOTER GRID
   ================================================== */

.ln-footer-grid {
	width: 100%;
	max-width: none !important;

	gap: clamp(2rem, 5vw, 4rem);

	align-items: flex-start !important;
}


/* ==================================================
   BRAND AREA
   ================================================== */

.ln-footer-brand {
	margin: 0 !important;
}

.ln-footer-brand .wp-block-site-logo {
	margin: 0 0 1.25rem !important;
}

.ln-footer-brand .wp-block-site-logo img {
	width: auto;
	max-width: 240px;
	height: auto;
}

.ln-footer-tagline {
	max-width: 360px;

	margin: 0 0 1.5rem !important;

	color: rgba(255, 255, 255, 0.88);

	font-size: 1rem;
	line-height: 1.6;
}


/* Footer CTA */

.ln-footer-brand .wp-block-button__link {
	background: #ffffff;
	color: #7C4BC4;

	border-radius: 999px;

	padding: 0.85rem 1.4rem;

	font-weight: 700;

	transition:
		transform 0.2s ease,
		background 0.2s ease;
}

.ln-footer-brand .wp-block-button__link:hover {
	background: #F6E8D8;
	transform: translateY(-1px);
}


/* ==================================================
   FOOTER HEADINGS
   ================================================== */

.ln-site-footer h3 {
	margin: 0 0 1rem !important;

	color: #ffffff;

	font-size: 1.05rem;
	font-weight: 700;
}


/* ==================================================
   QUICK LINKS
   ================================================== */

.ln-footer-links .wp-block-navigation {
	margin: 0 !important;

	font-size: 0.95rem;
}

.ln-footer-links .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;

	align-items: flex-start !important;

	gap: 0.55rem !important;
}

.ln-footer-links .wp-block-navigation-item__content {
	padding: 0 !important;

	color: rgba(255, 255, 255, 0.85);

	text-decoration: none;
}

.ln-footer-links .wp-block-navigation-item__content:hover {
	color: #ffffff;
}


/* ==================================================
   CONTACT
   ================================================== */

.ln-footer-contact p {
	margin: 0 0 0.9rem !important;

	color: rgba(255, 255, 255, 0.86);

	font-size: 0.92rem;
	line-height: 1.55;
}

.ln-footer-contact a {
	color: #ffffff;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 781px) {

	.ln-site-footer__inner {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.ln-footer-grid {
		gap: 2rem;
	}

	.ln-footer-brand .wp-block-site-logo img {
		max-width: 210px;
	}
}

/* ==================================================
   FOOTER SOCIAL ICONS
   ================================================== */

.ln-footer-social {
	margin-top: 1.25rem !important;
	padding: 0 !important;

	gap: 0.85rem !important;
}

/* Remove WordPress button backgrounds / borders */

.ln-footer-social .wp-social-link {
	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;

	color: #ffffff !important;
}

/* Link */

.ln-footer-social .wp-social-link a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;

	color: #ffffff !important;
}

/* Actual social logo */

.ln-footer-social .wp-social-link svg {
	width: 40px !important;
	height: 40px !important;

	fill: currentColor !important;

	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

/* Hover */

.ln-footer-social .wp-social-link:hover svg {
	transform: translateY(-2px);
	opacity: 0.75;
}

/* ==================================================
   FOOTER LEGAL STRIP
   ================================================== */

.ln-footer-legal {
	position: relative;
	z-index: 3;

	width: 100vw;
	max-width: none !important;

	margin: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	background: #6437A5;
}

.ln-footer-legal__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);

	margin: 0 auto !important;
	padding: 1rem 0;

	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;

	gap: 1.5rem;
}

.ln-footer-copyright {
	margin: 0 !important;

	color: rgba(255, 255, 255, 0.72);

	font-size: 0.78rem;
	line-height: 1.4;
}

.ln-footer-legal-links {
	margin: 0 !important;
}

.ln-footer-legal-links .wp-block-navigation__container {
	gap: 1.2rem !important;
}

.ln-footer-legal-links .wp-block-navigation-item__content {
	padding: 0 !important;

	color: rgba(255, 255, 255, 0.72);

	font-size: 0.78rem;
	text-decoration: none;
}

.ln-footer-legal-links .wp-block-navigation-item__content:hover {
	color: #ffffff;
}


/* Mobile */

@media (max-width: 781px) {

	.ln-site-footer::before {
		width: 55px;
		height: 55px;
		top: 1.5rem;
		right: -0.5rem;
	}

	.ln-site-footer::after {
		width: 70px;
		height: 50px;
		left: -0.5rem;
		bottom: 5rem;
	}

	.ln-footer-legal__inner {
		flex-direction: column !important;
		align-items: flex-start !important;

		padding: 1rem 1.25rem;
		gap: 0.65rem;
	}

	.ln-footer-legal-links .wp-block-navigation__container {
		gap: 0.8rem !important;
	}
}

/* ==================================================
   FOOTER BOTTOM / PEEKING BEARS
   ================================================== */

.ln-footer-bottom {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

/* Bears sit behind the legal strip */

.ln-footer-bears {
	position: absolute;

	right: clamp(1.5rem, 7vw, 7rem);
	top: -150px;

	width: 700px;

	margin: 0 !important;
	line-height: 0;

	pointer-events: none;
	z-index: 1;
}

.ln-footer-bears svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Dark strip sits IN FRONT of bottom part of bears */

.ln-footer-legal {
	position: relative;
	z-index: 2;

	margin: 0 !important;

	background: #6437A5;
}

@media (max-width: 781px) {

	.ln-footer-bears {
		right: -1.5rem;
		top: -105px;

		width: 500px;
	}
}

/* ==================================================
   WAVE: LOCATION INTO FOOTER
   ================================================== */

.ln-wave--location-to-footer {
	width: 100vw;
	max-width: none !important;

	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	line-height: 0;

	/* Footer colour */
	background: #7C4BC4;

	overflow: hidden;
}

.ln-wave--location-to-footer svg {
	display: block;
	width: 100%;
	height: 120px;
}

.ln-wave--location-to-footer path {
	/* Location section colour */
	fill: #f6efe6;
}

@media (max-width: 781px) {
	.ln-wave--location-to-footer svg {
		height: 72px;
	}
}


/* ==================================================
   REUSABLE TICK LIST
   ================================================== */

.ln-tick-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1.5rem;

	margin-top: 1.5rem !important;
}

/* Individual item */

/* ==================================================
   REUSABLE TICK ITEMS
   ================================================== */

.ln-tick-item {
	--tick-color: #5DAA2F;
	--tick-bg: #e6f5df;

	--tick-size: 2.8rem;
	--tick-mark-size: 1.45rem;

	position: relative;

	display: flex !important;
	align-items: center !important;

	min-width: 0;
	min-height: var(--tick-size);

	margin: 0 !important;

	padding:
		0
		0
		0
		calc(var(--tick-size) + 0.8rem) !important;
}


/* Coloured circle */

.ln-tick-item::before {
	content: "";

	position: absolute;

	left: 0;
	top: 50%;

	width: var(--tick-size);
	height: var(--tick-size);

	transform: translateY(-50%);

	border-radius: 50%;

	background: var(--tick-bg);
}


/* Tick — exactly centred inside circle */

.ln-tick-item::after {
	content: "";

	position: absolute;

	left: calc(var(--tick-size) / 2);
	top: 50%;

	width: var(--tick-mark-size);
	height: var(--tick-mark-size);

	transform: translate(-50%, -50%);

	background-color: var(--tick-color);

	-webkit-mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;

	mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* Text */

.ln-tick-item p {
	margin: 0 !important;

	color: var(--wp--preset--color--text-soft);

	font-size: 0.9rem;
	line-height: 1.4;
}

.ln-tick-item strong {
	color: var(--wp--preset--color--text);

	font-size: 0.98rem;
	font-weight: 700;
}

/* Colour variants */

.ln-tick-item--red {
	--tick-color: #E2645D;
	--tick-bg: #fde8e5;
}

.ln-tick-item--green {
	--tick-color: #5DAA2F;
	--tick-bg: #e6f5df;
}

.ln-tick-item--blue {
	--tick-color: #3448DF;
	--tick-bg: #e5e9ff;
}

.ln-tick-item--orange {
	--tick-color: #ED9815;
	--tick-bg: #fff0d8;
}

/* Mobile */
@media (max-width: 600px) {

	.ln-tick-list {
		grid-template-columns: 1fr;
		row-gap: 1.15rem !important;
	}

	.ln-tick-list--wave {
		padding: 1.8rem 1.35rem 3.0rem !important;
		margin-top: 1.5rem !important;
	}

	.ln-tick-item {
		min-height: 3rem;

		padding-left:
			calc(var(--tick-size) + 0.9rem) !important;
	}
	
	.ln-tick-list--wave::before {
		top: -0.65rem;
		left: -0.45rem;
		right: -0.45rem;
		bottom: auto;

		height: calc(100% + 3.2rem);

		background-size: 100% 100%;
	}
}

/* ==================================================
   OPTIONAL WAVY TICK-LIST PANEL
   ================================================== */
.ln-tick-list--wave {
	position: relative;
	isolation: isolate;

	padding: 1.35rem 1.5rem 1.45rem !important;
	margin-top: 1.5rem !important;
}


/* Organic pale background */

.ln-tick-list--wave::before {
	content: "";

	position: absolute;
	z-index: -1;

	inset: -1rem -1.25rem;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360' preserveAspectRatio='none'%3E%3Cpath d='M95 42 C235 5 405 24 560 18 C735 10 925 30 1080 78 C1155 102 1185 148 1168 204 C1146 276 1038 320 875 326 C700 333 575 292 402 310 C245 326 108 302 55 248 C10 202 28 145 43 98 C54 65 68 50 95 42 Z' fill='%23FFFAF4'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;

	pointer-events: none;
}

/* ==================================================
   HEADER DROPDOWN MENUS
   ================================================== */

.ln-site-header ul.wp-block-navigation__submenu-container {
	min-width: 240px !important;

	padding: 0.7rem !important;

	background: #fffaf4 !important;

	border: 2px solid rgba(52, 72, 223, 0.10) !important;
	border-radius: 20px !important;

	box-shadow: 0 14px 32px rgba(35, 27, 28, 0.14) !important;
}

/* Dropdown menu items */

.ln-site-header
ul.wp-block-navigation__submenu-container
> li {
	background: transparent !important;
	border: 0 !important;
}

/* Dropdown links */

.ln-site-header
ul.wp-block-navigation__submenu-container
> li
> a.wp-block-navigation-item__content {
	display: block !important;

	width: 100% !important;
	box-sizing: border-box !important;

	padding: 0.75rem 0.9rem !important;

	background: transparent !important;

	border-radius: 12px !important;

	color: #34364a !important;

	font-size: 0.9rem !important;
	font-weight: 600 !important;

	text-decoration: none !important;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

/* Hover */

.ln-site-header
ul.wp-block-navigation__submenu-container
> li
> a.wp-block-navigation-item__content:hover {
	background: #edf7f9 !important;
	color: #3448DF !important;

	transform: translateX(3px);
}

.ln-site-header ul.wp-block-navigation__submenu-container {
	outline: 6px solid red !important;
}


/* =========================================
   HEADER NAVIGATION - DROPDOWN HOVER FIX
   ========================================= */

@media (min-width: 782px) and (hover: hover) {

    /* Position dropdown relative to parent */
    header .wp-block-navigation__container
    > .has-child {
        position: relative;
    }

    /* Remove gap between parent and submenu */
    header .wp-block-navigation__container
    > .has-child
    > .wp-block-navigation__submenu-container {
        top: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
    }

}


/* =========================================
   STICKY SITE HEADER
   ========================================= */

header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 250, 244, 0.90) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Desktop WordPress admin toolbar */

@media (min-width: 783px) {
    body.admin-bar header.wp-block-template-part {
        top: 32px !important;
    }
}

/* Mobile - no admin toolbar offset */

@media (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 0 !important;
    }
}




/* =========================================
   LITTLE NICK - STICKY SITE HEADER
   ========================================= */

/* Main sticky header */

header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    isolation: isolate;
    overflow: visible;
}

/* Remove background from the inner Gutenberg Group */

header.wp-block-template-part > .wp-block-group {
    background: transparent !important;
}

/* =========================================
   SEAMLESS FROSTED BACKGROUND + WAVE
   ========================================= */

header.wp-block-template-part::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: -18px;

    z-index: -1;
    pointer-events: none;

    /* One continuous translucent background */

    background: rgba(255, 250, 244, 0.86);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Mask the header and wave as one surface */

    -webkit-mask:
        linear-gradient(#000 0 0)
        top / 100% calc(100% - 16px) no-repeat,

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V9 C1050 23 870 24 690 11 C495 -3 350 4 215 15 C125 23 50 20 0 12 Z' fill='black'/%3E%3C/svg%3E")
        bottom / 100% 18px no-repeat;

    mask:
        linear-gradient(#000 0 0)
        top / 100% calc(100% - 16px) no-repeat,

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V9 C1050 23 870 24 690 11 C495 -3 350 4 215 15 C125 23 50 20 0 12 Z' fill='black'/%3E%3C/svg%3E")
        bottom / 100% 18px no-repeat;
}

/* =========================================
   WORDPRESS ADMIN TOOLBAR
   ========================================= */

/* Desktop */

@media (min-width: 783px) {

    body.admin-bar header.wp-block-template-part {
        top: 32px !important;
    }
}

/* Mobile */

@media (max-width: 782px) {

    body.admin-bar header.wp-block-template-part {
        top: 0 !important;
    }
}

/* =========================================
   MOBILE HEADER - SHRINK ON SCROLL
   ========================================= */

@media (max-width: 781px) {

    /* Smooth transitions */

    header.wp-block-template-part .wp-block-group {
        transition: padding 0.25s ease;
    }

    header.wp-block-template-part img {
        transition: height 0.25s ease;
    }

    header.wp-block-template-part .wp-block-button__link {
        transition: padding 0.25s ease;
    }

    /* Reduce Gutenberg Group padding when scrolling */

    body.ln-header-scrolled
    header.wp-block-template-part .wp-block-group {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    /* Maintain small padding around header contents */

    body.ln-header-scrolled
    header.wp-block-template-part > .wp-block-group {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Physically reduce logo height */

    body.ln-header-scrolled
    header.wp-block-template-part .wp-block-site-logo img,
    body.ln-header-scrolled
    header.wp-block-template-part .wp-block-image img {
        height: 44px !important;
        width: auto !important;
        max-width: 100%;
        transform: none !important;
    }

    /* Make booking button more compact */

    body.ln-header-scrolled
    header.wp-block-template-part .wp-block-button__link {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        transform: none !important;
    }
}

/* =========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    header.wp-block-template-part .wp-block-group,
    header.wp-block-template-part img,
    header.wp-block-template-part .wp-block-button__link {
        transition: none !important;
    }
}


/* =========================================
   DESKTOP NAVIGATION - PLAYFUL MENU LINKS
   ========================================= */

@media (min-width: 782px) {

    /* Top-level navigation links only */

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
        position: relative;

        font-family: "Fredoka", sans-serif;
        font-size: 1.15rem;
        font-weight: 500;

        color: #303650;
        text-decoration: none;

        transition: color 0.2s ease;
		
		padding-bottom: 9px;
		z-index: 2;
    }

    /* Organic underline */

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content::after {
        content: "";
        position: absolute;

        left: 0;
        right: 0;
        bottom: 1px;

        height: 5px;
        border-radius: 60% 40% 55% 45%;

        background: #f2bd9f;

        opacity: 0;
        transform: scaleX(0) rotate(-2deg);
        transform-origin: left center;

        transition:
            opacity 0.2s ease,
            transform 0.25s ease;
    }

    /* Different colours for each item */

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(2)
    > .wp-block-navigation-item__content::after {
        background: #b8decf;
    }

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(3)
    > .wp-block-navigation-item__content::after {
        background: #efcb75;
    }

    /* Hover, keyboard focus and current page */

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:hover
    > .wp-block-navigation-item__content,

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:focus-within
    > .wp-block-navigation-item__content {
        color: #3448df;
    }

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:hover
    > .wp-block-navigation-item__content::after,

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:focus-within
    > .wp-block-navigation-item__content::after,

    header.wp-block-template-part
    .wp-block-navigation__container
    > .current-menu-item
    > .wp-block-navigation-item__content::after {
        opacity: 1;
        transform: scaleX(1) rotate(-2deg);
    }
}


/* =========================================
   NAVIGATION - HIGHLIGHT ACTIVE PARENT
   ========================================= */

@media (min-width: 782px) {

    /* Keep underline visible when a submenu page is active */

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:is(
        .current-menu-ancestor,
        .current-menu-parent
    )
    > .wp-block-navigation-item__content::after,

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:has(
        .wp-block-navigation__submenu-container
        [aria-current="page"]
    )
    > .wp-block-navigation-item__content::after,

    header.wp-block-template-part
    .wp-block-navigation__container
    > .wp-block-navigation-item:has(
        .wp-block-navigation__submenu-container
        .current-menu-item
    )
    > .wp-block-navigation-item__content::after {
        opacity: 1;
        transform: scaleX(1) rotate(-2deg);
    }
}


/* =========================================
   LN MOBILE MENU - SUBTLE OPENING ANIMATION
   ========================================= */

@media (max-width: 781px) {

    /* Fade in the menu background */

    .wp-block-navigation__responsive-container.is-menu-open {
        animation: ln-menu-fade 0.3s ease-out both;
    }

    /* Gently slide the menu contents into place */

    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        animation: ln-menu-slide 0.25s ease-out both;
    }
}

/* Fade animation */

@keyframes ln-menu-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide animation */

@keyframes ln-menu-slide {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        animation: none !important;
    }
}

/* =========================================
   LN MOBILE MENU - REDUCE TOP SPACING AND SET TRANSPARENCY
   ========================================= */

@media (max-width: 781px) {

    /* Move close button and menu upwards */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding-top: 0.1rem !important;
		background-color: rgba(255, 250, 244, 0.86) !important;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
    }

    /* Reduce space above the Home link */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        padding-top: 0.25rem !important;
    }
}

/* =========================================
   LN MOBILE MENU - REMOVE LINGERING FOCUS BOX
   ========================================= */

@media (max-width: 781px) {

    .wp-block-navigation__responsive-container-open:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Retain accessible keyboard focus */
    .wp-block-navigation__responsive-container-open:focus-visible {
        outline: 2px solid #3448df;
        outline-offset: 4px;
        border-radius: 4px;
    }
}


/* =========================================
   LN MOBILE HEADER - CORRECT INITIAL HEIGHT
   ========================================= */

@media (max-width: 781px) {

    /* Remove excess padding from nested header groups */

    header.wp-block-template-part .wp-block-group {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    /* Give the outer header consistent spacing */

    header.wp-block-template-part > .wp-block-group {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}