/*
 * Shared components added for the multi-page site. Loaded after style.css.
 * Breakpoints follow the original stylesheet: 1366 / 1023 / 767 / 620 / 420px.
 * Page-specific styles go in pages.css; the landing page uses home.css.
 */

:root {
    --dic-red: #db1f25;
    --dic-dark: #34383a;
    --dic-darker: #242020;
    --dic-blue: #4095c1;
    --dic-yellow: #ffc842;
    --dic-green: #30cc76;
    --dic-grey: #666b6e; /* 5.4:1 on white, 4.9:1 on #f4f4f4 */
    --header-height: 110px;
}

/* Accessibility helpers */
.skip-link {
    position: absolute;
    left: 1em;
    top: -100px;
    z-index: 100;
    padding: 0.75em 1.25em;
    background: #fff;
    color: #000;
    font-weight: 800;
}
.skip-link:focus {
    top: 1em;
}
/*
 * On a page hidden from visitors (a menu item switched off), opened from a browser signed
 * in to the admin: a note pinned to the bottom of the screen, under the fixed header (9) and
 * its opened phone menu, over the page; clicks go through it.
 */
.c-preview-note {
    position: fixed;
    z-index: 8;
    left: 50%;
    bottom: 16px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 10px 16px;
    border-left: 4px solid var(--division-accent, var(--dic-red));
    background: var(--dic-darker);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Two-tone ring (white outline around a near-black halo), visible on white, dark and accent backgrounds alike. */
a:focus-visible,
button:focus-visible,
.owl-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dic-darker);
}

/*
 * Header: the division's own logo, the page links, "DIC Home" and "Explore" the other
 * division, and the language switcher. Logos are sized by height: logos with the
 * same layout share one canvas height, so their letters match whatever their width.
 * --logo-scale (the division's "Logo size", set on the header) draws a logo of
 * another layout taller: the official lockups (2.35:1, at 130%) have a second line
 * under their name.
 */
.c-menu__item--logo {
    /* The legacy 1.5x zoom before scrolling grows rightwards, so a wide logo never pokes out of the page. */
    transform-origin: left center;
}
/* Width follows the height (the legacy stylesheet fixes it at 115px on mobile); an unusually wide upload is scaled down within the box. */
.c-menu__item--logo img,
.mobile-logo img {
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.c-menu__item--logo img {
    height: calc(56px * var(--logo-scale, 1));
    /* Narrower when its item shrinks (see .c-menu below). */
    max-width: min(240px, 100%);
}
/*
 * Every item of the menu bar sits on one centre line, scrolled or not (client review
 * of 2026-10-12: no empty band under the links once the bar turns solid). The bar is
 * as tall as its tallest item (the logo or the boxes) plus --menu-pad-y above and
 * below: with the 200% logo it keeps its height. The page links keep style.css's
 * 30px above and below: centred, they never set the bar's height, and a rule here
 * would also replace their phone spacing. On phones .c-menu is a block, so none of
 * this applies there.
 */
.header {
    --menu-pad-y: 5px;
}
.c-menu {
    /* One row: the switcher never drops to a second one. */
    flex-wrap: nowrap;
    align-items: center;
    /* The least space between two items (12px at 1024px, 16px from 1280px); space-between spreads the rest. */
    column-gap: clamp(12px, calc(1.5625vw - 4px), 16px);
}
/*
 * Six page links since the careers page (2026-10-12): short of room, on a narrower
 * desktop with a wide logo (an official lockup), the logo is drawn smaller in its box
 * (object-fit above), while the links, the boxes and the switcher keep their size and
 * never wrap.
 */
.c-menu > .c-menu__item {
    flex-shrink: 0;
}
.c-menu > .c-menu__item--logo {
    flex-shrink: 1;
    min-width: 0;
}
/*
 * Above 1366px, the legacy 1.5x zoom at the top of the page and its 100px of room
 * after the logo stay for a narrow logo only. A wide one (header--wide-logo: over
 * 120px, the DIC logo and the official lockups) keeps its size and the 30px of
 * narrower screens: zoomed, it would take the room of the six links.
 */
@media screen and (min-width: 1367px) {
    .header--wide-logo .c-menu__item--logo {
        padding-right: 30px;
        transform: none;
    }
}
.c-menu__item--logo,
.c-menu__item--divisions,
.c-menu__item--lang-last {
    padding-top: var(--menu-pad-y);
    padding-bottom: var(--menu-pad-y);
}
/*
 * Narrower desktops (1024 to 1280px wide): the page links (13 to 15px) and, up to
 * 1248px, the space after the logo (16 to 30px) shrink with the window, so the menu
 * keeps one row, French included. Top level, so a window between 1023 and 1024px
 * (browser zoom, display scaling) gets the 13px too; phones get their size back below.
 */
.c-menu__item {
    font-size: clamp(13px, calc(0.78125vw + 5px), 15px);
}
@media screen and (max-width: 1366px) {
    .c-menu__item--logo {
        padding-right: clamp(16px, calc(6.25vw - 48px), 30px);
    }
}
/*
 * Links to the rest of DIC (client review of 2026-10-12): "DIC Home" (the landing page)
 * and, below it, "Explore" each other division (its overview), each in a box drawn in
 * its accent colour (--switch-accent, with --switch-on-accent for the text, set on each
 * box) and filled with it on hover. Their words are the size of the menu links, on
 * every screen (client feedback on the review: the 1.5 times larger words were too big),
 * and in their case, as the client wrote them: in capitals the French labels would not
 * fit the row. The column makes both boxes as wide as the longer label.
 */
.c-divisions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'Orbitron', 'Nunito Sans', sans-serif;
    /* The menu item's (.c-menu__item): 13px at 1024px, 15px from 1280px, the phones' own below. */
    font-size: inherit;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.c-divisions__box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 0.75em;
    border: 1px solid var(--switch-accent, rgba(255, 255, 255, 0.75));
    border-radius: 2px;
    color: #fff;
    text-align: center;
    transition: background 300ms ease, color 300ms ease;
}
.c-divisions__box:hover,
.c-divisions__box:focus {
    background: var(--switch-accent, #fff);
    color: var(--switch-on-accent, var(--dic-darker));
    text-decoration: none;
}
.menu-activator {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    /* Inherit the page's line height like the legacy <div> did, so the icon stays centred in the button. */
    font: inherit;
    cursor: pointer;
}

/*
 * Language switcher (partials/language-switcher.blade.php): "EN | FR", the current
 * language underlined, the other one a link. The header has three placements and
 * shows one at a time: last in the menu bar on wide screens; in the bar next to the
 * menu button on phones and tablets, so it needs no menu opening; first in the
 * opened menu where the bar is too narrow for it (below 260px: a phone zoomed in).
 */
.c-lang {
    display: inline-flex;
    align-items: center;
    font-family: 'Orbitron', 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
/* 30px tall: a comfortable touch target in the phone bar. */
.c-lang__item {
    display: inline-block;
    padding: 8px 9px;
    color: #fff;
}
.c-lang__item + .c-lang__item {
    border-left: 1px solid rgba(255, 255, 255, 0.55);
}
.c-lang__item--current {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.c-lang__link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 300ms ease;
}
.c-lang__link:hover,
.c-lang__link:focus {
    color: #fff;
    text-decoration: none;
}
/* The language's full name, for screen readers. */
.c-lang__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.c-lang--bar,
.c-menu__item--lang-first {
    display: none;
}
@media screen and (max-width: 1023px) {
    .c-menu__item--lang-last {
        display: none;
    }
    /* Left of the menu button (30px wide, 20px from the edge), above the opened menu like it. */
    .c-lang--bar {
        display: inline-flex;
        position: absolute;
        top: 19px;
        right: 58px;
        z-index: 999;
    }
}
@media screen and (max-width: 259px) {
    .c-lang--bar {
        display: none;
    }
    /* The logo may use the switcher's room again (see .mobile-logo below). */
    .c-menu__container .mobile-logo {
        max-width: calc(100% - 60px);
    }
    /* Text in line with the menu links below. */
    .c-menu__item--lang-first {
        display: block;
        padding-left: calc(2em - 9px);
    }
}

/* Inner page hero */
.c-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    padding: calc(var(--header-height) + 40px) 0 50px;
    background-color: var(--dic-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.c-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(36, 32, 32, 0.55) 0%, rgba(36, 32, 32, 0.8) 100%);
}
.c-page-hero__inner {
    position: relative;
    width: 100%;
}
.c-page-hero__title {
    margin: 0;
    font-family: 'Orbitron';
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: break-word;
    color: #fff;
}
.c-page-hero__subtitle {
    max-width: 640px;
    margin: 0.6em 0 0;
    font-size: 1.125em;
    font-weight: 800;
}
.c-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1em;
    font-size: 0.8125em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.c-breadcrumbs li + li::before {
    content: '/';
    margin: 0 0.6em;
    opacity: 0.6;
}
.c-breadcrumbs a {
    /* 40px touch target without changing the line height */
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
    color: #fff;
    opacity: 0.8;
}
.c-breadcrumbs a:hover,
.c-breadcrumbs a:focus {
    color: #fff;
    opacity: 1;
}

/* Generic content blocks */
.c-block {
    padding: 70px 0;
}
.c-block--grey {
    background: #f4f4f4;
}
.c-block--dark {
    background: var(--dic-dark);
    color: #fff;
}
.c-block__title {
    margin: 0 0 0.75em;
    font-family: 'Orbitron';
    font-size: 1.5em;
    font-weight: 500;
    text-transform: uppercase;
}
.c-prose {
    max-width: 760px;
    font-size: 1.0625em;
    line-height: 1.7;
}
.c-prose p,
.c-prose ul,
.c-prose ol {
    margin: 0 0 1.1em;
}
.c-prose h2,
.c-prose h3 {
    margin: 1.4em 0 0.6em;
    font-weight: 900;
}
.c-prose img {
    max-width: 100%;
    height: auto;
}

.c-button {
    display: inline-block;
    padding: 12px 26px;
    border: 2px solid var(--division-accent, var(--dic-red));
    background: var(--division-accent, var(--dic-red));
    color: var(--division-on-accent, #fff);
    font-weight: 800;
    font-size: 0.875em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 300ms ease, color 300ms ease;
}
/* Accent as text uses --division-accent-text: the accent darkened to 4.5:1 on white. */
.c-button:hover,
.c-button:focus {
    background: transparent;
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    text-decoration: none;
}
.c-button--ghost {
    background: transparent;
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-button--ghost:hover,
.c-button--ghost:focus {
    background: var(--division-accent, var(--dic-red));
    color: var(--division-on-accent, #fff);
}
.c-block--dark .c-button--ghost,
.c-page-hero .c-button--ghost,
.c-block--dark .c-button:hover,
.c-block--dark .c-button:focus,
.c-page-hero .c-button:hover,
.c-page-hero .c-button:focus {
    /* Accent text on the dark bands is too faint (red on #34383a is 2.4:1). */
    border-color: #fff;
    color: #fff;
}

.c-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    color: var(--dic-grey);
    font-weight: 800;
}

/*
 * Footer (legacy colours): social links, then the copyright line, each row centred, on
 * phones as on desktop (the links between divisions are in the header: .c-divisions).
 * The legacy stylesheet spreads the footer's lines apart (space-between): here they
 * are stacked.
 */
.c-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.c-footer__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    padding-top: 14px;
}
.c-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* touch target around the 22px glyph */
    height: 40px;
    border-radius: 50%;
    color: #fff;
    opacity: 0.85;
    transition: color 300ms ease, opacity 300ms ease;
}
.c-footer__social-link:hover,
.c-footer__social-link:focus-visible {
    color: var(--division-accent, var(--dic-red));
    opacity: 1;
}
.c-social-icon {
    display: block;
    flex-shrink: 0;
}
.c-footer__container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: auto;
    padding: 14px 0 18px;
    text-align: center;
}
/* The credit to DivaByte under the copyright line: muted, the name white and underlined. */
.c-footer__credit {
    color: rgba(255, 255, 255, 0.62);
}
.c-footer__credit a {
    padding: 6px 0; /* a taller touch target: the line itself does not move */
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 300ms ease;
}
.c-footer__credit a:hover,
.c-footer__credit a:focus-visible {
    color: var(--division-accent, var(--dic-red));
}

@media screen and (max-width: 1023px) {
    :root {
        --header-height: 70px;
    }
    .menu-activator {
        display: block;
    }
    .mobile-logo {
        display: inline-flex;
        align-items: center;
        /* Stay clear of the language switcher and the menu button (30px wide, 20px from the edge), however wide the logo. */
        max-width: calc(100% - 150px);
        padding-right: 0;
    }
    /*
     * A taller logo (--logo-scale) takes its extra height from the padding, so the bar keeps
     * its height up to 180%; a larger logo makes the bar taller. The opened menu starts below
     * the bar whatever its height, so its first link never runs under the logo.
     */
    .header {
        --mobile-logo-height: calc(40px * var(--logo-scale, 1));
        --mobile-logo-padding: max(0px, calc(1em - (var(--logo-scale, 1) - 1) * 20px));
    }
    .mobile-logo {
        padding-top: var(--mobile-logo-padding);
        padding-bottom: var(--mobile-logo-padding);
    }
    .mobile-logo img {
        height: var(--mobile-logo-height);
        max-width: 100%;
    }
    .c-menu,
    .header--fix .c-menu {
        padding-top: calc(var(--mobile-logo-height) + 2 * var(--mobile-logo-padding) + 10px);
    }
    /* The collapsed menu is also hidden from keyboard and screen readers, once it has slid away. */
    .c-menu {
        visibility: hidden;
        transition: transform 400ms ease, visibility 0s linear 400ms;
    }
    .menu-on .c-menu {
        visibility: visible;
        transition: transform 400ms ease;
    }
    /* The page links' own size (the narrower desktops' clamp above stops here). */
    .c-menu__item {
        font-size: 0.9375em;
    }
    /*
     * In the opened menu: under the page links, in line with their text, one above the
     * other, as wide as the longer label but never wider than the menu (a label longer
     * than the screen wraps), 44px touch targets.
     */
    .c-menu__item--divisions {
        padding: 14px calc(2em - 1px) 10px;
    }
    .c-divisions {
        width: fit-content;
        max-width: 100%;
        gap: 8px;
        white-space: normal;
    }
    .c-divisions__box {
        min-height: 44px;
        padding: 6px 0.75em;
        overflow-wrap: anywhere;
    }
    /*
     * The stacked boxes make the opened menu taller (about 380px with a 200% logo), more
     * than a phone held sideways shows: it scrolls inside itself, so its last entries
     * stay reachable, and the page behind it stays put.
     */
    .c-menu {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /*
     * While the menu is open, a band of its colour behind the logo, the switcher and the
     * button: scrolled links pass under the bar instead of through the transparent logo.
     */
    .menu-on .c-menu__container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        height: calc(var(--mobile-logo-height) + 2 * var(--mobile-logo-padding));
        background: #34383a;
    }
    .c-page-hero {
        min-height: 320px;
    }
    .c-page-hero__title {
        font-size: 2em;
    }
}

@media screen and (max-width: 767px) {
    .c-block {
        padding: 45px 0;
    }
    .c-page-hero {
        min-height: 260px;
        padding-bottom: 36px;
    }
    .c-page-hero__title {
        font-size: 1.625em;
    }
    .c-page-hero__subtitle {
        font-size: 1em;
    }
    .c-footer__container {
        padding: 12px 0 16px;
        gap: 6px;
    }
}

@media screen and (max-width: 420px) {
    .c-page-hero__title {
        font-size: 1.375em;
    }
}

/*
 * French pages: « » around the testimonials. style.css draws the opening “; the closing
 * mark is in the page (» from the translations), raised to the level of « because
 * guillemets sit mid-height where ” hangs at the top of the line.
 */
.c-testimonial__desc:lang(fr):before {
    content: '«';
}
.c-testimonial__desc-apost:lang(fr) {
    -webkit-transform: translate(20px, 10px);
    transform: translate(20px, 10px);
}

/* Without JavaScript the in-view script never reveals this content (see style.css): show it. */
.no-js .animate,
.no-js .c-sector__text-cont > *,
.no-js .c-sector__img-holder img,
.no-js .c-contact .c-section__title {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        /* Otherwise infinite animations (the scroll hint) restart every 0.01ms and flicker. */
        animation-iteration-count: 1 !important;
    }
}