/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.0
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/*
Theme Name: Ivy House
Theme URI: https://ivyhousehealth.com
Author: Ivy House Integrative Health
Author URI: https://ivyhousehealth.com
Description: A custom child theme of Twenty Twenty-Four for Ivy House Integrative Health. A painterly, editorial take on a modern functional-medicine clinic — warm earth-tone palette (Cream, Espresso, Latte, Sage, Lavender), Cormorant Garamond + Inter typography, and continuous-flow page layouts with no boxy section breaks.
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ivy-house
Tags: block-theme, healthcare, wellness, custom-colors, editor-style, custom-logo, full-site-editing
*/

/* ---------------------------------------------------------------
   Ivy House — child theme overrides for Twenty Twenty-Four.
   Most styling lives in theme.json. This file handles the
   continuous-flow effects that block JSON can't easily express:
   soft section transitions, painterly image masks, hairline rules,
   and the conditions accordion.
   --------------------------------------------------------------- */

/* Smooth section blending: every alternate-background section
   gets a top + bottom feather so nothing reads as a hard box. */
.ih-feather-top {
	mask-image: linear-gradient(to bottom, transparent 0, #000 7rem);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7rem);
}
.ih-feather-bottom {
	mask-image: linear-gradient(to top, transparent 0, #000 7rem);
	-webkit-mask-image: linear-gradient(to top, transparent 0, #000 7rem);
}
.ih-feather-both {
	mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

/* Painterly hero — image bleeds into cream below. */
.ih-hero-painting {
	position: relative;
	isolation: isolate;
}
.ih-hero-painting::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 9rem;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--cream) 90%);
	pointer-events: none;
	z-index: 1;
}
.ih-hero-painting > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Soft cream-on-cream cards (testimonials, condition rows) */
.ih-soft-card {
	background: color-mix(in srgb, var(--wp--preset--color--cream) 85%, white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--latte) 25%, transparent);
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(79, 63, 54, 0.04), 0 12px 30px -22px rgba(79, 63, 54, 0.18);
}

/* Hairline divider used between flowing sections instead of full bars */
.ih-rule {
	border: 0;
	height: 1px;
	width: min(8rem, 30%);
	margin-inline: auto;
	background: color-mix(in srgb, var(--wp--preset--color--latte) 50%, transparent);
}

/* Small uppercase label used over headings */
.ih-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--latte);
}

/* Conditions accordion (Who We Treat) */
.ih-accordion details {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--latte) 35%, transparent);
	padding: 1.4rem 0;
}
.ih-accordion details:first-child {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--latte) 35%, transparent);
}
.ih-accordion summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.4rem, 2.3vw, 1.85rem);
	font-weight: 500;
	color: var(--wp--preset--color--espresso);
	padding-block: 0.25rem;
}
.ih-accordion summary::-webkit-details-marker { display: none; }
.ih-accordion summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 300;
	font-size: 1.6rem;
	color: var(--wp--preset--color--sage);
	transition: transform 0.25s ease;
}
.ih-accordion details[open] summary::after { content: "–"; }
.ih-accordion details > p,
.ih-accordion details > div {
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--inter);
	color: color-mix(in srgb, var(--wp--preset--color--espresso) 80%, transparent);
	line-height: 1.7;
	max-width: 60ch;
}

/* Process timeline (Our Process) — connecting line + dots */
.ih-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	padding-block: 2rem 1rem;
}
.ih-timeline::before {
	content: "";
	position: absolute;
	top: 2.4rem;
	left: 6%;
	right: 6%;
	height: 1px;
	background: repeating-linear-gradient(to right,
		var(--wp--preset--color--latte) 0 6px,
		transparent 6px 14px);
	opacity: 0.6;
}
.ih-timeline-step {
	text-align: center;
	position: relative;
}
.ih-timeline-dot {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
	margin: 1.85rem auto 1rem;
	box-shadow: 0 0 0 6px var(--wp--preset--color--cream),
		0 0 0 7px color-mix(in srgb, var(--wp--preset--color--latte) 50%, transparent);
}
.ih-timeline-step h4 {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 0.5rem;
}
.ih-timeline-step p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.92rem;
	color: color-mix(in srgb, var(--wp--preset--color--espresso) 75%, transparent);
	line-height: 1.55;
	margin: 0;
}
@media (max-width: 760px) {
	.ih-timeline { grid-template-columns: 1fr; gap: 0; }
	.ih-timeline::before {
		top: 1rem; bottom: 1rem; left: 50%;
		width: 1px; height: auto; right: auto;
		background: repeating-linear-gradient(to bottom,
			var(--wp--preset--color--latte) 0 6px,
			transparent 6px 14px);
	}
	.ih-timeline-step { padding-block: 1.5rem; }
}

/* Side-by-side comparison */
.ih-compare {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 0;
	align-items: stretch;
	max-width: 880px;
	margin-inline: auto;
}
.ih-compare > .ih-compare-col { padding: 2rem 2.5rem; }
.ih-compare > .ih-compare-divider {
	background: color-mix(in srgb, var(--wp--preset--color--latte) 40%, transparent);
}
.ih-compare h3 {
	font-family: var(--wp--preset--font-family--cormorant);
	font-weight: 500;
	font-size: 1.6rem;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 1rem;
}
.ih-compare ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	color: color-mix(in srgb, var(--wp--preset--color--espresso) 80%, transparent);
}
.ih-compare li {
	padding: 0.45rem 0;
	position: relative;
	padding-left: 1.1rem;
	line-height: 1.55;
}
.ih-compare li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.95rem;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
}
.ih-compare-col--ours li::before { background: var(--wp--preset--color--latte); }
@media (max-width: 720px) {
	.ih-compare { grid-template-columns: 1fr; }
	.ih-compare > .ih-compare-divider {
		height: 1px; width: 60%; margin: 0 auto;
	}
}

/* Three pillars row */
.ih-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: 1080px;
	margin-inline: auto;
}
.ih-pillars > div { text-align: center; }
.ih-pillars svg { margin: 0 auto 1.25rem; display: block; }
.ih-pillars h3 {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 0.85rem;
}
.ih-pillars p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.95rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--espresso) 75%, transparent);
	max-width: 28ch;
	margin: 0 auto;
}
@media (max-width: 800px) {
	.ih-pillars { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Founders / bio cards */
.ih-bio {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 3rem;
	align-items: start;
	padding: 3rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--latte) 30%, transparent);
}
.ih-bio:last-child { border-bottom: 0; }
.ih-bio h3 {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 500;
	color: var(--wp--preset--color--espresso);
	margin: 0 0 0.25rem;
}
.ih-bio .ih-bio-title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--latte);
	margin: 0 0 1.25rem;
}
.ih-bio p {
	font-family: var(--wp--preset--font-family--inter);
	color: color-mix(in srgb, var(--wp--preset--color--espresso) 82%, transparent);
	line-height: 1.7;
}
@media (max-width: 760px) {
	.ih-bio { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Pull-quote */
.ih-pullquote {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--espresso);
	text-align: center;
	max-width: 36ch;
	margin: 3rem auto;
	line-height: 1.4;
	position: relative;
}
.ih-pullquote::before,
.ih-pullquote::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--wp--preset--color--latte);
	margin: 1.5rem auto;
}
.ih-pullquote cite {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--latte);
	margin-top: 1rem;
}

/* Sticky-ish nav cleanup, breathing room above header */
.wp-site-blocks > header { padding-block: 1rem; }

/* Buttons — refine the TT4 default */
.wp-block-button.is-style-ih-primary .wp-block-button__link {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--cream);
	border-radius: 2px;
	padding: 0.85rem 1.8rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	transition: background 0.2s ease;
}
.wp-block-button.is-style-ih-primary .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--sage) 85%, var(--wp--preset--color--espresso));
}
.wp-block-button.is-style-ih-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--espresso);
	border: 1px solid var(--wp--preset--color--latte);
	border-radius: 2px;
	padding: 0.8rem 1.7rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-button.is-style-ih-ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--latte) 12%, transparent);
}

/* Reduce harsh edges on hero cover blocks */
.wp-block-cover.ih-hero-painting { min-height: clamp(420px, 75vh, 720px); }

/* Mobile safe gutters */
@media (max-width: 600px) {
	.wp-site-blocks { font-size: 16px; }
}