/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Global tokens and shared components — css/global.css
 *
 * Loaded on the front end and in the block editor.
 *
 * There is no Figma for this refresh. Every value is taken from the current
 * doceohealth.com build (Tailwind classes in the old doceo theme), so the
 * blocks look like the existing site until a new design arrives. When it does,
 * this file is the only one that should need re-skinning.
 *
 * Fluid sizes reach their maximum at ~1440px (the old site's widest layout
 * used Tailwind's 2xl container, 1536px). Comments give the Tailwind class the
 * value came from.
 *
 * Shared components (bottom of the file) are used by every block so buttons,
 * rich text, eyebrows and section spacing are written once:
 *   .dh-section  .dh-section__inner  .dh-section--bg-*  --pt-*  --pb-*
 *   .dh-eyebrow  .dh-title  .dh-rule  .dh-prose  .dh-actions  .dh-btn  .dh-more
 * Each is prefixed by .dh-section, which outranks Astra's .entry-content rules
 * without !important.
 * =====================================================================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {

	/* Colours */
	--clr-orange       : #FF7F00;  /* brand orange — rules, icons, button fills (old --c-orange). 2.5:1 on white: never text on light */
	--clr-orange-text  : #B34700;  /* orange for text links on light grounds (not in old site — 5:1 on bone light, 5.5:1 on white) */
	--clr-orange-soft  : #FFE7CF;  /* pale orange behind icons and the highlighted pricing card (not in old site) */
	--clr-ink          : #18181B;  /* headings and button text (Tailwind zinc-950) */
	--clr-body         : #3F3F46;  /* body copy (Tailwind zinc-700 — 9.4:1 on bone light) */
	--clr-muted        : #52525B;  /* small detail lines, card meta (zinc-600 — 7:1 on white) */
	--clr-bone-light   : #F5F3EF;  /* default page ground (old --c-bone-light) */
	--clr-bone-dark    : #EFE8E2;  /* hero panel, accordion bars, "Tinted" sections (old --c-bone-dark) */
	--clr-white        : #FFFFFF;
	--clr-charcoal     : #2B2A2C;  /* "Dark" sections and the footer (not in old site — white 14:1, orange 5.6:1) */
	--clr-border       : #E2E8F0;  /* card borders, table rules (old --c-grey-border) */
	--clr-overlay      : rgba(24, 24, 27, 0.72); /* photo CTA scrim behind white text (not in old site — keeps 4.5:1 on any photo) */
	--clr-error        : #B91C1C;  /* form validation (not in old site — 6.4:1 on white) */

	/* Gradients */
	--gradient-photo-scrim: linear-gradient(90deg, var(--clr-overlay) 0%, rgba(24, 24, 27, 0.45) 60%, rgba(24, 24, 27, 0.15) 100%);

	/* Font families */
	--ff-heading : 'Playfair Display', Georgia, serif;           /* section titles (old font-playfair) */
	--ff-body    : 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
	--ff-ui      : 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; /* buttons, card titles, hero h1 */

	/* Font sizes — min is the phone size, max the old desktop class */
	--fs-hero-title    : clamp(1.875rem, 1.2rem + 2.4vw, 3.75rem);  /* 30 → 60px — text-3xl → lg:text-6xl */
	--fs-page-title    : clamp(1.875rem, 1.4rem + 1.6vw, 3rem);     /* 30 → 48px — text-3xl md:text-5xl (inner hero h1) */
	--fs-hero-tagline  : clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); /* 22 → 30px — text-2xl md:text-3xl */
	--fs-section-title : clamp(1.875rem, 1.4rem + 1.6vw, 3rem);     /* 30 → 48px — text-3xl md:text-5xl */
	--fs-lead          : clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);  /* 20 → 28px — the bold sub-title line */
	--fs-body          : clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);  /* 17 → 20px — text-lg md:text-xl */
	--fs-card-title    : clamp(1.375rem, 1.15rem + 0.75vw, 1.875rem); /* 22 → 30px — text-2xl md:text-3xl */
	--fs-point-title   : clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);  /* 19 → 24px — talking point header */
	--fs-small         : 1rem;                                      /* 16px — card meta, footer, labels */
	--fs-button        : clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);  /* 17 → 20px (old text-xl md:text-2xl felt oversized) */
	--fs-eyebrow       : 0.875rem;                                  /* 14px */
	--fs-price         : clamp(2.25rem, 1.8rem + 1.5vw, 3rem);      /* 36 → 48px — text-4xl md:text-5xl */
	--fs-cta-title     : clamp(1.875rem, 1.4rem + 1.6vw, 3rem);     /* 30 → 48px */
	--fs-cta-text      : clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);  /* 20 → 28px */

	/* Font weights */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;
	--fw-bold     : 700;

	/* Line heights */
	--lh-tight   : 1.15;  /* hero and section titles */
	--lh-heading : 1.25;  /* card and point titles */
	--lh-body    : 1.6;   /* paragraphs */
	--lh-ui      : 1.3;   /* buttons, labels */

	/* Letter spacing */
	--ls-eyebrow : 0.12em;

	/* Layout */
	--container-width  : 80rem;                      /* 1280px — Tailwind xl container; old 2xl (1536) ran lines too long */
	--container-gutter : clamp(1.25rem, 4vw, 2.5rem); /* 20px (old pl-5) → 40px */
	--measure          : 46rem;                       /* ~70 characters at body size — single-column text */
	--section-padding    : clamp(3.5rem, 2.5rem + 4vw, 7rem);  /* 56 → 112px — old pt-28 */
	--section-padding-sm : clamp(1.75rem, 1.25rem + 2vw, 3rem); /* 28 → 48px — "Small" spacing */

	/* Spacing */
	--space-2xs : 0.25rem;
	--space-xs  : 0.5rem;
	--space-sm  : 0.75rem;
	--space-md  : 1.25rem;
	--space-lg  : clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);  /* 24 → 40px — title → content, gaps between cards */
	--space-xl  : clamp(2rem, 1.5rem + 2vw, 3.5rem);      /* 32 → 56px — intro → grid */
	--size-rule : 5rem;                                   /* 80px — orange rule under titles (old Orange-Line.png) */
	--size-icon : 3rem;                                   /* 48px — card icon (old h-8 w-8 was too small to read) */
	--size-check: 1.75rem;                                /* 28px — checklist tick (old w-8 h-8 image) */
	--size-hero-standard : clamp(20rem, 15rem + 14vw, 30rem); /* 320 → 480px — inner hero min-height */
	--size-hero-large    : clamp(26rem, 18rem + 24vw, 38.4rem); /* 416 → 615px — home hero (old h-[615px]) */
	--size-cta           : clamp(18rem, 14rem + 10vw, 22.25rem); /* 288 → 356px — photo CTA (old h-[356px]) */

	/* Border radius */
	--radius-pill : 999px;   /* every button (old rounded-full) */
	--radius-card : 0.75rem;
	--radius-img  : 0.5rem;

	/* Border widths */
	--bw-button : 2px;       /* old border-2 */
	--bw-rule   : 3px;       /* orange rule */
	--bw-card   : 1px;

	/* Shadows */
	--shadow-card : 0 1px 2px rgba(24, 24, 27, 0.06), 0 8px 24px rgba(24, 24, 27, 0.06);

	/* Motion — short and quiet */
	--ease-soft      : cubic-bezier(0.25, 0.1, 0.25, 1);
	--dur-hover      : 200ms;
	--dur-accordion  : 300ms;  /* must match ACCORDION_DURATION in blocks/accordion/accordion.js */
	--dur-reveal     : 600ms;
}


/*
 * Page ground and Astra overrides
 * ---------------------------------------------------------------------------------------------------------------------
 */

body {
	background: var(--clr-bone-light);
	color: var(--clr-body);
	font-family: var(--ff-body);
}


/*
 * Full-width sections. Pages use Astra's page-builder layout (functions.php),
 * so the content area is already the full window; Astra's alignfull rules
 * then pull sections 20px or 50vw sideways. Sections sit flat instead.
 */
.ast-page-builder-template .entry-content > .dh-section.alignfull,
.single-layout > .dh-section.alignfull {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

.ast-page-builder-template .entry-content {
	margin: 0;
}

/* Astra pads the article 2em / 20px on singular views — the sections do their own spacing */
.ast-single-post.ast-page-builder-template .site-main > article.ast-article-single,
.ast-single-post.ast-page-builder-template .site-main > article.single-layout {
	padding: 0;
}


/*
 * Buttons never underline
 * ---------------------------------------------------------------------------------------------------------------------
 * !important is deliberate: Astra's link-underline settings use selectors that
 * can outrank block styles on hover/focus.
 */
a[class*="__btn"], a[class*="__btn"]:hover, a[class*="__btn"]:focus,
a[class*="__btn"]:active, a[class*="__btn"]:visited,
a.dh-btn, a.dh-btn:hover, a.dh-btn:focus, a.dh-btn:visited,
a.dh-card, a.dh-card:hover, a.dh-card:focus, a.dh-card *,
.wp-block-button__link, .wp-block-button__link:hover, .wp-block-button__link:focus,
.ast-button, .ast-button:hover, .ast-button:focus {
	text-decoration: none !important;
}


/*
 * Shared: section shell
 * ---------------------------------------------------------------------------------------------------------------------
 * Every section block is <section class="dh-section {block} dh-section--bg-x --pt-x --pb-x">
 * with a .dh-section__inner container. Blocks butt together; spacing is padding.
 */

.dh-section {
	position: relative;
	isolation: isolate;
	margin-block: 0;
	color: var(--clr-body);
}

.dh-section--bg-white  { background: var(--clr-white); }
.dh-section--bg-light  { background: var(--clr-bone-light); }
.dh-section--bg-tinted { background: var(--clr-bone-dark); }
.dh-section--bg-dark   { background: var(--clr-charcoal); color: var(--clr-white); }

.dh-section .dh-section__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--container-width) + (var(--container-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	padding-block: var(--section-padding);
}

.dh-section.dh-section--pt-small > .dh-section__inner { padding-top: var(--section-padding-sm); }
.dh-section.dh-section--pt-none  > .dh-section__inner { padding-top: 0; }
.dh-section.dh-section--pb-small > .dh-section__inner { padding-bottom: var(--section-padding-sm); }
.dh-section.dh-section--pb-none  > .dh-section__inner { padding-bottom: 0; }


/*
 * Shared: section intro — eyebrow, title, orange rule, lead
 * ---------------------------------------------------------------------------------------------------------------------
 */

.dh-section .dh-eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--ff-ui);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--clr-orange-text);
}

.dh-section .dh-title {
	margin: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-section-title);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--clr-ink);
}

/* The short orange line under titles — the old site's Orange-Line.png */
.dh-section .dh-rule {
	display: block;
	width: var(--size-rule);
	height: var(--bw-rule);
	margin: var(--space-md) 0 var(--space-lg);
	border: 0;
	background: var(--clr-orange);
}

.dh-section .dh-lead {
	margin: 0 0 var(--space-md);
	font-family: var(--ff-body);
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--clr-ink);
}

.dh-section--bg-dark .dh-eyebrow { color: var(--clr-orange); }
.dh-section--bg-dark .dh-title,
.dh-section--bg-dark .dh-lead    { color: var(--clr-white); }


/*
 * Shared: rich text from WYSIWYG fields
 * ---------------------------------------------------------------------------------------------------------------------
 */

.dh-section .dh-prose {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: inherit;
}

.dh-section .dh-prose > *        { margin: 0; }
.dh-section .dh-prose > * + *    { margin-top: 1em; }
.dh-section .dh-prose h2,
.dh-section .dh-prose h3,
.dh-section .dh-prose h4 {
	font-family: var(--ff-ui);
	font-size: var(--fs-point-title);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--clr-ink);
}
.dh-section .dh-prose * + h2,
.dh-section .dh-prose * + h3,
.dh-section .dh-prose * + h4     { margin-top: 1.5em; }
.dh-section .dh-prose strong     { font-weight: var(--fw-bold); color: var(--clr-ink); }

.dh-section .dh-prose ul {
	padding: 0;
	list-style: none;
}

.dh-section .dh-prose ul li {
	position: relative;
	margin: 0;
	padding-left: 1.4em;
}

.dh-section .dh-prose li + li { margin-top: 0.4em; }

/* Orange square bullets */
.dh-section .dh-prose ul li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0.2em;
	width: 0.4em;
	height: 0.4em;
	background: var(--clr-orange);
}

.dh-section .dh-prose ol {
	margin-left: 0;
	padding-left: 1.4em;
}

/* Text links keep an underline — colour alone isn't enough against body text */
.dh-section .dh-prose a {
	color: var(--clr-orange-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.dh-section .dh-prose a:hover { text-decoration-thickness: 2px; }

.dh-section--bg-dark .dh-prose strong,
.dh-section--bg-dark .dh-prose h2,
.dh-section--bg-dark .dh-prose h3,
.dh-section--bg-dark .dh-prose h4 { color: var(--clr-white); }
.dh-section--bg-dark .dh-prose a  { color: var(--clr-white); text-decoration-color: var(--clr-orange); }


/*
 * Shared: buttons
 * ---------------------------------------------------------------------------------------------------------------------
 * The old site's pill: orange 2px border, fills orange on hover. Text is ink,
 * not orange — orange text on bone/white is only ~2.4:1.
 *   --primary  solid orange (ink text, 7:1)
 *   --outline  orange border, fills on hover
 *   --text     "Learn more →" link with the arrow
 * On dark and photo grounds the outline button's text turns white.
 */

.dh-section .dh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.dh-section .dh-btn {
	--btn-fill: var(--clr-orange);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: 3rem;                      /* 48px touch target */
	padding: 0.65em 1.9em;                 /* old py-3 px-12, scaled to the smaller type */
	border: var(--bw-button) solid var(--clr-orange);
	border-radius: var(--radius-pill);
	background-color: transparent;
	background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--clr-ink);
	font-family: var(--ff-ui);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-size 350ms var(--ease-soft),
		color var(--dur-hover) var(--ease-soft);
}

.dh-section .dh-btn:hover,
.dh-section .dh-btn:focus-visible {
	background-size: 100% 100%;
	color: var(--clr-ink);
}

.dh-section .dh-btn:focus-visible,
.dh-section .dh-more:focus-visible {
	outline: 2px solid var(--clr-ink);
	outline-offset: 3px;
}

.dh-section .dh-btn--primary {
	background-color: var(--clr-orange);
	--btn-fill: #FF9933;                   /* lighter orange sweep on the solid button (ink stays 8:1) */
}

.dh-section--bg-dark .dh-btn--outline,
.dh-section .dh-on-photo .dh-btn--outline {
	color: var(--clr-white);
}

.dh-section--bg-dark .dh-btn--outline:hover,
.dh-section--bg-dark .dh-btn--outline:focus-visible,
.dh-section .dh-on-photo .dh-btn--outline:hover,
.dh-section .dh-on-photo .dh-btn--outline:focus-visible {
	color: var(--clr-ink);
}

/* Text link with arrow — the old "Learn more →" */
.dh-section .dh-more {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--clr-ink);
	font-family: var(--ff-ui);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	text-decoration: none;
}

.dh-section .dh-more::after {
	content: "";
	flex: none;
	width: 2em;
	height: 0.75em;
	background: var(--clr-orange);
	/* Arrow drawn as a mask so it takes the orange; replaces doc-icon__arrow-right-001.png */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 5h28.6L24.3.7 25.7-.7 32 6l-6.3 6.7-1.4-1.4L28.6 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 5h28.6L24.3.7 25.7-.7 32 6l-6.3 6.7-1.4-1.4L28.6 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-hover) var(--ease-soft);
}

.dh-section .dh-more:hover {
	text-decoration: underline;
	text-decoration-color: var(--clr-orange);
	text-underline-offset: 0.25em;
}

.dh-section .dh-more:hover::after { transform: translateX(0.3em); }

.dh-section--bg-dark .dh-more,
.dh-section .dh-on-photo .dh-more { color: var(--clr-white); }


/*
 * Shared: card (Card Grid, Directory results, related items)
 * ---------------------------------------------------------------------------------------------------------------------
 */

.dh-section .dh-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: var(--bw-card) solid var(--clr-border);
	border-radius: var(--radius-card);
	background: var(--clr-white);
	color: var(--clr-body);
	text-decoration: none;
	transition: box-shadow var(--dur-hover) var(--ease-soft), transform var(--dur-hover) var(--ease-soft);
}

.dh-section a.dh-card:hover,
.dh-section a.dh-card:focus-visible {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.dh-section a.dh-card:focus-visible {
	outline: 2px solid var(--clr-ink);
	outline-offset: 3px;
}

.dh-section .dh-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--clr-bone-dark);
}

.dh-section .dh-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-section .dh-card--logo .dh-card__media {
	aspect-ratio: 5 / 2;
	padding: var(--space-md);
	background: var(--clr-white);
}

.dh-section .dh-card--logo .dh-card__media img { object-fit: contain; }

.dh-section .dh-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-md) var(--space-lg);
}

.dh-section .dh-card__title {
	margin: 0;
	font-family: var(--ff-ui);
	font-size: var(--fs-point-title);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--clr-ink);
}

.dh-section .dh-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--lh-ui);
	color: var(--clr-muted);
}

.dh-section .dh-card__meta li { margin: 0; }
.dh-section .dh-card__meta li::before { display: none; }

.dh-section .dh-card__excerpt {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.dh-section .dh-card__price {
	margin-top: auto;
	padding-top: var(--space-xs);
	font-family: var(--ff-ui);
	font-weight: var(--fw-bold);
	color: var(--clr-ink);
}

.dh-section .dh-card .dh-more {
	margin-top: auto;
	padding-top: var(--space-sm);
	font-size: var(--fs-small);
}


/*
 * Shared: reduced motion
 * ---------------------------------------------------------------------------------------------------------------------
 */
@media (prefers-reduced-motion: reduce) {
	.dh-section .dh-btn,
	.dh-section .dh-more::after,
	.dh-section .dh-card {
		transition: none;
	}

	.dh-section a.dh-card:hover { transform: none; }
}