.site-header {
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;
padding:10px;
background-color:#121212;
color:#fff
}

.site-header a {
color:#FFD700
}

.left-section,.center-section,.right-section {
flex:1;
text-align:center;
padding:5px
}

.center-section .images {
display:flex;
justify-content:center;
margin-bottom:10px
}

.center-section .images img,.center-section > img {
width:120px;
height:auto
}

.portal-link,.accessibility-link {
display:inline-block;
padding:.5rem;
margin:0 .5rem
}

.portal-link img {
width:44px;
height:44px
}

.accessibility-link {
font-size:1rem;
font-weight:bold;
color:#FFD700;
text-decoration:none;
transition:color .3s ease,background-color .3s ease;
background-color:transparent;
border-radius:4px
}

.accessibility-link:hover,.accessibility-link:focus {
color:#FFC300;
text-decoration:underline
}

.portal-link:hover img,.portal-link:focus img {
outline:2px solid #FFD700;
outline-offset:2px
}

nav {
background-color:#0077B6;
padding:.625em 1.25em
}

.menu {
list-style:none;
margin:0;
padding:0;
background:#333;
text-align:center;
display:none
}

.menu li a {
display:inline-block;
padding:.625em 1.25em;
color:white;
text-decoration:none;
transition:background-color .5s ease,color .5s ease,border .5s ease;
border-radius:50%;
border:2px solid transparent
}

.menu li a:hover,.menu li a:focus {
background-color:#005f8a;
text-decoration:none;
color:#FFD700;
border:2px solid #FFD700;
outline:none
}

.hamburger {
display:block;
font-size:1.875em;
cursor:pointer;
text-align:center;
padding:.625em;
background:#333;
color:white
}

input[type="checkbox"]:checked + .hamburger + .menu {
display:block
}

body {
font-family:monospace,sans-serif;
color:#333;
line-height:1.2;
margin:0;
padding:0;
background-color:#f4f4f4
}

h1 {
font-size:28px;
color:#4CAF50;
margin-top:20px;
margin-bottom:10px;
text-align:center
}

main h2 {
font-size:28px;
color:#005f8a;
margin-top:20px;
margin-bottom:10px;
text-align:center
}

main p {
text-align:left;
line-height:1.2
}

main ul {
list-style-type:none;
padding:0;
margin:20px auto;
max-width:800px
}

main ul li {
font-size:18px;
margin-bottom:10px;
padding-left:10px;
position:relative
}

main ul li::before {
content:"•";
color:#0077B6;
font-size:24px;
position:absolute;
left:0;
top:0
}

main a {
color:#0056b3;
text-decoration:none;
font-weight:bold
}

main a:hover {
text-decoration:underline;
color:#003d80
}

blockquote {
font-style:italic;
background:#F9F9F9;
border-left:5px solid #005f8a;
margin:20px;
padding:10px 20px;
color:#4D4D4D
}

cite {
display:block;
text-align:right;
color:#005f8a;
font-style:normal;
margin-top:10px
}

/* Calendar & Class Section */
.schedule-header {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid #000;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
}

/* Legend Styling */
.legend {
    max-width: 900px;
    margin: 20px auto; /* Center the legend */
    padding: 10px;
    background-color: #e6f7ff; /* Light blue background */
    border-left: 5px solid #007BFF; /* Blue left border */
    border-radius: 8px;
}

.legend p {
    font-size: 1.1em;
    margin: 5px 0;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #333;
}

.legend-icon {
    margin-right: 10px;
    font-size: 1.5em;
}

.legend-item.indoor {
    color: #007BFF; /* Blue text for indoor */
}

.legend-item.outdoor {
    color: #28a745; /* Green text for outdoor */
}

/* Class Location Icon */
.class-location {
    margin-left: 5px;
    font-size: 1.2em;
}

/* Mobile View */
.mobile-view {
    display: block;
}

.mobile-view .day {
    background-color: #f8f9fa;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.mobile-view h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.mobile-view p {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.class-time {
    padding: 5px;
    border-radius: 3px;
}

.class-time.indoor {
    background-color: #cce5ff; /* Light blue */
    color: #000;
}

.class-time.outdoor {
    background-color: #d4edda; /* Light green */
    color: #000;
}

/* Desktop View */
.desktop-view {
    display: none;
    width: 100%;
    border-collapse: collapse;
}

.desktop-view th, .desktop-view td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

.desktop-view th {
    background-color: #f1f1f1;
    color: #000;
}

.desktop-view td.indoor {
    background-color: #cce5ff;
    color: #000;
}

.desktop-view td.outdoor {
    background-color: #d4edda;
    color: #000;
}

/* Cancellations */
.not-running {
    max-width: 900px;
    background-color: #ffe6e6;
    padding: 10px;
    margin: 20px auto;
    border-radius: 8px;
    border-left: 5px solid #ff4d4d;
}

.not-running p {
    font-size: 1.2em;
    color: #333;
}

.cancel-dates {
    font-weight: bold;
    color: #d9534f;
}

#disclaimer {
border:2px solid #0077B6;
padding:20px;
margin:20px;
background-color:#fff;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

#disclaimer h2 {
text-align:center;
font-size:22px;
color:#333
}

#disclaimer p {
font-size:16px;
color:#555
}

.info-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
justify-content:center;
list-style:none;
padding:0;
margin:2rem auto;
max-width:1200px
}

.info-grid li {
display:flex;
align-items:center;
background:#f9f9f9;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
padding:1rem;
text-align:center;
transition:background-color .2s ease,transform .2s ease
}

.info-grid li:hover {
background-color:#e6f4fa;
transform:scale(1.02)
}

.info-grid img {
width:100%;
max-width:150px;
height:auto;
border-radius:8px;
margin-bottom:.5rem
}

.info-grid span {
font-size:1rem;
color:#333;
font-weight:bold
}

.info-grid a {
text-decoration:none;
color:inherit
}

.info-grid li:not(:has(img)) {
background:transparent;
box-shadow:none;
padding:.5rem;
text-align:left
}

.info-grid li:not(:has(img)):hover {
background:none;
transform:none
}

@media (max-width: 600px) {
.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

.site-footer {
background-color:#121212;
color:#fff;
padding:1.5rem;
text-align:center
}

.site-footer ul {
list-style:none;
padding:0;
margin:1rem 0
}

.site-footer ul.footer-links {
margin-bottom:1.5rem
}

.site-footer li {
margin:.5rem 0
}

.site-footer a {
color:#FFD700;
text-decoration:none;
transition:color .3s
}

.site-footer a:hover {
color:#FFC300
}

.site-footer .footer-navigation li {
display:inline-block;
margin:0 .5rem
}

.site-footer .footer-navigation li a {
font-weight:bold
}

/* Buttons */
.button-style,
.message button,
.message a.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #4CAF50;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin: 10px 5px;
    transition: background-color 0.3s ease;
    border: none;
}

.button-style:hover,
.message button:hover,
.message a.button:hover {
    background-color: #45a049;
}

.button-style:focus,
.message button:focus,
.message a:focus {
    outline: 2px solid #FFD700; /* High-contrast focus state */
}

/* Message Section */
.message {
    text-align: center; /* Center-align all text */
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.message h2,
.message h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #4CAF50;
}

.message p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}




/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

/* === Printing === */
@media print {
  body {
    font-size: 12pt;
    color: black;
    background: none;
  }
}


/* Very Small Screens and Minimal Displays */
@media (max-width: 2em) { /* 32px */
  body {
    font-size: 0.625rem; /* 10px */
    max-width: 2rem; /* 32px */
    padding: 0 0.5rem; /* 8px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
}

@media (min-width: 2.063em) and (max-width: 5.25em) { /* 33px to 84px */
  body {
    font-size: 0.75rem; /* 12px */
    max-width: 4rem; /* 84px */
    padding: 0 0.5rem; /* 8px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
}

/* Legacy Screens */
@media (min-width: 5.313em) and (max-width: 15em) { /* 85px to 240px */
  body {
    font-size: 0.8125rem; /* 13px */
    max-width: 14rem; /* 240px */
    padding: 0 0.75rem; /* 12px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
}

/* Very Small Screens (241px to 320px) */
@media (min-width: 15.063em) and (max-width: 20em) { /* 241px to 320px */
  body {
    font-size: 0.9375rem; /* 15px */
    max-width: 16rem; /* 270px */
    padding: 0 1rem; /* 16px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
}

/* Small Screens (321px to 375px) */
@media (min-width: 20.063em) and (max-width: 23.438em) { /* 321px to 375px */
  body {
    font-size: 0.9375rem; /* 15px */
    max-width: 18rem; /* 315px */
    padding: 0 1rem; /* 16px side padding */
  }


.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
}

/* Small-Medium Screens (376px to 480px) */
@media (min-width: 23.5em) and (max-width: 30em) { /* 376px to 480px */
  body {
    font-size: 1.0625rem; /* 17px */
    max-width: 24rem; /* 408px */
    padding: 0 1rem; /* 16px side padding */
  }

  .schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}

  
}

/* Medium Screens (481px to 600px) */
@media (min-width: 30.063em) and (max-width: 37.5em) { /* 481px to 600px */
  body {
    font-size: 1.0625rem; /* 17px */
    max-width: 30rem; /* 512px */
    padding: 0 1.125rem; /* 18px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
  
}

/* Medium-Large Screens (601px to 768px) */
@media (min-width: 37.563em) and (max-width: 48em) { /* 601px to 768px */
  body {
    font-size: 1.0625rem; /* 17px */
    max-width: 46rem; /* 768px */
    padding: 0 1.125rem; /* 18px side padding */
  }

.schedule-header, .classes-list {
    padding: 10px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* Allows horizontal scrolling on smaller devices */
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 4px;
}

.class-item {
    padding: 10px;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
}

.class-item .icon {
    margin-bottom: 10px;
}

.not-running {
    padding: 10px;
}
  
    
}

/* Large Screens (769px to 1024px) */
@media (min-width: 48.063em) and (max-width: 64em) { /* 769px to 1024px */
  body {
    font-size: 1.125rem; /* 18px */
    max-width: 58rem; /* 960px */
    padding: 0 1.125rem; /* 18px side padding */
  }
  .content-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2%;
  }

        .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }
    
}

/* Extra Large Screens (1025px to 1280px) */
@media (min-width: 64.063em) and (max-width: 80em) { /* 1025px to 1280px */
  body {
    font-size: 1.25rem; /* 20px */
    max-width: 74rem; /* 1216px */
    padding: 0 1.125rem; /* 18px side padding */
  }

        .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }


  
}

/* Wide Screens (1281px to 1440px) */
@media (min-width: 80.063em) and (max-width: 90em) { /* 1281px to 1440px */
  body {
    font-size: 1.375rem; /* 22px */
    max-width: 82rem; /* 1344px */
    padding: 0 1.125rem; /* 18px side padding */
  }

        .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }


  
}

/* Ultra-Wide Screens (1441px to 1920px) */
@media (min-width: 90.063em) and (max-width: 120em) { /* 1441px to 1920px */
  body {
    font-size: 1.5rem; /* 24px */
    max-width: 106rem; /* 1728px */
    padding: 0 1.125rem; /* 18px side padding */
  }

    .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }
    
}

/* 4K Screens (1921px to 2560px) */
@media (min-width: 120.063em) and (max-width: 160em) { /* 1921px to 2560px */
  body {
    font-size: 1.5rem; /* 24px */
    max-width: 110rem; /* 1800px */
    padding: 0 1.125rem; /* 18px side padding */
  }
  .content-container {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }

    .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }
    
}

/* 5K and Above Screens (2561px and above) */
@media (min-width: 160.063em) { /* 2561px and above */
  body {
    font-size: 1.5rem; /* 24px */
    max-width: 110rem; /* 1800px */
    padding: 0 1.125rem; /* 18px side padding */
  }
  .content-container {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }

    .hamburger, #menu-toggle {
        display: none; /* Hide hamburger icon and checkbox on larger screens */
    }
    .menu {
        display: block;
        background: none;
    }
    .menu li {
        display: inline-block; /* Horizontal menu */
    }
    .menu li a {
        padding: 15px;
        border-radius: 50%; /* Consistent border-radius */
        border: 2px solid transparent; /* Initial border color transparent */
    }

       .mobile-view {
        display: none;  /* Hide mobile view on larger screens */
    }

    .desktop-view {
        display: table;  /* Show desktop view on larger screens */
    }
    
}

/* === Dark Light Mode === */
@media (prefers-color-scheme: dark) {
  /* Base */
  body { background-color:#000000; color:#ffffff; }

  /* Elements you previously darkened globally */
  blockquote {
    background-color:#222222;
    border-left:5px solid #005f8a;
    color:#CCCCCC;
  }
  cite { color:#009ACD; }

  #disclaimer {
    background-color:#1E1E1E;
    border:2px solid #005f8a;
    color:#E0E0E0;
  }
  #disclaimer h2 { color:#FFFFFF; }
  #disclaimer p  { color:#CCCCCC; }

  .info-grid li { background-color:#262626; color:#FFFFFF; }
  .info-grid span { color:#FFD700; }
  .info-grid li:hover { background-color:#2B2B2B; }
  .info-grid img { border:2px solid #005f8a; }

  /* Calendar and classes */
  .legend {
    background-color:#2a2a2a;
    border-left-color:#3399FF;
    color:#f4f4f4;
  }
  .legend-item { color:#f4f4f4; }
  .legend-icon  { color:#3399FF; }
  .legend-item.indoor  { color:#3399FF; }
  .legend-item.outdoor { color:#77dd77; }

  .schedule-header { background-color:#2a2a2a; color:#f4f4f4; }

  .mobile-view { background-color:#1e1e1e; color:#f4f4f4; }
  .mobile-view .day {
    background-color:#2a2a2a;
    border:1px solid #444;
  }

  .desktop-view { background-color:#1e1e1e; color:#f4f4f4; }
  .desktop-view th, .desktop-view td {
    border:1px solid #444;
    background-color:#2a2a2a;
  }
  .desktop-view th { background-color:#333; color:#f4f4f4; }

  .not-running {
    background-color:#402020;
    color:#FFFFFF;
    border-left:5px solid #ff8080;
  }
  .not-running p { color:#FFFFFF; }

  .flowshop-header { background-color:#2a2a2a; color:#f4f4f4; }
  .schedule-header a, .flowshop-header a { color:#80aaff; }
  .schedule-header a:hover, .flowshop-header a:hover { color:#5590e6; }
}

@media (prefers-color-scheme: light) {
  body { background-color:#ffffff; color:#000000; }
  button, a { border-color:#000000; }
  button:focus, a:focus { outline:2px dashed #000000; }
}