/* ==========================================================
   STEP 11 — BCS SYLLABUS FULL WEBSITE READING
   Mirrors the Flutter syllabus visual language.
   ========================================================== */

.syllabus-home-read,
.syllabus-category-web,
.syllabus-read-btn{
  background:linear-gradient(90deg,#7c3aed,#2563eb);
}

.syllabus-hero{
  position:relative;
  overflow:hidden;
  padding:42px 0;
  background:
    radial-gradient(circle at 8% 20%,rgba(217,70,239,.17),transparent 30%),
    radial-gradient(circle at 88% 15%,rgba(37,99,235,.20),transparent 32%),
    linear-gradient(120deg,#0c2f72,#154bc1);
  color:#fff;
}

.syllabus-hero h1{
  margin:11px 0 8px;
  font-size:clamp(31px,5vw,52px);
  color:#fff;
}

.syllabus-hero p{
  max-width:800px;
  margin:0;
  color:rgba(255,255,255,.86);
  line-height:1.65;
}

.syllabus-hero .breadcrumb-lite,
.syllabus-hero .breadcrumb-lite a{
  color:rgba(255,255,255,.80);
}

.syllabus-official-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
  color:inherit;
  font-size:10px;
  font-weight:900;
  letter-spacing:.5px;
}

.syllabus-category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.syllabus-category-card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:15px;
  min-height:155px;
  padding:18px;
  border:1px solid #dce5f5;
  border-radius:20px;
  background:#fff;
  color:inherit;
  box-shadow:0 15px 35px rgba(31,70,145,.09);
  transition:.18s ease;
}

.syllabus-category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(31,70,145,.15);
}

.syllabus-category-card:before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-45px;
  top:-48px;
  border-radius:50%;
  opacity:.12;
  background:currentColor;
}

.syllabus-category-image{
  width:78px;
  height:78px;
  flex:0 0 78px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,#f1efff,#eef7ff);
  font-size:34px;
}

.syllabus-category-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.syllabus-category-copy{
  min-width:0;
}

.syllabus-category-no{
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
  opacity:.68;
}

.syllabus-category-copy h3{
  margin:5px 0 8px;
  font-size:19px;
  line-height:1.35;
}

.syllabus-category-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-bottom:10px;
  color:#758097;
  font-size:11px;
}

.syllabus-category-copy>strong{
  color:#1857ce;
  font-size:12px;
}

.syllabus-category-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}

.syllabus-category-toolbar a{
  color:#1757c8;
  font-weight:900;
}

.syllabus-category-toolbar span{
  color:#6d7890;
  font-size:12px;
}

.syllabus-subcategory-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.syllabus-subcategory-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 30px;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid #dfe6f3;
  border-radius:16px;
  background:linear-gradient(135deg,#fff,#fafbff);
  color:inherit;
  box-shadow:0 8px 21px rgba(37,70,130,.06);
  transition:.17s ease;
}

.syllabus-subcategory-card:hover{
  transform:translateX(3px);
  border-color:#b9c9ea;
}

.syllabus-sub-no,
.syllabus-topic-number{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-weight:950;
  font-size:12px;
  box-shadow:0 7px 15px rgba(50,70,150,.18);
}

.syllabus-sub-copy strong{
  display:block;
  color:#17233c;
  font-size:14px;
}

.syllabus-sub-copy small{
  display:block;
  margin-top:4px;
  color:#7a8498;
}

.syllabus-sub-arrow{
  color:#7046df;
  font-weight:950;
  font-size:18px;
}

/* App's six gradient family */
.grad-fill-1{background:linear-gradient(135deg,#d946ef,#7c3aed)}
.grad-fill-2{background:linear-gradient(135deg,#06b6d4,#2563eb)}
.grad-fill-3{background:linear-gradient(135deg,#ff5c8a,#ff8a4c)}
.grad-fill-4{background:linear-gradient(135deg,#6366f1,#9333ea)}
.grad-fill-5{background:linear-gradient(135deg,#14b8a6,#06b6d4)}
.grad-fill-6{background:linear-gradient(135deg,#2563eb,#7c3aed)}

.grad-text-1{background:linear-gradient(90deg,#d946ef,#7c3aed)}
.grad-text-2{background:linear-gradient(90deg,#06b6d4,#2563eb)}
.grad-text-3{background:linear-gradient(90deg,#ff5c8a,#ff8a4c)}
.grad-text-4{background:linear-gradient(90deg,#6366f1,#9333ea)}
.grad-text-5{background:linear-gradient(90deg,#14b8a6,#06b6d4)}
.grad-text-6{background:linear-gradient(90deg,#2563eb,#7c3aed)}

.syllabus-gradient-title,
.syllabus-reader-title{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.syllabus-topic-grid{
  display:grid;
  gap:12px;
}

.syllabus-topic-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  padding:15px;
  border:1px solid #dce5f5;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#f9fbff,#faf7ff);
  box-shadow:0 9px 22px rgba(40,70,130,.07);
}

.syllabus-topic-number{
  width:48px;
  height:48px;
}

.syllabus-topic-main{
  min-width:0;
}

.syllabus-topic-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:7px;
}

.syllabus-web-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#2259b6;
  font-size:10px;
  font-weight:900;
}

.syllabus-topic-main h2,
.syllabus-topic-main h3{
  display:inline-block;
  margin:0 0 7px;
  font-size:19px;
  line-height:1.35;
}

.syllabus-topic-main p{
  margin:7px 0 12px;
  color:#637089;
  line-height:1.55;
  font-size:13px;
}

.syllabus-topic-path{
  color:#7a8498;
  font-size:11px;
}

/* Full reader */
.syllabus-reader-page{
  padding:30px 0 55px;
  background:
    radial-gradient(circle at 10% 5%,rgba(124,58,237,.07),transparent 25%),
    radial-gradient(circle at 90% 20%,rgba(37,99,235,.07),transparent 28%),
    #f4f7fd;
}

.syllabus-reader-container{
  max-width:980px;
}

.syllabus-reader-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
}

.syllabus-reader-nav a{
  color:#1959c7;
  font-weight:900;
}

.syllabus-reader-nav span{
  color:#7b879c;
  font-size:11px;
}

.syllabus-reader-card{
  overflow:hidden;
  border:1px solid rgba(124,58,237,.18);
  border-radius:25px;
  background:linear-gradient(135deg,#fff,#fbfcff,#f9f6ff);
  box-shadow:
    0 28px 65px rgba(25,55,120,.12),
    0 10px 30px rgba(124,58,237,.06);
}

.syllabus-reader-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 22px 16px;
}

.syllabus-reader-number{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:20px;
}

.syllabus-reader-title-wrap{
  min-width:0;
}

.syllabus-reader-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.syllabus-reader-badges .syllabus-official-badge{
  background:#f1edff;
  border-color:#ddd4ff;
  color:#6b35c6;
}

.syllabus-reader-title{
  display:inline-block;
  margin:0;
  max-width:100%;
  background:linear-gradient(90deg,#d946ef,#7c3aed,#2563eb);
  font-size:clamp(25px,4vw,38px);
  line-height:1.25;
}

.syllabus-reader-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 13px;
  margin-top:10px;
  color:#778399;
  font-size:11px;
}

.syllabus-decorative-divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:0 24px;
}

.syllabus-decorative-divider span{
  height:1px;
  background:linear-gradient(90deg,transparent,#b9a6ef);
}

.syllabus-decorative-divider span:last-child{
  background:linear-gradient(90deg,#b9a6ef,transparent);
}

.syllabus-decorative-divider b{
  color:#7c3aed;
}

.syllabus-reader-content{
  padding:18px 24px 28px;
}

.syllabus-smart-content{
  display:grid;
  gap:8px;
}

.syllabus-text-line,
.syllabus-icon-line,
.syllabus-option-line{
  color:#334155;
  font-size:15px;
  font-weight:500;
  line-height:1.72;
}

.syllabus-text-line{
  padding:1px 2px;
}

.syllabus-icon-line,
.syllabus-option-line{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:flex-start;
}

.syllabus-symbol-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:8px;
  font-size:13px;
  font-weight:900;
}

.syllabus-symbol-icon.success{color:#16a34a;background:#dcfce7}
.syllabus-symbol-icon.danger{color:#dc2626;background:#fee2e2}
.syllabus-symbol-icon.info{color:#2563eb;background:#dbeafe}
.syllabus-symbol-icon.warning{color:#d97706;background:#fef3c7}
.syllabus-symbol-icon.purple{color:#7c3aed;background:#f3e8ff}
.syllabus-symbol-icon.yellow{color:#a16207;background:#fef9c3}
.syllabus-symbol-icon.orange{color:#ea580c;background:#ffedd5}
.syllabus-symbol-icon.teal{color:#0f766e;background:#ccfbf1}
.syllabus-symbol-icon.rose{color:#e11d48;background:#ffe4e6}

.syllabus-smart-heading{
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  align-items:flex-start;
  gap:9px;
  width:100%;
  padding:10px;
  border:1px solid rgba(124,58,237,.13);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(124,58,237,.07),rgba(37,99,235,.05));
}

.syllabus-heading-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff;
  font-size:13px;
}

.syllabus-smart-heading strong{
  display:inline-block;
  padding-top:3px;
  font-size:16px;
  line-height:1.45;
  background:linear-gradient(90deg,#7c3aed,#2563eb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.syllabus-option-badge{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-weight:900;
}

.syllabus-label{
  font-weight:950;
}

.syllabus-token{
  font-weight:950;
}

.syllabus-token.token-quote{
  padding:1px 4px;
  border-radius:5px;
  background:#f5f0ff;
  color:#9333ea;
}

/* rotating accent classes */
.accent-pink{color:#c026d3}
.accent-blue{color:#2563eb}
.accent-orange{color:#ea580c}
.accent-purple{color:#7c3aed}
.accent-teal{color:#0f766e}
.accent-indigo{color:#4f46e5}

.syllabus-line-spacer{
  height:5px;
}

/* Complex HTML matches Flutter's table/list behavior */
.syllabus-complex-html{
  color:#334155;
  font-size:15px;
  line-height:1.68;
}

.syllabus-complex-html p{
  margin:0 0 14px;
}

.syllabus-complex-html h1,
.syllabus-complex-html h2,
.syllabus-complex-html h3,
.syllabus-complex-html h4{
  margin:18px 0 10px;
  color:#5b21b6;
  line-height:1.35;
}

.syllabus-complex-html ul,
.syllabus-complex-html ol{
  margin:8px 0 14px 22px;
}

.syllabus-complex-html li{
  margin-bottom:7px;
}

.syllabus-complex-html table{
  width:100%;
  margin:12px 0 17px;
  border-collapse:collapse;
  overflow:hidden;
}

.syllabus-complex-html th,
.syllabus-complex-html td{
  padding:9px 10px;
  border:1px solid #d8dce8;
  vertical-align:middle;
}

.syllabus-complex-html th{
  background:#f5f3ff;
  color:#172554;
  font-weight:900;
}

.syllabus-complex-html blockquote{
  margin:12px 0;
  padding:11px 13px;
  border-left:4px solid #7c3aed;
  background:#f8f5ff;
}

.syllabus-complex-html img{
  display:block;
  max-width:100%;
  height:auto;
  margin:14px auto;
  border-radius:12px;
}

.syllabus-reader-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:15px 22px;
  border-top:1px solid #e5e9f2;
  background:#f8faff;
}

.syllabus-reader-footer strong,
.syllabus-reader-footer span{
  display:block;
}

.syllabus-reader-footer span{
  margin-top:3px;
  color:#7a859b;
  font-size:10px;
}

.syllabus-reader-footer a{
  color:#1959c7;
  font-weight:900;
  font-size:12px;
}

.syllabus-no-content{
  padding:35px 15px;
  text-align:center;
  color:#64748b;
}

/* Decorative card accents */
.grad-pink{color:#a21caf}
.grad-blue{color:#1d4ed8}
.grad-orange{color:#ea580c}
.grad-purple{color:#6d28d9}
.grad-teal{color:#0f766e}
.grad-indigo{color:#4338ca}

@media(max-width:850px){
  .syllabus-category-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .syllabus-subcategory-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .syllabus-category-grid{
    grid-template-columns:1fr;
  }

  .syllabus-category-card{
    min-height:130px;
    padding:14px;
  }

  .syllabus-category-image{
    width:64px;
    height:64px;
    flex-basis:64px;
  }

  .syllabus-reader-page{
    padding-top:15px;
  }

  .syllabus-reader-nav{
    align-items:flex-start;
    flex-direction:column;
  }

  .syllabus-reader-card{
    border-radius:19px;
  }

  .syllabus-reader-header{
    padding:17px 15px 13px;
  }

  .syllabus-reader-number{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .syllabus-reader-content{
    padding:15px 16px 22px;
  }

  .syllabus-text-line,
  .syllabus-icon-line,
  .syllabus-option-line,
  .syllabus-complex-html{
    font-size:14px;
  }

  .syllabus-reader-footer{
    align-items:flex-start;
    flex-direction:column;
    padding:14px 16px;
  }

  .syllabus-reader-footer a{
    width:100%;
    padding:10px;
    border-radius:10px;
    background:#eaf1ff;
    text-align:center;
  }
}