/*
Theme Name: Berté
Theme URI: https://www.berte.uk/
Description: Child theme of Twenty Twenty-Five for Berté Private Hairdressing. Warm editorial design with Cormorant Garamond headings and Montserrat body text.
Author: Berté
Template: twentytwentyfive
Version: 1.2.2
Requires at least: 6.7
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: berte
*/

/* ---------- Shared helpers ---------- */

.berte-eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 0;
}

.has-contrast-background-color .berte-eyebrow,
.berte-hero .berte-eyebrow {
	color: inherit;
}

.berte-section {
	padding-top: clamp(4.5rem, 9vw, 8rem);
	padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.berte-section > * + * {
	margin-block-start: 1.5rem;
}

.berte-muted {
	color: var(--wp--preset--color--accent-4);
}

.has-contrast-background-color .berte-muted {
	color: var(--wp--preset--color--accent-5);
}

.berte-small {
	font-size: 0.875rem;
}

.berte-center {
	text-align: center;
}

.berte-center .wp-block-buttons {
	justify-content: center;
}

/* Text link styled as an underlined label */
.berte-textlink a {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.27em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 6px;
}

/* ---------- Buttons ---------- */

.wp-block-button.berte-btn-light .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

/* ---------- Header ---------- */

.berte-header-part {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.berte-header {
	padding: 1.5rem clamp(1rem, 5vw, 4.5rem);
	gap: 1rem;
}

.berte-logo {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	line-height: 1;
}

.berte-logo a,
.berte-logo a:hover {
	color: inherit;
	text-decoration: none;
}

.berte-nav {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.33em;
	text-transform: uppercase;
	gap: 0.5rem 2rem;
}

.berte-nav a,
.berte-nav a:hover {
	color: inherit;
	text-decoration: none;
}

.berte-nav .berte-nav-book > a {
	border: 1px solid currentColor;
	padding: 0.8rem 1.4rem;
}

.berte-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

/* On the home page the header floats over the hero photo */
.home .wp-site-blocks {
	position: relative;
}

.home .berte-header-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
}

.berte-main {
	margin-top: 0;
}

/* ---------- Hero ---------- */

.wp-block-cover.berte-hero {
	min-height: 760px;
	padding-top: 8rem;
	padding-bottom: 7rem;
	text-align: center;
	color: var(--wp--preset--color--white);
}

.berte-hero h1 {
	font-size: clamp(3.25rem, 7vw, 6rem);
	line-height: 1;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.berte-hero p {
	max-width: 32rem;
	margin-left: auto;
	margin-right: auto;
}

.berte-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem;
}

.berte-photo-label {
	position: absolute;
	right: 1.5rem;
	bottom: 1.25rem;
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---------- Announcement / notices ---------- */

.berte-announce {
	padding: 1.1rem clamp(1rem, 5vw, 4.5rem);
	text-align: center;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
}

.berte-announce p {
	margin: 0;
}

.berte-notice {
	border: 1px solid var(--wp--preset--color--accent-1);
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
	text-align: center;
}

.berte-notice h3 {
	margin-top: 0;
}

/* ---------- Photo placeholders ---------- */

.berte-photo {
	position: relative;
	background: var(--wp--preset--color--accent-3);
	opacity: 0.55;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: flex-end;
	padding: 1rem;
	box-sizing: border-box;
}

.berte-photo p {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.berte-photo-offset {
	margin-top: 4rem;
}

.berte-gallery {
	gap: 8px;
}

/* ---------- Cards & price rows ---------- */

.berte-cards {
	gap: 1.5rem;
}

.berte-card {
	background: var(--wp--preset--color--white);
	padding: 2.25rem;
}

.berte-card.has-contrast-background-color {
	color: var(--wp--preset--color--white);
}

.berte-card h3 {
	margin-top: 0;
	font-size: 1.875rem;
}

.berte-price {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 4rem 4rem;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.6rem 0;
	font-size: 0.9375rem;
	border-bottom: 1px solid rgba(43, 36, 32, 0.12);
}

.has-contrast-background-color .berte-price {
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

.berte-price strong {
	font-weight: 500;
	text-align: right;
}

.berte-price strong:only-of-type {
	grid-column: 2 / 4;
}

.berte-price-head {
	border-bottom: 0;
	padding-bottom: 0;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.berte-price-head strong {
	white-space: nowrap;
}

.berte-price-head strong {
	font-weight: 500;
}

.berte-price-head strong:first-child {
	grid-column: 2;
}

.berte-price-sub {
	padding-top: 0;
	padding-left: 1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
}

.has-contrast-background-color .berte-price-sub {
	color: var(--wp--preset--color--accent-5);
}

.berte-price-desc {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
}

/* When a row has a description, draw the divider under the description instead */
.berte-price:has(+ .berte-price-desc) {
	border-bottom: 0;
	padding-bottom: 0.1rem;
}

.berte-price + .berte-price-desc {
	margin-bottom: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(43, 36, 32, 0.12);
}

.has-contrast-background-color .berte-price + .berte-price-desc {
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

.has-contrast-background-color .berte-price-desc {
	color: var(--wp--preset--color--accent-5);
}

/* Price list block (rendered from Services & prices) */
.berte-price-list > p {
	margin: 0;
}

.berte-price-list + .berte-price-list {
	margin-block-start: 1.25rem;
}

/* Keep price rows tight inside cards (overrides the default block gap) */
.berte-card > .berte-price,
.berte-card > .berte-price-desc,
.berte-price-group > .berte-price,
.berte-price-group > .berte-price-desc {
	margin-block-start: 0;
}

.berte-card > .berte-price-head,
.berte-price-group > .berte-price-head {
	margin-block-start: 1.25rem;
}

.berte-card + .berte-card {
	margin-block-start: 1.5rem;
}

.berte-price-group > h3 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

/* ---------- Testimonials ---------- */

.berte-quotes {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.wp-block-quote.berte-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.3;
}

.wp-block-quote.berte-quote cite {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.berte-brands {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	text-align: center;
}

/* ---------- Booking widgets ---------- */

.berte-widget {
	background: var(--wp--preset--color--white);
	padding: clamp(0.5rem, 2vw, 1.5rem);
	min-height: 400px;
}

/* ---------- Footer ---------- */

.berte-footer {
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 5vw, 4.5rem) 2rem;
}

.berte-footer h4 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	margin-top: 0;
}

.berte-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.berte-footer a:hover {
	text-decoration: underline;
}

.berte-hours {
	font-size: 0.9375rem;
	line-height: 1.9;
}

.berte-footer-base {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-5);
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.wp-block-cover.berte-hero {
		min-height: 620px;
	}

	.berte-photo-offset {
		margin-top: 0;
	}

	.berte-price {
		grid-template-columns: minmax(0, 1fr) 3.75rem 3.75rem;
	}
}

/* ---------- Fixes after first staging review (1.2.1) ---------- */

/* Full-width sections sit flush against each other and the footer */
.berte-main .wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header {
	margin-block-start: 0;
}

/* Photo label sits under the button instead of overlapping it */
.berte-hero .berte-photo-label {
	position: static;
	margin-top: 2.5rem;
}

/* Offset photo in two-photo layouts */
.wp-block-column > .berte-photo.berte-photo-offset {
	margin-block-start: 4rem;
}

@media (max-width: 781px) {
	.wp-block-column > .berte-photo.berte-photo-offset {
		margin-block-start: 0;
	}
}

/* Price cards: wrap to two or one per row before they get cramped */
.wp-block-columns.berte-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	align-items: stretch;
}

/* Cards side by side start level and match heights */
.wp-block-columns.berte-cards > .wp-block-column,
.wp-block-columns.berte-cards > .wp-block-column + .wp-block-column {
	width: auto;
	flex-basis: auto;
	margin-block-start: 0;
	align-self: stretch;
}

@media (max-width: 1100px) {
	.berte-card {
		padding: 1.75rem;
	}
}