@font-face {
   font-family: PoppinsRegular;
   src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
   font-family: PoppinsBold;
   src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
   font-family: PoppinsItalic;
   src: url('../fonts/Poppins-Italic.ttf') format('truetype');
}

@font-face {
   font-family: PoppinsThin;
   src: url('../fonts/Poppins-Thin.ttf') format('truetype');
}
   @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
   }

   .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   }
   nav {
   display: inline-flex;
   justify-content: space-around;   
   background-color: #fff;
   padding: 10px;
   position: sticky;  /* or position: fixed; depending on your needs */
   top: 0;
   width: 100%;
   z-index: 100;
   }
   .brand {
   margin-left: 20vw;
   top: 0;
   }

   .navbar-brand {
   display:none;
   }
   nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   }

   nav ul li {
   position: relative;
   z-index: 10;
   }

   nav ul li a {
   display: block;
   color:#637179;
   font-weight:600;
   text-align: left;
   padding: 14px 16px;
   text-decoration: none;
   font-size:large;
   }

   nav ul li a:hover {
   color: #637179;
   font-weight: 600; /* Changed from 800 to prevent text jumping */
   background-color: #f5f5f5; /* Changed from aliceblue to very dim gray */
   text-decoration: underline;
   }

   nav ul li ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #fff;
   padding: 0;
   font-size: larger;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Added for better visibility */
   z-index: 1000; /* Ensure dropdowns appear above other content */
   }

   nav ul li:hover ul {
   color: #637179;
   display: block;
   }

   nav ul li ul li {
   width: 225px;
   }

   nav ul li ul li a {
   padding: 10px;
   }

   .hamburger{
   display:none;
   }

.header {
   display: block;
   margin-left: auto;
   margin-right: auto;
   overflow-clip-margin: content-box;
   overflow: clip;
   display: block;
   margin: 0 auto;
   /* border-radius: 16px;  Slightly rounded edges */
   box-shadow: 0 0 32px 0 rgba(128,128,128,0.25), 0 0 8px 2px rgba(128,128,128,0.10); /* Soft gray glow */
   background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
   padding: 4px; /* Optional: for gradient border effect */
}

   .header img {
   width: 100%;
   height: auto;
   object-fit: cover;
   overflow-clip-margin: content-box;
   overflow: clip;
   display: block; /* Make the image a block element */
   margin: 0 auto; /* Center the image horizontally */
   }

   #hamburger{
   display:none;
   }
   .sidenav{
   display:none;
   }

   .grid-container{
   width:85%;

   }
   .header-container {
   margin-left: 20vw;
   }
   .page-content {
   margin-left: 20vw;
   }
.footer {
   margin-left: 20vw;
   padding:15px;
   background: linear-gradient(180deg, #002569 25%, #00163C 100%);
   color: white;
   height: auto;
}

/* ============================================
   Copilot enhanced code section
   Accessibility CSS Classes - WCAG 2.1 AA
   ============================================ */

/* Skip to main content link - WCAG 2.4.1 Bypass Blocks */
/* Hidden off-screen by default, visible only when focused via keyboard */
.skip-link {
   position: absolute !important;
   top: -100px !important;
   left: 0 !important;
   background: #002569 !important;
   color: #fff !important;
   padding: 12px 16px !important;
   z-index: 10000 !important;
   text-decoration: none !important;
   font-weight: bold !important;
   border-radius: 0 0 4px 0 !important;
   clip: rect(0, 0, 0, 0) !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
}

.skip-link:focus,
.skip-link:active {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   clip: auto !important;
   width: auto !important;
   height: auto !important;
   overflow: visible !important;
   outline: 3px solid #f4623a;
   outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers - WCAG 1.3.1 */
.visually-hidden,
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Focus visible styles for keyboard users - WCAG 2.4.7 */
:focus-visible {
   outline: 3px solid #f4623a;
   outline-offset: 2px;
}

/* Ensure interactive elements have visible focus states */
a:focus,
button:focus {
   outline: 2px solid #f4623a;
   outline-offset: 2px;
}

/* Remove default focus outline only when focus-visible is supported */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
   outline: none;
}


@media (pointer: coarse) and (max-device-width: 768px), (-webkit-min-device-pixel-ratio: 2) 
{

   body, p, h1, h2, h3, h4, h5, h6 {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 95%;
   }
   span{
   font-size: 1rem !important;
   }
      .grid-container {
      width: 100%;
      }
      .no-mobile {
      display: none;
      }
      .header-container {
      margin-left: 5px!important;
      }
   .page-content {
      width: 90%;
      height: auto;
      margin-left: 5px !important;
   }
   #hamburger {
      display: inline-block;
      border: solid;
      border-color: black;
      border-radius: 0.25em;
   }
   .nav-hamburger {
      padding: 2em 2em;
    /*  position: fixed;*/
      z-index: 10;
      font-size: 2.0em !important;
      color: black;
      background-color: white;
      width: 1.5em; /* or a fixed px value, e.g. 48px */
     /* height: 1.5em;*/ /* or a fixed px value, e.g. 48px */
      line-height: 1.5em;
      text-align:center;
      border: solid;
      border-color: black;
      border-radius: 0.25em;
      display: inline-block;
      padding: 0;
      cursor: pointer;
   }

      #mainNav{
      display:none;
      }
      nav {
      flex-direction: column;
      align-items: flex-start;
      }
      .navbar-brand {
      display: block;
      padding: 3px 3px 3px 3px!important;
      }
      nav ul {
      flex-direction: column;
      display: none;
      }

      nav ul li {
      width: 100%;
      }

      nav ul li ul {
      position: static;
      }

      .hamburger {
      display: block;
      cursor: pointer;
      padding: 0px 16px;
      background-color: #333;
      color: white;
      text-align: center;
      }

      .header {
      width: 100%;
      height: auto;
      display: block; /* Make the image a block element */
      margin: 0 auto; /* Center the image horizontally */
      }
      .header img {
     
      }
      .page-content {
      margin-left: 5px !important; 
      }
      .footer {
      font-size-adjust: 0.30;
      margin-left: 5px!important;
      }
}