body {
      background-color: #f8fafc;
      font-family: 'Source Sans 3', sans-serif;
      color: #34495e;
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }
    a {
      color: #4d8fe3;
      font-weight: 600;
      text-decoration: none;
      transition: text-decoration 0.3s, color 0.3s;
    }
    a:hover, a:focus {
      text-decoration: none;
      color: #3978d6;
      outline: none;
    }
    header, footer {
      background: #e8ecf1;
      padding: 20px 20px 0px 20px;
      text-align: center;
    }
    header h1 { color: #2c3e50; margin: 0; font-weight: 700;}
    header p { margin-top: 0px; font-weight: 400; color: #3b4a63; }
    h2, h3 { color: #2c3e50; margin-top: 1.5em; margin-bottom: 0.6em; font-weight: 600;}
    h3 { margin-top: 2em; }
    h5 { margin-top: 0px; font-style: italic; font-weight: lighter;}
    p { margin-bottom: 1em; font-weight: 400; color: #3b4a63;}
    ul, ol { margin-left: 20px; margin-bottom: 1em;}
    li { margin-bottom: 0.4em;}
    .main-content {
      display: flex;
      margin: 20px auto 40px auto;
      max-width: 1280px;
      padding: 0 15px;
      box-sizing: border-box;
      min-height: 70vh;
    }
    .sidebar-left,
    .sidebar-right {
      width: 20%;
      padding: 15px;
      background: #f0f3f6;
      box-sizing: border-box;
      font-size: 0.95em;
      border-radius: 5px;
      color: #4a5a73;
      position: sticky;      
      top: 20px;             
      align-self: flex-start;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #b6cbe3 #e8ecf1;
    }
    .sidebar-left::-webkit-scrollbar,
    .sidebar-right::-webkit-scrollbar { width: 8px; background: #e8ecf1;}
    .sidebar-left::-webkit-scrollbar-thumb,
    .sidebar-right::-webkit-scrollbar-thumb { background: #b6cbe3; border-radius: 8px;}
    .sidebar-left::-webkit-scrollbar-thumb:hover,
    .sidebar-right::-webkit-scrollbar-thumb:hover { background: #4d8fe3;}
    .sidebar-left h3,
    .sidebar-right h3 { margin-top: 0; font-weight: 600; margin-bottom: 0.8em; color: #2c3e50;}
    .sidebar-left ol,
    .sidebar-right ul { list-style-type: disc; padding-left: 20px; margin: 0;}
    .content-area {
      width: 60%;
      padding: 20px 30px;
      background: #fff;
      box-sizing: border-box;
      border-radius: 6px;
      box-shadow: 0 0 6px rgba(100, 110, 125, 0.1);
    }
    .announcement {
      background: #dfe6ee;
      padding: 10px 20px;
      text-align: center;
      margin: 10px auto 30px auto;
      font-size: 1.1em;
      font-weight: 500;
      color: #2c3e50;
      max-width: 1280px;
      border-radius: 5px;
    }
    .cta-bubble {
      position: fixed;
      left: 24px;
      bottom: 24px;
      z-index: 999;
      background: #fff;
      border-radius: 24px 24px 24px 8px;
      box-shadow: 0 2px 12px rgba(77,143,227,0.15);
      padding: 12px 26px 12px 18px;
      font-size: 1.03em;
      border: 2px solid #b6cbe3;
      display: flex;
      align-items: center;
    }
    .cta-bubble a {
      color: #4d8fe3;
      font-weight: 700;
      text-decoration: none;
      font-size: 1.04em;
      transition: color 0.2s;
    }
    .cta-bubble a:hover { color: #3978d6; }
    .sidebar-callout {
      margin: 22px 0 0 0;
      padding: 14px 12px 12px 12px;
      border-radius: 18px;
      background: #f9fafc;
      box-shadow: 0 0 12px -6px #b6cbe3;
      border: 1.5px solid #b6cbe3;
    }
    .sidebar-call-title { color: #3978d6; font-size: 1.05em; font-weight: 700; margin-bottom: 4px;}
    .sidebar-call-desc { color: #3b4a63; font-size: 0.94em; font-style: italic;}
    .sidebar-callout a { color: #4d8fe3; text-decoration: none; font-weight: 600;}
    .sidebar-callout a:hover { color: #2c3e50;}
    .section-divider-svg {
      display: block;
      margin: 40px 0;
      height: 50px;
      width: 100%;
    }
    .header-passage {
      text-align: left;
      width: 50%;
      margin: 0 auto 8px auto;
      font-size: 0.82em;
      font-style: italic;
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      transition: max-height 0.4s ease;
      max-height: 4.8em;
    }
    .header-passage.expanded { max-height: 100em;}
    .header-toggle-tab {
      cursor: pointer;
      font-size: 0.8em;
      font-weight: 600;
      text-align: center;
      position: relative;
      max-width: 140px;
      margin: 0 auto 30px auto;
      background: #a8c9ff;
      color: white;
      padding: 0px;
      border-radius: 14px;
      user-select: none;
      transition: background 0.3s;
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0% 100%);
      box-shadow: 0 2px 6px rgba(77,143,227,0.16);
    }
    .header-toggle-tab:hover { background: #4d8fe3; }
    @media (max-width: 820px) {
      .main-content { flex-direction: column;}
      .sidebar-left,
      .sidebar-right {
        position: fixed;
        top: 0; left: 0; right: 0;
        max-height: none;
        width: 100%;
        z-index: 1200;
        background: #e8ecf1;
        box-shadow: 0 2px 14px -6px #b6cbe3;
        display: none;
        overflow-y: auto;
        padding: 22px 18px 12px 18px;
        border-radius: 0 0 16px 16px;
      }
      .sidebar-toggle-btn {
        display: block;
        position: fixed;
        top: 20px;
        left: 12px;
        z-index: 1300;
        background: #4d8fe3;
        color: #fff;
        font-size: 2.1em;
        padding: 5px 18px;
        border: none;
        border-radius: 14px;
        cursor: pointer;
        box-shadow: 0 2px 10px -6px #b6cbe3;
      }
      .sidebar-right-toggle-btn {
        left: auto;
        right: 12px;
        background: #3978d6;
      }
      .header-passage { width: 80%;}

      .content-area {
        width: 100% !important; /* override desktop 60% width */
        padding-left: 20px;      /* optional: adjust padding */
        padding-right: 20px;     /* optional: adjust padding */
        box-sizing: border-box;  /* ensure padding doesn't cause horizontal overflow */
      }
    }
    @media (min-width: 821px) {
      .sidebar-toggle-btn { display: none; }
    }
.sidebar-callout-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  background: #fff;
  border-radius: 24px 24px 8px 24px;
  box-shadow: 0 2px 12px rgba(77, 143, 227, 0.15);
  padding: 12px 26px 12px 18px;
  font-size: 0.9em;
  border: 2px solid #b6cbe3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 280px;
}

.sidebar-callout-bubble .sidebar-call-title {
  color: #3978d6;
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 6px;
}

.sidebar-callout-bubble .sidebar-call-desc {
  color: #3b4a63;
  font-style: italic;
  font-size: 0.85em;
  line-height: 1.3;
}

.sidebar-callout-bubble a {
  color: #4d8fe3;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-callout-bubble a:hover {
  color: #2c3e50;
}

/* Speech bubble tail */
.sidebar-callout-bubble::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -18px;
  width: 30px;
  height: 20px;
  background: transparent;
  border-bottom-left-radius: 24px 12px;
  box-shadow: 0 6px 16px -4px #b6cbe3;
  transform: skewY(-20deg);
  z-index: -1;
}
nav.footer-menu a {
  padding: 0 25px 0 5px;
}