/**
 * Revive Your Body design system.
 *
 * Every component references the --ryb-* custom properties below; no
 * component rule contains a raw colour. The plugin emits semantic markup
 * (.ryb-*) and ships no frontend stylesheet of its own — this file is the
 * single source of visual truth, mirroring the FUS theme/plugin contract.
 *
 * Order: tokens → base → header/footer → components → calendar → forms →
 * dialogs → utilities → responsive. Later sections may override earlier
 * ones on purpose; append rather than reorder.
 */

/* 1. Tokens
---------------------------------------------------------------------------- */

:root {
	/* Brand palette sampled from the Revive Your Body logo artwork:
	 * vibrant apple green on near-black, white type. The --ryb-copper
	 * slots are retained as the site's semantic warm/pending colour
	 * (holds, warnings, secondary CTAs) — the name is historical. */
	--ryb-primary: #6fb52c;
	--ryb-primary-light: #93d14e;
	--ryb-primary-dark: #4f8f1f;
	--ryb-primary-soft: #ecf6e0;
	--ryb-copper: #b07d2e;
	--ryb-copper-light: #d0a45c;
	--ryb-copper-soft: #f6eedd;
	--ryb-ground: #f7f8f5;
	--ryb-surface: #ffffff;
	--ryb-surface-tint: #eef1e8;
	--ryb-ink: #050604; /* Matches the logo emblem's ground exactly. */
	--ryb-muted: #656d60;
	--ryb-faint: #8b9384;
	--ryb-line: #e2e6dc;
	--ryb-line-strong: #c6ccc0;
	--ryb-success: #3e6b54;
	--ryb-warning: #a85f35;
	--ryb-error: #a33d3d;
	--ryb-error-soft: #f6e4e4;
	--ryb-radius: 10px;
	--ryb-radius-sm: 8px;
	--ryb-shadow: 0 1px 3px rgba(34, 48, 42, 0.08);
	--ryb-shadow-lift: 0 10px 30px rgba(34, 48, 42, 0.12);
	--ryb-font-heading: 'Chakra Petch', 'Avenir Next', 'Helvetica Neue', sans-serif;
	--ryb-font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	--ryb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 2. Base
---------------------------------------------------------------------------- */

body {
	background-color: var(--ryb-ground);
	color: var(--ryb-ink);
}

::selection {
	background: var(--ryb-primary-soft);
	color: var(--ryb-primary-dark);
}

a {
	text-underline-offset: 2px;
}

:focus-visible {
	border-radius: 3px;
	outline: 2px solid var(--ryb-primary);
	outline-offset: 2px;
}

/* 3. Header
---------------------------------------------------------------------------- */

.ryb-header {
	background: var(--ryb-ground);
	border-bottom: 1px solid var(--ryb-line);
}

.ryb-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	padding: 1rem 1.25rem;
}

.ryb-header__logo {
	color: var(--ryb-ink);
	font-family: var(--ryb-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.ryb-header__logo span {
	color: var(--ryb-primary);
}

.ryb-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.4rem;
}

.ryb-nav a {
	color: var(--ryb-muted);
	font-family: var(--ryb-font-heading);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 140ms ease;
}

.ryb-nav a:hover,
.ryb-nav a.is-active {
	color: var(--ryb-primary);
}

.ryb-header__cta {
	background: var(--ryb-primary);
	border-radius: 999px;
	color: #ffffff;
	font-family: var(--ryb-font-heading);
	font-size: 0.92rem;
	font-weight: 600;
	padding: 0.55em 1.3em;
	text-decoration: none;
	transition: background 140ms ease;
}

.ryb-header__cta:hover {
	background: var(--ryb-primary-dark);
	color: #ffffff;
}

/* 4. Footer
---------------------------------------------------------------------------- */

.ryb-footer {
	background: var(--ryb-ink);
	color: var(--ryb-ground);
	margin-top: 4rem;
}

.ryb-footer__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0 auto;
	max-width: 1200px;
	padding: 3rem 1.25rem 2rem;
}

.ryb-footer__logo {
	color: var(--ryb-ground);
	font-family: var(--ryb-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
}

.ryb-footer__tagline {
	color: var(--ryb-line-strong);
	font-size: 0.95rem;
	margin-top: 0.6rem;
	max-width: 30ch;
}

.ryb-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.ryb-footer__nav a,
.ryb-footer__meta a {
	color: var(--ryb-line-strong);
	font-size: 0.95rem;
	text-decoration: none;
}

.ryb-footer__nav a:hover,
.ryb-footer__meta a:hover {
	color: #ffffff;
}

.ryb-footer__meta p {
	color: var(--ryb-faint);
	font-size: 0.85rem;
	margin: 0.3rem 0;
}

.ryb-footer__heading {
	color: #ffffff;
	font-family: var(--ryb-font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
	text-transform: uppercase;
}

/* 5. Shared components
---------------------------------------------------------------------------- */

.ryb-card {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	padding: 1.5rem;
}

.ryb-btn {
	background: var(--ryb-primary);
	border: none;
	border-radius: var(--ryb-radius-sm);
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--ryb-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.7em 1.5em;
	text-decoration: none;
	transition: background 140ms ease;
}

.ryb-btn:hover {
	background: var(--ryb-primary-dark);
	color: #ffffff;
}

.ryb-btn--ghost {
	background: transparent;
	border: 1.5px solid var(--ryb-primary);
	color: var(--ryb-primary);
}

.ryb-btn--ghost:hover {
	background: var(--ryb-primary-soft);
	color: var(--ryb-primary-dark);
}

.ryb-btn--copper {
	background: var(--ryb-copper);
}

.ryb-btn--copper:hover {
	background: var(--ryb-copper-light);
}

.ryb-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.ryb-pill {
	border-radius: 999px;
	display: inline-block;
	font-family: var(--ryb-font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0.2em 0.75em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ryb-pill--green {
	background: var(--ryb-primary-soft);
	color: var(--ryb-primary-dark);
}

.ryb-pill--copper {
	background: var(--ryb-copper-soft);
	color: var(--ryb-copper);
}

.ryb-pill--red {
	background: var(--ryb-error-soft);
	color: var(--ryb-error);
}

.ryb-notice {
	border-left: 3px solid var(--ryb-primary);
	background: var(--ryb-primary-soft);
	border-radius: 0 var(--ryb-radius-sm) var(--ryb-radius-sm) 0;
	color: var(--ryb-ink);
	font-size: 0.95rem;
	margin: 1rem 0;
	padding: 0.85rem 1.1rem;
}

.ryb-notice--error {
	background: var(--ryb-error-soft);
	border-left-color: var(--ryb-error);
}

/* 6. Hero
---------------------------------------------------------------------------- */

.ryb-hero {
	padding: 3.5rem 0 2.5rem;
}

.ryb-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.ryb-hero__title em {
	color: var(--ryb-primary);
	font-style: normal;
}

.ryb-hero__sub {
	color: var(--ryb-muted);
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 46ch;
}

.ryb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

.ryb-hero__trust {
	color: var(--ryb-faint);
	font-size: 0.9rem;
	margin-top: 1.4rem;
}

/* 7. Services grid
---------------------------------------------------------------------------- */

.ryb-services {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.ryb-service-card {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.4rem 1.5rem;
	transition: box-shadow 160ms ease, transform 160ms ease;
}

.ryb-service-card:hover {
	box-shadow: var(--ryb-shadow-lift);
	transform: translateY(-2px);
}

.ryb-service-card__icon {
	color: var(--ryb-primary);
}

.ryb-service-card__name {
	font-family: var(--ryb-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
}

.ryb-service-card__desc {
	color: var(--ryb-muted);
	font-size: 0.95rem;
	margin: 0;
}

.ryb-service-card__meta {
	align-items: baseline;
	display: flex;
	font-variant-numeric: tabular-nums;
	gap: 0.7rem;
	margin-top: auto;
	padding-top: 0.6rem;
}

.ryb-service-card__price {
	color: var(--ryb-primary-dark);
	font-family: var(--ryb-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.ryb-service-card__duration {
	color: var(--ryb-faint);
	font-size: 0.88rem;
}

/* 8. Price table
---------------------------------------------------------------------------- */

.ryb-prices-wrap {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	overflow-x: auto;
}

.ryb-prices {
	border-collapse: collapse;
	font-size: 1rem;
	width: 100%;
}

.ryb-prices th {
	border-bottom: 1px solid var(--ryb-line-strong);
	color: var(--ryb-faint);
	font-family: var(--ryb-font-heading);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	padding: 0.8rem 1.1rem;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.ryb-prices td {
	border-bottom: 1px solid var(--ryb-line);
	padding: 0.7rem 1.1rem;
	vertical-align: top;
}

.ryb-prices tr:last-child td {
	border-bottom: none;
}

.ryb-prices td.ryb-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 9. Booking calendar
---------------------------------------------------------------------------- */

.ryb-cal {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	padding: 1.4rem;
}

.ryb-cal__services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}

.ryb-cal__service {
	background: var(--ryb-surface-tint);
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--ryb-muted);
	cursor: pointer;
	font-family: var(--ryb-font-heading);
	font-size: 0.86rem;
	font-weight: 600;
	padding: 0.45em 1.1em;
	transition: all 140ms ease;
}

.ryb-cal__service:hover {
	color: var(--ryb-primary-dark);
}

.ryb-cal__service.is-selected {
	background: var(--ryb-primary-soft);
	border-color: var(--ryb-primary);
	color: var(--ryb-primary-dark);
}

.ryb-cal__nav {
	align-items: center;
	display: flex;
	gap: 0.8rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.ryb-cal__range {
	font-family: var(--ryb-font-heading);
	font-size: 1rem;
	font-weight: 600;
}

.ryb-cal__nav-btn {
	background: var(--ryb-surface-tint);
	border: none;
	border-radius: var(--ryb-radius-sm);
	color: var(--ryb-ink);
	cursor: pointer;
	font-family: var(--ryb-font-heading);
	font-size: 0.88rem;
	font-weight: 600;
	padding: 0.45em 0.9em;
}

.ryb-cal__nav-btn:hover:not([disabled]) {
	background: var(--ryb-primary-soft);
	color: var(--ryb-primary-dark);
}

.ryb-cal__nav-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

.ryb-cal__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(7, minmax(96px, 1fr));
	overflow-x: auto;
}

.ryb-cal__day {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.ryb-cal__day-head {
	color: var(--ryb-muted);
	font-family: var(--ryb-font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	padding-bottom: 0.3rem;
	text-align: center;
	text-transform: uppercase;
}

.ryb-cal__day-head strong {
	color: var(--ryb-ink);
	display: block;
	font-size: 1.05rem;
}

.ryb-cal__day.is-today .ryb-cal__day-head strong {
	color: var(--ryb-primary);
}

.ryb-slot {
	border: 1.5px solid var(--ryb-line-strong);
	background: var(--ryb-surface);
	border-radius: var(--ryb-radius-sm);
	color: var(--ryb-ink);
	cursor: pointer;
	font-family: var(--ryb-font-heading);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: 0.45em 0.2em;
	text-align: center;
	transition: all 120ms ease;
}

.ryb-slot:hover {
	border-color: var(--ryb-primary);
	color: var(--ryb-primary-dark);
}

.ryb-slot.is-selected {
	background: var(--ryb-primary);
	border-color: var(--ryb-primary);
	color: #ffffff;
}

.ryb-slot--held {
	background: var(--ryb-copper-soft);
	border-color: var(--ryb-copper-light);
	border-style: dashed;
	color: var(--ryb-copper);
	cursor: not-allowed;
	opacity: 0.85;
}

.ryb-slot--busy {
	background: var(--ryb-surface-tint);
	border-color: var(--ryb-line);
	color: var(--ryb-faint);
	cursor: not-allowed;
	text-decoration: line-through;
}

.ryb-cal__empty {
	color: var(--ryb-faint);
	font-size: 0.82rem;
	padding: 0.5rem 0;
	text-align: center;
}

.ryb-cal__legend {
	color: var(--ryb-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: 1.2rem;
	margin-top: 1.1rem;
}

.ryb-cal__legend span::before {
	border: 1.5px solid var(--ryb-line-strong);
	border-radius: 3px;
	content: '';
	display: inline-block;
	height: 0.75em;
	margin-right: 0.4em;
	vertical-align: -0.05em;
	width: 0.75em;
}

.ryb-cal__legend .ryb-legend--held::before {
	background: var(--ryb-copper-soft);
	border-color: var(--ryb-copper-light);
	border-style: dashed;
}

.ryb-cal__legend .ryb-legend--busy::before {
	background: var(--ryb-surface-tint);
	border-color: var(--ryb-line);
}

.ryb-cal__loading {
	color: var(--ryb-faint);
	padding: 2rem 0;
	text-align: center;
}

/* 10. Forms
---------------------------------------------------------------------------- */

.ryb-form {
	display: grid;
	gap: 1rem;
}

.ryb-form__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ryb-form label {
	display: block;
	font-family: var(--ryb-font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.ryb-form input[type='text'],
.ryb-form input[type='email'],
.ryb-form input[type='tel'],
.ryb-form select,
.ryb-form textarea {
	background: var(--ryb-surface);
	border: 1.5px solid var(--ryb-line-strong);
	border-radius: var(--ryb-radius-sm);
	color: var(--ryb-ink);
	font-family: inherit;
	font-size: 0.98rem;
	padding: 0.6em 0.8em;
	width: 100%;
}

.ryb-form input:focus,
.ryb-form select:focus,
.ryb-form textarea:focus {
	border-color: var(--ryb-primary);
	outline: none;
}

.ryb-form__consent {
	align-items: flex-start;
	color: var(--ryb-muted);
	display: flex;
	font-size: 0.85rem;
	gap: 0.6rem;
}

.ryb-form__consent input {
	margin-top: 0.25em;
}

.ryb-form__hint {
	color: var(--ryb-faint);
	font-size: 0.82rem;
	margin-top: 0.25rem;
}

/* Honeypot — visually hidden, still in the accessibility tree trap for bots. */
.ryb-field-website {
	left: -9999px;
	position: absolute;
}

/* 11. Dialogs (rendered from wp_footer — never inline in content)
---------------------------------------------------------------------------- */

.ryb-dialog {
	align-items: center;
	background: rgba(34, 48, 42, 0.55);
	display: none;
	inset: 0;
	justify-content: center;
	padding: 1.25rem;
	position: fixed;
	z-index: 999;
}

.ryb-dialog.is-open {
	display: flex;
}

.ryb-dialog__panel {
	background: var(--ryb-surface);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow-lift);
	max-height: 90vh;
	max-width: 520px;
	overflow-y: auto;
	padding: 1.8rem;
	position: relative;
	width: 100%;
}

.ryb-dialog__close {
	background: none;
	border: none;
	color: var(--ryb-faint);
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0.3rem;
	position: absolute;
	right: 0.9rem;
	top: 0.9rem;
}

.ryb-dialog__close:hover {
	color: var(--ryb-ink);
}

.ryb-dialog__title {
	font-size: 1.3rem;
	margin: 0 0 0.4rem;
	padding-right: 2rem;
}

.ryb-dialog__summary {
	background: var(--ryb-primary-soft);
	border-radius: var(--ryb-radius-sm);
	color: var(--ryb-primary-dark);
	font-family: var(--ryb-font-heading);
	font-size: 0.92rem;
	font-weight: 600;
	margin: 0.8rem 0 1.2rem;
	padding: 0.7rem 1rem;
}

/* 12. Testimonials, FAQ, voucher banner
---------------------------------------------------------------------------- */

.ryb-testimonials {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ryb-testimonial {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	padding: 1.4rem 1.5rem;
}

.ryb-testimonial__stars {
	color: var(--ryb-copper);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
}

.ryb-testimonial__quote {
	font-size: 0.98rem;
	font-style: italic;
	margin: 0.6rem 0;
}

.ryb-testimonial__name {
	color: var(--ryb-faint);
	font-family: var(--ryb-font-heading);
	font-size: 0.85rem;
	font-weight: 600;
}

.ryb-faq details {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius-sm);
	margin-bottom: 0.6rem;
	padding: 0.9rem 1.2rem;
}

.ryb-faq summary {
	cursor: pointer;
	font-family: var(--ryb-font-heading);
	font-size: 1rem;
	font-weight: 600;
}

.ryb-faq details[open] summary {
	color: var(--ryb-primary-dark);
	margin-bottom: 0.5rem;
}

.ryb-voucher-banner {
	align-items: center;
	background: var(--ryb-ink);
	border-radius: var(--ryb-radius);
	color: var(--ryb-ground);
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	justify-content: space-between;
	padding: 2rem 2.2rem;
}

.ryb-voucher-banner h2,
.ryb-voucher-banner h3 {
	color: #ffffff;
	margin: 0 0 0.4rem;
}

.ryb-voucher-banner p {
	color: var(--ryb-line-strong);
	margin: 0;
	max-width: 48ch;
}

/* 13. WhatsApp floating link
---------------------------------------------------------------------------- */

.ryb-whatsapp {
	align-items: center;
	background: var(--ryb-primary);
	border-radius: 999px;
	bottom: 1.3rem;
	box-shadow: var(--ryb-shadow-lift);
	color: #ffffff;
	display: flex;
	height: 3.2rem;
	justify-content: center;
	position: fixed;
	right: 1.3rem;
	transition: transform 140ms ease;
	width: 3.2rem;
	z-index: 90;
}

.ryb-whatsapp:hover {
	color: #ffffff;
	transform: scale(1.07);
}

/* 14. Utilities
---------------------------------------------------------------------------- */

.ryb-mt-0 { margin-top: 0; }
.ryb-mb-8 { margin-bottom: 2rem; }
.ryb-center { text-align: center; }
.ryb-muted { color: var(--ryb-muted); }

/* 15. Motion preferences
---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ryb-service-card,
	.ryb-slot,
	.ryb-whatsapp,
	.ryb-btn,
	.ryb-nav a {
		transition: none;
	}
}

/* 16. Responsive
---------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.ryb-cal__grid {
		grid-template-columns: repeat(7, minmax(84px, 1fr));
	}

	.ryb-voucher-banner {
		padding: 1.5rem;
	}

	.ryb-hero {
		padding: 2.2rem 0 1.6rem;
	}
}

/* 17. Core-block equivalents (editable CMS blocks)
 * Pages and patterns are built from core blocks (headings, paragraphs,
 * buttons, details, navigation) so all copy is editable in the editor;
 * these rules make the core markup render identically to the original
 * hand-written components.
---------------------------------------------------------------------------- */

/* Button block styles (picked from the editor styles panel). */
.wp-block-button.is-style-ryb-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--ryb-primary);
	color: var(--ryb-primary);
}

.wp-block-button.is-style-ryb-ghost .wp-block-button__link:hover {
	background: var(--ryb-primary-soft);
	color: var(--ryb-primary-dark);
}

.wp-block-button.is-style-ryb-copper .wp-block-button__link {
	background: var(--ryb-copper);
	color: #ffffff;
}

.wp-block-button.is-style-ryb-copper .wp-block-button__link:hover {
	background: var(--ryb-copper-light);
	color: #ffffff;
}

/* Group block styles. */
.wp-block-group.is-style-ryb-card {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius);
	box-shadow: var(--ryb-shadow);
	padding: 1.5rem;
}

.wp-block-group.is-style-ryb-banner {
	background: var(--ryb-ink);
	border-radius: var(--ryb-radius);
	color: var(--ryb-ground);
	padding: 2rem 2.2rem;
}

.wp-block-group.is-style-ryb-banner h2,
.wp-block-group.is-style-ryb-banner h3 {
	color: #ffffff;
	margin-top: 0;
}

.wp-block-group.is-style-ryb-banner p {
	color: var(--ryb-line-strong);
}

/* Buttons inside hero/banners keep their layout spacing. */
.ryb-hero__actions.wp-block-buttons {
	margin-top: 1.6rem;
}

/* Header built from site-title + navigation + buttons blocks. */
.ryb-header .wp-block-site-title {
	margin: 0;
}

.ryb-header .wp-block-site-title a {
	color: var(--ryb-ink);
	font-family: var(--ryb-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.ryb-header .wp-block-site-title a:hover {
	color: var(--ryb-primary);
}

.ryb-nav.wp-block-navigation a {
	color: var(--ryb-muted);
	font-family: var(--ryb-font-heading);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.ryb-nav.wp-block-navigation a:hover,
.ryb-nav.wp-block-navigation .current-menu-item > a {
	color: var(--ryb-primary);
}

.ryb-header .wp-block-buttons .wp-block-button__link {
	border-radius: 999px;
	font-size: 0.92rem;
	padding: 0.55em 1.3em;
}

/* Footer columns built from groups + paragraphs. */
.ryb-footer__nav p,
.ryb-footer__meta p {
	margin: 0 0 0.45rem;
}

.ryb-footer .wp-block-heading {
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0 0 0.8rem;
	text-transform: uppercase;
}

/* Contact links + opening hours (rendered by the plugin from Settings). */
.ryb-contact-links {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ryb-contact-links a {
	align-items: center;
	display: inline-flex;
	gap: 0.5em;
	text-decoration: none;
}

.ryb-footer .ryb-contact-links a {
	color: var(--ryb-line-strong);
	font-size: 0.95rem;
}

.ryb-footer .ryb-contact-links a:hover {
	color: #ffffff;
}

.ryb-hours {
	border-collapse: collapse;
	font-size: inherit;
	width: auto;
}

.ryb-hours td {
	border: none;
	padding: 0.2rem 1.2rem 0.2rem 0;
}

.ryb-hours .ryb-hours__closed {
	color: var(--ryb-faint);
}

.ryb-footer .ryb-hours {
	color: var(--ryb-line-strong);
	font-size: 0.9rem;
}

/* FAQ accordions as core details blocks. */
.ryb-faq .wp-block-details {
	background: var(--ryb-surface);
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-radius-sm);
	margin-bottom: 0.6rem;
	padding: 0.9rem 1.2rem;
}

.ryb-faq .wp-block-details summary {
	cursor: pointer;
	font-family: var(--ryb-font-heading);
	font-size: 1rem;
	font-weight: 600;
}

.ryb-faq .wp-block-details[open] summary {
	color: var(--ryb-primary-dark);
	margin-bottom: 0.5rem;
}

/* 18. Header cluster + WooCommerce header icons
 * The header is logo left, one right-hand cluster (nav · account · cart ·
 * CTA) with a single consistent gap, everything centred on one axis.
---------------------------------------------------------------------------- */

.ryb-header__inner {
	align-items: center;
}

.ryb-header__cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
}

.ryb-header__cluster .wp-block-navigation,
.ryb-header__cluster .wp-block-buttons {
	margin: 0;
}

/* Account icon: match the nav colour, centre it, size it to the text. */
.ryb-header .wp-block-woocommerce-customer-account {
	display: flex;
	margin: 0;
}

.ryb-header .wc-block-customer-account__link {
	color: var(--ryb-muted);
	display: flex;
	align-items: center;
}

.ryb-header .wc-block-customer-account__link:hover {
	color: var(--ryb-primary);
}

.ryb-header .wc-block-customer-account__account-icon {
	height: 1.45em;
	width: 1.45em;
}

/* Mini-cart: same treatment. */
.ryb-header .wc-block-mini-cart {
	margin: 0;
}

.ryb-header .wc-block-mini-cart__button {
	color: var(--ryb-muted);
	padding: 0;
}

.ryb-header .wc-block-mini-cart__button:hover {
	color: var(--ryb-primary);
	opacity: 1;
}

@media (max-width: 700px) {
	.ryb-header__cluster {
		gap: 0.6rem 1rem;
	}
}

/* 19. WooCommerce page width
 * Woo's blocktheme stylesheet caps the account/cart/checkout container and
 * post title at 1000px; the site's content column is 1200px. Restore the
 * global content size so Woo pages match the rest of the frontend (body-
 * prefixed to outweigh Woo's selector regardless of load order).
---------------------------------------------------------------------------- */

body.woocommerce-account .wp-block-post-title,
body.woocommerce-account main .woocommerce,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout main .woocommerce {
	max-width: var(--wp--style--global--content-size, 1200px);
}

/* 20. Brand refresh — dark header, lockup, lime-button contrast
 * The header/footer take the logo's black ground; buttons on the vibrant
 * green use near-black text (white fails contrast on this green).
---------------------------------------------------------------------------- */

.ryb-btn,
.ryb-btn:hover {
	color: var(--ryb-ink);
}

.ryb-btn:hover {
	background: var(--ryb-primary-light);
}

.ryb-btn--ghost {
	color: var(--ryb-primary-dark);
}

.ryb-slot.is-selected {
	color: var(--ryb-ink);
}

.wp-block-button.is-style-ryb-copper .wp-block-button__link,
.ryb-btn--copper {
	color: #ffffff;
}

/* Dark header. */
.ryb-header {
	background: var(--ryb-ink);
	border-bottom: 1px solid #171c15;
}

.ryb-header .wp-block-site-title a,
.ryb-nav.wp-block-navigation a {
	color: #d4d9cf;
}

.ryb-nav.wp-block-navigation a:hover,
.ryb-nav.wp-block-navigation .current-menu-item > a {
	color: var(--ryb-primary-light);
}

.ryb-header .wc-block-customer-account__link,
.ryb-header .wc-block-mini-cart__button {
	color: #d4d9cf;
}

.ryb-header .wc-block-customer-account__link:hover,
.ryb-header .wc-block-mini-cart__button:hover {
	color: var(--ryb-primary-light);
}

.ryb-header .wp-block-buttons .wp-block-button__link {
	background: var(--ryb-primary);
	color: var(--ryb-ink);
}

.ryb-header .wp-block-buttons .wp-block-button__link:hover {
	background: var(--ryb-primary-light);
	color: var(--ryb-ink);
}

/* Brand lockup (text mark until the logo image file lands). */
.ryb-lockup {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1;
	text-decoration: none;
}

.ryb-lockup__main {
	color: #ffffff;
	font-family: var(--ryb-font-heading);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.ryb-lockup__main em {
	color: var(--ryb-primary);
	font-style: normal;
}

.ryb-lockup__sub {
	color: var(--ryb-primary);
	font-family: var(--ryb-font-heading);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.42em;
	text-transform: uppercase;
}

.ryb-lockup img {
	display: block;
	height: 44px;
	width: auto;
}

/* Mobile nav: the hamburger lives on the dark header. */
.ryb-nav .wp-block-navigation__responsive-container-open {
	color: #d4d9cf;
}

/* Homepage client showcase. */
.ryb-showcase {
	align-items: center;
	background: var(--ryb-ink);
	border-radius: var(--ryb-radius);
	color: var(--ryb-ground);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	overflow: hidden;
}

.ryb-showcase img {
	display: block;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	width: 100%;
}

.ryb-showcase__copy {
	padding: 2.2rem;
}

.ryb-showcase__copy h2,
.ryb-showcase__copy h3 {
	color: #ffffff;
	margin-top: 0;
}

.ryb-showcase__copy p {
	color: #c6ccc0;
}

/* 21. Lockup with the emblem image
 * The emblem sits left of the wordmark; a missing file hides itself via
 * the img's onerror, leaving the text lockup standing alone.
---------------------------------------------------------------------------- */

.ryb-lockup {
	align-items: center;
	flex-direction: row;
	gap: 0.65rem;
}

.ryb-lockup__mark {
	display: block;
	height: 46px;
	width: auto;
}

.ryb-lockup__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

/* 22. Nav link visibility on the dark header
 * Core's doubled-class rule (.wp-block-navigation-item__content
 * .wp-block-navigation-item__content { color: inherit }) outranks any
 * two-class override, so the colour is set on the containers inheritance
 * flows from; hover needs three-class specificity to beat it.
---------------------------------------------------------------------------- */

.ryb-header .ryb-nav.wp-block-navigation,
.ryb-header .wp-block-navigation__responsive-container {
	color: #d4d9cf;
}

.ryb-header .ryb-nav .wp-block-navigation-item__content:hover,
.ryb-header .ryb-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ryb-primary-light);
}

/* The front page hero carries its own H1 — hide the template's "Home". */
.home .wp-block-post-title {
	display: none;
}

/* 23. Opening hours alignment
 * The constrained layout's auto margins position children in the content
 * column; a width:auto table therefore floats centred. Spanning the full
 * column keeps it aligned with the headings, cells reading from the left.
---------------------------------------------------------------------------- */

.ryb-hours {
	width: 100%;
}

.ryb-hours td:first-child {
	width: 160px;
}

/* 24. Featured treatment cards */

.ryb-service-card--featured {
	border-color: var(--ryb-primary);
	border-width: 1.5px;
}

/* Static chip above the title - an absolute overlay collided with long
 * card names. */
.ryb-service-card__badge {
	align-self: flex-start;
}

/* 25. Header vertical alignment
 * Everything in the bar centres on one axis: the nav, icons and CTA are
 * flex-centred with normalised line-heights so text links, icon glyphs
 * and the pill button share the same visual midline as the lockup.
---------------------------------------------------------------------------- */

.ryb-header__cluster > * {
	align-items: center;
	display: flex;
	margin-top: 0;
	margin-bottom: 0;
}

.ryb-nav.wp-block-navigation a,
.ryb-header .wp-block-buttons .wp-block-button__link {
	line-height: 1.2;
}

/* Desktop only: on mobile this container is core's hidden overlay until
 * the hamburger opens it - forcing display there paints ghost links over
 * the page. */
@media (min-width: 600px) {
	.ryb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: flex;
		align-items: center;
	}
}

/* WP flow layout adds margin-block-start to every sibling after the
 * first; inside the centred header/footer rows that margin skews items
 * off the shared midline (spotted by Alex - thanks). */
.ryb-header__inner > *,
.ryb-header__cluster > *,
.ryb-footer__inner > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 26. Google reviews section */

.ryb-reviews__summary {
	color: var(--ryb-muted);
	font-size: 1.05rem;
	margin: 0 0 1.2rem;
}

.ryb-reviews__stars {
	color: var(--ryb-copper);
	letter-spacing: 0.1em;
}

.ryb-reviews__actions {
	margin-bottom: 2rem;
}

/* 27. Mobile header + menu overlay
---------------------------------------------------------------------------- */

/* Woo injects the mini-cart drawer into the page at load; until opened it
 * must not contribute layout width (it was stretching mobile pages ~980px
 * wide, pushing the header CTA off-screen). Belt and braces: clip any
 * stray horizontal overflow at the body. */
.wc-block-mini-cart__template-part {
	position: fixed;
	inset-block-start: 0;
	inset-inline-end: 0;
}

body {
	overflow-x: clip;
}

/* Burger: green glyph, no box. */
.ryb-nav .wp-block-navigation__responsive-container-open {
	background: none;
	border: none;
	color: var(--ryb-primary);
	padding: 0;
}

/* One-line mobile header: logo · account · cart · Book now · burger. */
@media (max-width: 600px) {
	.ryb-header__inner {
		flex-wrap: nowrap;
		gap: 0.5rem;
		padding: 0.7rem 0.8rem;
	}

	.ryb-lockup {
		flex-shrink: 0;
		gap: 0.4rem;
	}

	.ryb-lockup__mark {
		height: 34px;
	}

	.ryb-lockup__main {
		font-size: 0.95rem;
		letter-spacing: 0.08em;
	}

	.ryb-lockup__sub {
		font-size: 0.5rem;
		letter-spacing: 0.3em;
	}

	.ryb-header__cluster {
		flex: 1;
		flex-wrap: nowrap;
		gap: 0.55rem;
		justify-content: flex-end;
	}

	.ryb-header__cluster > .ryb-nav {
		order: 5;
	}

	.ryb-header .wp-block-buttons .wp-block-button__link {
		font-size: 0.78rem;
		padding: 0.45em 0.9em;
	}
}

/* The open menu overlay: brand black, big touch-friendly links. */
.ryb-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ryb-ink);
	color: #d4d9cf;
	padding: 4.5rem 2rem 2rem;
}

.ryb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	padding: 0.6rem 0;
}

.ryb-header .wp-block-navigation__responsive-container-close {
	background: none;
	border: none;
	color: var(--ryb-primary);
	padding: 0;
}

/* 28. Vertical rhythm
 * Ollie's template pads <main> with xx-large spacing at both ends (as an
 * inline style, hence the !important); combined with the hero padding and
 * footer margin it left a hole between nav and content. Tightened at all
 * three layers.
---------------------------------------------------------------------------- */

main.wp-block-group {
	padding-top: clamp(1.25rem, 3vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}

.ryb-hero {
	padding: 1.5rem 0 2rem;
}

.ryb-footer {
	margin-top: 2.5rem;
}

/* 29. Mobile service picker: one horizontally scrolling line
---------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.ryb-cal__services {
		flex-wrap: nowrap;
		margin: 0 -1.4rem 1.2rem;
		overflow-x: auto;
		padding: 0 1.4rem 0.4rem;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ryb-cal__services::-webkit-scrollbar {
		display: none;
	}

	.ryb-cal__service {
		flex: 0 0 auto;
		scroll-snap-align: start;
		white-space: nowrap;
	}
}