/*
Theme Name: Lash Tec Block
Theme URI: https://lashtec.com
Author: Lash Tec
Description: Block theme for Lash Tec, a lash studio in San Francisco's Sunset District. Champagne, Rose Quartz and Cashmere palette with Sacramento script headings and Raleway text. Every page, the header and the footer are made of blocks, so the owner can edit them in the WordPress editor. Includes a booking request form ([lashtec_booking_form]) that emails the studio and saves each request in the dashboard.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lashtec
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo, editor-style
*/

/* Colors, fonts and sizes live in theme.json (Appearance → Editor → Styles).
   This file only styles the Lash Tec classes used in the patterns. */

:root {
	--lt-line: var(--wp--preset--color--line);
	--lt-muted: var(--wp--preset--color--muted);
	--lt-accent: var(--wp--preset--color--deep-cashmere);
	--lt-accent-dark: var(--wp--preset--color--cashmere-dark);
	--lt-rose: var(--wp--preset--color--rose-quartz);
	--lt-ink: var(--wp--preset--color--espresso);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Script headings: the italic button colors a phrase instead of slanting it. */
h1 em, h2 em { font-style: normal; color: var(--lt-accent); }

/* ---------- Header ---------- */
.lt-topbar p { margin: 0; }
.lt-topbar a { color: var(--wp--preset--color--champagne); text-decoration: none; }
.lt-topbar a:hover { text-decoration: underline; }
.lt-site-header .wp-block-site-title { margin: 0; }
.lt-site-header .wp-block-site-logo img { border-radius: 50%; }
.lt-brand-sub { margin: 0; font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lt-muted); line-height: 1; }
.lt-site-header .wp-block-navigation a:hover,
.lt-site-header .wp-block-navigation .current-menu-item > a { color: var(--lt-accent); }
.lt-site-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--wp--custom--gutter); --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; --navigation-layout-align: flex-start; }
.lt-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; }
.lt-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.lt-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; justify-content: flex-start; }
.lt-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.375rem; padding: 0.35rem 0; border-bottom: 1px solid var(--lt-line); width: 100%; }
@media (max-width: 599px) {
	.lt-topbar .wp-block-group { justify-content: center; text-align: center; }
	.lt-topbar p:first-child { display: none; }
	.lt-header-book { display: none; }
	.lt-site-header .wp-block-site-title { font-size: 2rem; }
}

/* ---------- Shared ---------- */
.is-style-eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--deep-rose); margin-bottom: 0.75em; }
.is-style-script { font-family: var(--wp--preset--font-family--script); font-size: 2.1rem; line-height: 1.1; color: var(--lt-accent); margin: 0 0 0.2em; }
.lt-lede { font-weight: 300; max-width: 34em; line-height: 1.55; }
.lt-muted { color: var(--lt-muted); }
.lt-fine { font-size: 0.9rem; color: var(--lt-muted); }
.lt-more-link a, .lt-review-links a { font-weight: 500; text-decoration: none; white-space: nowrap; }
.lt-more-link a:hover, .lt-review-links a:hover { text-decoration: underline; }
.lt-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.lt-section-head .wp-block-heading { margin: 0; }
.lt-section-head > .wp-block-group { max-width: 40em; }
.lt-section-head > p { margin: 0; }

.is-style-card { background: var(--wp--preset--color--white); border: 1px solid var(--lt-line); padding: clamp(20px, 3vw, 32px); }
.lt-section .is-style-card > :first-child { margin-top: 0; }
.lt-card-label { font-family: var(--wp--preset--font-family--body) !important; font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--deep-rose); margin: 1.6em 0 0.5em; }
.is-style-card > .lt-card-label:first-child { margin-top: 0; }
.lt-phone { font-size: 1.625rem; font-weight: 500; margin: 0; }
.lt-phone a { color: var(--lt-ink); text-decoration: none; }

.lt-hours { gap: 0 !important; }
.lt-hours-row { border-bottom: 1px solid var(--lt-line); padding: 8px 0; gap: 16px; margin: 0 !important; }
.lt-hours-row p { margin: 0; font-variant-numeric: tabular-nums; }
.lt-hours-row p:first-child { font-weight: 500; }
.lt-hours-row p:last-child { text-align: right; }

.lt-ruled-columns > .wp-block-column { border-top: 1px solid var(--wp--preset--color--cashmere); padding-top: 18px; }
.lt-ruled-columns h3 { margin-top: 0.2em; }

/* ---------- Hero ---------- */
.lt-hero { background: linear-gradient(180deg, var(--wp--preset--color--ground) 0%, var(--wp--preset--color--ground) 55%, color-mix(in srgb, var(--lt-rose) 45%, var(--wp--preset--color--ground)) 100%); }
.lt-hero h1 { margin: 0.1em 0 0.3em; }
.lt-hero h1 em { display: block; }
.lt-facts { border-top: 1px solid var(--lt-line); padding-top: 20px; gap: 12px 36px !important; }
.lt-facts p { margin: 0; font-size: 0.875rem; color: var(--lt-muted); }
.lt-facts strong { display: block; font-size: 1.25rem; font-weight: 600; color: var(--lt-ink); letter-spacing: 0.02em; }

.is-style-rose-frame { position: relative; margin: 0 18px 18px 0; }
.is-style-rose-frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--lt-rose); border-radius: 2px; }
.is-style-rose-frame img { position: relative; display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 18px 40px rgba(46, 37, 33, 0.14); }
@media (max-width: 781px) {
	.lt-hero .wp-block-columns { flex-direction: column-reverse; }
	.is-style-rose-frame { margin: 0 10px 12px 0; }
	.is-style-rose-frame::before { inset: 12px -10px -12px 10px; }
}

/* ---------- Price menu ---------- */
.lt-menu { gap: 40px clamp(32px, 5vw, 72px) !important; }
.lt-menu-title { font-size: 1.625rem; font-weight: 500; margin: 0 0 0.25em; }
.lt-menu-desc { color: var(--lt-muted); font-size: 0.98rem; }
.lt-menu-list { border-top: 1px solid var(--wp--preset--color--cashmere); gap: 0 !important; }
.lt-menu-list > * { margin-block: 0 !important; }
.lt-menu-item { padding: 16px 0 14px; border-bottom: 1px solid var(--lt-line); gap: 4px !important; }
.lt-menu-item > * { margin-block: 0 !important; }
.lt-price-row { gap: 10px !important; }
.lt-price-row > p { margin: 0; }
.lt-service-name { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lt-service-name strong { font-weight: 500; font-size: 1.08rem; }
.lt-service-name::after { content: ""; flex: 1 1 20px; min-width: 20px; border-bottom: 1px dotted color-mix(in srgb, var(--lt-ink) 40%, transparent); transform: translateY(-4px); }
.lt-price { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.lt-menu-meta { color: var(--lt-muted); font-size: 0.95rem; }
.lt-menu-meta strong { display: inline-block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--deep-rose); border: 1px solid color-mix(in srgb, var(--wp--preset--color--deep-rose) 35%, transparent); background: color-mix(in srgb, var(--lt-rose) 35%, transparent); padding: 1px 8px; border-radius: 999px; margin-right: 6px; }

/* ---------- Steps ---------- */
.lt-step-num { font-family: var(--wp--preset--font-family--script); font-size: 3.4rem; line-height: 1; color: var(--lt-accent); margin: 0; }

/* ---------- Reviews ---------- */
.lt-reviews .wp-block-column { border-top: 1px solid color-mix(in srgb, var(--lt-ink) 25%, transparent); padding-top: 24px; }
.wp-block-quote.lt-review { margin: 0; padding: 0; border: 0; }
.lt-review p { margin: 0 0 1em; }
.lt-review p::before { content: "“"; color: var(--lt-accent); }
.lt-review p::after { content: "”"; color: var(--lt-accent); }
.lt-review cite { display: block; font-style: normal; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-muted); }
.lt-review-links { margin-top: var(--wp--preset--spacing--40); word-spacing: 1.2em; }
.lt-review-links a { color: var(--lt-ink); word-spacing: normal; }

/* ---------- Statements ---------- */
.lt-statement { font-size: 1.625rem; font-weight: 300; line-height: 1.35; margin: 0; }

/* ---------- About ---------- */
.lt-emblem { max-width: 300px; margin-inline: auto !important; }
.lt-emblem img { width: 100%; height: auto; }

/* ---------- FAQ ---------- */
.lt-faq-list > .wp-block-details { margin: 0 !important; }
.lt-faq-list > .wp-block-details:last-child { border-bottom: 1px solid var(--lt-line); }
.wp-block-details summary { list-style: none; cursor: pointer; position: relative; padding-right: 40px; font-weight: 600; font-size: 1.125rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 4px; top: -6px; font-size: 1.8rem; font-weight: 300; color: var(--lt-accent); transition: transform 0.2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > p { color: var(--lt-muted); max-width: 40em; }

/* ---------- Call to action ---------- */
.lt-cta-inner { text-align: center; gap: 0.75rem !important; }
.lt-cta-inner h2 { color: var(--wp--preset--color--champagne); margin: 0; }
.lt-cta-text { margin: 0 0 0.5rem; color: var(--wp--preset--color--champagne); }
.lt-cta .wp-block-button__link { background: var(--wp--preset--color--champagne); color: var(--lt-ink); }
.lt-cta .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--lt-ink); }

/* ---------- Page headings ---------- */
.lt-page-intro h1 { margin: 0.1em 0 0.25em; }

/* ---------- Footer ---------- */
.lt-footer { font-size: 0.96rem; }
.lt-footer a { color: var(--wp--preset--color--champagne); }
.lt-footer a:hover { color: var(--wp--preset--color--white); }
.lt-footer .lt-footer-h { font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--cashmere); margin: 0 0 14px; }
.lt-footer .wp-block-site-title { font-size: 2.2rem; color: var(--wp--preset--color--champagne); margin: 0; }
.lt-footer-emblem { margin: 0 0 8px; opacity: 0.9; }
.lt-footer-tag { max-width: 22em; }
.lt-footer .lt-hours-row { border-color: rgba(237, 224, 206, 0.16); }
.lt-footer .lt-fine { color: #B5A597; }
.lt-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lt-footer-base { margin-top: var(--wp--preset--spacing--50) !important; padding-top: 20px; border-top: 1px solid rgba(237, 224, 206, 0.16); font-size: 0.85rem; color: #B5A597; gap: 8px 24px !important; }
.lt-footer-base p { margin: 0; }

/* Phone booking bar (hidden on larger screens) */
.lt-mobile-book { display: none !important; }
@media (max-width: 700px) {
	.lt-mobile-book { display: flex !important; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; margin: 0 !important; }
	.lt-mobile-book .wp-block-button { width: 100%; }
	.lt-mobile-book .wp-block-button__link { width: 100%; box-shadow: 0 8px 24px rgba(46, 37, 33, 0.25); }
	.lt-footer { padding-bottom: 96px !important; }
}
/* No floating bar on the page that already has the form. */
body:has(.lt-booking-form) .lt-mobile-book, body:has(#lt-request-sent) .lt-mobile-book { display: none !important; }
/* In the editor, keep the bar in the footer where it can be edited. */
.lt-mobile-book.block-editor-block-list__block { display: flex !important; position: static !important; }

/* ---------- Booking form ---------- */
.lt-booking-form fieldset { border: 0; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; min-width: 0; }
.lt-booking-form legend { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--deep-rose); padding: 0; margin-bottom: 14px; }
.lt-field { display: grid; gap: 6px; min-width: 0; }
.lt-field label, .lt-label { font-size: 0.92rem; font-weight: 500; }
.lt-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.lt-booking-form input[type="text"], .lt-booking-form input[type="email"], .lt-booking-form input[type="tel"], .lt-booking-form input[type="date"], .lt-booking-form select, .lt-booking-form textarea {
	width: 100%; min-height: 48px; padding: 10px 12px; box-sizing: border-box;
	font: 400 1rem/1.4 var(--wp--preset--font-family--body); color: var(--lt-ink);
	background: var(--wp--preset--color--ground); border: 1px solid var(--lt-line); border-radius: 4px;
}
.lt-booking-form input:focus, .lt-booking-form select:focus, .lt-booking-form textarea:focus { outline: 2px solid var(--lt-accent); outline-offset: 0; border-color: var(--lt-accent); background: var(--wp--preset--color--white); }
.lt-field--choice { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.lt-field--choice .lt-label { width: 100%; }
.lt-field--choice label, .lt-consent { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; cursor: pointer; }
.lt-consent { font-size: 0.92rem; color: var(--lt-muted); align-items: flex-start; }
.lt-consent input { margin-top: 4px; }
.lt-booking-form input[type="radio"], .lt-booking-form input[type="checkbox"] { accent-color: var(--lt-accent); width: 18px; height: 18px; }
.lt-submit { display: block; }
.lt-submit .wp-block-button__link { width: 100%; border: 0; cursor: pointer; }
.lt-form-fine { font-size: 0.88rem; color: var(--lt-muted); margin: 14px 0 0; }
.lt-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lt-form-notice { padding: 20px 22px; margin-bottom: 24px; border-left: 3px solid; background: var(--wp--preset--color--ground); }
.lt-form-notice--ok { border-color: #2f6b4f; }
.lt-form-notice--error { border-color: #a3312d; }
.lt-form-notice h3 { margin: 0 0 0.3em; }
.lt-form-notice ul { margin: 0; padding-left: 1.2em; }