/* -----------------------------------------------------------------------------
 * splash.css
 *
 * Two things live here.
 *
 * First: the CSS that used to sit in the "Additional CSS" box of five separate
 * WordPress sites. Every salon subsite carried its own near-identical copy, so
 * .social-icons was defined five times and drifted — Goodge Street's copy had a
 * stray blank line where Soho's had none, which is the only difference eight
 * years produced. One copy now.
 *
 * Second: the rules the rebuild genuinely needs — a single site has a menu the
 * old homepage never had, and the salon banner is now a per-salon setting rather
 * than four hard-coded classes in michele.css.
 * -------------------------------------------------------------------------- */


/* --- from the network-wide Additional CSS (site 1) ------------------------ */

/* The address/hours panel that sits over the bottom of each mosaic tile. */
.bottomcentre {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	font-weight: 500;
	color: #000;
	background-color: rgba(255, 255, 255, .5);
}

.bottomcentre p {
	padding-top: 5px;
	margin-bottom: 0;
}


/* --- from each salon's Additional CSS (sites 2, 6, 7, 8) ------------------ */

.social-icons {
	display: block;
	margin: 0 auto;
	padding: 0;
}

.social-icons li {
	display: inline-block;
	list-style-type: none;
}

.social-icons li a {
	border-bottom: none;
}

.social-icons li img {
	width: 55px;
	height: 55px;
	margin-right: 20px;
}

.rotateimg360:hover {
	transition: .7s;
	transform: rotate(360deg);
}


/* --- the navigation ------------------------------------------------------- */

/*
 * The old homepage had no navigation at all: the header was the logo and nothing
 * else, and you reached a salon only by clicking its tile. Interior pages had a
 * full menu, because each salon was a separate WordPress site with its own. One
 * site means one menu, on every page including the front one.
 */
.wrapper-navbar {
	background: #222;
}

.navbar {
	padding: .5rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.navbar .navbar-brand,
.navbar .custom-logo-link {
	margin-right: auto;
	order: 1;
}

.navbar .navbar-toggler {
	order: 2;
}

.navbar .navbar-collapse {
	order: 3;
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.navbar .navbar-collapse {
		flex-basis: auto;
		display: flex !important;
	}
}

.navbar-brand img,
.custom-logo-link img {
	max-height: 65px;
	width: auto;
}

/*
 * The wordmark is 658x168. Left to fill the row it takes 343px of a 375px screen
 * and shoulders the menu button off the edge, which is what gave every page a
 * sideways scrollbar on a phone.
 */
@media (max-width: 767px) {
	.navbar .custom-logo-link,
	.navbar .navbar-brand {
		flex: 0 1 auto;
		min-width: 0;
		max-width: calc(100% - 76px);
	}

	.navbar-brand img,
	.custom-logo-link img {
		max-height: 46px;
		max-width: 100%;
	}

	.navbar .navbar-toggler {
		flex: 0 0 auto;
	}
}

.navbar-nav .nav-link {
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .04em;
	padding: .6rem .9rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link {
	color: #ee6502;
}

.navbar-nav .dropdown-menu {
	background: #222;
	border: 0;
	border-radius: 0;
	margin-top: 0;
}

.navbar-nav .dropdown-menu .nav-link {
	display: block;
	white-space: nowrap;
}

.navbar-nav .dropdown-menu .nav-link:hover {
	background-color: #f86907;
	color: #fff;
}

/*
 * michele.css pins this with `position: absolute; right: 20px` -- written when
 * the navbar was the only thing in the header. Against a flex row it lands 40px
 * past the right edge of a phone screen and gives the whole page a horizontal
 * scrollbar. Put it back in the flow.
 */
.navbar-toggler {
	position: static !important;
	top: auto !important;
	right: auto !important;
	border-color: rgba(255, 255, 255, .4);
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	z-index: 1000;
	background: #fff;
	color: #222;
	padding: 10px 16px;
}


/* --- the booking bar ------------------------------------------------------ */

/*
 * "Make a Booking: 020 31 74 21 60 Or Whatsapp" was typed as an inline-styled div
 * inside the homepage content. It is a template part now, so changing the number
 * is one edit rather than a hunt through eight years of pasted HTML.
 */
.booking-bar {
	text-align: center;
	color: #fff;
	background-color: #292b2c;
	padding: 5px;
}

.booking-bar h3,
.booking-bar span,
.booking-bar a {
	display: inline-block;
	font-weight: bold;
	margin: 0 .35em;
	font-size: 1.5rem;
	vertical-align: middle;
}

.booking-bar .tel {
	color: orange;
	text-decoration: underline;
}

.booking-bar .wa {
	color: #5cb85c;
	text-decoration: underline;
}


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

/*
 * The old site fetched its bank-holiday notices as JSON from splashpos.com, over
 * plain HTTP, on every page load — so when that box went away the notices went
 * with it, and nobody could put one back. Same appearance, edited in the admin.
 */
.salon-notice {
	background-color: #ed6406;
	color: #fff;
	text-align: center;
	padding: 10px 15px;
}

.salon-notice a {
	color: #fff;
	text-decoration: underline;
}

.salon-notice h3 {
	margin: 0 0 .25em;
	color: #fff;
}

.salon-notice p {
	margin: 0;
}

.salon-notice--onbanner {
	display: block;
	position: relative;
	z-index: 9;
	background: #ffffffde;
	color: #222;
	margin: 10px 15px;
	padding: 10px;
	text-shadow: none;
}

.salon-notice--onbanner h3 {
	color: #ee6502;
}


/* --- the walk-in strip and the disclaimer --------------------------------- */

.salon-strip {
	text-align: center;
	color: #fff;
	background-color: #ed6406;
	padding: 5px;
	font-weight: bold;
}

.salon-disclaimer {
	text-align: center;
	color: #fff;
	background: #9c9c9c;
	padding: 3px 10px 10px;
}

.salon-disclaimer h3 {
	font-size: 60px;
	color: #fff;
}

.salon-disclaimer p {
	font-weight: 500;
	margin: 0 auto;
	max-width: 1100px;
	text-shadow: none;
}

/*
 * On a wide screen the disclaimer reads as fine print because the column is
 * 1100px and the paragraph is four lines. At 375px the same words inherit the
 * banner's 21px and become the tallest thing on the page, above the offers the
 * salon is actually trying to show anyone.
 */
@media (max-width: 700px) {
	.salon-disclaimer h3 {
		font-size: 34px;
	}

	.salon-disclaimer p {
		font-size: 15px !important;
		line-height: 1.45;
	}
}


/* --- offers --------------------------------------------------------------- */

/*
 * On the old site an offer was a hand-written div with its background image, its
 * price and its promo code baked into the markup — and it was pasted onto every
 * salon page it applied to. "Summer OFFER!" appeared three times on the Soho page
 * alone and was still saying Summer in December, because changing it meant
 * editing HTML in nine places. Same markup, generated from one record.
 */
/*
 * Measured off the live site: the panels have no padding at the top and none at
 * the sides -- michele.css zeroes the sides with !important on every column
 * inside a .mosaic -- and 40px at the foot from the inline style. A 30px top
 * padding on each of five offers made the rebuild's banner 150px taller than
 * the real one and left the panels looking airier than they are.
 */
.offer {
	padding: 0 0 40px;
	background-repeat: no-repeat;
	position: relative;
}

.offer h3 {
	margin-bottom: .6rem;
}

.offer h3 img {
	display: inline;
	width: 200px;
	margin: 0 10px 10px;
	padding: 0 0 10px;
	vertical-align: middle;
}

/*
 * The manicure-and-pedicure block: photograph in a third, words in the other two
 * thirds. michele.css makes every column `display: inline-block`, and 33.33% +
 * 66.67% plus the whitespace between two inline-blocks is fractionally over
 * 100%, so the second column wraps underneath. A flex row ignores the whitespace
 * and lands on the live site's measured 370 / 740 split exactly.
 */
.offer--split {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.offer--split > [class*="col-"] {
	display: block;
}

@media (max-width: 767px) {
	.offer--split > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.offer .offer-price {
	font-weight: bold;
}

.offer .offer-price s {
	font-weight: normal;
	opacity: .75;
}

/*
 * The small print runs on inside the paragraph -- "...from 1pm till 5pm! Offer
 * valid only for bookings made on: Whatsapp or 0203 174 2160 with the code:
 * Kerastase Our hairdressers will help you..." is one continuous sentence on the
 * live page. Making <small> a block put a line break either side of it and added
 * 40-120px to every offer panel.
 */
.offer small {
	display: inline;
}

/*
 * The "Add a Haircut for £10 extra" strip under the Olaplex offer. The original
 * set it inline with `display: inline; width: 600px; margin: 0 10px 10px;
 * padding: 0 0 3px` -- so it sits on the text baseline inside the centred
 * paragraph rather than on a line of its own. As a block it added 37px to the
 * panel. 600px is the width the original typed; it must still not outgrow a
 * phone screen.
 */
.offer .offer-extra {
	display: inline;
	max-width: min(600px, 100%);
	width: 600px;
	margin: 0 10px 10px;
	padding: 0 0 3px;
	height: auto;
}

@media (max-width: 700px) {
	.offer {
		background-image: none !important;
	}

	.offer h3 img {
		display: block;
		margin: 10px auto;
	}
}


/* --- the salon banner ----------------------------------------------------- */

/*
 * michele.css hard-codes four background images as .sh / .nr / .gd / .ch, which
 * is why Madrid — cloned from New Row in 2022 and never given its own — spent
 * three years wearing Goodge Street's shopfront. The image is a salon setting now
 * and gets written inline; the four classes stay for anything still using them.
 */
/*
 * Full-bleed. michele.css caps `.wrapper` at 1170px and then exempts the front
 * page with `.home .wrapper { max-width: 100% }` -- and on the old site every
 * salon page was a front page, because every salon was its own subsite. That is
 * the whole reason the banner photograph ran edge to edge. Measured against the
 * live site at a 1280px viewport: wrapper and banner both 1265px starting at
 * x=0, with the container inside them at 1140px.
 */
.splash-salon-page .wrapper {
	max-width: 100%;
}

.salonbanner {
	background-position: top center;
	background-repeat: no-repeat;
}

.salonbanner h1 {
	font-size: 32px;
	font-weight: 200;
}


/* --- the mosaic ----------------------------------------------------------- */

.mosaic .salon-tile {
	position: relative;
	overflow: hidden;
}

/* The photograph and the two discs are one positioned group. */
.mosaic .salon-tile__photo {
	display: block;
	position: relative;
	line-height: 0;
}

/*
 * A stretched link over the photograph. The whole tile was a link on the old
 * homepage, but a link cannot contain another link and the Book Online disc is
 * one -- the old markup got away with it by putting the disc outside, which is
 * what tied it to the tile rather than the photograph.
 */
.mosaic .salon-tile__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mosaic .salon-tile .logo,
.mosaic .salon-tile .book {
	z-index: 2;
}

.mosaic .salon-tile__link:focus-visible {
	outline: 3px solid #ee6502;
	outline-offset: -3px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The tiles are 640x350. Fixing the ratio keeps a replacement photograph of a
 * different size from shunting the circular logo half-way up the tile, which is
 * what happened to the fourth tile on the old homepage.
 */
.mosaic .salon-tile img.salon {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 64 / 35;
	object-fit: cover;
}

.mosaic .logo img {
	border-radius: 1000px;
}

/*
 * The odd tile out. Three salons in a two-up grid leave a blank half-row, so the
 * last one spans the width. Twice as wide at the same height keeps the row
 * reading as one band rather than a stack -- 128/35 is 64/35 doubled.
 */
@media (min-width: 768px) {
	.mosaic .salon-tile--wide img.salon {
		aspect-ratio: 128 / 35;
	}
}

/*
 * The tiles on a phone.
 *
 * michele.css positions the address panel, the logo disc and the Book Online
 * disc over the photograph in fixed pixels, which works at 640px wide and falls
 * apart below it -- on a 375px screen the two discs sit on top of the address
 * and the opening hours, and the salon's own phone-shaped visitors could not
 * read either. The original had this bug for its whole life.
 *
 * The desktop layout above is untouched. Below 768px the photograph keeps its
 * discs and the words move underneath it, where they can be read.
 */
/*
 * Between 768px and 991px the tiles are already half-width -- about 400px -- but
 * the discs are still 140px and 100px, which is most of the tile. michele.css's
 * own breakpoint is 992px, so this stays clear of the layout the original was
 * actually designed at.
 */
@media (max-width: 991px) {
	.mosaic .salon-tile .logo {
		width: 100px;
		height: 100px;
		padding: 8px;
		left: 10px;
	}

	.mosaic .salon-tile .book {
		width: 76px;
		height: 76px;
		font-size: 13px;
		right: 10px;
	}

	.mosaic .salon-tile .book p {
		line-height: 15px;
	}
}

@media (max-width: 767px) {
	.mosaic .salon-tile {
		margin-bottom: 4px;
	}

	.mosaic .salon-tile .bottomcentre {
		position: static;
		background-color: #f2f2f2;
		padding: 12px 14px 14px;
		font-size: 15px;
		line-height: 1.45;
	}

	.mosaic .salon-tile .logo {
		width: 92px;
		height: 92px;
	}

	.mosaic .salon-tile .book {
		width: 72px;
		height: 72px;
	}
}


/* --- price tables --------------------------------------------------------- */

/*
 * The price pages are plain tables, as they always were. td.padded and
 * table.hours were used throughout the content but never actually defined
 * anywhere — eight years of markup referring to styles that did not exist.
 */
.padded {
	padding: 8px 6px !important;
}

table.mensprices,
table.womensprices,
table.beautyprices {
	margin-bottom: 30px;
}

table.mensprices td,
table.womensprices td,
table.beautyprices td {
	padding: 4px 6px;
	vertical-align: top;
}

table.mensprices td:last-child,
table.womensprices td:last-child,
table.beautyprices td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

table.mensprices tr.tablehead td:last-child,
table.womensprices tr.tablehead td:last-child,
table.beautyprices tr.tablehead td:last-child {
	text-align: left;
}

table.hours {
	width: auto;
}

table.hours td {
	padding: 2px 8px;
}

table.hours td:last-child {
	font-variant-numeric: tabular-nums;
}


/* --- the team ------------------------------------------------------------- */

.staff-id {
	display: inline-block;
	margin: 5px 10px 20px;
	color: #ee6502 !important;
	text-align: center;
	vertical-align: top;
	width: 130px;
	text-decoration: none;
}

.staff-id img {
	display: block;
	margin: 0 auto 6px;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 1000px;
	background: #eee;
}

.staff-id strong {
	display: block;
	font-weight: 600;
}

.staff-note {
	color: #777;
	font-size: .9em;
	max-width: 900px;
	margin: 10px auto 0;
}


/* --- footer --------------------------------------------------------------- */

#wrapper-footer {
	background: #222;
	color: #ddd;
	padding: 24px 0;
	margin-bottom: 0;
}

#wrapper-footer a {
	color: #ee6502;
}

.site-info {
	text-align: center;
}

.footer-addresses {
	text-align: center;
	padding: 20px 0 0;
}

.footer-addresses a {
	color: #ee6502;
	display: inline-block;
	margin: 0 10px;
}


/* --- contact form --------------------------------------------------------- */

/*
 * Ninja Forms rendered these. It is the plugin the compromised mailbox was used
 * to send through, and it has not had an update this install could take since
 * 2019 — so the form is the theme's own now, with a nonce, a honeypot and a rate
 * limit, and no plugin.
 */
.splash-form {
	max-width: 640px;
	margin: 20px 0 0;
}

.splash-form p {
	margin: 0 0 1rem;
}

.splash-form label {
	display: block;
	font-weight: 600;
	margin-bottom: .25rem;
}

.splash-form input[type=text],
.splash-form input[type=email],
.splash-form input[type=tel],
.splash-form textarea {
	width: 100%;
	padding: .5rem .6rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	font: inherit;
}

.splash-form .hp {
	position: absolute;
	left: -9999px;
}

.splash-form button {
	background: #ee6502;
	color: #fff;
	border: 0;
	padding: .6rem 1.4rem;
	font-size: 1rem;
	border-radius: 3px;
	cursor: pointer;
}

.splash-form button:hover {
	background: #f86907;
}

.splash-notice-ok {
	background: #e6f4e6;
	border-left: 4px solid #4caf50;
	padding: 12px 16px;
	margin-bottom: 1rem;
}

.splash-notice-err {
	background: #fdecea;
	border-left: 4px solid #d33;
	padding: 12px 16px;
	margin-bottom: 1rem;
}


/* --- odds and ends -------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

.wrapper {
	padding: 0 0 30px;
}

/*
 * Eight years of pasted markup left unclosed <p> and stray &nbsp; behind. This
 * stops an orphaned empty paragraph from opening a gap mid-page.
 */
.page-content p:empty {
	display: none;
}

@media print {
	.wrapper-navbar,
	.booking-bar,
	.salon-notice {
		display: none;
	}
}


/* --- the cookie notice ---------------------------------------------------- */

/*
 * A bar at the foot of the window rather than a card in the corner: it does not
 * cover the Book Online disc on the front page or the booking button on a salon
 * page, which is the whole point of those pages.
 */
.splash-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1.5rem;
	padding: 14px 20px;
	background: #222;
	color: #eee;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
	transform: translateY(100%);
	transition: transform .3s ease-out;
}

.splash-cookies.is-in {
	transform: translateY(0);
}

.splash-cookies__text {
	margin: 0;
	max-width: 60em;
}

.splash-cookies a {
	color: #ee6502;
	text-decoration: underline;
}

.splash-cookies__ok {
	flex: 0 0 auto;
	background: #ee6502;
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: .5rem 1.6rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.splash-cookies__ok:hover,
.splash-cookies__ok:focus {
	background: #f86907;
}

@media (prefers-reduced-motion: reduce) {
	.splash-cookies {
		transition: none;
	}
}