/* Shared colour system for the approved Modern site. */
body.modern {
    --ink: #122b3d;
    --steel: #075a82;
    --muted: #405767;
    --dark: #0b2335;
    --pale: #e8f1f7;
    --line: #b9cedb;
    --action: #ffa94d;
    --ice: #bdeaf5;
}

body.modern .site-header {
    border-bottom-color: var(--line);
    box-shadow: 0 3px 18px #0b23350c;
}

body.modern .header-contact {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}

body.modern .header-contact svg {
    background: #fff;
    color: var(--steel);
}

body.modern .header-contact:hover {
    background: #064866;
    border-color: #064866;
}

body.modern .desktop-nav .sub-menu,
body.modern .language-menu {
    border-color: var(--line);
}

body.modern .desktop-nav .sub-menu a {
    color: var(--ink);
}

body.modern .desktop-nav .sub-menu a:hover,
body.modern .desktop-nav .sub-menu a:focus-visible,
body.modern .language-menu a:hover,
body.modern .language-menu a:focus-visible {
    background: var(--pale);
    color: var(--steel);
}

body.modern .mobile-menu .sub-menu {
    background: var(--pale);
}

body.modern .site-footer {
    background: #eef4f8;
    color: var(--ink);
}

body.modern a:focus-visible,
body.modern button:focus-visible,
body.modern summary:focus-visible {
    outline-color: #dc7918;
}

/* The text panels retain a dark background beside their photographs. */
body.modern .umc-page-hero,
body.modern .umc-detail-hero {
    background: var(--dark);
}

body.modern .umc-page-hero-shade {
    background: linear-gradient(125deg, #081d30 0%, #0d3049 62%, #164b70 100%);
}

body.modern .umc-page-hero .eyebrow,
body.modern .umc-detail-hero .eyebrow,
body.modern .umc-callout .eyebrow {
    color: var(--ice);
}

body.modern .umc-page-hero h1,
body.modern .umc-detail-hero h1 {
    color: #fff;
}

body.modern .umc-page-hero h1 em,
body.modern .umc-detail-hero h1 em,
body.modern .umc-callout h2 em {
    color: var(--ice);
}

body.modern .umc-page-hero-inner > p:not(.eyebrow),
body.modern .umc-detail-hero .umc-lead,
body.modern .umc-callout .umc-lead {
    color: #e2eff7;
}

body.modern .umc-page-hero .button.primary,
body.modern .umc-detail-hero .button-dark,
body.modern .umc-callout .button.primary,
body.modern #enquiry-form .button.primary {
    background: var(--action);
    border-color: var(--action);
    color: var(--dark);
}

body.modern .umc-page-hero .button.primary svg,
body.modern .umc-detail-hero .button-dark svg,
body.modern .umc-callout .button.primary svg,
body.modern #enquiry-form .button.primary svg {
    background: var(--dark);
    color: #fff;
}

body.modern .umc-page-hero .button.primary:hover,
body.modern .umc-detail-hero .button-dark:hover,
body.modern .umc-callout .button.primary:hover,
body.modern #enquiry-form .button.primary:hover {
    background: #ffc17d;
    border-color: #ffc17d;
}

body.modern .umc-page-hero .button.outline {
    background: #0b2335b8;
    border-color: #e0eef7;
    color: #fff;
}

body.modern .umc-page-hero .button.outline svg {
    background: #fff;
    color: var(--dark);
}

body.modern .umc-callout {
    background: linear-gradient(125deg, #081d30, #123e5a);
}

body.modern .umc-callout-media {
    background: #123e5a;
}

body.modern .umc-callout-media::after {
    background: linear-gradient(90deg, #081d30e6, #0b23356b);
}

/* White cards and stronger dividers keep browsing and specifications clear. */
body.modern .umc-archive {
    background: linear-gradient(155deg, #e8f1f7 0 18%, #f8fafc 18% 100%);
}

body.modern .app-card,
body.modern .application-card,
body.modern .application-card .application-body {
    background: #fff;
    border-color: var(--line);
}

body.modern .app-card-copy > p:not(.kicker),
body.modern .application-card .application-body > p {
    color: var(--muted);
}

body.modern .application-card .app-bottom {
    color: var(--steel);
    border-color: var(--line);
}

body.modern .application-card .app-bottom svg {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}

body.modern .umc-split:nth-of-type(even) {
    background: #f1f6fa;
}

body.modern .umc-fact-panel {
    background: var(--pale);
    border: 1px solid var(--line);
    border-top: 4px solid var(--steel);
}

body.modern .umc-fact-panel > div {
    border-color: var(--line);
}

body.modern .umc-fact-panel .umc-spec-note,
body.modern .umc-app-spec-note {
    color: var(--muted);
    border-color: var(--line);
}

body.modern .umc-app-intro-copy .umc-rich-copy,
body.modern .umc-app-fact p,
body.modern .umc-app-fact .umc-lines,
body.modern .umc-app-details-head > p {
    color: var(--muted);
}

body.modern .umc-app-material {
    background: var(--dark);
    border-color: #274b65;
    color: #fff;
}

body.modern .umc-app-material .eyebrow,
body.modern .umc-app-example span {
    color: var(--ice);
}

body.modern .umc-app-material > p:not(.eyebrow),
body.modern .umc-app-example p {
    color: #e2eff7;
}

body.modern .umc-app-example {
    border-color: #476175;
}

body.modern .umc-app-details {
    background: var(--pale);
}

body.modern .umc-app-fact {
    border-color: var(--line);
}

body.modern .umc-app-fact h3 {
    color: var(--steel);
}

/* Production sections follow the homepage's navy and blue treatment. */
body.modern .umc-process-steps,
body.modern .umc-film {
    background: var(--dark);
    color: #fff;
    border-color: #274b65;
}

body.modern .umc-process-steps::before,
body.modern .umc-film::before {
    background: #164b70;
}

body.modern .umc-process-heading h2,
body.modern .umc-film h2 {
    color: #fff;
}

body.modern .umc-process-heading .eyebrow,
body.modern .umc-process-heading h2 em,
body.modern .umc-film .eyebrow,
body.modern .umc-film h2 em {
    color: var(--ice);
}

body.modern .umc-process-heading .umc-lead,
body.modern .umc-film .umc-lead,
body.modern .umc-film .film-copy > p:not(.eyebrow) {
    color: #e2eff7;
}

body.modern .umc-process-card {
    border-color: var(--line);
    color: var(--ink);
}

body.modern .umc-step-number {
    background: var(--action);
    color: var(--dark);
}

body.modern .umc-film .button.primary {
    background: #fff;
    color: var(--dark);
}

body.modern .umc-film .button.primary svg {
    background: var(--pale);
    color: var(--dark);
}

/* Downloads and the technical comparison remain readable on light panels. */
body.modern .umc-company-downloads,
body.modern .umc-comparison {
    background: var(--pale);
}

body.modern .umc-company-document {
    background: #fff;
    border-color: var(--line);
    border-top: 4px solid var(--steel);
}

body.modern .umc-company-document p,
body.modern .umc-company-document .umc-file-size,
body.modern .umc-comparison td {
    color: var(--muted);
}

body.modern .umc-company-document .button.primary,
body.modern .umc-comparison .button.primary {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}

body.modern .umc-company-document .button.primary svg,
body.modern .umc-comparison .button.primary svg {
    background: #fff;
    color: var(--steel);
}

body.modern .umc-comparison-table,
body.modern .umc-comparison th,
body.modern .umc-comparison td {
    border-color: var(--line);
}

body.modern .umc-comparison thead th,
body.modern .umc-comparison thead th:first-child {
    background: var(--dark);
    color: #fff;
}

body.modern .umc-comparison thead th.unimetra {
    background: var(--steel);
}

body.modern .umc-comparison th:first-child {
    background: #f1f6fa;
    color: var(--ink);
}

body.modern .umc-comparison td.unimetra {
    background: #def0fa;
    color: #123e5a;
}

body.modern .umc-document-filters button {
    color: var(--steel);
    border-color: #96b2c4;
}

body.modern .umc-document-filters button[aria-pressed="true"] {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}

/* Enquiry forms share the same dark surround and clear white fields. */
body.modern .contact,
body.modern .umc-collection-contact {
    background: linear-gradient(125deg, #081d30, #123e5a);
}

body.modern .contact .eyebrow,
body.modern .contact h2 em {
    color: var(--ice);
}

body.modern .contact-grid > div > p:not(.eyebrow),
body.modern .contact address {
    color: #e2eff7;
}

body.modern .contact-email {
    color: #fff;
}

body.modern #enquiry-form {
    color: var(--ink);
    border: 1px solid #d2e1ea;
}

body.modern #enquiry-form label {
    color: var(--ink);
    font-weight: 600;
}

body.modern #enquiry-form input,
body.modern #enquiry-form textarea,
body.modern #enquiry-form select {
    color: var(--ink);
    border-bottom-color: #839baa;
}

body.modern #enquiry-form ::placeholder {
    color: #526575;
    opacity: 1;
}

body.modern #enquiry-form input:focus-visible,
body.modern #enquiry-form textarea:focus-visible,
body.modern #enquiry-form select:focus-visible {
    outline-color: var(--steel);
}

@media (hover: hover) {
    body.modern .app-card:hover,
    body.modern .application-card:hover,
    body.modern .umc-archive .app-card:hover,
    body.modern .umc-archive .application-card:hover {
        border-color: var(--steel);
        box-shadow: 0 16px 32px #0b23351c;
    }
}

@media (min-width: 651px) and (max-width: 1200px) {
    body.modern .umc-page-hero h1,
    body.modern .umc-page-hero-inner > p:not(.eyebrow) {
        max-width: 54%;
    }
}

@media (min-width: 651px) and (max-width: 980px) {
    body.modern .umc-callout-media::after {
        background: linear-gradient(90deg, #081d30f2, #0b2335bf);
    }
}

@media (max-width: 650px) {
    body.modern .umc-callout-media::after {
        background: linear-gradient(0deg, #0b23355c, #123e5a33);
    }

    body.modern .umc-comparison-mobile details {
        border-color: var(--line);
    }

    body.modern .umc-comparison-mobile summary {
        color: var(--ink);
    }

    body.modern .umc-comparison-mobile details[open] summary {
        background: var(--dark);
        color: #fff;
    }

    body.modern .umc-comparison-mobile dl > div {
        border-color: var(--line);
    }

    body.modern .umc-comparison-mobile .unimetra {
        background: #def0fa;
    }

    body.modern .umc-comparison-mobile dt {
        color: var(--steel);
    }

    body.modern .umc-comparison-mobile dd {
        color: var(--muted);
    }
}