/* Sanzo Wada theme.
   Muted pigment swatches on warm paper, flat fills, no shadows.
   Loaded after Bootstrap on every page; only overrides Bootstrap tokens
   and a few rules, the markup is untouched. */

:root {
  --sz-paper:      #EFE6D2;
  --sz-paper-deep: #E4D8BC;
  --sz-surface:    #F8F2E4;
  --sz-ink:        #2D2B35;
  --sz-vermilion:  #B03F27;
  --sz-ochre:      #C2922D;
  --sz-pine:       #3F5A47;
  --sz-indigo:     #3A4668;
  --sz-rose:       #C99A93;
  --sz-line:       #C9BB9A;
  --sz-muted:      #4F473B;

  --bs-body-bg:          var(--sz-paper);
  --bs-body-bg-rgb:      239, 230, 210;
  --bs-body-color:       var(--sz-ink);
  --bs-body-color-rgb:   45, 43, 53;
  --bs-secondary-color:  var(--sz-muted);
  --bs-secondary-bg:     var(--sz-paper-deep);
  --bs-tertiary-bg:      var(--sz-surface);
  --bs-border-color:     var(--sz-line);
  --bs-link-color:       var(--sz-vermilion);
  --bs-link-color-rgb:   176, 63, 39;
  --bs-link-hover-color: var(--sz-ink);
  --bs-border-radius:    0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

html body {
  font-family: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  background: var(--sz-paper);
  color: var(--sz-ink);
}

/* ── Flat and square ── */
.rounded, .modal-box, .badge, .btn, img.rounded, .article-body pre { border-radius: 0 !important; }
.shadow, .shadow-sm { box-shadow: none !important; }

/* ── Surfaces: Bootstrap utility colors are !important, so match that ── */
.bg-white, .bg-light { background-color: var(--sz-surface) !important; }
.text-dark { color: var(--sz-ink) !important; }
.text-secondary, .text-muted { color: var(--sz-muted) !important; }
.text-danger { color: var(--sz-vermilion) !important; }
.border, .border-bottom { border-color: var(--sz-line) !important; }
.link-warning { color: var(--sz-ochre) !important; }
.link-secondary { color: var(--sz-indigo) !important; }

/* ── Navbar and sidebar ── */
.fixed-top { background-color: var(--sz-paper) !important; border-bottom: 4px solid var(--sz-vermilion) !important; }
.sidebar ul { background-color: var(--sz-paper-deep) !important; border-right: 2px solid var(--sz-ink); }

/* ── Loading screen and modals ── */
body .loading { background: var(--sz-paper); }
body .modal-overlay { background: rgba(45, 43, 53, 0.55); }
body .modal-overlay .modal-box { background: var(--sz-surface); border: 2px solid var(--sz-ink); max-width: 1100px; width: 94%; margin: 4% auto; }
body .modal-close { color: var(--sz-muted); }
body .modal-close:hover { color: var(--sz-vermilion); }
body .article-body pre { background: var(--sz-paper-deep); }

/* ── Rows ── */
body .project-row:hover, body .cert-row:hover, body .news-row:hover { background-color: var(--sz-paper-deep); }
.border.rounded, ol.border { border: 2px solid var(--sz-ink) !important; background: var(--sz-surface); }

/* ── Buttons: dark = ink, outline = ink outline with vermilion hover ── */
.btn-dark {
  --bs-btn-bg: var(--sz-ink);
  --bs-btn-border-color: var(--sz-ink);
  --bs-btn-color: var(--sz-paper);
  --bs-btn-hover-bg: var(--sz-vermilion);
  --bs-btn-hover-border-color: var(--sz-vermilion);
  --bs-btn-hover-color: var(--sz-paper);
  --bs-btn-active-bg: var(--sz-vermilion);
  --bs-btn-active-border-color: var(--sz-vermilion);
}
.btn-outline-secondary {
  --bs-btn-color: var(--sz-ink);
  --bs-btn-border-color: var(--sz-ink);
  --bs-btn-hover-bg: var(--sz-ochre);
  --bs-btn-hover-border-color: var(--sz-ochre);
  --bs-btn-hover-color: var(--sz-ink);
  --bs-btn-active-bg: var(--sz-ochre);
  --bs-btn-active-border-color: var(--sz-ochre);
  --bs-btn-active-color: var(--sz-ink);
}
.btn-link { color: var(--sz-vermilion); }
.btn-link:hover { color: var(--sz-ink); }

/* ── Badges ── */
.badge.bg-secondary { background-color: var(--sz-indigo) !important; }
.badge.bg-light, .badge.bg-white { background-color: var(--sz-paper-deep) !important; color: var(--sz-muted) !important; border-color: var(--sz-line) !important; }

/* Focus: thick, high contrast */
:where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--sz-indigo); outline-offset: 3px; box-shadow: none; }

/* ── Readability for older eyes: bigger type, roomier rows, 44px targets ── */
html { font-size: 106.25%; }                 /* 17px base, everything in rem scales */
body { line-height: 1.7; }
.small, small { font-size: 0.9375rem !important; }
.fs-5 { font-size: 1.35rem !important; }
.fs-4 { font-size: 1.6rem !important; }

/* Tiny inline sizes set by the JS (badges, tags, categories) */
[style*="font-size:.65rem"], [style*="font-size:.7rem"], [style*="font-size:0.7rem"],
[style*="font-size:.75rem"], [style*="font-size:.8rem"] { font-size: 0.875rem !important; }
.badge { font-weight: 600; letter-spacing: 0.02em; padding: 0.35em 0.65em !important; }
.tag-badge.btn { padding: 0.2rem 0.6rem !important; }

/* Rows: more air, taller targets */
.project-row, .cert-row, .news-row { padding-top: 1rem !important; padding-bottom: 1rem !important; gap: 1rem !important; }
.project-row p, .cert-row p, .news-row p { line-height: 1.65; margin-top: 0.4rem !important; }
.project-row .fw-semibold, .cert-row .fw-semibold, .news-row .fw-semibold { font-size: 1.1rem; }
#hero { padding: 2rem 0 !important; }
#hero p { line-height: 1.6; }
.container { max-width: 1400px; }

/* Filter, pagination and tag chips (replace btn btn-sm btn-outline-secondary / btn-dark) */
.sz-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sz-ink);
  background: transparent;
  border: 1.5px solid var(--sz-ink);
  border-radius: 0;
  cursor: pointer;
}
.sz-chip:hover { background: var(--sz-ochre); border-color: var(--sz-ochre); }
.sz-chip.is-active { background: var(--sz-ink); border-color: var(--sz-ink); color: var(--sz-paper); cursor: default; }
.sz-chip--tag { min-height: 0; padding: 0.05rem 0.5rem; font-size: 0.875rem; font-weight: 500; }
.btn-link { text-decoration: underline; }
.sz-link { padding: 0; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--sz-ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sz-link:hover { color: var(--sz-vermilion); }
#tag-filters { gap: 0.5rem !important; }

/* The info button was 20% opacity until hover; keep it fully visible (no hover on touch) */
body .project-row .info-btn { opacity: 1; }

/* Links: always underlined so they don't rely on color alone */
a { text-decoration: underline; text-underline-offset: 3px; }
.sidebar a { display: block; padding: 0.7rem 1rem; font-size: 1.15rem; }
.modal-box { font-size: 1.0625rem; line-height: 1.7; padding: 2rem !important; }
.modal-close { font-size: 1.75rem; padding: 0 0.4rem; }
footer { font-size: 1rem; padding: 1.5rem 0; }

/* Focus: thicker still */
:where(a, button, input, select, summary):focus-visible { outline-width: 4px; }

@media (max-width: 575.98px) {
  html { font-size: 112.5%; }               /* 18px on phones */
  .project-row, .cert-row, .news-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.show ul, .sidebar ul { width: 260px !important; max-width: 85vw; }

/* Mobile: make the info link stand out (solid ink, heavier, boxed) */
@media (max-width: 767.98px) {
  body .project-row .info-btn { opacity: 1; color: var(--sz-ink); font-weight: 700; font-size: 1rem; padding: 0.15rem 0.6rem; border: 2px solid var(--sz-ink); text-decoration: none; }
  body .project-row .info-btn:active { background: var(--sz-ink); color: var(--sz-paper); }
}

/* ── Visitors tables: roomier lines and cells (specificity beats the page's inline styles) ── */
body table { font-size: 1rem; line-height: 1.6; }
body thead th { font-size: 0.875rem; padding: 0.8rem 1rem; line-height: 1.4; }
body tbody td { padding: 0.85rem 1rem; }
body tbody tr { border-bottom: 1px solid var(--sz-line); }
body .bar-track, body .bar-fill { height: 8px; }
body #status-bar { font-size: 0.9375rem; }