/* ==========================================================================
   Divi overrides

   The ported design is full-bleed: sections run edge to edge, and .k-shell
   provides the inner rail at max-width 1280px. Divi wraps page content in
   .container and .et_pb_row, both of which are width: 80% with their own
   max-width, so without this the design renders inside 80% of the page —
   measured at 819px against the reference site's 1024px, inset 102px a side.

   Loaded after main.css, which stays a verbatim copy of site/. Divi-specific
   fixes belong here so that copy never has to diverge.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Why !important

   Divi compiles every builder setting into inline CSS with !important —
   e.g. `.et_pb_row_0_tb_header { max-width: 1200px !important }` for a row's
   width. No amount of specificity beats that from a stylesheet, so the
   overrides below have to match it. This is the one file where that is the
   correct tool rather than a smell: its entire job is to defeat generated
   declarations we do not control.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Full-bleed sections

   Any Divi row or section containing one of our own sections gives up its
   width constraint and padding. :has() is doing the work, so nothing has to
   be remembered or typed in the builder for each of the fourteen sections.
   -------------------------------------------------------------------------- */

.et_pb_row:has(> .et_pb_column > .et_pb_module [class^="k-"]),
.et_pb_row:has(> .et_pb_column > .et_pb_module > [class^="k-"]),
.et_pb_section:has(.et_pb_module [class^="k-"]) {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The row's own vertical rhythm fights the sections', which carry their own. */
.et_pb_row:has(> .et_pb_column > .et_pb_module [class^="k-"]) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Columns inside a full-bleed row must not re-introduce a gutter. */
.et_pb_row:has(> .et_pb_column > .et_pb_module [class^="k-"]) > .et_pb_column {
	width: 100% !important;
	margin-right: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* --------------------------------------------------------------------------
   Default page template

   Pages not built with the builder put content inside .container, which is
   also 80%. Only neutralised where one of our sections is actually present,
   so ordinary Divi pages are untouched.
   -------------------------------------------------------------------------- */

.container:has(.entry-content [class^="k-"]) {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Theme Builder header

   The header layout is one Code module holding [kunye_header]. Divi's section
   and row chrome around it has to disappear entirely, or the sticky header
   sits inside a padded box and the scroll state looks wrong.
   -------------------------------------------------------------------------- */

.et_pb_section:has(.k-header),
.et_pb_row:has(.k-header) {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.et_pb_row:has(.k-header) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Lists inside Theme Builder layouts

   Divi injects this inline, after our stylesheet:

       #left-area ul, .entry-content ul, .et-l--body ul, .et-l--header ul
         { list-style-type: disc }

   `.et-l--header ul` (0,1,1) outranks our `ul { list-style: none }` (0,0,1),
   so every list inside a header or footer layout gets disc markers back.
   The same rule also sets `padding-bottom: 23px`. On the reference .k-nav has
   no padding at all, so that 23px makes the list box 63px tall instead of 39px
   — and because the box is what gets vertically centred, the visible links sit
   about 12px above the logo and the CTA. Measured: links at mid 35, logo and
   CTA at 47.

   Hence the whole padding shorthand is zeroed, not just padding-left. The
   selector also covers .et-l--footer, so footer lists need the same.
   -------------------------------------------------------------------------- */

.et-l ul[class^="k-"],
.et-l ul[class*=" k-"],
.et-l [class^="k-"] ul,
.et-l [class*=" k-"] ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.et-l ul[class^="k-"] > li,
.et-l ul[class*=" k-"] > li,
.et-l [class^="k-"] ul > li,
.et-l [class*=" k-"] ul > li {
	list-style: none !important;
}

.et-l ul[class^="k-"] > li::marker,
.et-l ul[class*=" k-"] > li::marker,
.et-l [class^="k-"] ul > li::marker,
.et-l [class*=" k-"] ul > li::marker {
	content: none !important;
}

/* --------------------------------------------------------------------------
   Divi's page title

   A page rendered from our sections carries its own h1 in the hero, so Divi's
   h1.entry-title.main_title above it is both duplicate content and a visible
   stray ("Home V1" sitting above the hero).

   Divi's own "show title" page setting does not apply once a page is no longer
   builder-built, so this is handled in CSS instead. Scoped to pages that
   actually render our sections, and to .main_title specifically, so ordinary
   Divi pages and blog post titles are untouched.
   -------------------------------------------------------------------------- */

body:has(section[class^="k-"]) .entry-title.main_title,
body:has(section[class*=" k-"]) .entry-title.main_title {
	display: none !important;
}

/* ==========================================================================
   Typography

   Divi's Customizer typography compiles to et-divi-customizer-tb-*.css, which
   loads AFTER this file. At equal specificity source order decides, so Divi
   wins and the design's type is silently replaced:

       body            { font-size: 15px }    design: ~17px
       body            { line-height: 1.6 }   design: 1.65
       h1 … h6         { line-height: 1.6em } design: 1.1 / 1.06 / 1.2 / 1.3
       h2              { font-size: 30px }    design: up to 3.6rem

   Measured at 1440px, body size, h1 and h3 all matched once line-height was
   restored — only h2 was still wrong, at 30px against the design's 57.6px,
   which made every section heading about half size. Font sizes are restored
   alongside the line-heights so the whole scale is held, not just the part
   that happened to be visibly broken.

   The heading rule is the damaging one — it adds about 27px per headline line,
   which is why the hero ran 108px taller than the reference and the workflow
   section 177px taller.

   Restored here with !important, since specificity alone cannot beat a later
   stylesheet. Scoped to pages that actually render our sections, so Features,
   the Knowledge Base and the blog keep Divi's own typography.

   The long-term fix is setting these correctly in Divi > Theme Options >
   General > Typography, which would remove the need for this block — but that
   changes every page, so it is a decision rather than a tidy-up.
   ========================================================================== */

body:has(section[class^="k-"]),
body:has(section[class*=" k-"]),
body:has(.k-band),
body:has(.k-cta) {
	font-size: var(--k-t-body) !important;
	line-height: 1.65 !important;
}

/* Headings only inside our own markup — Divi modules on the same page keep
   whatever the builder set for them. */
[class^="k-"] h1, [class*=" k-"] h1 { line-height: 1.1 !important; }
[class^="k-"] h2, [class*=" k-"] h2 { line-height: 1.06 !important; }
[class^="k-"] h3, [class*=" k-"] h3 { line-height: 1.2 !important; }
[class^="k-"] h4, [class*=" k-"] h4 { line-height: 1.3 !important; }

/* Only h2's SIZE is wrong — Divi sets 30px against the design's 57.6px at
   1440px. h1 and h3 already matched once line-height was restored.
 *
 * Deliberately NOT applied as [class^="k-"] h2. The design gives several
 * headings their own size — .k-hero h1 uses --k-t-display, and
 * .k-featgroup__head h2, .k-tile--route h2 and .k-footer__col h2 each set
 * their own — and an !important on the generic selector flattens all of them.
 * Forcing h1 that way is what made the hero render 64px instead of 54.4px.
 *
 * Scoped to the plain section heading, which is the only place that relies on
 * the generic h2 rule. */
.k-section h2,
.k-band h2 {
	font-size: var(--k-t-h2) !important;
}

/* The hero's masked headline lines inherit from h1 and must not be clipped. */
[class^="k-"] .k-mask > span,
[class*=" k-"] .k-mask > span {
	line-height: inherit !important;
}


/* Home hero: the eyebrow is a flex row, so text-align alone leaves it left-aligned. Centre it with the rest of the hero copy. */
.k-hero__copy .k-eyebrow {
	justify-content: center;
}

/* FAQ accordion: breathing room below answers (Divi zeroes last-paragraph padding). */
body .k-acc__body p,
body .k-acc__body p:last-of-type{padding-bottom:1.75rem!important;}

/* News cards: category label as a coloured slash marker, e.g. "/ Compliance"
   (colour set per category in Posts > Categories; label text comes from
   kunye_cat_color_css()). */
body .k-news-blog article[class*="category-"]:not(.category-blog):not(.category-uncategorized) .post-meta::before{
	display:inline-flex;align-items:center;align-self:center;
	padding:0 0 0 1.1em;border-radius:0;
	background:linear-gradient(112deg,transparent 42%,var(--k-cat,#0d1d41) 42% 58%,transparent 58%) left center/.55em 1.15em no-repeat;
	color:var(--k-cat,#0d1d41);
	font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.3;
	white-space:nowrap;
}
