/* ==============================================
   IMAGE SIZE REFERENCE
   ------------------------------------------------
   Logo          : 250px wide, height auto (proportional)
                   File: images/logo.webp

   Hero Slider   : 800 × 600px (4:3 ratio)
                   Files: images/homeslides/*.webp or *.jpg

   News Card     : No images currently used in cards.
                   If added in future: 600 × 400px (3:2 ratio)

   Service Icons : Font Awesome icons — no image files needed.

   NOTE: Use .webp format wherever possible for best performance.
   Fallback to .jpg only if .webp is not available.
   Always write descriptive alt text for every image.
============================================= */
:root {
  --navy:         #09224e;
  --blue:         #2B5BA6;
  --dark:         #2C3E50;
  --mid:          #7F8C8D;
  --light-bg:     #f4f6f9;
  --white:        #ffffff;
  --border:       #dde3ec;
  --text:         #1c2233;
  --muted:        #556070;
  --font:         'Open Sans', sans-serif;
  --radius:       6px;
  --shadow:       0 2px 8px #c5cede;
  --shadow-hover: 0 6px 20px #b0bcce;
  --trans:        0.22s ease;
  --max-w:        1280px;
}

/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.65; font-size: 1rem; }
img   { max-width: 100%; height: auto; display: block; }
ul    { list-style: none; padding: 0; margin: 0; }
a     { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* =============================================
   SKIP LINK (WCAG 2.4.1)
============================================= */
.skip-link {
  position: absolute; top: -4rem; left: 0;
  background: var(--navy); color: var(--white);
  padding: 0.6rem 1.2rem; font-weight: 700;
  text-decoration: none; z-index: 9999;
  border-radius: 0 0 var(--radius) 0;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* =============================================
   LOGO BAR
============================================= */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
}
.site-header .container { display: flex; justify-content: center; }
.site-logo img { width: 250px; height: auto; }

/* =============================================
   NAVIGATION
============================================= */
.site-nav { background: var(--navy); position: relative; z-index: 400; }
.site-nav .container { position: relative; }

/* hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid #5a7ab5;
  color: var(--white);
  font-size: 1rem;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  border-radius: var(--radius);
  margin: 0.6rem 0;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font);
  font-weight: 600;
}
.nav-toggle:focus-visible { outline: 3px solid #ffd700; outline-offset: 2px; }

/* top-level list */
.nav-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* shared link/button styles */
.nav-list a,
.nav-list button.has-sub {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 1rem;
  color: var(--white);
  font-family: var(--font); font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans);
  line-height: 1;
  border-bottom: 3px solid transparent;
}
.nav-list a:hover,
.nav-list button.has-sub:hover { background: #1a3d6e; border-bottom-color: #5a7ab5; }
.nav-list a:focus-visible,
.nav-list button.has-sub:focus-visible { outline: 3px solid #ffd700; outline-offset: -3px; }

.nav-list button.has-sub .caret { font-size: 0.65rem; transition: transform var(--trans); }
.nav-list button.has-sub[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* level 2 */
.dropdown {
  display: none;
  position: absolute;
  top: 100%; left: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 230px;
  box-shadow: var(--shadow-hover);
  z-index: 500;
}
.dropdown.open { display: block; }
.dropdown > li { position: relative; }
.dropdown > li > a,
.dropdown > li > button.has-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem;
  color: var(--text);
  font-size: 0.85rem; font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  width: 100%;
  border-top: none;
}
.dropdown > li:last-child > a,
.dropdown > li:last-child > button.has-sub { border-bottom: none; }
.dropdown > li > a:hover,
.dropdown > li > button.has-sub:hover { background: var(--light-bg); color: var(--navy); border-bottom-color: var(--border); }
.dropdown > li > a:focus-visible,
.dropdown > li > button.has-sub:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* level 3 */
.dropdown-l3 {
  display: none;
  position: absolute;
  top: 0; left: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  min-width: 210px;
  box-shadow: var(--shadow-hover);
  z-index: 501;
}
.dropdown-l3.open { display: block; }
.dropdown-l3 > li > a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--text); font-size: 0.85rem; font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-decoration: none; white-space: nowrap;
}
.dropdown-l3 > li:last-child > a { border-bottom: none; }
.dropdown-l3 > li > a:hover { background: var(--light-bg); color: var(--navy); }
.dropdown-l3 > li > a:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* =============================================
   HERO SECTION
============================================= */
.hero {
  background: var(--light-bg);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-text h1 { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 0.4rem; }
.hero-text h2 { font-size: 1.1rem; font-weight: 400; color: #4a5c63; font-style: italic; margin-bottom: 1.25rem; }
.hero-text hr  { border: none; border-top: 2px solid var(--border); margin-bottom: 1.25rem; }
.hero-text p   { color: var(--muted); margin-bottom: 1rem; }
.hero-text ul  { padding-left: 1.2rem; list-style: disc; color: var(--muted); }
.hero-text ul li { margin-bottom: 0.3rem; }

@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-image { order: -1; }
}
@media (max-width: 639px) {
  .hero { padding: 2rem 0; }
  .hero-text h1 { font-size: 1.5rem; }
}

/* =============================================
   HERO SLIDER (WCAG-friendly carousel)
============================================= */
.slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--dark);
  /* fixed aspect ratio so layout doesn't jump */
  aspect-ratio: 4 / 3;
}
.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
}
.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* hide slides from AT except active */
.slide[aria-hidden="true"] { visibility: hidden; }
.slide[aria-hidden="false"] { visibility: visible; }

/* prev / next buttons */
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(9,34,78,0.65);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: background var(--trans);
  z-index: 10;
}
.slider-btn:hover  { background: var(--navy); }
.slider-btn:focus-visible { outline: 3px solid #ffd700; outline-offset: 2px; }
.slider-btn.prev   { left: 0.65rem; }
.slider-btn.next   { right: 0.65rem; }

/* dots
   – 24×24px touch target (WCAG 2.5.8)
   – Solid navy background on inactive so contrast is image-independent (WCAG 1.4.11)
   – Active dot uses solid white fill; inactive uses navy fill with white border
   – Focus ring is 3px #ffd700 with a 2px navy offset so it shows on any surface
*/
.slider-dots {
  position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.25rem;
  z-index: 10;
}
.slider-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--white);
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans), border-color var(--trans);
  /* inner filled circle via box-shadow instead of pseudo so we keep a clean DOM */
  box-shadow: inset 0 0 0 3px var(--navy);
}
.slider-dot[aria-current="true"] {
  background: var(--white);
  border-color: var(--white);
  box-shadow: inset 0 0 0 3px var(--white);
}
.slider-dot:hover {
  background: #bfd0ee;
  border-color: var(--white);
}
.slider-dot:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
  /* navy box under the yellow so it reads on light AND dark backgrounds */
  box-shadow: 0 0 0 5px var(--navy), inset 0 0 0 3px var(--navy);
}
.slider-dot[aria-current="true"]:focus-visible {
  box-shadow: 0 0 0 5px var(--navy), inset 0 0 0 3px var(--white);
}

/* pause button */
.slider-pause {
  position: absolute; bottom: 0.6rem; right: 0.65rem;
  background: rgba(9,34,78,0.65);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: var(--radius);
  width: 2rem; height: 2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  z-index: 10;
  transition: background var(--trans);
}
.slider-pause:hover  { background: var(--navy); }
.slider-pause:focus-visible { outline: 3px solid #ffd700; outline-offset: 2px; }

/* =============================================
   SERVICES ICON GRID
============================================= */
.services-section {
  background: var(--white);
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border);
}
.section-title { text-align: center; margin-bottom: 2.25rem; }
.section-title h2 { font-size: 1.65rem; font-weight: 700; color: var(--navy); }
.section-title p  { color: var(--muted); margin-top: 0.4rem; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1023px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }

.service-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 1.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans);
}
.service-card:hover {
  background: #e8eef7;
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  color: var(--navy);
}
.service-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.service-card i    { font-size: 2rem; color: var(--blue); margin-bottom: 0.85rem; }
.service-card span { font-size: 0.875rem; font-weight: 700; line-height: 1.3; }

/* =============================================
   NEWS & UPDATES
============================================= */
.news-section { background: var(--light-bg); padding: 3.5rem 0; border-bottom: 1px solid var(--border); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1023px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .news-grid { grid-template-columns: 1fr; } }

.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column;
  transition: box-shadow var(--trans), transform var(--trans);
}
.news-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.news-date { font-size: 0.78rem; color: var(--mid); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.news-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.35; }
.news-card h3 a { color: var(--navy); text-decoration: none; }
.news-card h3 a:hover { color: var(--blue); text-decoration: underline; }
.news-card h3 a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.news-card p  { font-size: 0.875rem; color: var(--muted); flex: 1; }
.news-card .read-more { display: inline-block; margin-top: 1rem; font-size: 0.82rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.news-card .read-more:hover { text-decoration: underline; }
.news-card .read-more:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.news-empty { text-align: center; grid-column: 1 / -1; color: var(--muted); font-style: italic; padding: 2rem 0; }

.news-footer-link { text-align: center; margin-top: 2rem; }
.btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font); font-size: 0.9rem; font-weight: 700;
  text-decoration: none;
  cursor: pointer; border: none;
  transition: background var(--trans), color var(--trans);
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--blue); color: var(--white); }
.btn-primary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* =============================================
   FOOTER
============================================= */
footer { background: var(--navy); color: rgba(255,255,255,0.88); }
.footer-top {
  padding: 3rem 0 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 1023px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px)  { .footer-top { grid-template-columns: 1fr; } }

.footer-top h2 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.footer-top p  { font-size: 0.875rem; margin-bottom: 0.5rem; }
.footer-top b  { color: var(--white); }
.footer-col-tagline { color: rgba(255,255,255,0.6); font-size: 0.875rem; font-style: italic; margin-bottom: 0.75rem; }
.footer-social { margin-top: 0.75rem; display: flex; gap: 0.75rem; }
.footer-social a { color: rgba(255,255,255,0.80); font-size: 2rem; transition: color var(--trans); text-decoration: none; }
.footer-social a:hover { color: var(--white); }
.footer-social a:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; border-radius: 2px; }

/* Accessibility statement button in footer */
.footer-a11y {
  margin-top: 1.25rem;
}
.btn-a11y {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.btn-a11y:hover {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border-color: rgba(255,255,255,0.65);
}
.btn-a11y:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1rem 0;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.65); }
.footer-bottom a:hover { color: var(--white); }

/* =============================================
   MOBILE NAV (< 1024px)
============================================= */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav-list {
    flex-direction: column;
    justify-content: flex-start;
    display: none;
    width: 100%;
    background: var(--navy);
  }
  .nav-list.open { display: flex; }

  .nav-list > li > a,
  .nav-list > li > button.has-sub {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    justify-content: space-between;
    font-size: 0.95rem;
  }
  .nav-list > li > a:hover,
  .nav-list > li > button.has-sub:hover { border-bottom-color: rgba(255,255,255,0.08); }

  .dropdown {
    position: static;
    border: none; border-top: none; border-radius: 0; box-shadow: none;
    background: rgba(0,0,0,0.25);
    min-width: 0; width: 100%;
  }
  .dropdown > li > a,
  .dropdown > li > button.has-sub {
    color: rgba(255,255,255,0.85);
    padding: 0.7rem 1.25rem 0.7rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.875rem;
    border-top: none;
  }
  .dropdown > li > a:hover,
  .dropdown > li > button.has-sub:hover { background: rgba(255,255,255,0.08); color: var(--white); border-bottom-color: rgba(255,255,255,0.06); }

  .dropdown-l3 {
    position: static;
    border: none; border-radius: 0; box-shadow: none;
    background: rgba(0,0,0,0.35);
    min-width: 0; width: 100%;
  }
  .dropdown-l3 > li > a {
    color: rgba(255,255,255,0.75);
    padding: 0.65rem 1.25rem 0.65rem 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.825rem;
  }
  .dropdown-l3 > li > a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
}

a.news-card {
    text-decoration: none;
    color: inherit;
}