/* THEME STYLES */
      :root {
        --bg: #f9f9f9;
        --text: #333;
        --accent: #f39c12;
        --muted: #2c3e50;
        --sub-head: #4aa;
        --card: #fff;
        --border-text: #ddd;
        --links: #4690e5d4;
        --sidebar-width: 290px;
        --sidebar-collapsed-width: 67px;
        --transition-fast: 0.3s;
        --toc-h3-color: #024d67bd;
        --toc-h4-color: #00986170;
        --toc-h5-color: #f39c12;
        --toc-h6-color: #e67e22;
      }

      /* Scrollbar of Webpage */
      ::-webkit-scrollbar {
        width: 12px;
      }

      ::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 6px;
      }

      ::-webkit-scrollbar-thumb:hover {
        cursor: grab;
      }

      ::-webkit-scrollbar-track {
        background: var(--border-text);
        border-radius: 0px;
      }
 
      /* ScrollBar of SideBar*/
      #sidebar::-webkit-scrollbar {
        width: 6px;
      }

      #sidebar::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 5px;
        width: 4px;
      }

      #sidebar::-webkit-scrollbar-track {
        background-color: var(--border-text);
        border-radius: 0px;
      }

      /* --------- GLOBAL RESETS & STYLES --------- */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        overflow-x: hidden;
      }

      html:focus-within {
        scroll-behavior: smooth;
      }

      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
      }

      a {
        text-decoration: none;
        color: inherit;
        font-size: clamp(0.75rem, calc(1.1dvw + 0.1rem), 1.25rem);
      }

      p {
        font-size: clamp(0.85rem, calc(1.25dvw + 0.1rem), 1.5rem);
        padding-bottom: min(6%, 0.75rem);
      }

/* ===================== Typography ===================== */

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-shadow: none;
  border-bottom: 2px solid var(--accent);
  margin-bottom: min(6%, 1rem);
  font-size: clamp(1.8rem, calc(5dvw + 0.25rem), 2.75rem);
}

h2 {
  color: var(--muted);
  margin-top: min(5%, 1rem);
  margin-left: min(6%, 1.25rem);
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, calc(2.25dvw + 0.25rem), 1.9rem);
  font-weight: 650;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
  width: fit-content;
}

h3 {
  color: var(--sub-head);
  margin-top: min(8%, 1.5rem);
  font-weight: 550;
  font-size: clamp(1.1rem, calc(1.75dvw + 0.25rem), 1.75rem);
  margin-left: min(12%, 2.25rem);
}

h4 {
  font-size: clamp(0.9rem, calc(1.5dvw + 0.25rem), 1.5rem);
  color: var(--accent);
  margin-top: min(8%, 1.5rem);
  margin-left: min(15%, 2.75rem);
  font-weight: 700;
}

/* ===================== Containers ===================== */

div {
  font-family: inherit;
  margin: 2rem 0;
}

.hero {
  background-color: var(--muted);
  color: var(--bg);
  text-align: center;
  padding: 1rem;
}

footer {
  background-color: var(--muted);
  color: var(--bg);
  text-align: center;
  padding: 1rem 2rem;
  margin-top: min(12%, 2rem);
}

footer p {
  font-size: clamp(0.75rem, calc(1dvw + 0.1rem), 1.25rem);
}

/* ===================== Links ===================== */
main a {
  font-family: Comic Sans MS;
  letter-spacing: 1px;
  color: var(--sub-head);
  font-weight: 500;
}

main a:hover {
  color: var(--links);
  transition: color 0.4s ease;
}

/* give main content breathing room next to sidebar */
main {
  margin-left: 28%;
  padding-right: 2%
}

main.max {
  width: min(100%, 95dvw);
  padding: 0 0.9rem;
  margin: auto;
}

/* ===================== Navigation ===================== */
nav {
  margin-top: min(6% ,1rem);
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav li a {
  color: var(--muted);
  font-weight: bold;
  transition: color 0.3s;
}

        /* ----- HAMBURGER ----- */
        .menu-toggle {
          position: sticky;
          display: block;
          font-size: 1.5rem;
          background: none;
          border: none;
          cursor: pointer;
          z-index: 100;
          margin: 1%;
        }

/* ===================== Sidebar / TOC ===================== */
#sidebar {
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  background: var(--bg);
  border-right: 1px solid var(--border-text);
  transform: translateY(-20px);
  overflow-x: hidden;
  overflow-y: hidden;
  transition: width var(--transition-fast) ease, transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

#sidebar.show {
  position: absolute;
  width: min(25%, 16rem);
  display: flex;    
  flex-direction: column;
  max-height: max-content;
  opacity: 1;
  transform: translateY(0);
  padding-left: min(7.5%, 1.5rem);
  padding-top: 0;
  transition: transform 0.4s ease, opacity 0.3s ease-in-out;
}

/* ===================== TOC List ===================== */
#nav-list {
  list-style: none;
  padding: 0;
}

#nav-list li {
  margin-bottom: 0.5rem;
  overflow: visible;
  position: relative;
}

#nav-list ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

#nav-list li a {
  display: block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.25rem 0;
  word-wrap: break-word;
  transition: all 0.3s;
}

#nav-list li a:hover {
  color: var(--muted);
  background-color: rgba(250, 235, 215, 0.619);
  border-radius: 7px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 7px;
}

/* ===================== H2 always expanded ===================== */
.toc-h2 > a {
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.toc-h2 > ul.child-list {
  display: block;
  padding-left: 0.5rem;
}

/* ===================== Collapsible H3-H6 on hover ===================== */
.toc-h3, .toc-h4, .toc-h5, .toc-h6 {
  position: relative;
}

.toc-h3 > a { color: var(--toc-h3-color); padding-left: 0.5rem; }
.toc-h4 > a { color: var(--toc-h4-color); padding-left: 1rem; }
.toc-h5 > a { color: var(--toc-h5-color); padding-left: 1.5rem; }
.toc-h6 > a { color: var(--toc-h6-color); padding-left: 2rem; }

.toc-h3 > ul.child-list,
.toc-h4 > ul.child-list,
.toc-h5 > ul.child-list,
.toc-h6 > ul.child-list {
  display: none;
  padding-left: 0.5rem;
}

.toc-h3:hover > ul.child-list,
.toc-h4:hover > ul.child-list,
.toc-h5:hover > ul.child-list,
.toc-h6:hover > ul.child-list {
  display: block;
}

/* ===================== Info Blocks ===================== */
.info-block {
  background-color: var(--card);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.info-block:hover {
  transform: translateY(-5px);
}

.info-block h3{
  color: var(--muted);
  margin-bottom: 0.8rem;
  font-size: larger;
}

.info-block h4{
  color: var(--muted);
  margin-bottom: 0.8rem;
  font-size: large;
}

.info-block h5, .info-block h6{
  font-size: medium;
}

.info-block p {
  color: #555;
  margin-bottom: 1rem;
  font-family: cursive;
}

.info-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.3rem;
  border-radius: 12px;
}

/* ===================== Transmission Media Section ===================== */
#transmission-media .info-block {
  flex-direction: column;
}

#transmission-media .info-block img {
  margin-bottom: 0.5rem;
}

/* ===================== Footer ===================== */
footer {
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

/* ===================== Table Styling ===================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  background-color: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

table th,
table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
}

h5 { color: var(--toc-h5-color); }

table th {
  background-color: var(--sub-head);
  color: var(--card);
  font-weight: 670;
  font-family: cursive;
}

table tr:last-child td { border-bottom: none; }

table tbody tr:hover {
  background-color: rgba(243, 156, 18, 0.1);
  border-radius: 7px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: background-color 0.3s, box-shadow 0.3s;
}


/* ===================== Responsive video embeds ===================== */
/* Make iframe embeds (YouTube) responsive and visually polished */
.video-wrap {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  display: block;
}

/* Target common iframe locations (inside main, inside articles/info-blocks) */
main iframe,
.info-block iframe,
.video-wrap iframe,
article iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* modern browsers */
  max-width: 100%;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(13, 38, 63, 0.12);
  display: block;
}

/* Fallback for older browsers: ensure a minimum height if aspect-ratio isn't supported */
main iframe:not([style]) {
  min-height: 220px;
}

/* Optional layout helper for side-by-side videos on wide screens */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* ===================== Footer ===================== */
footer {
  background-color: var(--muted);
  color: var(--card);
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  #transmission-media .info-block {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  #transmission-media .info-block img {
    max-width: 200px;
    margin-bottom: 0;
  }
}

/* -------- SETTING: REDUCED-MOTION -------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width:550px) {
  #sidebar.show {
    width: min(32% ,16rem);
  }
}