/* ==========================================================================
   Core CSS Variables & Button System
   Based on project style guide
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {

    /* --- Brand Colours --- */
    
    --primary-content-color:    #1F4350;
    
    --color-primary:            #0090D4;    /* Primary button bg */
    --color-primary-hover:      #1F4350;    /* Primary button hover bg */
    --color-primary-focus:      #FFD000;    /* Primary button focus bg */
    
    --color-blue-tint:          #f2fdff;    /* Background colour for highlights

    --color-secondary:          #025328;    /* Secondary button bg */
    --color-secondary-hover:    #01401F;    /* Secondary button hover bg */

    --color-tertiary:           #025328;    /* Tritary button border */
    --color-tertiary-hover:      #025328;    /* Tritary button hover bg */
    --color-tertiary-hover-text: #F6F9F8;   /* Tritary button hover text */

    --color-tertiary-white:           #ffffff;    /* Tritary button border */
    --color-tertiary-hover-white:      #025328;    /* Tritary button hover bg */
    --color-tertiary-hover-text-white: #F6F9F8;   /* Tritary button hover text */

    --color-fourth:             #575756;    /* Fourth button border */
    --color-fourth-hover:       #1F4350;    /* Fourth button hover border */
    --color-fourth-hover-text:  #FFFFFF;    /* Fourth button hover text */

    --color-base:               #575756;    /* Base button text */
    --color-base-bg:            #E3E3E3;    /* Base button bg */
    --color-base-hover-bg:      #D8D8D8;   /* Base button hover bg (approx) */

    /* --- Text Colours --- */
    --color-text-white:         #FFFFFF;
    --color-text-dark:          #575756;
    --color-text-green:         #025328;

    /* --- Link Colours --- */
    --color-link:               #1F4350;
    --color-link-hover:         #1F4350;

    /* --- Focus --- */
    --color-focus:              #FFD000;

    /* --- Form --- */
    --color-form-border:        #575756;
    --color-form-radio:         #0090D4;

    /* --- Button Sizing --- */
    --btn-padding-y:            0.625rem;   /* ~10px */
    --btn-padding-x:            1.4rem;    /* ~28px */
    --btn-padding-y-sm:         0.375rem;   /* Small button */
    --btn-padding-x-sm:         1.25rem;
    --btn-padding-y-lg:         0.75rem;    /* Big button */
    --btn-padding-x-lg:         2.25rem;
    --btn-padding-y-mega:       1rem;       /* Mega button */
    --btn-padding-x-mega:       3rem;
    --btn-font-size:            1rem;
    --btn-font-size-sm:         0.875rem;
    --btn-border-radius:        4px;
    --btn-border-width:         2px;
    --btn-transition:           all 0.2s ease-in-out;
}


/* --------------------------------------------------------------------------
   2. Base Button Reset & Shared Styles
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-family: inherit;
}

.btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. Button Variants
   -------------------------------------------------------------------------- */

/* --- Primary --- */
.btn-primary {
    color: var(--color-text-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:focus,
.btn-primary:focus-visible {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    outline: 3px solid var(--color-focus) !important;
    box-shadow: 0 0 0 0;
}

/* --- Secondary --- */
.btn-secondary {
    color: var(--color-text-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

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

.btn-secondary:focus,
.btn-secondary:focus-visible {
    color: var(--color-text-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* --- Tertiary (outline green) --- */
.btn-tertiary {
    color: var(--color-tertiary);
    background-color: transparent;
    border-color: var(--color-tertiary);
}

.btn-tertiary:hover {
    color: var(--color-fourth-hover-text);
    background-color: var(--color-tertiary-hover);
    border-color: var(--color-tertiary-hover);
}

.btn-tertiary:focus,
.btn-tertiary:focus-visible {
    color: var(--color-text-dark);
    background-color: transparent;
    border-color: var(--color-text-dark);
}

/* --- Tertiary (white) --- */
.btn-tertiary-white {
    color: var(--primary-content-color);
    background-color: var(--color-tertiary-white);
    border: 1px solid var(--color-primary-hover);
}

.btn-tertiary-white:hover {
    color: #ffffff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-tertiary-white:focus,
.btn-tertiary-white:focus-visible {
    color: var(--color-text-dark);
    background-color: transparent;
    border-color: var(--color-text-dark);
}

/* --- Fourth (outline grey) --- */
.btn-fourth {
    color: var(--color-fourth);
    background-color: transparent;
    border-color: var(--color-fourth);
}

.btn-fourth:hover {
    color: var(--color-fourth-hover-text);
    background-color: var(--color-fourth-hover);
    border-color: var(--color-fourth-hover);
    
}

.btn-fourth:focus,
.btn-fourth:focus-visible {
    color: var(--color-text-dark);
    background-color: transparent;
    border-color: var(--color-text-dark);
}

/* --- Base (solid grey) --- */
.btn-base {
    color: var(--color-base);
    background-color: var(--color-base-bg);
    border-color: var(--color-base-bg);
}

.btn-base:hover {
    color: var(--color-base);
    background-color: var(--color-base-hover-bg);
    border-color: var(--color-base-hover-bg);
}

.btn-base:focus,
.btn-base:focus-visible {
    color: var(--color-text-dark);
    background-color: var(--color-base-bg);
    border-color: var(--color-text-dark);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: #ffffff;
    pointer-events: none;
    background-color: #9AA5AB;
    border-color: #9AA5AB;
    opacity: 1;
}

.btn-outline {
    background-color: #ffffff;
    border: 1px solid var(--color-primary);
    padding:10px !important;
    transition: 0.3s all;
    min-width: 50px;
}

.btn-outline:hover {
    border-color: var(--color-primary-hover);
    background: #E0FBFF;
}

.btn-outline:focus, .btn-outline:focus-visible {
    color: #ffffff;
    background-color: #FFFFFF;
    border-color: var(--color-primary-hover);
    outline: 3px solid var(--color-focus) !important;
    box-shadow: 0 0 0 0;
}

.btn-pagination {
    background-color: #ffffff;
    border: 1px solid var(--color-primary);
    padding:10px !important;
    transition: 0.3s all;
}

.btn-pagination:hover {
    background-color: var(--color-primary-hover);
    border: 1px solid var(--color-primary-hover);
    padding:10px !important;
    transition: 0.3s all;
    color:#ffffff;
}

.btn-pagination-active {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding:10px !important;
    transition: 0.3s all;
    color:#ffffff;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Button Sizes
   -------------------------------------------------------------------------- */

.btn-sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--btn-font-size-sm);
}

.btn-lg {
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
}

.btn-mega {
    padding: var(--btn-padding-y-mega) var(--btn-padding-x-mega);
    font-size: 1.125rem;
}




/* --------------------------------------------------------------------------
   5. Links
   -------------------------------------------------------------------------- */

a,
.link {
    color: var(--color-link);
    text-decoration: underline;
    transition: var(--btn-transition);
}

a:hover,
.link:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}

a:focus-visible,
.link:focus-visible {
    color: var(--color-link);
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   6. Form Fields
   -------------------------------------------------------------------------- */

.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--btn-font-size);
    font-family: inherit;
    line-height: 1.4;
    color: var(--color-text-dark);
    background-color: var(--color-text-white);
    border: 1px solid var(--color-form-border);
    border-radius: var(--btn-border-radius);
    transition: var(--btn-transition);
}

.form-control::placeholder {
    color: #999;
}

.form-control:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
}

/* --- Radio Buttons --- */
.form-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-form-border);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.375rem;
    cursor: pointer;
    transition: var(--btn-transition);
}

.form-radio:checked {
    border-color: var(--color-form-radio);
    background-color: var(--color-form-radio);
    box-shadow: inset 0 0 0 3px var(--color-text-white);
}

.form-radio:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.form-select:focus, .btn-primary:focus-visible {
    background-color: #ffffff;
    border-color: var(--color-primary);
    outline: 3px solid var(--color-focus) !important;
    box-shadow: 0 0 0 0;
}

.form-check-input {
    border-color: #6c757d;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

.form-check-input:checked {
    background-color: var(--color-primary);
}




/* --------------------------------------------------------------------------
   7. Fonts
   -------------------------------------------------------------------------- */

/* inter-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
    font-display: swap; 
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); 
}
/* inter-700 - latin */
@font-face {
    font-display: swap; 
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}
/* inter-800 - latin */
@font-face {
    font-display: swap; 
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/inter-v20-latin-800.woff2') format('woff2');
}
/* Regular */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

/* Italic */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: optional;
}

/* Bold */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}


/* --------------------------------------------------------------------------
   8. Globals
   -------------------------------------------------------------------------- */

body {
    font-family: 'inter-variable', sans-serif;
    font-size:16px;
    font-style:normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-bg {
    background: linear-gradient(180deg, rgba(0, 144, 212, 0.20) 35.1%, rgba(255, 255, 255, 0.20) 100%);
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 60vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    color: var(--primary-content-color);
    margin-bottom: 15px;
}

.main-outer {
    padding: 160px 50px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .main-outer {
        padding: 130px 20px;
    }
}

hr.blue {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1;
    border-color: var(--color-primary);
}

.alert-warning {
    --bs-alert-color: #333333;
    --bs-alert-bg: var(--color-blue-tint);
    --bs-alert-border-color: var(--color-primary);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

/* --------------------------------------------------------------------------
   9. Navigation
   -------------------------------------------------------------------------- */

.navbar {
    background-color: transparent;
    padding: 30px 50px;
    border-bottom: 1px solid var(--color-primary);
}
.navbar-brand {
    width: 244px;
    height: auto;
    margin-right: 30px;
    transition: all 0.2s ease;
    
}

.navbar-brand img {
    width: 244px;
    height: 43px;
    aspect-ratio: 244 / 43;
    transition: all 0.2s ease;
}

.navbar-toggler {
    padding: 0;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.navbar-toggler:focus {
    outline: 3px solid var(--color-focus) !important;
    box-shadow: 0 0 0 0;
}

.dropdown-menu.show {
    display: block;
    margin-top: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dropdown-item {
    color: #333333;
}

@media (max-width: 768px) {
    .navbar {
        background-color: transparent;
        padding: 20px;
    }
    .navbar-brand {
        width: 230px;
        height: auto;
        margin-right: 20px;
    }
    .navbar-brand img {
        width: 230px;
        height: 40px;
        aspect-ratio: 230 / 40;
    }
}

@media (max-width: 337px) {
    .navbar {
        background-color: transparent;
        padding: 20px;
    }
    .navbar-brand {
        width: 185px;
        height: auto;
        margin-right: 10px;
    }
    .navbar-brand img {
        width: 185px;
        height: 32px;
        aspect-ratio: 185 / 32;
    }
}

.nav-link {
    font-size: 16px;
    color: #333333;
    font-family: 'inter-variable', sans-serif;
    padding-right: 10px !important;
    padding-left: 10px !important;
    transition: all 0.2s ease;

}

@media (max-width: 991px) {
    .nav-link {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

.nav-outer {
    transition: background-color 0.3s ease;
}

.nav-outer.is-scrolled {
    background-color: #E5F4FB;
}

.nav-outer.is-scrolled .navbar-brand {
    width: 220px;
    height: auto;
    margin-right: 20px;

}

.nav-outer.is-scrolled .navbar-brand img {
    width: 220px;
    height: 37px;
    aspect-ratio: 220 / 37;

}

.nav-outer.is-scrolled .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

.dropdown-item.active, .dropdown-item:active {
    color: black;
    text-decoration: none;
    background-color: #E5F4FB;
}

/* --------------------------------------------------------------------------
   9. Login pages
   -------------------------------------------------------------------------- */

.login-card {
    max-width: 520px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.login-image img {
    width:300px;
    height:auto
}

@media (max-width: 420px) {
    .login-image img {
        width:250px;
        height:auto
    }
}

@media (max-width: 330px) {
    .login-image img {
        width:200px;
        height:auto
    }
}

.login-card .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--btn-transition);
}

.login-card .close-btn:hover {
    color: var(--color-primary-hover);
}

.login-card .close-btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.login-header {
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;

}

.login-header-rule {
    border-bottom: 2px solid var(--color-primary);
    display: block;
    margin: 15px -50px;
}

.login-header .logo-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a1a;
    font-family: 'inter-variable', sans-serif;
}

.login-header .logo-title img {
    height: 40px;
    margin-right: 0.75rem;
}

.login-header .subtitle {
    color: var(--color-primary);
    font-size: 1.125rem;
    margin-top: 0.25rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

.login-section h2 {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}

.register-section {
    background-color: #eef5ee;
    border-radius: 0 0 12px 12px;
    margin: 1.5rem -50px -50px;
    padding: 28px 50px;
    padding-bottom: 50px;
}

.register-section h2 {
    color: var(--color-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'inter-variable', sans-serif;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

footer {
    padding: 60px 50px;
    background-color: #E5F4FB;
}

@media (max-width: 768px) {
    footer {
        padding: 60px 20px;
    }
}
.footer-logo img {
    margin-left:auto;
    display: block;
    width: 100px;
}

/* --------------------------------------------------------------------------
   11. Images
   -------------------------------------------------------------------------- */

.image-outer {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #CECECE;
    width: 100%;
    background: #F5F5F5;
}