/* ===============================
   base.css (shared across books)
   Purpose: layout rhythm + neutral components + utilities
   No brand colors here.
   =============================== */

/* ====== Typography and Heading Spacing ====== */

/* Add space below main title */
.quarto-title-block h1.title {
  margin-bottom: 40px !important;
}

/* Add space above h2 headers and optional underline (neutral) */
.level2 h2.anchored {
  margin-top: 40px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e5e7eb; /* neutral light gray */
}

/* Add space before h3 headers */
h3 {
  margin-top: 30px;
}

/* ====== Figures and Captions ====== */

/* Consistent image sizing on smaller screens */
img {
  max-width: 100%;
  height: auto;
}

/* Quarto figure captions (neutral) */
.figure-caption,
.quarto-figure .caption,
figcaption {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.25;
}

/* ====== Footnotes ====== */

/* Add clear "Footnotes" label above footnotes */
.footnotes::before {
  content: "Footnotes";
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4em;
}

/* Add space above the footnotes section */
.footnotes {
  margin-top: 2em;
  border-top: 1px solid #e5e7eb;
  padding-top: 1em;
}

/* ====== Tables ====== */

/*
  Prefer Quarto/Bootstrap table classes when possible.
  Keep base tables clean and readable without heavy theming.
*/
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th, td {
  border: 1px solid #e5e7eb;
  padding: 0.5em;
  vertical-align: top;
}

th {
  background-color: #f8f8f8;
  text-align: left;
}

/* ====== Utilities ====== */

/* wrapfig utilities to manage text / fig interfaces */
.wrapfig_left_30 {
  float: left;
  margin: 0 20px 10px 10px;
  width: 30%;
}

.wrapfig_right_30 {
  float: right;
  margin: 0 0 10px 20px;
  width: 30%;
}

.wrapfig_left_25 {
  float: left;
  margin: 0 20px 10px 10px;
  width: 25%;
}

.wrapfig_right_25 {
  float: right;
  margin: 0 0 10px 20px;
  width: 25%;
}

/* ====== Responsive Design ====== */

/* Prevent floating elements from breaking layout on mobile */
@media (max-width: 768px) {
  .wrapfig_left_30,
  .wrapfig_right_30,
  .wrapfig_left_25,
  .wrapfig_right_25 {
    float: none !important;
    width: 100% !important;
    margin: 1em 0 !important;
  }
}

@media print {
  img.print-w-25 { width: 25% !important; }
  img.print-w-33 { width: 33% !important; }
  img.print-w-40 { width: 40% !important; }
  img.print-w-50 { width: 50% !important; }
  img.print-w-4in { width: 4in !important; }
}