/* ============================================================
   ROOT VARIABLES
   Define your color palette and fonts here once.
   To change the site theme, you only edit this block.
   ============================================================ */
:root {
  --color-bg: #6699cc;
  --color-bg-dark: #6675cc;
  --color-bg-panel: #6685cc;
  --color-header-bg: #f2df10f0;
  --color-header-text: #0600b3f0;
  --color-sidebar-bg: #111;
  --color-sidebar-link: #818181;
  --color-sidebar-hover: #f1f1f1;
  --color-text: #333;
  --color-white: #ffffff;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --font-main: "Candara", "Trebuchet MS", sans-serif;
  --border-radius: 10px;
}

/* WHY: CSS variables mean you change a color in one place
   and it updates everywhere. Without this, you'd have to
   search-and-replace #6699cc in 3+ files every time. */


/* ============================================================
   RESET & BASE
   Normalize browser defaults so the site looks the same
   everywhere, then apply your base styles.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* WHY: Makes width/height include padding & border.
     Without this, adding padding causes layout shifts. */
}

html {
  scroll-behavior: smooth;
  /* WHY: Native smooth scrolling — no JS needed for
     simple anchor links. Replaces your smoothScrollTo() function. */
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  /* WHY: "Candara" is a Windows-only font. If a user is on
     Linux or Android, there's no fallback. Always list system
     fonts as fallbacks. */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  /* WHY: Images wider than their container break layouts on
     mobile. max-width: 100% prevents this. display: block
     removes the default inline gap below images. */
}


/* ============================================================
   SHARED HEADER / NAV
   ============================================================ */
.site-header {
  padding: 15px;
  background: var(--color-header-bg);
  color: var(--color-header-text);
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  /* WHY: z-index ensures the header stays above other content
     when it becomes sticky/fixed. */
}

.site-header a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 16px;
}

.site-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 8px var(--color-shadow);
}

/* WHY: Using a CSS class (--sticky) toggled by JS is better
   than setting inline styles from JS. It separates concerns:
   JS handles LOGIC, CSS handles APPEARANCE. */

/* When header is sticky, push the content down so it's not
   hidden behind the fixed header */
.site-header--sticky+* {
  padding-top: 80px;
}


/* ============================================================
   SIDEBAR / NAV DRAWER
   ============================================================ */
.sidebar {
  width: 0;
  position: fixed;
  z-index: 200;
  height: 100%;
  top: 0;
  right: 0;
  background-color: var(--color-sidebar-bg);
  overflow-x: hidden;
  transition: width 0.3s ease;
  padding-top: 60px;
  /* WHY: Animating `width` is not the most performant approach.
     The professional standard is to use transform: translateX()
     which the GPU accelerates. But for a simple project,
     this is fine as long as the sidebar content is not complex. */
}

.sidebar.is-open {
  width: 250px;
  /* WHY: Same class-toggling approach as the header.
     Instead of setting style.width in JS, add/remove a class. */
}

.sidebar a {
  padding: 12px 12px 12px 32px;
  text-decoration: none;
  font-size: 1.4rem;
  color: var(--color-sidebar-link);
  display: block;
  transition: color 0.3s;
  /* WHY: Use rem units instead of px for font sizes.
     rem is relative to the root font size, so it respects
     the user's browser font-size preference (accessibility). */
}

.sidebar a:hover,
.sidebar a:focus {
  color: var(--color-sidebar-hover);
  /* WHY: Always style :focus the same as :hover (or better).
     Keyboard users navigate with Tab and can't hover. */
}

.sidebar__close-btn {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--color-sidebar-link);
  cursor: pointer;
  transition: color 0.3s;
  /* WHY: Styled as a real <button> not an <a> tag, since
     it performs an action rather than navigating. */
}

.sidebar__close-btn:hover,
.sidebar__close-btn:focus {
  color: var(--color-sidebar-hover);
}


/* ============================================================
   HAMBURGER MENU BUTTON
   ============================================================ */
.nav-toggle {
  cursor: pointer;
  background: none;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  position: absolute;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* WHY: Using gap instead of margin on children is cleaner
     and more modern. */
}

.nav-toggle__bar {
  width: 30px;
  height: 4px;
  background-color: var(--color-white);
  border-radius: 2px;
  display: block;
  transition: background-color 0.3s;
}

.nav-toggle:hover .nav-toggle__bar,
.nav-toggle:focus .nav-toggle__bar {
  background-color: #ddd;
}


/* ============================================================
   IFRAME (content embed)
   ============================================================ */
.content-frame {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px var(--color-shadow);
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
  /* WHY: Transitioning height creates a smooth expand effect
     when the iframe content is loaded. */
}

.content-frame.is-active {
  height: 80vh;
  /* WHY: Use viewport height so it fills the screen on any
     device. You can change this value. 80vh = 80% of screen. */
}


/* ============================================================
   ACCORDION (used on cvraman.html)
   ============================================================ */
.accordion-btn {
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-align: left;
  font-size: 1rem;
  font-family: var(--font-main);
  transition: background-color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* WHY: Using flex to position the +/- icon is better than
     the old `float: right` approach. Float is a layout hack
     from the 2000s. Flexbox is its modern, intentional replacement. */
}

.accordion-btn:hover,
.accordion-btn.is-active {
  background-color: var(--color-bg-dark);
}

.accordion-btn::after {
  content: '+';
  font-weight: bold;
  font-size: 1.2rem;
  color: #777;
  flex-shrink: 0;
  /* WHY: flex-shrink: 0 prevents the icon from being
     squished if the button text is long. */
}

.accordion-btn.is-active::after {
  content: '−';
  /* WHY: Using the proper minus character (−, U+2212)
     instead of a hyphen (-) for typographic correctness. */
}

.accordion-panel {
  background-color: var(--color-bg-panel);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out, padding 0.3s ease;
  padding: 0 18px;
}

.accordion-panel.is-open {
  max-height: 80vh; /* never taller than 80% of the screen */
  overflow-y: auto; /* scroll inside the panel if content is taller */
  padding: 18px;
  /* WHY: max-height animation is a CSS trick. You can't
     animate `height: auto` directly. Setting a high max-height
     lets the panel expand to its natural size with a transition.
     The panel's scrollHeight is read by JS for a more accurate value. */
}

.accordion-panel img {
  margin: 0 auto;
  /* WHY: `display: block` (set globally on img above) +
     margin: auto centers block images. */
  max-width: 100%;
  max-height: 70vh; /* image itself won't exceed 70% of screen height */
  width: auto; /* let width scale naturally from height constraint */
  object-fit: contain; /* never crop or stretch — show the whole image */
}


/* ============================================================
   TEACHERS TABLE
   ============================================================ */
.teachers-table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  /* WHY: border-collapse removes the double border between
     adjacent cells. `border: 1px solid` on both table and td
     without this creates ugly doubled borders. */
  background-color: var(--color-bg-panel);
  box-shadow: 0 4px 8px var(--color-shadow);
  border-radius: var(--border-radius);
  overflow: hidden;
  /* WHY: overflow: hidden clips the table corners to match
     the border-radius (otherwise the rows poke out the corners). */
}

.teachers-table th,
.teachers-table td {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
  text-align: left;
  /* WHY: left-align is more readable than center for text
     data in tables. Center-align is fine for numbers. */
}

.teachers-table th {
  background-color: var(--color-bg-dark);
  font-size: 1rem;
  font-weight: 600;
}

.teachers-table td {
  background-color: var(--color-bg);
}

.teachers-table tr:hover td {
  background-color: #5a80c0;
  transition: background-color 0.2s;
}

/* Letter group separator cells */
.teachers-table .letter-group {
  background-color: var(--color-bg-dark);
  font-weight: bold;
  color: var(--color-white);
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 20px;
  text-align: center;
  font-family: "Georgia", serif;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.15);
  /* WHY: Semi-transparent background gives the footer
     visual separation without a harsh hard-coded color. */
}

.site-footer__credits {
  font-size: 0.9rem;
  opacity: 0.8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* WHY: `<marquee>` is a deprecated HTML tag — it was
     removed from the HTML spec. Never use it. If you want
     scrolling text, use a CSS animation. But for a credits
     line, just display it statically or wrap it. */
}


/* ============================================================
   MOBILE RESPONSIVE — MEDIA QUERIES
   ============================================================ */

/* Tablets (768px and below) */
@media (max-width: 768px) {
  .teachers-table {
    display: block;
    overflow-x: auto;
    /* WHY: On mobile, wide tables overflow the screen.
       Wrapping in a scrollable container keeps layout intact. */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS Safari */
  }

  .accordion-panel img {
    width: 90% !important;
    /* WHY: The hardcoded width="50%" attribute on the img tags
       makes them too small on mobile. !important overrides
       the HTML attribute until you remove it from the HTML. */
  }

  .site-header {
    font-size: 16px;
  }

  .site-header img {
    width: 70px;
    height: auto;
  }
}

/* Phones (480px and below) */
@media (max-width: 480px) {
  .nav-toggle {
    right: 10px;
  }

  .sidebar.is-open {
    width: 100%;
    /* WHY: On very small screens, a 250px sidebar next to
       tiny content is useless. Full-width overlay is better. */
  }

  .content-frame.is-active {
    height: 90vh;
  }
}