/* ============================================================
   CONTEMPT OF COURTS ACT - Professional Legal Study Page
   Color Scheme: Green + Saffron | Font: Bold & Crystal Clear
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Libre+Baskerville:wght@400;700&family=Source+Serif+4:wght@600;700&display=swap');

:root {
  --green-dark:    rgb(10, 80, 30);
  --green-mid:     rgb(20, 110, 50);
  --green-light:   rgb(34, 150, 70);
  --green-pale:    rgb(220, 245, 228);
  --saffron-dark:  rgb(200, 100, 0);
  --saffron-mid:   rgb(230, 130, 0);
  --saffron-bright:rgb(255, 160, 0);
  --saffron-pale:  rgb(255, 240, 200);
  --white:         rgb(255, 255, 255);
  --text-dark:     rgb(15, 40, 20);
  --border-green:  rgb(20, 110, 50);
  --border-saffron:rgb(230, 130, 0);
  --shadow:        rgba(10, 80, 30, 0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(135deg,
    rgb(10,70,25) 0%, rgb(15,90,35) 30%,
    rgb(25,105,45) 60%, rgb(10,75,28) 100%);
  background-attachment: fixed;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* TOP BANNER */
#top-banner {
  background: linear-gradient(90deg, rgb(200,100,0), rgb(255,165,0), rgb(200,100,0));
  border-bottom: 5px solid var(--green-dark);
  padding: 12px 24px;
  text-align: center;
}
#top-banner p {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* HEADER */
header {
  background: linear-gradient(180deg, rgb(8,60,20) 0%, rgb(15,85,35) 100%);
  border-bottom: 6px solid var(--saffron-bright);
  padding: 36px 20px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
header::before { content:"⚖"; position:absolute; left:30px; top:50%; transform:translateY(-50%); font-size:5rem; opacity:0.12; color:var(--saffron-bright); }
header::after  { content:"⚖"; position:absolute; right:30px;top:50%; transform:translateY(-50%); font-size:5rem; opacity:0.12; color:var(--saffron-bright); }
header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--saffron-bright);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  line-height: 1.3;
}
header .subtitle {
  margin-top: 10px;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--green-pale);
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
}

/* PRINT BUTTON */
#print-btn {
  display: block;
  margin: 16px auto 0;
  background: linear-gradient(135deg, var(--saffron-dark), var(--saffron-bright));
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Libre Baskerville', serif;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: all 0.25s;
}
#print-btn:hover {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  border-color: var(--saffron-bright);
  transform: translateY(-2px);
}

/* TABLE OF CONTENTS */
#toc {
  background: linear-gradient(135deg, rgb(255,240,195), rgb(255,252,230));
  border: 4px solid var(--border-saffron);
  border-radius: 14px;
  max-width: 1100px;
  margin: 28px auto 16px;
  padding: 24px 28px;
  box-shadow: 0 8px 30px var(--shadow);
}
#toc h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--green-dark);
  border-bottom: 3px solid var(--border-saffron);
  padding-bottom: 10px;
  margin-bottom: 16px;
  font-weight: 900;
}
#toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 9px;
}
.toc-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, rgb(15,90,40), rgb(25,120,55));
  color: var(--white);
  border: 2px solid var(--border-saffron);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Libre Baskerville', serif;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.3px;
  transition: all 0.22s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.toc-btn:hover {
  background: linear-gradient(135deg, var(--saffron-dark), var(--saffron-bright));
  border-color: var(--green-dark);
  transform: translateY(-2px);
}
.toc-btn .num { color: var(--saffron-bright); margin-right: 6px; }
.toc-btn:hover .num { color: var(--white); }

/* MAIN CONTAINER */
.main-container { max-width: 1100px; margin: 0 auto; padding: 0 14px; }

/* SECTION CARDS */
.section-card {
  background: linear-gradient(160deg, rgb(252,248,230), rgb(255,252,240));
  border: 3px solid var(--border-green);
  border-left: 8px solid var(--border-saffron);
  border-radius: 14px;
  margin: 22px 0;
  padding: 26px 28px;
  box-shadow: 0 6px 24px var(--shadow);
  scroll-margin-top: 20px;
  position: relative;
}
.section-card::before {
  content:"";
  position:absolute; top:0; right:0;
  width:70px; height:70px;
  background:linear-gradient(225deg,rgba(255,160,0,0.12),transparent);
  border-radius: 0 14px 0 70px;
}
.section-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  font-weight: 900;
  color: var(--green-dark);
  border-bottom: 3px solid var(--border-saffron);
  padding-bottom: 9px;
  margin-bottom: 16px;
}
.section-card h3 {
  font-family: 'Source Serif 4', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--saffron-dark);
  margin: 16px 0 9px;
  padding-left: 12px;
  border-left: 4px solid var(--border-saffron);
}
.section-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-mid);
  margin: 10px 0 5px;
}
.section-card p {
  font-size: 0.93rem;
  line-height: 1.9;
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: 8px;
}

/* BULLET LISTS */
.bullet-list { list-style:none; padding:0; margin:8px 0 12px; }
.bullet-list li {
  position: relative;
  padding: 7px 10px 7px 32px;
  margin-bottom: 5px;
  background: linear-gradient(90deg, rgba(34,150,70,0.07), transparent);
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.65;
  border-left: 3px solid var(--green-light);
}
.bullet-list li::before {
  content:"▶";
  position:absolute; left:9px;
  color:var(--saffron-dark);
  font-size:0.65rem;
  top:50%; transform:translateY(-50%);
}
.bullet-list li strong { color: var(--green-dark); }
.sub-bullet { list-style:none; margin:7px 0 3px 16px; }
.sub-bullet li {
  position:relative;
  padding:5px 8px 5px 24px;
  margin-bottom:3px;
  font-size:0.87rem;
  font-weight:700;
  color:var(--text-dark);
  line-height:1.55;
}
.sub-bullet li::before {
  content:"◆";
  position:absolute; left:6px;
  color:var(--saffron-mid);
  font-size:0.5rem;
  top:50%; transform:translateY(-50%);
}

/* TABLES */
.table-wrapper { overflow-x:auto; margin:14px 0; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,0.15); }
table { width:100%; border-collapse:collapse; font-size:0.88rem; font-weight:700; min-width:460px; }
thead tr { background:linear-gradient(90deg, rgb(10,75,30), rgb(20,100,45)); color:var(--saffron-bright); }
thead th { padding:12px 14px; text-align:left; border:1px solid var(--green-mid); letter-spacing:0.4px; }
tbody tr:nth-child(odd)  { background: rgb(240,255,245); }
tbody tr:nth-child(even) { background: rgb(255,248,225); }
tbody tr:hover { background: rgb(220,245,230); }
tbody td { padding:10px 14px; border:1px solid rgb(180,210,185); vertical-align:top; line-height:1.6; }

/* HIGHLIGHT BOX */
.highlight-box {
  background: linear-gradient(135deg, rgb(10,70,28), rgb(20,100,45));
  border: 3px solid var(--saffron-bright);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 14px 0;
  color: var(--white);
}
.highlight-box p, .highlight-box li { color:var(--white) !important; font-size:0.9rem; }
.highlight-box strong { color:var(--saffron-bright) !important; }

/* CASE BOX */
.case-box {
  background: var(--saffron-pale);
  border: 2px solid var(--saffron-mid);
  border-radius: 8px;
  padding: 11px 16px;
  margin: 9px 0;
}
.case-box .case-name { font-weight:700; color:var(--green-dark); font-size:0.93rem; }
.case-box .case-detail { color:var(--text-dark); font-size:0.86rem; margin-top:4px; font-weight:700; }

/* DIAGRAM SECTIONS */
.diagram-section {
  border-radius: 14px;
  padding: 28px;
  margin: 24px 0;
  scroll-margin-top: 20px;
}
.diagram-section.green-bg {
  background: linear-gradient(160deg, rgb(8,55,20), rgb(15,80,35));
  border: 4px solid var(--saffron-bright);
}
.diagram-section.saffron-bg {
  background: linear-gradient(160deg, rgb(175,80,0), rgb(215,115,0));
  border: 4px solid var(--green-light);
}
.diagram-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--saffron-bright);
  text-align: center;
  margin-bottom: 20px;
}
.diagram-section.saffron-bg h2 { color: var(--white); }
.diagram-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  max-width: 100%;
}

/* DISCLAIMER */
#disclaimer {
  background: linear-gradient(90deg, rgb(180,80,0), rgb(230,125,0), rgb(180,80,0));
  border: 3px solid var(--white);
  border-radius: 10px;
  max-width: 1100px;
  margin: 16px auto;
  padding: 14px 22px;
  text-align: center;
  scroll-margin-top: 20px;
}
#disclaimer p { color:var(--white); font-size:0.9rem; font-weight:700; }
#disclaimer strong { color:rgb(255,220,120); font-size:1rem; }

/* FOOTER */
footer {
  background: rgb(8,55,20);
  border-top: 4px solid var(--saffron-bright);
  padding: 16px;
  text-align: center;
  color: var(--saffron-pale);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-top: 24px;
}

/* PRINT */
@media print {
  body { background: white !important; color: black !important; }
  header { background: rgb(10,80,30) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #top-banner, #print-btn, #toc { display:none !important; }
  .section-card { background:white !important; border:2px solid #333 !important; page-break-inside:avoid; box-shadow:none !important; }
  thead tr { background:rgb(10,80,30) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .diagram-section { page-break-before:always; }
  canvas { max-width:100% !important; }
}

@media (max-width:600px) {
  .section-card { padding:16px 12px; }
  #toc { padding:16px 12px; }
  #toc-grid { grid-template-columns:1fr; }
}