/*
Theme Name: Estepona Massage
Theme URI: https://esteponamassage.eu/
Author: Estepona Massage
Author URI: https://esteponamassage.eu/
Description: A warm, calm block theme for a solo massage therapist. Vanilla and caramel palette, self-hosted Fraunces and Manrope, fully translation-ready (Czech, English, Spanish) and compatible with Polylang.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masaze
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, translation-ready, accessibility-ready, wellness
*/

/*
 * Everything that theme.json can express lives in theme.json.
 * This file is only for what it cannot: skip link, focus rings,
 * the Polylang switcher, and reduced-motion handling.
 */

/* ---------------------------------------------------------------
   1. Skip link
   WordPress inserts the skip link itself before <main> and translates
   its text per locale, so the theme only restyles core's element.
   Deep cocoa on cream = 11.92:1.
   --------------------------------------------------------------- */

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.9rem 1.5rem;
	border-radius: var(--wp--preset--border-radius--small);
	box-shadow: var(--wp--preset--shadow--lifted);
	outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--caramel-deep);
	outline-offset: var(--wp--custom--focus-ring-offset);
}

/* ---------------------------------------------------------------
   2. Focus states — WCAG 2.1 AA (2.4.7 Focus Visible, 1.4.11 Non-text)
   The ring is Deep caramel (#8F5C28), 5.23:1 on cream and 3.4:1 on
   latte, so it stays visible on every surface the theme uses.
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--caramel-deep);
	outline-offset: var(--wp--custom--focus-ring-offset);
	border-radius: var(--wp--preset--border-radius--small);
}

/* Buttons sit on caramel, so they need a ring that reads against it. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--contrast);
	outline-offset: var(--wp--custom--focus-ring-offset);
}

/* ---------------------------------------------------------------
   3. Language switcher (Polylang)
   Markup: <nav><ul class="wp-block-polylang-language-switcher">
             <li class="lang-item current-lang"><a>…</a></li>
   --------------------------------------------------------------- */

.wp-block-polylang-language-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

/* Keep the switcher visually distinct from the site navigation beside it.
   :has() is progressive — without it the flex gap alone still separates them. */
.wp-block-group > nav:has(> .wp-block-polylang-language-switcher) {
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--latte);
}

@media (max-width: 599px) {
	.wp-block-group > nav:has(> .wp-block-polylang-language-switcher) {
		padding-left: 0;
		border-left: 0;
	}
}

.wp-block-polylang-language-switcher .lang-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-polylang-language-switcher .lang-item + .lang-item {
	position: relative;
	padding-left: 0.75rem;
}

.wp-block-polylang-language-switcher .lang-item + .lang-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0.9em;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--caramel);
}

.wp-block-polylang-language-switcher a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.wp-block-polylang-language-switcher a:hover,
.wp-block-polylang-language-switcher a:focus {
	color: var(--wp--preset--color--caramel-hover);
	text-decoration: underline;
}

.wp-block-polylang-language-switcher .current-lang > a {
	color: var(--wp--preset--color--caramel-hover);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 2px;
}

/* Dropdown variant, if the site owner switches the block to a select. */
.pll-switcher-select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.4em 0.6em;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--caramel-mid);
	border-radius: var(--wp--preset--border-radius--small);
}

/* ---------------------------------------------------------------
   4. Rounded media
   theme.json rounds core/image, but Media & Text and featured images
   wrap their <img> differently and are not reachable from theme.json.
   --------------------------------------------------------------- */

.wp-block-media-text__media img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--preset--border-radius--medium);
}

/* ---------------------------------------------------------------
   5. Cards — soft, rounded, no aggressive motion
   --------------------------------------------------------------- */

.masaze-card {
	transition: transform var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition);
}

.masaze-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Long words (Czech and Spanish compounds) must not force a scrollbar. */
.masaze-card :where(h2, h3, h4, p) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------------------------------------------------------------
   6. Price rows — dotted leader between service and price
   --------------------------------------------------------------- */

.masaze-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	justify-content: space-between;
}

.masaze-price .masaze-price__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--caramel-hover);
}

/* ---------------------------------------------------------------
   7. Reduced motion
   --------------------------------------------------------------- */

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

	.masaze-card:hover {
		transform: none;
	}
}