table {
    margin-left:auto;
    margin-right:auto;
}
 /* =============================
      BASE COLOR SCHEMES
  ============================= */
:root {
  /* Base Colors */
  --color-text: #333;
  --color-bg: #fff;
  --color-border: #333;

  /* Red Theme */
  --red-header: #be2934;
  --red-even: #f8c1c7;
  --red-odd: #fbe5e7;

  /* Green Theme */
  --green-header: #2e7d32;
  --green-even: #b9e4bb;
  --green-odd: #e2f2e3;

  /* Blue Theme */
  --blue-header: #1565c0;
  --blue-even: #b3d5f7;
  --blue-odd: #e1f0fd;

  /* Orange Theme */
  --orange-header: #ef6c00;
  --orange-even: #ffd6a6;
  --orange-odd: #ffecdb;

  /* Yellow Theme */
  --yellow-header: #fdd835;
  --yellow-even: #fff59d;
  --yellow-odd: #fffde7;

  /* Black Theme */
  --black-header: #212121;
  --black-even: #d8dee3;
  --black-odd: #f0f3f5;

  /* Purple Theme */
  --purple-header: #6a1b9a;
  --purple-even: #d9b3e6;
  --purple-odd: #f3e5f5;

  /* Teal Theme */
  --teal-header: #00897b;
  --teal-even: #a7e4dc;
  --teal-odd: #dff5f2;

  /* Pink Theme */
  --pink-header: #d81b60;
  --pink-even: #f9bbd0;
  --pink-odd: #fde9f1;

  /* Button Colors */
  --pdf-border: #d9534f;
  --pdf-hover: #fbe9e9;
  --docx-border: #337ab7;
  --docx-hover: #e8f1fb;

  /* Footer & Misc */
  --footer-color: #91a4f4;
  --learning-border: #000;
}

 
  /* =============================
      BASE STYLES
  ============================= */
  body {
    font-family: sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    box-sizing: border-box;
  }
  /* =============================
      BASE TABLE STYLE
  ============================= */
.table {
    max-width: 800px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1em auto;
    border: 3px solid var(--color-text);
    background-color: var(--color-bg);
  }
 
.table th,
.table td {
    padding: 10px;
    text-align: left;
    font-weight: 300;
  }
.table tr:nth-child(even) {
    background-color: #e1e7eb;
  }
 
  /* =============================
     SHARED HEADER STYLE
  ============================= */
.table .header > th,
.table .header > td {
    font-weight: 600;
}
 
  /* =============================
     REFINED COLOR THEMES
  ============================= */
 
  /* === RED === */
.table.red .header {
    background-color: var(--red-header) !important;
    color: white;
  }
  .table.red tr:nth-child(even) {
    background-color: var(--red-even);
  }
  .table.red tr:nth-child(odd) {
    background-color: var(--red-odd);
  }
 
  /* === GREEN === */
  .table.green .header {
    background-color: var(--green-header) !important;
    color: white;
  }
  .table.green tr:nth-child(even) {
    background-color: var(--green-even);
  }
  .table.green tr:nth-child(odd) {
    background-color: var(--green-odd);
  }
 
  /* === BLUE === */
  .table.blue .header {
    background-color: var(--blue-header) !important;
    color: white;
  }
  .table.blue tr:nth-child(even) {
    background-color: var(--blue-even);
  }
  .table.blue tr:nth-child(odd) {
    background-color: var(--blue-odd);
  }
 
  /* === ORANGE === */
  .table.orange .header {
    background-color: var(--orange-header) !important;
    color: white;
  }
  .table.orange tr:nth-child(even) {
    background-color: var(--orange-even);
  }
  .table.orange tr:nth-child(odd) {
    background-color: var(--orange-odd);
  }
 
  /* === YELLOW === */
  .table.yellow .header {
    background-color: var(--yellow-header) !important;
    color: black;
  }
  .table.yellow tr:nth-child(even) {
    background-color: var(--yellow-even);
  }
  .table.yellow tr:nth-child(odd) {
    background-color: var(--yellow-odd);
  }
 
  /* === BLACK === */
  .table.black .header {
    background-color: var(--black-header) !important;
    color: white;
  }
  .table.black tr:nth-child(even) {
    background-color: var(--black-even);
  }
  .table.black tr:nth-child(odd) {
    background-color: var(--black-odd);
  }
 
  /* === PURPLE === */
  .table.purple .header {
    background-color: var(--purple-header) !important;
    color: white;
  }
  .table.purple tr:nth-child(even) {
    background-color: var(--purple-even);
  }
  .table.purple tr:nth-child(odd) {
    background-color: var(--purple-odd);
  }
 
  /* === TEAL === */
  .table.teal .header {
    background-color: var(--teal-header) !important;
    color: white;
  }
  .table.teal tr:nth-child(even) {
    background-color: var(--teal-even);
  }
  .table.teal tr:nth-child(odd) {
    background-color: var(--teal-odd);
  }
 
  /* === PINK === */
  .table.pink .header {
    background-color: var(--pink-header) !important;
    color: white;
  }
  .table.pink tr:nth-child(even) {
    background-color: var(--pink-even);
  }
  .table.pink tr:nth-child(odd) {
    background-color: var(--pink-odd);
  }
 
 
 
  /* =============================
    DOWNLOAD LINKS
  ============================= */
  .pdf,
  .docx {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    margin: 10px;
    padding: 12px 20px 12px 44px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    transition: background 0.3s ease, transform 0.1s ease;
    background: var(--color-bg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
    color: var(--color-text);
    border: 2px solid;
  }
 
  .pdf {
    border-color: var(--pdf-border);
  }
 
  .pdf:hover {
    background-color: var(--pdf-hover);
    transform: scale(1.02);
  }
 
  .docx {
    border-color: var(--docx-border);
  }
 
  .docx:hover {
    background-color: var(--docx-hover);
    transform: scale(1.02);
  }
 
 
  /* =============================
    ICONS
  ============================= */
  .pdf::before,
  .docx::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translateY(-50%);
  }
 
  .pdf::before {
    background-image: url("https://wcln.ca/_LOR/WCLN-Lesson_Theme/pdf.svg");
  }
 
  .docx::before {
    background-image: url("https://wcln.ca/_LOR/WCLN-Lesson_Theme/doc.svg");
  }
 
 
  /* =============================
     PAGE ACKNOWLEDGMENTS
  ============================= */
  .page-acknowledgment {
    font-style: italic;
    font-size: 11px;
    color: var(--footer-color);
    margin-top: 30px;
    border-top: 2px dashed #ccc;
    padding-top: 2px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
 
  /* =============================
     ACKNOWLEDGMENTS
  ============================= */
  .acknowledgement {
    font-style: italic;
    font-size: 11px;
    color: var(--footer-color);
    margin-top: -6px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
 
 
  /* =============================
   FUN FACTS - LEARNING BOXES
  ============================= */
  .learning-box {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    border: 3px solid var(--learning-border);
    border-collapse: collapse;
    background-color: var(--color-bg);
    table-layout: fixed;
    text-align: center;
  }
 
  .learning-box tr:first-child td {
    padding: 16px;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--learning-border);
    color: var(--color-bg);
  }
 
  .learning-box tr:last-child td {
    padding: 18px 20px;
    border-top: 2px solid var(--learning-border);
    line-height: 1.7;
    text-align: center;
  }
 
  /* === RED === */
  .learning-box.red tr:first-child td {
    background-color: var(--red-header);
  }
  .learning-box.red tr:last-child td {
    background-color: var(--red-odd);
    color: #5a1b1f;
  }
 
  /* === GREEN === */
  .learning-box.green tr:first-child td {
    background-color: var(--green-header);
  }
  .learning-box.green tr:last-child td {
    background-color: var(--green-odd);
    color: #1d4b20;
  }
 
  /* === BLUE === */
  .learning-box.blue tr:first-child td {
    background-color: var(--blue-header);
  }
  .learning-box.blue tr:last-child td {
    background-color: var(--blue-odd);
    color: #0e3c78;
  }
 
  /* === ORANGE === */
  .learning-box.orange tr:first-child td {
    background-color: var(--orange-header);
  }
  .learning-box.orange tr:last-child td {
    background-color: var(--orange-odd);
    color: #783a00;
  }
 
  /* === YELLOW === */
  .learning-box.yellow tr:first-child td {
    background-color: var(--yellow-header);
    color: black;
  }
  .learning-box.yellow tr:last-child td {
    background-color: var(--yellow-odd);
    color: #665500;
  }
 
  /* === BLACK === */
  .learning-box.black tr:first-child td {
    background-color: var(--black-header);  
  }
  .learning-box.black tr:last-child td {
    background-color: var(--black-odd);
    color: #1c1c1c;
  }
 
  /* === PURPLE === */
  .learning-box.purple tr:first-child td {
    background-color: var(--purple-header);
  }
  .learning-box.purple tr:last-child td {
    background-color: var(--purple-odd);
    color: #3c0d58;
  }
 
  /* === TEAL === */
  .learning-box.teal tr:first-child td {
    background-color: var(--teal-header);
  }
  .learning-box.teal tr:last-child td {
    background-color: var(--teal-odd);
    color: #00534c;
  }
 
  /* === PINK === */
  .learning-box.pink tr:first-child td {
    background-color: var(--pink-header);
  }
  .learning-box.pink tr:last-child td {
    background-color: var(--pink-odd);
    color: #6b1030;
  }
 

    /* =============================
    DROPDOWN 1
  ============================= */
  .dropdown-1 {
    padding: 0px 2px;
    border: 2px solid #444;
    background-color: var(--color-bg);
    font-family: inherit;
    font-size: 13px;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: middle;
  }
 
 
  .dropdown-1:focus {
    outline: none;
  }
 
 
 
    /* =============================
      DROPDOWN 2
    ============================= */
.dropdown-2 {
  position: relative;
  display: inline-block;
}

.dropdown-2 input {
  display: none;
}


.dropdown-2 label {
  background: var(--color-text);
  border: 2px solid var(--color-text);
  color: var(--color-bg);
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  text-align: center;
  font-size: 13px;
}

.dropdown-2 div {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  border: 2px solid var(--color-text);
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 3px;
  display: none;
  z-index: 999;
  width: 300px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  color: var(--color-text);
  text-align: center;
}

.dropdown-2 input:checked ~ div {
  display: block;
}

     /* =============================
      VIDEO EMBED
    ============================= */

    .video-embed {
  display: block;
  margin: 10px auto;
  max-width: 100%;
  width: 640px;
  height: 360px;
  border: none;

}