/* BISSE minimal static site styles - no external deps */
:root{
  --bg:#ffffff;
  --fg:#1f2937;
  --muted:#6b7280;
  --brand:#f97316;
  --brand-2:#ea580c;
  --card:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:980px;margin:0 auto;padding:1rem}
.header{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:white;
  padding:1.75rem 0;
}
.header h1{margin:0;font-size:1.75rem}
.header p{margin:.25rem 0 0 0;opacity:.9}

.nav{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:flex-start
}

.nav a {
  color:#111827;          /* dark text initially */
  background:#facc15;     /* yellow background initially */
  text-decoration:none;
  padding:.5rem 1rem;
  border-radius:9999px;   /* pill shape */
  transition: all .2s ease;
}

.nav a:hover {
  background:#800020;     /* deep burgundy */
  color:#ffffff;          /* white text */
}

.main{padding:2rem 0}
.card{
  background:var(--card);border:1px solid #e5e7eb;border-radius:1rem;padding:1rem;margin:1rem 0;
}
h2{margin-top:0}
.footer{
  border-top:1px solid #e5e7eb;margin-top:2rem;padding:1rem 0;color:var(--muted);font-size:.9rem
}
ul.clean{list-style:none;padding-left:0}
.tag{display:inline-block;background:#eef6ff;border:1px solid #dbeafe;color:#1e40af;padding:.15rem .5rem;border-radius:.4rem;font-size:.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
input,textarea,button{font:inherit}
label{display:block;margin:.5rem 0 .25rem}
input,textarea{width:100%;padding:.6rem;border:1px solid #e5e7eb;border-radius:.5rem}
button{padding:.6rem .9rem;border:0;border-radius:.5rem;background:var(--brand-2);color:white;cursor:pointer}
button:hover{filter:brightness(1.05)}
a{color:#0b63ce}
a.button-link{display:inline-block;border:1px solid #d1d5db;background:white;color:#111827;text-decoration:none;padding:.5rem .75rem;border-radius:.5rem}
.small{font-size:.92rem;color:var(--muted)}

.logo-title img {
  height: 80px; /* adjust as needed */
  width: auto;
}

.memorial {
  background: #fff1f2;             /* light rose background */
  border-left: 6px solid #be123c;  /* deep rose accent */
  padding: 1.5rem;
  border-radius: .75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.memorial p {
  margin: 0;
  color: #7f1d1d;                 /* rich burgundy text */
  font-weight: 500;
}

.carole-flex {
  display: flex;
  align-items: center;            /* vertically center images + text */
  gap: 1.5rem;
  flex-wrap: wrap;                /* stacks on smaller screens */
}

.carole-img, .book-img {
  max-width: 150px;
  height: auto;
  border: 2px solid #e5e7eb;
  border-radius: .5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.carole-text {
  flex: 1;
  min-width: 220px;
}

.memorial-heading {
  font-size: 1.75rem;     /* larger size than normal */
  font-weight: 700;       /* bold */
  color: #be123c;         /* deep rose/burgundy to match the memorial accent */
  margin-bottom: 1rem;    /* spacing before the memorial box */
}

.logo-title {
  display: flex;
  align-items: center;  /* vertically center text with logo */
  gap: 1rem;            /* space between logo and text */
}

.logo-img {
  height: 80px;         /* adjust as needed */
  width: auto;
}

/* Values & Methodology helpers */
.section{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:1rem 1.25rem;margin:1.25rem 0}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:.75rem}
.value-card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem}
.anchor{scroll-margin-top:100px}

.value-card h3,
.section h2 { display:flex; justify-content:space-between; align-items:center; }

.value-card h3 img,
.section h2 img { height: 32px; width: auto; }

.highlight-rose {
  background-color: #fff1f2;  /* soft rose */
  border: 1px solid #fecdd3;  /* slightly deeper rose border */
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin: 1rem 0;
}

.card-yellow {
  background-color: #fef9c3; /* soft yellow */
  border: 1px solid #fde047;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card-yellow h2 {
  text-align: center;
  margin-top: 0;
  color: #1e3a8a; /* deep blue for headings */
}

.card-yellow .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.card-yellow h3 {
  margin-bottom: .5rem;
  color: #111827;
}

.card-yellow ul {
  margin: 0;
  padding-left: 1.25rem;
}
.card-green {
  background-color: #d1fae5; /* light green */
  border: 1px solid #86efac;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card-green h2 {
  text-align: center;
  margin-top: 0;
  color: #065f46; /* deep green for heading */
}

.card-green .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.card-green ul {
  margin: 0;
  padding-left: 1.25rem;
}

.card-orange {
  background-color: #ffedd5; /* light orange */
  border: 1px solid #fdba74;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card-orange h2 {
  text-align: center;
  margin-top: 0;
  color: #9a3412; /* deep orange for heading */
}

.card-orange .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.card-orange ul {
  margin: 0;
  padding-left: 1.25rem;
}
.card-purple {
  background-color: #f3e8ff; /* light purple */
  border: 1px solid #d8b4fe;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card-purple h2 {
  text-align: center;
  margin-top: 0;
  color: #6b21a8; /* deep purple for heading */
}

.card-purple .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.card-purple h3 {
  margin-bottom: .5rem;
  color: #4b5563; /* neutral dark gray */
}

.card-purple ul {
  margin: 0;
  padding-left: 1.25rem;
}

.rose-card {
  background-color: #ffe4e6; /* soft rose */
  border: 1px solid #f9a8d4;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.rose-card h2 {
  text-align: center;
  margin-top: 0;
  color: #9d174d; /* deep rose text */
}

.rose-card ul {
  columns: 2; /* display in two columns, auto-flow */
  column-gap: 2rem;
  list-style-type: disc;
  padding-left: 1.25rem;
}
.blue-card {
  background-color: #dbeafe; /* light blue */
  border: 1px solid #93c5fd;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.blue-card h2 {
  text-align: center;
  margin-top: 0;
  color: #1e3a8a; /* deep blue */
}
.blue-card ul {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.25rem;
}

.yellow-card {
  background-color: #fef9c3; /* pale yellow */
  border: 1px solid #fde047;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.yellow-card h2 {
  text-align: center;
  margin-top: 0;
  color: #92400e; /* warm golden-brown text */
}
.yellow-card ul {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.25rem;
}

.lesson-plans {
  width: 100%;
  border-collapse: collapse;
}

.lesson-plans th, .lesson-plans td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.lesson-plans thead {
  background-color: #f9a8d4; /* rose header */
  color: #831843; /* deep rose text */
}

.lesson-plans tbody tr:nth-child(odd) {
  background-color: #ffffff; /* white */
}

.lesson-plans tbody tr:nth-child(even) {
  background-color: #ffe4e6; /* soft rose */
}

/* ===== Secondary dropdown nav (added) ===== */

.subnav .container{ padding-top:.35rem; padding-bottom:.35rem; }
.subnav-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.subnav-menu > li{ position:relative; }
.subnav-menu > li > a,
.subnav-menu > li > button.submenu-toggle{ display:inline-block; padding:.4rem .65rem; border-radius:.75rem; border:0; cursor:pointer;
  background:transparent; color:inherit; text-decoration:none; }
.subnav-menu > li > a:hover,
.subnav-menu > li > button.submenu-toggle:hover{ background:#f3f4f6; text-decoration:none; }
/* dropdown */
.subnav .has-submenu .submenu{ position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid #e5e7eb;
  border-radius:.6rem; padding:.35rem; box-shadow:0 10px 30px rgba(0,0,0,.12); display:none; z-index:30; }
.subnav .has-submenu:hover > .submenu,
.subnav .has-submenu:focus-within > .submenu{ display:block; }


/* mobile */
@media (max-width: 900px){
  .subnav-menu{ flex-direction:column; }
  .subnav .has-submenu .submenu{ position:static; box-shadow:none; border:0; padding:.25rem 0; display:none }
  .subnav .has-submenu.open .submenu{ display:block; }
}

/* === Promote secondary subnav into main header look === */
.header .nav{ display:none; } /* hide old buttons/menu */

.subnav{
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); /* same orange header background */
  color: #111827;
  border: 0;
}
.subnav .container{ padding-top:.5rem; padding-bottom:.7rem; }

/* square yellow boxes for top-level items */
.subnav-menu > li > a,
.subnav-menu > li > button.submenu-toggle{
  background: #fde047;           /* sunflower yellow */
  color: #111827;                 /* dark text */
  border: 1px solid #facc15;      /* golden border */
  border-radius: .75rem;          /* nearly square */
  padding: .5rem .7rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.subnav-menu > li > a:hover,
.subnav-menu > li > button.submenu-toggle:hover{
  background: #fef08a;            /* lighter on hover */
  text-decoration: none;
}

/* dropdown panels on yellow */
.subnav .has-submenu .submenu{
  background: #fef9c3;            /* pale yellow panel */
  border: 1px solid #fde047;
  border-radius: .35rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.subnav .submenu a{
  color:#111827;
  border-radius:.25rem;
}
.subnav .submenu a:hover{
  background:#fef08a;
}

/* maintain accessibility contrast when header is orange */
.subnav .submenu-toggle{ color:#111827; }

@media (max-width:900px){
  .subnav .has-submenu .submenu{
    box-shadow:none;
    border:0;
    background: transparent; /* items themselves are still yellow on hover */
  }
}

/* === Submenu link polish (no underline + light blue hover) === */
.subnav .has-submenu .submenu a {
  text-decoration: none;
  display: block;
  padding: .45rem .6rem;
  color: #111827;
  border-radius: .25rem;
}

.subnav .has-submenu .submenu a:hover,
.subnav .has-submenu .submenu a:focus-visible {
  background-color: #bfdbfe;
  color: #1e3a8a;
  outline: none;
}

/* Ensure Resources submenu items never wrap */
.subnav .has-submenu.resources .submenu a {
  white-space: nowrap !important;
}

/* Let Resources submenu grow horizontally to fit nowrap text */
.subnav .has-submenu.resources .submenu {
  width: auto;
  min-width: max-content;
}

.song-table {
  width: 100%;
  table-layout: fixed;   /* keeps column widths fixed */
  border-collapse: collapse;
}

.song-table th,
.song-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-table thead {
  background-color: #bfdbfe; /* light blue header */
  color: #1e3a8a;
}

.song-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.song-table tbody tr:nth-child(even) {
  background-color: #e0f2fe;
}

/* Compact audio player */
.song-table .player {
  width: 120px;   /* keeps it slim */
  height: 28px;   /* smaller vertical size */
}

.card {
  max-width: 900px;    /* adjust width cap as needed */
  margin: 2rem auto;   /* centers it horizontally */
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #fff;    /* or keep your rose/light blue etc. */
}

.audio-player{
  display:flex; align-items:center; gap:.5rem;
  max-width: 360px;
  padding:.25rem .5rem;
}

.ap-btn{
  border:1px solid #cbd5e1; background:white; color:#111827;
  padding:.25rem .5rem; border-radius:.375rem; cursor:pointer;
}
.ap-btn:hover{ background:#f1f5f9; }

.ap-time{
  font-variant-numeric: tabular-nums;
  font-size:.9rem; min-width:3.2ch; text-align:right;
}

.ap-seek{
  -webkit-appearance:none; appearance:none;
  width: 160px; height:6px; border-radius:9999px;
  background:#e5e7eb; outline:none; cursor:pointer;
}
.ap-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#1e40af; /* deep blue knob */
  border:0; margin-top:-4px;
}
.ap-seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#1e40af; border:0;
}
.ap-seek::-moz-range-track{ height:6px; background:#e5e7eb; border-radius:9999px; }

/* default card you already have
.card { max-width: 900px; margin: 2rem auto; }
*/

/* wider card option */
.card-wide {
  max-width: 1200px;          /* try 1200–1400px if you like */
}

/* extra-wide on big screens, still comfy on laptops */
@media (min-width: 1400px){
  .card-wide { max-width: 1400px; }
}

/* fully fluid but capped (optional alternative) */
.card-fluid-xl {
  max-width: min(95vw, 1400px);
}

/* prevent accidental text selection while dragging the slider */
.audio-player { user-select: none; -webkit-user-select: none; }
/* make the thumb a bit easier to grab */
.ap-seek::-webkit-slider-thumb { width:16px; height:16px; }

.image-text-section {
  max-width: 1000px; /* keeps rows centered */
  margin: 0 auto;
  padding: 20px;
}

.image-text-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.image-col {
  flex: 1;
}

.image-col img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.text-col {
  flex: 2;
}

.text-col h3 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .image-text-row {
    flex-direction: column;
    text-align: center;
  }
  .text-col {
    text-align: left;
  }
}


.gallery-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery-item {
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  transition: transform 0.2s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

.gallery-item figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  font-weight: 600;
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

.lesson-plans {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.lesson-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.lesson-table th,
.lesson-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.lesson-table th {
  background-color: #f4a261; /* warm orange header */
  color: #fff;
}

/* Alternate row colors */
.lesson-table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* white */
}

.lesson-table tbody tr:nth-child(even) {
  background-color: #fff8dc; /* light yellow (cornsilk) */
}

.lesson-table a {
  color: #1e40af;
  font-weight: 600;
  text-decoration: none;
}

.lesson-table a:hover {
  text-decoration: underline;
}



.newsletter-archive { max-width: 1000px; margin: 0 auto; padding: 20px; }
.year-box { background:#fff9f5; border:1px solid #ffd7b5; border-radius:10px; padding:20px; margin:0 0 28px; }
.year-box h3 { background:#f4a261; color:#fff; padding:10px 14px; border-radius:8px; margin:0 0 12px; font-size:1.2rem; }
.newsletter-table { width:100%; border-collapse: collapse; }
.newsletter-table th, .newsletter-table td { padding:10px; border-bottom:1px solid #ddd; text-align:left; vertical-align:top; }
.newsletter-table tr:nth-child(even){ background:#fff3e6; }
.subdate { font-size:0.85em; color:#666; margin-top:2px; }
.newsletter-table a { text-decoration:none; color:#065fca; }
.newsletter-table a:hover { text-decoration:underline; }