/*
Theme Name: Twenty Twenty-Five – Marta
Theme URI: https://powderblue-shrew-213379.hostingersite.com
Description: One-page landing child theme for Marta, beauty specialist in Teika, Riga. Powder pink and gold, self-hosted fonts, Polylang-ready (LV, EN, RU).
Author: ManaLapa
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-marta
*/

/*
 * All colours, fonts and sizes live in theme.json.
 * This file only holds what theme.json cannot express:
 * sticky header, price-row leader line, ornament diamond,
 * gallery hover zoom, focus/motion rules.
 */

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

/* Anchored sections should not hide under the sticky header. */
:where(main) [id] {
	scroll-margin-top: 5.5rem;
}

/* ---------- Focus (gold, keyboard only) ----------
   Shown when moving with Tab; a mouse click or tap leaves no box. */
:where(a, button, .wp-block-button__link, .wp-block-navigation-item__content):focus:not(:focus-visible) {
	outline: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	min-height: 44px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Text link styled as quiet secondary action ("See prices"). */
.is-style-text-link a,
a.is-style-text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--accent-6);
}

.is-style-text-link a:hover {
	text-decoration-color: currentColor;
}

/* ---------- Sticky header with soft blur ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-6) 45%, transparent);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would trap the fixed overlay menu inside the 63px header bar. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Other pages (privacy etc.): header comes from the template part wrapper. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.wp-site-blocks > header.wp-block-template-part .site-header {
	position: static;
}

.admin-bar .site-header,
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .site-header,
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.site-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Hamburger and close button: only sizing here, core decides when they are visible. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.site-header .wp-block-button__link {
	white-space: nowrap;
	padding: 0.6rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Language switcher placeholder: "LV EN RU" (current one in bold, not a link). */
.marta-lang {
	display: flex;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.marta-lang a,
.marta-lang strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.marta-lang a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}

.marta-lang a:hover {
	color: var(--wp--preset--color--accent-3);
}

.marta-lang strong {
	color: var(--wp--preset--color--accent-3);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-6);
	text-underline-offset: 0.35em;
}

/* Breathing room between the menu and the language switcher. */
@media (min-width: 600px) {
	.site-header .marta-lang {
		margin-inline-start: 0.5rem;
	}

	.site-header .wp-block-navigation-item__content {
		justify-content: center;
		min-width: 44px;
	}
}

/* Mobile: logo · menu · language · Book, all on one line at 360px. */
@media (max-width: 599px) {
	.site-header .wp-block-site-title {
		font-size: 1.6rem;
	}

	.site-header__actions {
		gap: 0.25rem !important;
	}

	.site-header .wp-block-navigation {
		order: 3;
	}

	.site-header .wp-block-button__link {
		padding: 0.55rem 0.85rem;
		letter-spacing: 0.02em;
	}

	.site-header .marta-lang a,
	.site-header .marta-lang strong {
		min-width: 2rem;
	}
}

/* Tablets and 200% zoom: the full menu does not fit next to language +
   Book (Russian labels are longest), so keep the overlay menu until 1024px.
   Core only switches at 600px, hence these overrides. */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation {
		order: 3;
	}
}

/* Very small phones (< 380px): show only the other two languages. */
@media (max-width: 379px) {
	.site-header .marta-lang strong {
		display: none;
	}
}

/* Overlay menu (phones and tablets): a compact card under the header
   instead of a full-screen layer, centred links, a slow soft opening. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	top: 72px;
	right: 0;
	bottom: auto;
	left: 0;
	width: min(320px, calc(100% - 32px));
	max-height: calc(100dvh - 96px);
	margin-inline: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--soft), 0 2px 8px rgba(62, 47, 47, 0.06);
	animation: marta-menu-in 0.45s cubic-bezier(0.22, 0.7, 0.25, 1) both;
	/* Core aligns the open menu with these (right, from the header layout): centre it. */
	--navigation-layout-justification-setting: center;
	--navigation-layout-justify: center;
	--navigation-layout-align: center;
	text-align: center;
}

.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open {
	top: calc(72px + var(--wp-admin--admin-bar--height, 0px));
}

@keyframes marta-menu-in {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	padding: 2.75rem 1.5rem 1.75rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	gap: 0.25rem;
	width: 100%;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: center; /* items are column flex boxes in the open menu */
	justify-content: center;
	width: 100%;
	text-align: center;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: center;
	padding-inline: 0.75rem;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.6rem;
	letter-spacing: 0.01em;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none; /* opened by tap/click: no ring on the auto-focused first link */
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	/* Core focuses the first link when the menu opens; a gold underline reads
	   as focus without looking like a selected box. */
	outline: none;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.35rem;
	right: 0.35rem;
}

/* ---------- Footer links: comfortable tap targets ---------- */
.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-footer a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Ornamental divider (Separator › Gold ornament) ---------- */
.wp-block-separator.is-style-ornament {
	position: relative;
	width: 7.5rem;
	max-width: 100%;
	height: 12px;
	margin-inline: auto;
	border: 0;
	background:
		linear-gradient(currentColor, currentColor) left center / calc(50% - 12px) 1px no-repeat,
		linear-gradient(currentColor, currentColor) right center / calc(50% - 12px) 1px no-repeat;
	opacity: 1;
}

.wp-block-separator.is-style-ornament::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Left-aligned inside columns (e.g. About). */
.wp-block-column .wp-block-separator.is-style-ornament {
	margin-inline: 0 auto;
}

/* ---------- Price rows ---------- */
.is-style-price-row .price-row__line {
	align-items: baseline;
}

.is-style-price-row .price-row__name {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	min-width: 0;
	margin: 0;
}

/* Dotted gold-light leader between name and price. */
.is-style-price-row .price-row__name::after {
	content: "";
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	margin-inline: 0.75rem;
	border-bottom: 1px dotted var(--wp--preset--color--accent-6);
	transform: translateY(-0.3em);
}

.is-style-price-row .price-row__price {
	flex: 0 1 auto;
	max-width: 55%;
	margin: 0;
	text-align: right;
}

.is-style-price-row .price-row__desc {
	margin: 0;
}

/* Optional description stays invisible on the site while empty. */
body:not(.editor-styles-wrapper) .price-row__desc:empty {
	display: none;
}

.is-style-price-row:last-child {
	border-bottom: 0 !important;
}

/* ---------- Gallery: square tiles, gentle hover zoom ---------- */
.wp-block-gallery .wp-block-image {
	overflow: hidden;
	border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-gallery .wp-block-image img {
		transition: transform 0.6s ease;
	}

	.wp-block-gallery .wp-block-image:hover img {
		transform: scale(1.04);
	}
}

/* ---------- Booking slot (stable class: .booking-slot) ---------- */
.booking-slot {
	min-height: 8rem;
}

/* Make the slot easy to spot while editing. */
.editor-styles-wrapper .booking-slot::before {
	content: "BOOKING SLOT – paste the booking plugin shortcode here";
	display: block;
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-3);
}

/* ---------- Icons (inline SVG in "Why" section) ---------- */
.marta-icon {
	color: var(--wp--preset--color--accent-1);
}

.marta-icon svg {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline: auto;
}

/* ---------- Images ---------- */
.wp-block-image img[style*="aspect-ratio"] {
	width: 100%;
}

.marta-hero .wp-block-image img,
#about .wp-block-image img {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* ---------- Damask background pattern ----------
   A large baroque damask (ogee lattice, rosettes, fleurons) lies under the
   whole page like faint wallpaper. It stays still while the page scrolls.
   Cream sections are transparent and pink sections slightly translucent so
   the pattern shows through; cards, images and text sit on top.
   The SVG is a mask, so the colour comes from the palette (Gold accent). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--wp--preset--color--accent-1);
	opacity: 0.12;
	/* Centre of the page falls between two motif columns (a quarter tile off
	   centre), so the motifs stay whole near the edges instead of being cut. */
	-webkit-mask: url("assets/images/ornament-damask-v2.svg") calc(50% - 105px) top / 420px 600px repeat;
	mask: url("assets/images/ornament-damask-v2.svg") calc(50% - 105px) top / 420px 600px repeat;
}

@media (min-width: 782px) {
	body::before {
		-webkit-mask-size: 504px 720px;
		mask-size: 504px 720px;
		-webkit-mask-position: calc(50% - 126px) top;
		mask-position: calc(50% - 126px) top;
	}
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

.wp-site-blocks .wp-block-group.alignfull.has-base-background-color {
	background-color: transparent !important;
}

.wp-site-blocks .wp-block-group.alignfull.has-accent-2-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 80%, transparent) !important;
}

@media print {
	body::before {
		display: none;
	}
}

/* ---------- Small safety nets ---------- */
img {
	height: auto;
}

html,
body {
	overflow-x: clip;
}