/*
Theme Name: Eminence Services
Theme URI: https://eminenceservices.co/
Author: Eminence Services LLC
Author URI: https://eminenceservices.co/
Description: The brand theme for Eminence Services LLC. A light child theme of Ollie that adds the brand colors, fonts, buttons, header, footer, and page sections. Works with Ollie Pro.
Template: ollie
Version: 0.6.9
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eminence-services
*/

/* Small brand additions on top of Ollie. Colors, fonts, and sizes live in theme.json. */

/* Headings break into even lines, and paragraphs avoid one-word last lines. */
h1, h2, h3, h4 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Links: a clear underline that turns gold on hover. */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:where(.wp-site-blocks) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--primary-alt);
	text-decoration-thickness: 2px;
}

/* Keep a phone number on one line. Buttons may wrap after "Call or text", and a no-break space keeps the number itself together. */
a[href^="tel:"]:not(.wp-element-button) {
	white-space: nowrap;
}

/* Keyboard focus that is easy to see on light and dark sections. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

:where(.has-primary-background-color, .has-main-background-color, .has-border-dark-background-color) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--primary-alt);
}

/* Buttons: smooth hover. Outline buttons keep the text color of their section. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.wp-block-button.is-style-button-brand .wp-block-button__link:hover,
.wp-block-button.is-style-button-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-button-light .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--main);
}

/* Eyebrow: a short label above a heading, with a gold dash. */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 2px;
	margin-right: 0.65rem;
	vertical-align: middle;
	background: var(--wp--preset--color--primary-alt);
	transform: translateY(-0.12em);
}

.has-primary-alt-background-color .is-style-eyebrow::before {
	background: currentColor;
}

/* Gold check list. */
ul.is-style-checks {
	list-style: none;
	padding-inline-start: 0 !important;
}

ul.is-style-checks li {
	position: relative;
	margin-bottom: 0;
	padding-left: 1.85em;
}

ul.is-style-checks li + li {
	margin-top: 0.55em;
}

ul.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300283C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* Checks laid out in a row, used for the short trust points in the hero. */
ul.is-style-checks.es-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.25em;
}

ul.is-style-checks.es-inline li + li {
	margin-top: 0;
}

/* List with no bullets, used in the footer. */
ul.is-style-plain {
	list-style: none;
	padding-inline-start: 0 !important;
}

ul.is-style-plain li {
	margin-bottom: 0;
}

ul.is-style-plain li + li {
	margin-top: 0.45em;
}

.es-footer ul.is-style-plain a:not(:hover) {
	text-decoration: none;
}

/* Top bar: center the phone number on phones. */
@media (max-width: 781px) {
	.es-topbar > .wp-block-group {
		justify-content: center;
	}
}

/* Pill list, used for the service area towns. */
ul.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding-inline-start: 0 !important;
}

ul.is-style-pills li {
	margin: 0;
	padding: 0.5em 1.1em !important;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
}

/* Step number: a round gold badge. */
p.is-style-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--primary-alt-accent);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1;
}

/* Cards: keep the button at the bottom so cards in a row line up. */
.es-push-bottom {
	margin-top: auto !important;
}

/* Small pill label, such as "Recommended". */
p.es-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.3em 0.85em !important;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
}

/* Customer review: gold stars, a large gold quote mark, and a centered quote. */
.es-stars::before {
	content: "";
	display: block;
	width: 7.5rem;
	height: 1.5rem;
	margin: 0 auto 0.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg transform='translate(0 0)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='%23FFAA03'/%3E%3C/g%3E%3Cg transform='translate(24 0)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='%23FFAA03'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='%23FFAA03'/%3E%3C/g%3E%3Cg transform='translate(72 0)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='%23FFAA03'/%3E%3C/g%3E%3Cg transform='translate(96 0)'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='%23FFAA03'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-quote.es-testimonial {
	margin-right: 0;
	margin-left: 0;
	padding: 0 !important;
	border: 0 !important;
	text-align: center;
}

.wp-block-quote.es-testimonial::before {
	content: "\201C";
	display: block;
	height: 2.75rem;
	color: var(--wp--preset--color--primary-alt);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 1;
}

.wp-block-quote.es-testimonial p {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.55;
}

.wp-block-quote.es-testimonial cite {
	display: block;
	margin-top: 1.25rem;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

/* Service tiles: the whole tile is one link, named by the service title. */
.es-tile {
	position: relative;
}

/* Navy shows while a tile loads. The tile artwork uses the same navy as the brand. */
.es-tile .es-tile-image img,
.es-title-tile img,
.es-card-icon img {
	background: var(--wp--preset--color--primary);
}

.es-tile .es-tile-image img {
	display: block;
	width: 100%;
}

.es-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.es-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.es-tile:hover h3 a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary-alt);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.es-tile:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 6px;
	border-radius: 5px;
}

.es-tile h3 a:focus-visible {
	outline: none;
}

/* A photo that fills its column next to text. On phones it gets its own height. */
@media (max-width: 781px) {
	.wp-block-cover.es-photo-fill {
		min-height: 18rem !important;
	}
}

/* Customer review over a photo: large quote in the heading font, with a gold quote mark. */
.wp-block-quote.es-quote-photo {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
}

.wp-block-quote.es-quote-photo::before {
	content: "\201C";
	display: block;
	height: 2.75rem;
	color: var(--wp--preset--color--primary-alt);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 1;
}

.wp-block-quote.es-quote-photo p {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.45;
}

.wp-block-quote.es-quote-photo cite {
	display: block;
	margin-top: 1.25rem;
	color: var(--wp--preset--color--main-accent);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.wp-block-quote.es-quote-photo cite strong {
	color: var(--wp--preset--color--base);
}

p.es-stars-left::before {
	margin: 0 0 0.4rem;
}

/* Top bar button: compact, so the bar stays slim. */
.es-topbar .wp-block-button__link {
	padding: 0.5em 1.1em;
	font-size: var(--wp--preset--font-size--x-small);
}

/* Two-column check list, used for "What's included" on service pages. */
ul.es-two-col {
	columns: 2;
	column-gap: 3rem;
}

ul.es-two-col li {
	break-inside: avoid;
}

@media (max-width: 781px) {
	ul.es-two-col {
		columns: 1;
	}
}

/* Mascot in the hero of each service page: a navy card with a thin border, so it reads as a card over the photo. */
.es-title-tile img {
	display: block;
	width: 100%;
	max-width: 18rem;
	margin-left: auto;
	border: 1px solid var(--wp--preset--color--border-dark);
}

/* Hero at the top of every page: navy shows behind the photo while it loads, and on an article without a featured image. */
.wp-block-cover.es-hero {
	background-color: var(--wp--preset--color--main);
}

/* Links in a hero, such as an article's topic, stay white like the text around them. */
.wp-block-cover.es-hero a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

/* Small mascot icons in cards. */
.es-card-icon img {
	display: block;
	width: 4rem;
	height: 4rem;
}

/* Short note in a hero, such as when booking opens. */
p.es-note {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 600;
}

p.es-note::before {
	content: "";
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-alt);
}

/* Resources: article cards and topic links. */
.es-post-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.es-post-card:hover .wp-block-post-title a,
.es-post-card .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary-alt);
	text-decoration-thickness: 2px;
}

.es-post-card .wp-block-post-terms a,
.es-eyebrow-links a {
	color: inherit;
	text-decoration: none;
}

.es-topics ul.wp-block-categories {
	margin: 0;
}

/* Hide the topic list until the first article is published. */
.es-topics:has(.cat-item-none) {
	display: none;
}

.es-topics:has(.cat-item-none) + * {
	margin-block-start: 0;
}

.es-topics ul.is-style-pills li a {
	color: inherit;
	text-decoration: none;
}

/* Questions and answers. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-block: 1.1rem;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

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

.wp-block-details > summary::after {
	content: "+";
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
}

.wp-block-details[open] > summary::after {
	content: "\2212";
}

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

/* Header menu buttons: white icon on navy, with a 44px tap area. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	padding: 9px;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--wp--preset--color--base);
}

/* Hide on phones and small tablets (781px and below). */
@media (max-width: 781px) {
	.es-hide-mobile {
		display: none !important;
	}

	.wp-block-buttons.es-cta-buttons {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	/* Header: keep the logo a sensible size on phones. */
	.site-header .wp-block-site-logo img {
		width: 170px !important;
	}

	/* Service and step cards: icon on the left so the list stays short on phones. */
	.es-service-card,
	.es-step-card {
		display: grid !important;
		grid-template-columns: auto 1fr;
		align-items: start;
		column-gap: 1rem;
		row-gap: 0.25rem;
	}

	.es-service-card > *,
	.es-step-card > * {
		grid-column: 2;
		margin: 0 !important;
	}

	.es-service-card > .wp-block-image,
	.es-step-card > .is-style-step-number {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.es-service-card > .wp-block-image img {
		width: 3.5rem !important;
		height: 3.5rem !important;
	}

	/* Shorter review quote on phones. */
	.wp-block-quote.es-testimonial p {
		font-size: var(--wp--preset--font-size--base);
	}

	/* Buttons in the hero and quote band fill the width, so they are easy to tap. */
	.wp-block-buttons.es-stack-mobile > .wp-block-button {
		flex-basis: 100%;
	}

	.wp-block-buttons.es-stack-mobile > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* Respect people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}

/* Service area map: fills its column and keeps its shape. */
.es-map img {
	display: block;
	width: 100%;
	height: auto;
}