/*
Theme Name: Halo
Theme URI: https://schedopia.com/themes/halo
Author: ThinkMatic
Author URI: https://schedopia.com
Description: Halo is a bold, modern block theme for hair and nail salons. Big type, coral and lilac colour blocks and a clean grid give small studios a site that feels as fresh as their work. It ships with every page a salon needs: home, hair and nail menus, prices, team, gallery, offers, about, blog, FAQ, contact, booking and privacy policies. It works hand in hand with the free Schedopia booking plugin, so clients can pick a service, choose their stylist or nail tech and book a time right on your site. One click installs Schedopia and sets up your services, team, opening hours and pages, so you are ready to take bookings in minutes.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: halo
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, one-column, style-variations, template-editing, threaded-comments, translation-ready, wide-blocks, blog, portfolio
*/

/*
 * Almost all styling lives in theme.json. This file only holds what
 * theme.json cannot express: block style variations and small refinements.
 */

/* ---------- Accessibility ---------- */

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---------- Headings: marker highlight on <em> ---------- */

:where(h1, h2, h3, .wp-block-heading) em {
	font-style: normal;
	background: linear-gradient(transparent 58%, var(--wp--preset--color--accent-2) 58%, var(--wp--preset--color--accent-2) 92%, transparent 92%);
	padding: 0 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.has-accent-2-background-color :where(h1, h2, h3, .wp-block-heading) em,
.has-contrast-background-color :where(h1, h2, h3, .wp-block-heading) em {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--accent) 58%, var(--wp--preset--color--accent) 92%, transparent 92%);
}

/* ---------- Tag (eyebrow) ---------- */

.is-style-eyebrow {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.55em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	flex: none;
	margin-top: 0.3em;
}

.has-accent-background-color .is-style-eyebrow::before,
.wp-block-cover .is-style-eyebrow::before {
	background: var(--wp--preset--color--on-accent);
}

p.is-style-eyebrow.has-text-align-center {
	display: flex;
	justify-content: center;
}

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

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

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-text-link > .wp-block-button__link {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	padding: 0 0 0.2em;
	box-shadow: inset 0 -2px 0 currentColor;
	font-weight: 600;
}

.wp-block-button.is-style-text-link > .wp-block-button__link::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 -0.55em 0 var(--wp--preset--color--accent-2);
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover::after {
	transform: translateX(0.25em);
}

/* Coral buttons keep ink text in every variation. */
.wp-block-button__link.has-accent-background-color {
	color: var(--wp--preset--color--on-accent);
}

.wp-block-button__link.has-accent-background-color:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ---------- Images ---------- */

.wp-block-image.is-style-hard-shadow img {
	box-shadow: var(--wp--preset--shadow--hard);
	border: 2px solid var(--wp--preset--color--contrast);
}

.halo-sticker {
	display: inline-block;
	transform: rotate(-6deg);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 0.5em 0.9em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	line-height: 1.1;
}

/* ---------- Groups ---------- */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--hard);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Separators ---------- */

.wp-block-separator.is-style-thick {
	border: 0;
	border-top: 6px solid currentColor;
	width: 4rem;
	margin-left: 0;
	opacity: 1;
}

/* ---------- Lists ---------- */

.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checks li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.7em;
}

.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- Announcement bar and header ---------- */

.halo-announce a {
	text-decoration: none;
}

.halo-announce a:hover {
	text-decoration: underline;
}

.halo-header {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.halo-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.halo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.halo-header .wp-block-site-title a {
	text-decoration: none;
}

.halo-header .wp-block-site-title,
.halo-header .wp-block-button__link {
	white-space: nowrap;
}

.halo-header .wp-block-site-title a::after {
	content: "";
	display: inline-block;
	width: 0.32em;
	height: 0.32em;
	margin-left: 0.08em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Collapse the menu into the overlay below 1080px, not WordPress's default 600px. */
@media (max-width: 1079px) {
	.halo-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.halo-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 599px) {
	.halo-header .halo-header__cta {
		display: none;
	}
}

/* ---------- Marquee strip ---------- */

.halo-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-block: 2px solid var(--wp--preset--color--contrast);
}

.halo-marquee__track {
	display: inline-flex;
	gap: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.halo-marquee__track span {
	padding-right: 0.6em;
}

.halo-marquee__track span::after {
	content: "\2726";
	padding-left: 0.6em;
	font-size: 0.6em;
	vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
	.halo-marquee__track {
		animation: halo-marquee 32s linear infinite;
	}

	.halo-marquee:hover .halo-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes halo-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

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

.halo-hero__stack {
	position: relative;
}

.halo-hero__stack .halo-hero__inset {
	position: absolute;
	left: -12%;
	bottom: -8%;
	width: 46%;
	margin: 0;
	z-index: 2;
}

.halo-hero__stack .halo-sticker {
	position: absolute;
	right: -4%;
	top: 6%;
	z-index: 3;
	margin: 0;
}

@media (max-width: 781px) {
	.halo-hero__stack .halo-hero__inset {
		left: auto;
		right: -2%;
		bottom: -6%;
		width: 42%;
	}

	.halo-hero__stack .halo-sticker {
		right: auto;
		left: 0;
	}
}

/* ---------- Hair / nails split ---------- */

.halo-split > .wp-block-column {
	border: 2px solid var(--wp--preset--color--contrast);
}

.halo-split .wp-block-image {
	margin: 0;
}

.halo-split .wp-block-image img {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

/* ---------- Steps ---------- */

.halo-step__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	line-height: 0.9;
	-webkit-text-stroke: 2px var(--wp--preset--color--accent);
	color: transparent;
	margin: 0;
}

/* ---------- Team ---------- */

.halo-person .wp-block-heading {
	margin-top: 0.25rem;
}

/* ---------- Category tiles ---------- */

.halo-tile .wp-block-image {
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--contrast);
}

.halo-tile .wp-block-heading a {
	text-decoration: none;
}

.halo-tile .wp-block-heading a::after {
	content: " \2192";
}

.halo-tile .wp-block-image img {
	transition: transform 0.4s ease;
}

.halo-tile:hover .wp-block-image img {
	transform: scale(1.04);
}

/* ---------- Offers ---------- */

.halo-offer {
	position: relative;
}

.halo-offer__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
	margin: 0;
}

/* ---------- Opening hours table ---------- */

.halo-hours {
	margin: 0;
}

.halo-hours p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.65em 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.halo-hours p span:first-child {
	font-weight: 600;
}

/* ---------- Reviews ---------- */

.halo-quote .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

.halo-stars {
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.15em;
	font-size: 1.2em;
}

.has-accent-background-color .halo-stars,
.has-accent-2-background-color .halo-stars {
	color: var(--wp--preset--color--on-accent);
}

/* ---------- FAQ (details) ---------- */

.wp-block-details {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--30) 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1rem;
	font-weight: 600;
}

.wp-block-details[open] summary::after {
	content: "\2212";
	background: var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	margin-top: 0.75em;
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Stats ---------- */

.halo-stat__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
}

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

.halo-footer__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(3.5rem, 13vw, 14rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	margin: 0;
	overflow-wrap: anywhere;
}

.halo-footer__wordmark span {
	color: var(--wp--preset--color--accent);
}

.halo-footer .wp-block-navigation__container {
	columns: 2;
	display: block;
}

.halo-footer .wp-block-navigation-item {
	margin-bottom: 0.55rem;
}

/* ---------- Booking placeholder (when Schedopia is not active) ---------- */

.halo-booking-placeholder {
	border: 2px dashed var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-2);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
}

.halo-booking-placeholder__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	margin: 0 0 0.4em;
}

.halo-booking-placeholder p {
	margin: 0.4em 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link,
	.wp-block-navigation-item__content {
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

	.wp-block-button:not(.is-style-text-link) > .wp-block-button__link:hover {
		transform: translate(-2px, -2px);
		box-shadow: 4px 4px 0 0 var(--wp--preset--color--contrast);
	}
}

/* ---------- Service menu preview (before Schedopia is set up) ---------- */

.halo-preview-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--30);
}

.halo-services {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.halo-services--grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

@media (min-width: 960px) {
	.halo-services--grid {
		grid-template-columns: repeat(var(--halo-cols, 3), minmax(0, 1fr));
	}
}

.halo-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--contrast);
}

.halo-card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.halo-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.halo-card__body p,
.halo-card__body h3 {
	margin: 0;
}

.halo-card__cat {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.halo-card__title {
	font-size: var(--wp--preset--font-size--large);
}

.halo-card__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	flex: 1;
}

.halo-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.halo-card__book {
	font-weight: 600;
	text-decoration: none;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 0.35em 0.9em;
}

.halo-menu__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.halo-menu__row p {
	margin: 0;
}

.halo-menu__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.halo-menu__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.halo-menu__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}

.halo-menu__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	white-space: nowrap;
}

/* ---------- Muted text and dividers on any background ---------- */

.halo-muted {
	opacity: 0.75;
}

.halo-divider {
	border-top-style: solid;
	border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}

/* Anchored sections clear the header. */
[id] {
	scroll-margin-top: 2rem;
}

/* Sections butt up against the header and footer; no gap between template parts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Page heroes and featured images ---------- */

.halo-page-hero {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.wp-block-post-featured-image.is-style-hard-shadow img {
	box-shadow: var(--wp--preset--shadow--hard);
	border: 2px solid var(--wp--preset--color--contrast);
}

.halo-card--person img {
	aspect-ratio: 4 / 5;
}

/* Two portraits or tiles across on phones; tighter type to fit. */
@media (max-width: 599px) {
	.halo-team,
	.halo-tiles {
		gap: var(--wp--preset--spacing--30) !important;
	}

	.halo-team .wp-block-heading,
	.halo-tiles .wp-block-heading {
		font-size: 1.125rem !important;
	}

	.halo-team .wp-block-image.is-style-hard-shadow img {
		box-shadow: 4px 4px 0 0 var(--wp--preset--color--contrast);
	}
}

/* Lead text on coral and lilac blocks uses the dark on-accent colour. */
:is(.has-accent-background-color, .has-accent-2-background-color) .has-contrast-2-color {
	color: var(--wp--preset--color--on-accent) !important;
}