/* TT2 bespoke css for header and footer */
/* =========================================
   1. Base & Utilities
   ========================================= */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../bespoke/fonts/Outfit-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../bespoke/fonts/Outfit-Bold.ttf') format('truetype');
}

body {
    font-family: Outfit, sans-serif !important;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    background-color: #f7f7f7;
}

body li {
    font-size: 1rem;
}

/* =========================================
   2. Navbar Styles
   ========================================= */

/* AMJ 19/01/2026 - Add bottom shadow to header */
nav.navbar {
    box-shadow: 0 3px 6px #00000029;
}

nav.navbar {
    background-color: #f7f7f7;
    padding: 1.5625rem 0; 
}

nav.navbar .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav.navbar .menu-main-container li {
    margin: 0;
}

nav.navbar .navbar-brand {
    margin: 0;
    padding: 0;
}

nav.navbar .navbar-brand img {
    width: 217px;
}

/* =========================================
   3. Navbar Expand & Navigation
   ========================================= */
.navbar-expand-md > .container {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-expand-md .navbar-nav {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.125rem; 
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.navbar-expand-md .navbar-nav .nav-link {
    color: #1a202c; 
    margin: 0 0.75rem;
    padding: 0;
    font-weight: 600;
}

/* =========================================
   4. Custom Link Buttons
   ========================================= */
.navbar-expand-md .navbar-nav .custom-link-btn .nav-link {
    display: inline-block;
    border-radius: 2.5rem; 
    padding: 0.625rem 2rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

/* Primary Outline */
.navbar-expand-md .navbar-nav .custom-link-btn--primary-outline .nav-link {
    background-color: #f7f7f7;
    border: #081457 1px solid;
    color: #081457;
}
.navbar-expand-md .navbar-nav .custom-link-btn--primary-outline .nav-link:hover {
    border: #394378 1px solid;
    color: #081457;
}

/* Primary Full */
.navbar-expand-md .navbar-nav .custom-link-btn--primary-full .nav-link {
    background-color: #081457;
    border: #081457 1px solid;
    color: #ffffff;
}
.navbar-expand-md .navbar-nav .custom-link-btn--primary-full .nav-link:hover {
    background-color: #394378;
    color: #ffffff;
}

/* Yellow Full */
.navbar-expand-md .navbar-nav .custom-link-btn--yellow-full .nav-link {
    background-color: #fbba00;
    border: #fbba00 1px solid;
    color: #081457;
}
.navbar-expand-md .navbar-nav .custom-link-btn--yellow-full .nav-link:hover {
    background-color: #fbc733;
    color: #081457;
}

/* Homepage Only logic */
.custom-link-btn--homepage-only { display: none; }
.home .navbar-expand-md .navbar-nav .custom-link-btn--homepage-only { display: block; }


/* =========================================
   5. Footer Styles
   ========================================= */
.footer {
    /*AMJ 19/01/2026 - Add blue line at top to separate from page main contents */
    border-top: 8px solid #081457;

    color: #1A202C;
    /*padding: 2rem 0;*/
}

.footer .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
}

.footer a {
    color: #1A202C;
    text-decoration: none;
}

.footer-nav {
    padding: 1.875rem 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#menu-footer {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#menu-footer .menu-item {
    font-weight: 700;
    margin: 0;
}

.footer-nav .back-to-top {
    margin: 1rem auto 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.footer-nav .back-to-top:hover { text-decoration: none !important; }
.footer-nav .back-to-top svg { margin-left: 1rem; }

/* =========================================
   6. Media Queries
   ========================================= */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-fluid, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: calc(100% - 50px);
        margin: 0 auto;
    }
}

/* --- Medium Devices (Tablets, >= 768px) --- */
@media (min-width: 768px) {
    /*.footer { padding: 1.875rem 0; }*/
    
    /* Large screens: Flex layout for footer menu */
    @media (min-width: 1200px) {
        #menu-footer {
            display: flex; 
            grid-template-columns: none;
        }
    }
}

/* --- Max Width 991.98px --- */
@media (max-width: 991.98px) {
    nav.navbar { padding: 1.5rem 0; }
    nav.navbar .container-fluid {
        padding: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
    nav.navbar .container-fluid .menu-main-container {
        padding: 1.5rem 0 0; 
        min-width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* --- Mobile Devices (Max Width 767.98px) --- */
@media (max-width: 767.98px) {
    body {
        font-size: 16px;
        line-height: 24px;
    }

    /* Navbar Mobile Logic */
    nav.navbar .menu-main-container { min-width: 100%; }
    .navbar-expand-md .navbar-nav {
        padding: 0.9375rem 0; 
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 1rem;
        gap: 1.5rem; 
        width: 100%;
        justify-content: center;
    }
    .navbar-expand-md .navbar-nav .menu-item {
        flex: 1 0 45%; 
        white-space: nowrap;
        text-align: center;
    }
    nav.navbar .menu-main-container .menu-item .nav-link {
        padding: 0.625rem 0; 
        font-size: 1.125rem;
    }
    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 0.875rem; 
        margin: 0;
        width: 100%;
    }

    /* Footer Mobile Logic */
    .footer .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .footer-nav { padding: 1.875rem 1rem; }
    .footer-nav .col-md-12 { padding: 0; }

    #menu-footer {
        display: flex; 
        flex-direction: column;
        width: 100%;
    }

    .footer-nav .back-to-top {
        margin: 1rem auto 0 0;
        align-self: flex-start; 
    }
}