.accordion-content p {padding-left: 5px;}
.accordion-content p:first-of-type {
  margin-top: 0rem !important;
}
.accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 1rem; /* adjust */
  box-sizing: border-box;
}
.accordion .accordion-item.active .accordion-content {
  max-height: 2000px;
  padding: 1rem;
  overflow: hidden;
}
.accordion .accordion-content ul,
.accordion .accordion-content p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.accordion-item { scroll-margin-top: 96px; }
  .c-banner {
    position: relative;
    width: 100%;
  }

  .c-banner .bg-image {
    margin: 0;
  }

  .c-banner .bg-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-banner .banner-title {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    color: #fff;
  }

  .c-banner .banner-title h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }

  :root{
    --white:#FFFFFF; --black:#000000;
    --techno-blue:#0081FB; --heritage-teal:#00605F;
    --cloud-gray:#D1DCE2; --cerebral-gray:#4B4B65; --soft-chrome:#A7A9AC;

    --bg:#F9FBFD; --panel:var(--white); --text:#151924; --muted:#5B6271;
    --border: color-mix(in hsl, var(--cloud-gray) 70%, transparent);
    --ring: color-mix(in hsl, var(--techno-blue) 45%, transparent);
    --accent: var(--techno-blue);
    --accent-quiet: color-mix(in hsl, var(--heritage-teal) 22%, transparent);

    --radius:14px; --gap:1.25rem; --toc-w:300px; --maxw:1120px;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#0E1116; --panel:#121720; --text:#E9EEF6; --muted:#9BA3B0;
      --border: color-mix(in hsl, var(--cerebral-gray) 35%, transparent);
      --ring: color-mix(in hsl, var(--techno-blue) 55%, transparent);
    }
  }

  html{ scroll-behavior: smooth; }

  /* Layout */
  .layout{
    max-width:1320px; margin:1.25rem auto; padding:0 var(--gap);
    display:grid; grid-template-columns: var(--toc-w) 1fr; gap: var(--gap);
  }

  /* TOC */
  .toc-toggle{
    display:none; margin:0 0 .75rem auto;
    border:1px solid var(--border); background:var(--panel); color:var(--text);
    padding:.55rem .8rem; border-radius:10px; cursor:pointer;
  }
  .toc-toggle:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

  nav.toc{
    position:sticky; top: calc(56px + 1rem);
    align-self:start; background:#f8f8f8; border:1px solid var(--border);
    padding:1rem; max-height: calc(100dvh - 96px); overflow:auto;
  }
  .toc h2{ margin:.25rem 0 .6rem; font-size:16px; letter-spacing:.02em; color:var(--muted); }
  .toc ol,.toc ul{ list-style:none; margin:0; padding:0; }
  .toc a{
    display:block; padding:.5rem .6rem; color:var(--text); text-decoration:none; font-size:16px;
    border:1px solid transparent; border-radius:10px;
  }
  .toc a:hover{ background: color-mix(in hsl, var(--accent) 10%, transparent); border-color: color-mix(in hsl, var(--accent) 20%, transparent); }
  .toc a[aria-current="true"]{ background: color-mix(in hsl, var(--accent) 14%, transparent); border-color: color-mix(in hsl, var(--accent) 40%, transparent); }
  .toc .sub{ margin-left:.5rem; padding-left:.65rem; border-left:1px dashed color-mix(in hsl, var(--cerebral-gray) 35%, transparent); }

  /* Content */
  main{ background:var(--panel); border:1px solid var(--border); padding:min(5vw,2rem); }
  main h2{ margin:2.1rem 0 .6rem; font-size: 18px; font-weight:600; color: #0081fb;}
  main h3{ margin:1.4rem 0 .4rem; font-size: clamp(1.05rem,1rem + .45vw,1.22rem); color:var(--muted); }
  .section{ scroll-margin-top:90px; text-align:justify; }

  .callout{
    border:1px solid color-mix(in hsl, var(--heritage-teal) 38%, transparent);
    background: color-mix(in hsl, var(--heritage-teal) 8%, transparent);
    padding:.9rem 1rem; border-radius:12px;
  }

  /* Lists */
  ul.indented{ margin-left:1rem !important; margin-top:.5rem !important; }
  .steps{ margin: .5rem 0 0 1.2rem; padding:0; }
  .steps > li{ margin:0 0 .8rem 0; }
  .steps > li::marker{ color: var(--accent); font-weight:700; }

  /* Table (mobile scroll) */
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-scroll table{ border-collapse:collapse; width:100%; min-width:640px; }
  .table-scroll td{ border:1px solid #ddd; padding:8px; text-align:center; }
  .table-scroll tr:first-child td{ font-weight:bold; background:#f2f2f2; }

  /* Programs grid */
  .programs-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:1rem; margin-top:16px;
  }
  .program-card{
    display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:#fff;
    padding: .9rem 1.25rem; font-weight:600;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; gap: 1rem;
  }
  .program-card:hover{ transform: translateY(-4px); filter:saturate(1.05); color:#fff; }
  .program-card:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; }
  .program-card .code{
    flex-shrink:0; border:2px solid rgba(255,255,255,.7); border-radius:50%;
    width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-weight:800; margin-right:1rem;
    font-size: 14px;
  }
  .program-card .txt{
    display:flex; flex-direction:column; gap:.25rem;
    flex: 1; min-width: 0;
  }
  .program-card .title{
    font-size:1.05rem; font-weight:800; line-height:1.25;
  }
  .program-card .desc{
    font-weight:500;
    opacity:.9;
    font-size:1.1rem;
    line-height:1.35;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }

  @media (max-width: 480px){
    .program-card{ padding:.75rem 1rem; }
    .program-card .code{ width:38px; height:38px; font-size: 10px !important;}
    .program-card .title{ font-size:1rem; }
    .program-card .desc{ font-size:.9rem; }
  }
  .program-card .title{ flex:1; font-size:1.3rem; text-align: left; font-weight: 800; padding-bottom: 10px}
  .program-card .arrow{ font-size:1.5rem; transition: transform .25s ease; }
  .program-card:hover .arrow{ transform: translateX(4px); }

  /* Colors */
  .program-card.cyan{ background:#31C7E3; }   /* CS */
  .program-card.orchid{ background:#8F86DA; } /* CV */
  .program-card.blue{ background:#3A34BA; }   /* ML */
  .program-card.red{ background:#F75C6A; }    /* NLP */
  .program-card.gray{ background:#6A7078; }   /* ROB */
  .program-card.techno{ background:#0081FB; } /* SDS */
  .program-card.grey{ background:#DABB99; } /* MAAI */

  /* Mobile */
  @media (max-width:980px){
    .layout{ grid-template-columns:1fr; }
    .toc-toggle{ display:inline-flex; align-items:center; gap:.5rem; }
    nav.toc{ display:none; position:static; max-height:none; }
    nav.toc.is-open{ display:block; margin-bottom:.75rem; }
    .toc a{ font-size:1.4rem; }
    .program-card{ padding:.8rem 1rem; }
    .program-card .title{ font-size:1rem; }
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
  }

  a:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }

  /* --- overflow/cutoff fix --- */
  * { box-sizing: border-box; }

  /* grid children shouldn't enforce min-width */
  .layout > nav,
  .layout > main {
    min-width: 0;
  }

  /* long strings/URLs won't push layout wider */
  .section, .section p, .section li {
    overflow-wrap: anywhere;      /* or: word-break: break-word; */
  }

  /* tables already wrapped in .table-scroll, but ensure no spill */
  .table-scroll { overflow-x: auto; }

  /* program cards never exceed container */
  .programs-grid, .program-card { max-width: 100%; }

  p{text-align: left}

  .accordion {
    width: 100%;
    border: 1px solid #ddd;
  }

  .accordion-item {
    border-bottom: 1px solid #ddd;
  }

  .accordion-button {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: relative;
  }

  .accordion-button::after {
    content: "+";
    position: absolute;
    right: 15px;
    font-size: 20px;
    transition: transform 0.3s ease;
    font-weight: 200;
  }

  .accordion-item.active .accordion-button::after {
    content: "−";
  }

  .accordion-button:hover {
    background-color: #e6f0ff;
  }

  .accordion-content {
    padding: 15px 15px 15px;
    display: none;
    font-size: 16px;
    color: #444;
    background-color: #fff;
    text-align: left;
  }

  .accordion-item.active .accordion-content {
    display: block;
  }