body {background-color: white;
}

p {style="margin-bottom: 0px; line-height: normal; font-family: Arial; color: #323333; text-align: center;"
}
.largeText{
   font-size: 22px;
}

.pictures {
  width: 100vw;
  height: auto; /* Keeps the icon from distorting */
}
.halfPictures {
  width: 50vw;
  height: auto;
}
.center {
  display: flex;
  justify-content: center; /* Aligns items horizontally to the center */
}

/* Skip to content */
/* Hide the link off-screen by default */
.skipToContent {
  position: absolute;
  top: -100%;
  left: 1rem;
  background-color: #72729D;
  color: white;
  padding: 0.75rem 1.5rem;
  z-index: 9999; /* Ensure it sits on top of headers */
  transition: top 0.2s ease-in-out; ?* Smooth slide-in effect */
  text-decoration: none;
  font-weight: bold;
  border-radius: 0 0 4px 4px;
}

/* Bring it into view ONLY when it receives keyboard focus */
.skipToContent:focus-visible {
  top: 0;
}

/* Style the individual menu links */
.nav-links {
  list-style: none;
  display: flex;
  color: white;
  background-color: #72729D;
  font-size: 1.5rem;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav-links li {
  display: block;
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
}
  .nav-links li a {
    background-color: #72729D;
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    cursor: pointer;
}
  .nav-links li a:hover {
    background-color: #FFFFEB;
    color: black;
}

/* --- DROPDOWN CORE LOGIC --- */

/* Position relative places dropdown to each menu item */
.dropdown {
  position: relative;
  display: inline-block;
}

/* The clickable button */
  .dropdown summary {
    background-color: #72729D;
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    cursor: pointer;
}
.dropdown summary:hover{
  color:black;
  background-color: #FFFFEB;
}

/* Dropdown content positioning and styling */
  .dropdown ul {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFEB;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    padding: 12px 0;
    margin: 4px 0 0 0;
    list-style: none;
    border-radius: 4px;
    z-index: 1;
  }

/* Dropdown links */
  .dropdown ul li a {
    color: #000000;
    background-color: #FFFFEB;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
  }

/* Hover effect on links */
  .dropdown li a:hover {
     background-color: #FFFFEB;
  }


/* Style the links inside the dropdown menu container */
.dropdown-menu li {
  color: #73739C;
  padding: 12px 16px;
}

/* Change background color of dropdown links on hover */
.dropdown-menu li a:hover {
  background-color: #73739C;
}

/* -----  INFO   -----*/

.row-container{display: flex; /* Aligns container divs horizontally */
  gap: 10px;     /* Optional: Adds space between the items */
}
/* Lowers line spacing */
.info-box {line-height: 0.3;
  /* thickness | style | color */
  border: 2px solid #00006B; 
  padding: 15px;
  border-radius: 5px; /* Rounds the corners */
}
.info-box legend {padding: 0 10px; /* Gives spacing around the title text */
  font-weight: bold;
  color: #00006F;
}

/*   ---Calendar---   */
.calendarStyle{
   font-family: Arial, sans-serif;
}
.calendarStyle a{
   color: #DB3A00;
}
.calendarTitle {background-color:white;
   color: black;
   display: flex;
   justify-content: center;
}
.monthArrow {
  display: inline-block;
  padding: 25px 50px;
  background-color: #FFFFFF;
  color: #333333 !important;
  text-decoration: none; /* Removes the underline */
  line-height: 1;
  border-radius: 5px;
  font-size: 24px;
  font-weight: bold;
}
.calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Creates 7 equal columns */
}
  .dayName{
  color: white;
  font-size: 1.2rem;
  padding: 10px;
  background-color: #73739C;
  text-align: center;
}
  .otherMonthDay{
    color: #595959;
    background-color: #D1D1D1;
}
  .day{
  border: 1px solid #ccc; /* Grey line around each square */
  padding: 1px;
}
  .closed{
    font-weight: bold;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
  .meeting{
    color: #1B2A4A;
}

/*   ---Picture/Text Layout---   */
.sideBySide {
  display: flex;       /* Aligns the text and pictures side by side */
  gap: 20px;          /* Adds spacing between the image and text */
}
.sideBySideCentered {
  display: flex;
  justify-content: center;   /* Horizontally centers the columns */
  gap: 25vw;
}
.sideImage {
  max-width: 50vw;    /* Prevents the image from being too large */
  height: auto;        /* Maintains the image aspect ratio */
}

.sideText {
  flex: 1;             /* Tells the text to fill the remaining horizontal space */
}

/*   ---Timeline---   */
/* the timeline container */
.timeline {
      display: flex;
      justify-content: left;
      align-items: stretch; /* Ensures the line stretches to the height of the content */
      max-width: 1000px;
}
.column {
      display: flex;
      padding: 0px;
      margin: 0;
      border-left: 0;
      align-items: center; /* Centers the line vertically relative to the text */
}
.column::before { /* horizontal connection lines */
  content: "";
  height: 2px;         /* Thickness of your line */
  flex: 0 0 50px;      /* makes lines same length */
  background: #000000; /* Color of your line */
}
/* The vertical line */
.vertical-line {
      width: 3px;                  /* Thickness of the line */
      background-color: #000000;      /* Color of the line */
      margin-left: 15px;
}
.verticalContainer {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  max-width: 300px;
  gap: 15px;              /* Adds optional spacing between elements */
}