body {
  margin: 0px;
  padding: 0px;
  background: #003DA5;
}

@font-face {
  font-family: myFavFont;
  src: url(GildaDisplay-Regular.ttf);
}

#top {
  margin: 1.5%;
  padding: 0px;
  border: 5px #10181E solid;
  background: white;
}

.top {
  margin: 1.5%;
  padding: 0px;
  border: 5px #10181E solid;
  border-radius: 15px;
  background: white;
}

.title {
  margin: 0px;
  padding: 5px;
  color: black;
  text-align: center;
  vertical-align: center;
  font-family: open sans, times, arial;
  font-weight: bold;
  font-style: normal;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.title2 {
  margin: 0px;
  padding: 25px 5px 25px 5px;
  font: arial, times;
  color: black;
  text-align: center;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.title3 {
  margin: 0px;
  padding: 5px;
  font: 150% open sans, times, arial;
  color: black;
  text-align: center;
}

.menubar {
  font-size: 175%;
  text-align: center;
  color: white;
}

.menubar a {
  color: white;
  text-decoration: none;
}

.menubar a:hover {
  color: yellow;
  text-decoration: underline;
}

.center-table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

@media (max-width: 480px) {
  .center-table { width: 100%; }
  .center-table tr { display: block; margin-bottom: .75rem; }
  .center-table td { display: block; width: 100% !important; }

  /* Labels read naturally above inputs */
  .center-table td:first-child {
    text-align: left !important;
    white-space: normal;
    padding: 0 0 .25rem 0;
  }
}

#mainbody {
  margin: 1.5%;
  padding: 0;
  border: 5px #10181E solid;
  border-radius: 15px;
  background-color: white;
}

#mainbodygray {
  margin: 1.5%;
  padding: 0;
  border: 5px #10181E solid;
  background-color: #C3C6C5;
}

#mainbody a {
  color: #003DA5;
  text-decoration: none;
}

#mainbody .decade-menu a {
  color: #003DA5;
}

#mainbody a:hover {
  color: #003DA5;
  text-decoration: underline;
}

#mainbody .decade-menu a:hover {
  color: #003DA5;
  text-decoration: underline;
}

/* Let class="mainbody" inherit the same styling as #mainbody */
.mainbody {
  margin: 1.5%;
  padding: 0;
  border: 5px #10181E solid;
  border-radius: 15px;
  background-color: white;
}

.mainbody a {
  color: #003DA5;
  text-decoration: none;
}

.mainbody a:hover {
  color: #003DA5;
  text-decoration: underline;
}

.container {
  display: flex; /* Use Flexbox for layout */
  margin: 1.5%;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background-color: transparent;
}

.left-panel, .right-panel {
  flex: 1; /* Each panel takes equal space */
  padding: 20px;
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.left-panel {
  background-color: #f0f0f0;
  border: 5px solid #10181E;
  border-right: 2.5px solid #10181E;
  border-radius: 15px;
}

.right-panel {
  background-color: #C3C6C5;
  border: 5px solid #10181E;
  border-left: 2.5px solid #10181E;
  border-radius: 15px;
}

.logo-left {
  	border: 0;
	margin-right: 15px;
	width: 10%;
  	min-width: 40px;
  	float: left;
}

.logo-center {
  	border: 0;
	margin-left: 15px;
	margin-right: 15px;
	width: 3%;
	min-width: 40px;
	float: none;
}

.logo-right {
  	border: 0;
	margin-left: 15px;
	width: 15%;
	min-width: 40px;
	float: right;
}

@media screen and (max-width: 768px) {
  .logo-left,
  .logo-right {
    width: 15%;
    display: block;
    margin: 0 auto 10px;
	float: none;
  }
  .logo-center {
    width: 6%;
    display: block;
    margin: 0 auto 10px;
	float: none;
  }
}



.odd {
  background-color: lightgray;
}

.black {
  color: #C3C6C5;
}

hr {
  border: 0;
  height: 1px;
  background-color: #003DA5; /* your school blue */
  margin: 2em auto;
}

.bodyh1 {
  margin: 0px;
  padding: .2em;
  font: bold 250% open sans, times, arial;
  color: black;
  text-align: left;
  text-decoration: underline;
}

.bodyh2 {
  margin: 0px;
  padding: .1em;
  font: bold 175% open sans, times, arial;
  color: black;
  text-align: center;
}

.bodyh2a {
  margin: 0px;
  padding: .1em;
  font: bold 275% open sans, times, arial;
  color: black;
  text-align: center;
}

.bodyh2b {
  margin: 0px;
  padding: .1em;
  font: normal 175% open sans, times, arial;
  color: black;
  text-align: center;
}

.bodyh3 {
  margin: 0px;
  padding: .1em;
  font: bold 150% open sans, times, arial;
  color: black;
  text-align: left;
}

.bodyh4 {
  margin: 0px;
  padding: .1em;
  font: bold 150% open sans, times, arial;
  color: black;
  text-align: center;
}

.thoughtq {
  margin: 0px 10%;
  padding: .1em;
  font: bold 150% arial, times;
  color: black;
  text-align: center;
}

.heading1 {
  margin: 0px 1em;
  padding: .2em;
  font: bold 175% open sans, times, arial;
  color: black;
  text-align: left;
}

.headingcolor {
  margin: .2em .8em .2em .8em;
  border: 2px #000000 solid;
  padding: .2em;
  background: #003DA5;
  font: bold 200% open sans, times, arial;
  color: white;
  text-align: center;
}

.headingcolorj {
  margin: .2em .8em .2em .8em;
  border: 2px #000000 solid;
  padding: .2em;
  background: #002366;
  font: bold 200% open sans, times, arial;
  color: white;
  text-align: center;
}

.text {
  margin: 0px 1em;
  padding: .2em .2em 1em .2em;
  font: 150% arial, times;
  color: black;
}

.textcenter {
  margin: 0px 1em;
  padding: .2em .2em 1em .2em;
  font: 150% arial, times;
  color: black;
  text-align: center;
}

.textright {
  margin: 0px 1em;
  padding: .2em .2em 1em .2em;
  font: 150% arial, times;
  color: black;
  text-align: right;
}

.formtext {
  margin: 0px 1em;
  padding: .2em .2em 1em .2em;
  font: 150% arial, times;
  color: black;
  text-align: right;
}

.quote {
  margin: 0px 1em;
  padding: .2em .2em .2em 2em;
  font: 150% arial, times;
  color: black;
  font-style: italic;
}

.listindented {
  margin: 0px 0px;
  padding: 0em 0em 0em 4em;
}

.textindented {
  margin: 0px 0em;
  padding: 0em 1em 1em 0.5em;
  font: 150% arial, times;
  color: black;
}

.textindented2 {
  margin: 0px;
  padding: 0em 0em 0em 8em;
  font: 150% arial, times;
  color: black;
}

.textinput {
  font: 100% arial, times;
  color: black;
  text-align: center;
}

.texttable {
  font: 150% arial, times;
  color: black;
  text-align: left;
  border: 1px solid black;
}

.texttable a {
  color: #003DA5;
  text-decoration: none;
}

.texttable a:hover {
  color: #003DA5;
  text-decoration: underline;
}

.copyright {
  margin: 2px;
  padding: .3em 0px;
  text-align: center;
  font: normal x-small arial, times;
}

/* === Class Links Pop-up Menus (lightweight, uses existing look) === */

/* Grid of decade cells; reuses your .center-table width */
.decade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5em 1em;
  width: 80%;
}

/* Each decade container positions its pop-up */
.decade {
  position: relative;
  text-align: center;
}

/* Make the decade look like a clean, tappable label using your big type */
.decade-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .25em .4em;
  width: 100%;
  line-height: 1.2;
}

/* Pop-up panel */
.decade-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + .25em);
  min-width: 14rem;
  background: #fff;
  border: 3px solid #10181E;       /* your black */
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  z-index: 20;
  display: none;
}

/* Open state */
.decade-menu.open { display: block; }

/* Year links grid */
.decade-menu .years {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .25em .5em;
  padding: .6em .7em .8em;
}

/* Year links: reuse red link color on hover (you already define #mainbody a:hover) */
.decade-menu a {
  font: 200% arial, times;         /* match .texttable/.text sizing vibe */
  color: #003DA5;                  /* body text black */
  text-decoration: none;
  padding: .1em .2em;
  border-radius: 4px;
  text-align: center;
}

.decade-menu a:hover {
  color: #003DA5;
  text-decoration: underline;
}

/* Mobile: stack decades nicely */
@media (max-width: 800px) {
  .decade-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
  }
}

/* === Traditions accordion (looks like Sample, uses Traditions colors) === */
.acc__wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.5rem .75rem;
}
.acc__title{ margin:0; }
.acc__toggle{
  margin: 0 1rem 0 0; padding:.35rem 1.25rem;
  border:3px solid #10181E; border-radius:8px;
  background:#fff; color:#10181E; cursor:pointer;
  font-size: 150%; font-weight:bold;
}
.acc__toggle:hover{
  background:#003DA5; color:#fff;
}
.acc__panel{
  overflow:hidden; transition:height .28s ease;
  border-top: 3px solid #10181E;     /* subtle divider when open */
  background:#fff;
}
.acc__panel[hidden]{ display:block; height:0; }

/* Keep links and headings consistent inside the panel */
.acc__panel a{ color:#003DA5; text-decoration:none; }
.acc__panel a:hover{ text-decoration:underline; }

/* --- Force OPEN buttons to stay white (even on hover) --- */
/* When expanded (CLOSE state): blue button + blue hover */
.acc__toggle[aria-expanded="true"] {
  background: #003DA5;
  color: #fff;
}
.acc__toggle[aria-expanded="true"]:hover {
  background: #003DA5;
  color: #fff;
}

/* When collapsed (OPEN state): always white, even if hovered */
.acc__toggle[aria-expanded="false"],
.acc__toggle:not([aria-expanded="true"]) {
  background: #fff;
  color: #10181E;
}
.acc__toggle[aria-expanded="false"]:hover,
.acc__toggle:not([aria-expanded="true"]):hover {
  background: #fff;
  color: #10181E;
}

/*
Blue hex #003DA5,
Black hex #10181E,
Gray hex #C3C6C5 */

/* === BEGIN Responsive Enhancements (ChatGPT 2025-11-07)
Keeps desktop/iPad look, improves iPhone experience
================================================== */

/* Make sizing predictable */
*,
*::before,
*::after { box-sizing: border-box; }

/* Images scale within containers */
img { max-width: 100%; height: auto; }

/* Menubar wraps only on small screens (moved into media query) */

/* Inline logo images inside .title */
.title img { height: auto; max-width: 12vw; min-width: 40px; }

/* Forms: make inputs fill container more comfortably by default */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  max-width: 100%;
}

/* Decade grid: reasonable default columns already defined later;
ensure it doesn't overflow small viewports */
.decade-menu {
  max-width: 92vw;
}

/* ---------------------------
Breakpoint: tablets/phones
--------------------------- */
@media screen and (max-width: 768px) {

  body { font-size: 90%; }

  .top, #top {
    margin: 1%;
    border-width: 3px;
  }

  .mainbody,
  #mainbody,
  #mainbodygray {
    margin: 1%;
    border-width: 3px;
  }

  .title {
    padding: 10px;
  }

  .title2 { padding: 10px 6px; }
  .title3 { font-size: 120%; }

  .bodyh1   { font-size: 180%; }
  .bodyh2   { font-size: 135%; }
  .bodyh2a  { font-size: 150%; }
  .bodyh2b  { font-size: 130%; }
  .bodyh3   { font-size: 125%; }
  .bodyh4   { font-size: 125%; }
  .heading1 { font-size: 135%; }
  .headingcolor,
  .headingcolorj { font-size: 150%; padding: .35em; }

  .text,.textright,.textcenter,
  .quote,
  .textindented,
  .textindented2,
  .texttable {
    font-size: 115%;
    padding-left: .6em;
    padding-right: .6em;
  }

  .center-table { width: 96%; }

  /* Stack any side-by-side panels */
  .container { display: block; }
  .left-panel, .right-panel {
    width: 100%;
    padding: 14px;
    border: 5px solid #10181E;
    border-radius: 15px;
  }

  /* Make menubar vertical-ish and hide pipe separators if present */
  .menubar { font-size: 120%; line-height: 1.4; }
  .menubar a { display: inline-block; margin: 4px 0; }
  .menubar .black { display: none; }

  /* Float-busting for images embedded in text blocks */
  .mainbody img,
  .bodyh2a img,
  #mainbody img,
  .text img:not(.logo-left):not(.logo-center) {
    float: none !important;
    margin: 10px auto !important;
    display: block;
	width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* EXCEPTION — logo stays small on phones */
   .text img.logo-left { 
    width: 15% !important; 
    height: auto !important; 
    float: left !important; 
	  }
	.bodyh2a img.logo-center {
		width: 6% !important;
	    height: auto !important; 
	}
  
  /* Form controls fill the width nicely */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea {
    width: 100% !important;
    font-size: 100%;
  }

  /* Buttons scale */
  button, .bodyh2 button, .bodyh2a button { font-size: 110%; }

  /* Class links decade grid: reduce columns */
  .decade-grid {
    width: 96%;
    grid-template-columns: repeat(2, 1fr);
    gap: .4em .6em;
  }

  /* Pop-up should not overflow; position below trigger */
  .decade-menu {
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + .4em);
    max-width: 96vw;
  }

  .decade-menu .years {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------
Extra small phones
--------------------------- */
@media screen and (max-width: 480px) {
  .menubar { font-size: 110%; }
  .decade-grid { grid-template-columns: 1fr; }
  .decade-menu .years { grid-template-columns: repeat(3, 1fr); }
}

/* Smooth responsive heading scaling */
.bodyh2a { font-size: clamp(1.4rem, 3vw, 2rem); }