/*
Theme Name: Ada Lazer Zone
Author: Clevyr
Author URI: https://clevyr.com
Version: 1.0.12
Requires at least: 7.0.0
Tested up to: 7.0.2
Requires PHP: 8.4
Text Domain: wp-ada-lazer-zone
Update URI: clevyr/wp-ada-lazer-zone/stable
*/

/* ==========================================================================
   Base

   Only rules that theme.json cannot express belong here. Everything else --
   palette, type scale, spacing, heading and button styling -- is declared in
   theme.json and reaches this file as a --wp--preset--* or --wp--custom--*
   variable. Never hard-code a brand value below; reference the token.

   This file is loaded on the front end via get_stylesheet_uri() and inside
   the editor via add_editor_style(). Anything added here shows up in both,
   which is the point. Editor-only corrections go in editor-style.css.
   ========================================================================== */

/* Typography
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
}

/* Poppins ships no 700 face, so an unstyled <strong> asks for 700, finds
   nothing, and gets a synthesised fake bold off the 400. */

strong,
b {
	font-weight: 600;
}

p {
	text-wrap: pretty;
}

img {
	display: block;
}

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

.sr-only {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}

/* Focus
   One system for everything focusable, per "Focus: 2px slime-green outline".
   Size, colour and offset are custom properties, so a component retunes the
   ring by reassigning a variable rather than restating the rule -- the slime
   button does exactly that below, since a slime ring on slime is invisible.

   max() keeps the ring proportional on large type while holding the 2px
   floor the design system specifies. The ring starts transparent and
   transitions in, so it fades rather than snaps.

   theme.json deliberately declares no :focus styling; keeping the whole
   focus system here means one place to look and no cascade race with the
   low-specificity :where() wrappers theme.json generates.
   -------------------------------------------------------------------------- */

:is(a, button, input, textarea, select, summary, [tabindex]) {
	--outline-size: max(2px, 0.08em);
	--outline-color: var(--wp--preset--color--slime);

	outline-color: transparent;
	transition: outline-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--outline-size) solid var(--outline-color);
	outline-offset: var(--outline-offset, var(--outline-size));
}

/* Buttons
   The design system gives the button three axes: tone (six section colours,
   each with its own hand-picked hover), size, and solid vs outline. Tone is
   driven by the core colour panel rather than a style variation, so authors
   use the normal UI and the style picker is left to Fill / Outline.

   The rules below translate whichever background class the author picked into
   a tone triplet, and the behaviour rules read that. Hover lives here rather
   than in theme.json because it depends on the author's colour choice, which
   theme.json cannot express. The hovers are not a uniform darkening -- teal
   resolves lighter, since darkening a near-black does nothing.
   -------------------------------------------------------------------------- */

.wp-element-button {
	--btn-tone: var(--wp--preset--color--deals-pink);
	--btn-tone-hover: var(--wp--custom--color--pink-hover);
	--btn-ink: var(--wp--preset--color--white);

	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
	color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
	outline-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

/* Tone map. Slime and teal point at the existing slime-dark / teal-light
   brand tokens, which are already the hover values the design system gives. */

.wp-element-button.has-deals-pink-background-color {
	--btn-tone: var(--wp--preset--color--deals-pink);
	--btn-tone-hover: var(--wp--custom--color--pink-hover);
}

.wp-element-button.has-eat-red-background-color {
	--btn-tone: var(--wp--preset--color--eat-red);
	--btn-tone-hover: var(--wp--custom--color--eat-hover);
}

.wp-element-button.has-play-orange-background-color {
	--btn-tone: var(--wp--preset--color--play-orange);
	--btn-tone-hover: var(--wp--custom--color--play-hover);
}

.wp-element-button.has-party-purple-background-color {
	--btn-tone: var(--wp--preset--color--party-purple);
	--btn-tone-hover: var(--wp--custom--color--party-hover);
}

/* Slime also retunes the focus ring: the default ring is slime green, which
   would be invisible against a slime button. */

.wp-element-button.has-slime-background-color {
	--btn-tone: var(--wp--preset--color--slime);
	--btn-tone-hover: var(--wp--custom--color--slime-dark);
	--btn-ink: var(--wp--preset--color--ink);
	--outline-color: var(--wp--preset--color--ink);
}

.wp-element-button.has-teal-background-color {
	--btn-tone: var(--wp--preset--color--teal);
	--btn-tone-hover: var(--wp--custom--color--teal-light);
}

/* Slime is the one tone that cannot take white text -- white on #8dc63f is
   about 1.9:1. Skipped when the author has set a text colour explicitly. */

.wp-element-button.has-slime-background-color:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

/* aria-disabled covers the anchor case: core/button renders an <a>, which
   cannot take a real disabled attribute. */

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Solid, i.e. core's Fill.
   !important is required, not sloppiness: WordPress emits its preset colour
   utilities as `.has-*-background-color { ... !important }`, so a plain
   declaration here loses to the class the colour panel just applied. */

.wp-element-button:hover:not(:disabled),
.wp-element-button:focus-visible:not(:disabled),
.wp-element-button:active:not(:disabled) {
	background-color: var(--btn-tone-hover) !important;
}

/* Outline -- transparent, 2px tone border, tone text, inverting to solid on
   hover. Solid carries a transparent border of the same width, so the two
   variants measure identically. */

.wp-block-button.is-style-outline > .wp-element-button {
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	border-color: var(--btn-tone);
	background-color: transparent !important;
}

.wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color) {
	color: var(--btn-tone);
}

.wp-block-button.is-style-outline > .wp-element-button:hover:not(:disabled),
.wp-block-button.is-style-outline > .wp-element-button:focus-visible:not(:disabled),
.wp-block-button.is-style-outline > .wp-element-button:active:not(:disabled) {
	background-color: var(--btn-tone) !important;
	color: var(--btn-ink);
}

/* Lists
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-plain {
	padding-left: 0;
	list-style: none;
}

/* Site header
   Utility pill, then the white nav bar, with the logo absolutely positioned
   so it overhangs both -- the one deliberate overlap in the design system.
   -------------------------------------------------------------------------- */

header.wp-block-template-part {
	position: sticky;
	z-index: 10;
	top: 0;
}

body.admin-bar header.wp-block-template-part {
	position: sticky;
	z-index: 10;
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar header.wp-block-template-part {
		top: 0px;
	}
}

.lz-nav {

}

.lz-nav a {
	text-decoration: none !important;
}

.lz-nav .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 1.625rem;
	height: 1.625rem;
	margin-right: var(--wp--preset--spacing--10);
	vertical-align: -0.25em;
	background: var(--nav-icon) no-repeat center / contain;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--wp--custom--motion--duration-fast, 0.3s) var(--wp--custom--motion--ease, ease-in-out),
	transform var(--wp--custom--motion--duration, 0.3s) var(--wp--custom--motion--ease, ease-in-out);
}

.lz-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::before,
.lz-nav :is(.current-menu-item, .current-menu-ancestor) .wp-block-navigation-item__content::before {
	opacity: 1;
	transform: scale(1);
}

.lz-nav__eat,
.lz-nav__eat .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-eat.svg");
	color: var(--wp--preset--color--eat-red, #ee3124);
}

.lz-nav__play,
.lz-nav__play .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-play.svg");
	color: var(--wp--preset--color--play-orange, #ea871d);
}

.lz-nav__party,
.lz-nav__party .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-party.svg");
	color: var(--wp--preset--color--party-purple, #62136d);
}

.lz-nav__deals,
.lz-nav__deals .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-deals.svg");
	color: var(--wp--preset--color--deals-pink, #ee3d96);
}

.lz-nav__funraiser,
.lz-nav__funraiser .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-funraiser.svg");
	color: var(--wp--preset--color--funraiser-blue, #007acc);
}

.lz-nav__splat,
.lz-nav__splat .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--nav-icon: url("assets/svg/icon-splat.svg");
	color: var(--wp--preset--color--splat-green, #006225);
}


@media (width < 880px) {
	.lz-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.lz-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Overlay layout keys off the breakpoint, never off .is-menu-open. Core
	   scopes position, z-index and the whole column layout to that class, so
	   dropping it reflows the drawer into the header for the length of the
	   slide-out. Below, only transform and display may depend on the class.

	   The selectors are deliberately long: core's own overlay rules run to
	   0,4,0, and these have to outrank them without borrowing .is-menu-open. */

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		padding-top: calc(2rem + 24px);
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default) .wp-block-navigation__responsive-container-close {
		display: block;
		top: 1rem;
		right: 1rem;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content :is(.wp-block-navigation__container, .wp-block-navigation-item) {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: flex;
		gap: 1rem;
		align-items: center;
		align-self: stretch;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}

	.lz-nav .wp-block-navigation-item__content::before {
		opacity: 1;
		transform: scale(1);
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		align-items: flex-start;
		border-bottom: 1px solid #f1f1f1;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item:first-child {
		border-top: 1px solid #f1f1f1;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container {
		background-color: #fff !important;
		overflow: hidden;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 31rem;
		height: 32rem;
		background: url(assets/svg/slime-spat-shape.svg) no-repeat bottom right / contain;
		opacity: 0.3;
		pointer-events: none;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default) {
		position: fixed;
		z-index: 100000;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto; /* pin right instead of filling */
		flex-direction: column;
		width: min(22rem, 85vw);
		transform: translateX(100%);
		transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		display var(--wp--custom--motion--duration) allow-discrete;
	}

	.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default).is-menu-open {
		transform: translateX(0);
		animation: none; /* core ships a 0.1s fade that fights the slide */
	}

	@starting-style {
		.lz-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default).is-menu-open {
			transform: translateX(100%);
		}
	}

	.lz-nav:has(.is-menu-open)::after {
		content: "";
		position: fixed;
		z-index: 99999;
		inset: 0;
		background: var(--wp--custom--color--scrim);
	}

	.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button),
	.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button) {
		padding: 0.5em;
	}
}

.frm_style_formidable-style.with_frm_style input[type=submit],
.frm_style_formidable-style.with_frm_style .frm_submit input[type=button],
.frm_style_formidable-style.with_frm_style .frm_submit button,
.frm_form_submit_style {
	--btn-tone: var(--wp--preset--color--slime);
	--btn-tone-hover: var(--wp--custom--color--slime-dark);
	--btn-ink: var(--wp--preset--color--ink);

	align-content: center;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	height: 100%;
	text-align: center;
	word-break: break-word;
	background-color: var(--wp--preset--color--slime);
	border-radius: 0;
	border-color: transparent;
	border-width: var(--wp--custom--button--border-width);
	border-style: solid;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display), sans-serif;
	font-size: var(--wp--preset--font-size--h-4);
	font-style: inherit;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	line-height: 1.1;
	padding-top: var(--wp--custom--button--padding-y);
	padding-right: var(--wp--custom--button--padding-x);
	padding-bottom: var(--wp--custom--button--padding-y);
	padding-left: var(--wp--custom--button--padding-x);
	text-decoration: none;
	text-transform: uppercase;
}

.frm_style_formidable-style.with_frm_style input[type=submit]:hover,
.frm_style_formidable-style.with_frm_style
.frm_submit input[type=button]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit button:hover {
	background: var(--wp--custom--color--slime-dark) !important;;
	border-color: var(--wp--custom--color--slime-dark) !important;;
	color: var(--btn-ink) !important;
}

@media (max-width: 781px) {
	.wp-block-columns.card-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 100% !important;
		aspect-ratio: 1;
	}

	.wp-block-columns.card-columns .wp-block-image {
		aspect-ratio: 1;
	}
	.wp-block-columns.card-columns .wp-block-image>a,
	.wp-block-columns.card-columns .wp-block-image>figure>a {
		display: block;
		aspect-ratio: 1;
	}
	.wp-block-columns.card-columns  .wp-block-image img {
		display: block;
		aspect-ratio: 1;
		width:100%;
	}
}