/*
 * New site header and footer (front/common/header_new.php, footer_new.php).
 *
 * Self-contained on purpose: every rule is scoped to a .wcn-* class and sized in px,
 * so the same markup renders identically on the existing Bootstrap pages (which set
 * html { font-size: 62.5% } and reset margins globally) and on the new Tailwind pages.
 */

.wcn-header,
.wcn-header *,
.wcn-header *::before,
.wcn-header *::after,
.wcn-awards,
.wcn-awards *,
.wcn-footer,
.wcn-footer *,
.wcn-footer *::before,
.wcn-footer *::after {
    box-sizing: border-box;
}

/* ============================== Header ============================== */

.wcn-header {
    position: relative;
    z-index: 1000;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #001431;
    color: #fff;
    font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* Sits on top of a dark hero instead of pushing the page down. */
.wcn-header--overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.wcn-header a,
.wcn-header a:hover,
.wcn-header a:focus,
.wcn-header button {
    text-decoration: none;
    outline-offset: 3px;
}

.wcn-header img,
.wcn-header svg {
    display: block;
    max-width: none;
    vertical-align: middle;
}

.wcn-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

.wcn-header__logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    transition: opacity 0.3s ease;
}

.wcn-header__logo:hover {
    opacity: 0.8;
}

.wcn-header__logo img {
    width: auto;
    height: 50px;
}

/* ---------- Desktop navigation ---------- */

.wcn-nav {
    display: none;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.wcn-nav__item {
    display: flex;
    align-items: center;
    height: 80px;
}

.wcn-nav__item--list {
    position: relative;
}

.wcn-nav__link,
.wcn-header a.wcn-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    letter-spacing: 0.06em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.wcn-nav__link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #7dd3fc;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.wcn-nav__link:hover,
.wcn-header a.wcn-nav__link:hover,
.wcn-nav__item:hover > .wcn-nav__link,
.wcn-nav__item[data-open='true'] > .wcn-nav__link {
    color: #7dd3fc;
}

.wcn-nav__link:hover::after,
.wcn-nav__item:hover > .wcn-nav__link::after,
.wcn-nav__item[data-open='true'] > .wcn-nav__link::after {
    transform: scaleX(1);
}

.wcn-nav__caret {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.wcn-nav__item:hover .wcn-nav__caret,
.wcn-nav__item:focus-within .wcn-nav__caret,
.wcn-nav__item[data-open='true'] .wcn-nav__caret {
    transform: rotate(180deg);
}

/* ---------- Submenus: shown on hover, keyboard focus, or data-open (touch) ---------- */

.wcn-subnav {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.wcn-nav__item:hover > .wcn-subnav,
.wcn-nav__item:focus-within > .wcn-subnav,
.wcn-nav__item[data-open='true'] > .wcn-subnav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.wcn-subnav--list {
    position: absolute;
    top: 65px;
    left: -3px;
    width: 391px;
    padding: 9px 21px 9px 13px;
    border-radius: 3px;
    background: #01458e;
    box-shadow: 0 24px 48px rgba(0, 10, 30, 0.45);
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    letter-spacing: normal;
}

.wcn-header a.wcn-subnav__row {
    display: block;
    padding: 12px 13px;
    border-radius: 2px;
    color: #fff;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.wcn-header a.wcn-subnav__row:hover,
.wcn-header a.wcn-subnav__row:focus-visible {
    padding-left: 19px;
    background: #043973;
    color: #fff;
}

.wcn-subnav__title,
.wcn-subnav__text {
    display: block;
    color: #fff;
    line-height: 25px;
    white-space: nowrap;
}

.wcn-subnav__title {
    font-size: 17px;
    font-weight: 600;
}

.wcn-subnav__text {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 400;
}

.wcn-subnav--mega {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    letter-spacing: normal;
}

.wcn-mega {
    padding: 40px 0;
    background: #01458e;
    box-shadow: 0 24px 48px rgba(0, 10, 30, 0.45);
}

.wcn-mega__inner {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.wcn-header a.wcn-card {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: 100%;
    max-width: 294px;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    color: #001431;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wcn-header a.wcn-card:hover {
    color: #001431;
    box-shadow: 0 18px 36px rgba(0, 10, 30, 0.4);
    transform: translateY(-4px);
}

.wcn-card__media {
    display: block;
    height: 149px;
    overflow: hidden;
}

.wcn-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.wcn-card:hover .wcn-card__media img {
    transform: scale(1.05);
}

.wcn-card__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    padding: 0 12px;
    color: #001431;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* Card with the label as a pill over the image. */
.wcn-card--button .wcn-card__media {
    height: 198px;
}

.wcn-card--button .wcn-card__label {
    position: absolute;
    top: 73px;
    left: 50%;
    width: 76%;
    height: 48px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 6px 0 rgba(0, 40, 90, 0.35);
    font-size: 15px;
    transform: translateX(-50%);
}

/* ---------- Right side ---------- */

.wcn-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wcn-header a.wcn-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 9999px;
    background: #004489;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.wcn-header a.wcn-btn:hover {
    background: #0a5bb0;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 68, 137, 0.45);
}

.wcn-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.wcn-btn:hover svg {
    transform: translateX(4px);
}

.wcn-burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wcn-burger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wcn-burger svg {
    width: 20px;
    height: 20px;
}

/* ---------- Mobile menu ---------- */

.wcn-mobile {
    position: absolute;
    top: 80px;
    right: 20px;
    left: 20px;
    max-height: calc(100vh - 96px);
    margin: 0;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    background: rgba(0, 20, 49, 0.98);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    animation: wcn-menu 0.25s ease-out;
}

.wcn-mobile[hidden] {
    display: none;
}

@keyframes wcn-menu {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
}

.wcn-mobile__list {
    display: grid;
    gap: 4px;
}

.wcn-header a.wcn-mobile__link,
.wcn-mobile__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.2s ease;
}

.wcn-mobile__summary::-webkit-details-marker {
    display: none;
}

.wcn-header a.wcn-mobile__link:hover,
.wcn-mobile__summary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.wcn-mobile__summary svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.wcn-mobile details[open] > .wcn-mobile__summary svg {
    transform: rotate(180deg);
}

.wcn-mobile__sub {
    display: grid;
    gap: 2px;
    margin: 0 0 8px 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.wcn-header .wcn-mobile__sub a.wcn-mobile__link {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.wcn-header a.wcn-mobile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 12px 20px;
    border-radius: 9999px;
    background: #004489;
    color: #fff;
    font-weight: 600;
}

@media (min-width: 640px) {
    .wcn-header__bar {
        padding: 0 32px;
    }

    .wcn-header a.wcn-btn {
        display: inline-flex;
    }

    .wcn-header a.wcn-mobile__cta {
        display: none;
    }
}

@media (min-width: 1024px) {
    .wcn-header__bar {
        padding: 0 40px;
    }

    .wcn-nav {
        display: flex;
    }

    .wcn-burger,
    .wcn-mobile {
        display: none;
    }
}

@media (min-width: 1280px) {
    .wcn-header__logo {
        margin-left: 10px;
    }

    .wcn-nav {
        gap: 26px;
        margin-left: 44px;
        font-size: 15px;
    }

    .wcn-mega {
        padding: 61px 0;
    }

    .wcn-mega__inner {
        gap: 22px;
    }

    .wcn-mega__inner--wide {
        gap: 52px;
    }

    .wcn-card__label,
    .wcn-card--button .wcn-card__label {
        font-size: 17px;
    }

    .wcn-header a.wcn-btn {
        min-width: 210px;
        font-size: 15px;
    }
}

/* ============================== Awards strip ============================== */

.wcn-awards {
    margin: 0;
    padding: 40px 0;
    background: #fff;
}

.wcn-awards__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 40px 32px;
    max-width: 1344px;
    margin: 0 auto;
    padding: 0 20px;
}

.wcn-awards__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
}

.wcn-awards__item img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wcn-awards__item img:hover {
    transform: translateY(-4px);
}

@media (min-width: 640px) {
    .wcn-awards {
        padding: 48px 0;
    }

    .wcn-awards__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0 32px;
    }
}

@media (min-width: 1024px) {
    .wcn-awards {
        padding: 53px 0;
    }

    .wcn-awards__inner {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        padding: 0 40px;
    }

    .wcn-awards__item {
        height: 150px;
    }
}

/* ============================== Footer ============================== */

.wcn-footer {
    display: block;
    margin: 0;
    padding: 0;
    background: #001431;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.wcn-footer a,
.wcn-footer a:hover,
.wcn-footer a:focus {
    text-decoration: none;
}

.wcn-footer img,
.wcn-footer svg {
    display: block;
    max-width: none;
}

.wcn-footer__inner {
    max-width: 1344px;
    margin: 0 auto;
    padding: 48px 20px 32px;
}

.wcn-footer__grid {
    display: grid;
    gap: 40px;
}

.wcn-footer__logo {
    display: inline-flex;
    transition: opacity 0.3s ease;
}

.wcn-footer__logo:hover {
    opacity: 0.8;
}

.wcn-footer__logo img {
    width: auto;
    height: 50px;
}

.wcn-footer .wcn-footer__about {
    max-width: 270px;
    margin: 12px 0 0;
    padding: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.wcn-footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.wcn-footer .wcn-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 2px;
    background: #fff;
    color: #001431;
    font-size: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.wcn-footer .wcn-footer__social a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.wcn-footer .wcn-footer__social a.wcn-footer__social--round {
    border-radius: 50%;
}

.wcn-footer__social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.wcn-footer__social .wcn-footer__social--small svg {
    width: 14px;
    height: 14px;
}

.wcn-footer .wcn-footer__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 22.5px;
    font-weight: 500;
    line-height: 28px;
}

.wcn-footer .wcn-footer__links {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.wcn-footer .wcn-footer__links li {
    margin: 0;
    padding: 0;
}

.wcn-footer .wcn-footer__links li + li {
    margin-top: 8px;
}

.wcn-footer .wcn-footer__links a {
    display: inline-block;
    color: #fff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.wcn-footer .wcn-footer__links a:hover {
    color: #7dd3fc;
    transform: translateX(4px);
}

.wcn-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid #eeeff1;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.wcn-footer .wcn-footer__bottom p {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.wcn-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.5;
}

.wcn-footer .wcn-footer__legal a {
    color: #fff;
    transition: color 0.3s ease;
}

.wcn-footer .wcn-footer__legal a:hover {
    color: #7dd3fc;
}

.wcn-footer__legal span {
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 640px) {
    .wcn-footer__inner {
        padding-right: 32px;
        padding-left: 32px;
    }

    .wcn-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wcn-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .wcn-footer__inner {
        padding: 40px 40px 32px;
    }

    .wcn-footer__grid {
        grid-template-columns: 353fr 310fr 341fr 260fr;
        gap: 0;
    }

    .wcn-footer__logo {
        margin-left: -8px;
    }

    .wcn-footer__bottom {
        margin-top: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wcn-subnav {
        transform: none;
        transition: none;
    }

    .wcn-mobile {
        animation: none;
    }
}

/* ============================== Sticky header ============================== */
/* front-shell.js adds --fixed once the page is scrolled past the top; the bar then slides in,
   slightly more compact, and returns to its normal place when the visitor is back at the top. */

.wcn-header__bar,
.wcn-nav__item,
.wcn-header__logo img {
    transition: height 0.35s ease;
}

.wcn-header__spacer {
    height: 0;
}

.wcn-header--fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 12px 32px rgba(0, 10, 30, 0.35);
    transform: translate3d(0, -100%, 0);
    animation: wcn-header-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wcn-header-in {
    to {
        transform: translate3d(0, 0, 0);
    }
}

.wcn-header--fixed .wcn-header__bar,
.wcn-header--fixed .wcn-nav__item {
    height: 68px;
}

.wcn-header--fixed .wcn-header__logo img {
    height: 42px;
}

.wcn-header--fixed .wcn-subnav--list {
    top: 53px;
}

.wcn-header--fixed .wcn-mobile {
    top: 68px;
    max-height: calc(100vh - 84px);
}

@media (prefers-reduced-motion: reduce) {
    .wcn-header--fixed {
        transform: none;
        animation: none;
    }

    .wcn-header__bar,
    .wcn-nav__item,
    .wcn-header__logo img {
        transition: none;
    }
}