/* =============================================================================
   Biofortified Maize Impact Analysis - Custom Styles
   Semilla Nueva Brand Colors
   ============================================================================= */

/* Brand Colors
   Measured contrast against white, for the ones that carry text or state:
     --sn-red        4.94:1   --sn-red-dark  6.44:1
     --sn-gray       4.83:1   --sn-brown    11.47:1
     --sn-green      3.39:1   (non-text: 5px callout border, needs 3:1)
   Anything below those figures fails at the size it is used, so change a value
   here only together with a re-measurement. */
:root {
  --sn-red: #C44441;
  --sn-red-dark: #A63937;
  --sn-red-light: #E57373;
  --sn-brown: #54311A;
  --sn-cream: #F5F5F0;
  --sn-gray: #6B7280;
  --sn-gold: #DA9441;
  --sn-gold-light: #FDF8F0;
  /* Callout-tip accent. Was #10B981, which is 2.54:1 against white and misses
     the 3:1 required of a non-text indicator. */
  --sn-green: #0E9F6E;
}

/* Links */
a {
  color: var(--sn-red);
}

a:hover {
  color: var(--sn-red-dark);
}

/* =============================================================================
   FOCUS INDICATOR
   Bootstrap replaces the browser outline on .nav-link with a 25%-alpha blue
   box-shadow. Composited, that is 1.10:1 over the navbar red and 1.36:1 over
   white — not a visible indicator. Every other control on the site keeps the
   browser outline and is left alone; only these two families are overridden.
   ============================================================================= */
.navbar .nav-link:focus-visible,
#TOC .nav-link:focus-visible {
  box-shadow: none;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

/* White on the red navbar: 4.94:1 against the bar it sits on. */
.navbar .nav-link:focus-visible {
  outline-color: #ffffff;
}

/* Dark brand red on the white TOC column: 6.44:1. */
#TOC .nav-link:focus-visible {
  outline-color: var(--sn-red-dark);
}

/* =============================================================================
   CITATIONS AND BIBLIOGRAPHY
   In-text citations sit inside a paragraph and Quarto strips their underline,
   leaving hue as the only thing that separates them from the surrounding text
   — 2.32:1, below the 3:1 that non-colour-dependent distinction requires.
   Restoring the same plain underline the prose links already carry is enough.
   ============================================================================= */
a[role="doc-biblioref"] {
  text-decoration: underline;
}

/* Bibliography entry links. The theme paints the whole appendix at 90% opacity
   (`#quarto-appendix.default section > :not(a)`), so the brand red arrives on
   screen as #ca5754 = 4.19:1 rather than its nominal 4.94:1. The darker brand
   red survives that dimming at 5.27:1. Overriding the opacity instead would
   need to outrank an id+class+2-element selector and would restyle the whole
   appendix to fix two links. */
.csl-entry a,
#refs a {
  color: var(--sn-red-dark);
}

/* =============================================================================
   LEFT SIDEBAR (Main navigation menu)
   ============================================================================= */

/* All sidebar items: gray and normal weight */
.sidebar-item-text {
  font-weight: 400;
  color: var(--sn-gray);
}

/* Sidebar section titles: brown but normal weight */
.sidebar-section > .sidebar-item > .sidebar-item-text {
  color: var(--sn-brown);
  font-weight: 400;
}

/* Active/selected item: red and medium weight */
.sidebar-item-text.active {
  color: var(--sn-red) !important;
  font-weight: 500 !important;
}

/* =============================================================================
   RIGHT TOC (Page navigation - "On this page")
   ============================================================================= */

/* Right TOC - active indicator */
#TOC .nav-link.active {
  border-left-color: var(--sn-red) !important;
  color: var(--sn-red) !important;
}

/* Right TOC - hover state */
#TOC .nav-link:hover {
  color: var(--sn-red) !important;
}

/* =============================================================================
   NAVBAR TOOLS (Reader-mode toggle)
   The reader-mode control is a <button> (post-render accessibility fix), so it
   needs the browser's default button chrome removed to match the sibling
   icon links in the navbar.
   ============================================================================= */

button.quarto-reader-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
}

button.quarto-reader-toggle:hover {
  color: inherit;
  opacity: 0.8;
}

/* =============================================================================
   CODE AND TABLES
   ============================================================================= */

/* Code blocks */
pre.sourceCode {
  border-left: 3px solid var(--sn-red);
  background-color: var(--sn-cream);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

thead {
  background-color: var(--sn-red);
  color: white;
}

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
}

td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

tbody tr:hover {
  background-color: var(--sn-cream);
}

/* =============================================================================
   CALLOUTS AND BOXES
   ============================================================================= */



/* Callout important - red/attention style */
.callout-important {
  border-left-color: var(--sn-red) !important;
}

/* Callout tip - green/success style */
.callout-tip {
  border-left-color: var(--sn-green) !important;
}

/* Callout warning - brown/caution style */
.callout-warning {
  border-left-color: var(--sn-brown) !important;
}

/* Figure captions */
figcaption {
  font-style: italic;
  color: var(--sn-gray);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Visible table captions and blockquotes inherit cosmo's secondary colour,
   which composites to #6d7a86 = 4.39:1 on white. --sn-gray is 4.83:1 and is
   already what figure captions use, so the three now agree. */
caption,
.table > caption,
blockquote > p {
  color: var(--sn-gray);
}

/* Footer */
.page-footer {
  background-color: var(--sn-cream);
  border-top: 1px solid #e5e7eb;
}

/* =============================================================================
   SKIP LINK
   Injected as the first element in <body> by _includes/skip-link-*.html, so it
   is the first thing a Tab press reaches. Off-screen until focused; the long
   page has 39 chrome stops in front of the content without it.
   ============================================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.6rem 1.1rem;
  background: var(--sn-red-dark);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  text-decoration: underline;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  color: #ffffff;
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* =============================================================================
   HORIZONTALLY SCROLLING REGIONS
   add_scroll_regions.js gives a container that actually overflows tabindex="0",
   role="region" and a name, so it can be scrolled from the keyboard. The
   outline below is what makes that stop visible; without it the container
   would take focus with nothing to show for it.
   ============================================================================= */
[data-scroll-region]:focus-visible {
  outline: 2px solid var(--sn-red-dark);
  outline-offset: 2px;
}

/* Markdown tables are not wrapped by Quarto the way gt tables are, so a wide
   one widens the whole document instead of scrolling inside it. Wrapping the
   table in ::: {.table-scroll} gives it the same container gt gets, which
   add_scroll_regions.js then makes reachable. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* =============================================================================
   Home page (index.qmd) layout
   Lead paragraph, dimension cards, method note, and module link cards
   ============================================================================= */
.lead-paragraph {
  font-size: 1.18rem;
  line-height: 1.65;
  color: #3a3a3a;
  max-width: 820px;
}
.section-intro {
  max-width: 820px;
  line-height: 1.6;
}
.dimension-grid {
  display: grid;
  /* min() so the track collapses below its 300px preference instead of forcing
     the page wider: at a 320px viewport the column box is ~268px. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin: 32px 0;
}
.dimension-card {
  border: 1px solid #e7e2da;
  border-top: 4px solid var(--sn-red);
  border-radius: 8px;
  padding: 24px 26px;
  background: #ffffff;
}
.dimension-card.economic {
  border-top-color: var(--sn-gold);
}
.dimension-card h3 {
  margin-top: 0;
  font-size: 1.18rem;
}
.method-note {
  background: var(--sn-gold-light);
  border-left: 4px solid var(--sn-gold);
  border-radius: 6px;
  padding: 20px 26px;
  margin: 32px 0;
  max-width: 820px;
  line-height: 1.6;
}
.module-link-card {
  display: block;
  border: 1px solid #e7e2da;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.module-link-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.module-link-card .mod-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--sn-red);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 6px;
}
.module-link-card.econ .mod-tag { background: #E3AE68; color: #54311A; }
.module-link-card.sim .mod-tag { background: var(--sn-brown); }
.module-link-card .mod-title {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--sn-red-dark);
}
.module-link-card .mod-desc {
  display: block;
  font-size: 0.92rem;
  color: #5c5c5c;
  margin-top: 6px;
  line-height: 1.55;
}