/**
 * One Of One by Sajto — layout and component styles.
 *
 * Design tokens (colour, type scale, spacing, widths) come from theme.json and
 * are consumed here as --wp--preset--* variables. Nothing here encodes salon
 * content; it only styles the blocks the owner edits.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
	--oo-header-h: 120px;
	--oo-hero-h: 970px;
	--oo-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
}

@media ( max-width: 1024px ) {
	:root { --oo-header-h: 90px; --oo-hero-h: 592px; }
}

@media ( max-width: 767px ) {
	:root { --oo-header-h: 76px; --oo-hero-h: 430px; }
}

html { scroll-behavior: smooth; scroll-padding-top: var( --oo-header-h ); }

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

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Visible focus everywhere — the original site had none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.oo-skip-link:focus {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 999;
	padding: 12px 20px;
	background: #fff;
	color: #000;
	font-weight: 700;
}

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

/*
 * The original site pairs a bordered label box with a separate bordered square
 * holding a diagonal arrow. Reproduced with one anchor plus a pseudo element so
 * the markup stays a plain core/button the owner can retype.
 */
.wp-block-button.is-style-oo-arrow-light .wp-block-button__link,
.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 58px;
	padding: 18px 86px 18px 40px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	font-family: var( --wp--preset--font-family--text );
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: normal;
	transition: background-color 0.25s var( --oo-ease ), color 0.25s var( --oo-ease );
}

.wp-block-button.is-style-oo-arrow-light .wp-block-button__link { color: var( --wp--preset--color--white ); }
.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link { color: var( --wp--preset--color--ink ); }

.wp-block-button.is-style-oo-arrow-light .wp-block-button__link::after,
.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-end: -1px;
	width: 58px;
	background-color: currentColor;
	-webkit-mask-image: var( --oo-arrow-mask );
	mask-image: var( --oo-arrow-mask );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}

/*
 * The arrow glyph is painted as a mask over currentColor, so it inherits the
 * button's colour on both dark and light backgrounds and stays correct on hover
 * — a `stroke="currentColor"` inside a data: URI would not, because the URI is
 * its own document.
 */
:root {
	--oo-arrow-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E" );
}

/* The border must not be painted by the mask, so give it its own element. */
.wp-block-button.is-style-oo-arrow-light .wp-block-button__link::before,
.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-end: -1px;
	width: 58px;
	border: 1px solid currentColor;
	pointer-events: none;
}

.wp-block-button.is-style-oo-arrow-light .wp-block-button__link:hover,
.wp-block-button.is-style-oo-arrow-light .wp-block-button__link:focus-visible {
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--black );
}

.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link:hover,
.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link:focus-visible {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--white );
}

/* Sentence-case variant used by the "Läs Mer" feature buttons. */
.wp-block-button.is-style-oo-arrow-dark.oo-btn--sentence .wp-block-button__link {
	text-transform: none;
	letter-spacing: 0;
	min-height: 66px;
	padding-block: 22px;
}

/* ---------------------------------------------------------------- Eyebrow */

.wp-block-heading.is-style-oo-eyebrow,
.oo-eyebrow {
	font-family: var( --wp--preset--font-family--text );
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-block-end: 0;
	/*
	 * The original uses #969696 for these labels on every background. Against
	 * white that is 2.96:1 at 13px, which fails WCAG AA. On light backgrounds
	 * the label is darkened to #6b6b6b (5.33:1); on the black services section
	 * the original #969696 is kept, where it already measures 7.1:1.
	 */
	color: #6b6b6b;
}

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

.oo-header {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 50;
	min-height: var( --oo-header-h );
	background: rgba( 255, 255, 255, 0.05 );
	backdrop-filter: saturate( 120% ) blur( 2px );
	color: var( --wp--preset--color--white );
}

.oo-header a { color: inherit; }

.oo-header .wp-block-site-logo img {
	width: auto;
	height: 84px;
	max-height: calc( var( --oo-header-h ) - 36px );
}

.oo-header .wp-block-navigation {
	font-family: var( --wp--preset--font-family--text );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.oo-header__bar { gap: 0; }
.oo-header .oo-header__nav { flex: 1 1 auto; }
.oo-header .oo-header__nav .wp-block-navigation__container { justify-content: center; }
.oo-header .wp-block-navigation .wp-block-navigation-item__content { padding: 12px 22px; }

/* Duplicate of the standalone CTA, shown only inside the mobile overlay. */
.oo-header .wp-block-navigation__responsive-container:not(.is-menu-open) .oo-nav-cta { display: none; }

.oo-header__cta {
	margin: 0;
	flex: 0 0 auto;
	font-family: var( --wp--preset--font-family--text );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oo-header__cta a { padding: 12px 0; }
.oo-header__cta a:hover { text-decoration: none; opacity: 0.75; }
.oo-header .wp-block-navigation a:hover { text-decoration: none; opacity: 0.75; }

/* Current page pill, matching the darker "HEM" box on the original header. */
.oo-header .wp-block-navigation-item.current-menu-item > a,
.oo-header .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"] {
	background: rgba( 0, 0, 0, 0.55 );
}

.oo-header .wp-block-navigation .wp-block-navigation__container { gap: 0; }

.oo-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--white );
	padding-block-start: 90px;
}

.oo-header .wp-block-navigation__responsive-container-open,
.oo-header .wp-block-navigation__responsive-container-close { color: currentColor; }

.oo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 4px;
}

/*
 * The overlay inherits the header's 13px nav type, which is right on a desktop
 * bar and far too small as a full-screen menu. Larger type, and a tap target
 * that is comfortable rather than merely legal.
 */
.oo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 19px;
	letter-spacing: 0.08em;
	padding: 16px 28px;
}

/* The booking link is the reason most visitors open the menu. */
.oo-header .wp-block-navigation__responsive-container.is-menu-open .oo-nav-cta .wp-block-navigation-item__content {
	margin-block-start: 18px;
	border: 1px solid currentColor;
	padding-inline: 40px;
}

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

.oo-hero {
	position: relative;
	min-height: var( --oo-hero-h );
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var( --wp--preset--color--white );
	padding-block: 20px;
}

.oo-hero .wp-block-cover__background { z-index: 2; }
.oo-hero .wp-block-cover__image-background { z-index: 1; }
/*
 * The original indents hero copy 15px inside a 1140px content box, so the
 * container carries that padding and the children stay full width. (Core's
 * constrained layout sets auto side margins with !important, so shrinking a
 * child and left-aligning it is not an option here.)
 */
.oo-hero .wp-block-cover__inner-container {
	z-index: 3;
	width: 100%;
	max-width: 1140px;
	box-sizing: border-box;
	margin-inline: auto;
}

/* Children carry the 15px inset instead of the container: core's constrained
 * layout centres any child narrower than the content size with !important
 * margins, so the heading must stay full width and rely on its own <br>. */
.oo-hero .wp-block-cover__inner-container > * { padding-inline-start: 15px; }
/* Bottom padding lifts the copy above the vertical centre, matching how the
 * original sits the hero text under the overlaid header. */
.oo-hero.wp-block-cover { padding-inline: 15px; padding-block: 0 80px; }

@media ( max-width: 1024px ) {
	.oo-hero.wp-block-cover { padding-block: 0 40px; }
}

@media ( max-width: 767px ) {
	.oo-hero.wp-block-cover { padding-block: 40px 20px; }
}

.oo-hero h1,
.oo-hero h2 {
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--hero );
	line-height: 1.15;
	text-transform: none;
	margin-block: 0 0.25em;
}

.oo-hero p { font-size: clamp( 16px, 1.6vw, 20px ); line-height: 1.5; margin-block-end: 42px; }

/* Cross-fading slideshow layer. Images are supplied by an editable gallery
 * block inside the cover; site.js promotes them into these layers. Without JS
 * the cover's own background image still shows. */
.oo-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.oo-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	transition: opacity 1.5s var( --oo-ease );
}

.oo-hero__slide.is-active { opacity: 1; }

@media ( prefers-reduced-motion: no-preference ) {
	.oo-hero__slide.is-active { animation: oo-kenburns 12s linear forwards; }
}

@keyframes oo-kenburns {
	from { transform: scale( 1 ); }
	to { transform: scale( 1.12 ); }
}

.oo-hero__gallery { display: none !important; }

/* ---------------------------------------------------------------- About */

.oo-about { margin-block: clamp( 50px, 8vw, 100px ); }

.oo-about .wp-block-columns { gap: 0; align-items: center; }
.oo-about .wp-block-column { box-sizing: border-box; }

.oo-about .oo-about__kicker { font-size: clamp( 22px, 2.3vw, 32px ); margin-block: 0 12px; }
.oo-about .oo-about__kicker + h2 { font-size: var( --wp--preset--font-size--large ); margin-block: 0 34px; max-width: 15ch; }
.oo-about p { max-width: 46ch; margin-block: 0; }

/* The original indents the text column well inside the container. */
.oo-about .wp-block-column:first-child { padding-inline: clamp( 0px, 8.7vw, 126px ) 30px; }
.oo-about img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- Services */

.oo-services {
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--white );
	padding-block: 130px;
	padding-inline: 30px;
}

.oo-services h2 { color: var( --wp--preset--color--white ); }
.oo-services .oo-eyebrow,
.oo-services .is-style-oo-eyebrow { color: var( --wp--preset--color--muted ); }

.oo-services__intro { text-align: center; margin-block-end: 78px; max-width: 1170px; margin-inline: auto; }
.oo-services__intro h2 { margin-block: 18px 0; max-width: 19ch; margin-inline: auto; }

/* Three-up image strip above the price cards. */
.oo-services__strip { gap: 58px; margin-block-end: 120px; max-width: 1170px; margin-inline: auto; }
.oo-services__strip img {
	width: 100%;
	height: 176px;
	object-fit: cover;
	display: block;
}

.oo-services__grid { gap: 40px; }

.wp-block-group.is-style-oo-service-card,
.oo-service-card {
	border: 1px solid var( --wp--preset--color--line );
	background: var( --wp--preset--color--black );
	min-height: 551px;
	padding: 42px 30px 50px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	transition: background-color 0.3s var( --oo-ease );
}

.wp-block-group.is-style-oo-service-card:hover,
.oo-service-card:hover { background: var( --wp--preset--color--surface ); }

.oo-service-card img { width: 165px; height: auto; margin-block-end: 26px; }

.oo-service-card__name {
	font-family: var( --wp--preset--font-family--text );
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
	margin-block: 0 22px;
}

.oo-service-card__price {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--price );
	font-weight: 700;
	line-height: 1.167;
	text-transform: uppercase;
	color: var( --wp--preset--color--white );
	margin-block: 0 28px;
}

.oo-service-card .wp-block-buttons { margin-block-start: auto; }

/* ---------------------------------------------------------------- Features */

.oo-features { padding-block: clamp( 50px, 7vw, 89px ) clamp( 50px, 6vw, 79px ); }
.oo-features .wp-block-columns { gap: 0; }
.oo-features .wp-block-column { box-sizing: border-box; padding-inline: 15px; }

.oo-feature { text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.oo-feature img,
.oo-feature svg { width: 46px; height: 46px; margin-block-end: 34px; }
.oo-feature h3 { margin-block: 0 24px; max-width: 18ch; text-transform: uppercase; }
.oo-feature p { margin-block: 0 34px; }
.oo-feature .wp-block-buttons { margin-block-start: auto; }

/* ---------------------------------------------------------------- Gallery */

/*
 * Full-bleed gallery. Core's own `columns-N figure.wp-block-image` rules are
 * more specific than a plain class selector, so these repeat the element
 * qualifier to win — and the breakpoint matches the original site: four across
 * above 767px, two across below it.
 */
.oo-gallery.wp-block-gallery {
	--wp--style--unstable-gallery-gap: 0px;
	gap: 0;
	margin-block: 0;
}

.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image {
	margin: 0;
	flex-grow: 0;
	width: 25%;
}

.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Row one is portrait, row two is square — matches the original rhythm. */
.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image:nth-child( -n + 4 ) img { aspect-ratio: 9 / 16; }
.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image:nth-child( n + 5 ) img { aspect-ratio: 1 / 1; }

@media ( max-width: 767px ) {
	.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image { width: 50%; }
}

/* ---------------------------------------------------------------- Notice + booking */

.oo-notice { text-align: center; padding-block: clamp( 40px, 6vw, 70px ) 0; }
.oo-notice h2 { font-size: clamp( 28px, 4vw, 48px ); text-transform: none; font-weight: 500; margin-block: 20px 24px; }
.oo-notice p { max-width: 78ch; margin-inline: auto; }
.oo-notice .oo-notice__icon { font-size: 44px; line-height: 1; }

.oo-booking { padding-block: clamp( 30px, 5vw, 60px ) clamp( 50px, 8vw, 100px ); }
.oo-booking > h2 {
	text-align: center;
	font-size: var( --wp--preset--font-size--xlarge );
	font-weight: 800;
	font-family: var( --wp--preset--font-family--text );
	color: var( --wp--preset--color--ink );
	margin-block-end: 50px;
}

.oo-booking .oo-booking__embed { min-height: 200px; }

/* ---------------------------------------------------------------- Contact */

.oo-contact { padding-block: clamp( 60px, 9vw, 124px ) 0; }
.oo-contact h2 { margin-block: 18px 60px; font-size: clamp( 28px, 4.3vw, 45px ); }
.oo-contact h3 { margin-block: 0 26px; letter-spacing: 0; text-transform: uppercase; }
.oo-contact p { margin-block: 0 6px; }

.oo-contact__list { list-style: none; margin: 0; padding: 0; }
.oo-contact__list li { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; font-weight: 700; color: var( --wp--preset--color--ink ); }
.oo-contact__list a { color: inherit; }
.oo-contact__list svg { flex: 0 0 auto; width: 20px; height: 20px; }

.oo-social { display: flex; gap: 26px; align-items: center; }
.oo-social a { display: inline-flex; color: var( --wp--preset--color--ink ); }
.oo-social svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------------------------------------------------------------- Map */

.oo-map { padding-block: clamp( 50px, 8vw, 110px ); }
.oo-map iframe {
	display: block;
	width: 100%;
	height: clamp( 320px, 40vw, 580px );
	border: 0;
}

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

.oo-footer {
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--white );
	padding-block: 60px 0;
}

.oo-footer h2,
.oo-footer h3 { color: var( --wp--preset--color--white ); font-size: 20px; text-transform: none; letter-spacing: 0; margin-block: 0 30px; }
.oo-footer p { color: var( --wp--preset--color--white ); font-weight: 700; margin-block: 0 8px; }
.oo-footer a { color: inherit; }
.oo-footer img { max-width: 200px; height: auto; }

.oo-hours { list-style: none; margin: 0; padding: 0; }
.oo-hours li { display: flex; gap: 10px; margin-block-end: 26px; }
.oo-hours .oo-hours__day { color: var( --wp--preset--color--muted ); font-weight: 700; }
.oo-hours .oo-hours__time { color: var( --wp--preset--color--white ); font-weight: 700; }

.oo-footer .oo-social a { color: var( --wp--preset--color--white ); }

.oo-footer__bar {
	border-block-start: 1px solid rgba( 255, 255, 255, 0.15 );
	margin-block-start: 50px;
	padding-block: 32px;
	font-weight: 400;
}

.oo-footer__bar p { font-weight: 400; color: var( --wp--preset--color--white ); margin: 0; }
.oo-footer__bar .oo-footer__links { display: flex; gap: 44px; }
.oo-footer__bar a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Responsive */

@media ( max-width: 1024px ) {
	.oo-services { padding-block: 70px; }
	.oo-services__intro { margin-block-end: 50px; }
	.oo-services__strip { gap: 20px; margin-block-end: 60px; }
	.oo-services__strip img { height: 140px; }
	.wp-block-group.is-style-oo-service-card,
	.oo-service-card { min-height: 460px; padding: 30px 22px 35px; }
	.oo-about .wp-block-columns { flex-wrap: wrap; }
}

@media ( max-width: 767px ) {
	/* Mobile header mirrors the original: solid black bar, burger left, logo centred. */
	.oo-header { background: var( --wp--preset--color--black ); backdrop-filter: none; }
	.oo-header__bar { padding-block: 16px; }
	.oo-header .oo-header__nav { flex: 0 0 auto; order: 1; }
	.oo-header .wp-block-site-logo { order: 2; margin-inline: auto; }
	.oo-header .wp-block-site-logo img { height: 88px; max-height: none; }
	.oo-header__cta { display: none; }
	.oo-hero p { margin-block-end: 30px; }
	.oo-services { padding-block: 60px; padding-inline: 20px; }
	.oo-services__intro { margin-block-end: 40px; }
	.oo-services__strip { margin-block-end: 40px; }
	.wp-block-group.is-style-oo-service-card,
	.oo-service-card { min-height: 0; padding: 24px 20px 30px; }
	.oo-service-card img { width: 120px; }
	.oo-service-card__name { font-size: 17px; letter-spacing: 0.14em; }
	.oo-footer__bar .wp-block-columns { gap: 20px; }
	.oo-footer__bar .oo-footer__links { gap: 24px; }
	.wp-block-button.is-style-oo-arrow-light .wp-block-button__link,
	.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link {
		min-height: 52px;
		padding: 16px 66px 16px 24px;
		font-size: 14px;
	}
	.wp-block-button.is-style-oo-arrow-light .wp-block-button__link::after,
	.wp-block-button.is-style-oo-arrow-dark .wp-block-button__link::after { width: 50px; }
}

/* Amelia booking widget: keep it inside the page grid on small screens. */
.oo-booking__embed .amelia-app-booking,
.oo-booking__embed [id^="amelia" ] { max-width: 100%; }
.oo-booking__embed img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- Legal pages */

.oo-review-banner {
	border-inline-start: 4px solid var( --wp--preset--color--accent );
	background: var( --wp--preset--color--haze );
	padding: 20px 24px;
	margin-block-end: 40px;
}

.oo-review-banner p { margin: 0; }

/* ---------------------------------------------------------------- Touch targets */

/*
 * Links that sit alone in a line (phone number, legal links, social icons) get
 * at least a 24px hit area so they stay tappable on a phone.
 */
.oo-contact__list a,
.oo-footer p a,
.oo-footer__links a,
.oo-social a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
}

/* Amelia Lite appends a promotional link to wpamelia.com under the widget.
 * The salon's site should not advertise a third-party vendor, so it is hidden.
 * (Amelia's own "remove branding" switch is a paid feature.) */
.oo-booking__embed .am-fs__powered,
.oo-booking__embed [class*="powered"],
.oo-booking__embed a[href*="wpamelia.com"] {
	display: none !important;
}

/* ================================================================ Finputsning
 *
 * Small refinements on top of the faithful rebuild. Nothing here changes the
 * layout or the identity — it tightens typography, gives interactive elements
 * a considered response, and removes the small roughnesses that read as
 * unfinished.
 */

/* ---------------------------------------------------------------- Typografi */

/*
 * Headings break on meaning rather than wherever the line runs out, and body
 * copy avoids leaving a single word alone on the last line.
 */
h1, h2, h3, h4,
.oo-service-card__price,
.oo-service-card__name { text-wrap: balance; }

p, li { text-wrap: pretty; }

/* The original renders "&" in headings at the same weight as the words around
 * it, which makes it shout. A slightly lighter ampersand settles it down. */
.oo-feature h3 { hyphens: none; }

.oo-hero p { max-width: 46ch; }

/* Optical alignment: large display type sits slightly left of the text below
 * it because of the letterform's side bearing. */
.oo-hero h1 { margin-inline-start: -0.045em; }

::selection { background: var( --wp--preset--color--ink ); color: var( --wp--preset--color--white ); }

/* ---------------------------------------------------------------- Bilder */

/*
 * A neutral ground behind every image, so a slow connection shows a calm
 * placeholder instead of a white flash against the dark sections.
 */
.oo-gallery figure,
.oo-services__strip figure,
.oo-about figure {
	background: var( --wp--preset--color--haze );
	overflow: hidden;
}

.oo-services .oo-services__strip figure { background: #141414; }

/* A restrained lift on the gallery. The original is static; this reads as
 * maintained without turning the page into an animation. */
.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image img {
	transition: transform 0.6s var( --oo-ease ), filter 0.6s var( --oo-ease );
}

@media ( hover: hover ) {
	.wp-block-gallery.oo-gallery.has-nested-images figure.wp-block-image:hover img {
		transform: scale( 1.04 );
		filter: brightness( 1.06 );
	}

	.oo-services__strip figure img { transition: transform 0.6s var( --oo-ease ); }
	.oo-services__strip figure:hover img { transform: scale( 1.03 ); }
}

/* ---------------------------------------------------------------- Kort */

.wp-block-group.is-style-oo-service-card,
.oo-service-card {
	transition: background-color 0.3s var( --oo-ease ), border-color 0.3s var( --oo-ease ), transform 0.3s var( --oo-ease );
}

@media ( hover: hover ) {
	.wp-block-group.is-style-oo-service-card:hover,
	.oo-service-card:hover {
		border-color: #4a4a4a;
		transform: translateY( -3px );
	}
}

.oo-service-card img { transition: transform 0.4s var( --oo-ease ); }
.oo-service-card:hover img { transform: scale( 1.04 ); }

/* ---------------------------------------------------------------- Kvalitetsblocken */

.oo-feature svg {
	stroke-width: 1.5;
	color: var( --wp--preset--color--ink );
}

/* ---------------------------------------------------------------- Notisen */

/*
 * The notice used a bare emoji as its only ornament. With that removed it needs
 * a frame of its own so it reads as a message from the salon rather than as
 * body copy that lost its heading.
 */
.oo-notice {
	padding-block: clamp( 40px, 6vw, 80px ) 0;
}

.oo-notice > * {
	max-width: 72ch;
	margin-inline: auto;
}

.oo-notice h2 {
	position: relative;
	padding-block-start: 34px;
}

.oo-notice h2::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translateX( -50% );
	width: 46px;
	height: 2px;
	background: var( --wp--preset--color--ink );
}

.oo-notice p { color: var( --wp--preset--color--body ); }

/* ---------------------------------------------------------------- Kontakt */

.oo-contact__list li { align-items: flex-start; }
.oo-contact__list svg { margin-block-start: 4px; color: var( --wp--preset--color--muted ); }

.oo-social a { transition: opacity 0.25s var( --oo-ease ), transform 0.25s var( --oo-ease ); }
.oo-social a:hover { opacity: 0.65; transform: translateY( -2px ); }

/* ---------------------------------------------------------------- Karta */

.oo-map iframe {
	/* The embed arrives in Google's own colours; a hairline keeps it from
	 * floating loose on the white ground. */
	border: 1px solid var( --wp--preset--color--haze );
}

/* ---------------------------------------------------------------- Sidfot */

.oo-footer__bar { font-size: 14px; }
.oo-footer__bar p { color: var( --wp--preset--color--muted ); }
.oo-footer__bar a { color: var( --wp--preset--color--white ); }

.oo-footer .wp-block-site-logo img { transition: opacity 0.25s var( --oo-ease ); }
.oo-footer .wp-block-site-logo img:hover { opacity: 0.85; }

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

.oo-header .wp-block-navigation .wp-block-navigation-item__content {
	transition: background-color 0.25s var( --oo-ease ), opacity 0.25s var( --oo-ease );
}

/* ---------------------------------------------------------------- Bokningen */

/*
 * Amelia ships its own rounded, shadowed card. Squaring the corners and
 * quieting the shadow lets it sit inside this design instead of on top of it.
 */
.oo-booking__embed .am-fs__wrapper,
.oo-booking__embed [class*="am-fs__"] > .am-fs-sb,
.oo-booking__embed .am-fs__main {
	border-radius: 0 !important;
}

.oo-booking__embed .am-fs__wrapper {
	box-shadow: 0 1px 2px rgba( 30, 30, 30, 0.06 ), 0 18px 44px -28px rgba( 30, 30, 30, 0.4 ) !important;
}

/* ---------------------------------------------------------------- Bokningens färger
 *
 * Amelia ships in its own blue. Left alone it is the one element on the page
 * that belongs to a plugin vendor rather than to the salon — and it follows the
 * site into production.
 *
 * Amelia v3 exposes its palette as custom properties, so this is a re-skin
 * through the plugin's own API rather than a fight with its stylesheet. Nothing
 * is overridden with !important and nothing depends on its internal class
 * names, so a plugin update will not undo it.
 *
 * Semantic colours (error, success, warning) are deliberately left alone: red
 * should stay red.
 */
/*
 * Amelia writes its palette as INLINE custom properties, and on more than one
 * element in the tree. Inline declarations beat any stylesheet selector, so
 * !important is genuinely required here — it is not a shortcut around
 * specificity. The universal descendant is for the same reason: naming the
 * elements one by one missed the ones Amelia adds after mount.
 *
 * If a future Amelia renames a variable the widget simply returns to its own
 * blue; nothing breaks. The owner can also set colours in Amelia → Anpassa,
 * which writes the same properties.
 *
 * Semantic colours (error, success, warning) are left alone: red should stay red.
 */
.oo-booking__embed,
.oo-booking__embed * {
	--am-font-family: "Red Hat Display", "Helvetica Neue", Arial, sans-serif !important;

	/* Sidebar: the salon's black instead of the plugin's navy. */
	--am-c-sb-bgr: #000000 !important;
	--am-c-sb-text: #ffffff !important;

	/* Primary actions follow the site's own buttons. */
	--am-c-primary: #1e1e1e !important;
	--am-c-btn-prim: #1e1e1e !important;
	--am-c-btn-prim-text: #ffffff !important;
	--am-c-btn-sec: #4f4f4f !important;
	--am-c-btn-sec-text: #ffffff !important;
	/* The buttons Amelia actually renders read these three, not btn-prim. */
	--am-c-btn-bgr: #1e1e1e !important;
	--am-c-btn-border: #1e1e1e !important;
	--am-c-btn-first: #1e1e1e !important;
	--am-c-btn-text: #ffffff !important;
	--am-c-advs-text: #1e1e1e !important;

	/* Text and inputs on the site's greys. */
	--am-c-main-text: #1e1e1e !important;
	--am-c-main-heading-text: #1e1e1e !important;
	--am-c-inp-text: #1e1e1e !important;
	--am-c-inp-border: #d6d2ca !important;
	--am-c-inp-placeholder: #969696 !important;
	--am-c-drop-text: #1e1e1e !important;

	/* Calendar and time slots. Available days, the selected day and the slot
	 * chips all carry their own variables; without these the widget keeps a blue
	 * calendar inside an otherwise black-and-white page. */
	--am-c-cal-init: #1e1e1e !important;
	--am-c-cal-init-text: #1e1e1e !important;
	--am-c-cal-low: #4f4f4f !important;
	--am-c-cal-low-text: #1e1e1e !important;
	--am-c-cal-high: #1e1e1e !important;
	--am-c-cal-high-text: #1e1e1e !important;
	--am-c-cal-selected: #1e1e1e !important;
	--am-c-advsc-slot-text: #1e1e1e !important;
	--am-c-advsc-cell-text: #1e1e1e !important;
	--am-c-advsc-cell-bgr: #f2f0ec !important;
	--am-c-advsc-cell-bgr-hov: #e6e2db !important;
	--am-c-dpf-cell-bgr: #f2f0ec !important;
	--am-c-dpf-cell-text: #1e1e1e !important;
	--am-c-checkbox-border-focused: #1e1e1e !important;

	/* Square corners, like every other control on the page. */
	--am-rad-inp: 0px !important;
	--am-rad-btn: 0px !important;
	--am-rad-card: 0px !important;
}

.am-adv-select__popper,
.el-popper.am-select-dropdown {
	--am-font-family: "Red Hat Display", "Helvetica Neue", Arial, sans-serif !important;
	--am-c-primary: #1e1e1e !important;
	--am-c-drop-text: #1e1e1e !important;
	--am-rad-inp: 0px !important;
}