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

      /* 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.5rem, calc(0.9dvw + 0.1rem), 1rem);
      }

      p {
        font-size: clamp(0.65rem, calc(1dvw + 0.1rem), 1.25rem);
        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.5rem, calc(5dvw + 0.1rem), 2.5rem);
}

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(0.9rem, calc(1.5dvw + 0.2rem), 1.5rem);
  margin-left: min(12%, 2.25rem);
}

h4 {
  font-size: clamp(0.75rem, calc(1.25dvw + 0.25rem), 1.25rem);
  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.5rem, calc(0.8dvw + 0.1rem), 1rem);
}

/* ===================== Table Styling ===================== */

      .wrap {
        overflow-x: auto;

        display: flex;
        justify-content: center;
      }
      /* Make sure no scrollbar on overflow */
      .wrap::-webkit-scrollbar,
      .wrap table::-webkit-scrollbar {
        display: none;
      }

      .wrap table {
        width: min(100%, 1000px);
        border-collapse: collapse;
        background: var(--card);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--muted);
      }

      .wrap table th,
      .wrap table td {
        padding: 1rem 1.2rem;
      }

      .wrap table th {
        text-align: center;
      }

      .wrap table td {
        color: var(--muted);
        font-weight: 500;
        text-align: justify;
        text-wrap-mode: wrap;
        text-wrap-style: pretty;
      }

      .wrap table thead {
        background: linear-gradient(100deg, #f3c612e1, #ffab23ce);
        color: var(--bg);
      }

      .wrap table tbody tr {
        border-bottom: 1px solid var(--text);
      }

      .wrap table td:first-child {
        font-weight: 700;
        color: var(--accent);
      }

/* ===================== 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;
}

/* ===================== Code Blocks ===================== */
pre {
  background: linear-gradient(180deg, white, whitesmoke);
  border-left: 5px solid var(--accent);
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  margin: min(10%, 1.75rem);
  padding: 1.5rem;
  font-size: clamp(0.5rem, calc(0.9dvw + 0.1rem), 1rem);
}

pre::-webkit-scrollbar {
  display: none;
}

code {
  font-size: clamp(0.5rem, calc(0.9dvw + 0.1rem), 1rem);
}

/* ===================== Section ===================== */
.section {
  padding: 0.5rem;
  background-color: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ===================== Lists ===================== */
ul {
  margin-bottom: 1.75rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}


/* ===================== 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;
}

@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);
  }
}