/* =========================================================
   HEYPROFETEACH - SHARED LEFT NAVIGATION
   Edit the six --button-color values to change button colors.
   This file is reusable on all pages with the same menu HTML.
   ========================================================= */
.section-menu { border-radius:16px; top:18px; }
.section-menu-title { color:var(--ink,#173451); font-size:.83rem; }

/* Common appearance for all navigation buttons */
.section-menu .section-btn {
  display:flex; align-items:center; justify-content:flex-start;
  gap:13px; padding:14px; min-height:62px;
  border:0; border-radius:14px; text-align:left;
  font-weight:750; font-size:.88rem;
  background:var(--button-color, #0C4A82); color:var(--button-text,#fff);
  box-shadow:0 6px 14px #00000016;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
/* Keep original color after visit, on focus and on click */
.section-menu .section-btn:link,
.section-menu .section-btn:visited,
.section-menu .section-btn:hover,
.section-menu .section-btn:focus,
.section-menu .section-btn:active {
  background:var(--button-color, #0C4A82); color:var(--button-text,#fff);
  border-color:transparent;
}
.section-menu .section-btn:hover {
  transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 9px 18px #00000024;
}
.section-menu .section-btn:active { transform:translateY(0); filter:brightness(.94); }
.section-menu .section-btn:focus-visible { outline:3px solid #173451; outline-offset:3px; }
.section-menu .section-btn i {
  display:grid; place-items:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%;
  background:#ffffff30; font-size:1.2rem; color:inherit;
}
.section-menu .section-btn span { color:inherit; }

/* Vivid palette - each button has its own independent class */
.section-menu .section-btn-primary-school { --button-color:#FFD600; --button-text:#172B4D; }
.section-menu .section-btn-secondary { --button-color:#0066FF; --button-text:#FFFFFF; }
.section-menu .section-btn-technical { --button-color:#00B83F; --button-text:#FFFFFF; }
.section-menu .section-btn-grades { --button-color:#7928CA; --button-text:#FFFFFF; }
.section-menu .section-btn-voice-lab { --button-color:#FF7900; --button-text:#FFFFFF; }
.section-menu .section-btn-critical-reading { --button-color:#F50087; --button-text:#FFFFFF; }

@media (max-width:767px) {
  .section-menu .section-btn { padding:13px 15px; border-radius:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .section-menu .section-btn { transition:none; }
}

/* Explicit colors: robust against old cached CSS variables and Bootstrap */
.section-menu a.btn.section-btn-primary-school,
.section-menu a.btn.section-btn-primary-school:link,
.section-menu a.btn.section-btn-primary-school:visited,
.section-menu a.btn.section-btn-primary-school:hover,
.section-menu a.btn.section-btn-primary-school:focus,
.section-menu a.btn.section-btn-primary-school:active {
  --bs-btn-bg:#FFD600; --bs-btn-color:#172B4D;
  --bs-btn-hover-bg:#FFD600; --bs-btn-hover-color:#172B4D;
  --bs-btn-active-bg:#FFD600; --bs-btn-active-color:#172B4D;
  background:#FFD600 !important; color:#172B4D !important;
}
.section-menu a.btn.section-btn-critical-reading,
.section-menu a.btn.section-btn-critical-reading:link,
.section-menu a.btn.section-btn-critical-reading:visited,
.section-menu a.btn.section-btn-critical-reading:hover,
.section-menu a.btn.section-btn-critical-reading:focus,
.section-menu a.btn.section-btn-critical-reading:active {
  --bs-btn-bg:#F50087; --bs-btn-color:#FFFFFF;
  --bs-btn-hover-bg:#F50087; --bs-btn-hover-color:#FFFFFF;
  --bs-btn-active-bg:#F50087; --bs-btn-active-color:#FFFFFF;
  background:#F50087 !important; color:#FFFFFF !important;
}
.section-menu a.btn.section-btn-primary-school i,
.section-menu a.btn.section-btn-primary-school span { color:#172B4D !important; }
.section-menu a.btn.section-btn-critical-reading i,
.section-menu a.btn.section-btn-critical-reading span { color:#FFFFFF !important; }