/*
Theme Name: Lanikai's Paradise
Theme URI: https://lanikaisparadise.com
Author: Steve Erdelyi
Author URI: https://steveerdelyi.com
Description: A custom block theme inspired by Lanikai Beach on Oʻahu.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.5.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lanikais-paradise
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio
*/

:root {
	--lp-content-max: 1600px;
	--lp-gutter: 1.5rem;
	--lp-button-padding-block: 1rem;
	--lp-button-padding-inline: 1.35rem;
	--lp-button-border-width: 3px;
	--lp-heading-line-height: 0.95;
	--lp-focus-color: #1871ba;
}

@media (min-width: 1024px) {
	:root {
		--lp-gutter: 90px;
	}
}

:where(.wp-site-blocks *:focus) {
	outline: none;
}

.wp-site-blocks *:focus-visible {
	outline-width: 3px;
	outline-style: solid;
	outline-offset: 3px;
	outline-color: var(--lp-focus-color, #1871ba);
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

.wp-block-site-title,
.wp-block-site-title a {
	font-weight: 700;
	letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	line-height: var(--lp-heading-line-height);
}

.wp-block-heading {
	margin-block-start: 1.75em;
	margin-block-end: 0.5em;
}

.wp-block-heading:first-child {
	margin-block-start: 0;
}

.wp-block-paragraph {
	margin-block-start: 0;
	margin-block-end: 1.15em;
}

.wp-block-list {
	margin-block-start: 0;
	margin-block-end: 1.15em;
	padding-inline-start: 1.35em;
}

.wp-block-list li + li {
	margin-block-start: 0.45em;
}

.wp-block-list .wp-block-list {
	margin-block: 0.45em 0;
}

.wp-block-button .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:root :where(.wp-element-button),
:root :where(.wp-block-button__link),
.wp-element-button,
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	padding-block: var(--lp-button-padding-block) !important;
	padding-inline: var(--lp-button-padding-inline);
	border-width: var(--lp-button-border-width, 3px);
	border-style: solid;
	font-style: normal;
}

.wp-block-post-featured-image img,
.wp-block-image img {
	border-radius: 4px;
}

.wp-block-query-pagination a,
.wp-block-comments-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-comments-pagination a:hover {
	text-decoration: underline;
}

.wp-block-query-no-results .wp-block-paragraph {
	text-align: center;
}

.wp-site-blocks {
	position: relative;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.lp-site-header {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 2.15rem !important;
	padding-right: 0 !important;
	padding-bottom: 1.15rem !important;
	padding-left: 0 !important;
	transition: padding-top 0.35s ease;
}

.lp-site-header__inner {
	box-sizing: border-box;
	width: min(100%, calc(var(--lp-content-max) + (var(--lp-gutter) * 2)));
	margin-inline: auto;
	padding-right: var(--lp-gutter);
	padding-left: var(--lp-gutter);
}

body.lp-header-compact .lp-site-header {
	padding-top: 1.15rem !important;
}

.wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 40;
	width: 100%;
	margin: 0;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transform: none;
	filter: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

body:not(:has(.lp-primary-hero)):not(:has(.lp-secondary-hero)) .wp-site-blocks {
	padding-top: var(--lp-header-height, 6.6rem);
}

body:not(:has(.lp-primary-hero)):not(:has(.lp-secondary-hero)) .wp-site-blocks > .wp-block-template-part:first-child,
body:not(:has(.lp-primary-hero)):not(:has(.lp-secondary-hero)) .wp-site-blocks > header.wp-block-template-part {
	background-color: var(--wp--preset--color--base);
}

.lp-site-header .lp-brand {
	flex-wrap: nowrap;
}

.lp-site-header .lp-brand .wp-block-image {
	margin: 0;
}

.lp-site-header .lp-brand__hibiscus figcaption {
	display: none;
}

.lp-site-header .wp-block-site-title {
	margin: 0;
	font-size: 42px;
	font-weight: 700;
	line-height: var(--lp-heading-line-height);
}

.lp-site-header .wp-block-site-title a {
	font-size: inherit;
	font-weight: 700;
}

.lp-site-header .wp-block-site-title a,
.lp-site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.lp-site-header {
	--lp-nav-highlight: #1871ba;
}

.lp-site-header .wp-block-navigation-item__content:hover,
.lp-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--lp-nav-highlight);
}

.lp-site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.lp-site-header .wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content,
.lp-site-header .wp-block-navigation-item.current-menu-parent .wp-block-navigation-item__content,
.lp-site-header .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.32em;
	text-decoration-skip-ink: none;
}

.lp-site-header .wp-block-navigation,
.lp-site-header .wp-block-navigation-item__content {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.lp-header-cta {
	flex-shrink: 0;
}

.lp-site-header .lp-header-actions {
	gap: 1.5rem !important;
}

@media (min-width: 926px) {
	.lp-site-header .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	.lp-site-header .wp-block-navigation-item {
		flex-shrink: 0;
	}
}

@media (max-width: 925px) {
	.lp-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lp-site-header .wp-block-navigation__responsive-container {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		inset: 0 !important;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 100000 !important;
		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem) !important;
		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem) !important;
		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) !important;
		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem) !important;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease, display 0.3s allow-discrete;
	}

	.lp-site-header .wp-block-navigation__responsive-container.has-background.has-accent-4-background-color {
		background-color: var(--wp--preset--color--accent-4, #001b64) !important;
		color: var(--wp--preset--color--base, #fff) !important;
	}

	.lp-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
		position: fixed !important;
		width: auto !important;
		z-index: 100000 !important;
	}

	.lp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
		visibility: hidden !important;
		opacity: 0 !important;
		transition: none !important;
	}

	.lp-site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		opacity: 1;
		pointer-events: auto;
		animation: none;
	}

	.lp-site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: var(--navigation-layout-justification-setting, inherit);
		padding-top: calc(2rem + 24px);
	}

	.lp-site-header .wp-block-navigation__responsive-container .wp-block-navigation__container,
	.lp-site-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
		display: flex;
		flex-direction: column;
		align-items: var(--navigation-layout-justification-setting, initial);
	}

	.lp-site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
		max-width: 100%;
	}

	.lp-site-header .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:last-child::after {
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		margin-top: 1.25rem;
		pointer-events: none;
		background-image: url("assets/images/hibiscus.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	@starting-style {
		.lp-site-header .wp-block-navigation__responsive-container.is-menu-open {
			opacity: 0;
		}
	}
}

@media (max-width: 925px) and (prefers-reduced-motion: reduce) {
	.lp-site-header .wp-block-navigation__responsive-container {
		transition: none;
	}
}

.lp-header-cta .wp-block-button__link {
	box-sizing: border-box;
	border: var(--lp-button-border-width, 3px) solid #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

body:has(.lp-primary-hero) .lp-site-header {
	--lp-nav-highlight: var(--wp--preset--color--accent-6, #ffb47a);
}

body:has(.lp-primary-hero) .lp-site-header,
body:has(.lp-primary-hero) .lp-site-header .wp-block-site-title a,
body:has(.lp-primary-hero) .lp-site-header .wp-block-navigation-item__content {
	color: #fff;
}

body:has(.lp-primary-hero) .lp-site-header .wp-block-navigation-item__content:hover,
body:has(.lp-primary-hero) .lp-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--lp-nav-highlight);
}

body:has(.lp-primary-hero) .lp-site-header .wp-block-navigation__responsive-container-open svg,
body:has(.lp-primary-hero) .lp-site-header .wp-block-navigation__responsive-container-open {
	color: #fff;
	fill: currentColor;
}

body:has(.lp-primary-hero) .lp-header-cta .wp-block-button__link {
	background-color: #fff !important;
	color: #001b64 !important;
}

body:has(.lp-primary-hero) .lp-header-cta .wp-block-button__link:hover {
	background-color: transparent !important;
	border-width: var(--lp-button-border-width, 3px) !important;
	border-style: solid !important;
	border-color: #fff !important;
	color: #fff !important;
}

body:not(:has(.lp-primary-hero)) .lp-site-header .lp-header-cta .wp-block-button__link.has-background {
	background-color: #1871ba !important;
	border-color: #1871ba;
	color: #fff !important;
}

body:not(:has(.lp-primary-hero)):not(.lp-header-compact) .lp-site-header .lp-header-cta .wp-block-button__link.has-background:hover {
	background-color: transparent !important;
	border-width: var(--lp-button-border-width, 3px) !important;
	border-style: solid !important;
	border-color: #1871ba !important;
	color: #1871ba !important;
}

body.lp-header-compact .wp-site-blocks > .wp-block-template-part:first-child,
body.lp-header-compact .wp-site-blocks > header.wp-block-template-part,
body.lp-header-compact:not(:has(.lp-primary-hero)):not(:has(.lp-secondary-hero)) .wp-site-blocks > .wp-block-template-part:first-child,
body.lp-header-compact:not(:has(.lp-primary-hero)):not(:has(.lp-secondary-hero)) .wp-site-blocks > header.wp-block-template-part {
	background-color: rgba(24, 113, 186, 0.58);
	border-bottom: 1px solid rgba(223, 235, 255, 0.24);
}

body.lp-header-compact .wp-site-blocks > .wp-block-template-part:first-child::before,
body.lp-header-compact .wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
}

html.has-modal-open .wp-site-blocks > .wp-block-template-part:first-child,
html.has-modal-open .wp-site-blocks > header.wp-block-template-part,
html.lp-nav-overlay-closing .wp-site-blocks > .wp-block-template-part:first-child,
html.lp-nav-overlay-closing .wp-site-blocks > header.wp-block-template-part {
	z-index: 100000;
	overflow: visible;
	transform: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html.lp-nav-overlay-closing .lp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: flex !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	z-index: 100000 !important;
	background-color: var(--wp--preset--color--accent-4, #001b64) !important;
	color: var(--wp--preset--color--base, #fff) !important;
	pointer-events: none;
}

body.lp-header-compact .lp-site-header {
	--lp-nav-highlight: var(--wp--preset--color--accent-6, #ffb47a);
}

body.lp-header-compact .lp-site-header,
body.lp-header-compact .lp-site-header .wp-block-site-title a,
body.lp-header-compact .lp-site-header .wp-block-navigation-item__content {
	color: #fff;
}

body.lp-header-compact .lp-site-header .wp-block-navigation-item__content:hover,
body.lp-header-compact .lp-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--lp-nav-highlight);
}

body.lp-header-compact .lp-site-header .wp-block-navigation__responsive-container-open,
body.lp-header-compact .lp-site-header .wp-block-navigation__responsive-container-open svg {
	color: #fff;
	fill: currentColor;
}

body.lp-header-compact .lp-site-header .lp-header-cta .wp-block-button__link.has-background {
	background-color: #1871ba !important;
	border-color: #1871ba;
	color: #fff !important;
}

body.lp-header-compact .lp-site-header .lp-header-cta .wp-block-button__link.has-background:hover {
	background-color: transparent !important;
	border-width: var(--lp-button-border-width, 3px) !important;
	border-style: solid !important;
	border-color: #fff !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.lp-site-header,
	.wp-site-blocks > .wp-block-template-part:first-child,
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

@media (max-width: 781px) {
	.lp-site-header .wp-block-site-title {
		font-size: clamp(1.5rem, 6vw, 42px);
	}
}

@media (max-width: 499px) {
	.lp-site-header .lp-header-cta .wp-block-button__link {
		font-size: 13px;
		padding-block: 0.4rem !important;
		padding-inline: 0.75rem !important;
	}
}
