/* =============================================================================
   FRONT PAGE — redesign 2a (frame 2a)
   Sections: sec-head, urgent ribbon, hero + docked panel, quick strip,
   news&events grid shell, school life, about/history band, edit pencil.
   Legacy view-card CSS (fp-news-card*/fp-event-card*) kept below until Phase 6.
   ============================================================================= */

/* ── SECTION HEAD — h2 left + link right, same baseline ─────────────────────── */
.fp-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.fp-sec-head h2 {
  font-size: 29px;
  font-weight: 800;
  color: var(--thg-green-forest);
  letter-spacing: -0.01em;
  margin: 0;
}

.fp-sec-head__link {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--thg-green-forest);
  text-decoration: none;
  white-space: nowrap;
}

.fp-sec-head__link:hover {
  color: var(--thg-orange);
}

.fp-sec-head .fp-edit-link {
  position: static;
  width: 32px;
  height: 32px;
  background: rgba(46, 106, 53, 0.08);
  color: var(--thg-green-forest) !important;
}

.fp-sec-head .fp-edit-link:hover {
  background: var(--thg-orange);
  color: #fff !important;
}

/* ── EDIT PENCIL (admin) ────────────────────────────────────────────────────── */
.fp-edit-link {
  position: absolute;
  top: 0;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}

.fp-edit-link:hover {
  background: white;
  color: #c24400 !important;
}

/* ── URGENT RIBBON — slim single line, solid orange, no animation ───────────── */
.fp-urgent {
  background: var(--thg-cat-urgent);
  color: #fff;
  padding: 9px 0;
}

.fp-urgent .container {
  position: relative;
}

.fp-urgent__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fp-urgent__row + .fp-urgent__row {
  margin-top: 6px;
}

.fp-urgent__icon {
  flex-shrink: 0;
  font-size: 15px;
}

.fp-urgent__date {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.fp-urgent__title {
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-urgent__link {
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}

.fp-urgent__link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── HERO — photo band with overlay text ────────────────────────────────────── */
.fp-hero {
  position: relative;
}

.fp-hero__media {
  position: relative;
  height: 520px;
  overflow: hidden;
}

.fp-hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(20, 34, 22, 0.82), rgba(20, 34, 22, 0.45) 55%, rgba(20, 34, 22, 0.15));
}

.fp-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.fp-hero__text {
  max-width: 560px;
}

.fp-hero__kicker {
  color: var(--thg-green-mint);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.fp-hero__text h1 {
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.fp-hero__tagline {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.fp-hero__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fp-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--thg-orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}

.fp-btn-primary:hover {
  background: var(--thg-orange-hover);
  color: #fff;
}

.fp-btn-glass {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}

.fp-btn-glass:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* Teacher view — media only, reduced height */
.fp-hero--teacher .fp-hero__media {
  height: 240px;
}

/* ── HERO-DOCKED ANNOUNCEMENTS PANEL ────────────────────────────────────────── */
.fp-hero__panel {
  position: absolute;
  right: 40px;
  bottom: 48px;
  width: 380px;
  max-height: 420px;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(20, 34, 22, 0.45);
  z-index: 5;
}

.fp-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--thg-orange);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.fp-panel__count {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 12px;
  padding: 1px 8px;
}

.fp-panel__edit {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.fp-panel__edit:hover {
  color: #fff;
}

.fp-panel__item + .fp-panel__item {
  border-top: 1px solid var(--thg-border);
}

.fp-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}

.fp-panel__row:hover {
  background: var(--thg-leaf-tint);
}

.fp-panel__date {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  padding: 4px 9px;
  color: #fff;
  background: var(--thg-cat-info);
  white-space: nowrap;
}

.fp-panel__item--notice .fp-panel__date { background: var(--thg-cat-notice); }
.fp-panel__item--event .fp-panel__date { background: var(--thg-cat-event); }
.fp-panel__item--urgent .fp-panel__date { background: var(--thg-cat-urgent); }

.fp-panel__title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--thg-ink);
}

.fp-panel__chev {
  flex-shrink: 0;
  color: var(--thg-muted);
  font-size: 13px;
  transition: transform 0.25s ease;
}

.fp-panel__row[aria-expanded="true"] .fp-panel__chev {
  transform: rotate(180deg);
}

.fp-panel__body-inner {
  padding: 0 14px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--thg-ink);
}

.fp-panel__body-inner p {
  margin-bottom: 8px;
}

.fp-panel__link {
  color: var(--thg-orange-hover); /* #c9630a — small text on light bg, >=4.5:1 */
  font-weight: 700;
  text-decoration: none;
}

.fp-panel__link:hover {
  text-decoration: underline;
}

/* ── QUICK-ACCESS STRIP — deep green, 4 shortcuts ───────────────────────────── */
.fp-quick {
  background: var(--thg-green-deep);
}

.fp-quick__row {
  display: flex;
}

.fp-quick__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
  min-width: 0;
}

.fp-quick__item:last-child {
  border-right: 0;
}

.fp-quick__item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.fp-quick__item > i {
  font-size: 20px;
  color: var(--thg-green-mint);
  flex-shrink: 0;
}

.fp-quick__label {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
}

.fp-quick__sub {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* ── NEWS & EVENTS GRID SHELL (cards restyled in Phase 6) ───────────────────── */
.fp-ne {
  padding: 72px 0;
  background: var(--thg-body-bg);
}

.fp-ne-grid > .views-element-container {
  display: contents;
}

/* ── SCHOOL LIFE — intro + photo tiles ──────────────────────────────────────── */
.fp-life {
  padding: 72px 0;
  background: #fff;
}

.fp-life__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: center;
}

.fp-life__intro h2 {
  font-size: 29px;
  font-weight: 800;
  color: var(--thg-green-forest);
  margin-bottom: 12px;
}

.fp-life__intro p {
  color: var(--thg-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.fp-life__btn {
  display: inline-flex;
  align-items: center;
  background: var(--thg-green-forest);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}

.fp-life__btn:hover {
  background: var(--thg-green-deep);
  color: #fff;
}

.fp-life__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fp-life__tile {
  position: relative;
  display: block;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
}

.fp-life__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fp-life__tile:hover img {
  transform: scale(1.04);
}

.fp-life__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(to top, rgba(15, 25, 17, 0.85), rgba(15, 25, 17, 0));
}

/* ── ABOUT / HISTORY — leaf-tint band, content verbatim ─────────────────────── */
.fp-about {
  padding: 80px 0;
  background: var(--thg-leaf-tint);
  overflow-x: clip; /* .row.g-5 gutters exceed container padding on small screens */
}

.fp-about-image {
  position: relative;
}

.fp-about-image > img {
  width: 100%;
  border-radius: 14px;
}

.fp-mission-vision {
  background: #fff;
  border: 1px solid #eae8e0;
  border-radius: 12px;
  padding: 22px;
  margin: -60px 20px 0;
  position: relative;
}

.fp-mission h3,
.fp-vision h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thg-orange-hover); /* small text on light bg */
  margin-bottom: 6px;
}

.fp-mission {
  border-bottom: 1px solid var(--thg-border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.fp-mission-vision p {
  font-size: 14px;
  color: var(--thg-ink);
  line-height: 1.55;
  margin: 0;
}

.fp-about-content h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--thg-orange-hover); /* small text on light bg */
  margin-bottom: 8px;
}

.fp-about-content h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--thg-green-forest);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.fp-about-content > p {
  color: var(--thg-ink);
  line-height: 1.65;
}

.fp-timeline {
  margin-top: 24px;
  border-left: 2px solid rgba(46, 106, 53, 0.25);
  padding-left: 18px;
}

.fp-timeline-item {
  position: relative;
  padding-bottom: 16px;
}

.fp-timeline-item:last-child {
  padding-bottom: 0;
}

.fp-timeline-dot {
  position: absolute;
  left: -24px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--thg-green-forest);
  border-radius: 50%;
}

.fp-timeline-content h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--thg-green-forest);
  margin: 0 0 2px;
}

.fp-timeline-content p {
  font-size: 13.5px;
  color: var(--thg-muted);
  margin: 0;
}

.fp-core-values {
  margin-top: 56px;
}

.fp-core-values > h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--thg-green-forest);
}

.fp-value-card {
  background: #fff;
  border: 1px solid #eae8e0;
  border-radius: 13px;
  padding: 26px 20px;
  height: 100%;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(28, 46, 30, 0.10);
}

.fp-value-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--thg-leaf-tint);
  color: var(--thg-green-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.fp-value-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--thg-green-forest);
  margin-bottom: 8px;
}

.fp-value-card p {
  font-size: 13.5px;
  color: var(--thg-muted);
  margin: 0;
}

/* ── RESPONSIVE (<lg) ───────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .fp-hero__media {
    height: 320px;
  }

  .fp-hero__text h1 {
    font-size: 30px;
  }

  .fp-hero__tagline {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .fp-hero__panel {
    position: static;
    width: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--thg-border);
  }

  .fp-quick .container {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .fp-quick__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .fp-quick__item {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 10px;
    padding: 14px;
  }

  .fp-life__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fp-life__tiles {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .fp-life__tile {
    flex: 0 0 155px;
    height: 190px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .fp-urgent__title {
    white-space: normal;
    overflow: visible;
  }

  .fp-edit-link {
    top: -4px;
    right: 10px;
  }

  .fp-sec-head h2 {
    font-size: 24px;
  }
}

/* ── DARK MODE — about band (rest re-derived in Phase 8) ────────────────────── */
[data-bs-theme="dark"] .fp-about { background: #111814; }
[data-bs-theme="dark"] .fp-about-content h2 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-about-content > p { color: #9ab09b; }
[data-bs-theme="dark"] .fp-timeline-content h4 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-timeline-content p { color: #8a9f8b; }

[data-bs-theme="dark"] .fp-mission-vision {
  background: #1c2b1e;
  border-color: #243024;
}
[data-bs-theme="dark"] .fp-mission-vision h3 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-mission-vision p { color: #9ab09b; }
[data-bs-theme="dark"] .fp-mission { border-bottom-color: #243024; }

[data-bs-theme="dark"] .fp-value-card {
  background: #1c2b1e;
  border-color: #243024;
}
[data-bs-theme="dark"] .fp-value-card:hover {
  background: #243024;
}
[data-bs-theme="dark"] .fp-value-card h4 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-value-card p { color: #8a9f8b; }
[data-bs-theme="dark"] .fp-core-values > h3 { color: #a8d5aa; }

/* ── NEWS & EVENTS — centerpiece grid cards + UPCOMING tile ─────────────────── */
.fp-ne-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fp-ne-cell--featured {
  grid-row: span 2;
}

.fp-ne-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--thg-border);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-ne-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(28, 46, 30, 0.12);
}

.fp-ne-card__media {
  flex-shrink: 0;
  overflow: hidden;
}

.fp-ne-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-ne-cell--featured .fp-ne-card__media { height: 260px; }
.fp-ne-cell--compact .fp-ne-card__media { height: 130px; }

.fp-ne-card__body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.fp-ne-card__tag {
  align-self: flex-start;
  background: var(--thg-leaf-tint);
  color: var(--thg-green-forest);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
}

.fp-ne-card__title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.fp-ne-cell--featured .fp-ne-card__title {
  font-size: 20px;
}

.fp-ne-card__title a {
  color: var(--thg-ink);
  text-decoration: none;
  background-image: none !important;
  padding-bottom: 0 !important;
}

.fp-ne-card:hover .fp-ne-card__title a {
  color: var(--thg-green-forest);
}

.fp-ne-card__excerpt {
  font-size: 13.5px;
  color: var(--thg-muted);
  line-height: 1.55;
  margin: 0;
}

.fp-ne-cell--compact .fp-ne-card__excerpt {
  display: none;
}

.fp-ne-card__date {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--thg-muted);
}

/* ── UPCOMING tile (deep green) ─────────────────────────────────────────────── */
.fp-ne-upcoming {
  background: var(--thg-green-deep);
  border-radius: 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fp-ne-upcoming__head {
  padding: 16px 18px 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--thg-green-mint);
}

.fp-ne-upcoming__list {
  flex: 1;
}

.fp-ne-upcoming__empty {
  flex: 1;
  padding: 12px 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}

.fp-ne-upcoming__row + .fp-ne-upcoming__row {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.fp-ne-upcoming__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
}

.fp-ne-upcoming__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.fp-ne-upcoming__date {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.fp-ne-upcoming__row--next .fp-ne-upcoming__date {
  background: var(--thg-orange);
}

.fp-ne-upcoming__day {
  font-size: 16px;
  font-weight: 800;
}

.fp-ne-upcoming__month {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.85;
}

.fp-ne-upcoming__title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.fp-ne-upcoming__chev {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.fp-ne-upcoming__all {
  display: block;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--thg-green-mint);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
}

.fp-ne-upcoming__all:hover {
  color: #fff;
}

/* ── NE grid responsive (<lg): single column, compact cards thumb-left ──────── */
@media (max-width: 991.98px) {
  .fp-ne-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fp-ne-cell--featured {
    grid-row: auto;
  }

  .fp-ne-cell--compact .fp-ne-card {
    flex-direction: row;
    align-items: center;
  }

  .fp-ne-cell--compact .fp-ne-card__media {
    width: 76px;
    height: 58px;
    border-radius: 8px;
    margin: 12px 0 12px 12px;
  }

  .fp-ne-cell--compact .fp-ne-card__body {
    padding: 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHER COMPACT FRONT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Teacher bar — greeting + logout ───────────────────────────────────── */
.fp-teacher-bar {
  background: var(--thg-green-deep, #1a3a1c);
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 0;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--thg-orange, #e8720c);
}

.fp-teacher-greeting {
  font-weight: 600;
  display: flex;
  align-items: center;
}

.fp-teacher-bar-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.fp-teacher-bar-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.fp-teacher-bar-btn--edit {
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.fp-teacher-bar-btn--edit:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.fp-teacher-bar-btn--logout {
  background: var(--thg-orange, #e8720c);
  color: white;
}
.fp-teacher-bar-btn--logout:hover {
  filter: brightness(1.1);
  color: white;
}

/* ── Hero reduced for teacher view ─────────────────────────────────────── */
.fp-hero--teacher {
  padding-top: 0 !important;
  padding-bottom: 40px;
}

/* ── Quick links section ───────────────────────────────────────────────── */
.fp-teacher-links {
  padding: 50px 0;
  background: var(--bs-body-bg, #f8f7f4);
}

.fp-quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: white;
  border-radius: 12px;
  text-decoration: none;
  color: var(--thg-green-forest, #2d5a30);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 2px solid transparent;
  height: 100%;
  text-align: center;
}
.fp-quick-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--thg-orange, #e8720c);
  color: var(--thg-green-forest, #2d5a30);
  text-decoration: none;
}

.fp-quick-link-favicon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.fp-quick-link-label {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.fp-teacher-edit-links-btn {
  display: inline-flex;
  align-items: center;
  color: var(--thg-green-forest, #2d5a30);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid var(--thg-green-forest, #2d5a30);
  border-radius: 6px;
  transition: background 0.25s ease, color 0.25s ease;
}
.fp-teacher-edit-links-btn:hover {
  background: var(--thg-green-forest, #2d5a30);
  color: white;
  text-decoration: none;
}

/* ── Mobile — teacher bar ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fp-teacher-bar .container {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .fp-teacher-bar-actions {
    justify-content: center;
  }
}

/* ── Dark mode — teacher sections ──────────────────────────────────────── */
[data-bs-theme="dark"] .fp-teacher-bar {
  background: #0d1a0f;
}

[data-bs-theme="dark"] .fp-teacher-links {
  background: #111814;
}

[data-bs-theme="dark"] .fp-quick-link-card {
  background: #1c2b1e;
  color: #a8d5aa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"] .fp-quick-link-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--thg-orange, #e8720c);
  color: #a8d5aa;
}

[data-bs-theme="dark"] .fp-teacher-edit-links-btn {
  color: #a8d5aa;
  border-color: #a8d5aa;
}
[data-bs-theme="dark"] .fp-teacher-edit-links-btn:hover {
  background: var(--thg-green-forest, #2d5a30);
  color: white;
  border-color: var(--thg-green-forest, #2d5a30);
}

/* =============================================================================
   REDESIGN 2A — DARK MODE (Phase 8)
   Base dark palette: body #111814, surfaces #1c2b1e / #16211a, headings #a8d5aa,
   muted #8a9f8b, borders #243024. Orange accents preserved.
   ============================================================================= */

/* Section heads */
[data-bs-theme="dark"] .fp-sec-head h2 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-sec-head__link { color: #8bc98e; }
[data-bs-theme="dark"] .fp-sec-head__link:hover { color: #e8720c; }
[data-bs-theme="dark"] .fp-sec-head .fp-edit-link {
  background: rgba(168, 213, 170, 0.12);
  color: #a8d5aa !important;
}

/* Urgent ribbon — stays solid orange, white text (no change needed) */

/* Hero-docked announcements panel → dark card */
[data-bs-theme="dark"] .fp-hero__panel {
  background: #1c2b1e;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .fp-panel__item + .fp-panel__item { border-top-color: #243024; }
[data-bs-theme="dark"] .fp-panel__row:hover { background: #243024; }
[data-bs-theme="dark"] .fp-panel__title { color: #d4e6d5; }
[data-bs-theme="dark"] .fp-panel__chev { color: #8a9f8b; }
[data-bs-theme="dark"] .fp-panel__body-inner { color: #9ab09b; }
/* Category chips — lightened for dark surfaces */
[data-bs-theme="dark"] .fp-panel__date { background: #7fb35c; }
[data-bs-theme="dark"] .fp-panel__item--notice .fp-panel__date { background: #d99a3f; color: #1c2b1e; }
[data-bs-theme="dark"] .fp-panel__item--event .fp-panel__date { background: #5b9bc4; }
[data-bs-theme="dark"] .fp-panel__item--urgent .fp-panel__date { background: #e8720c; }

/* Quick strip — deep green band works on dark; strengthen separators */
[data-bs-theme="dark"] .fp-quick { background: #16211a; }
[data-bs-theme="dark"] .fp-quick__item { border-right-color: rgba(255, 255, 255, 0.08); }
@media (max-width: 991.98px) {
  [data-bs-theme="dark"] .fp-quick__item { background: rgba(255, 255, 255, 0.06); }
}

/* News & Events grid */
[data-bs-theme="dark"] .fp-ne { background: #111814; }
[data-bs-theme="dark"] .fp-ne-card {
  background: #1c2b1e;
  border-color: #243024;
}
[data-bs-theme="dark"] .fp-ne-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
[data-bs-theme="dark"] .fp-ne-card__tag { background: rgba(168, 213, 170, 0.14); color: #a8d5aa; }
[data-bs-theme="dark"] .fp-ne-card__title a { color: #d4e6d5; }
[data-bs-theme="dark"] .fp-ne-card:hover .fp-ne-card__title a { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-ne-card__excerpt,
[data-bs-theme="dark"] .fp-ne-card__date { color: #8a9f8b; }
[data-bs-theme="dark"] .fp-ne-upcoming { background: #16211a; border: 1px solid #243024; }

/* School Life */
[data-bs-theme="dark"] .fp-life { background: #141d16; }
[data-bs-theme="dark"] .fp-life__intro h2 { color: #a8d5aa; }
[data-bs-theme="dark"] .fp-life__intro p { color: #9ab09b; }
[data-bs-theme="dark"] .fp-life__btn { background: #2e6a35; }
[data-bs-theme="dark"] .fp-life__btn:hover { background: #3a7d42; }

/* About/History band heading kickers */
[data-bs-theme="dark"] .fp-about-content h3 { color: #e8720c; }
[data-bs-theme="dark"] .fp-mission h3,
[data-bs-theme="dark"] .fp-vision h3 { color: #e8720c; }
[data-bs-theme="dark"] .fp-panel__link { color: #e8720c; }
[data-bs-theme="dark"] .fp-timeline { border-left-color: rgba(168, 213, 170, 0.25); }
[data-bs-theme="dark"] .fp-timeline-dot { background: #a8d5aa; }
[data-bs-theme="dark"] .fp-value-icon { background: rgba(168, 213, 170, 0.12); color: #a8d5aa; }

/* Teacher hero (media only) needs no change; teacher bar rules pre-exist */