/* ============================================================
   main-22aa.css — UPDATED FOR RESPONSIVENESS + HAMBURGER MENU
   WCAG 2.2 AA COMPLIANT — CHUNK 1
   ============================================================ */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --body-max: 1000px;
  --gap: 20px;

  --dark: #404040;
  --green: #006745;
  --blue: #0070C0;
  --gold: #edbd75;
  --lightblue: #a2e0f6;
  --white: #fff;
  --black: #000;

  --focus-accent: #ffbf47;
  --focus-dark: #000;

  /* Layout constants */
  --content-left: 35px;
  --nav-link-pad-left: 12px;
  --home-tweak: -5px;

  /* Navbar tools width (desktop) */
  --nav-tools-col: 390px;
}

/* ---------- RESETS ---------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
}

/* ---------- BACKGROUND ---------- */
.site-bg {
  position: fixed;
  inset: 0;
  background-color: #FFFFFF;
  z-index: -1;
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  transform: translateY(-200%);
  background: #005fcc;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  z-index: 999999;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- HEADER ---------- */
.site-header {
  max-width: var(--body-max);
  margin: 0 auto;
  padding: .5rem;
}

/* ---------- NOTICE BANNER ---------- */
.notice {
  background: #C00000;
  color: #ffffff;
  padding: .25rem 20px;
}

.whiteannouncment a {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- BRAND ---------- */
.brand {
  text-align: center;
  margin: 12px 0;
}

.brand img {
  max-width: 100%;
  height: auto;
}

/* ---------- UTILITY BAR ---------- */
.site-utility {
  background: var(--dark);
  color: #fff;
  margin-bottom: 16px;
}

.utility-inner {
  max-width: var(--body-max);
  margin: 0 auto;
  padding-left: calc(var(--content-left) - var(--nav-link-pad-left) + var(--home-tweak));
  padding-right: calc(var(--content-left) - var(--nav-link-pad-left) + var(--home-tweak));
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Google Translate widget formatting */
#google_translate_element {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 12px 0 12px 2px;
  line-height: 1.1;
}

#google_translate_element .goog-te-combo {
  min-width: 160px;
  height: 28px;
  line-height: 28px;
  margin: 0;
  font-size: 13px;
}

#google_translate_element .goog-te-gadget > a,
#google_translate_element .goog-te-gadget > span {
  font-size: 11px !important;
  color: #d6d6d6 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#google_translate_element .goog-te-gadget > a img {
  height: 12px;
  width: auto;
  vertical-align: text-bottom;
}

/* ---------- NAVBAR BASE ---------- */
/* ===== Navbar (menu left / search right) ===== */
.navbar{
  background: var(--dark);
  position: relative;
  z-index: 2000;
  overflow: visible;
}

.navbar-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nav-tools-col); /* keep layout stable; search is pinned */
  align-items: center;
  column-gap: 12px;
  max-width: var(--body-max);
  margin: 0 auto;

  /* LEFT LETTER EDGE alignment:
     padding-left + 12px (link padding) = 35px → padding-left = 23px (+ tweak) */
  padding-left: calc(var(--content-left) - var(--nav-link-pad-left) + var(--home-tweak));

  /* modest right pad; true right edge for Search is pinned with absolute below */
  padding-right: 20px;
  min-height: 52px;
  position: relative !important;
  overflow: visible !important;
}

.menu{
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.navbar a,
.navbar .dropbtn{
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 12px;
  line-height: 1.2;
  min-height: 24px;
  min-width: 24px;
  white-space: nowrap;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

.navbar a:hover, .dropdown:hover .dropbtn{
  background: var(--green);
}

/* Dropdown */
.dropdown{ 
    position: static !important;
    z-index: 9999 !important;
}

.dropdown-content{
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--dark);
  min-width: 200px;
  padding: 4px 0;
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  width: max-content;
  z-index: 9999 !important;
}


.dropdown-content, .dropdown-content ul, .dropdown-content li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-content a{
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  min-height: 24px;
  min-width: 24px;
}

.dropdown-content a:hover, .dropdown-content a:focus{
  background: var(--green);
}

.dropdown .dropdown-content.open{
  display: block !important;
}

.dropdown-wrapper {
    position: relative !important;
    overflow: visible !important;
    display: inline-block !important;  /* keeps width tight to the button */
}

/* allow dropdown to float over the page */
.dropdown-content {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: max-content !important;
    z-index: 99999 !important;
}

/* DESKTOP: Hamburger should be hidden */
.hamburger {
    display: none;
}


/* ===== Search icon alignment ===== */

/* Pin Search to the true right edge at desktop widths (doesn't move the menu) */
@media (min-width: 1121px){
  .nav-tools{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Narrow: put tools under the menu like before */
@media (max-width: 1120px){
  .navbar-inner{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .nav-tools{
    position: static;
    transform: none;
    justify-content: flex-end;
  }
}
/* ============================================================
   RESPONSIVE NAVBAR BEHAVIOR
   ============================================================ */

/* ---------- DESKTOP (default) ---------- */
/* navbar-inner already defined above */

/* ---------- MOBILE NAV BREAKPOINT ---------- */
@media (max-width:900px) {

 
/* ============================================================
   HAMBURGER MENU — MOBILE NAVIGATION
   ============================================================ */

/* ---------- HAMBURGER BUTTON (appears on mobile) ---------- */
.hamburger {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  margin-left: 10px;
}

.hamburger:focus-visible {
  outline: 3px solid var(--focus-accent);
  outline-offset: 2px;
}

/* Bars inside the hamburger */
.hamburger-bar {
  width: 26px;
  height: 3px;
  background: var(--white);      /* requested: WHITE */
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* ---------- HAMBURGER ACTIVE (X state) ---------- */
.hamburger.active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

 /* Mobile dropdown aligns vertically */
  .dropdown-content {
      position: static !important;
      background: #333;
      width: 100% !important;
      box-shadow: none !important;
  }

  .dropdown-content a {
      width: 100%;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  /* Hide desktop nav by default */
  .navbar-inner {
    display: none !important;
    grid-template-columns: none !important;
    flex-direction: column !important;
    width: 100%;
    background: var(--dark);
    padding: 0;
  }

  /* When hamburger opens menu */
  .navbar-inner.open {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 10px;
  }
  /* Stack the menu vertically */
  .menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* Each menu item full width */
  .menu > li {
    width: 100% !important;
  }

  /* Menu links full-width with padding */
  .menu > li > a,
  .menu > li > .dropbtn {
    display: block;
    width: 100%;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-align: left;
  }

  /* Fix the nav-tools (search icon) */
  .nav-tools {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 14px 20px !important;
  }
	
	
	
/* FIX: allow dropdown to escape CSS grid */
.navbar .dropdown {
    position: static !important;
    grid-column: 1 / -1 !important;  /* remove it from grid cell sizing */
    width: auto !important;
    z-index: 99999 !important;
}
	
	
}	

/* FIX: restore flex display for desktop nav */
@media (min-width:901px) {
    .navbar-inner {
        display: flex !important;
        grid-template-columns: none !important;
    }
}	
/* ============================================================
   MOBILE SAFETY — PREVENT HORIZONTAL SCROLLING
   ============================================================ */
@media (max-width: 360px) {
  .navbar-inner {
    row-gap: 8px;
  }
  .brand img {
    max-width: 90%;
  }
}

/* ============================================================
   RESPONSIVE LAYOUT — GRID, SIDEBAR, PANELS
   ============================================================ */

/* ---------- BASE TWO-COLUMN GRID (MOBILE-FIRST) ---------- */
.site-grid {
  display: grid;
  grid-template-columns: 1fr;   /* stacks on mobile */
  gap: var(--gap);
  max-width: var(--body-max);
  margin: 1rem auto;
  padding: 0 10px;
}

/* Desktop: restore 2 columns */
@media (min-width: 768px) {
  .site-grid {
    grid-template-columns: 260px 1fr;
  }
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--green);
  color: #fff;
  padding-bottom: .5rem;
}

.quicklinksheader {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin: 20px 20px 10px 25px;
}

.sidebar > *:last-child {
  margin-bottom: 0;
}

.quicklinks,
.help-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 20px;
}

/* FINAL OVERRIDE: Fix Quick Links indentation on mobile */
@media (max-width: 900px) {
  .sidebar .quicklinks {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.sidebar .quicklinks {
  padding-left: 25px;
  padding-right: 20px;
}

.sidebar address.quicklinksmenu,
.sidebar p.quicklinksmenu {
  margin: 0 20px 10px 25px;
  font-style: normal;
  line-height: 1.4;
}

/* Mobile: relax sidebar padding for small screens */
@media (max-width: 480px) {
  .quicklinksheader,
  .quicklinks,
  .quicklinksmenu {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Sidebar link hover/click */
.sidebar .quicklinks a {
  color: #fff;
  text-decoration: none;
  padding: 2px 2px;
}

.sidebar .quicklinks a:hover,
.sidebar .quicklinks a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .12em;
}

/* ---------- PANELS / SECTIONS ---------- */
.panel {
  margin-bottom: var(--gap);
  padding-left: 10px;
  padding-right: 10px;
}

.panel-gold {
  background: var(--gold);
  padding: .25rem 0;
}

.panel-lightblue {
  background: var(--lightblue);
  padding: .25rem 0;
}

.panel-dark {
  background: var(--dark);
  color: #fff;
  padding: .25rem 0;
}

.panel-white {
  background: #fff;
  padding: .5rem 0;
}


/* FIX: Restore correct desktop alignment for homepage white panels */
.panel-white.body {
    padding-left: 20px !important;   /* was 30px */
    padding-right: 20px !important;
}


.mainheader {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 10px 20px;
}

/* Basic link styles */
a {
  color: #052867;
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #001a33;
}

/* Panel-dark link colors */
.panel-dark a {
  color: #fff;
}

/* Panel text alignment fix */
.panel-dark p,
.panel-dark .homebodywhite {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
}

/* ============================================================
   ACCESSIBILITY + REFLOW SUPPORT
   ============================================================ */

/* Ensure media elements never overflow */
img,
iframe,
table {
  max-width: 100%;
  height: auto;
}

/* WCAG — focus styling */
:where(a, button, [role="button"], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--focus-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-accent);
}

.panel-gold :focus-visible,
.panel-lightblue :focus-visible {
  outline-color: var(--focus-dark);
  box-shadow: 0 0 0 3px var(--focus-dark);
}

/* Minimum target size */
a,
button,
[role="button"] {
  min-width: 24px;
  min-height: 24px;
}

/* Visually hidden (SR-only) */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ============================================================
   ANNOUNCEMENT GRID — RESPONSIVE (MOBILE-FIRST)
   ============================================================ */

.announcement-grid {
  display: grid;
  grid-template-columns: 1fr;          /* stacks on mobile */
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .announcement-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 columns on tablets+ */
  }
}

.announcement-grid > * {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.announcementbody {
  background: var(--blue);
  color: #fff;
  padding: 10px 20px;
  min-height: 56px;
  display: block;
}

.announcementbody a {
  color: #fff;
  text-decoration: underline;
}

.announcementbody a:hover,
.announcementbody a:focus {
  color: #E6F2FF;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--dark);
  color: #fff;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.site-footer .help-list a {
  color: #fff;
}

.footer {
  font-size: 12px;
  margin: 0 20px;
}


/* ============================================================
   CONSISTENT INNER WIDTH — GLOBAL ALIGNMENT
   (Ensures all sections align with the 1000px max-width center)
   ============================================================ */

.container,
.site-header .brand,
.site-grid,
.panel,
.site-footer .footer,
.site-footer .help-list {
  max-width: var(--body-max);
  margin-left: auto;
  margin-right: auto;
}


.navbar .menu {
  max-width: none;       /* let the nav span full width */
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   FINAL DARK PANEL ALIGNMENT FIXES
   ============================================================ */

.panel-dark p,
.panel-dark .homebodywhite {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.panel-dark > * {
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   TOUCH TARGET / ACCESSIBILITY POLISH (WCAG 2.2)
   ============================================================ */

/* Increase touch area for crowded zones */
.menu a,
.menu .dropbtn,
.sidebar .quicklinks a {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Ensure buttons have adequate space when stacked */
@media (max-width: 700px) {
  .menu a,
  .menu .dropbtn {
    padding: 14px 18px;
  }
}

/* Keep focus-visible scroll margin from hiding headings behind sticky rows */
:focus {
  scroll-margin-block: 80px;
}


/* ============================================================
   MOBILE OPTIMIZATION — TYPOGRAPHY & SPACING
   ============================================================ */

@media (max-width: 480px) {

  /* Reduce side padding on panel text for narrow viewports */
  .body p,
  .panel-dark p,
  .panel-dark .homebodywhite,
  .announcementbody {
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mainheader {
    margin-left: 14px !important;
    margin-right: 14px !important;
    font-size: 17px;
  }

  /* Prevent text cramping on tiny screens */
  p, li, address {
    font-size: 15px;
    line-height: 1.45;
  }


  /* Fix Quick Links indentation on mobile */
  .sidebar .quicklinks {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
	
	
}


/* ============================================================
   SAFETY: PREVENT CONTENT OVERFLOW DURING ZOOM (WCAG 1.4.10)
   ============================================================ */

html {
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix nav-tools alignment (pull search icon fully to the right) */
.nav-tools {
    max-width: none !important;
    margin-right: 0 !important;
}

/* ============================================================
   END OF UPDATED RESPONSIVE WCAG 2.2 CSS
   ============================================================ */


/* FINAL FIX: Remove Quick Links indentation on mobile */
@media (max-width: 480px) {
  .sidebar .quicklinks {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* FINAL OVERRIDE — Fix Quick Links indentation on mobile */
@media (max-width: 900px) {
  .sidebar .quicklinks {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   FINAL MOBILE SIDEBAR ALIGNMENT FIX — THIS ONE WINS
   ============================================================ */
@media (max-width: 900px) {

  /* Align all sidebar section headers */
  .quicklinksheader,
  .help-list,
  .sidebar h2,
  .sidebar h3,
  .sidebar h4 {
      margin-left: 10px !important;
      margin-right: 10px !important;
  }

  /* Align all sidebar content sections (CONTACT US, OFFICE HOURS, etc.) */
  .sidebar address.quicklinksmenu,
  .sidebar p.quicklinksmenu,
  .help-list,
  .quicklinks,
  .sidebar .quicklinks {
      margin-left: 10px !important;
      margin-right: 10px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
  }
}

/* FINAL FIX — Align sidebar section headers on mobile */
@media (max-width: 900px) {
  
  /* QUICK LINKS / CONTACT US / OFFICE HOURS headings */
  .quicklinksheader {
      margin-left: 10px !important;
      margin-right: 10px !important;
  }

  /* Headings that are not using .quicklinksheader but appear in the sidebar */
  .sidebar h2,
  .sidebar h3,
  .sidebar h4 {
      margin-left: 10px !important;
      margin-right: 10px !important;
  }

}

/* FINAL — override header alignment for mobile */
@media (max-width: 900px) {
  h2.quicklinksheader {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* REAL, FINAL HEADER ALIGNMENT FIX */
@media (max-width: 900px) {

  /* Reset native H2 margins in the SIDEBAR */
  .sidebar h2 {
      margin: 10px 10px !important;
      padding: 0 !important;
  }

  /* Reset the .quicklinksheader class too (both conditions get hit) */
  h2.quicklinksheader {
      margin-left: 10px !important;
      margin-right: 10px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
}

/* REAL FIX — Reset H2 native margins inside sidebar on mobile */
@media (max-width: 900px) {
  .sidebar h2 {
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding-left: 0 !important;
  }
}

/* FINAL SIDEBAR FIX — the one that WILL move the headers */
@media (max-width: 900px) {
  .sidebar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* FINAL: Align text directly under headers with the headers */
@media (max-width: 900px) {

  /* Remove extra left padding/margin from ALL sidebar text */
  .sidebar .quicklinks,
  .sidebar address.quicklinksmenu,
  .sidebar p.quicklinksmenu {
      padding-left: 0 !important;
      margin-left: 0 !important;
  }
}

/* FINAL MOBILE SIDEBAR TEXT ALIGNMENT */
@media (max-width: 900px) {

  /* Align text EXACTLY under headers */
  .sidebar .quicklinks,
  .sidebar address.quicklinksmenu,
  .sidebar p.quicklinksmenu {
      margin-left: 12px !important;
      padding-left: 0 !important;
  }
}

/* ============================================================
   GLOBAL MOBILE ALIGNMENT — MATCH SIDEBAR ALIGNMENT
   ============================================================ */
@media (max-width: 900px) {

  /* All major mobile content sections */
  .panel-gold,
  .panel-lightblue,
  .panel-dark,
  .panel-white,
  .announcement-grid,
  .announcementbody,
  .mainheader,
  .body p,
  .panel p,
  .panel address,
  .panel ul,
  .panel li,
  .site-footer,
  .footer,
  .help-list,
  .help-list li {
      padding-left: 6px !important;
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  /* Headings inside panels & main content */
  .panel-gold h2,
  .panel-lightblue h2,
  .panel-dark h2,
  .panel-white h2,
  .announcement-grid h2,
  .mainheader {
      margin-left: 6px !important;
      margin-right: 12px !important;
  }

  /* Blue announcement boxes — inner text */
  .announcementbody {
      padding-left: 6px !important;
      padding-right: 6px !important;
  }
}

/* MOBILE: Fix Special Announcements padding */
@media (max-width: 900px) {
  .panel-gold,
  .panel-gold p,
  .panel-gold .body,
  .panel-gold .announcementbody {
      padding-left: 6px !important;
      padding-right: 6px !important;
  }
}

/* MOBILE: Fix blue announcement tile alignment */
@media (max-width: 900px) {
  .announcement-grid {
      padding-left: 6px !important;
      padding-right: 6px !important;
  }

  .announcementbody {
      padding-left: 6px !important;
      padding-right: 6px !important;
  }
}

/* ============================================================
   FINAL MOBILE PAGE ALIGNMENT — MATCH SIDEBAR SPACING (6px)
   ============================================================ */
@media (max-width: 900px) {

  /* GOLD PANEL (Special Announcements) */
  .panel-gold,
  .panel-gold p,
  .panel-gold .body {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* GRAY PANEL (Hurricane Information) */
  .panel-dark,
  .panel-dark p,
  .panel-dark .body {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* PUBLIC ANNOUNCEMENTS header + paragraph */
  .mainheader,
  .body p {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* BLUE TILE GRID + inner tile text */
  .announcement-grid {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .announcementbody {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ============================================================
   FINAL MOBILE PAGE ALIGNMENT — EXACT SELECTORS
   ============================================================ */
@media (max-width: 900px) {

  /* 1) Special Announcements text (white panel under gold bar) */
  .panel-white.body,
  .panel-white.body p,
  .panel-white.body a,
  .panel-white.body li {
      padding-left: 9px !important;
      padding-right: 9px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  /* 2) Public Announcements header + body paragraph */
  .mainheader,
  .body p {
      padding-left: 6px !important;
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  /* 3) Blue Announcement Grid (outer container) */
  .announcement-grid {
      padding-left: 6px !important;
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  /* 4) Blue Announcement Tile Inner Text */
  .announcementbody {
      padding-left: 6px !important;
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

/* ============================================================
   FINAL BLUE TILE MOBILE ALIGNMENT — OVERRIDES THAT WILL WIN
   ============================================================ */
@media (max-width: 900px) {

  /* 1. Fix blue tile inner text */
  .announcementbody {
      padding-left: 21px !important;
      padding-right: 21px !important;
  }

  /* 2. Fix the grid container alignment */
  .announcement-grid {
      padding-left: 0px !important;
      padding-right: 0px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

/* FINAL FIX — Align QUICK LINKS header with other sidebar headings */
@media (max-width: 900px) {
  h2.quicklinksheader:first-of-type {
    padding-left: 14px !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
   FIX: Reduce white space around SPECIAL ANNOUNCEMENTS
   ============================================================ */

/* Reduce spacing *after* the gold SPECIAL ANNOUNCEMENTS panel */
.panel-gold {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Reduce the margin between the gold panel and the white content block below */
.panel-gold + .panel-white.body {
    margin-top: 6px !important;
}

/* Reduce the margin between the white content and the next section (Hurricane Info) */
.panel-white.body {
    margin-bottom: 6px !important;
}

/* ============================================================
   FINAL FIX — Remove extra white space around Special Announcements
   ============================================================ */

@media (min-width: 0px) {

  /* Remove extra margin BELOW the gold SPECIAL ANNOUNCEMENTS bar */
  .panel-gold.panel {
      margin-bottom: 6px !important;
  }

  /* Remove extra margin BELOW the white Special Announcements content */
  .panel-white.panel.body,
  .panel-white.body.panel {
      margin-bottom: 6px !important;
  }

  /* Remove extra margin ABOVE the HURRICANE INFORMATION panel */
  .panel-dark.panel {
      margin-top: 6px !important;
  }
}

/* Reduce vertical spacing between main panels */
.site-grid {
    row-gap: 6px !important;   /* was 20px */
}

/* Remove extra white space above and below the Special Announcements area */
.site-grid {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   FIX: Remove extra white space around Special Announcements block
   ============================================================ */

/* Remove the default bottom spacing applied by .panel */
.panel.panel-white.body {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tighten the gold bar above it */
.panel.panel-gold {
    margin-bottom: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Tighten the hurricane panel directly beneath */
.panel.panel-dark {
    margin-top: 6px !important;
}

/* FIX: Remove extra white space around inline links in Special Announcements */
@media (max-width: 900px) {
  .panel-white.body a,
  .panel-white.body a:link,
  .panel-white.body a:visited {
      display: inline !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: inherit !important;
  }
}

/* ============================================================
   FIX: Restore consistent spacing under sidebar & blue grid
   ============================================================ */

/* Add spacing under the sidebar block */
.sidebar {
    margin-bottom: 20px !important;   /* matches var(--gap) */
}

/* Add spacing under the blue announcement grid */
.announcement-grid {
    margin-bottom: 20px !important;   /* matches var(--gap) */
}

/* Fix footer copyright alignment */
.footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;   /* match .site-footer */
    padding-right: 20px !important;
}

/* ============================================================
   FINAL FOOTER ALIGNMENT FIX — Desktop + Mobile
   ============================================================ */

/* DESKTOP — match footer links' alignment inside .site-footer */
.footer {
    padding-left: 20px !important;  /* match .site-footer padding */
    padding-right: 20px !important;
    margin-left: 0 !important;      /* remove unwanted left shift */
    margin-right: 0 !important;
}


/* DESKTOP — finally align copyright with footer content */
.site-footer .footer {
    max-width: var(--body-max) !important;   /* same 1000px width as rest of layout */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;           /* match .site-footer text padding */
    padding-right: 20px !important;
}



/* MOBILE — match your 6px mobile-left alignment */
@media (max-width: 900px) {
  .footer {
      padding-left: 12px !important;
      padding-right: 6px !important;
  }
}

/* MOBILE — override parent footer padding */
@media (max-width: 900px) {
  .site-footer {
      padding-left: 6px !important;   /* match your sidebar + content alignment */
      padding-right: 6px !important;
  }
}

/* DESKTOP — Align copyright paragraph to the same content width */
.site-footer .footer {
    max-width: var(--body-max) !important;   /* same width as main page */
    margin-left: auto !important;           /* center horizontally */
    margin-right: auto !important;
    padding-left: 20px !important;          /* match desktop footer padding */
    padding-right: 20px !important;
}

/* FINAL MOBILE FIX — override global <p> padding */
@media (max-width: 900px) {
  .site-footer p.footer {
      padding-left: 12px !important;   /* EXACT alignment you dialed in */
      padding-right: 6px !important;
  }
}

/* Full-width blue page banner (for ABOUT pages) */
.page-banner {
    width: 100%;
    max-width: 100% !important;
    margin: 0;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-left: 30px;
	padding-right: 20px;
    display: block;
}

/* Blue background styling */
.page-banner-lightblue {
    background: var(--lightblue);
}

/* Align ABOUT header + link row */
.page-banner h2,
.page-banner p {
    max-width: var(--body-max);      /* match nav / body width */
    margin-left: auto;
    margin-right: auto;

}

/* Remove DEFAULT spacing from <p> inside the banner */
.page-banner p {
    margin-top: 4px;
    margin-bottom: 10px;
}

/* ============================================================
   SUBPAGE LAYOUT WRAPPER (no grid, homepage-aligned)
   ============================================================ */

.page-wrap {
    max-width: var(--body-max);            /* 1000px centered layout */
    margin-left: auto;
    margin-right: auto;

    /* EXACT same left alignment logic as navbar and panels */
    padding-left: calc(var(--content-left) - var(--nav-link-pad-left) + var(--home-tweak));
    padding-right: 20px;
}

/* Make the ABOUT blue bar behave like homepage blue panels */
.page-wrap .panel-lightblue {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Align the ABOUT header + subnav links properly */
.page-wrap .panel-lightblue h2,
.page-wrap .panel-lightblue p {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

/* SUBPAGE LAYOUT — Proper horizontal alignment under nav */
.page-wrap,
.page-container {
    max-width: var(--body-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.page-wrap .panel-lightblue,
.page-container .panel-lightblue {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   ABOUT PAGE WHITE CONTENT PANEL (isolated from homepage)
   ============================================================ */
.about-body {
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    /* Aligns perfectly with the ABOUT blue bar and navbar */
    padding-left: 30px !important;
    padding-right: 20px !important;

    /* Keeps consistency with panel behavior */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.about-body p,
.about-body img {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ABOUT PAGE — Align blue bar to EXACTLY match the navbar width */
.page-wrap {
    padding-left: calc(var(--content-left) - var(--nav-link-pad-left) + var(--home-tweak)) !important;
    padding-right: 20px !important;  /* same as navbar-inner */
}


/* FIX NAVBAR ALIGNMENT to match page content */
.navbar-inner {
    padding-left: 10px !important;
    padding-right: 20px !important; /* same as before */
}

/* ==========================================
   ABOUT PAGE — FINAL, CORRECT ALIGNMENT
   ========================================== */

.about-wrap {
    max-width: var(--body-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;   /* matches homepage content */
    padding-right: 10px;
}

/* Make the blue ABOUT bar match navbar width */
.about-wrap .panel-lightblue {
    margin: 0 !important;
	padding-top: 20px;
	padding-bottom: 20px;
    max-width: 100% !important;
}

/* Align ABOUT header + subnav links */
.about-wrap .panel-lightblue h2,
.about-wrap .panel-lightblue p {
    margin: 0;
    padding-left: 10px;   /* same as white content */
    padding-right: 10px;
}

/* White ABOUT content panel */
.about-wrap .about-body {
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ABOUT PAGE — restore normal internal padding inside the blue bar */
.about-wrap .panel-lightblue {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* ABOUT PAGE — restore internal padding for white content block */
.about-wrap .about-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Add spacing between NAVBAR and ABOUT blue bar */
.about-wrap .panel-lightblue {
    margin-top: 10px !important;   /* or adjust to 18px / 22px if you want perfect optical alignment */
}

/* ABOUT PAGE — normalize white panel spacing */
.about-wrap .about-body {
    padding-top: 5px !important;     /* reduce from 20px */
    padding-bottom: 5px !important;  /* reduce from 20px */
    padding-left: 10px !important;    /* match panel standard */
    padding-right: 10px !important;
}

/* ABOUT PAGE — mobile alignment fix */
@media (max-width: 900px) {
  .about-wrap .panel-lightblue p {
      padding-left: 6px !important;   /* match the ABOUT header */
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  .about-wrap .panel-lightblue h2 {
      padding-left: 6px !important;   /* ensure header and link text share same anchor */
      padding-right: 6px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

@media (min-width: 901px) {
  .about-wrap .about-body {
      padding-left: 10px !important;
      padding-right: 10px !important;
  }
}


/* ABOUT PAGE — correct white content alignment */
.about-wrap .panel-white.about-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ABOUT PAGE — final white content alignment (beats .panel-white.body) */
.about-wrap .panel-white.body.about-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ABOUT PAGE — mobile: align text + image under the H3 perfectly */
@media (max-width: 900px) {
  .about-wrap .about-body p,
  .about-wrap .about-body img {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

.about-wrap .panel-lightblue :focus-visible {
    outline-color: #000 !important;
    box-shadow: 0 0 0 2px #000 !important;
}


.about-links a,
.about-links span {
    margin-right: 6px;
}


/* ABOUT PAGE — add space between ABOUT header and link row */
.about-wrap .panel-lightblue h2 {
    margin-bottom: 10px !important;  /* adjust to 12px or 14px if you prefer */
}


/* FINAL FOOTER WIDTH FIX — must be last */
.site-footer {
    max-width: var(--body-max) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Replace the mobile override we added earlier */
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

/* FINAL MOBILE FOOTER FIX — match page margins */
@media (max-width: 900px) {
    .site-footer {
        max-width: 980px !important;        /* same width as content column */
        margin-left: 10px !important;       /* match page container margin */
        margin-right: 10px !important;
        padding-left: 10px !important;      /* match internal content padding */
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
}

/* ABOUT STAFF PAGE — fix table background */
.about-wrap .about-body {
    background: #ffffff !important;  /* restore white background */
}

/* STAFF TABLE — responsive, WCAG 2.2 compliant */
.staff-table {
    width: 100% !important;
    border-collapse: collapse;
    background: #fff;             /* ensure white background stays */
}

.staff-table td {
    padding: 8px 4px;             /* accessible touch spacing */
    vertical-align: top;
}

/* Row separators (matches your original design) */
.staff-table .border-bottom td {
    border-bottom: 1px solid #ccc;
}

/* WCAG requirement: visible focus for table links */
.staff-table a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* UNIVERSAL SUBPAGE LOGO SPACING */
.subpage-logo {
    float: left;
    margin-right: 15px;   /* space between logo and text */
    margin-bottom: 10px;  /* breathing room below logo */
}

.gcse-search * {
    font-size: 16px !important;
}

/* SIMPLE SUBPAGES (no ABOUT links under title) */
#simple-page-title {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}

/* Tighten blue bar height for simple pages */
.about-wrap .panel-lightblue:has(#simple-page-title) {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* SIMPLE PAGES (no about-links): match gray bar padding */
.simple-page-bluebar {
    padding-top: 8px !important;    /* same vertical rhythm as gray bars */
    padding-bottom: 8px !important;
}

/* FINAL FIX — Simple pages get compact blue bar */
.panel.panel-lightblue.simple-page-bluebar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* FINAL FIX — reduce blue bar height on simple pages */
.about-wrap .panel-lightblue.simple-page-bluebar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* SIMPLE PAGES — remove the padding under the blue bar */
.simple-page .about-body,
.simple-page .panel-white.about-body {
    padding-top: 0 !important;
}

/* SIMPLE PAGE FIX — Remove extra padding from first paragraph under SEARCH */
.simple-page-bluebar + .about-body .body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* SIMPLE PAGES — correct top spacing under the blue bar */
.simple-page .about-body {
    padding-top: 10px !important;   /* gives the correct space */
}


.about-wrap.simple-page .about-body {
    padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* FINAL BLUE BAR FIX FOR SIMPLE PAGES */
.about-wrap.simple-page .panel-lightblue.simple-page-bluebar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* SIMPLE PAGES — final override to remove extra space under SEARCH */
.panel-lightblue.simple-page-bluebar {
    padding-bottom: 8px !important;
    padding-top: 8px !important;
}

.simple-page-bluebar h2 {
    line-height: 1.0 !important;
}

/* SIMPLE PAGES — remove extra header margin */
.simple-page-bluebar .mainheader {
    margin-bottom: 6px !important;
}

/* SIMPLE PAGES — remove H2 margin that creates extra space under SEARCH */
.simple-page-bluebar .mainheader {
    margin-bottom: 0 !important;
}

.simple-page-bluebar {
    display: flex !important;
    align-items: center;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.simple-page-bluebar h2 {
    margin: 0 !important;
}

/* SIMPLE PAGES — eliminate blue-bar min-height */
.panel.simple-page-bluebar {
    min-height: unset !important;
    height: auto !important;
    line-height: normal !important;
}

/* SIMPLE PAGE BLUE BAR — true final fix */
.panel.panel-lightblue.simple-page-bluebar {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* FIX: Make SEARCH header sit at the top of the blue bar */
.simple-page-bluebar {
    display: block !important;
}

/* SIMPLE PAGES — override mobile blue bar padding */
@media (max-width: 900px) {
    .panel-lightblue.simple-page-bluebar {
        padding-bottom: 8px !important;
        padding-top: 8px !important;
    }
}

/* SIMPLE PAGES — remove the pseudo-element causing extra space */
.simple-page-bluebar::before {
    content: none !important;
    display: none !important;
}

/* SEARCH PAGE — match homepage blue bar spacing exactly */
.search-bluebar {
    padding-top: 15px !important;      /* same as homepage */
    padding-bottom: 8px !important;   /* same as homepage */
    margin-bottom: 0 !important;      /* prevent added gap */
}

.search-bluebar .mainheader {
    margin: 0 !important;             /* homepage H2 has zero margin */
    line-height: 1.2;                 /* visually matches homepage */
}

/* ---------- 4‑Button Form Tabs (WCAG 2.2 Compliant) ---------- */

.form-tabs {
    margin: 0 0 1rem 0;
}

.form-tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-tabs li {
    flex: 1 1 calc(25% - 10px);
    text-align: center;
}

.form-tabs a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px; /* ✅ matches the height of blue banner */
    background: #404040;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2px;
    line-height: 1.2;
    padding: 0 10px;
}

.form-tabs li.active a {
    background: #a2e0f6;
    color: #000000;
}

.form-tabs a:hover,
.form-tabs a:focus-visible {
    background: #000;
    outline: 3px solid #052867;
    outline-offset: 2px;
}

/* Mobile: stack buttons */
@media (max-width: 700px) {
    .form-tabs li {
        flex: 1 1 100%;
    }
}

/* HARD RESET for old table/button styles inside form-tab navigation */
.form-tabs p,
.form-tabs .bodybutton,
.form-tabs .bodybutton a {
    all: unset !important;         /* clears old legacy formatting */
    display: contents !important;  /* prevents layout interference */
}


/* FINAL OVERRIDE — force new tab buttons to fully replace old table/button styles */
.form-tabs ul,
.form-tabs li,
.form-tabs a {
    all: unset !important;
}

.form-tabs {
    display: block !important;
    margin: 0 0 1rem 0 !important;
}

.form-tabs ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.form-tabs li {
    flex: 1 1 calc(25% - 10px) !important;
}

.form-tabs a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 44px !important;   /* ✅ matches blue banner height */
    background: #404040 !important;
    color: #fff !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    padding: 0 10px !important;
}

.form-tabs li.active a {
    background: #a2e0f6 !important;
    color: #000 !important;
}

.form-tabs a:hover,
.form-tabs a:focus-visible {
    background: #000 !important;
    outline: 3px solid #052867 !important;
    outline-offset: 2px !important;
}

@media (max-width: 700px) {
    .form-tabs li {
        flex: 1 1 100% !important;
    }
}

/* Remove inherited body/panel padding so tab height displays correctly */
.about-body .form-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Now force the tab row to occupy its full height */
.form-tabs {
    display: block !important;
    width: 100% !important;
}

/* Make the tab buttons match the blue header height */
.form-tabs a {
    height: 44px !important; /* identical to Building Commercial banner */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
}

/* --- Two-Column Layout for Links Page --- */
.link-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.link-col {
    flex: 1 1 300px;        /* Responsive: 2 columns on desktop, 1 on mobile */
    min-width: 280px;
}

.link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list li {
    margin: 0 0 0 0;
}

.link-list a {
    text-decoration: none;
}

.link-list a:hover,
.link-list a:focus-visible {
    text-decoration: underline;
}