/* Bridgewater YOU - site-wide styles */

:root {
  --navy: #0B2A5C;
  --navy-dark: #081f45;
  --gold: #C78F14;
  --cream: #FBF3E5;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Verdana, Arial, sans-serif;
  background: var(--cream);
  color: #1a1a1a;
}

a {
  color: inherit;
}

/* ---------- Banner ---------- */

.banner-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Nav strip ---------- */

.site-nav {
  background: var(--navy);
  border-top: 4px solid var(--gold);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.site-nav li {
  flex: 1 1 0;
  min-width: 140px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.site-nav li:last-child {
  border-right: none;
}

.site-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 10px;
  text-decoration: none;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--navy-dark);
}

.site-nav a.active {
  background: var(--navy-dark);
  box-shadow: inset 0 -4px 0 var(--gold);
}

.site-nav img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

@media (max-width: 720px) {
  .site-nav li {
    flex: 1 1 33.33%;
    min-width: 0;
  }
  .site-nav a {
    padding: 16px 6px;
    font-size: 0.8rem;
  }
  .site-nav img {
    width: 28px;
    height: 28px;
  }
}

/* ---------- Page content ---------- */

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

main h1 {
  color: var(--navy);
  font-size: 2rem;
  margin-bottom: 0.25em;
}

main .subtitle {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 1.5em;
}

main p {
  line-height: 1.6;
  font-size: 1.05rem;
}

.signature {
  font-style: italic;
  color: var(--navy);
  margin-top: -0.5em;
}

.coming-soon {
  background: var(--white);
  border-left: 5px solid var(--gold);
  padding: 20px 24px;
  border-radius: 4px;
  margin-top: 24px;
}

/* ---------- Forms ---------- */

.volunteer-form {
  margin-top: 28px;
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

.form-note-large {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 24px;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c9c2b3;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--white);
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="tel"]:focus,
.form-row textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Name + Email side by side on wider screens, stacked on narrow ones */
.form-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .form-two-col {
    grid-template-columns: 1fr;
  }
}

.committee-fieldset {
  border: 1px solid #c9c2b3;
  border-radius: 6px;
  padding: 20px;
  margin: 24px 0;
}

.committee-fieldset legend {
  font-weight: 700;
  color: var(--navy);
  padding: 0 8px;
}

/* Committees stack one per row, full width, so every responsibility line
   has room to fit on a single line without shrinking the font. */
.committee-fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.committee-option {
  background: var(--white);
  border: 1px solid #e6dfd0;
  border-radius: 6px;
  padding: 14px 18px;
}

.committee-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  margin-bottom: 8px;
}

/* Custom square selector (styled as a checkbox look) even though the
   underlying input stays type="radio" so only one committee can be
   chosen per submission. */
.committee-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--navy);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin: 0;
}

.committee-label input[type="radio"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.committee-label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 7px;
  height: 14px;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.committee-label input[type="radio"]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.committee-title {
  font-size: 1.1rem;
}

.committee-duties {
  margin: 0;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #333;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .committee-duties {
    white-space: normal;
  }
}

/* Class Format checkbox group on the Teachers sign-up form. Same visual
   language as the Forum page's committee selector, but built with real
   checkboxes (not radios) since a teacher may offer a class in more than
   one format. */
.format-fieldset {
  border: 1px solid #c9c2b3;
  border-radius: 6px;
  padding: 20px;
  margin: 20px 0;
}

.format-fieldset legend {
  font-weight: 700;
  color: var(--navy);
  padding: 0 8px;
}

.format-hint {
  font-weight: 400;
  font-size: 0.85rem;
  color: #555;
}

.format-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.format-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  background: var(--white);
  border: 1px solid #e6dfd0;
  border-radius: 6px;
  padding: 10px 16px;
}

.format-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--navy);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin: 0;
}

.format-label input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.format-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.format-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.format-other-detail {
  margin-top: 16px;
  margin-bottom: 0;
}

.field-error {
  color: #b3261e;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .format-options {
    flex-direction: column;
  }
}

.submit-button {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 12px 32px;
  border-radius: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.submit-button:hover {
  background: var(--navy-dark);
}

/* ---------- Footer ---------- */

footer {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: 20px;
  font-size: 0.85rem;
}

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

/* ---------- Class Registration picker ---------- */

.class-fieldset {
  border: 1px solid #c9c2b3;
  border-radius: 6px;
  padding: 20px;
  margin: 20px 0;
}

.class-fieldset legend {
  font-weight: 700;
  color: var(--navy);
  padding: 0 8px;
}

#class-list-loading {
  color: #555;
  font-style: italic;
  margin-top: 10px;
}

/* Two categories per row on wide screens instead of one long vertical
   list, since there's ample horizontal room on desktop; stacks to a
   single column on narrow screens. */
#class-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

@media (max-width: 700px) {
  #class-categories {
    grid-template-columns: 1fr;
  }
}

.class-category {
  margin-top: 20px;
}

.class-category-heading {
  color: var(--navy);
  font-size: 1.05rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin: 0 0 12px;
}

.class-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  background: var(--white);
  border: 1px solid #e6dfd0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.class-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--navy);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin: 2px 0 0;
}

.class-option input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.class-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.class-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.class-option-text {
  display: flex;
  flex-direction: column;
}

.class-title {
  font-size: 1rem;
}

.class-detail {
  font-weight: 400;
  color: #555;
  font-size: 0.85rem;
}

.class-original-title {
  font-weight: 400;
  font-style: italic;
  color: #777;
  font-size: 0.8rem;
  margin-top: 3px;
}

.class-schedule {
  font-weight: 400;
  color: #555;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* ---------- Class Registration: wide-desktop layout ---------- */
/* Only on wide desktop screens (1100px and up): widen the Class
   Registration page and flow the categories down three columns, one
   after another, so there are no blank gaps between rows. Category
   headings lose their gold underline here. Tablets and phones are
   untouched. Scoped to the page containing the registration form so no
   other page is affected. */
@media (min-width: 1100px) {
  main:has(#registration-form) {
    max-width: 1200px;
  }
  #class-categories {
    display: block;
    column-count: 3;
    column-gap: 32px;
  }
  .class-category {
    break-inside: avoid;
    margin-top: 0;
    margin-bottom: 26px;
  }
  .class-category-heading {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ---------- Class Schedule page ---------- */

.sched-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 22px;
}

.sched-controls button {
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 4px;
  cursor: pointer;
}

.sched-controls button:hover,
.sched-controls button:focus {
  background: var(--navy);
  color: var(--white);
}

.sched-week {
  background: var(--white);
  border-radius: 4px;
  margin-bottom: 14px;
  border: 1px solid #e6dcc6;
}

.sched-week summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--gold);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  list-style: none;
}

.sched-week summary::-webkit-details-marker {
  display: none;
}

.sched-week:not([open]) summary {
  border-radius: 4px;
}

.sched-week summary::after {
  content: "+";
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  padding-left: 12px;
}

.sched-week[open] summary::after {
  content: "\2212";
}

.sched-week-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.sched-week-count {
  font-size: 0.9rem;
  opacity: 0.85;
}

.sched-tbd summary {
  background: #6b5a2e;
}

.sched-tbd-body {
  padding: 4px 20px 18px;
}

.sched-tbd-body p {
  margin: 10px 0 12px;
  color: #555;
  font-size: 0.95rem;
}

.sched-tbd-list {
  margin: 0;
  padding-left: 20px;
  column-width: 320px;
  column-gap: 44px;
  column-rule: 2px solid var(--gold);
}

.sched-tbd-list li {
  break-inside: avoid;
  padding: 6px 0;
  font-weight: 600;
  line-height: 1.3;
}

.sched-dates {
  column-width: 320px;
  column-gap: 44px;
  column-rule: 2px solid var(--gold);
  padding: 8px 20px 16px;
}

.sched-date {
  break-inside: avoid;
  padding-top: 8px;
}

.sched-date h3 {
  color: var(--navy);
  font-size: 1.1rem;
  margin: 6px 0 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--gold);
}

.sched-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sched-item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 4px 14px;
  padding: 8px 0;
  border-top: 1px solid #efe6d2;
}

.sched-item:first-child {
  border-top: none;
}

.sched-time {
  font-weight: 700;
  color: var(--navy);
}

.sched-info {
  display: block;
}

.sched-title {
  display: block;
  font-weight: 600;
}

.sched-meta {
  display: block;
  color: #555;
  font-size: 0.92rem;
  margin-top: 2px;
}

.sched-meta strong {
  color: #B3141B;
  font-weight: 700;
}

@media (max-width: 520px) {
  .sched-item {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1000px) {
  main:has(.sched-page) {
    max-width: 1180px;
  }
}

/* ---------- Home landing box ---------- */

.home-landing {
  background: var(--white);
  border-left: 5px solid var(--gold);
  border-radius: 4px;
  padding: 32px 36px;
  margin-top: 24px;
}

.home-landing h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1.9rem;
  line-height: 1.2;
}

.home-landing .home-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 18px;
}

.home-landing .home-semester {
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 10px 0;
  margin: 0 0 24px;
}

.home-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.home-btn {
  display: inline-block;
  flex: 1 1 260px;
  padding: 24px 28px;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.home-btn-gold { background: var(--gold); color: var(--navy-dark); }
.home-btn-gold:hover, .home-btn-gold:focus { background: #b07d0f; }
.home-btn-navy { background: var(--navy); color: var(--white); }
.home-btn-navy:hover, .home-btn-navy:focus { background: var(--navy-dark); }

.home-landing .home-note {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}

.home-ff {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.home-ff span {
  opacity: 0.75;
}

.home-ff img {
  height: 3em;
  width: 3em;
  flex: none;
  mix-blend-mode: multiply;
}

main:has(.home-ff) {
  padding-top: 99px;
}

main:has(.home-ff) h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 36px;
}

main:has(.home-ff) .home-landing {
  margin-top: 0;
}

/* ---------- Mobile refinements (phones, 600px and narrower) ---------- */

@media (max-width: 600px) {
  /* Banner: crop to the center so the badge and slogan stay legible. */
  .banner-image {
    height: 190px;
    object-fit: cover;
    object-position: center;
  }

  /* Tighter menu so content starts higher on the screen. */
  .site-nav a {
    padding: 10px 4px;
    gap: 6px;
    font-size: 0.78rem;
  }
  .site-nav img {
    width: 24px;
    height: 24px;
  }

  main {
    padding: 28px 16px 48px;
  }

  main h1 {
    font-size: 1.6rem;
  }

  .form-note-large {
    font-size: 1.2rem;
  }

  /* Stacked form fields: the row margin already supplies the spacing. */
  .form-two-col {
    gap: 0;
  }

  /* Home page */
  main:has(.home-ff) {
    padding-top: 36px;
  }
  main:has(.home-ff) h1 {
    font-size: 1.6rem;
    margin-bottom: 24px;
  }
  .home-landing {
    padding: 22px 18px;
  }
  .home-landing h2 {
    font-size: 1.5rem;
  }
  .home-landing .home-lead {
    font-size: 1.05rem;
  }
  .home-landing .home-semester {
    font-size: 0.9rem;
  }
  .home-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .home-btn {
    display: block;
    flex: none;
    padding: 18px 16px;
    font-size: 1.2rem;
    text-align: center;
  }
}

/* ---------- Add to phone ---------- */

.home-buttons-addphone {
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 0;
}

.home-btn-outline {
  background: #FBE9B7;
  color: var(--navy);
  border: 2px solid var(--navy);
  flex: 0 1 auto;
  font-size: 1.1rem;
  padding: 12px 26px;
  box-shadow: 4px 5px 0 rgba(11, 42, 92, 0.35), 6px 9px 14px rgba(11, 42, 92, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.home-btn-outline:hover,
.home-btn-outline:focus {
  background: var(--navy);
  color: var(--white);
  transform: translate(2px, 2px);
  box-shadow: 2px 3px 0 rgba(11, 42, 92, 0.35), 3px 5px 8px rgba(11, 42, 92, 0.18);
}

.a2hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 28px 0;
}

.a2hs-card {
  background: var(--white);
  border-left: 5px solid var(--gold);
  border-radius: 4px;
  padding: 22px 26px;
}

.a2hs-card h2 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 1.3rem;
}

.a2hs-card .a2hs-note {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--gold);
}

.a2hs-card ol {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.6;
}

.a2hs-card li {
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .a2hs-grid {
    grid-template-columns: 1fr;
  }
}