/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Global tokens and shared components — css/global.css
 *
 * Loaded on the front end and in the block editor.
 *
 * October 2026 refresh: values come from the Figma file "Doceo refresh"
 * (frames Doceo Home, Secondary Elements Page, Partner Page, News and other
 * 3x Sections). The Figma frame is 1440px wide, so fluid sizes reach their
 * Figma value at about 1440px. Comments give the Figma px value and mark
 * anything that isn't in Figma.
 *
 * Token names are unchanged from the first build so the Doceo plugins'
 * stylesheets (courses, events, practice, membership) pick up the new look.
 *
 * Shared components (bottom of the file) are used by every block so buttons,
 * cards, rich text, titles and section spacing are written once:
 *   .dh-section  .dh-section__inner  .dh-section--bg-*  --pt-*  --pb-*  --boxed  --title-sans
 *   .dh-eyebrow  .dh-title  .dh-lead  .dh-prose  .dh-actions  .dh-btn  .dh-more  .dh-card
 * Each is prefixed by .dh-section, which outranks Astra's .entry-content rules
 * without !important.
 * =====================================================================================================================
 */

/*
 * Fonts — self-hosted in fonts/ (November 2026)
 *
 * These replace an @import from Google Fonts, which chained global.css →
 * Google's CSS → the font files before any text could paint (PageSpeed:
 * ~750 ms render-blocking on mobile). Same families, weights and styles as
 * that import: DM Sans 400–600 (with optical sizing), Roboto 400/500/700 +
 * italic 400, STIX Two Text 400/500 + italic 400.
 *
 * Each file is Google's variable font, so one file covers every weight in its
 * range. Source: fonts.googleapis.com css2, DM Sans v17, Roboto v51,
 * STIX Two Text v18. Only the latin and latin-ext subsets are kept; the
 * browser downloads latin-ext only if a page uses one of those characters.
 *
 * roboto-latin and stix-two-text-latin are preloaded in functions.php
 * (theme_preload_fonts) — keep those file names in step.
 */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/dm-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/roboto-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/roboto-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'STIX Two Text';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/stix-two-text-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'STIX Two Text';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/stix-two-text-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'STIX Two Text';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/stix-two-text-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'STIX Two Text';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/stix-two-text-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

	/* Colours */
	--clr-orange       : #F05123;  /* brand orange — logo, links, button gradient start (from Figma). 3.6:1 on white: large text and links only */
	--clr-orange-light : #FDCA80;  /* button gradient end (from Figma) */
	--clr-orange-text  : #F05123;  /* "More information →" links (from Figma — 3.6:1 on white, 3.3:1 on paper; see the handover note) */
	--clr-orange-soft  : #F7DBCC;  /* "peach" — eyebrow on dark, soft fills (Figma --doceo-peach) */
	--clr-ink          : #1E1E1C;  /* headings, header button, dark panel (Figma --doceo-ink) */
	--clr-body         : #1E1E1C;  /* body copy — Figma uses black; ink reads the same and is 16.8:1 on white */
	--clr-muted        : #6B6764;  /* dates, card meta (Figma #868686 is 3.6:1 — darkened to 5.6:1 on white, 5.1:1 on paper) */
	--clr-dim          : #868180;  /* inactive rows in the Benefits list (from Figma — decorative contrast only) */
	--clr-bone-light   : #F7F4EE;  /* "paper" — cards, partner band, boxed sections (Figma --doceo-paper) */
	--clr-bone-dark    : #FFE2B9;  /* peach gradient end, hero panel (from Figma) */
	--clr-white        : #FFFFFF;
	--clr-charcoal     : #1E1E1C;  /* dark panels — same as ink (Figma "Broadcast feature") */
	--clr-black        : #000000;  /* footer (from Figma "11 / Footer") */
	--clr-footer-text  : #EAEAEA;  /* footer phone, offices, copyright (from Figma — 17:1 on black) */
	--clr-border       : #D9D4CB;  /* card and list rules (not in Figma — eyeballed from the 0.5px rules) */
	--clr-rule         : #1E1E1C;  /* the dark top rule on lists (from Figma) */
	--clr-placeholder  : #D9D9D9;  /* empty image boxes (from Figma) */
	--clr-overlay      : rgba(30, 30, 28, 0.72); /* photo scrim behind white text (not in Figma — keeps 4.5:1 on any photo) */
	--clr-header-glass : rgba(247, 244, 238, 0.78); /* scrolled header — paper #F7F4EE at 78% over a blur (not in Figma; ink nav text stays >14:1 on any backdrop) */
	--clr-header-solid : rgba(247, 244, 238, 0.97); /* same, for browsers without backdrop-filter */
	--shadow-header    : 0 1px 0 rgba(30, 30, 28, 0.06), 0 8px 24px rgba(30, 30, 28, 0.06); /* scrolled header edge (not in Figma) */
	--clr-error        : #B42318;  /* form validation (not in Figma — 6.5:1 on white) */

	/* Gradients */
	--gradient-button  : linear-gradient(90deg, #F05123 0%, #FDCA80 100%);              /* Button/Primary (from Figma) */
	--gradient-peach   : linear-gradient(129.5deg, #F7F4EE 39.7%, #FFE2B9 90%);          /* secondary hero band (from Figma Rectangle 37) */
	--gradient-sunrise : linear-gradient(129.5deg, #FFE2B9 25%, #F7F4EE 85%);            /* News hero band (sampled from screenshot) */
	--gradient-dawn    : linear-gradient(169.4deg, #FFE2B9 14.8%, #FFFFFF 66.2%);          /* single post band, peach → white (from Figma Partner Page, Rectangle 39) */
	--gradient-callout : radial-gradient(120% 140% at 20% 50%, #FCC179 0%, #FDA058 45%, #FF7E37 100%); /* callout box (Figma diamond gradient, approximated) */
	--gradient-glow    : radial-gradient(closest-side, rgba(240, 81, 35, 0.15), rgba(240, 81, 35, 0)); /* the blurred orange blobs (Figma Vector 1, 15% #F05123) */
	--gradient-photo-scrim: linear-gradient(90deg, var(--clr-overlay) 0%, rgba(30, 30, 28, 0.45) 60%, rgba(30, 30, 28, 0.15) 100%);

	/* Font families */
	--ff-heading : 'STIX Two Text', Georgia, 'Times New Roman', serif;   /* display and card titles (from Figma) */
	--ff-body    : 'Roboto', 'Helvetica Neue', Arial, sans-serif;        /* paragraphs, sub-headings, sans titles (from Figma) */
	--ff-ui      : 'DM Sans', 'Helvetica Neue', Arial, sans-serif;       /* nav, buttons, footer (Figma Typography/UI) */

	/* Font sizes — max is the Figma value at 1440, min the phone size */
	--fs-hero-title    : clamp(2.5rem, 1.2rem + 4.4vw, 5rem);           /* 40 → 80px — home hero */
	--fs-page-title    : clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem);     /* 34 → 58px — inner page h1 */
	--fs-section-title : clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem);     /* 34 → 58px — serif section titles */
	--fs-title-sans    : clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);        /* 28 → 40px — Roboto Medium titles ("Benefits", "Headline of importance") */
	--fs-hero-tagline  : clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);     /* 19 → 23px */
	--fs-lead          : clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);     /* 19 → 23px — Roboto Medium sub-heading */
	--fs-feature-title : clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);        /* 28 → 40px — featured news title */
	--fs-card-title    : clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);      /* 22 → 28px — STIX card titles */
	--fs-point-title   : clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);     /* 19 → 23px — list headings */
	--fs-body          : clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);      /* 16 → 17px */
	--fs-small         : 0.875rem;                                      /* 14px — labels, dates, eyebrows */
	--fs-button        : 0.9375rem;                                     /* 15px — Typography/UI/Label */
	--fs-nav           : 0.9375rem;                                     /* 15px */
	--fs-eyebrow       : 0.875rem;                                      /* 14px */
	--fs-meta          : 0.75rem;                                       /* 12px — Typography/UI/Meta ("FEATURED LEARNING") */
	--fs-footer        : 1.125rem;                                      /* 18px — Typography/Body/Regular */
	--fs-footer-head   : 1.25rem;                                       /* 20px */
	--fs-price         : clamp(2.25rem, 1.8rem + 1.5vw, 3rem);          /* 36 → 48px (not in Figma — pricing cards) */
	--fs-cta-title     : clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem);     /* 34 → 58px — callout box */
	--fs-cta-text      : clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);     /* 19 → 23px */

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

	/* Line heights */
	--lh-display : 1;      /* 80 / 80 */
	--lh-tight   : 1.1;    /* 64 / 58 */
	--lh-heading : 1.15;   /* card titles — Figma 28/28 and 28/34 */
	--lh-lead    : 1.39;   /* 32 / 23 */
	--lh-body    : 1.5;    /* 24–26 / 17 */
	--lh-ui      : 1.33;   /* 20 / 15 */

	/* Letter spacing */
	--ls-display : -0.03em;  /* -2.4px / 80, -1.74px / 58 */
	--ls-title   : -0.01em;  /* -0.4px / 40, -0.28px / 28, -0.23px / 23 */
	--ls-body    : -0.03em;  /* -0.51px / 17 */
	--ls-eyebrow : 0.06em;   /* 0.84px / 14 */

	/* Layout */
	--container-width  : 76.25rem;                     /* 1220px — content width in the 1440 frame (110px margins) */
	--container-gutter : clamp(1.25rem, 4vw, 2.5rem);  /* 20 → 40px */
	--measure          : 46rem;                        /* ~70 characters at body size — single-column text */
	--section-padding    : clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* 56 → 104px (measured between Figma sections) */
	--section-padding-sm : clamp(1.5rem, 1rem + 2vw, 2.5rem);   /* 24 → 40px — "Small" spacing */
	--header-height      : 6rem;                                /* 96px — logo row (Figma: button 25 → 71) */

	/* Spacing */
	--space-2xs : 0.25rem;
	--space-xs  : 0.5rem;
	--space-sm  : 0.75rem;
	--space-md  : 1.25rem;
	--space-lg  : clamp(1.5rem, 1.2rem + 1vw, 2.25rem);   /* 24 → 36px */
	--space-xl  : clamp(2rem, 1.5rem + 2vw, 3.5rem);      /* 32 → 56px */
	--space-card: 1.3125rem;                              /* 21px — card inset (from Figma) */
	--space-grid: 1.75rem;                                /* 28px — gap between cards (from Figma) */
	--size-rule : 5rem;
	--size-icon : 4.75rem;                                /* 76px — 3D icons (from Figma) */
	--size-check: 2.5625rem;                              /* 41px — tick (from Figma) */
	--size-hero-standard : clamp(20rem, 15rem + 14vw, 30rem);
	--size-hero-large    : clamp(16rem, 8rem + 26vw, 32.875rem); /* 256 → 526px — home hero photo (from Figma) */
	--size-cta           : 11.75rem;                     /* 188px — callout box (from Figma) */

	/* Border radius */
	--radius-pill  : 999px;
	--radius-btn   : 0.625rem;  /* 10px (from Figma) */
	--radius-card  : 0.875rem;  /* 14px (from Figma) */
	--radius-img   : 0.875rem;  /* 14px (from Figma) */
	--radius-panel : 1.25rem;   /* 20px — callout box, dark feature (from Figma) */

	/* Border widths */
	--bw-button : 1px;          /* Figma 0.7px — 1px so it renders on every screen */
	--bw-rule   : 2px;
	--bw-card   : 1px;

	/* Shadows */
	--shadow-card : 0 1px 2px rgba(30, 30, 28, 0.05), 0 10px 30px rgba(30, 30, 28, 0.08); /* hover only (not in Figma) */

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


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

body {
	background: var(--clr-white);
	color: var(--clr-body);
	font-family: var(--ff-body);
	letter-spacing: var(--ls-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.
 *
 * Backgrounds (stored values kept from the first build, labels renamed):
 *   white   white
 *   light   "Paper"  — warm off-white
 *   tinted  "Peach"  — the paper → peach gradient
 *   dark    "Dark"   — ink, white text
 *   orange  "Orange" — the callout gradient (Text Section only)
 *
 * "Boxed" (Style tab) puts the background on a rounded panel inside the page
 * width instead of edge to edge. Boxed sections that follow each other join
 * into one panel, so a title section and two Media Rows read as one box.
 */

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

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

.dh-section .dh-section__inner {
	display: flow-root;                     /* contains children's margins when a spacing is None */
	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);
}

/*
 * Astra's page-builder layout (set for every page in functions.php) gives each
 * child of an .alignfull block max-width: none, at a specificity of (0,4,0).
 * Put the container back on our two container elements.
 */
.entry-content[data-ast-blocks-layout] > .dh-section.alignfull > .dh-section__inner,
.entry-content[data-ast-blocks-layout] > .dh-section.alignfull > .page-hero__frame {
	max-width: calc(var(--container-width) + (var(--container-gutter) * 2));
}

.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; }

/*
 * Neighbours on the same background read as one section: when both keep the
 * default Large spacing, the two paddings between them become one moderate
 * gap, so editors never have to remember to pick Small. Boxed sections join
 * their own way (below); an explicit Small or None is left alone.
 */
.dh-section--bg-white:not(.dh-section--boxed).dh-section--pb-large:has(+ .dh-section--bg-white:not(.dh-section--boxed).dh-section--pt-large) > .dh-section__inner,
.dh-section--bg-light:not(.dh-section--boxed).dh-section--pb-large:has(+ .dh-section--bg-light:not(.dh-section--boxed).dh-section--pt-large) > .dh-section__inner,
.dh-section--bg-tinted:not(.dh-section--boxed).dh-section--pb-large:has(+ .dh-section--bg-tinted:not(.dh-section--boxed).dh-section--pt-large) > .dh-section__inner,
.dh-section--bg-dark:not(.dh-section--boxed).dh-section--pb-large:has(+ .dh-section--bg-dark:not(.dh-section--boxed).dh-section--pt-large) > .dh-section__inner {
	padding-bottom: 0;
}

.dh-section--bg-white:not(.dh-section--boxed).dh-section--pb-large + .dh-section--bg-white:not(.dh-section--boxed).dh-section--pt-large > .dh-section__inner,
.dh-section--bg-light:not(.dh-section--boxed).dh-section--pb-large + .dh-section--bg-light:not(.dh-section--boxed).dh-section--pt-large > .dh-section__inner,
.dh-section--bg-tinted:not(.dh-section--boxed).dh-section--pb-large + .dh-section--bg-tinted:not(.dh-section--boxed).dh-section--pt-large > .dh-section__inner,
.dh-section--bg-dark:not(.dh-section--boxed).dh-section--pb-large + .dh-section--bg-dark:not(.dh-section--boxed).dh-section--pt-large > .dh-section__inner {
	padding-top: var(--space-xl);           /* 32 → 56px */
}

/* Boxed: the page stays white; the background moves onto a rounded panel */
.dh-section.dh-section--boxed {
	background: var(--clr-white);
	padding-inline: var(--container-gutter);
}

.dh-section.dh-section--boxed > .dh-section__inner {
	max-width: var(--container-width);
	padding-inline: clamp(1.25rem, 4vw, 6.5rem);   /* 104px inside the Figma box */
	border-radius: var(--radius-panel);
	background: var(--section-bg);
}

.entry-content[data-ast-blocks-layout] > .dh-section.dh-section--boxed.alignfull > .dh-section__inner {
	max-width: var(--container-width);
}

/* Boxed sections in a row on the same background join into one panel */
.dh-section--boxed.dh-section--bg-light:has(+ .dh-section--boxed.dh-section--bg-light) > .dh-section__inner,
.dh-section--boxed.dh-section--bg-tinted:has(+ .dh-section--boxed.dh-section--bg-tinted) > .dh-section__inner {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.dh-section--boxed.dh-section--bg-light + .dh-section--boxed.dh-section--bg-light > .dh-section__inner,
.dh-section--boxed.dh-section--bg-tinted + .dh-section--boxed.dh-section--bg-tinted > .dh-section__inner {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* White space around a box — but none inside a joined run */
.dh-section.dh-section--boxed { padding-block: var(--section-padding-sm); }

.dh-section--boxed.dh-section--bg-light:has(+ .dh-section--boxed.dh-section--bg-light),
.dh-section--boxed.dh-section--bg-tinted:has(+ .dh-section--boxed.dh-section--bg-tinted) { padding-bottom: 0; }

.dh-section--boxed.dh-section--bg-light + .dh-section--boxed.dh-section--bg-light,
.dh-section--boxed.dh-section--bg-tinted + .dh-section--boxed.dh-section--bg-tinted { padding-top: 0; }

/* Sections never get the editor's block gap between them */
.entry-content > .dh-section { margin-block: 0; }


/*
 * Shared: section intro — eyebrow, title, lead
 * ---------------------------------------------------------------------------------------------------------------------
 * Titles are STIX Two Text. "Sans" (Style tab) switches a section's titles to
 * Roboto Medium 40px, as in the Benefits and "Headline of importance" frames.
 * Words typed between *asterisks* render in italics (theme_title_html()).
 */

.dh-section .dh-eyebrow {
	margin: 0 0 var(--space-xs);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-regular);
	line-height: 1.7;                       /* 24 / 14 */
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--clr-ink);
}

.dh-section .dh-title {
	margin: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-section-title);
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--clr-ink);
	text-wrap: balance;
}

.dh-section .dh-title em,
.dh-section .page-hero__title em {
	font-style: italic;
	letter-spacing: -0.006em;               /* Figma -0.48px on the italic run */
}

.dh-section--title-sans .dh-title {
	font-family: var(--ff-body);
	font-size: var(--fs-title-sans);
	font-weight: var(--fw-medium);
	line-height: 1.12;                      /* 44–46 / 40 */
	letter-spacing: var(--ls-title);
}

/* The orange rule of the first build — the refresh has none */
.dh-section .dh-rule { display: none; }

.dh-section .dh-lead {
	margin: 0 0 var(--space-sm);
	font-family: var(--ff-body);
	font-size: var(--fs-lead);
	font-weight: var(--fw-medium);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-title);
	color: var(--clr-ink);
}

.dh-section .dh-title + .dh-lead { margin-top: var(--space-xs); }

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


/*
 * 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);
	letter-spacing: var(--ls-body);
	color: inherit;
}

.dh-section .dh-prose > *        { margin: 0; }
.dh-section .dh-prose > * + *    { margin-top: 0.5em; }
.dh-section .dh-prose h2,
.dh-section .dh-prose h3,
.dh-section .dh-prose h4 {
	font-family: var(--ff-body);
	font-size: var(--fs-point-title);
	font-weight: var(--fw-medium);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-title);
	color: var(--clr-ink);
}
.dh-section .dh-prose * + h2,
.dh-section .dh-prose * + h3,
.dh-section .dh-prose * + h4     { margin-top: 1.25em; }
.dh-section .dh-prose strong     { font-weight: var(--fw-bold); color: inherit; }

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

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

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

/* Small orange dots */
.dh-section .dh-prose ul li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0.25em;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--clr-orange);
}

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

/* Phone numbers and emails linked automatically (inc/contact-links.php): the
   surrounding text colour, with an orange underline. Inside prose the rule
   below makes them orange like any other text link. */
.dh-section a.dh-contact {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--clr-orange);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

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

/* Text links keep an underline, as in Figma (buttons placed inside prose keep their own colours) */
.dh-section .dh-prose a:not(.dh-btn) {
	color: var(--clr-orange-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

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

.dh-section--bg-dark .dh-prose,
.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-bone-light); }
.dh-section--bg-dark .dh-prose a:not(.dh-btn)  { color: var(--clr-bone-light); text-decoration-color: var(--clr-orange); }


/*
 * Shared: buttons — Figma Button/Primary
 * ---------------------------------------------------------------------------------------------------------------------
 * 54px tall, 10px corners, DM Sans Medium 15px.
 *   --primary  orange → peach gradient, white text (Figma)
 *   --outline  orange hairline, orange text (Figma hero second button)
 *   --dark     ink, white text (header "Become a Member", callout button)
 *   --text     "More information →" link
 * Hover lifts the gradient's light end to the left (200ms, per the Figma note).
 */

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

.dh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-width: 11.3125rem;                 /* 181px — the narrowest Figma button */
	min-height: 3.375rem;                  /* 54px */
	padding: 0.5rem 1.5rem;                /* 24px sides */
	border: var(--bw-button) solid transparent;
	border-radius: var(--radius-btn);
	background: var(--clr-ink);
	color: var(--clr-white);
	font-family: var(--ff-ui);
	font-size: var(--fs-button);
	font-weight: var(--fw-medium);
	line-height: var(--lh-ui);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-position var(--dur-hover) var(--ease-soft),
		background-color var(--dur-hover) var(--ease-soft),
		border-color var(--dur-hover) var(--ease-soft),
		color var(--dur-hover) var(--ease-soft);
}

.dh-section .dh-btn { color: var(--clr-white); }

.dh-btn:focus-visible,
.dh-more:focus-visible {
	outline: 3px solid #2563EB;            /* Figma: "focus uses 3px blue ring" */
	outline-offset: 3px;
}

.dh-btn--primary,
.dh-section .dh-btn--primary {
	background-color: var(--clr-orange);
	background-image: linear-gradient(90deg, #F05123 0%, #FDCA80 50%, #F05123 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	color: var(--clr-white);
}

.dh-btn--primary:hover,
.dh-btn--primary:focus-visible {
	background-position: 100% 0;
}

.dh-btn--outline,
.dh-section .dh-btn--outline {
	border-color: var(--clr-orange);
	background: transparent;
	color: var(--clr-orange);
}

.dh-btn--outline:hover,
.dh-btn--outline:focus-visible,
.dh-section .dh-btn--outline:hover,
.dh-section .dh-btn--outline:focus-visible {
	background: var(--clr-orange);
	color: var(--clr-white);
}

.dh-btn--dark:hover,
.dh-btn--dark:focus-visible,
.dh-section .dh-btn--dark:hover,
.dh-section .dh-btn--dark:focus-visible {
	background: #3A3936;
	color: var(--clr-white);
}

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

.dh-section--bg-dark .dh-btn--dark {
	background: var(--clr-bone-light);
	color: var(--clr-ink);
}

/* Text link with arrow — "More information →" */
.dh-more,
.dh-section .dh-more {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	color: var(--clr-orange-text);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.dh-more::after {
	content: "→";
	display: inline-block;
	transition: transform var(--dur-hover) var(--ease-soft);
}

.dh-more:hover,
a:hover .dh-more { text-decoration-thickness: 2px; }

.dh-more:hover::after,
a:hover .dh-more::after { transform: translateX(0.2em); }

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


/*
 * Shared: card (Card Grid, Directory results, related items)
 * ---------------------------------------------------------------------------------------------------------------------
 * Built by theme_card(). Every card has the same parts in the same order —
 * media, label, meta, title, excerpt, tags, footer (link + price) — and the
 * style class decides which show and how they sit:
 *   --photo    paper card, inset image, title, text, link           (home "Keep Learning")
 *   --news     paper card, inset image, date | place, title, text   (News)
 *   --article  no card, image, read time, title                     (Articles)
 *   --course   paper card, inset image, title, tags, link + price   (Courses)
 *   --offer    paper card, label, title, text, image underneath     (Partner Directory)
 *   --feature  paper card, label + title + link left, image right   (side-image offer cards)
 *   --logo     white tile with a logo                               (home "Our Partners")
 *   --list     title left, date right, rule under                   ("Latest in healthcare news")
 */

.dh-section .dh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	box-sizing: border-box;
	min-width: 0;
	padding: var(--space-card);
	border-radius: var(--radius-card);
	background: var(--clr-bone-light);
	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--bg-light .dh-card { background: var(--clr-white); }

.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: 3px solid #2563EB;
	outline-offset: 3px;
}

.dh-section .dh-card__media {
	position: relative;
	aspect-ratio: 346 / 193;                /* Figma card image */
	overflow: hidden;
	margin-bottom: var(--space-xs);
	border-radius: var(--radius-img);
	background: var(--clr-placeholder);
}

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

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

.dh-section .dh-card__label {
	order: -2;
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	line-height: 1.7;
	letter-spacing: var(--ls-body);
	color: var(--clr-ink);
}

.dh-section .dh-card__meta {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	line-height: 1.7;
	letter-spacing: 0;
	color: var(--clr-muted);
}

.dh-section .dh-card__meta li { margin: 0; padding: 0; }
.dh-section .dh-card__meta li::before { display: none; }
.dh-section .dh-card__meta li + li::before {
	content: "|";
	display: inline;
	position: static;
	margin: 0 0.5em;
	background: none;
}

.dh-section .dh-card__title {
	margin: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-title);
	color: var(--clr-ink);
	text-wrap: balance;
}

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

.dh-section .dh-card__excerpt > * { margin: 0; }

.dh-section .dh-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4375rem;                         /* 7px (from Figma) */
	margin: var(--space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

.dh-section .dh-card__tags li {
	margin: 0;
	padding: 0 0.8em;
	border: 1px solid var(--clr-ink);
	border-radius: var(--radius-pill);
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--clr-ink);
}

.dh-section .dh-card__tags li::before { display: none; }

.dh-section .dh-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
	margin-top: auto;
	padding-top: var(--space-xs);
}

.dh-section .dh-card__price {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	color: var(--clr-ink);
}

.dh-section .dh-card .dh-more { font-size: var(--fs-body); }

/* Article — no card, the image carries it */
.dh-section .dh-card--article {
	padding: 0;
	background: none;
}

.dh-section .dh-card--article .dh-card__media { margin-bottom: var(--space-2xs); }
.dh-section .dh-card--article .dh-card__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); } /* 24 → 32px (measured) */
.dh-section a.dh-card--article:hover { box-shadow: none; }
.dh-section a.dh-card--article:hover .dh-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* Offer — label, title, text, then the image */
.dh-section .dh-card--offer .dh-card__media {
	order: 2;
	margin: auto 0 0;
	aspect-ratio: 346 / 192;
}

.dh-section .dh-card--offer .dh-card__body { flex: 0 0 auto; }
.dh-section .dh-card--offer .dh-card__label { margin-bottom: var(--space-lg); }

/* Feature — copy left, image right */
.dh-section .dh-card--feature {
	flex-direction: row-reverse;
	align-items: stretch;
	gap: var(--space-lg);
	min-height: 17.25rem;                   /* 276px (from Figma) */
}

.dh-section .dh-card--feature .dh-card__media {
	flex: 0 0 45%;
	aspect-ratio: auto;
	margin: 0;
}

.dh-section .dh-card--feature .dh-card__label { margin-bottom: auto; }
.dh-section .dh-card--feature .dh-card__title { max-width: 10em; }
.dh-section .dh-card--feature .dh-card__footer { margin-top: 0; padding-top: 0; }

/* Featured — the newest item, large: image left, copy right (News hero) */
.dh-section .dh-card--featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);  /* 589 : 543 (from Figma) */
	gap: var(--space-xl);
	padding: var(--space-card) var(--space-xl) var(--space-card) var(--space-card);
}

.dh-section .dh-card--featured .dh-card__media {
	aspect-ratio: 589 / 389;
	margin: 0;
}

.dh-section .dh-card--featured .dh-card__body {
	justify-content: center;
	gap: var(--space-sm);
}

.dh-section .dh-card--featured .dh-card__meta {
	order: -3;
	margin-bottom: auto;
	font-size: var(--fs-body);
}

.dh-section .dh-card--featured .dh-card__title {
	margin-top: var(--space-lg);
	font-size: var(--fs-feature-title);
	line-height: 1.2;                       /* 48 / 40 */
}

.dh-section .dh-card--featured .dh-card__footer { margin-top: var(--space-xs); margin-bottom: auto; }

/* Images that must not crop (logos inside a photo slot) */
.dh-section .dh-card--contain .dh-card__media { background: var(--clr-white); }
.dh-section .dh-card--contain .dh-card__media img {
	box-sizing: border-box;
	padding: 12%;
	object-fit: contain;
}

/* Tiny images (an 80px icon scraped as a "featured image"): natural size, never blown up */
.dh-section .dh-card--tiny .dh-card__media img { object-fit: scale-down; }

/* Wide banners with their text baked in (theme_card(), wider than 2.2:1):
   the whole banner, over a blurred copy of itself so there are no flat bands */
.dh-section .dh-card--letterbox .dh-card__media { isolation: isolate; }

.dh-section .dh-card--letterbox .dh-card__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12%;
	background: var(--card-fill) center / cover no-repeat;
	filter: blur(22px) saturate(1.1);
}

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

/* Logo tile */
.dh-section .dh-card--logo {
	justify-content: center;
	min-height: 7.25rem;                    /* 116px (from Figma) */
	padding: var(--space-md);
	background: var(--clr-white);
}

.dh-section .dh-card--logo .dh-card__media {
	aspect-ratio: 5 / 2;
	margin: 0;
	border-radius: 0;
	background: none;
}

/* The tile's padding is the only margin — drop the 12% inset .dh-card--contain adds for photo slots */
.dh-section .dh-card--logo .dh-card__media img {
	padding: 0;
	object-fit: contain;
}
.dh-section .dh-card--logo .dh-card__body { display: none; }

/* Logo without an image: the name stands in */
.dh-section .dh-card--logo.dh-card--no-media .dh-card__body {
	display: flex;
	justify-content: center;
	text-align: center;
}

.dh-section .dh-card--logo.dh-card--no-media .dh-card__title { font-size: var(--fs-point-title); }

/* List row — title left, date right, rule under */
.dh-section .dh-card--list {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--clr-border);
	border-radius: 0;
	background: none;
}

.dh-section .dh-card--list .dh-card__body {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-lg);
}

.dh-section .dh-card--list .dh-card__title {
	max-width: 32em;
	line-height: 1.21;                      /* 34 / 28 */
	text-wrap: pretty;
}

.dh-section .dh-card--list .dh-card__meta {
	order: 2;
	flex: none;
	text-align: right;
}

.dh-section .dh-card--list .dh-card__excerpt,
.dh-section .dh-card--list .dh-card__footer,
.dh-section .dh-card--list .dh-card__label { display: none; }

.dh-section a.dh-card--list:hover { box-shadow: none; transform: none; }
.dh-section a.dh-card--list:hover .dh-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

.dh-section--bg-dark .dh-card:not(.dh-card--list):not(.dh-card--article) { color: var(--clr-body); }


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

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


/*
 * Shared: responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */
@media (max-width: 900px) {
	.dh-section .dh-card--featured { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-card); }
	.dh-section .dh-card--featured .dh-card__title { margin-top: 0; }
}

@media (max-width: 781px) {
	.dh-section .dh-card--feature { flex-direction: column-reverse; min-height: 0; }
	.dh-section .dh-card--feature .dh-card__media { flex: none; aspect-ratio: 16 / 10; }
	.dh-section .dh-card--feature .dh-card__label { margin-bottom: var(--space-sm); }

	.dh-section .dh-card--list,
	.dh-section .dh-card--list .dh-card__body { flex-direction: column; gap: var(--space-2xs); }
	.dh-section .dh-card--list .dh-card__meta { order: -1; text-align: left; }

	.dh-section .dh-actions .dh-btn { flex: 1 1 auto; }
}