/*
Theme Name: Beauty Nails & Lashes
Theme URI: https://beautynailsandlashes.com
Author: Beauty Nails & Lashes
Author URI: https://beautynailsandlashes.com
Description: Full Site Editing block theme for Beauty Nails & Lashes. Self-configuring: on activation it imports its photos, creates the Home, Manicures, Pedicures, Lashes and Brows pages, assigns their templates, builds the menu and sets the front page. Colors, fonts, images and text are all editable from Appearance - Editor. No page builder required.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bnl-theme
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-patterns, wide-blocks, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Beauty Nails & Lashes - theme styles
   Everything block-level lives in theme.json. This file covers the custom
   hero sections, gallery behaviour and responsive rules that theme.json
   cannot express.
   ---------------------------------------------------------------------- */

/* --- Hero (home) -------------------------------------------------------- */

.bnl-hero {
	position: relative;
	min-height: 88vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.bnl-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.bnl-hero__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, 0.45);
	z-index: 1;
}

.bnl-hero__inner {
	position: relative;
	z-index: 2;
	padding: 24px;
	max-width: 900px;
	color: #fff;
}

.bnl-hero__eyebrow {
	font-size: 13px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.bnl-hero__title {
	font-family: var(--wp--preset--font-family--heading, 'Cormorant Garamond', serif);
	font-style: italic;
	font-weight: 500;
	font-size: 60px;
	line-height: 1.25;
	margin: 0 0 32px;
	color: var(--wp--preset--color--black, #1f1b17);
	background: var(--wp--preset--color--cream, #faf6ef);
	padding: 24px 40px;
	border-radius: 4px;
	display: inline-block;
}

/* --- Hero (service pages) ---------------------------------------------- */

.bnl-hero-sm {
	position: relative;
	min-height: 46vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bnl-hero-sm__title {
	position: relative;
	z-index: 2;
	font-family: var(--wp--preset--font-family--heading, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: 60px;
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 0 24px;
	text-shadow: 0 2px 18px rgba(20, 17, 15, 0.45);
}

/* --- Buttons ------------------------------------------------------------ */

.bnl-btn-light {
	display: inline-block;
	background: var(--wp--preset--color--cream, #faf6ef);
	color: var(--wp--preset--color--black, #1f1b17);
	padding: 16px 40px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bnl-btn-light:hover,
.bnl-btn-light:focus {
	background: var(--wp--preset--color--pink, #c9628f);
	color: #fff;
}

/* --- Header ------------------------------------------------------------- */

.bnl-header .wp-block-navigation__responsive-container-open,
.bnl-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--black, #1f1b17);
}

.bnl-header .wp-block-site-logo img {
	width: 140px;
	height: auto;
	display: block;
}

/* --- Testimonials ------------------------------------------------------- */

.bnl-quote {
	background: #fff;
	border: 1px solid #e8ddd0;
	border-radius: 4px;
	padding: 28px 26px;
	height: 100%;
}

.bnl-quote__stars {
	color: var(--wp--preset--color--pink, #c9628f);
	font-size: 15px;
	letter-spacing: 0.18em;
	margin: 0 0 12px;
}

.bnl-quote__text {
	font-family: var(--wp--preset--font-family--heading, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	margin: 0 0 14px;
}

.bnl-quote__name {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.7;
}

/* --- Gallery / images --------------------------------------------------- */

.bnl-grid {
	display: grid;
	gap: 16px;
}

.bnl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bnl-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

.bnl-map {
	width: 100%;
	height: 280px;
	border: 0;
	border-radius: 4px;
	display: block;
}

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

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--pink, #c9628f);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #1f1b17;
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.bnl-hero__title { font-size: 48px; }
	.bnl-hero-sm__title { font-size: 48px; }
}

@media (max-width: 781px) {
	.bnl-hero { min-height: 62vh; }
	.bnl-hero-sm { min-height: 34vh; }
	.bnl-hero__eyebrow { font-size: 11px; letter-spacing: 0.16em; }
	.bnl-hero__title { font-size: 32px; padding: 16px 20px; margin-bottom: 24px; }
	.bnl-hero-sm__title { font-size: 38px; }

	.bnl-header {
		padding-left: 20px !important;
		padding-right: 20px !important;
		row-gap: 12px;
	}

	.bnl-section {
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.bnl-split .wp-block-column {
		padding: 48px 28px !important;
	}

	h2.wp-block-heading { font-size: 30px !important; }

	.wp-block-gallery.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.bnl-grid--3,
	.bnl-grid--4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.bnl-map { height: 220px; }
}

@media (max-width: 480px) {
	.bnl-hero__title { font-size: 26px; }
	.bnl-hero-sm__title { font-size: 32px; }
}