/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #063f5e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1fc9d5; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: rgba(255, 255, 255, 0.6);  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1fc9d5; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #e9f7f8;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #81b9b0;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #12d6db;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);

  min-height: 100vh;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
@media (min-width: 1200px) {

  /* ---------- Container ---------- */
  .navmenu {
    padding: 0;
  }

  /* ---------- Menu List ---------- */
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  /* ---------- Menu List Items ---------- */
  .navmenu li {
    position: relative;
  }

  /* ---------- Staff Login Button ---------- */
  .navmenu a.staff-login,
  .navmenu a.staff-login:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;                     /* spacing between icon and text */
    box-sizing: border-box;
    padding: 0.5rem 0.75rem !important; /* consistent button size */
    border: 1px solid;               /* border for button shape */
    border-radius: 4px;
    background: transparent;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  }

  .navmenu a.staff-login:hover {
    color: #24947c;
    background: #fff;
  }

  /* Cancel the "last child" padding trim for the Staff Login button */
  .navmenu li:last-child > a.staff-login {
    padding-right: 0.75rem !important;
  }

  /* Prevent li:hover > a color rule from overriding button color */
  .navmenu li:hover > a.staff-login {
    color: #24947c;
  }

  /* ---------- General Links ---------- */
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  /* ---------- Link Icons ---------- */
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  /* Remove right padding for last menu item */
  .navmenu li:last-child a {
    padding-right: 0;
  }

  /* Hover & Active Link Color */
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

} /* end media query (min-width: 1200px) */



/* =======================================================================
   NAVMENU - MOBILE VIEW
   ======================================================================= */
@media (max-width: 1199px) {

  /* ---------- Mobile Toggle Button ---------- */
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  /* ---------- Menu Container ---------- */
  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  /* ---------- Collapsed Menu List ---------- */
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px; /* top, right, bottom, left */
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  }

  /* ---------- General Links ---------- */
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  /* ---------- Link Icons ---------- */
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  /* ---------- Active & Hover Colors ---------- */
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  /* ---------- Mobile Menu Active State ---------- */
  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }

  /* ---------- Staff Login Button (Mobile) ---------- */
  .navmenu a.staff-login,
  .navmenu a.staff-login:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;          /* center text & icon */
    gap: 0.5rem;                      /* spacing between icon/text */
    width: calc(100% - 40px);         /* full width minus side gutters */
    margin: 8px 20px;                 /* side margins */
    padding: 12px 16px !important;    /* override default link padding */
    box-sizing: border-box;

    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), white 92%);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  }

  .navmenu a.staff-login:hover {
    color: var(--contrast-color);
    background: var(--accent-color);
    border-color: var(--accent-color);
  }

  /* Remove circular background from icon inside Staff Login button */
  .navmenu a.staff-login i,
  .navmenu a.staff-login:focus i {
    width: auto;
    height: auto;
    margin-left: 0;
    border-radius: 0;
    background: none;
    font-size: 1rem;
    line-height: 1;
    transition: none;
  }

  /* Prevent hover color rules from overriding button color */
  .navmenu li:hover > a.staff-login {
    color: inherit;
  }

} /* end media query (max-width: 1199px) */


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  background: var(--background-color);
  color: var(--default-color);
  padding: 50px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  cursor:default;
}

/* Logo + name */
.footer .footer-brand img.footer-logo {
  width: 48px;
  height: 48px;
  display: block;
}
.footer .footer-name h2 {
  margin: 0;
  line-height: 1.15;
  font-weight: 800;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--accent-color), #000 20%);
}

/* Contact sections */
.footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer .footer-line {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), #000 35%);
  font-size: 0.95rem;
}
.footer .footer-contact a {
  color: color-mix(in srgb, var(--accent-color), #000 10%);
  text-decoration: none;
}
.footer .footer-contact a:hover {
  text-decoration: underline;
}

/* Responsive alignment */
@media (max-width: 767px) {
  .footer {
    text-align: center;
  }
  .footer .footer-brand {
    justify-content: center;
  }
  .footer .footer-contact {
    align-items: center;
  }
  .footer .footer-name h2 {
    text-align: center;
  }
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
.loader {
  width: 180px;
  height: 140px;
  display: block;
  margin: 0 auto 20px;
  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
  background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
  background-repeat: no-repeat;
  background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
  position: relative;
  box-sizing: border-box;
}
.loader::after {
  content: '';  
  position: absolute;
  left: 2px;
  top: 65px;
  width: 2px;
  height: 6px;
  color: #FFF;
  box-sizing: border-box;
  animation: animloader 0.6s linear infinite;
}

@keyframes animloader {
  0% {
    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
  }
  50% {
    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
}