/*
 * Beauty and Bloom — theme styles.
 *
 * Palette is gold and beige. Contrast was checked against the cream page
 * background (#FBF7F0):
 *   --bb-ink       14.1:1  body copy
 *   --bb-gold-deep  4.5:1  links, small text, button backgrounds (white text on it: 4.8:1)
 *   --bb-gold       2.3:1  decorative only — rules, borders, large display type
 *   --bb-muted      5.9:1  secondary copy
 * Never use --bb-gold for body-sized text.
 */

:root {
	--bb-gold: #c2a05a;
	--bb-gold-deep: #8c6d2f;
	--bb-gold-light: #e3d2ac;
	--bb-beige: #f2e9da;
	--bb-cream: #fbf7f0;
	--bb-ink: #2f2b26;
	--bb-muted: #645c50;
	--bb-white: #ffffff;

	--bb-serif: 'Gentium Book Plus', 'Gentium Plus', Georgia, 'Times New Roman', serif;
	--bb-display: 'Gentium Plus', 'Gentium Book Plus', Georgia, serif;
	--bb-sans: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--bb-measure: 68ch;
	--bb-radius: 2px;
	--bb-space: clamp(3rem, 7vw, 6rem);
}

/* ---------------------------------------------------------------- base */

body,
.woocommerce,
.entry-content {
	background-color: var(--bb-cream);
	color: var(--bb-ink);
	font-family: var(--bb-serif);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* Greek diacritics sit high; a little extra leading keeps them off the line above. */
:lang(el) body {
	line-height: 1.8;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-header-title {
	font-family: var(--bb-display);
	color: var(--bb-ink);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }

/* Cap the line length for readability, but centre the column itself when the
   block is centre-aligned — otherwise centred text sits in a left-hugging box. */
p { max-width: var(--bb-measure); }

.has-text-align-center,
.has-text-align-center p,
p.has-text-align-center {
	margin-inline: auto;
}

a {
	color: var(--bb-gold-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--bb-ink);
}

:focus-visible {
	outline: 2px solid var(--bb-gold-deep);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ chrome */

#site-navigation-wrap .dropdown-menu > li > a,
.oceanwp-mobile-menu-icon a,
.site-breadcrumbs,
.widget-title,
.bb-eyebrow {
	font-family: var(--bb-sans);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.8125rem;
}

#site-header {
	background-color: var(--bb-cream);
	border-bottom: 1px solid var(--bb-gold-light);
}

#site-header .site-title,
#site-logo .site-logo-text {
	font-family: var(--bb-display);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	color: var(--bb-ink);
}

#site-navigation-wrap .dropdown-menu > li > a {
	color: var(--bb-ink);
}

#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
	color: var(--bb-gold-deep);
}

#footer,
#footer-widgets {
	background-color: var(--bb-beige);
	color: var(--bb-ink);
	border-top: 1px solid var(--bb-gold-light);
}

#footer a,
#footer-bottom a {
	color: var(--bb-gold-deep);
}

/* ------------------------------------------------------------ buttons */

/* OceanWP paints .wp-element-button from the customizer with high specificity, so
   these selectors have to match it or the blocks keep the theme's default blue. */
.bb-button,
.button,
button,
input[type="submit"],
.entry-content .wp-block-button__link,
.wp-block-button__link.wp-element-button,
.wp-block-button .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wpcf7 input[type="submit"],
#ea-bootstrap .btn-primary {
	font-family: var(--bb-sans);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--bb-gold-deep);
	color: var(--bb-white);
	border: 1px solid var(--bb-gold-deep);
	border-radius: var(--bb-radius);
	padding: 0.9em 2em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bb-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.entry-content .wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wpcf7 input[type="submit"]:hover,
#ea-bootstrap .btn-primary:hover {
	background-color: var(--bb-ink);
	border-color: var(--bb-ink);
	color: var(--bb-white);
}

/* Secondary: outlined, for the lower-priority action in a pair. */
.bb-button--ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--bb-gold-deep);
	border: 1px solid var(--bb-gold);
}

.bb-button--ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--bb-gold-deep);
	color: var(--bb-white);
	border-color: var(--bb-gold-deep);
}

/* -------------------------------------------------------- components */

.bb-eyebrow {
	display: block;
	color: var(--bb-gold-deep);
	margin-bottom: 0.75rem;
}

/* Thin gold rule used under section headings. */
.bb-rule::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	background-color: var(--bb-gold);
	margin: 1.25rem 0 0;
}

.has-text-align-center .bb-rule::after,
.bb-rule.has-text-align-center::after {
	margin-inline: auto;
}

.bb-section {
	padding-block: var(--bb-space);
}

.bb-section--beige {
	background-color: var(--bb-beige);
}

.bb-hero {
	background-color: var(--bb-beige);
	padding-block: clamp(4rem, 12vw, 9rem);
	text-align: center;
}

.bb-hero p {
	margin-inline: auto;
	max-width: 48ch;
	color: var(--bb-muted);
	font-size: 1.15rem;
}

/* Treatment / service cards. */
.bb-card {
	background-color: var(--bb-white);
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	padding: 2rem 1.75rem;
	height: 100%;
}

.bb-card h3 {
	margin-top: 0;
}

.bb-card p {
	color: var(--bb-muted);
	max-width: none;
}

/* Price list: name on the left, dotted leader, price on the right. */
.bb-price {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--bb-gold-light);
	max-width: var(--bb-measure);
}

.bb-price__name {
	flex: 0 1 auto;
}

.bb-price__dots {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--bb-gold);
	transform: translateY(-0.25em);
}

.bb-price__meta {
	font-family: var(--bb-sans);
	font-size: 0.8125rem;
	color: var(--bb-muted);
	white-space: nowrap;
}

.bb-price__amount {
	font-family: var(--bb-sans);
	font-weight: 600;
	color: var(--bb-gold-deep);
	white-space: nowrap;
}

/* Opening hours (see bb_opening_hours_shortcode). */
.bb-hours {
	max-width: 22rem;
	font-family: var(--bb-sans);
	font-size: 0.9375rem;
}

.bb-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--bb-gold-light);
}

.bb-hours__day {
	color: var(--bb-ink);
}

.bb-hours__time {
	color: var(--bb-muted);
}

.bb-quote + .bb-quote {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bb-gold-light);
}

.bb-quote {
	font-family: var(--bb-display);
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--bb-ink);
	border: 0;
	padding: 0;
	margin: 0;
	max-width: 40ch;
}

.bb-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--bb-sans);
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-muted);
}

.bb-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	filter: saturate(0.75);
}

.bb-social-placeholder {
	font-family: var(--bb-sans);
	font-size: 0.9375rem;
	color: var(--bb-muted);
	text-align: center;
	padding: 3rem 1rem;
	border: 1px dashed var(--bb-gold-light);
	border-radius: var(--bb-radius);
	max-width: none;
}

.bb-contact-detail {
	font-family: var(--bb-sans);
	font-size: 1rem;
	line-height: 1.9;
}

.bb-contact-detail strong {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-gold-deep);
	font-weight: 500;
}

/* ------------------------------------------------------- woocommerce */

/* WooCommerce's own stylesheet loads after this one and paints prices and the
   sale flash in its default green at equal specificity, so these selectors are
   prefixed with body.woocommerce to win on specificity rather than load order. */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bb-display);
	font-size: 1.15rem;
	color: var(--bb-ink);
}

/* OceanWP colours the inner .amount span, not .price, so both are needed. */
body.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price .amount,
body.woocommerce ul.products li.product .price ins .amount,
body.woocommerce-page ul.products li.product .price,
body.woocommerce-page ul.products li.product .price .amount,
body.woocommerce div.product p.price,
body.woocommerce div.product p.price .amount,
body.woocommerce div.product span.price .amount,
body.woocommerce-page div.product p.price,
body.woocommerce-page div.product p.price .amount {
	font-family: var(--bb-sans);
	font-weight: 600;
	color: var(--bb-gold-deep);
	text-decoration: none;
}

/* Struck-through original price on a sale item. */
body.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del .amount,
body.woocommerce div.product p.price del,
body.woocommerce div.product p.price del .amount {
	color: var(--bb-muted);
	font-weight: 400;
	opacity: 1;
}

body.woocommerce span.onsale,
body.woocommerce-page span.onsale {
	background-color: var(--bb-gold-deep);
	color: var(--bb-white);
	font-family: var(--bb-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--bb-radius);
	padding: 0.4em 0.9em;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* Product cards: equal height so rows line up when titles wrap to two lines. */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	text-align: center;
}

body.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: center;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--bb-gold-deep);
	background-color: var(--bb-beige);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--bb-gold-deep);
}

.woocommerce table.shop_table,
.woocommerce-checkout #payment {
	border-color: var(--bb-gold-light);
	background-color: var(--bb-white);
}

/* ---------------------------------------------------------- forms */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea,
#ea-bootstrap .form-control {
	font-family: var(--bb-sans);
	font-size: 1rem;
	color: var(--bb-ink);
	background-color: var(--bb-white);
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	padding: 0.75em 0.9em;
	width: 100%;
	max-width: 100%;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--bb-gold-deep);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(140, 109, 47, 0.15);
}

label {
	font-family: var(--bb-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bb-ink);
	display: block;
	margin-bottom: 0.35rem;
}

/* The honeypot on the contact form must be hidden from sight but reachable by
   nothing — visually hidden rather than display:none so bots still fill it. */
.bb-honeypot {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}

.wpcf7 form .wpcf7-response-output {
	font-family: var(--bb-sans);
	font-size: 0.9375rem;
	border-color: var(--bb-gold);
	border-radius: var(--bb-radius);
	margin-inline: 0;
}

/* --------------------------------------------- easy appointments form
 *
 * The plugin ships its own bundled Bootstrap 3, which brings blue buttons, a blue
 * jQuery UI datepicker and a cramped two-column grid. These rules override that
 * to match the rest of the site. Selectors are deliberately specific enough to
 * beat the plugin's own stylesheet without needing !important.
 */

.ea-bootstrap {
	font-family: var(--bb-sans);
	max-width: 40rem;
}

.ea-bootstrap .ea-label,
.ea-bootstrap .control-label {
	font-family: var(--bb-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--bb-ink);
	text-align: left;
	width: 100%;
	margin-bottom: 0.35rem;
	padding: 0;
}

.ea-bootstrap .form-group {
	margin-bottom: 1.5rem;
}

.ea-bootstrap .form-control,
.ea-bootstrap select.form-control {
	height: auto;
	box-shadow: none;
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	background-color: var(--bb-white);
	color: var(--bb-ink);
	font-family: var(--bb-sans);
	font-size: 1rem;
	padding: 0.75em 0.9em;
}

.ea-bootstrap .form-control:focus {
	border-color: var(--bb-gold-deep);
	box-shadow: 0 0 0 3px rgba(140, 109, 47, 0.15);
}

.ea-bootstrap .ea-btn.btn-primary,
.ea-bootstrap .ea-submit.btn {
	background-color: var(--bb-gold-deep);
	border-color: var(--bb-gold-deep);
	color: var(--bb-white);
	text-shadow: none;
	background-image: none;
	font-family: var(--bb-sans);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--bb-radius);
	padding: 0.9em 2em;
}

.ea-bootstrap .ea-btn.btn-primary:hover,
.ea-bootstrap .ea-btn.btn-primary:focus,
.ea-bootstrap .ea-submit.btn:hover {
	background-color: var(--bb-ink);
	border-color: var(--bb-ink);
	color: var(--bb-white);
}

.ea-bootstrap .ea-btn.btn-default,
.ea-bootstrap .ea-cancel.btn {
	background-color: transparent;
	background-image: none;
	border-color: var(--bb-gold-light);
	color: var(--bb-muted);
	text-shadow: none;
	font-family: var(--bb-sans);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--bb-radius);
	padding: 0.9em 1.75em;
}

.ea-bootstrap h3,
.ea-bootstrap .ea-confirmation-title {
	font-family: var(--bb-display);
	font-size: 1.35rem;
	color: var(--bb-ink);
	margin-top: 2.5rem;
}

.ea-bootstrap .ea-service-description,
.ea-bootstrap .ea-status-note {
	font-size: 0.9375rem;
	color: var(--bb-muted);
}

.ea-bootstrap .ea-confirmation-card {
	background-color: var(--bb-beige);
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	padding: 1.5rem;
}

/* jQuery UI datepicker */
.ea-bootstrap .ui-datepicker,
#ui-datepicker-div {
	font-family: var(--bb-sans);
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	background-color: var(--bb-white);
	padding: 0.5rem;
	box-shadow: 0 2px 12px rgba(47, 43, 38, 0.06);
}

#ui-datepicker-div .ui-datepicker-header,
.ea-bootstrap .ui-datepicker-header {
	background: transparent;
	border: 0;
	color: var(--bb-ink);
	font-weight: 500;
}

#ui-datepicker-div .ui-datepicker-title,
.ea-bootstrap .ui-datepicker-title {
	font-family: var(--bb-display);
	font-size: 1.05rem;
}

#ui-datepicker-div th,
.ea-bootstrap .ui-datepicker th {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-muted);
	font-weight: 500;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span,
.ea-bootstrap .ui-datepicker td a,
.ea-bootstrap .ui-datepicker td span {
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--bb-ink);
	border-radius: var(--bb-radius);
	padding: 0.45em 0;
}

#ui-datepicker-div td a:hover,
.ea-bootstrap .ui-datepicker td a:hover {
	background-color: var(--bb-beige);
	color: var(--bb-ink);
}

/* jQuery UI marks today with .ui-state-highlight and the picked day with
   .ui-state-active; the bundled Bootstrap paints both blue. */
#ui-datepicker-div .ui-state-active,
#ui-datepicker-div .ui-state-highlight,
#ui-datepicker-div .ui-datepicker-today a,
.ea-bootstrap .ui-state-active,
.ea-bootstrap .ui-state-highlight,
.ea-bootstrap .ui-datepicker-today a,
.ea-bootstrap .ui-datepicker-current-day a {
	background-color: var(--bb-gold-deep) !important;
	border-color: var(--bb-gold-deep) !important;
	color: var(--bb-white) !important;
}

#ui-datepicker-div .ui-state-hover,
.ea-bootstrap .ui-state-hover {
	background-color: var(--bb-beige) !important;
	color: var(--bb-ink) !important;
}

#ui-datepicker-div .ui-state-disabled,
.ea-bootstrap .ui-state-disabled {
	opacity: 0.3;
}

/* Available days should read as clickable. */
.ea-bootstrap .ui-datepicker td:not(.ui-state-disabled) a {
	color: var(--bb-gold-deep);
	font-weight: 500;
	text-decoration: none;
}

/* Time slots */
.ea-bootstrap .ea-slot,
.ea-bootstrap .time-slot {
	border: 1px solid var(--bb-gold-light);
	border-radius: var(--bb-radius);
	background-color: var(--bb-white);
	color: var(--bb-ink);
}

.ea-bootstrap .ea-slot.selected,
.ea-bootstrap .time-slot.selected {
	background-color: var(--bb-gold-deep);
	border-color: var(--bb-gold-deep);
	color: var(--bb-white);
}

/* GDPR consent row */
.ea-bootstrap .ea-actions-group {
	padding-left: 0;
	margin-top: 1.5rem;
}

.ea-bootstrap .ea-actions-group a {
	color: var(--bb-gold-deep);
}

/* --------------------------------------------------- language switcher */

/* Sits as the last item of the primary menu, so OceanWP's own layout positions it. */
#site-navigation-wrap .dropdown-menu > li.bb-header-ls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-left: 1.25rem;
	margin-left: 0.75rem;
	border-left: 1px solid var(--bb-gold-light);
}

.bb-header-ls a {
	font-family: var(--bb-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--bb-muted);
	text-decoration: none;
	line-height: 1;
}

.bb-header-ls a:hover,
.bb-header-ls a:focus-visible {
	color: var(--bb-gold-deep);
}

.bb-header-ls a.is-current {
	color: var(--bb-ink);
	border-bottom: 1px solid var(--bb-gold);
	padding-bottom: 2px;
}

.bb-header-ls__sep {
	color: var(--bb-gold-light);
	font-size: 0.75rem;
	line-height: 1;
}

/* In the mobile drawer the menu stacks, so let the pair sit on its own row. */
@media (max-width: 959px) {
	#site-navigation-wrap .dropdown-menu > li.bb-header-ls,
	.bb-header-ls {
		border-left: 0;
		padding: 0.75rem 0 0;
		margin-left: 0;
	}
}

/* ----------------------------------------------------------- layout */

.bb-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Wide content must never push the page sideways. */
.entry-content table,
.entry-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 600px) {
	.bb-price {
		flex-wrap: wrap;
	}

	.bb-price__dots {
		display: none;
	}

	.bb-price__amount {
		margin-left: auto;
	}

	.bb-map iframe {
		height: 300px;
	}
}

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