/* =========================================================
   EQUALYRA — CONTENT STYLES
   All styling for article bodies (.content). Kept in its own
   file so content authors only touch this one stylesheet.

   Usage: the post body is wrapped in <div class="content">.
   Quiz helper classes: .question-text, .choices, .step-box,
   .result-box, .operation-box, .analysis-box, .q-label,
   .section-rule
   ========================================================= */

.content{
  padding:10px 5px 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem, 1.4vw, 1.18rem);
  line-height:1.8;
  letter-spacing:0.01em;
  color:#1f2a37;
  overflow-wrap:anywhere;
}

.content > *:first-child{
  margin-top:0;
}
.content p.series{
  text-align:center;
  color:#000000 !important;
}
.content p,
.content ul,
.content ol,
.content section,
.content details,
.content blockquote{
  margin:0 0 0.4rem;
  margin-left:2rem;
  font-size: 16px;
}
.no-indent{
  margin-left:0rem !important;
}

.content ul,
.content ol{
  padding-left:0rem;
}

.content li + li{
  margin-top:0rem;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
  margin:1.8rem 0 0.8rem;
  color:#041E4F;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.3;
  letter-spacing:-0.02em;
}

.content h1{ font-size:clamp(1.8rem, 2.8vw, 2.6rem); }
.content h2{ font-size:clamp(1.4rem, 2.2vw, 2rem); }
.content h3{ font-size:clamp(1.2rem, 1.8vw, 1.5rem); }
.content h4{ font-size:1.15rem; }

/* Indent subheadings under their section title for a clear visual
   hierarchy (H3/H4 under H2), so it does not all sit flush-left. */
.content h3,
.content h4{
  margin-left:2rem;
}

.content h4{
  margin-left:0rem;
}

/* The "Pilihan Jawaban" heading is a sub-heading inside each question */
.content .question-text + h2,
.content .question-text + h2 + .choices{
  margin-left:0rem;
}

.content section,
.content details,
.content .step,
.content .answer,
.content .options {
  background:transparent;
}

.content details{
  border:1px solid #d9d9d9;
  border-radius:12px;
  padding:0.8rem 1rem;
  background:#fafafa;
}

.content summary{
  cursor:pointer;
  font-weight:700;
  color:#041E4F;
}

.content summary::-webkit-details-marker {
  display:none;
}

.content code{
  padding:0.2rem 0.4rem;
  background:#f1f3f5;
  border:1px solid #d8dde3;
  border-radius:5px;
  font-size:0.92em;
}

.content pre{
  overflow-x:auto;
  padding:15px;
  color:#e9f7f7;
  background:#0b1220;
  border:2px solid #2f3d4d;
  border-radius:12px;
  box-shadow:0 14px 30px rgba(4,30,79,.12);
}

.content blockquote{
  margin:1.4rem 0;
  padding:0.9rem 1rem 0.9rem 1.1rem;
  background:#DCEDEA;
  border-left:5px solid #186B61;
  border-radius:0 10px 10px 0;
  color:#1d2a2a;
}

.content table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  font-family:"Courier New",monospace;
  margin:1rem 2rem;
  border:1px solid #041E4F;
  border-radius:0px;
  overflow:hidden;
  background:#fff;
}

.content img.pengantar-amo{
  display:block;
  max-width:95%;
  height:auto;
  margin:1.7rem auto;
  border-radius:0px;
}
.content img,
.content svg,
.content video{
  display:block;
  max-width:60%;
  height:auto;
  margin:0.2rem auto;
  border-radius:0px;
}
.content img.no-11{
  display:block;
  max-width:90%;
  height:auto;
  margin:0.2rem auto;
  border-radius:0px;
}
.content img.no-4{
  display:block;
  max-width:50%;
  height:auto;
  margin:0.2rem auto;
  border-radius:0px;
}

.content figure{
  margin:1.5rem auto;
  text-align:center;
}

.content th,
.content td{
  padding:4px 5px 5px 30px;
  border:1px solid #d2dbe5;
  vertical-align:top;
}

.content th{
  color:#fff;
  background:#041E4F;
  text-align:center;
}

.content td{
  background:#fff;
}

.content hr{
  margin:0rem 0 2rem;
  border:0;
  border-top:1px solid #d7dde5;
}
.content hr.bold {
  margin:0rem 0rem;
  border:0;
  border-top:10px solid #041E4F;
}
.content li{
  margin-left:4rem;
}

.content > div[style*="display:flex"],
.content > section[style*="display:flex"]{
  gap:10px;
}

.content .options,
.content .answer,
.content .step {
  font-size:1rem;
  line-height:1.7;
}

/* =========================================================
   ARTICLE CONTENT — OLIMPIADE QUIZ TEMPLATE
   ========================================================= */

/* Question stem */
.content .question-text-example {
  background:#f5f8fc;
  border:1px solid #d5deea;
  border-left:5px solid #041E4F;
  border-radius:0 12px 12px 0;
  padding:1rem 1.25rem;
  margin:1.1rem 2rem;
  font-size:1.02em;
  line-height:1.8;
  overflow-wrap:break-word;
}
.content .question-text{
  background:#f5f8fc00;
  border:0px solid #d5deea;
  border-left:3px solid #000000;
  border-radius:0 12px 12px 0;
  padding:1rem 1.25rem;
  margin:1.1rem 2rem;
  font-size:17px;
  line-height:1.8;
  overflow-wrap:break-word;
  font-family:"STIX Two Text", "Cambria Math", "Latin Modern Roman","Noto Serif", "Lora", serif;
  font-weight:550;
}
.content .question-text-message{
  background:#2A8C7F;
  border:0px solid #d5deea;
  border-left:3px solid #000000;
  border-radius:0 12px 12px 0;
  padding:1rem 1.25rem;
  margin:1.1rem 2rem;
  font-size:17px;
  line-height:1.8;
  overflow-wrap:break-word;
  font-family:"STIX Two Text", "Cambria Math", "Latin Modern Roman","Noto Serif", "Lora", serif;
  font-weight:550;
}
/* Multiple-choice options row */
.content .options{
  background:#f4f6f800;
  border:0px dashed #b9c3d0;
  border-radius:12px;
  padding:0.9rem 1.1rem;
  margin:1rem 0;
  text-align:center;
  font-family:"STIX Two Text", "Cambria Math", "Latin Modern Roman","Noto Serif", "Lora", serif;
  font-size:17px;
  line-height:2.1;
  overflow-wrap:break-word;
  font-weight:550;
}
/* Answer option card — single reusable style for all multiple-choice options.
   Replaces per-option inline styles in content markdown files. */
.content .option-card{
  flex:1 1 180px;
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
}

.content .choices{
  background:#f4f6f800;
  border:0px dashed #b9c3d0;
  border-radius:12px;
  padding:0.9rem 1.1rem;
  margin:1rem 0;
  text-align:left;
  font-family:"STIX Two Text", "Cambria Math", "Latin Modern Roman","Noto Serif", "Lora", serif;
  font-size:17px;
  line-height:2.1;
  overflow-wrap:break-word;
  font-weight:550;

}

/* Standalone math expression box */
.content .operation-box{
  background:#ffffff;
  border:1px solid #e0e4ea;
  border-radius:10px;
  padding:0.9rem 1.1rem;
  margin:0.8rem 0;
  text-align:center;
  font-family:"Courier New",monospace;
  font-size:1.08rem;
  line-height:1.9;
  overflow-x:auto;
}

/* "Analisis" explainer box */
.content .analysis-box{
  background:#fdf8e7;
  border:1px solid #f0e2b6;
  border-left:4px solid #d9a441;
  border-radius:0 10px 10px 0;
  padding:0.9rem 1.1rem;
  margin:0.8rem 0;
}

/* Final answer box */
.content .result-box{
  background:#eaf6f1;
  border:1px solid #bfe0d2;
  border-left:4px solid #186B61;
  border-radius:0 10px 10px 0;
  padding:0.95rem 1.15rem;
  margin:0.9rem 0;
  margin-left:2rem;
}

.content .result-box b,
.content .step-box b,
.content .analysis-box b,
.content .question-text b{
  color:#000000;
}

.content .step-box{
 margin-left:2rem;
}

/* Section / step label like "Analisis", "Langkah", "Kesimpulan" */
.content .q-label{
  display:block;
  margin:0.9rem 0 0.35rem;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#041E4F;
}

.content .q-label::before{
  content:"▸ ";
  color:#186B61;
}

/* Bold section divider (used before each quiz section) */
.content .section-rule{
  border:0;
  border-top:3px double #041E4F;
  margin:2.2rem 0;
}

/* Animated accordion caret */
.content summary::before{
  content:"▸";
  display:inline-block;
  margin-right:.45rem;
  color:#186B61;
  transition:transform .18s ease;
}

.content details[open] summary::before{
  transform:rotate(90deg);
}

/* =========================================================
   ARTICLE CONTENT — ACADEMIC POLISH
   ========================================================= */

/* Force one consistent reading font and rhythm inside the
   solution accordion, so the author's inline-styled boxes
   (yellow/gray/green) all match and look tidy. */
.content details div:not(.operation-box){
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:1rem !important;
  line-height:1.78 !important;
}

/* Zebra striping on long material tables for readability */
.content table tbody tr:nth-child(odd) td{
  background:#fbfcfe;
}

/* Crisp, unambiguous table headers */
.content thead th{
  white-space:nowrap;
  letter-spacing:.03em;
  text-align: center;
}

/* Rumus panjang (MathJax) tidak boleh meluber keluar layar
   di ponsel — beri scroll horizontal pada display math. */
.content mjx-container[jax="CHTML"][display="true"]{
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  padding:2px 0;
}

/* Inline MathJax boleh melipat baris, jangan paksa satu baris panjang */
.content mjx-container{
  overflow-wrap:anywhere;
}

/* Tidy accordion trigger */
.content summary{
  padding:.5rem .2rem;
  border-bottom:1px solid #e4e8ee;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  letter-spacing:.03em;
}

.content details[open] summary{
  margin-bottom:.3rem;
}

/* =========================================================
   RESPONSIVE — CONTENT ONLY
   ========================================================= */

@media (min-width:821px){
  .content{
    font-size:clamp(.98rem,1.1vw,1.06rem);
    line-height:1.72;
  }

  .content h2{
    font-size:clamp(1.3rem,1.8vw,1.7rem);
  }

  .content h3{
    font-size:clamp(1.12rem,1.45vw,1.35rem);
  }

  .content img,
  .content svg,
  .content video{
    max-width:min(100%,540px);
  }

  /* Introductory AMO artwork is decorative, so it should not dominate the page. */
  .content img[src*="pengantar_"]{
    max-width:540px;
  }
}

@media (max-width:560px){
  .content{
    padding-left:0;
    padding-right:0;
    font-size:1rem;
    line-height:1.75;
  }

  .content table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    margin-left:0rem ;
  }

  .content pre{
    max-width:100%;
    font-size:.82rem;
  }

  .content details{
    padding:0.75rem 0.8rem;
  }

  .content img,
  .content svg,
  .content video{
    max-width:100%;
  }
}

/* =========================================================
   RESPONSIVE FIX — REMOVE LEFT MARGIN ON MOBILE
   Tujuan: Menghilangkan ruang kosong di sebelah kiri layar
   pada perangkat dengan lebar <= 560px.
   Elemen yang awalnya punya margin-left besar (p, ul, ol,
   h3, li, step-box, result-box, dll) di-reset ke 0.
   ========================================================= */
@media (max-width:560px){
  .content p,
  .content ul,
  .content ol,
  .content section,
  .content details,
  .content blockquote,
  .content h3,
  .content li,
  .content .step-box,
  .content .result-box {
    margin-left:0 !important;
  }

  /* Tambahkan padding kecil agar teks tidak terlalu mepet */
  .content {
    padding-left:10px;
    padding-right:10px;
  }

  /* Kotak soal/pilihan/operasi juga kehilangan margin samping
     agar teks soal memakai lebar layar penuh di ponsel. */
  .content .question-text,
  .content .question-text-example,
  .content .options,
  .content .choices,
  .content .operation-box,
  .content .analysis-box {
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:medium;
    font-family:"STIX Two Text", "Cambria Math", "Latin Modern Roman","Noto Serif", "Lora", serif;
  }

  /* Padding sel tabel diringkas di ponsel karena tabel sudah
     di-scroll horizontal — 30px padding kiri hanya membuang ruang. */
  .content th,
  .content td{
    padding:6px 10px;
  }
}