/* =========================
   WMTA: Corrected style.css
   ========================= */

/* ---------- Variables ---------- */
:root{
  --black: #161616;
  --grey: #313436;
  --lightgrey: #b7b9bb;
  --cream: #faebd7;
  --white: #fdf7ef;
  --auburn: #A22522;

  /* navbar height used for mobile fixed positioning */
  --navbar-height: 56px;
}

/* ---------- Reset & base ---------- */
*{ box-sizing: border-box; }
body{ margin: 0; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body{
  font-family: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--black);
  background: var(--white);
}

/* overall page container: can be wider */
main.index{
  max-width: min(95vw, 120rem);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* readable text blocks */
.prose{
  max-width: 72ch;
  margin: 0 auto;
}

/* ---------- Images (global) ---------- */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Navigation ---------- */
.navigation{ width: 100%; }

#navbar{
  background-color: var(--black);
  position: relative;
  z-index: 1000;
  min-height: var(--navbar-height);
  width: 100%;
}

/* inner constrained container */
#navbar .nav-inner{
  display: flex;
  align-items: center;
  gap: 1rem;

  max-width: min(95vw, 120rem);
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

/* Logo: maintain aspect ratio */
img#logo{
  width: auto;
  height: auto;
  max-height: 60px;
  max-width: 100%;
}

/* menu (desktop) floats right */
#navbar .nav-inner .menu{
  margin-left: auto;
  display: flex;
  align-items: center;
}

#navbar .menu ul{
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

#navbar .menu li a{
  color: var(--white);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}

#navbar .menu li a:hover{ color: var(--auburn); }

/* hide native checkbox input */
#toggler{ display: none; }

/* hide label icon on desktop (we use the remix <i> or fallback) */
#navbar label{ display: none; }

/* ---------- Mobile nav behavior ---------- */
@media (max-width: 768px){
  #navbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--navbar-height);
  }

  #navbar .nav-inner{
    height: 100%;
    padding: 0 0.75rem;
    align-items: center;
  }

  main.index{
    padding-top: calc(var(--navbar-height) + 1rem);
  }

  #navbar label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    font-size: 1.9rem;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
  }

  #navbar label i{ display: none; }

  #navbar label::before{
    content: "\2630";
    display: inline-block;
    line-height: 1;
  }

  #toggler:checked + label::before{ content: "\2716"; }

  #navbar .menu{
    position: fixed;
    top: var(--navbar-height);
    left: 0; right: 0;
    background: var(--black);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 3px solid rgba(162, 37, 34, 0.08);
  }

  #navbar .menu ul{
    flex-direction: column;
    padding: 0.5rem 1rem;
    gap: 0;
    margin: 0;
  }

  #navbar .menu li a{
    display: block;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: center;
  }

  #toggler:checked ~ .menu{ max-height: 60vh; }

  img#logo{ max-height: 48px; }
}

/* ---------- Showcase / hero ---------- */
#showcase{
  background:
    linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.0)),
    url("/images/washington_monument_resize.jpg");
  background-size: cover;
  background-position: center;

  min-height: 200px;
  height: clamp(220px, 18vw, 360px);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
}

#welcome_text strong{
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  display: block;
}

#welcome_text p{ font-size: clamp(1rem, 1.3vw, 1.5rem); }

/* ---------- Announcements ---------- */
#announcements{
  background-color: var(--cream);
  padding: clamp(1rem, 3vw, 3rem);
  color: var(--black);
}

#announcements h3{ margin-bottom: 1rem; }

#announcements h4{
  margin: 0.9rem 0 0.4rem;
  line-height: 1.2;
}

.bannerImg{
  width: 60%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* ensure bootstrap-like cols behave on small screens */
@media (max-width: 768px){
  .col-4{
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- About Us images ---------- */
#aboutUs{
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem 0;
}

#aboutUs .content{ padding-right: 1rem; }

#aboutUs .image_container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#aboutUs .image_container img{
  flex: 1 1 30%;
  max-width: 32%;
  border-radius: 8px;
  object-fit: cover;
}

/* ---------- Explore sections (image + text) ---------- */
.explore-right-text,
.explore-left-text{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: center;
  margin: 1.25rem 0;
}

.explore-right-text img,
.explore-left-text img{
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
}

#explore .text{ padding: 1rem; }

/* ---------- President block ---------- */
#president{
  background: var(--cream);
  color: var(--black);
  padding: 2rem;
  text-align: center;
}

#president .content{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
}

#president .content img{
  max-width: 200px;
  border-radius: 12px;
  object-fit: cover;
}

#president .presMsg{
  flex: 1;
  text-align: left;
  min-width: 220px;
}

#president .presMsg .signature{ margin-top: 1rem; }

/* ---------- Explore message / banner ---------- */
#exploreMessage{
  background: var(--auburn);
  color: var(--white);
  text-align: center;
  padding: 1.5rem;
}

#exploreMessage img{
  margin-bottom: 0.75rem;
  max-width: 150px;
}

/* ---------- Buttons ---------- */
.button,
.buttonsm,
.buttontall{
  display: inline-block;
  text-decoration: none;
  color: var(--white);
  background-image: linear-gradient(var(--auburn), #000000);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.button:hover,
.buttonsm:hover,
.buttontall:hover{
  transform: translateY(-2px);
  opacity: 0.95;
}

/* ---------- Footer ---------- */
footer{
  margin-top: 2rem;
  color: var(--white);
  background: var(--grey);
  width: 100%;
}

footer .footer_inner{
  max-width: min(95vw, 120rem);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.footer_container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1rem;
}

.donate{
  flex: 1 1 320px;
  background: transparent;
  color: var(--white);
}

.footer_links{
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Remove bullets & reset lists in footer links */
.footer_links .links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_links .links li{ margin: 0.25rem 0; }

/* Footer bottom bar */
.footer_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--black);
  color: var(--lightgrey);
  font-size: 0.95rem;
  line-height: 1.45;
}

.footer_bottom a,
.footer_links a{
  color: var(--white);
  text-decoration: none;
}

.footer_links a:hover,
.footer_bottom a:hover{ color: var(--auburn); }

footer a{
  color: var(--white);
  text-decoration: none;
}

footer a:hover{ color: var(--auburn); }

/* ---------- Forms & tables ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea{
  font-size: inherit;
  line-height: inherit;
  padding: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
}

/* opt-out for inline fields */
.input-inline{
  width: auto !important;
  display: inline-block;
}

/* Some browsers render <option> smaller unless specified */
select option{ font-size: inherit; }

/* Checkboxes & radios must NOT be full width */
input[type="checkbox"],
input[type="radio"]{
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0 0.4rem 0 0;
  vertical-align: middle;
  accent-color: var(--auburn);
}

/* This is here to change sizing for Bootstrap radios only - makes the radio buttons more visible. */
.form-check-input[type="radio"]{
  width: 1.25rem;
  height: 1.25rem;
}

/* Tables */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--white);
}

th,
td{
  padding: 0.6rem;
  border: 1px solid #e6e6e6;
  text-align: left;
  vertical-align: top;
}

th{
  background: var(--black);
  color: var(--white);
}

/* Fieldsets used in admin/member forms */
fieldset{
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

legend{
  padding: 0 0.4rem;
  font-weight: 600;
}

/* ---------- Typography ---------- */
h1{ font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; }
h2{ font-size: clamp(1.75rem, 2.4vw, 2.5rem); line-height: 1.15; }
h3{ font-size: clamp(1.35rem, 1.7vw, 1.75rem); line-height: 1.2; }
h4{ font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.25; }
h5{ font-size: 1.1rem; }
h6{ font-size: 1.02rem; }
p{ margin: 0 0 0.9rem; }

.on-dark{ color: var(--white); text-decoration: none; }
.on-dark:hover{ color: var(--auburn); }

/* ---------- Responsive adjustments (general) ---------- */
@media (max-width: 768px){
  /* stack about/explore/president sections on mobile */
  #aboutUs{ grid-template-columns: 1fr; }
  #aboutUs .image_container img{ flex: 1 1 100%; max-width: 100%; }

  .explore-right-text,
  .explore-left-text{ grid-template-columns: 1fr; }

  .explore-right-text img,
  .explore-left-text img{ max-width: 100%; }

  #president .content{ flex-direction: column; text-align: center; }
  #president .presMsg{ text-align: center; }

  .footer_container{ flex-direction: column; text-align: center; align-items: center; }
  .footer_bottom{ flex-direction: column; text-align: center; }
}

/* ---------- Inside page formatting (sidebar + content) ---------- */
.inner_container{
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1rem, 2vw, 2rem);
  background-color: var(--cream);
  align-items: flex-start;
}
.inner_container content--wide{
  max-width: 1200px;
}
/* Sidebar */
.inner_container aside{
  flex: 0 0 auto;
  width: 280px;
  max-width: 320px;
  padding: 1.25rem;
  background-color: var(--white);
}

/* Ensure the sidenav fits the sidebar */
.inner_container .sidenav{
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  list-style: none;
}

/* Content */
.inner_container .content{
  flex: 1 1 0;
  min-width: 0;
  max-width: 90ch;
  padding: 2rem;
  background-color: var(--white);
  font-size: 1.125rem;
  line-height: 1.55;
  margin-right: auto;
}

/* Registration pages: wide content area (no sidebar, no 90ch cap) */
.inner_container .reg-content{
  width: 100%;
  max-width: none;
  padding: 2rem;
  background-color: var(--white);
}

/* Sidenav list styling (inside pages only) */
.inner_container .sidenav li{
  list-style: none;
  border-bottom: 1px solid var(--lightgrey);
  padding: 0.65rem 0.6rem;
}

.inner_container #subnav{
  margin: 0.5rem 0 0;
  padding: 0;
}

.inner_container #subnav li{
  padding-left: 1.75rem;
  border-bottom: none;
}

.inner_container #current{
  border-left: 5px solid var(--auburn);
  font-weight: 600;
}

.inner_container #home{
  color: var(--auburn);
  font-weight: 600;
}

.inner_container .sidenav a,
.inner_container .sidenav a:visited{
  color: var(--black);
  text-decoration: none;
}

.inner_container .sidenav a:hover{ color: var(--auburn); }

.inner_container .sidenav a{
  display: block;
  overflow-wrap: anywhere;
}

/* Desktop tweaks */
@media (min-width: 769px){
  #navbar .nav-inner .menu ul li a{
    font-size: clamp(1.25rem, 1.1vw, 1.5rem);
    line-height: 1.2;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
  }

  .inner_container .content{
    overflow-x: auto;
  }

  #navbar .nav-inner .menu ul{ gap: 0.75rem; }
}

/* Inside pages: tables should breathe a bit more */
.inner_container .content table{
  width: 100%;
  table-layout: auto;
}

.inner_container .content th,
.inner_container .content td{
  padding: 0.85rem 0.9rem;
  line-height: 1.4;
  vertical-align: top;
}

.inner_container .content th{
  white-space: nowrap;
}

/* Calendar table: stable columns + sane wrapping */
table.event-calendar{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.event-calendar th,
table.event-calendar td{
  padding: 0.95rem 1rem;
  vertical-align: top;
  line-height: 1.45;
}

table.event-calendar th{ white-space: nowrap; }

/* Column widths (6 columns) */
table.event-calendar th:nth-child(1),
table.event-calendar td:nth-child(1){ width: 5.5ch; text-align: center; }

table.event-calendar th:nth-child(4),
table.event-calendar td:nth-child(4){ width: 7.5ch; }

table.event-calendar th:nth-child(5),
table.event-calendar td:nth-child(5){ width: 9ch; }

table.event-calendar th:nth-child(2),
table.event-calendar td:nth-child(2){ width: 30%; }

table.event-calendar th:nth-child(3),
table.event-calendar td:nth-child(3){ width: 24%; }

table.event-calendar th:nth-child(6),
table.event-calendar td:nth-child(6){ width: 26%; }

table.event-calendar td:nth-child(2),
table.event-calendar td:nth-child(3),
table.event-calendar td:nth-child(6){
  overflow-wrap: anywhere;
  word-break: normal;
}

table.event-calendar td:nth-child(4),
table.event-calendar td:nth-child(5){ white-space: nowrap; }

/* Inside pages: hide the raw checkbox (hamburger uses the label) */
.inner_container .side-toggle{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Inside pages: hamburger sidenav + “no band” behavior (mobile)
   ========================================================= */
@media (max-width: 900px){

  /* Ensure inside-page background is consistent (prevents “white band”) */
  html, body{
    background: var(--cream);
    margin: 0;
    padding: 0;
  }

  .inner_container{
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    background: var(--cream);
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* sidebar first, content second */
  .inner_container > .side{ order: 1; width: 100%; padding: 0; position: relative; }
  .inner_container > .content{ order: 2; width: 100%; max-width: none; padding-top: 1rem; }

  .inner_container .sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    position: relative;
    z-index: 6000;
  }

  .inner_container .side-home{
    color: var(--auburn);
    font-weight: 700;
    text-decoration: none;
  }

  /* keep checkbox hidden */
  .inner_container .side-toggle{ display: none; }

  /* Button box */
  .inner_container .side-toggle-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    background: var(--white);
    position: relative;
  }

  /* Draw 3 bars (hamburger) */
  .inner_container .side-toggle-btn::before{
    content: "";
    width: 22px;
    height: 2px;
    background: var(--black);
    border-radius: 2px;
    box-shadow:
      0 -7px 0 var(--black),
      0  7px 0 var(--black);
    display: block;
    transform: none;
  }

  .inner_container .side-toggle-btn::after{ content: none; }

  /* Turn hamburger into X when checked */
  .inner_container .side-toggle:checked + .side-toggle-btn::before{
    box-shadow: none;
    transform: rotate(45deg);
  }

  .inner_container .side-toggle:checked + .side-toggle-btn::after{
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--black);
    border-radius: 2px;
    transform: rotate(-45deg);
  }

  /* Make dropdown overlay instead of pushing content down */
  .inner_container .side-nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5000;
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    transition: max-height 0.25s ease;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  }

  .inner_container .side-toggle:checked ~ .side-nav{
    max-height: 70vh;
    overflow: auto;
  }

  /* Menu item spacing */
  .inner_container .sidenav{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .inner_container .sidenav a{
    display: block;
    padding: 0.85rem 1rem;
    color: var(--black);
    text-decoration: none;
  }

  .inner_container .sidenav a:hover{ color: var(--auburn); }

  .inner_container #subnav{ margin: 0; padding: 0; }
  .inner_container #subnav a{ padding-left: 2rem; }

  /* remove bottom margin on last content element to prevent “band” */
  .inner_container .content > :last-child{ margin-bottom: 0; }
}

/* Extra insurance: short-height landscape */
@media (max-height: 500px) and (orientation: landscape){
  html, body{ background: var(--cream); }
  .inner_container{ min-height: 100dvh; }
}

/* =========================================================
   Footer policy: hide on mobile/touch
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  footer,
  footer .footer_inner,
  .footer_container,
  .footer_bottom{
    display: none !important;
  }
}

/* ===== board_edit.php layout (no Bootstrap needed) ===== */
.content.board-edit{ max-width: 1100px; }

.content.board-edit .board-edit-top{ margin-bottom: 1rem; }

.content.board-edit .board-edit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px){
  .content.board-edit .board-edit-grid{
    grid-template-columns: 1fr;
  }
}

.content.board-edit .board-edit-table{
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.content.board-edit .board-edit-table th:first-child,
.content.board-edit .board-edit-table td:first-child{
  width: 42%;
  white-space: nowrap;
}

.content.board-edit .board-edit-table th:last-child,
.content.board-edit .board-edit-table td:last-child{
  width: 58%;
}

.content.board-edit .board-edit-table select{
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0.6rem;
}

/* Hide the rows by default */
.perf{ display: none; }

#dynamicFields{ margin-top: 20px; }
.feeInput{ margin-bottom: 5px; }

.reg-content .reg-student-select,
.reg-content .reg-student-select option{
  font-size: 1.125rem;
}

/* Registration edit page: action buttons should not stretch */
.reg-actions .button,
.reg-actions button.button{
  width: auto;
  min-width: 140px;
}

/* Registration edit pages: keep form readable (don’t span whole screen) */
.reg-content .reg-form-wrap{
  max-width: 1100px;
  width: 100%;
}

.reg-content .reg-edit-table{
  width: 100%;
  margin: 0;
}

/* Printable confirmation wrapper */
.print-confirm{
  max-width: 7.25in;
  margin: 0 auto;
}

/* Tables fill the wrapper, not the page */
.print-confirm table{ width: 100%; }