/*
 * Type scale — one font and one set of sizes across the site.
 *
 * Covers the homepage hero slider (.kpc-hero), the Who We Are /
 * Sustainability / Investor Relations / Newsroom / E-procurement banners
 * (.ks-hero), the standard page banner (.kpc-page-hero: pages, posts,
 * archives, search, careers, contact, tenders, team and profile pages)
 * and the Investor Relations dashboard banner (.kpc-irh).
 *
 * Loaded last on every front-end page, so it wins over the per-banner
 * sizes in style.css / sustainability.css. Change a size once here, in
 * the custom properties below, and every banner follows.
 */

:root {
	/* ===== The site's type scale — every font size in the theme's
	   stylesheets uses one of these steps (or the heading/banner sizes
	   below). Change a step here and the whole site follows. ===== */
	--fs-2xs: 11px;   /* tiny labels, badges, legal small print   */
	--fs-xs: 13px;    /* meta, captions, breadcrumbs, eyebrows     */
	--fs-sm: 14px;    /* buttons, menus, form fields, card meta    */
	--fs-base: 16px;  /* all body text: paragraphs, lists, cards   */
	--fs-lg: 18px;    /* intros / ledes, card titles               */
	--fs-xl: 22px;    /* block and card headings                   */
	--fs-2xl: 28px;   /* sub-section headings                      */
	--fs-3xl: 36px;   /* large display text                        */
	--fs-stat: 32px;  /* statistics and figures                    */

	/* Older IR dashboard serif setting — the whole site uses Inter. */
	--kpc-irb-serif: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-eyebrow: var(--fs-xs);
	--fs-body: var(--fs-base);
	--fs-body-sm: var(--fs-sm);
	--fs-card-title: var(--fs-lg);
	--fs-section: var(--kpc-heading-size);
	--fs-hero: var(--kpc-banner-title-size);

	--kpc-banner-font: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Small label above the title */
	--kpc-banner-eyebrow-size: var(--fs-xs);
	--kpc-banner-eyebrow-weight: 700;
	--kpc-banner-eyebrow-tracking: 0.12em;

	/* Title */
	--kpc-banner-title-size: clamp(2.1rem, 3.4vw, 3.4rem);
	--kpc-banner-title-weight: 800;
	--kpc-banner-title-lh: 1.1;
	--kpc-banner-title-tracking: -0.02em;

	/* Intro paragraph */
	--kpc-banner-lede-size: var(--fs-lg);
	--kpc-banner-lede-lh: 1.7;
	--kpc-banner-lede-weight: 400;

	/* Breadcrumbs */
	--kpc-banner-crumb-size: var(--fs-xs);
	--kpc-banner-crumb-weight: 600;

	/* Buttons */
	--kpc-banner-btn-size: var(--fs-sm);
	--kpc-banner-btn-weight: 700;
}

@media (max-width: 991px) {
	:root {
		--kpc-banner-title-size: clamp(1.9rem, 5vw, 2.6rem);
		--kpc-banner-lede-size: var(--fs-base);
		--kpc-banner-lede-lh: 1.6;
	}
}

@media (max-width: 575px) {
	:root {
		--kpc-banner-eyebrow-size: var(--fs-2xs);
		--kpc-banner-eyebrow-tracking: 0.08em;
		--kpc-banner-title-size: clamp(1.6rem, 7.4vw, 2.1rem);
		--kpc-banner-lede-lh: 1.55;
	}
}

/* ---------- Font family: the same everywhere in a banner ---------- */
html body :is(.kpc-hero, .ks-hero, .kpc-page-hero, .kpc-irh),
html body :is(.kpc-hero, .ks-hero, .kpc-page-hero, .kpc-irh) :is(h1, h2, p, span, a, nav, button, .section-eyebrow) {
	font-family: var(--kpc-banner-font);
}

/* ---------- Eyebrow ---------- */
html body .kpc-hero .section-eyebrow,
html body .kpc-irh .kpc-irh-eyebrow,
html body .ks-hero .section-eyebrow,
html body .kpc-page-hero .section-eyebrow {
	font-size: var(--kpc-banner-eyebrow-size);
	font-weight: var(--kpc-banner-eyebrow-weight);
	letter-spacing: var(--kpc-banner-eyebrow-tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------- Title ---------- */
html body .kpc-hero .kpc-hero-title,
html body .ks-hero h1,
html body .kpc-page-hero h1,
html body .kpc-irh .kpc-irh-title,
html body .kpc-ir-page .kpc-ir-hero-title,
html body .kpc-ir-hero-title {
	font-family: var(--kpc-banner-font);
	font-size: var(--kpc-banner-title-size);
	font-weight: var(--kpc-banner-title-weight);
	line-height: var(--kpc-banner-title-lh);
	letter-spacing: var(--kpc-banner-title-tracking);
}

/* ---------- Intro paragraph ---------- */
html body .kpc-hero .kpc-hero-description,
html body .ks-hero .ks-lede,
html body .kpc-page-hero > .container > p,
html body .kpc-page-hero .kpc-page-hero-lede,
html body .kpc-irh .kpc-irh-lede {
	font-size: var(--kpc-banner-lede-size);
	font-weight: var(--kpc-banner-lede-weight);
	line-height: var(--kpc-banner-lede-lh);
	letter-spacing: 0;
}

/* ---------- Breadcrumbs ---------- */
html body .ks-hero .ks-crumbs,
html body .kpc-page-hero .kpc-breadcrumbs {
	font-size: var(--kpc-banner-crumb-size);
	font-weight: var(--kpc-banner-crumb-weight);
	letter-spacing: 0;
}

/* ---------- Buttons ---------- */
html body .kpc-hero .kpc-hero-actions .btn-kpc,
html body .ks-hero .ks-actions .ks-btn,
html body .kpc-irh .kpc-irh-cta .btn-kpc,
html body .kpc-page-hero .btn-kpc {
	font-size: var(--kpc-banner-btn-size);
	font-weight: var(--kpc-banner-btn-weight);
	letter-spacing: 0;
}

/* ---------- Homepage hero: room for the shared type scale on phones ----------
 * The slider used to shrink its text to ~11–12px on phones to fit a
 * half-screen banner. With the same sizes as every other banner it needs
 * a little more height, so the buttons stay clear of the progress bars. */
@media (max-width: 767px) {
	html body .kpc-hero { min-height: 540px; }
}
@media (max-width: 575px) {
	html body .kpc-hero { min-height: 560px; }
}


/* =====================================================================
 * Page text — one size for body copy and one for section headings
 * =====================================================================
 * Intro and body paragraphs (and bullet lists) in every section read at
 * the same size: homepage At a Glance, Discover and Sustainability text,
 * Who We Are sections, Sustainability / Investor Relations panels, and
 * ordinary page and post content. Cards, captions, stats and side boxes
 * keep their own smaller sizes. */

:root {
	--kpc-text-size: var(--fs-base);
	--kpc-text-lh: 1.75;
	--kpc-heading-size: clamp(1.9rem, 2.9vw, 2.75rem);
	--kpc-heading-lh: 1.15;
	--kpc-subheading-size: var(--fs-xl);
}
@media (max-width: 767px) {
	:root {
		--kpc-text-lh: 1.7;
		--kpc-heading-size: clamp(1.6rem, 6.4vw, 2.1rem);
		--kpc-subheading-size: var(--fs-lg);
	}
}

/* ---------- Body paragraphs and lists ---------- */
html body .kpc-glance-split-text p,
html body .kpc-discover-head .kpc-discover-text,
html body .kpc-sustain-head-text p,
html body .kw-sec .kw-sub,
html body .kw-prose p,
html body .kw-prose li,
html body .kw-mission p,
html body .ks-main .ks-prose p,
html body .ks-main .ks-prose li,
html body .kw-page-content p,
html body .kw-page-content li,
html body .kir-page-content p,
html body .kir-page-content li,
html body .kpc-entry-content > p,
html body .kpc-entry-content > ul > li,
html body .kpc-entry-content > ol > li,
html body .elementor-widget-text-editor p,
html body .elementor-widget-text-editor li {
	font-size: var(--kpc-text-size);
	line-height: var(--kpc-text-lh);
	font-family: var(--kpc-banner-font);
}

/* ---------- Section headings ---------- */
html body .kpc-glance-split-title,
html body .kpc-sustain-head h2,
html body .kpc-news-head h2,
html body .kpc-documents-head h2,
html body .kw-head .kw-title,
html body .kpc-entry-content > h2,
html body .kw-page-content h2,
html body .kir-page-content h2 {
	font-size: var(--kpc-heading-size);
	line-height: var(--kpc-heading-lh);
	font-family: var(--kpc-banner-font);
}

/* ---------- Block headings inside the content columns ---------- */
html body .ks-main .ks-text.is-lead .ks-h,
html body .ks-main .ks-block > .ks-h,
html body .kw-mvv-title,
html body .kw-values h3,
html body .kpc-entry-content > h3,
html body .kw-page-content h3,
html body .kir-page-content h3 {
	font-size: var(--kpc-subheading-size);
	line-height: 1.3;
	font-family: var(--kpc-banner-font);
}


/* =====================================================================
 * Banners — same text width everywhere, no broken words, breadcrumbs
 * ===================================================================== */

/* No words split with a hyphen at line ends (site-wide). */
html body,
html body * {
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
}

/* One text width for every banner: the homepage slider used to wrap at
   720–850px while inner-page banners ran across the whole container. */
:root {
	--kpc-banner-title-max: 1080px;
	--kpc-banner-lede-max: 860px;
}
html body .kpc-hero .kpc-hero-text { max-width: var(--kpc-banner-title-max); }
html body .kpc-hero .kpc-hero-title,
html body .ks-hero h1,
html body .kpc-page-hero h1 { max-width: var(--kpc-banner-title-max); }
html body .kpc-hero .kpc-hero-description,
html body .ks-hero .ks-lede,
html body .kpc-page-hero > .container > p { max-width: var(--kpc-banner-lede-max); }

/* Breadcrumbs under the banner text (Appearance > Customize > Inner Page
   Hero Images > Breadcrumbs in page banners). The banner then reads the
   same as the homepage slider: title, intro, buttons — and the trail sits
   underneath, set off by a thin rule. */
body.kpc-crumbs-below .ks-hero .ks-hero-text,
body.kpc-crumbs-below .kpc-page-hero > .container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
body.kpc-crumbs-below .ks-hero .ks-hero-text > *,
body.kpc-crumbs-below .kpc-page-hero > .container > * { order: 1; }
body.kpc-crumbs-below .ks-hero .ks-crumbs,
body.kpc-crumbs-below .kpc-page-hero .kpc-breadcrumbs {
	order: 2;
	align-self: stretch;
	margin: 28px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}
body.kpc-crumbs-below .kpc-page-hero > .container > h1:first-of-type { margin-top: 0; }

/* Inner page banners without buttons (Customizer default): keep the
   space under the intro even, and hide buttons an older saved
   Elementor layout may still print. */
html body:not(.kpc-banner-buttons) .ks-hero .ks-actions { display: none; }
html body:not(.kpc-banner-lede) .ks-hero .ks-lede { display: none; }

/* Who We Are overview: heading at the top of the left column, so the
   "Our strategic focus" panel starts level with the title. */
html body .kw-overview .kw-ov-main { min-width: 0; }
html body .kw-overview .kw-ov-main > .kw-head { margin-bottom: 24px; }