@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Fonts */
@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold ☞'), url('/fonts/Gilroy-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular ☞'), url('/fonts/Gilroy-Regular.woff') format('woff');
}

:root {
/* Colors */
--color-primary: #0bdfd8;
--color-primary-rgb: 11, 223, 216;
--color-secondary: #19183B;
--color-secondary-rgb: 25, 24, 59;

--color-feature: #212529;
--color-feature-rgb: 33, 37, 41;

--color-heading: #f1ffe7;

--color-background-secondary: #708993;
--color-background-secondary-rgb: 112, 137, 147;
--color-background: #19183B; /* background colour */
--color-background-rgb: 25, 24, 59;
--color-text: black;

/* Color Overrides */

--bs-primary-rgb: var(--background-secondary); /* header background */
--bs-body-bg: var(white); /* background colour */
--bs-body-text: var(--color-text); /* background colour */
--bs-secondary-bg-rgb : var(--color-background-secondary-rgb); /* feature background */
--btn-color: var(--color-primary); /* button color */
--btn-color-hover: var(--color-secondary); /* button hover color */
--bs-dark-rgb: var(--color-background-rgb); /* dark background color */
--bs-heading-color: var(--color-heading); /* heading color */
--bs-secondary-color: var(--color-heading); /* secondary text color */
--bs-link-color: var(--color-primary); /* link color */
--bs-link-color-rgb: var(--color-primary-rgb); /* link color */
--bs-link-hover-color:var(--color-secondary); /* link color */
--bs-link-hover-color-rgb: var(--color-secondary-rgb); /* link color */

/* Fonts */
    --bs-body-font-family: Gilroy-Regular,"Mozilla Headline", sans-serif;

/* Button border Radius */
    --bs-btn-border-radius: 6rem;

/* Feature Background */
    --feature-hover-color: var(--color-primary-rgb);

/* Latest Articles Background */
    --latest-articles-section-bg: 44, 62, 80;

/* Navigation */
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-x: 1rem;
    --bs-navbar-color: white;
    --bs-navbar-hover-color: var(--color-primary)
}

/* Padding */
.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.py-5 * strong{
    font-size: large;
    font-weight: bolder;
}

/* Subheadline styling ensures nested elements stay black */
.subheadline,
.subheadline * {
    color: #000000 !important;
    font-weight: bold;
}

/* Footer navigation links - smaller font size for lengthy text */
footer .nav-link {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Responsive images in py-5 sections (TextTextComponent, etc.) */
section.py-5 img,
section.py-5 * img,
.py-5 img,
.py-5 * img,
.py-5 p img,
.py-5 div img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Override for images in ratio containers - maintain aspect ratio */
.ratio img {
    height: 100% !important;
    object-fit: cover !important;
}

/* Preserve full-height backgrounds for TextTextComponent */
.text-text-component {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-text-component .text-text-bg {
    inset: 0;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    pointer-events: none;
    background: currentColor;
}

/* Image styles for py-4 sections */
section.py-4 img,
section.py-4 * img,
.py-4 img,
.py-4 * img,
.py-4 p img,
.py-4 div img {
    /* Apply Bootstrap classes: img-fluid w-100 rounded-2 my-4 */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

/* Video/iframe styles for py-4 sections (YouTube, Vimeo, etc.) */
section.py-4 iframe,
section.py-4 * iframe,
.py-4 iframe,
.py-4 * iframe,
.py-4 p iframe,
.py-4 div iframe {
    /* Apply similar styling as images: w-100 rounded-2 my-4 */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 315px !important; /* Standard YouTube embed height */
    aspect-ratio: 16/9 !important; /* Maintain video aspect ratio */
    border-radius: 0.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    border: none !important; /* Remove default iframe border */
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Gilroy-Bold', "Mozilla Headline", sans-serif;
    color: var(--color-primary) !important;
}

.text-bg-dark {
    background-color: var(--color-secondary) !important;
    /* color: var(--color-heading) !important; */
}

.text-bg-white {
    background-color: white !important;
}

.text-bg-theme {
    background-color: var(--color-primary) !important;
}

.text-theme {
    color: var(--color-primary) !important;
}

main {
    margin-top: 0px; /* offset for fixed header */
    color: var(--color-text);
}

a {
    text-decoration: none;
    
    &:hover:not(.btn) {
        text-decoration: underline;
    }
}

/* Carousel Button styles */
.btn-outline-dark {
    background-color: var(--color-primary);
}

.btn-outline-dark:hover {
    background-color: var(--color-secondary);
}

/* Button styles */
.btn {
    font-family: 'Gilroy-Bold', "Mozilla Headline", sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--btn-color);
    --bs-btn-border-color: var(--btn-color);
    --bs-btn-hover-bg: var(--btn-color-hover);
    --bs-btn-hover-border-color: var(--btn-color-hover);
    --bs-btn-active-bg: var(--btn-color-hover);
    --bs-btn-active-border-color: var(--btn-color-hover);
    --bs-btn-disabled-bg: var(--btn-color);
    --bs-btn-disabled-border-color: var(--btn-color);
    --bs-btn-color: var(--color-background) !important;
    --bs-btn-hover-color: var(--color-background-secondary) !important;
}

/* Secondary Body background */
.bg-body-secondary {
    background-color: var(--color-background-secondary) !important;
}

/* Navigation styles */
header .nav-link {
    --bs-nav-link-color: inherit;
}

.nav-link {
    margin: 0 1rem;
    font-family: 'Gilroy-Bold';
    font-size: 1.2rem;

    &:hover {
        text-decoration: none !important;
        color: var(--color-primary);
    }

    &.active {
        color: var(--color-primary) !important;
    }
}

/* Accordion styles */
.accordion {
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: var(--bs-body-bg);
    --bs-accordion-color: var(--color-heading)
}

.accordion-button,
.accordion-button:not(.collapsed) {
    color: var(--color-primary)
}

/* Form Styling */

select:invalid { 
    color: gray; 
}

/* Social Icons */
.social-icons a {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 50px;
    height: 50px;

    & i {
        line-height: 1;
    }
}

/* Footer Styles */
footer .nav {
    --bs-nav-link-color: inherit;

    &:hover {
        --bs-nav-link-hover-color: inital;
    }
}

.min-vh-60 {
    min-height: 60vh;
}

/* feature cards effect */
/* .feature-py-5 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;    
    background-color: var(--color-secondary) !important;
} */

.feature-cards {    
    .hover-float {
        transition: all 0.3s ease;

        &:hover {
            --bs-dark-rgb: var(--feature-hover-color);
            transform: translateY(-10px);
            color: var(--color-primary) !important;

            h3 {
                color: var(--color-primary) !important;
                a {
                    color: var(--color-primary) !important;
                }
            }
        }

    }
}


/* latest articles */
.latest-articles-section {
    --bs-secondary-rgb: var(--latest-articles-section-bg);
}

.latest-articles-section .ratio {
    position: relative;
    width: 100%;
}

.latest-articles-section .ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
}

/* Navbar styles */
header .navbar-collapse {

    flex-grow: unset;

    @media (max-width: 992px) {
        top: 100%;
        left: 0px;
        position: absolute;
        z-index: 2;
        background-color: rgb(var(--bs-dark-rgb));
        width: 100%;
        height: calc(100vh - 100%);
        
    }
    
    .dropdown-menu {
        --bs-dropdown-bg: rgb(var(--bs-dark-rgb));
        --bs-dropdown-color: unset;
        --bs-dropdown-border-color: unset;
        --bs-dropdown-link-color: #ffffff;
        width: auto !important;
        min-width: 300px !important;
        border-radius: 0;
        top: calc(100% - 2px);

        @media (max-width: 991px) {
            text-align: center;
        }

        @media (min-width: 992px) {
            min-height: 20vh;
        }

        .dropdown-item {
            display: block;
            width: 100%;
            padding-left: 1rem;
            padding-right: 1rem;
            white-space: nowrap;

            &:hover {
                background-color: var(--color-primary);
                color: #ffffff;
            }
        }
    }
}

/* Pattern background */
.background-pattern {
    background-repeat: repeat;
}

.background-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}