/* ==========================================================================
   BRAND TOKENS — colours and type for this site
   ==========================================================================
   Native CSS custom properties, so every other stylesheet can use them with
   no @import. They are resolved by the browser at runtime, which means load
   order does not matter — any stylesheet may reference these even if it is
   served before this one.

   Requirement: this stylesheet must be present in the layout, since it is
   the only place these are defined.
   ========================================================================== */
:root {
  /* Standard colours — rarely changed */
  --black: #000;
  --white: #fff;

  /* Brand colours — change these per site */
  --text: var(--black);
  --prime: #001078;
  --second: #E02200;

  /* Page background. Wired to #container in website_structure.css, so
     changing it here changes the page. White by default; a soft grey such
     as #F1F1F1 is the usual alternative. */
  --background: var(--white);

  /* Borders and rules. A COLOUR, not a shorthand, so each component picks
     its own width and style — 1px solid for form fields, 2px for a table
     header, and so on. Do not put "1px solid" in here: the usage sites
     already supply it, and doing so invalidates every border that reads it. */
  --stroke: #333;

  /* OPTIONAL — uncomment if the brand has a third colour.
     Nothing reads it by default, so it costs nothing to leave commented.
     --third: #000A46; */

  /* Derived shades. These were SCSS lighten() calls, which cannot operate on
     custom properties — so the exact resulting values are named here instead.
     (color-mix() could re-derive them at runtime if you ever want that.) */
  --grey-dark: #404040;    /* was lighten($black, 25%) */
  --grey-light: #ededed;   /* was lighten($black, 93)  */
  --prime-light: #001ede;  /* was lighten($prime, 20%) */

  /* Display heading gradient */
  --heading-gradient-from: #032A42;
  --heading-gradient-to: #2C647A;

  /* Hero band gradient — the dark brand wash behind hero copy. Change per site. */
  --grad-hero: linear-gradient(120deg, var(--prime-light) 0%, var(--prime) 55%, #000a46 100%);

  /* Role tokens — what the components read (cards, CTA bands, steps, def
     lists, legal pages, the style guide). They derive from the brand colours
     above; a site re-points a ROLE here, never edits a component. */
  --accent: var(--second);            /* highlight fills: accent cards, CTA statement, step slash */
  --heading: var(--prime);            /* heading colour on light surfaces */
  --text-body: var(--text);           /* running copy */
  --text-muted: var(--grey-dark);     /* notes, captions */
  --text-on-dark: var(--white);
  --text-on-dark-dim: rgb(255 255 255 / 0.78);
  --prime-deep: #000a46;              /* the darkest surface: dark cards, footer */
  --surface-soft: var(--grey-light);  /* soft bands and cards */
  --grad-cta: var(--grad-hero);       /* the closing CTA band */
  --accent-deep: color-mix(in srgb, var(--accent) 80%, black);   /* pull quotes, numerals, the deep eyebrow */
  --text-strong: var(--text);         /* near-black labels: chart axes, timeline titles */
  --placeholder: #9AA5B3;             /* quiet grey labels (num-label, chart greys) */
  --hairline: color-mix(in srgb, var(--prime) 24%, transparent);   /* thin framing rules */
  --hairline-on-dark: rgb(255 255 255 / 0.18);
  --blob-a: color-mix(in srgb, var(--prime) 35%, white);    /* soft decor washes (hero, decor.css) */
  --blob-b: color-mix(in srgb, var(--accent) 30%, white);

  /* Type — change these per site */
  --type-body: ibm-plex-sans, sans-serif;
  --type-display: begum, sans-serif;
}

body {
    font-size: clamp(0.9rem, 1.5vw, 1.13rem);
    font-family: var(--type-body);
    color: var(--black);
    font-weight: 400; 
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    min-height: 100vh;
    width: 100%;
    /* No overflow-x here: website_structure.css already clips on html, and
       `hidden` on body forces the other axis to `auto`, which makes body a
       scroll container and breaks position: sticky inside it. */
}

h1 {
    background: linear-gradient(to left, var(--heading-gradient-from) 0%, var(--heading-gradient-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

h1, h2, h3, h4 {
    font-weight: 800;
    color: var(--prime);
}

h1, h2 {
    line-height: 1.125;
    font-family: var(--type-display);
}

h1 {
    font-size: clamp(3em, 4vw, 4em);
    margin-bottom: 0.55em;
}



h1.small {
    font-size: clamp(2.5em, 4.25vw, 4.25em);
}

h2 {
    margin-bottom: 0.65em;
    font-size: clamp(2em, 3.25vw, 3.25em);
}

.small h2 {
    font-size: clamp(1.25em, 1.4vw, 1.65em);
}

h3 {
    margin: 0 0 0.65em;
    font-size: clamp(1.25em, 1.5vw, 1.5em);
}

/* The scale used to stop at h3, so h4 inherited a colour and weight but no
   size or spacing, and h5/h6 got nothing at all — both rendered smaller than
   body copy with browser defaults. */
h4 {
    margin: 0 0 0.65em;
    font-size: 1.125em;
}

h5,
h6 {
    margin: 0 0 0.5em;
    font-size: 1em;
    font-weight: 700;
    color: var(--prime);
}

a {
    border-bottom: 1px solid var(--prime);
    text-decoration: none;
    color: var(--prime);
    transition: all 0.2s ease;
}

a:hover {
    border-bottom: 1px solid var(--second);
    color: var(--second);
}

h1 a,
h3 a,
h2 a,
h1 a:hover,
h3 a:hover,
h2 a:hover {
    border-bottom: 0;
}

hr {
    margin-top: var(--space-60);
    margin-bottom: var(--space-60);
    border: 0;
    position: relative;
    border-top: 1px solid var(--prime);
}

p { margin: 0 0 1.5em; }

/* LISTS
   Here rather than in a component file because the list content element and
   a list typed into the rich text editor emit the SAME markup — plain
   <ul>/<li> and <dl>/<dt>/<dd>, with only the wrapper div differing. Two
   files styling one <li> would race at similar specificity, and the two
   would drift apart visually; one owner means they cannot.

   Not website_standard.css either: that file exists for Contao's quirks,
   and indent, spacing and markers are brand decisions.

   Left on UA defaults these run at a 40px indent, which is far wider than
   the type scale wants. padding-inline-start rather than padding-left so a
   right-to-left site mirrors correctly. */
ul,
ol {
    margin: 0 0 1em;
    padding-inline-start: 1.25em;
}

li { margin-bottom: 0.5em; }

/* The list's own bottom margin already provides the gap after the last item;
   without this the two stack up. */
li:last-child { margin-bottom: 0; }

/* A nested list belongs to its parent item, so it gets the item's spacing
   above it and none below. */
li > ul,
li > ol {
    margin-block: 0.5em 0;
}

dl { margin: 0 0 1em; }

dt {
    font-weight: 600;
}

/* Browsers indent <dd> by 40px and give it nothing else, which reads as a
   stray indent rather than a definition. Reset and spaced instead. */
dd {
    margin: 0 0 0.75em;
}

dd:last-child { margin-bottom: 0; }

/* TUNING
   Markers are deliberately left at the text colour. Colouring them
   (`ul > li::marker { color: var(--prime); }`) suits some brands, but it
   costs legibility on ordered lists where the number carries meaning. */

/* BUTTONS
   The three rules below (base, hover, small screens) must list the SAME
   selectors. They had drifted: .layout_latest p.more a had a hover but no
   base styling, plain `button` had base styling but only [type=submit]
   got a hover, and the download link appeared in two lists out of three.
   .ce_download is dropped — Contao 5 emits .content-download.

   These name INTENTS, not the button element. A bare `button` selector was
   here and it matched the tag, which means "interactive control" rather than
   "brand call to action" — so it caught every button any third-party
   component renders. Counted across this build it styled ONE button it
   should (the contact form submit) and eleven it should not: four cookie bar,
   three accordion headers, four Colorbox controls. Overriding it was the
   normal case, not the exception, and three stylesheets were each undoing it.
   It is also why a <button> used for correct semantics in a header or footer
   had to be un-styled by hand.

   [type="submit"] separates them cleanly because an attribute selector only
   matches an attribute that is PRESENT: submit is the spec default for
   <button>, but third-party controls either set type="button" or omit it, so
   they are not matched. Contao also puts class="submit" on form submits.

   Consequence worth knowing: a hand-written <button> no longer gets the brand
   styling for free. Add .btn to it.

   The cookie bar is deliberately NOT in this list: that bundle is
   token-driven, so cookiebar.css brands it by setting its own --ccb-*
   properties instead of imposing the site button on its layout. */
.btn a,
a.btn,
button[type="submit"],
input[type="submit"],
.submit,
.content-download .download-element a,
.layout_latest p.more a
{
    display: inline-block;
    margin-bottom: 1.5em;
    padding: 13px 24px 16px 24px;
    text-align: center;
    background-color: var(--second);
    border-radius: 30px;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    border: 0;
    line-height: 1.5rem;
    margin-right: 1em;
    font-size: 1.2rem;
}

.btn a:hover,
a.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.submit:hover,
.content-download .download-element a:hover,
.layout_latest p.more a:hover {
    background-color: var(--prime);
}

/* BUTTON VARIANTS
   Modifiers layered onto .btn — add the class on the SAME element, e.g.
   <a class="btn alt">, <a class="btn outline">, <a class="btn alt outline">.
   The base .btn is solid --second (hover --prime); these only change colour:
     .alt          solid, colours swapped — --prime (hover --second)
     .outline      transparent with a --prime edge, fills --prime on hover
     .alt.outline  transparent with a --second edge, fills --second on hover
     .light        white with --prime text, for dark bands (hover --second)
   Borders inset (box-sizing: border-box is global), so an outline button keeps
   the same footprint as a solid one. */

/* .alt — inverse solid: --prime, hover --second */
.btn.alt a,
a.btn.alt,
button[type="submit"].alt,
input[type="submit"].alt,
.submit.alt {
    background-color: var(--prime);
}
.btn.alt a:hover,
a.btn.alt:hover,
button[type="submit"].alt:hover,
input[type="submit"].alt:hover,
.submit.alt:hover {
    background-color: var(--second);
}

/* .outline — transparent with a --prime edge; fills --prime on hover */
.btn.outline a,
a.btn.outline,
button[type="submit"].outline,
input[type="submit"].outline,
.submit.outline {
    background-color: transparent;
    border: 2px solid var(--prime);
    color: var(--prime);
}
.btn.outline a:hover,
a.btn.outline:hover,
button[type="submit"].outline:hover,
input[type="submit"].outline:hover,
.submit.outline:hover {
    background-color: var(--prime);
    color: var(--white);
}

/* .alt.outline — transparent with a --second edge; fills --second on hover.
   Inherits the transparent background and border width from .outline; the
   three-class selector outranks .alt (solid) and .outline so its colours win. */
.btn.alt.outline a,
a.btn.alt.outline,
button[type="submit"].alt.outline,
input[type="submit"].alt.outline,
.submit.alt.outline {
    background-color: transparent;
    border-color: var(--second);
    color: var(--second);
}
.btn.alt.outline a:hover,
a.btn.alt.outline:hover,
button[type="submit"].alt.outline:hover,
input[type="submit"].alt.outline:hover,
.submit.alt.outline:hover {
    background-color: var(--second);
    color: var(--white);
}

/* .light — white pill, prime text: the button for a dark band or card */
.btn.light a,
a.btn.light,
button[type="submit"].light,
input[type="submit"].light,
.submit.light {
    background-color: var(--white);
    color: var(--prime);
}
.btn.light a:hover,
a.btn.light:hover,
button[type="submit"].light:hover,
input[type="submit"].light:hover,
.submit.light:hover {
    background-color: var(--second);
    color: var(--white);
}

.small,
.small p {
    font-size: clamp(0.75em, 1.35vw, 1.125em);
}

.small p {
    margin-bottom: 0.875em;
}

.small a, a.small {
    display: inline-block;
}

.small li {
    margin-bottom:0;
}

a.download-element:after {
    display: inline-block;
    padding: 0 0 0 .25em;
    border: 0;
    font-family: "Font Awesome 5 Pro";
    text-transform: none;
    content: "\f019";
    font-weight: 900;
}

a.download-element {
    margin-right: .25em;
    margin-left: .25em;
    padding: 0;
    font-weight: bold;
}

.download-element .size {
    display: none;
}


/* EYEBROW
   The small tracked, uppercase label above a section heading. Its own element,
   class="eyebrow". The leading em-dash is drawn by CSS — never put it in the
   content. Accent colour on light; add .on-dark for white-on-dark bands. */
.eyebrow {
    display: block;
    margin: 0 0 0.6em;
    color: var(--second);
    font-family: var(--type-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.eyebrow::before { content: "— "; }

/* FONT AWESOME (SVG + JS kit) — the kit swaps <i> for <svg class="svg-inline--fa">,
   and its own 1em cap doesn't always inject before paint; framework_v3's
   `.row > * svg { height: auto }` then leaves the icon at its viewBox size
   (hundreds of px). Cap it so an inline icon tracks the font size. */
.svg-inline--fa,
.row > * .svg-inline--fa {
    display: inline-block;
    height: 1em;
    width: auto;
    max-width: none;
    overflow: visible;
    vertical-align: -0.125em;
}
.eyebrow.on-dark { color: var(--white); }


blockquote {
    padding: 0;
    margin: 0;
    
    p { margin-bottom: 0; }
    
    em {
        font-weight: 600;
        color: var(--prime);
    }
    
    em:after { content: " "; }
}

/* ==========================================================================
   BACKGROUND BANDS
   ==========================================================================
   Replaces .full_width, which conflated two separate jobs: breaking out of
   the page container AND painting a grey background. Those are now split,
   because either is useful without the other:

     .bleed-x    break out of the container   (framework — layout)
     .bg-*       paint a background           (here — brand)

   A full-width grey band is both together:  <div class="bleed-x bg-light">

   .full_width also used two 9999em pseudo-elements to fake the breakout,
   which needed `overflow: visible !important` on the element to work. The
   gap engine's .bleed-x does it with margins and needs no override.
   ========================================================================== */

.bg-light  { background-color: var(--grey-light); }
.bg-cream  { background-color: var(--surface-soft); }
.bg-white  { background-color: var(--white); }
.bg-dark   { background-color: var(--grey-dark); color: var(--white); }
.bg-prime  { background-color: var(--prime);      color: var(--white); }
.bg-ink    { background-color: var(--prime-deep); color: var(--white); }
.bg-navy   { background: var(--grad-cta);         color: var(--white); }

/* A band needs breathing room, or the text sits on the colour's edge. */
.bg-light,
.bg-cream,
.bg-white,
.bg-dark,
.bg-prime,
.bg-ink,
.bg-navy {
    padding-block: var(--space-40);
    padding-inline: var(--page-gutter);
}

/* A .band already re-caps and gutters its own children (`.band > *`), so a
   painted band drops its own inline padding or the two add up. */
.band:is(.bg-light, .bg-cream, .bg-white, .bg-dark, .bg-prime, .bg-ink, .bg-navy) { padding-inline: 0; }

/* Section rhythm: an 80px (clamped) band instead of the bg-* default. */
.band.section-80 { padding-block: var(--space-80); }

/* On a dark band the headings must not stay --heading (unreadable on navy),
   and the h1's text gradient would vanish: re-assert white. */
:is(.bg-dark, .bg-prime, .bg-ink, .bg-navy) :is(h1, h2, h3, h4) {
    color: var(--text-on-dark);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.full_img_background {
    position: relative;
    padding-bottom: 180px;
    margin-bottom: -120px;
    margin-inline: calc(-1 * var(--page-gutter));
}

.full_img_background .content-image{
    position: absolute;
}

.all_corners img {
    border-radius: 20px;
}

@media only screen and (max-width: 1050px) {
    .btn a,
    a.btn,
    button[type="submit"],
    input[type="submit"],
    .submit,
    .content-download .download-element a,
    .layout_latest p.more a {
        padding: 10px 18px;
        font-size: 0.8em;
    }
}

/* ==========================================================================
   REDUCED MOTION — honour the visitor's setting site-wide
   ==========================================================================
   Transitions and animations drop to (near) zero and smooth scrolling stops
   for anyone who asks their device for less motion. Sliders still work; they
   just don't glide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}