:root {
    --tfs-accent: #CA4300;
    --tfs-white: #FFFFFF;
    --tfs-primary-100: #F2F2F2;
    --tfs-primary-200: #D5D5D5;
    --tfs-primary-700: #363636;
    --tfs-primary-900: #111111;
    --tfs-text: #111111;
    --tfs-text-muted: #363636;
    --tfs-bg: #FFFFFF;
    --tfs-surface: #F2F2F2;
    --tfs-border: #D5D5D5;
    /* SGS Public Website tokens */
    --sgs-dark: #3C3C3C;
    --sgs-mid: #3c515b; /*Old one was #77787B;*/
    --sgs-light: #F4F4F4; /*Proposed one is #f6f9fc; Old one is #F4F4F4*/
    --sgs-border: #E5E7EB;
    --sgs-muted-fg: #6A6F79; /*Old one was #6B7280;*/
    --sgs-accent: var(--tfs-accent);
    /* New */
    --sgs-burntaccent: #8e2600;
    --sgs-iconbackground: rgba(201,76,8,0.1); /*Old one was rgba(201,76,8,0.1);*/
    --sgs-iconbackgroundhover: rgba(201,76,8,0.2); /*Old one was rgba(201,76,8,0.2); */
    --sgs-whitesectiondescriptiontext: rgba(255,255,255,0.9);
    --sgs-verydark: #252525;
}

/* --------------------------------------------------
   PORTAL SPECIFIC
-------------------------------------------------- */

.portal-tfs .utility-bar {
    background-color: #111111;
}

.portal-ecw .utility-bar {
    background-color: #0047AB;
}

.portal-ecw-uk .utility-bar {
    background-color: #111111;
}

.portal-ecw-ee {
    --tfs-accent: #0072CE;
    --sgs-accent: #0072CE;
}

.portal-ecw-ca {
    --tfs-accent: #D80621;
    --sgs-accent: #D80621;
}

.portal-ecw-mt {
    --tfs-accent: #CF142B;
    --sgs-accent: #CF142B;
}

.portal-ecw-ie {
    --tfs-accent: #009A44;
    --sgs-accent: #009A44;
}

.portal-ecw-si {
    --tfs-accent: #003DA5;
    --sgs-accent: #003DA5;
}


.portal-ecw-ee .utility-bar {
    background-color: #111111;
}

/* Accent hover overrides for portal-ecw-ee (#0072CE → #005BA4) */
.portal-ecw-ee .btn-primary:hover,
.portal-ecw-ee .btn-primary:focus,
.portal-ecw-ee .btn-primary:active {
    background-color: #005BA4;
    border-color: #005BA4;
}

.portal-ecw-ee .sgs-auth-btn:hover,
.portal-ecw-ee .sgs-richtext-body a:hover,
.portal-ecw-ee .sgs-launcher-card__btn:hover,
.portal-ecw-ee .sgs-hero__btn-primary:hover,
.portal-ecw-ee .sgs-cta__btn-primary:hover {
    background-color: #005BA4;
    border-color: #005BA4;
    color: #fff;
}

/* --------------------------------------------------
   GENERAL BOOTSTRAP OVERRIDES
-------------------------------------------------- */

body {
    background-color: var(--tfs-bg);
    color: var(--tfs-text);
}

a {
    color: var(--tfs-accent);
}

    a:hover,
    a:focus {
        color: var(--tfs-accent);
    }

.btn-primary {
    background-color: var(--tfs-accent);
    border-color: var(--tfs-accent);
    border-radius: 0.2rem;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--sgs-burntaccent);
        border-color: var(--sgs-burntaccent);
    }

.btn-outline-primary {
    color: var(--tfs-accent);
    border-color: var(--tfs-accent);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: var(--tfs-accent);
        border-color: var(--tfs-accent);
        color: #fff;
    }

.bg-light {
    background-color: var(--tfs-primary-100) !important;
}

.border,
.card,
.table,
.form-control,
.form-select {
    border-color: var(--tfs-border);
}

.card {
    background-color: var(--tfs-white);
}

/* --------------------------------------------------
   PAGE
-------------------------------------------------- */

.tfs-page {
    background-color: var(--tfs-bg);
}

    .tfs-page .hero {
        background-color: var(--tfs-primary-100);
        border: 1px solid var(--tfs-border);
        padding: 3rem 1.5rem;
        border-radius: 0.5rem;
    }

    .tfs-page .section-title {
        color: var(--tfs-primary-900);
        margin-bottom: 1rem;
    }

/* --------------------------------------------------
   SGS PAGE COMPONENTS
-------------------------------------------------- */

/* ---------- Utility Bar ---------- */

.utility-bar {
    color: var(--tfs-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.875rem;
}

    .utility-bar a {
        color: var(--tfs-white);
        text-decoration: none;
    }

        .utility-bar a:hover,
        .utility-bar a:focus {
            text-decoration: underline;
        }

.utility-auth-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--tfs-primary-200);
    color: var(--tfs-accent) !important;
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}

    .utility-auth-button:hover,
    .utility-auth-button:focus {
        background-color: var(--tfs-primary-100);
        color: var(--tfs-accent);
        text-decoration: none;
    }

button.utility-auth-button {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.utility-auth-button i {
    font-size: 0.9rem;
}

.utility-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .utility-contact i {
        font-size: 0.95rem;
        color: var(--tfs-primary-200);
    }

.utility-chat {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 25px;
}

.utility-right {
    min-height: 25px;
}

.utility-chat #zsiqwidget,
.utility-chat #zsiqbtn {
    display: inline-block;
    vertical-align: middle;
}

/* --------------------------------------------------
   HEADER / MAIN NAV
-------------------------------------------------- */

.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--tfs-border);
    position: relative;
    z-index: 1100;
}

.site-nav-shell {
    padding-left: 2rem;
    padding-right: 2rem;
}

.main-nav {
    background-color: #ffffff;
    padding: 0;
    position: static;
}

.site-brand {
    color: var(--tfs-primary-900);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 2rem;
}

    .site-brand:hover,
    .site-brand:focus {
        color: var(--tfs-accent);
        text-decoration: none;
    }

.main-nav .navbar-collapse {
    justify-content: flex-end;
    position: static;
}

.main-nav .navbar-nav {
    gap: 0.25rem;
    position: static;
}

.main-nav .nav-link {
    color: var(--tfs-primary-900);
    font-weight: 600;
    padding: 1.5rem 1rem;
    text-decoration: none;
}

    .main-nav .nav-link:hover,
    .main-nav .nav-link:focus,
    .main-nav .show > .nav-link {
        color: var(--tfs-accent);
    }

/* --------------------------------------------------
   MEGA MENU
-------------------------------------------------- */

.mega-dropdown {
    position: static !important;
}

.mega-menu {
    border-radius: 0;
    background-color: #ffffff;
    padding: 0;
}

.mega-menu__panel {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
}

.mega-menu__promo {
    background-color: var(--tfs-primary-100);
}

.mega-menu__promo-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mega-menu__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.mega-menu__promo-content,
.mega-menu__card-body,
.mega-menu__links {
    padding: 1.5rem;
}

.mega-menu__promo-title,
.mega-menu__heading,
.mega-menu__card h3 {
    color: var(--tfs-primary-900);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.mega-menu__heading {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tfs-accent);
}

.mega-menu__subtext,
.mega-menu__eyebrow,
.mega-menu__promo-text,
.mega-menu__card p {
    color: var(--tfs-primary-700);
}

.mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mega-menu__list li + li {
        margin-top: 0.75rem;
    }

    .mega-menu__list a,
    .mega-menu__card {
        text-decoration: none;
    }

    .mega-menu__list a {
        color: var(--tfs-primary-900);
        font-weight: 500;
    }

        .mega-menu__list a:hover,
        .mega-menu__list a:focus,
        .mega-menu__card:hover h3,
        .mega-menu__card:focus h3 {
            color: var(--tfs-accent);
        }

.mega-menu__card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--tfs-border);
    height: 100%;
}

    .mega-menu__card:hover,
    .mega-menu__card:focus {
        border-color: var(--tfs-accent);
    }

/* ---------- DESKTOP MEGA MENU BEHAVIOUR ---------- */

@media (min-width: 1200px) {
    .site-header,
    .main-nav,
    .site-nav-shell,
    .navbar-collapse,
    .navbar-nav {
        overflow: visible;
    }

        .main-nav .dropdown:hover > .dropdown-menu {
            display: block;
        }

        .main-nav .mega-dropdown .mega-menu {
            position: absolute !important;
            top: 100%;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            transform: none !important;
            margin-top: 0;
            border-top: 1px solid var(--tfs-border);
        }
}

/* ---------- MOBILE / TABLET ---------- */

@media (max-width: 1199.98px) {
    .site-nav-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-brand {
        margin-right: 0;
    }

    .main-nav .nav-link {
        padding: 0.75rem 0;
    }

    .mega-menu {
        position: static !important;
        width: 100%;
        min-width: 100%;
        max-width: none;
        transform: none;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
        border-top: 0;
    }

    .mega-menu__panel {
        max-width: none;
        padding: 1rem 0 0;
    }

    .mega-menu__promo-content,
    .mega-menu__card-body,
    .mega-menu__links {
        padding: 1rem 0;
    }
}