@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&display=swap");

/* =========================
   RESET & GLOBAL
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Exo 2", sans-serif;
}

body {
  background: #fff;
  color: #222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

html{
  scroll-behavior:smooth;
}

section{
  scroll-margin-top:120px;
}

.header {
   background: rgba(0, 0, 0, 0.7) !important;
}

/* =========================
   STRATEGY CONTENT 
========================= */

.guide-article {
  width:100%;
  max-width: 1000px;
  margin: 20px auto 40px;
  padding: 0;
  text-align: left;
  color: #000;
  line-height: 1.6;
}

.guide-article p {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* HEADINGS */
.guide-article h1{
  margin-bottom:12px;
}

.guide-article h2{
  margin-top:30px;
  margin-bottom:10px;
}

.guide-article h3{
  margin-top:20px;
  margin-bottom:8px;
}

.guide-article h4{
  margin-top:15px;
  margin-bottom:5px;
}

/* PARAGRAPHS */
.guide-article p{
  margin-bottom:10px;
}

/* LIST */
.guide-article ul{
  margin:10px 0 15px;
  padding-left:20px;
}

.guide-article section{
  margin-bottom:40px;
}

@media (max-width:600px){
  .guide-article{
    font-size:0.9rem;
  }
}


/* =========================
   LAYOUT
========================= */

.guide-layout{
  display:flex;
  width:100%;
  max-width:1200px;
  margin:auto;
  gap:100px;
  padding:20px 16px;
}

.toc{
  width:260px;
  flex-shrink:0;
}

.toc-box{
  position:sticky;
  top:120px;
  background:#fff;
  border-radius:12px;
  padding:15px;
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

.strategy-image{
  margin:15px 0 20px;
}

.strategy-image img{
  width:100%;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

.image-caption{
  font-size:0.85rem;
  color:#555;
  margin-top:6px;
  text-align:center;
}

.image-caption a,
.guide-links a,
.base-links a {
  color:#2563eb;
  text-decoration:none;
}

.image-caption a:hover{
  text-decoration:underline;
}

/* =========================
   TOC HEADER (NO BUTTON)
========================= */

.toc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:1rem;
  margin-bottom:10px;
}

.toc-icons{
  display:flex;
  gap:8px;
  cursor:pointer;
}

/* DEFAULT STATE (CLOSED) */
.toc-box:not(.active) .toggle-icon{
  display:inline-block;
}

.toc-box:not(.active) .close-icon{
  display:none !important;
}

/* ACTIVE STATE (OPEN) */
.toc-box.active .toggle-icon{
  display:none !important;
}

.toc-box.active .close-icon{
  display:inline-block !important;
}

/* =========================
   TOC LIST
========================= */

.toc-list{
  list-style:decimal;
  padding-left:20px;
}

.toc-list li{
  font-weight:600;
  margin:8px 0;
}

.toc-list a{
  color:#2563eb;
  font-weight:600;
}

.toc-list a:hover{
  text-decoration:underline;
}

/* =========================
   RIGHT CONTENT
========================= */

.guide-content{
  flex:1;
  max-width:900px;
  width:100%;
  padding:0 16px;
}


/* =========================
   DESKTOP
========================= */

@media (min-width:901px){

  .toc-icons{
    display:none;
  }

  .toc-list{
    display:block !important;
  }

  .guide-article h1{
  margin-top: 70px;
} 
}

/* =========================
   MOBILE
========================= */

@media (max-width:900px){

  .guide-layout{
    flex-direction:column;
    padding:15px 25px;
    gap:20px;
  }

  .toc{
    width:100%;
  }

  .toc-box{
    position:relative;
    top:0;
    margin-top:120px;
  }

  .guide-content{
    max-width:100%;
  }

  /* OPEN BY DEFAULT */
  .toc-list{
    display:block;
    margin-top:10px;
    border-top:1px solid rgba(0,0,0,0.1);
  }

  /* COLLAPSE WHEN CLOSED */
  .toc-box:not(.active) .toc-list{
    display:none;
  }

  .toc-list li{
    border-bottom:1px solid rgba(0,0,0,0.08);
    padding:10px 12px;
    background:#fafafa;
  }
}