/* =======================================
   1) IMPORTS & TOKENS
======================================= */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Lato:400,500,600,700,800,900);
:root{
/* =======================================
   Core Colors
   ======================================= */
--uan-navy:#16174F;
--uan-oxford:#161755;
--uan-steel:#337AB7;
--uan-glacier:#2D7DA4;
--uan-slate:#384452;

--uan-electric:#00B3FE;
--uan-azure:#0182C4;
--uan-sky:#20B8FF;
--uan-vapor:#3FC1FE;

--uan-green:#729E43;
--uan-lime:#6AA42F;
--uan-sage:#9FC45F;
--uan-pistachio:#CEE39D;

--uan-firebrick:#B22222;

--white:#ffffff;
--black:#000000;
/* =======================================
   Gray Scale
   ======================================= */
--uan-gray-900:#2B2B2B;
--uan-gray-800:#3A3A3A;
--uan-gray-700:#4A4A4A;
--uan-gray-600:#5C5C5C;
--uan-gray-500:#787878;
--uan-gray-400:#9A9A9A;
--uan-gray-300:#B8B8B8;
--uan-gray-200:#D6D6D6;
--uan-gray-100:#F2F2F2;

/* =======================================
   RGB Versions (for opacity utilities)
   ======================================= */

--uan-navy-rgb:22,23,79;
--uan-oxford-rgb:22,23,85;
--uan-steel-rgb:51,122,183;
--uan-glacier-rgb:45,125,164;
--uan-slate-rgb:56,68,82;

--uan-electric-rgb:0,179,254;
--uan-azure-rgb:1,130,196;
--uan-sky-rgb:32,184,255;
--uan-vapor-rgb:63,193,254;

--uan-green-rgb:114,158,67;
--uan-lime-rgb:106,164,47;
--uan-sage-rgb:159,196,95;
--uan-pistachio-rgb:206,227,157;

--uan-firebrick-rgb:178,34,34;

--uan-gray-900-rgb:43,43,43;
--uan-gray-800-rgb:58,58,58;
--uan-gray-700-rgb:74,74,74;
--uan-gray-600-rgb:92,92,92;
--uan-gray-500-rgb:120,120,120;
--uan-gray-400-rgb:154,154,154;
--uan-gray-300-rgb:184,184,184;
--uan-gray-200-rgb:214,214,214;
--uan-gray-100-rgb:242,242,242;

}

/* =======================================
   Text Color Utilities
   ======================================= */

.text-uan-navy{color:var(--uan-navy)!important;}
.text-uan-oxford{color:var(--uan-oxford)!important;}
.text-uan-steel{color:var(--uan-steel)!important;}
.text-uan-glacier{color:var(--uan-glacier)!important;}
.text-uan-slate{color:var(--uan-slate)!important;}

.text-uan-electric{color:var(--uan-electric)!important;}
.text-uan-azure{color:var(--uan-azure)!important;}
.text-uan-sky{color:var(--uan-sky)!important;}
.text-uan-vapor{color:var(--uan-vapor)!important;}

.text-uan-green{color:var(--uan-green)!important;}
.text-uan-lime{color:var(--uan-lime)!important;}
.text-uan-sage{color:var(--uan-sage)!important;}
.text-uan-pistachio{color:var(--uan-pistachio)!important;}

.text-firebrick {color:var(--uan-firebrick)!important;}

.text-uan-gray-900{color:var(--uan-gray-900)!important;}
.text-uan-gray-800{color:var(--uan-gray-800)!important;}
.text-uan-gray-700{color:var(--uan-gray-700)!important;}
.text-uan-gray-600{color:var(--uan-gray-600)!important;}
.text-uan-gray-500{color:var(--uan-gray-500)!important;}
.text-uan-gray-400{color:var(--uan-gray-400)!important;}
.text-uan-gray-300{color:var(--uan-gray-300)!important;}
.text-uan-gray-200{color:var(--uan-gray-200)!important;}
.text-uan-gray-100{color:var(--uan-gray-100)!important;}

/* =======================================
   Background Utilities (Opacity Enabled)
   ======================================= */
.bg-uan-navy{--uan-bg-opacity:1;background-color:rgba(var(--uan-navy-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-oxford{--uan-bg-opacity:1;background-color:rgba(var(--uan-oxford-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-steel{--uan-bg-opacity:1;background-color:rgba(var(--uan-steel-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-glacier{--uan-bg-opacity:1;background-color:rgba(var(--uan-glacier-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-slate{--uan-bg-opacity:1;background-color:rgba(var(--uan-slate-rgb),var(--uan-bg-opacity))!important;}

.bg-uan-electric{--uan-bg-opacity:1;background-color:rgba(var(--uan-electric-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-azure{--uan-bg-opacity:1;background-color:rgba(var(--uan-azure-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-sky{--uan-bg-opacity:1;background-color:rgba(var(--uan-sky-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-vapor{--uan-bg-opacity:1;background-color:rgba(var(--uan-vapor-rgb),var(--uan-bg-opacity))!important;}

.bg-uan-green{--uan-bg-opacity:1;background-color:rgba(var(--uan-green-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-lime{--uan-bg-opacity:1;background-color:rgba(var(--uan-lime-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-sage{--uan-bg-opacity:1;background-color:rgba(var(--uan-sage-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-pistachio{--uan-bg-opacity:1;background-color:rgba(var(--uan-pistachio-rgb),var(--uan-bg-opacity))!important;}

.bg-uan-gray-900{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-900-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-800{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-800-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-700{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-700-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-600{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-600-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-500{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-500-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-400{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-400-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-300{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-300-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-200{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-200-rgb),var(--uan-bg-opacity))!important;}
.bg-uan-gray-100{--uan-bg-opacity:1;background-color:rgba(var(--uan-gray-100-rgb),var(--uan-bg-opacity))!important;}

/* =======================================
   Opacity Utilities (Bootstrap-style)
   ======================================= */
.bg-opacity-10{--uan-bg-opacity:.1;}
.bg-opacity-25{--uan-bg-opacity:.25;}
.bg-opacity-50{--uan-bg-opacity:.5;}
.bg-opacity-75{--uan-bg-opacity:.75;}
.bg-opacity-100{--uan-bg-opacity:1;}
/* =======================================
   Border Utilities
   ======================================= */
.border-uan-navy      { border-color: var(--uan-navy) !important; }
.border-uan-oxford    { border-color: var(--uan-oxford) !important; }
.border-uan-steel     { border-color: var(--uan-steel) !important; }
.border-uan-glacier   { border-color: var(--uan-glacier) !important; }
.border-uan-slate     { border-color: var(--uan-slate) !important; }

.border-uan-electric  { border-color: var(--uan-electric) !important; }
.border-uan-azure     { border-color: var(--uan-azure) !important; }
.border-uan-sky       { border-color: var(--uan-sky) !important; }
.border-uan-vapor     { border-color: var(--uan-vapor) !important; }

.border-uan-green     { border-color: var(--uan-green) !important; }
.border-uan-lime      { border-color: var(--uan-lime) !important; } 

/* =========================================
      GLOBAL STYLES 
========================================= */
@media print {
  .navbar,
  .top-bar,
  .social-icons,
  .btn,
  .sidebar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    font-family: "Lato", sans-serif;
  }
}

 

/* =========================================
   Base Typography
========================================= */

html {
  font-size: 14px; /* controls rem sizing globally */
  height: 100%;    /* Allow body to fill viewport */
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--uan-slate);
  height: 100%;    /* Allow flexbox to fill viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main, #main-content {
  flex: 1 0 auto; /* main expands to fill space */
}

.checkmark-list {
  list-style: none;
  padding-left: 0;
}

.checkmark-list li {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  margin-bottom: .5rem;
}

address {
  font-style: normal;
}

/* =========================================
   Headings
========================================= */

h1, h2, h3, h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: var(--uan-oxford);
}

h1 { font-size: 2.125rem; }   /* Page Title */
h2 { font-size: 1.5rem; }     /* Major Section */
h3 { font-size: 1.25rem; }    /* Subsection */
h4 { font-size: 1.125rem; }   /* Minor Heading */

/* =========================================
   Links
========================================= */

a { color: var(--uan-steel); }

a:hover,
a:focus { color: var(--uan-navy); }

/* =========================================
   Bold Text
========================================= */

strong, b {
  font-weight: 600; /* smoother than 700 for Lato */
}

.important {font-weight: bold; color: firebrick;}
/* No‑wrap utility: forces text or icons to stay on one line.
   Useful for Font Awesome icons or labels that should never break. */
.no-wrap, .fa-no-wrap {white-space: nowrap;}


/* Highlight text yellow when selected  */ 
::selection {background: #FFD773; }

/* phone number styled like normal text normally on desktop but hyperlinked on mobile */
.phone-link {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .phone-link {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
  }
}
 
/* Reusable disabled style for links and text */
.disabled, a.disabled, .disabled a {
  pointer-events: none;        /* prevents click */
  color: var(--bs-secondary-color, #6c757d); /* muted look */
  opacity: 0.65;               /* match Bootstrap's disabled opacity */
  text-decoration: none;       /* no underline */
  cursor: not-allowed;         /* visual cue */
}

/* Keep the same on hover/focus */
a.disabled:hover,
a.disabled:focus,
.disabled a:hover,
.disabled a:focus {
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
}
/* ========================================= */

 
/* =========================================
     DOWNLOAD CARD/FILE META COMPONENT
========================================= */
.file-meta {
  border: 0;
  border-radius: .375rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  overflow: hidden;
  text-align: center;
  font-size: .875rem;
}

/* Date Block */
.file-meta__date {
  background-color: #CEE39D;
  color: #333; /* improved contrast */
  font-weight: 600;
  padding: .5rem;
  border-bottom: 4px solid #4e4e4e;
    text-transform: uppercase;
}

/* Download Block */
.file-meta__download {
  padding: .5rem;
  background-color: #f8f9fa;
}

.file-meta__download a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #495057; /* slightly stronger contrast */
  text-decoration: none;
}

.file-meta__download a:hover {
  color: #000;
  text-decoration: underline;
}

.file-meta__download a:focus-visible {
  outline: 3px solid #4e4e4e;
  outline-offset: 2px;
}

/* Reduced motion compliance */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Responsive */
@media (min-width: 576px) {
  .file-meta {
    font-size: .8rem;
  }
} 

/* =========================================
   TOP BAR LAYOUT
========================================= */

/* Logo */
.top-logo img {
  max-width: 180px; /* choose one size */
  height: auto;
}

/* Shared container layout */
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Desktop layout */
@media (min-width: 768px) {
  .top-logo {
    order: 1;
    margin-right: auto;
    text-align: left;
  }

  .top-actions {
    order: 2;
    text-align: right;
  }
}

/* Mobile layout */
@media (max-width: 767.98px) {
  .top-bar .container {
    flex-direction: column;
    align-items: center;
  }

  .top-logo,
  .top-actions {
    width: 100%;
    padding-top: 10px;
    text-align: center;
  }
}
/* =========================================
   LOGO SIZE CONTROL
========================================= */

.aos-logo,
.uan-logo {
  height: auto;
  max-height: 60px;
}

/* Tablet */
@media (max-width: 1199.98px) {
  .aos-logo,
  .uan-logo {
    max-height: 52px;
  }
}

/* Bootstrap md breakpoint (problem area ~991px) */
@media (max-width: 991.98px) {
  .aos-logo,
  .uan-logo {
    max-height: 46px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .aos-logo,
  .uan-logo {
    max-height:  46px;
  }
}
/* ========================================= */
 
/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005ea2;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
}


/* Top bar spacing */
.top-bar {
  padding: 15px 0;
}


.btn-scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1010;

  width: 3rem;
  height: 3rem;
  display: block;
  cursor: pointer;

  background-color: var(--bs-white);
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 .1rem rgba(227, 229, 233, .25);

  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: all .2s linear;
}

.btn-scroll-top.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Progress square */
.btn-scroll-top svg.progress-square path {
  fill: none;
  stroke: var(--uan-glacier);
  stroke-width: 2;
  transition: all .2s linear;
}

/* Center arrow */
.scroll-top-arrow {
  position: absolute;
  inset: 0;
  margin: auto;
  fill: var(--uan-glacier);
  pointer-events: none;
}

 /* =========================================
   Component: Resource List
   Description: Styled list of external
   links (PDFs, videos, documents).
   ========================================= */
/* Base List Reset */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-item {
  margin-bottom: 12px;
}

/* Ordered List Counter (numbers inside title) */
ol.resource-list {counter-reset: resource-counter;
}

ol.resource-list > .resource-item {counter-increment: resource-counter;}

ol.resource-list > .resource-item .resource-title::before {
  content: counter(resource-counter) ". ";
  font-weight: 700;
  margin-right: 6px;
}

/* Base Card */
.resource-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(var(--uan-steel-rgb), 0.25);
  border-radius: 8px;
  text-decoration: none;
  background-color: #f9f9f9;
  transition: all 0.2s ease;
}

/* Hover / Focus */
.resource-link:hover,
.resource-link:focus {
  background-color: #eef4ff;
  border-color: var(--uan-azure);
  outline: 2px solid rgba(var(--uan-azure-rgb), 0.35);
}

/* Title */
.resource-title {font-weight: 600; font-size: 0.95rem;}

/* File Type (PDF / YouTube) */
.resource-type {
  font-size: 0.85rem;
 /*  color: var(--uan-slate);*/
  white-space: nowrap;
}

/* PDF Variant */
.resource-link--pdf:hover,
.resource-link--pdf:focus {
  background-color: rgba(var(--uan-firebrick-rgb), 0.08);
  border-color: var(--uan-firebrick);
  outline: 2px solid rgba(var(--uan-firebrick-rgb), 0.35);
}

.resource-link--pdf:hover .resource-type,
.resource-link--pdf:focus .resource-type {
  color: var(--uan-firebrick);
}

/* Excel Variant */
.resource-link--excel:hover,
.resource-link--excel:focus {
  background-color: rgba(33, 115, 70, 0.08); /* Excel green */
  border-color: #217346;
  outline: 2px solid rgba(33, 115, 70, 0.35);
}

.resource-link--excel:hover .resource-type,
.resource-link--excel:focus .resource-type {
  color: #217346;
}



/* Excel Variant */
.resource-link--exl:hover,
.resource-link--pdf:focus {
  background-color: rgba(var(--uan-firebrick-rgb), 0.08);
  border-color: var(--uan-firebrick);
  outline: 2px solid rgba(var(--uan-firebrick-rgb), 0.35);
}

.resource-link--pdf:hover .resource-type,
.resource-link--pdf:focus .resource-type {
  color: var(--uan-firebrick);
}



/* STACKED VERSION (when description exists) */
.resource-link--stacked {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: start;
}

/* Title = top left */
.resource-link--stacked .resource-title {
  grid-column: 1;
  grid-row: 1;
}

/* Type = top right */
.resource-link--stacked .resource-type {
  grid-column: 2;
  grid-row: 1;
}

/* Description spans full width */
.resource-description {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.875rem;
  color: var(--uan-slate);
  font-weight: 400;
}


/* =========================================================
   UAN NAVBAR & DROPDOWN
   (Keyboard Safe + Bootstrap Compatible)
========================================================= */

/* ---------------------------------
   Remove Bootstrap animations
----------------------------------*/
/*
.navbar,
.navbar * {
  transition: none !important;
  animation: none !important;
}
*/

/* ---------------------------------
   Navbar spacing
----------------------------------*/
.navbar {
  padding: 0.75rem 0;
}

.navbar-nav .nav-item {
  margin-left: 1.25rem;
}

/* ---------------------------------
   Nav links
----------------------------------*/
.navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  color: var(--white) !important;
}

/* Hover + keyboard focus */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--uan-pistachio);
  color: var(--uan-navy) !important;
}

/* Active / open state */
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  background-color: var(--uan-sage);
  color: var(--uan-navy) !important;
}

/* ---------------------------------
   Dropdown Base
----------------------------------*/
.navbar .dropdown {
  position: relative;
}

.navbar .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  transform: none;
  inset: auto;

    background:rgba(var(--uan-slate-rgb),.85);
 /* Updated from gray */
  border: 0;
  border-radius: 0;
  padding: 0;

  display: none; /* hidden by default */
}

/* Bootstrap JS toggle support (DO NOT REMOVE) */
.navbar .dropdown-menu.show {
  display: block !important;
}

/* ---------------------------------
   Dropdown items
----------------------------------*/
.navbar .dropdown-menu .dropdown-item {
  color: var(--white);
  padding: 0.5rem 1rem;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: var(--uan-sage);
  color: var(--white);
}

/* =========================================================
   DESKTOP (≥ 992px)
   Hover + Keyboard Accessible
========================================================= */

@media (min-width: 992px) {

  .navbar .dropdown-menu {
    display: none;
  }

  /* Mouse hover */
  .navbar .dropdown:hover > .dropdown-menu,
  /* Keyboard tabbing */
  .navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
  }

}

/* =========================================================
   MOBILE (< 992px)
   Bootstrap click toggle
========================================================= */

@media (max-width: 991.98px) {

  .navbar .dropdown-menu {
    position: static;
    width: 100%;
    display: none;
    background-color: var(--uan-navy);
  }

  .navbar .dropdown-menu.show {
    display: block !important;
  }

}
 

/* Reading width (very helpful for instructions pages) */
.reading-width { max-width: 65ch; }

/* Center readable content */
.content-narrow { max-width: 850px; margin-inline: auto; }

/* Gentle section spacing */
.section-space { margin-top: 3rem; margin-bottom: 3rem; }

/* Better focus visibility (WCAG improvement) */
:focus-visible {
  outline: 3px solid var(--uan-azure);
  outline-offset: 2px;
}


/* =========================================================
   UAN BRAND BUTTONS — Bootstrap 5 Native Variable Override
   ========================================================= */

/* -----------------------------
   UAN NAVY (Primary Brand)
------------------------------*/
.btn-uan-navy,
.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--uan-navy);
  --bs-btn-border-color: var(--uan-oxford);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-slate);
  --bs-btn-hover-border-color: var(--uan-slate);

  --bs-btn-focus-shadow-rgb: var(--uan-azure-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-azure-rgb), .5);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--uan-azure);
  --bs-btn-active-border-color: var(--uan-azure);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--uan-navy);
  --bs-btn-disabled-border-color: var(--uan-oxford);
  --bs-btn-disabled-opacity: .65;
}


/* -----------------------------
   OUTLINE NAVY
------------------------------*/
.btn-outline-uan-navy,
.btn-outline-primary {
  --bs-btn-color: var(--uan-navy);
  --bs-btn-border-color: var(--uan-navy);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-navy);
  --bs-btn-hover-border-color: var(--uan-navy);

  --bs-btn-focus-shadow-rgb: var(--uan-azure-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-azure-rgb), .5);

  --bs-btn-active-bg: var(--uan-azure);
  --bs-btn-active-border-color: var(--uan-azure);
  --bs-btn-active-color: var(--white);

  --bs-btn-disabled-opacity: .65;
}


/* -----------------------------
   UAN LIME (Success Brand)
------------------------------*/
.btn-uan-lime,
.btn-success {

  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--uan-lime);
  --bs-btn-border-color: var(--uan-green);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-sage);
  --bs-btn-hover-border-color: var(--uan-sage);

  --bs-btn-focus-shadow-rgb: var(--uan-sage-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-sage-rgb), .5);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--uan-green);
  --bs-btn-active-border-color: var(--uan-green);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--uan-lime);
  --bs-btn-disabled-border-color: var(--uan-green);
  --bs-btn-disabled-opacity: .65;
}


/* -----------------------------
   OUTLINE LIME
------------------------------*/
.btn-outline-uan-lime,
.btn-outline-success {

  --bs-btn-color: var(--uan-lime);
  --bs-btn-border-color: var(--uan-lime);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-lime);
  --bs-btn-hover-border-color: var(--uan-lime);

  --bs-btn-focus-shadow-rgb: var(--uan-sage-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-sage-rgb), .5);

  --bs-btn-active-bg: var(--uan-green);
  --bs-btn-active-border-color: var(--uan-green);
  --bs-btn-active-color: var(--white);

  --bs-btn-disabled-opacity: .65;
}
 

/* -----------------------------
   UAN THEME (Slate → Sage Hybrid)
------------------------------*/
.btn-uan-theme {

  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--uan-slate);
  --bs-btn-border-color: var(--uan-slate);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-sage);
  --bs-btn-hover-border-color: var(--uan-sage);

  --bs-btn-focus-shadow-rgb: var(--uan-sage-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-sage-rgb), .5);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--uan-green);
  --bs-btn-active-border-color: var(--uan-green);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--uan-slate);
  --bs-btn-disabled-border-color: var(--uan-slate);
  --bs-btn-disabled-opacity: .65;
}


/* ---------------------------------------------
   OUTLINE UAN THEME (Slate → Sage Hybrid)
---------------------------------------------*/ 
.btn-outline-uan-theme {

  --bs-btn-color: var(--uan-slate);
  --bs-btn-border-color: var(--uan-slate);
  --bs-btn-bg: transparent;

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--uan-sage);
  --bs-btn-hover-border-color: var(--uan-sage);

  --bs-btn-focus-shadow-rgb: var(--uan-sage-rgb);
  --bs-btn-focus-shadow: 0 0 0 .25rem rgba(var(--uan-sage-rgb), .5);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--uan-green);
  --bs-btn-active-border-color: var(--uan-green);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

  --bs-btn-disabled-color: var(--uan-slate);
  --bs-btn-disabled-border-color: var(--uan-slate);
  --bs-btn-disabled-opacity: .65;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(var(--uan-azure-rgb), .6);
}
 

/* Solid Firebrick Button */
.btn-firebrick {
    background-color: #B22222;
    border-color: #B22222;
    color: #fff;
}

.btn-firebrick:hover,
.btn-firebrick:focus {
    background-color: #8b1a1a;
    border-color: #8b1a1a;
    color: #fff;
}

/* Outline Firebrick Button */
.btn-outline-firebrick {
    color: #B22222;
    border-color: #B22222;
}

.btn-outline-firebrick:hover,
.btn-outline-firebrick:focus {
    background-color: #B22222;
    border-color: #B22222;
    color: #fff;
}






/* =========================================================
/*             END BUTTONS  */
/* ========================================================= */



/* =====================================================
   UAN CALLOUT / NOTICE UTILITIES
   ===================================================== */

/* General callout base */
.uan-callout {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 6px solid;
  border-radius: .25rem;
 }

/* Viewing / confirmation notice (green) */
.uan-callout-sage {
  background: rgba(var(--uan-sage-rgb), .20);
  border-left-color: var(--uan-green);
}

/* Informational help (blue) */
.uan-callout-steel {
  background: rgba(var(--uan-steel-rgb), .08);
  border-left-color: var(--uan-steel);
}

/* Important attention (azure highlight) */
.uan-callout-azure {
  background: rgba(var(--uan-azure-rgb), .12);
  border-left-color: var(--uan-azure);
}

/* Warning / action required (stronger) */
.uan-callout-warning {
  background: rgba(255, 193, 7, .15);
  border-left-color: #ffc107;
}

/* Critical / error notice (firebrick) */
.uan-callout-firebrick {
  background: rgba(178, 34, 34, .10);
  border-left-color: #B22222;
}

   




.uan-border-top-steel {border-top:5px solid var(--uan-steel)}
/* ============================ */

/* =====================================================
   UAN CUSTOM BADGES (Bootstrap compatible)
   Usage: <span class="badge uan-badge-___">
   ===================================================== */

/* Base (optional but improves appearance consistency) */
.badge[class*="uan-badge-"] {
  font-weight: 600;
  padding: .45em .7em;
  letter-spacing: .02em;
  border-radius: .4rem;
}

.badge { vertical-align: middle; }

/* SLATE (dark neutral) */
.uan-badge-slate {
  background-color: var(--uan-slate);
  color: var(--white);
}


/* LIME (light green — needs dark text for contrast) */
.uan-badge-lime {
  background-color: var(--uan-lime);
  color: var(--black);
}


/* SAGE (soft green — dark text required for WCAG) */
.uan-badge-sage {
  background-color: var(--uan-sage);
  color: var(--black);
}


/* AZURE (primary accent) */
.uan-badge-azure {
  background-color: var(--uan-azure);
  color: var(--white);
}


/* FIREBRICK (error / deadline) */
.uan-badge-firebrick {
  background-color: #B22222;
  color: var(--white);
}

 



/* ===========================
       SIDEMENU 
=========================== */
/* Make the arrow and text align nicely */
.btn-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between arrow and text */
}

/* Default state: arrow points right (toward the text) */
.arrow-icon {
  transition: transform 0.3s ease;
  transform: rotate(0deg); /* points right by default */
}

/* When expanded (collapsed class removed), rotate arrow down */
.btn-toggle:not(.collapsed) .arrow-icon {
  transform: rotate(90deg); /* points down when expanded */
}

/* Default button style */
.btn-toggle {
  background-color: var(--white);  /* default bg */
  border-color: var(--uan-navy);    /* primary border */
  color: var(--uan-navy);           /* primary text */
}

/* Expanded state using aria-expanded="true" */
.btn-toggle[aria-expanded="true"] {
 
  background-color: var(--uan-navy); /* primary bg when open */
  color: var(--white);            /* white text when open */
}

.btn-toggle:hover {
  background-color: #CEE39D;
 color: var(--uan-navy) !important; }/* light primary tint on hover */
}



.nav-account .nav-item {
  margin: 0.125rem 0rem;
}
.nav-account .nav-item .nav-link {
  padding: 12px 16px;
  color: var(--uan-navy);
  line-height: 1;
  background-color: transparent;
  border-radius: 0.5rem;
  transition: 0.2s ease-in-out;
  font-weight: 500;
}
.nav-account .nav-item .nav-link svg {
  vertical-align: top;
}
.nav-account .nav-item .nav-link:hover {
  background-color: var(--uan-navy);
  color: var(--white);
}
.nav-account .nav-item .nav-link.active {
  background-color: var(--uan-sage);
  color: var(--white);
}





/* ============================= */
/*           DIVIDERS            */
/* ============================= */
.dropdown-divider, .sidebar-divider, hr.dropdown-divider 
{border-top: 1px solid rgba(var(--uan-slate-rgb), .15);}

.hline { border-bottom: 2px solid var(--uan-navy); } 

/* ============================ */



/* ============================= */
/* CAROUSEL / SLIDER */
/* ============================= */



/* --- Base Slider Container --- */
#main-slider {
  position: relative;
  /* margin-top: 110px;  */
}
/* --- Slide Item (Modern Responsive System) --- */
#main-slider .carousel .item {
  position: relative;
  width: 100%;
  height: 25vh; /* controls overall height */
  min-height: 350px; /* prevents it from getting too small */
  max-height: 650px; /* prevents it from getting too tall */
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* --- Background Layer --- */
#main-slider .slide-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
/* --- Slide Content --- */
#main-slider .carousel-content {
  position: relative;
  z-index: 2;
  padding: 60px 0;
}
/* --- Content Blocks --- */
.slide-block {
  margin-bottom: 25px;
}
.slide-title {
  color: #fff;
  text-shadow: 2px 2px 2px #999999;
  margin-bottom: 10px;
}
.slide-btn-row {
  margin-top: 5px;
}
/* --- Buttons --- */
#main-slider .carousel .btn-slide {
  padding: 8px 20px;
  background: #384452;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
}
#main-slider .carousel .btn-slide:hover {
  background-color: #9FC45F;
}
/* --- Arrows --- */
#main-slider .prev, #main-slider .next {
  position: absolute;
  top: 50%;
  background-color: #384452;
  color: #fff;
  margin-top: -20px;
  height: 40px;
  line-height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  z-index: 5;
}
#main-slider .prev {
  left: 10px;
}
#main-slider .next {
  right: 10px;
}
#main-slider .prev:hover, #main-slider .next:hover {
  background-color: #9FC45F;
}
/* --- Indicators --- */
#main-slider .carousel-indicators li {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 15px 0 0;
  position: relative;
}
#main-slider .carousel-indicators li:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  left: -3px;
  top: -3px;
}
#main-slider .carousel-indicators .active {
  background-color: #324452;
  border: 1px solid #384452;
}
#main-slider .carousel-indicators .active:after {
  background: rgba(147, 147, 147, 0.5);
  border: 1px solid rgba(147, 147, 147, 0.5);
}
/* --- Animations (kept intact) --- */
#main-slider .active .animation.animated-item-1 {
  animation: fadeInUp 300ms linear 300ms both;
}
#main-slider .active .animation.animated-item-2 {
  animation: fadeInUp 300ms linear 600ms both;
}
#main-slider .active .animation.animated-item-3 {
  animation: fadeInUp 300ms linear 900ms both;
}
#main-slider .active .animation.animated-item-4 {
  animation: fadeInUp 300ms linear 1200ms both;
}
/* ============================= */
/* RESPONSIVE HEIGHT CONTROL */
/* ============================= */
/* Large Desktop */
@media (min-width: 1200px) {
  #main-slider .carousel .item {
    /*    min-height: 600px;*/
  }
}
/* Tablet */
@media (max-width: 991px) {
  #main-slider {
    margin-top: 95px;
  }
  #main-slider .carousel .item {
    min-height: 450px;
  }
  .slide-title {
    font-size: 28px;
  }
}
/* Mobile */
@media (max-width: 576px) {
  #main-slider {
    margin-top: 60px;
  }
  #main-slider .carousel .item {
    min-height: 350px;
  }
  #main-slider .carousel-content {
    padding: 30px 0;
  }
  .slide-title {
    font-size: 22px;
  }
  .btn-slide {
    padding: 6px 14px;
    font-size: 14px;
  }
}
/* ============================= */
/* END CAROUSEL / SLIDER */
/* ============================= */

 /* =======================================
   DataTables Pagination - UAN Theme
   ======================================= */

/* Default buttons */
.dataTables_wrapper .pagination .page-link {
    color: var(--uan-steel);
    background-color: var(--white);
    border: 1px solid var(--uan-gray-300);
}

/* Hover state */
.dataTables_wrapper .pagination .page-link:hover {
    color: var(--white);
    background-color: var(--uan-sage);
    border-color: var(--uan-sage);
}

/* Active page */
.dataTables_wrapper .pagination .page-item.active .page-link {
    color: var(--white);
    background-color: var(--uan-navy);
    border-color: var(--uan-navy);
}

/* Focus (removes Bootstrap blue glow) */
.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--uan-navy-rgb), 0.25);
}

/* Disabled buttons */
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--uan-gray-400);
    background-color: var(--uan-gray-100);
    border-color: var(--uan-gray-200);
}

/* Optional: spacing tweak */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
}


/* ===================================
      PAGE-SPECIFIC CLASSES
=================================== */
 
/* ================================== */


/* =======================================
          SOCIAL ICONS
======================================= */

/* Base icon styles */
.social-icons a {
  color: #FFF !important; /* default color */
  font-size: 1.25rem; /* size of icons */
  transition: transform 0.2s, color 0.3s;
  text-decoration: none !important;
}

.social-icons a:hover {
  transform: translateY(-3px); /* subtle lift effect */
}

/* Brand colors on hover */
.social-icons a[href*="facebook"]:hover i {
  color: #1877F2; /* Facebook blue */
}

.social-icons a[href*="x.com"]:hover i {
  color: #000; /* X/Twitter blue */
}

.social-icons a[href*="youtube"]:hover i {
  color: #FF0000; /* YouTube red */
}

.social-icons a[href*="linkedin"]:hover i {
  color: #0A66C2; /* LinkedIn blue */
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color:#16174F;
}

.social-icons a:hover {
  background-color: #FFF;
  color: inherit; /* icon color changes already */
}