/* ==========================================================================
   Digital Allo — global heading system
   Loaded last, after every other stylesheet.

   Before this file the site carried a different heading scale on almost every
   template: H1 between 56px and 62px, four different H2 sizes on a single page
   (38 / 42 / 48 / 52) and five different in-box heading sizes (15 / 17 / 18 /
   28 / 32). This is the single source of truth for heading size, weight and
   colour across every page.

   !important is used deliberately here. Several older layers (style.css,
   brand-colors.css, reference-theme.css) declare heading colour and size with
   !important already; a normalisation layer has to sit above them. Everything
   is scoped to `body main` so the header, footer and mega-menu are untouched.
   ========================================================================== */

:root {
	/* Section heading. Fluid so it holds its presence on a wide screen and still
	   fits a phone. Change this one value to re-scale every section heading on
	   every page. */
	--da-h-section: clamp(27px, 3.1vw, 40px);

	/* Page title. One step above the section heading so each page keeps a clear
	   entry point. */
	--da-h-page: clamp(34px, 4.4vw, 54px);

	/* Heading inside a card, panel or accordion row. Must stay below the
	   section size or the hierarchy inverts inside boxes. */
	--da-h-box: clamp(18px, 1.5vw, 20px);

	--da-h-ink: var(--da-brand-ink, #101a3b);
	--da-h-onDark: #ffffff;
}

/* ------------------------------------------------------- global type family */

/*
   The site's typeface is POPPINS, enqueued in functions.php from Google Fonts
   (weights 400–900). It is the only webfont loaded.

   An imported third-party Elementor template kit — "DigiMax" (elementor_library
   post 10, "Kit Styles: DigiMax") — is still active, and its typography slots
   are a mix: four global slots on Poppins, eight custom slots on Outfit, three
   on Inter. Outfit is not enqueued, so anything left on it would fall through
   to the browser's default sans and render in a visibly different face.

   Elementor emits all of its typography through these custom properties, so
   pinning every slot to Poppins here retypes every generated kit rule at once
   — headings, buttons and body copy — rather than chasing each generated
   selector and fighting its specificity. Only the family is set; the kit's
   sizes, weights and letter-spacing are left exactly as they were.

   This block is deliberately unscoped (not `body main` like the rest of this
   file) because the kit also styles the header and mega-menu.
*/
:root,
body,
body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "Poppins";
	--e-global-typography-secondary-font-family: "Poppins";
	--e-global-typography-text-font-family: "Poppins";
	--e-global-typography-accent-font-family: "Poppins";

	/* DigiMax custom slots that specified Outfit (never enqueued). */
	--e-global-typography-520c191-font-family: "Poppins";
	--e-global-typography-583e54c-font-family: "Poppins";
	--e-global-typography-5d167aa-font-family: "Poppins";
	--e-global-typography-d3dae9a-font-family: "Poppins";
	--e-global-typography-83682a1-font-family: "Poppins";
	--e-global-typography-7044a64-font-family: "Poppins";
	--e-global-typography-84ca66e-font-family: "Poppins";
	--e-global-typography-a435f28-font-family: "Poppins";
}

/*
   Elementor's per-page generated CSS (post-2160.css, post-109.css, …) also
   hard-codes a family on individual widgets, bypassing the kit variables above.
   This pins those widgets to the theme stack so every page matches, and keeps
   the Arial fallback the rest of the site uses if Poppins fails to load.

   Deliberately limited to text elements. `i`, `span` and `svg` are excluded
   because Elementor renders icons as icon-font glyphs on those tags, and
   forcing a text family onto them would turn every icon into a stray letter.
*/
body .elementor-element :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, figcaption),
body .elementor-element > a,
body .elementor-widget-heading .elementor-heading-title {
	font-family: Poppins, Arial, sans-serif !important;
}

/* ------------------------------------------------------------ base scale */

body[class] main h1 {
	font-size: var(--da-h-page) !important;
	line-height: 1.1 !important;
	letter-spacing: -.04em !important;
	font-weight: 800 !important;
}

body[class] main h2 {
	font-size: var(--da-h-section) !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	font-weight: 800 !important;
}

body[class] main h3 {
	font-size: var(--da-h-box) !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	font-weight: 800 !important;
}

body[class] main :is(h4, h5, h6) {
	font-size: 16px !important;
	line-height: 1.4 !important;
	font-weight: 800 !important;
}

/* --------------------------------------------------- headings inside boxes

   A card is a small container: its heading has to read as a label, not as a
   section title. Any heading level used inside one is pinned to the box size,
   so a card that happens to use <h2> matches a card that uses <h3>. */

body main :is(
	.dis-card, .dis-faq__item, .dis-related__card,
	.dal-div, .dal-why__card, .dal-industry, .dal-step, .dal-review, .dal-nearby__card,
	.da-about-benefit, .da-division, .da-showcase-card, .da-testimonial,
	.dis-server-hub__card, .dis-proof-growth__card,
	/* Intro notes keep their authored heading level; only the size steps
	   down, so the lead statement stays the entry point of the band. */
	.dis-intro__note
) :is(h1, h2, h3, h4, .dis-card__title) {
	font-size: var(--da-h-box) !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	margin-block: 0 10px !important;
}

/* The FAQ question is a button, not a heading element, but reads as one. */
body main .dis-faq__q,
body main .dal-faq__q {
	font-size: var(--da-h-box) !important;
	line-height: 1.4 !important;
}

/* ------------------------------------------------------------------ colour

   One heading colour per surface: brand ink on light, white on dark. This
   replaces the mix of near-black, warm brown and pale blue left by earlier
   theme layers. */

body[class] main :is(h1, h2, h3, h4) { color: var(--da-h-ink) !important; }

body main :is(
	.dis-hero, .dal-hero, .dis-cta, .dal-cta, .dis-band--dark,
	.da-hero, .da-service-areas-band, .da-process-section, .da-global-presence,
	.da-about-rebuild-hero, .da-about-rebuild-team__panel, .da-about-rebuild-cta,
	.da-showcase-card, .dis-server-hub, .da-industries-section,
	/* Marketing family: both of these render on a dark gradient. Missing them
	   painted the hero H1 navy-on-navy at 1.02:1 — invisible. */
	.dm-service-hero, .dm-service-final-cta,
	/* Location template: the process rail is a dark navy band, so its step
	   headings were rendering navy-on-navy at 1.05:1. */
	.dal-process, .dal-stats--dark, .dis-band--dark,
	/* Technology partners: dark band with a saturated gradient heading panel.
	   Its own white heading rule ties this one on specificity and loses on
	   order, so the title was rendering navy-on-purple at 1.75:1. */
	.da-tech-partners, .da-tech-partners-heading,
	/* Found by measuring which containers actually paint a dark surface
	   and still carried dark headings, rather than by guessing. */
	.dis-band--managed, .dis-proof-growth__support,
	.da-page-hero, .da-about-hero,
	/* Bespoke dark panels: the CTA card and the contact layout both paint a
	   dark gradient of their own. */
	.dis-cards--cta-grid .dis-card, .dm-contact-layout
) :is(h1, h2, h3, h4) {
	color: var(--da-h-onDark) !important;
}

/* The IT-service related rail is intentionally dark. Marketing uses the
   same component name on a soft surface, so keep the dark heading treatment
   tied to the one family that actually paints the dark background. */
body.da-it-service-page main .dis-related :is(h1, h2, h3, h4) {
	color: var(--da-h-onDark) !important;
}

/* ------------------------------------------------- logo-colour accent rule

   A short gradient rule in the brand blue → indigo → magenta of the logo,
   under section headings that introduce a band. Applied as a pseudo-element
   rather than gradient text: gradient-filled text was the source of several
   contrast failures elsewhere on this site, and a rule is legible on both
   light and dark surfaces. */

body main :is(.da-section-head, .dis-band__head, .dal-section-head) > h2 {
	position: relative;
	padding-bottom: 14px !important;
}
body main :is(.da-section-head, .dis-band__head, .dal-section-head) > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(110deg, var(--da-brand-blue, #1677e8), var(--da-brand-indigo, #5146c7) 58%, var(--da-brand-magenta, #d633a6));
}
/* Centred section heads keep the rule centred under the text. */
body main :is(.da-section-head, .dis-band__head--center) {
	--da-h-rule-offset: 50%;
}
body main :is(.da-section-head, .dis-band__head--center) > h2::after {
	left: 50%;
	transform: translateX(-50%);
}

/* A heading inside a card never takes the rule — too much furniture at that
   size, and it would collide with the card's own accent. */
body main .dis-card > :is(h2, h3)::after,
body main .da-about-benefit > :is(h2, h3)::after { content: none !important; }

/* ------------------------------------------------------------- responsive

   The scale is already small enough to hold at every breakpoint; only the page
   title needs to come down so a long title does not dominate a phone screen. */

@media (max-width: 640px) {
	body[class] main h2 { line-height: 1.32 !important; }
}

/* ------------------------------------------- shared service-catalogue

   The catalogue sets its own heading sizes with higher specificity than the
   base scale above (52px section heading, 15px card titles). It appears on the
   homepage, the Service Areas pages and the IT pages, so leaving it out would
   mean the same component reading differently from everything around it. */

body main .da-services-showcase .da-section-head > h2 {
	font-size: var(--da-h-section) !important;
	line-height: 1.3 !important;
}
body main .da-showcase-card .da-showcase-card__content :is(h2, h3) {
	font-size: var(--da-h-box) !important;
	line-height: 1.35 !important;
}

/* Section heads sitting at two-class specificity in older layers
   (e.g. .da-about-rebuild-benefits .da-section-head h2 at 46px, the reviews
   head at 54px). Matched here at the same weight plus an extra element so the
   single scale holds on every template. */
body[class] main :is(.da-section-head, .dis-band__head, .dal-section-head)[class] > :is(h1, h2, h3) {
	font-size: var(--da-h-section) !important;
	line-height: 1.3 !important;
}
body[class] main :is(.da-section-head, .dis-band__head) > h3 {
	font-size: var(--da-h-box) !important;
}

/* Call-to-action strip. The whole band is one row — heading on the left, button
   on the right — so a full section heading overpowers it. This is the one
   deliberate step between the section and box sizes. */
body[class] main .dis-band--strip .dis-band__head[class] > :is(h1, h2, h3) {
	font-size: clamp(22px, 2.2vw, 28px) !important;
	line-height: 1.25 !important;
	padding-bottom: 0 !important;
}