::-webkit-scrollbar {
    background: hsl(217.78deg 44.75% 100%);
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: hsl(217.78deg 44.75% 54%);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(217.78deg 44.75% 95%);
}

:focus-visible {
outline: 2px solid #12a3c9; 
}

button.gridjs-sort-neutral { opacity: 1 !important; position: absolute; bottom: 8px; right: 8px; }

th.gridjs-th-sort .gridjs-th-content { width: 100% !important; }

table.gridjs-table { table-layout: auto !important; }

th.gridjs-th { white-space: normal !important; }

abbr { text-decoration: underline !important; }

    /* Import Rubik font */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root{
  --base-clr:hsl(217.78deg 44.75% 95%);
  --line-clr: hsl(217.78deg 44.75% 90%);
  --main-clr:hsl(217.78deg 44.75% 35.49%);
  --hover-clr: hsl(192.46deg 83.56% 80%);
  --hover-clr-2: hsl(192.46deg 83.56% 90%);
  --text-clr: hsl(217.78deg 44.75% 10%);
  --accent-clr: #12A3C9;
  --secondary-text-clr: #b0b3c1;
  --R-B: 8px;
  --scroll-offset: 0px; /* Initialize variable */
  --page-padding: 0.5rem;
  --grid-gap: var(--page-padding);
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset); /* Use dynamic scroll offset */
}


/* Brand Colour: Navy Blue (#325083) - needs light text */
.bg-blue {
  background-color: #325083 !important;
  color: #ffffff !important;
}

.text-blue {
  color: #325083 !important;
}

/* Brand Colour: Sky Blue (#12A3C9) - needs dark text */
.bg-sky {
  background-color: #12A3C9 !important;
  color: #0a2a3b !important; /* dark navy/blue-grey for better contrast */
}

.bg-sky-light {
  background-color: #A6E7F5 !important;
  color: #1B294A !important;
}

/* Brand Colour: Golden Yellow (#F8CA4D) - needs dark text */
.bg-yellow {
  background-color: #F8CA4D !important;
  color: #1B294A !important; /* deep indigo for brand consistency and contrast */
}

/* Brand Colour: Deep Indigo (#1B294A) - needs light text */
.bg-navy {
  background-color: #1B294A !important;
  color: #ffffff !important;
}

.bg-welsh {
    background: linear-gradient(180deg, #fad8ae, #ef761f);
    background-size: 200% 400%;
    background-position: top;
    color: #40150a !important;
    transition: background-position 0.3s ease;
}

.bg-welsh:hover {
    background-position: bottom;
}


.bg-blue-h {
    background: linear-gradient(180deg, #d0f2fb00, #d0f2fb);
    background-size: 200% 400%;
    background-position: top;
    transition: background-position 0.3s ease;;
}

.bg-blue-h:hover {
    background-position: bottom;
}



/* Base styles */
.main-page {
  font-family: 'Rubik', sans-serif;
  line-height: 1.5;
  background-color: #F9FAFC; /* Soft background for contrast */
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background-color: #fff;
  color: var(--text-clr);
  display: grid;
  grid-template-columns: auto 1fr;
}


.container {
    max-width: 1200px; /* Prevents content from stretching too wide */
    width: 100%; /* Keeps it flexible */
    margin: 0 auto; /* Centers content */
}


 .link-line {
      position: relative;
      display: inline-block;
      color: hsl(192.46deg 83.56% 34%);
      text-decoration: none;
      font-weight: 600;
    }

    .link-line::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background-color: #12A3C9;
      transition: width 0.3s ease;
    }

    .link-line:hover::after,
    .link-line:focus::after {
      width: 0%;
    }

.space { height: 8px; }
.space-x { height: 32px; }

/* Headings */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 7.5rem);
  font-family: "barlow Condensed", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: clamp(-1px, -0.5vw, -4px);
  text-align: left;
  color: #12A3C9;
  opacity: 0;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  mix-blend-mode: difference;
    max-width: 760px;
}

.grid-left h1 {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
  letter-spacing: clamp(0.3px, 0.2vw, 1px);
  line-height: 1.2;
    font-weight: 400;
    text-align: left;
    color: hsl(217.78deg 44.75% 97%);
    opacity: 0;
  	text-transform: none;
    mix-blend-mode: normal;
    max-width: 760px;
    letter-spacing: -1.6px;
}

.word {
      display: inline-block;
      transform: translateY(100%);
      opacity: 0;
  }

h2 {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: hsl(217.78deg 44.75% 35.49%);
    letter-spacing: -1.6px;
    padding-top: var(--scroll-offset);
    max-width: 760px;
}

h3 {
    font-size: 24px;
    font-weight: 500;
    color: hsl(217.78deg 44.75% 35.49%);
    max-width: 760px;
}

h4 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    color: #C29400; /* Darker gold for better contrast */
    max-width: 760px;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: #444; /* Improved from grey */
    max-width: 760px;
}

h6 {
    font-size: 12px;
    font-weight: 600;
    max-width: 760px;
}

h6 a {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-clr);
}




/* Paragraph styles */
p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: hsl(0deg 0% 20%);
    max-width: 760px;
    letter-spacing: -.01em;
  }

p.small {
    font-size: 0.875rem;
    color: hsl(0deg 0% 20%);
}

p.large {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: hsl(0deg 0% 0%);
}

/* Links - Higher contrast */
a {
    color: #0078B8; /* Deep blue with strong contrast */
    text-decoration: none;
    font-weight: 400;
}

.desktop-space {
  margin: 80px 0;
}



/* 1st side menu */

  #sidebar{
    box-sizing: border-box;
    height: -webkit-fill-available;
    max-height: 100%;
    width: 100px;
    padding: 15px 0;
    background-color: var(--base-clr);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--R-B);
    z-index: 3;
    margin: 8px 0 8px 8px;
  }

  #sidebar ul{
    list-style: none;
    display: flex;
    gap: 24px;
    flex-direction: column;
  }

  #sidebar ul li.active a{
    font-weight: 600;
  }

  #sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
    text-decoration: none;
    color: var(--text-clr);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-direction: column;
    text-align: center;
    line-height: 1.5;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2px;
  }
  .dropdown-btn{
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
  }


  .logo-container {
    display: inline-block;
    overflow: hidden; /* Hides text before animation */
    background-color: #325083;
    border-radius: 24px;
    padding: 12px 6px;
    margin: 0px 18px;
  }

  span.logo {
      color: #fff !important;
      font-weight: 500;
      display: inline-block;
      transform: translateX(100%); /* Start hidden below */
      line-height: 0 !important;
  }

  #sidebar li i{
    padding: 6px 12px;
    border-radius: 24px;
  }

  li.active span {
    font-weight: 600;
  }

  #sidebar li.active i{
    background-color: var(--hover-clr);
  }

  .ph, .ph-fill {
    font-size: 24px;
    color: hsl(217.78deg 44.75% 50%);
  }

.nd-menu li i {
    display: none;
}

    


/* click 2nd side menu */

  .side-menu {
    position: fixed;
    left: 108px;
    top: 0;
    width: 230px;
    height: -webkit-fill-available;
    background-color: var(--base-clr);
    border-radius: var(--R-B);
    display: none;
    transition: left 0.3s ease-in-out; /* Smooth slide effect */
    z-index: 4;
    margin: 8px 8px 8px 4px;
    display: none;
  }

  .side-menu-title-close { 
    display: flex;
    align-items: center;
    padding: 12px;
    justify-content: space-between;
    background: hsl(219, 45%, 90%);
    border-radius: var(--R-B);
    margin: 4px;    
  }

  .side-menu ul { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    gap: 4px !important;
    margin: 4px;
  }

.nd-menu li {
        display: flex;
        flex: 33%;
        border-radius: 8px;
        background: hsl(219, 45%, 90%);
      }

      .nd-menu li i {
    display: flex;
          font-size: 18px;
          color: #12a3c9;
}

      .side-menu ul li a { 
        height: 120px;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        align-items: flex-start;
      }

  .side-menu ul li a { 
    font-size: 12px !important;
    text-align: left !important;
    align-items: flex-start;
    font-weight: 400;
    color: var(--text-clr);
    padding: 0 10px;
    display: flex;
    height: 100px;
    border-radius: var(--R-B);
  }

  .side-menu ul li a.active { 
    background-color: var(--hover-clr);
    font-weight: 600;
  }

  .side-menu ul li a:hover { 
    background-color: hsl(192.46deg 83.56% 90%);
  }

  .close-btn {
    font-size: 20px;
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
  }

  .trans-bg {
    display: none;
  }


/* Main */

  main {
    background-color: #fff;
    overflow: auto; /* Allows scrolling while keeping sticky elements working */
    height: 100vh; /* Ensure it takes full height */
    position: relative; /* Helps with stacking context */
    padding: 8px;
  }

  .main-body {
    margin-left: auto;
    margin-right: auto;
  }



.page-menu {
    position: sticky;
    top: 0;
    width: 100%;
    background: hsl(219, 45%, 95%);
    padding: 8px;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--R-B);
    margin-top: 8px;
    display: flex;
    align-items: center;
  }

  /* Scrollable menu container */
  .sub-menu {
    width: 100%;
    display: flex;
    gap: 4px;
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

.sub-menu::scroll-button(left) {
    content: "\E05A" / "Scroll Left";
    font-family: "Phosphor" !important;
    background: none;
    border-radius: 8px;
    border: 0;
    font-size: 24px;
    padding: 0;
    color: hsl(217.78deg 44.75% 50%);
}


.sub-menu::scroll-button(right) {
    content: "\E02E" / "Scroll Right";
    font-family: "Phosphor" !important;
    background: none;
    border-radius: 8px;
    border: 0;
    font-size: 24px;
    color: hsl(217.78deg 44.75% 50%);
    padding: 0;
}

.sub-menu::scroll-button(*):disabled {
    color: hsl(217.78deg 44.75% 80%);
}

  .sub-menu a.active {
    background: hsl(217.78deg 44.75% 35%);
    color: hsl(217.78deg 44.75% 90%);
  }

  /* Show scrollbar for Chrome, Safari */
  .sub-menu::-webkit-scrollbar {
    height: 15px;
  }

  .sub-menu::-webkit-scrollbar-track {
    background: hsl(217.78deg 44.75% 97%);
    border-radius: var(--R-B);
  }

  .sub-menu::-webkit-scrollbar-thumb {
    background: hsl(217.78deg 44.75% 93%);
    border-radius: var(--R-B);
  }

  .sub-menu::-webkit-scrollbar-thumb:hover {
    background: hsl(217.78deg 44.75% 90%);
  }

  /* Navigation links */
  .sub-menu a {
    flex-shrink: 0;
    font-size: 12px;
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
    color: hsl(217.78deg 44.75% 30%);
    text-decoration: none;
    transition: 0.25s;
    white-space: nowrap;
    scroll-snap-align: start;
    border: 1px solid hsl(217.78deg 44.75% 90%);
  }

  /* Hover effect */
  .sub-menu a:hover {
    background: hsl(217.78deg 44.75% 90%);
    color: hsl(217.78deg 44.75% 30%);
  }


/* RESPONSIVE STYLES */
  @media (max-width: 1024px) {
      .container {
          width: 95%; /* Increases width slightly for medium screens */
      }

      h2 { font-size: 45px; letter-spacing: -1px; }
      h3 { font-size: 1.6rem; }
      h4 { font-size: 1.4rem; }
      h5 { font-size: 1.15rem; }
      h6 { font-size: 1rem; }


      .desktop-space {
        display: none;
      }



    .full-grid { 
      height: auto !important;
      min-height: auto !important;
    }

    .content .card-sub-pages {
      display: none;
    }

    .card-sub-pages {
      margin: 0;
    }

    .m-80 {
      display: block;
    margin: 40px 0;
    }

    .grid-2 {
      display: block;
    }
    
  }

  @media (max-width: 768px) {

      .container {
          width: 100%; /* Uses full width on smaller screens */
      }

      h1 { font-size: clamp(1.4375rem, -0.0398rem + 7.3864vw, 4.6875rem);     letter-spacing: -1px; }
      h2 { font-size: 32px; }
      h3 { font-size: 1.4rem; }
      h4 { font-size: 1.2rem; }
      h5 { font-size: 1rem; }
      h6 { font-size: 0.9rem; }
      .grid-left h1 { letter-spacing: -0.6px; }
      p { font-size: 0.95rem; }

      p.large { font-size: 1rem; }

      .space-x { height: 32px; }

      .main-page{
    grid-template-columns: 1fr;
  }

  .main-info {
    padding-bottom: var(--scroll-offset);
  }


  /* 1 side menu */
    #sidebar{
      height: fit-content;
      width: 100%;
      border-top: 1px solid var(--line-clr);
      padding: 12px 0;
      position: fixed;
      top: unset;
      bottom: 0;
      margin: 0;
      border-radius: 0;

      > ul{
        padding: 0;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        overflow-x: scroll;
        justify-content: space-evenly;
          gap:0;
      }
      ul li{
        height: 100%;
      }

      .logo-container, span.logo{
        display: none;
      }
    }

      .nd-menu li { 
        flex: 25%;
      }

  /* 2 side menu */

    .trans-bg {
      left: 0;
      right: 0;
      bottom: 90px;
      width: 100vw;
      height: 100vh;
      position: absolute;
      display: block;
      z-index: -2;
      background: rgba(255, 255, 255, .25);
    }

    .nd-menu {
    position: fixed;
    bottom: 82px;
    width: 100%;
    height: auto;
    background-color: var(--base-clr);
    border: 1px solid var(--line-clr);
    border-left: none;
    padding: 20px;
    border-top-right-radius: var(--R-B);
    border-top-left-radius: var(--R-B);
    padding: 0;
    }

    .side-menu {
    left: 0;
    padding: 0;
    margin: 0;
    width: 0;
    }

      .side-menu ul li a { 
        height: 80px;
      }

      .close-btn {
        height: 48px;
    width: 48px;
      }
      

  }

  @media (max-width: 480px) {
    .container { padding: 10px; }
    h2 { font-size: 32px; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.85rem; }
    p { font-size: 0.9rem; }
    p.large { font-size: 0.95rem; }
    .nd-menu li { flex: 35%; }
  }