/* WordPress / Gutenberg wrappers for the KAS KONCEPTS design.
   Loaded after styles.css. */

body {
	--wp--style--block-gap: 0px;
}

.wp-site-blocks,
.wp-block-post-content,
main.wp-block-group {
	margin: 0;
	padding: 0;
}

/* Template-part wrappers would trap the sticky header inside their own height. */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

.wp-block-group.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-group.is-layout-constrained > * {
	max-width: none;
}

/* ---- Images: the block wraps every <img> in a <figure> ---- */
.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	vertical-align: middle;
}

/* Blob photo frames (hero, Meet Kristen, About). */
.wp-block-image.blob-frame__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.wp-block-image.blob-frame__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--blob);
	box-shadow: var(--shadow-soft);
}

/* object-position from the static site, now classes on the figure. */
.pos-50-20 img { object-position: 50% 20%; }
.pos-50-25 img { object-position: 50% 25%; }
.pos-50-30 img { object-position: 50% 30%; }
.pos-50-35 img { object-position: 50% 35%; }
.pos-50-40 img { object-position: 50% 40%; }
.pos-50-45 img { object-position: 50% 45%; }

/* Photo pair on About. */
.photo-duo .wp-block-image:nth-child(2) {
	margin-top: 3rem;
}

/* Service photos and the CTA photo fill their frames. */
.svc__photo .wp-block-image,
.cta__media .wp-block-image {
	height: 100%;
}

/* Decorative leaf on the CTA band. */
.wp-block-image.cta__leaf {
	position: absolute;
	right: 1%;
	bottom: 0;
	width: min(18vw, 240px);
	opacity: .85;
	pointer-events: none;
}

@media (max-width: 860px) {
	.wp-block-image.cta__leaf {
		width: 40vw;
		opacity: .35;
	}
}

/* Service icon cards on the home page: the whole card is clickable via the label link. */
.icon-card {
	position: relative;
	padding: .5rem .25rem;
	border-radius: var(--radius-md);
	transition: transform .3s var(--ease);
}

.icon-card:hover {
	transform: translateY(-4px);
}

.wp-block-image.icon-card__icon {
	width: 136px;
	height: 136px;
	margin: 0 auto 1.2rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--c-sand-200);
	display: grid;
	place-items: center;
	transition: background .3s;
}

.icon-card:hover .wp-block-image.icon-card__icon {
	background: var(--c-blush-300);
}

.wp-block-image.icon-card__icon img {
	width: 74%;
	height: 74%;
	object-fit: contain;
}

.icon-card__label a {
	text-decoration: none;
	color: inherit;
}

.icon-card__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 520px) {
	.wp-block-image.icon-card__icon {
		width: 112px;
		height: 112px;
	}
}

/* ---- Sections that styles.css targets by aria-labelledby ---- */
.labelled-help-title { padding-block: .25rem clamp(2rem, 3.5vw, 2.75rem); }
.labelled-help-title .icon-grid { margin-top: 1.75rem; }
.labelled-meet-title { padding-top: clamp(2.5rem, 4.5vw, 4rem); }
.labelled-process-title { padding-bottom: calc(var(--section-y) * .5); }
.labelled-faq-title { padding-top: calc(var(--section-y) * .5); }

/* Review background, which was an inline style. */
.quotes.quotes--desk {
	background-image: url("../img/bg-desk-dark.jpg");
	background-image: image-set(url("../img/bg-desk-dark.webp") type("image/webp"), url("../img/bg-desk-dark.jpg") type("image/jpeg"));
}

/* Reviews use the core Quote block inside the carousel. */
.carousel__slide .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 1.1vw + 1rem, 1.6rem);
	line-height: 1.5;
	font-weight: 400;
}

.carousel__slide .wp-block-quote p {
	margin: 0;
}

.carousel__slide .quote-cap {
	margin: 1.4rem 0 0;
	font-size: .75rem;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

p.quotes__mark {
	margin: .5rem 0 1.2rem;
}

/* The two-line "Hi, I'm Kristen" tag and eyebrows are paragraphs now. */
p.hello-tag,
p.eyebrow {
	margin-top: 0;
}

/* Lists kept as core List blocks. */
ul.check-list.wp-block-list,
ul.who-list.wp-block-list {
	list-style: none;
	padding-left: 0;
}

ul.wp-block-list.icon-grid {
	list-style: none;
	padding: 0;
}

/* FAQ uses the core Details block. */
.faq .wp-block-details > :not(summary) {
	margin-block-start: 0;
}

/* FAQ answers lost the .faq__answer wrapper; style the Details body instead. */
.faq__item > :not(summary) {
	padding: 0 2.5rem 1.4rem 0;
	color: var(--text-muted);
}

/* Beat WordPress layout classes on the grids the design already defines. */
.wp-block-group.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.wp-block-group.hero__inner { display: grid; }
.wp-block-group.split { display: grid; }
.wp-block-group.cta__inner { display: grid; }
.wp-block-group.contact-grid { display: grid; }
.wp-block-group.icon-grid { display: grid; }
.wp-block-group.steps { display: grid; }
.wp-block-group.photo-duo { display: grid; }
.wp-block-group.story-grid { display: grid; }
.wp-block-group.picks { display: grid; }
.wp-block-group.card-grid { display: grid; }
.wp-block-group.svc { display: grid; }
.wp-block-group.price-grid { display: grid; }
.wp-block-group.carousel__track { display: grid; }
.wp-block-group.carousel__dots { display: flex; }

/* ---- Utility classes for inline styles that were in the static pages ---- */
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.list-tight { padding-left: 1.1rem; margin: 0; }
.btn-row--center { justify-content: center; margin-top: 1.5rem; }
.w-440 { width: min(100%, 440px); }
.h2-sm { font-size: 1.9rem; }

/* Honeypot field on the contact form. */
.hp {
	position: absolute !important;
	left: -9999px;
	height: 0;
	overflow: hidden;
}