/*
Theme Name: Bloom Massage & Spa
Theme URI: https://nbartek.pl
Author: nbartek
Author URI: https://nbartek.pl
Description: Block theme for Bloom Massage and Spa, London. Pages are edited in the block editor; the booking link is set in Settings > General.
Version: 1.3.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bloom-spa
*/

/* ---------- Base ---------- */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }
:where(.wp-block-post-content) > *:last-child { margin-block-end: 0; }
section[id] { scroll-margin-top: 6.5rem; }
a:focus-visible,
.wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--honey); outline-offset: 3px; }
::selection { background: var(--wp--preset--color--petal); }

.bloom-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}
.bloom-lead { max-width: 38rem; }
.bloom-intro { max-width: 40rem; color: var(--wp--preset--color--muted); }
/* In constrained sections WordPress centres narrow blocks; keep them on the left edge of the content column instead. */
.is-layout-constrained > .bloom-lead,
.is-layout-constrained > .bloom-intro {
	max-width: 40rem !important;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
	margin-right: auto !important;
}
.bloom-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.bloom-section > h2:first-child { margin-top: 0; }

/* ---------- Header ---------- */
.bloom-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--milk) 94%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(59, 43, 30, 0.1);
}
.admin-bar .bloom-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bloom-header { top: 0; position: relative; } }
.bloom-header__bar { padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 1.5rem; }
.bloom-brand { gap: 0.75rem; align-items: center; }
.bloom-brand, .bloom-logo { flex-shrink: 0; }
.bloom-logo { margin: 0; line-height: 0; }
.bloom-logo img { width: 132px; max-width: none; height: auto; display: block; }
.bloom-footer .bloom-logo img { width: 170px; }
.bloom-footer .bloom-logo { margin-bottom: 1.25rem; }
@media (max-width: 600px) { .bloom-header .bloom-logo img { width: 104px; } }
.bloom-brand .wp-block-site-title { margin: 0; line-height: 1.1; }
.bloom-brand .wp-block-site-title a { text-decoration: none; color: inherit; }
.bloom-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bloom-header__nav { gap: 2rem; align-items: center; min-width: 0; }

/* Main menu: plain links on desktop, a simple drop-down on phones and tablets (no JavaScript needed). */
.bloom-nav ul { list-style: none; margin: 0; padding: 0; }
.bloom-nav a { text-decoration: none; color: var(--wp--preset--color--forest); font-size: 0.9375rem; font-weight: 500; }
.bloom-nav a:hover { color: var(--wp--preset--color--honey); }
.bloom-nav__list { display: flex; gap: 1.75rem; align-items: center; }
.bloom-nav__mobile { display: none; }
.bloom-nav__mobile summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
	min-height: 44px; padding: 0 0.25rem; font-size: 0.9375rem; font-weight: 500;
}
.bloom-nav__mobile summary::-webkit-details-marker { display: none; }
.bloom-nav__icon, .bloom-nav__icon::before, .bloom-nav__icon::after {
	display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.2s ease, background 0.2s ease;
}
.bloom-nav__icon::before, .bloom-nav__icon::after { content: ""; position: absolute; left: 0; }
.bloom-nav__icon::before { top: -7px; }
.bloom-nav__icon::after { top: 7px; }
.bloom-nav__mobile[open] .bloom-nav__icon { background: transparent; }
.bloom-nav__mobile[open] .bloom-nav__icon::before { transform: translateY(7px) rotate(45deg); }
.bloom-nav__mobile[open] .bloom-nav__icon::after { transform: translateY(-7px) rotate(-45deg); }
.bloom-nav__panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--wp--preset--color--milk);
	border-bottom: 1px solid rgba(59, 43, 30, 0.12);
	box-shadow: 0 18px 30px -18px rgba(59, 43, 30, 0.35);
	padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 1.5rem !important;
}
.bloom-nav__panel li { border-top: 1px solid rgba(59, 43, 30, 0.1); }
.bloom-nav__panel li:first-child { border-top: 0; }
.bloom-nav__panel a { display: block; padding: 0.95rem 0; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 400; }
.bloom-nav__panel .bloom-nav__book a {
	margin-top: 1rem; text-align: center; font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 500;
	background: var(--wp--preset--color--forest); color: var(--wp--preset--color--milk); border-radius: 2px;
}
@media (max-width: 899px) {
	.bloom-nav__list { display: none; }
	.bloom-nav__mobile { display: block; }
	.bloom-header__nav { gap: 0.75rem; }
}
@media (max-width: 420px) {
	.bloom-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.bloom-header__cta .wp-block-button__link { padding: 0.7em 1.3em; }
@media (max-width: 600px) {
	.bloom-header__nav { gap: 0.75rem; }
	.bloom-header__cta .wp-block-button__link { padding: 0.6em 1em; font-size: 0.875rem; }
	.bloom-brand .wp-block-site-title { font-size: 1.2rem; }
}

/* ---------- Hero (video) ---------- */
.bloom-hero.wp-block-cover {
	align-items: flex-end;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: clamp(3rem, 8vh, 6rem);
}
.bloom-hero .wp-block-cover__background { opacity: 0.5; }
.bloom-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(59, 43, 30, 0) 30%, rgba(59, 43, 30, 0.7) 100%);
	pointer-events: none;
	z-index: 2;
}
.bloom-hero .wp-block-cover__video-background,
.bloom-hero .wp-block-cover__image-background { z-index: 0; }
.bloom-hero .wp-block-cover__background { z-index: 1; }
.bloom-hero .wp-block-cover__inner-container { position: relative; z-index: 3 !important; }
.bloom-hero__inner { max-width: var(--wp--style--global--content-size, 1180px) !important; margin-left: auto !important; margin-right: auto !important; }
.bloom-hero__inner > * { max-width: 44rem; }
.bloom-hero h1 { margin: 0 0 1.25rem; color: var(--wp--preset--color--milk); }
.bloom-hero .bloom-lead { margin-bottom: 2rem; opacity: 0.92; }
@media (prefers-reduced-motion: reduce) {
	.bloom-hero .wp-block-cover__video-background { display: none; }
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--wp--preset--color--milk);
	color: var(--wp--preset--color--forest);
}
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--wp--preset--color--petal); color: var(--wp--preset--color--forest); }
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--milk);
	box-shadow: inset 0 0 0 1px rgba(251, 245, 234, 0.7);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover { background: rgba(251, 245, 234, 0.12); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--forest);
	padding: 0.95em 1.7em;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--petal); }

/* ---------- Layout pieces ---------- */
.bloom-split.wp-block-columns { gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.bloom-band .bloom-split.wp-block-columns { align-items: flex-start; }
.bloom-photo { margin: 0; }
.bloom-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 2px; }
.bloom-photo--tall img { aspect-ratio: 4 / 5; border-radius: 999px 999px 2px 2px; }
.bloom-cards.wp-block-columns { gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: var(--wp--preset--spacing--50); }
.bloom-cards h3 { margin: 1.4rem 0 0.5rem; }
.bloom-cards p { margin: 0 0 0.6rem; }
.bloom-price { font-weight: 600; color: var(--wp--preset--color--muted); font-variant-numeric: lining-nums; }

.bloom-band a:not(.wp-block-button__link) { color: var(--wp--preset--color--milk); }
.bloom-band h2 { margin: 0; color: var(--wp--preset--color--milk); }

.bloom-facts.wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
.bloom-facts h3 { font-size: 1.3125rem; margin: 0 0 0.4rem; }
.bloom-facts p { margin: 0; }

/* Page intro */
.bloom-page-intro {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgba(59, 43, 30, 0.12);
}
.bloom-page-intro h1 { margin: 0 0 1rem; }
.bloom-page-intro .bloom-lead { color: var(--wp--preset--color--muted); margin: 0; }

/* Treatment menu */
.bloom-menu { gap: 2.5rem clamp(2rem, 5vw, 4rem) !important; margin-top: var(--wp--preset--spacing--40); }
.bloom-item { border-top: 1px solid rgba(59, 43, 30, 0.18); padding-top: 1.25rem; }
.bloom-item h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.bloom-item p { margin: 0 0 0.5rem; max-width: 34em; }
.bloom-item .bloom-price { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.has-petal-background-color .bloom-item { border-top-color: rgba(59, 43, 30, 0.22); }

/* Price tables */
.bloom-prices { margin-block: 1rem var(--wp--preset--spacing--50); }
.bloom-prices table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.bloom-prices thead { border-bottom: 1px solid var(--wp--preset--color--forest); }
.bloom-prices th,
.bloom-prices td { border: 0; padding: 0.85rem 0.75rem; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.bloom-prices th { font-weight: 600; color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.bloom-prices th:first-child,
.bloom-prices td:first-child { text-align: left; padding-left: 0; width: 46%; }
.bloom-prices td:first-child { font-weight: 500; }
.bloom-prices tbody tr { border-bottom: 1px solid rgba(59, 43, 30, 0.12); }

/* Contact */
.bloom-contact.wp-block-columns { align-items: stretch; }
.bloom-contact h2 { font-size: 1.5rem; margin: 2rem 0 0.4rem; }
.bloom-contact h2:first-child { margin-top: 0; }
.bloom-contact p { margin: 0; }
.bloom-contact .wp-block-buttons { margin-top: 2rem; }
.bloom-map { height: 100%; min-height: 360px; }
.bloom-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; filter: grayscale(0.35); }

/* ---------- Footer ---------- */
.bloom-footer { padding-top: var(--wp--preset--spacing--50); padding-bottom: 2rem; font-size: 0.9375rem; }
.bloom-footer a { color: var(--wp--preset--color--milk); }
.bloom-footer a:hover { color: var(--wp--preset--color--petal); }
.bloom-footer .wp-block-site-title { font-size: 1.75rem; margin: 0 0 0.5rem; }
.bloom-footer__cols.wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); }
.bloom-footer__title { font-family: var(--wp--preset--font-family--body); font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.5rem; opacity: 0.75; }
.bloom-footer p { margin: 0 0 0.5rem; }
.bloom-footer p a + a { margin-left: 1rem; }
.bloom-footer__legal { margin-top: var(--wp--preset--spacing--40) !important; padding-top: 1.25rem; border-top: 1px solid rgba(251, 245, 234, 0.18); opacity: 0.7; font-size: 0.875rem; }

@media (max-width: 781px) {
	.bloom-split.wp-block-columns .wp-block-column:has(.bloom-photo) { order: -1; }
	.bloom-band .bloom-split .wp-block-column { order: 0 !important; }
}