body {font-family: arial; }

 /* PAGE WIDTH */
  .container {
  /* On mobile, allow it to be full-width with some padding */
  width: 100%;
  padding: 0 1rem; /* 1rem padding on left/right */
  margin: 0 auto;   /* This keeps it centered */
  box-sizing: border-box; /* Ensures padding is included in the width */
}

/* Accessibility Skip to Main Content */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0056b3; /* A high-contrast background */
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-link:focus {
  transform: translateY(0%);
  top: 0;
}


/* * MEDIA QUERY: This rule applies ONLY when the screen is 992px or wider.
 * This is how you target desktop screens.
*/
@media (min-width: 992px) {
  .container {
    /* Set the maximum width for desktop screens */
    max-width: 1140px; 
  }
}
/* END PAGE WIDTH */
/* START TABS CSS */
.tabs-container {
  max-width: 100%;
  margin: 2rem auto;
  font-family: sans-serif;
}

/* Style for the list of tab buttons */
.tabs-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: 2px solid #ccc;
}

/* Style for each tab button */
.tab-button {
  padding: 10px 20px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 5px 5px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-right: 5px;
}

/* Style for the ACTIVE tab button */
.tab-button.active {
  background-color: #fff;
  border-color: #ccc;
  border-bottom: 2px solid #fff; /* Creates the illusion of being connected */
  margin-bottom: -2px; /* Pulls it down over the list border */
}
.tab-button:hover, .tab-button:focus-visible {
  outline: 2px solid #0056b3; /* Use a color with good contrast */
  outline-offset: 2px;
}
/* Style for the content area */
.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

/* HIDE all tab panels by default */
.tab-panel {
  display: none;
}

/* SHOW only the active tab panel */
.tab-panel.active {
  display: block;
}

/* END TABS CSS */
/* NAV STYLING */
/* ---- Navigation Bar Styles ---- */

nav {
  background-color: #f1f1f1;
  padding: 0 8px;
  border-radius: 5px;
  margin: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; /* Pro-tip: Ensures items are vertically centered */
  flex-wrap: wrap;
}

/* Base styles for ALL items (links and spans) */
nav a,
nav .nav-text { /* Use a specific class instead of a generic 'span' */
  display: block;
  padding: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

/* Unique styles for LINKS */
nav a {
  color: blue;
}

nav a:hover,
nav a:focus {
  background-color: #ddd;
  cursor: pointer;
  /* Add a visible outline for keyboard users */
  outline: 2px solid #0056b3; /* Use a color with good contrast */
  outline-offset: 2px;
}



/* Unique styles for the non-linked SPAN */
nav .nav-text {
  color: #333;
  cursor: default;
  font-weight: bold; /* Helps indicate it's the current page */
}

/* FIX: The divider rule now ONLY creates the border */
nav li + li {
  border-left: 1px solid #ccc;
}

/* END NAV STYLING */

#modal-desc {
  white-space: pre-wrap;
}
svg {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      padding:0;
    }

    .svg-hotspot {
      cursor: pointer;
      transition: stroke 0.2s, fill 0.2s;
    }

    .svg-hotspot:hover, .svg-hotspot:focus,
    g[tabindex]:focus .svg-hotspot {
      stroke: #0077cc;
      stroke-width: 2;
      fill: rgba(0, 119, 204, 0.1);
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
    }

    .modal[aria-hidden="false"] {
      display: flex;
    }

    .modal-content {
      background: white;
      padding: 1rem;
      max-width: 600px;
      width: 90%;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    .close-button {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: #0077cc;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    body.modal-open {
      overflow: hidden;
    }
    
.hotspot {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: rgba(0,0,0,0); /* transparent */
  cursor: pointer;
  transition: outline 0.2s, background-color 0.2s;
}

.hotspot:hover,
.hotspot:focus {
  outline: 2px dashed #0077cc;
  background-color: rgba(0, 119, 204, 0.1); /* subtle hover effect */
}

/* Add this to your modal's CSS to enable multi-line descriptions */
#modal-desc {
  white-space: pre-wrap;
}

/* The fix is to add a single CSS rule that tells the browser to make SVG transparent rectangles "hittable" by the mouse pointer. */
.modal.active {
  display: flex;
}
.hotspot rect {
  pointer-events: all;
}

footer {background-color:#f1f1f1; height: 40px;text-align: center; padding:2px;margin: auto;font-family:arial;}

/* GLOBAL FOCUS INDICATOR to address accessibility */
body {
  --focus-inner: #ffffff;
  --focus-outer: #0a66ff;
  color-scheme: light dark;
}

/* Optional: Adjust for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    --focus-inner: #000000;
    --focus-outer: #7ab7ff;
  }
}

/* Ensure all interactive elements show focus */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 4px var(--focus-outer);
}

/* Increase visibility for high contrast settings */
@media (prefers-contrast: more) {
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    box-shadow:
      0 0 0 3px var(--focus-inner),
      0 0 0 6px var(--focus-outer);
  }
}