/* =============================================================================
   LA MOTA — BRAND LAYER
   Loaded after the engine's compiled style.css (see php/lamota.php).
   This is a RESKIN: it restyles surfaces (color, type, components, motion) and
   adds the subbrand SVG system. It does not change the Bold Builder structure,
   so every existing page keeps its layout and simply looks sharper.

   CONTENTS
   01. Design tokens                 07. Header & sticky polish
   02. Brand typography              08. WooCommerce / SHOP (retail)
   03. Subbrand & strain system      09. Forms, loyalty & focus
   04. Migrated overrides            10. Maps / "Our Locations"
   05. Accent remap                  11. A11y, selection, motion
   06. Buttons & CTAs
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS — single source of truth (retune the brand here)
   ========================================================================== */
:root {
	/* Core brand */
	--lm-black:        #191919;
	--lm-teal:         #63C8CD;   /* Tiffany Teal — primary */
	--lm-white:        #FFFFFF;

	/* Accent teals */
	--lm-teal-light:   #47C1C2;
	--lm-teal-dark:    #00B9B4;
	--lm-blue-light:   #A1DADF;

	/* Subbrand / strain accents (official La Mota strain-mark colors) */
	--lm-indica:       #9E8CC2;   /* Indica — violet */
	--lm-sativa:       #E572A9;   /* Sativa — pink   */
	--lm-hybrid:       #A0D9DE;   /* Hybrid — aqua   */

	/* Brand-family neutrals */
	--lm-black-soft:   #202020;
	--lm-black-700:    #2a2a2a;
	--lm-ink:          #131313;
	--lm-mist:         #f3fafa;
	--lm-muted:        #9aa0a0;

	/* Translucent utilities */
	--lm-teal-12:      rgba(99, 200, 205, 0.12);
	--lm-teal-24:      rgba(99, 200, 205, 0.24);
	--lm-teal-40:      rgba(99, 200, 205, 0.40);
	--lm-glow:         0 0 22px rgba(99, 200, 205, 0.45);
	--lm-glow-lg:      0 0 44px rgba(99, 200, 205, 0.40);

	/* Brand gradients */
	--lm-grad-teal:    linear-gradient(135deg, #63C8CD 0%, #00B9B4 100%);
	--lm-grad-soft:    linear-gradient(135deg, #A1DADF 0%, #63C8CD 100%);
	--lm-grad-night:   linear-gradient(180deg, #191919 0%, #202020 100%);
	--lm-spotlight:    radial-gradient(circle at 50% 0%, rgba(99,200,205,0.40) 0%, rgba(25,25,25,0) 62%);

	/* Shape & elevation */
	--lm-radius-sm:    8px;
	--lm-radius:       12px;
	--lm-radius-lg:    18px;
	--lm-radius-pill:  999px;
	--lm-shadow-1:     0 4px 14px rgba(0, 0, 0, 0.18);
	--lm-shadow-2:     0 12px 34px rgba(0, 0, 0, 0.28);

	/* Motion */
	--lm-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
	--lm-fast:         0.18s;
	--lm-med:          0.3s;

	/* Type stacks (graceful fallbacks if brand fonts are disabled) */
	--lm-font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--lm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
}


/* ==========================================================================
   02. BRAND TYPOGRAPHY  (scoped to body.lm-brand-type — fully reversible)
   ========================================================================== */
body.lm-brand-type {
	font-family: var(--lm-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body.lm-brand-type h1,
body.lm-brand-type h2,
body.lm-brand-type h3,
body.lm-brand-type h4,
body.lm-brand-type h5,
body.lm-brand-type h6,
body.lm-brand-type .bt_bb_headline_content,
body.lm-brand-type .btArticleTitle,
body.lm-brand-type .btMenuHorizontal,
body.lm-brand-type .btMenuVertical {
	font-family: var(--lm-font-heading);
}
body.lm-brand-type h1,
body.lm-brand-type h2,
body.lm-brand-type .bt_bb_headline.bt_bb_size_large .bt_bb_headline_content,
body.lm-brand-type .bt_bb_headline.bt_bb_size_extra_large .bt_bb_headline_content {
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Utility: brand gradient text for hero accents (opt-in via class in Builder) */
.lm-gradient-text {
	background: var(--lm-grad-teal);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Utility: frosted glass panel (opt-in) */
.lm-glass {
	background: rgba(25, 25, 25, 0.55);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	border: 1px solid var(--lm-black-700);
	border-radius: var(--lm-radius-lg);
}


/* ==========================================================================
   03. SUBBRAND & STRAIN SYSTEM
   Output by the PHP helpers / shortcodes as <img class="lm-brand-svg ...">.
   ========================================================================== */
.lm-brand-svg {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Strain badges: consistent sizing + a tactile hover lift */
.lm-strain {
	width: 120px;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
	transition: transform var(--lm-med) var(--lm-ease), filter var(--lm-med) var(--lm-ease);
}
.lm-strain:hover {
	transform: translateY(-3px) scale(1.02);
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
}

/* Optional per-type tint ring when a strain badge is used as a chip */
.lm-strain-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem 0.4rem 0.5rem;
	border-radius: var(--lm-radius-pill);
	background: var(--lm-black-soft);
	border: 1px solid var(--lm-black-700);
	font-family: var(--lm-font-heading);
	font-weight: 700;
	color: var(--lm-white);
}
.lm-strain-chip .lm-strain { width: 36px; }
.lm-strain-chip[data-type="indica"] { border-color: var(--lm-indica); }
.lm-strain-chip[data-type="sativa"] { border-color: var(--lm-sativa); }
.lm-strain-chip[data-type="hybrid"] { border-color: var(--lm-hybrid); }

/* Subbrand logos */
.lm-subbrand { width: 180px; }
.lm-subbrand--hippie-crack-vertical { width: 240px; }

/* Stickers */
.lm-sticker { width: 110px; }

/* Decorative leaf watermark — echoes the brand's pattern sections.
   Use: wrap a Builder section and add class "lm-leaf-watermark". */
.lm-leaf-watermark {
	position: relative;
	isolation: isolate;
}
.lm-leaf-watermark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../brand/stickers/mj-sticker.svg");
	background-repeat: space;
	background-size: 130px auto;
	opacity: 0.06;
	pointer-events: none;
}


/* ==========================================================================
   04. MIGRATED OVERRIDES  (consolidated, de-duplicated, palette-corrected;
       mobile-only logo rule now correctly inside a media query)
   ========================================================================== */
.eapps-google-maps-bar-search-buttons-search svg,
.eapps-google-maps-bar-search-buttons-clear svg { display: none; }

.btMenuVertical .btVerticalHeaderTop { display: block; background-color: var(--lm-black); }
.btLogoArea { position: relative; z-index: 1; background-color: var(--lm-black); }

.btStickyHeaderActive .btVerticalMenuTrigger .bt_bb_icon {
	transition: all var(--lm-med) ease !important;
	filter: brightness(0) invert(1) !important;
}
.btStickyHeaderActive .btVerticalMenuTrigger:hover .bt_bb_icon {
	filter: none !important;
	border-color: var(--lm-teal) !important;
	color: var(--lm-teal) !important;
}
.btStickyHeaderActive .btVerticalMenuTrigger:hover .bt_bb_icon::before,
.btStickyHeaderActive .btVerticalMenuTrigger:hover .bt_bb_icon::after {
	background-color: var(--lm-teal) !important;
}

.btMenuHorizontal ul.sub-menu,
ul.sub-menu {
	background-color: rgba(20,20,20,.98) !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 12px !important;
	padding: 8px !important;
	box-shadow: 0 18px 44px rgba(0,0,0,.42) !important;
}
.btMenuHorizontal ul.sub-menu li a,
ul.sub-menu li a {
	color: #cfd4d4 !important;
	background-color: transparent !important;
	border-radius: 8px;
	transition: color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease);
}
.btMenuHorizontal ul.sub-menu li a:hover,
ul.sub-menu li a:hover {
	color: var(--lm-teal) !important;
	background-color: var(--lm-teal-12) !important;
}

@media (max-width: 1023px) {
	.btVerticalHeaderTop .btLogoArea {
		position: absolute !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		margin: 0 !important;
		z-index: 10 !important;
		width: 45px !important;
	}
	.btVerticalHeaderTop .btLogoArea img {
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
	}
}


/* ==========================================================================
   05. ACCENT REMAP — push visible accent surfaces to exact brand teal
   ========================================================================== */
a {
	color: var(--lm-teal-dark);
	transition: color var(--lm-fast) var(--lm-ease);
}
a:hover,
a:focus { color: var(--lm-teal); }

.bt_bb_separator .bt_bb_separator_inner,
.btAccentBackground,
.accentBackground { border-color: var(--lm-teal); }

.bt_bb_icon.bt_bb_color_scheme_accent-dark-skin .bt_bb_icon_holder,
.bt_bb_icon .bt_bb_icon_holder.bt_bb_filled {
	background-color: var(--lm-teal);
	border-color: var(--lm-teal);
	transition: background-color var(--lm-med) var(--lm-ease), box-shadow var(--lm-med) var(--lm-ease);
}
.bt_bb_icon a:hover .bt_bb_icon_holder.bt_bb_filled {
	background-color: var(--lm-teal-dark);
	box-shadow: var(--lm-glow);
}


/* ==========================================================================
   06. BUTTONS & CTAS — bold teal pill, confident hover with glow
   --------------------------------------------------------------------------
   Bold Builder box model (the part that bit us): the visible pill is the
   <a>, NOT the inner .bt_bb_button_text span. Padding lives on the <a> (by
   size), and the engine draws the fill / outline as an INSET box-shadow on
   the <a> — filled is `0 0 0 3em <accent> inset`, outline is
   `0 0 0 1.5px #191919 inset` (see css-override.php + style.css ~9258).
   The old rules styled the span instead, so (a) the outline "border" never
   showed — the real ring was the engine's near-black inset, invisible on
   dark — and (b) the hover glow had "no margin": a teal background on a
   zero-padding span sits INSIDE the padded pill, so the glow hugged the text
   rather than the button. Every box property must target the <a>.
   Matched to the locator buttons (.lm-store__btn): teal fill, Montserrat
   700, hover → dark teal + 1px lift + 22px teal glow.
   ========================================================================== */

/* Type only on the inner span — the box is the <a>, not this */
.bt_bb_button .bt_bb_button_text,
.btn,
button.btn,
a.btn,
input[type="submit"].btn {
	font-family: var(--lm-font-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* The pill = the anchor: real pill radius + one shared transition */
.bt_bb_button a {
	border-radius: var(--lm-radius-pill) !important;
	transition: transform var(--lm-fast) var(--lm-ease),
	            box-shadow var(--lm-med) var(--lm-ease),
	            background-color var(--lm-fast) var(--lm-ease),
	            color var(--lm-fast) var(--lm-ease) !important;
}

/* Span stays transparent so the anchor's fill/ring isn't double-drawn,
   and inherits the anchor's text colour for each state */
.bt_bb_button a .bt_bb_button_text {
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
}

/* ---- FILLED (= Oregon Deals): solid teal pill, dark text ----
   Rest fill is the engine's accent inset; we pin it and set dark text. On
   hover we KEEP it filled (deepen to dark teal) instead of letting the engine
   animate the inset to 0, then add the 1px lift + glow. */
.bt_bb_button.bt_bb_style_filled a {
	box-shadow: 0 0 0 3em var(--lm-teal) inset !important;
	background-color: transparent !important;
	color: var(--lm-black) !important;
}
.bt_bb_button.bt_bb_style_filled a:hover,
.bt_bb_button.bt_bb_style_filled a:focus-visible {
	box-shadow: 0 0 0 3em var(--lm-teal-dark) inset, var(--lm-glow) !important;
	background-color: transparent !important;
	color: var(--lm-black) !important;
	transform: translateY(-1px) !important;
}

/* ---- OUTLINE (= Everyday Deals): teal ring at rest, fills + glows on hover.
   The 1.5px teal ring replaces the engine's invisible near-black one. On
   hover the ring expands to a full teal fill across the WHOLE pill (3em
   inset), so the glow finally has a pill to sit on — the margin you were
   missing. (Strict locator-ghost hover is a faint wash + white text with no
   glow; this keeps your glow on purpose. Say the word to swap to the wash.) */
.bt_bb_button.bt_bb_style_outline a {
	box-shadow: 0 0 0 1.5px var(--lm-teal) inset !important;
	background-color: transparent !important;
	color: var(--lm-teal) !important;
}
.bt_bb_button.bt_bb_style_outline a:hover,
.bt_bb_button.bt_bb_style_outline a:focus-visible {
	box-shadow: 0 0 0 3em var(--lm-teal) inset, var(--lm-glow) !important;
	background-color: transparent !important;
	color: var(--lm-black) !important;
	transform: translateY(-1px) !important;
}


/* ==========================================================================
   07. HEADER & STICKY POLISH — modern frosted bar, animated nav underline
   ========================================================================== */
.mainHeader,
.btVerticalHeaderTop {
	transition: background-color var(--lm-med) var(--lm-ease),
	            box-shadow var(--lm-med) var(--lm-ease),
	            backdrop-filter var(--lm-med) var(--lm-ease);
}
.btStickyHeaderActive .mainHeader {
	background-color: rgba(25, 25, 25, 0.92);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	border-bottom: 1px solid var(--lm-black-700);
}

/* Animated underline on top-level menu items */
.btMenuHorizontal > ul > li > a {
	position: relative;
}
.btMenuHorizontal > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--lm-teal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--lm-med) var(--lm-ease);
}
.btMenuHorizontal > ul > li:hover > a::after,
.btMenuHorizontal > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}
.btMenuHorizontal > ul > li > a:hover,
.btMenuHorizontal > ul > li.current-menu-item > a {
	color: var(--lm-teal);
}


/* ==========================================================================
   08. WOOCOMMERCE / SHOP — the retail surface
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	border-radius: var(--lm-radius);
	transition: transform var(--lm-med) var(--lm-ease), box-shadow var(--lm-med) var(--lm-ease);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--lm-shadow-2);
}

/* Strain badge slot for product cards (drop a .lm-strain into the card) */
.woocommerce ul.products li.product .lm-strain {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 54px;
	z-index: 2;
}

.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--lm-teal-dark);
	font-weight: 700;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--lm-teal);
	color: var(--lm-black);
	border-radius: var(--lm-radius-pill);
	font-weight: 700;
	box-shadow: var(--lm-glow);
	min-height: auto;
	min-width: auto;
	padding: 4px 12px;
	line-height: 1.4;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
	background-color: var(--lm-teal);
	color: var(--lm-black);
	font-family: var(--lm-font-heading);
	font-weight: 700;
	border-radius: var(--lm-radius-pill);
	transition: transform var(--lm-fast) var(--lm-ease),
	            box-shadow var(--lm-med) var(--lm-ease),
	            background-color var(--lm-fast) var(--lm-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--lm-teal-dark);
	color: var(--lm-black);
	transform: translateY(-2px);
	box-shadow: var(--lm-glow);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews { border-top-color: var(--lm-teal); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--lm-teal-dark); }

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--lm-teal);
	color: var(--lm-black);
}
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--lm-teal-dark); }


/* ==========================================================================
   09. FORMS, LOYALTY & FOCUS — consistent teal across CF7 / Woo / loyalty
   ========================================================================== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--lm-teal) !important;
	box-shadow: 0 0 0 3px var(--lm-teal-24) !important;
	outline: none;
}
.wpcf7 input[type="submit"],
.wpcf7-submit {
	background-color: var(--lm-teal);
	color: var(--lm-black);
	font-family: var(--lm-font-heading);
	font-weight: 700;
	border: 0;
	border-radius: var(--lm-radius-pill);
	padding: 12px 28px;
	transition: transform var(--lm-fast) var(--lm-ease),
	            box-shadow var(--lm-med) var(--lm-ease),
	            background-color var(--lm-fast) var(--lm-ease);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
	background-color: var(--lm-teal-dark);
	transform: translateY(-2px);
	box-shadow: var(--lm-glow);
}


/* ==========================================================================
   10. MAPS / "OUR LOCATIONS" — light, safe chrome accents
   ========================================================================== */
.eapps-google-maps-filters-categories-item.eapps-google-maps-filters-categories-item-active,
.eapps-google-maps-bar-search-input:focus { border-color: var(--lm-teal) !important; }


/* ==========================================================================
   11. A11Y, SELECTION, SCROLLBAR, MOTION
   ========================================================================== */
::selection { background-color: var(--lm-teal); color: var(--lm-black); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.bt_bb_button:focus-visible .bt_bb_button_text,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--lm-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (pointer: fine) {
	* { scrollbar-color: var(--lm-teal) transparent; }
	::-webkit-scrollbar { width: 10px; height: 10px; }
	::-webkit-scrollbar-thumb { background-color: var(--lm-teal); border-radius: var(--lm-radius-pill); }
	::-webkit-scrollbar-track { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.bt_bb_button a:hover,
	.bt_bb_button a:focus-visible,
	.bt_bb_button:hover .bt_bb_button_text,
	.woocommerce a.button:hover,
	.woocommerce ul.products li.product:hover,
	.lm-strain:hover,
	.wpcf7-submit:hover { transform: none !important; }
}


/* ==========================================================================
   12. NATIVE ICON SYSTEM ([lm_icon])
   The engine's icons.php already declares the @font-face + the
   *[data-ico-*]:before{content:attr(...)} rules site-wide; .lm-icon just
   gives them consistent sizing, alignment and inheritance.
   ========================================================================== */
.lm-icon {
	display: inline-block;
	line-height: 1;
	font-style: normal;
	font-weight: normal;
	vertical-align: middle;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.lm-icon::before { display: inline-block; line-height: 1; }