/* ============================================================
   VerityLoft — LAYER 1: Site-wide base
   Safe on every page. Palette, links, headings, tables, focus,
   print. Nothing here assumes long-form article structure.

   Load this site-wide with no conditional.
   ============================================================ */

:root {
  /* Brand palette */
  --vl-blue:     #1E293B;  /* Deep Space Blue */
  --vl-porcelain:#FAF8F4;  /* Porcelain       */
  --vl-graphite: #333333;  /* Graphite        */
  --vl-gold:     #DDB849;  /* Metallic Gold   */
  --vl-linen:    #E6E2DA;  /* Soft Linen      */

  /* Derived tokens.
     IMPORTANT: --vl-gold is 1.80:1 on Porcelain — it FAILS WCAG for text.
     Use it only for rules, borders, fills and marks on light backgrounds,
     or for text on --vl-blue (7.68:1, passes AA and AAA-large).
     For gold-toned TEXT on light, use --vl-gold-ink (5.69:1, passes AA). */
  --vl-gold-ink:  #7A5F1A;
  --vl-gold-wash: #FBF3DC;
  --vl-rule:      #D8D3C8;
  --vl-muted:     #5C6472;

  --vl-measure: 74ch;
  --vl-serif:  "Charter", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --vl-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Canvas ----------
   Comment this out if your theme already sets a page background you
   prefer. It is the single most visible site-wide change here. */
body { background: var(--vl-porcelain); }

/* ---------- Links inside editor content ----------
   Scoped to .entry-content so site navigation, buttons and hero
   components keep their own theme styling. */
.entry-content a:not(.wp-block-button__link):not(.vl-btn) {
  color: var(--vl-blue);
  text-decoration: none;
  background-image: linear-gradient(var(--vl-gold), var(--vl-gold));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease;
}
.entry-content a:not(.wp-block-button__link):not(.vl-btn):hover,
.entry-content a:not(.wp-block-button__link):not(.vl-btn):focus-visible {
  background-size: 100% 100%;
  color: var(--vl-blue);
}

/* ---------- Focus visibility (accessibility, site-wide) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vl-gold-ink);
  outline-offset: 2px;
}

/* ---------- Headings inside editor content ---------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--vl-sans);
  color: var(--vl-blue);
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- Tables anywhere in content ---------- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vl-sans);
  font-size: .88rem;
  line-height: 1.45;
  background: #fff;
}
.entry-content thead th {
  background: var(--vl-blue);
  color: var(--vl-porcelain);
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
  padding: .6rem .75rem;
  border: 0;
  border-bottom: 2px solid var(--vl-gold);
}
.entry-content tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--vl-rule);
  vertical-align: top;
}
.entry-content tbody tr:nth-child(even) td { background: rgba(230,226,218,.34); }
.entry-content tbody tr:last-child td { border-bottom: 0; }

/* ---------- Blockquotes ---------- */
.entry-content blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.3rem;
  background: var(--vl-gold-wash);
  border-left: 4px solid var(--vl-gold);
  color: var(--vl-graphite);
}

/* ---------- Shared button ---------- */
.vl-btn {
  font-family: var(--vl-sans);
  font-size: .82rem; font-weight: 600;
  padding: .5rem .9rem;
  border: 1px solid var(--vl-blue);
  background: transparent; color: var(--vl-blue);
  border-radius: 3px; cursor: pointer;
  background-image: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.vl-btn:hover { background: var(--vl-blue); color: var(--vl-porcelain); }
.vl-btn[data-state="done"] { background: var(--vl-gold); border-color: var(--vl-gold); color: var(--vl-blue); }

/* ---------- Horizontal rule ---------- */
.entry-content hr {
  border: 0;
  border-top: 1px solid var(--vl-rule);
  margin: 2rem 0;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print (site-wide basics) ---------- */
@media print {
  body { background: #fff; }
  nav, .site-header, .site-footer, .wp-block-navigation { display: none !important; }
  .entry-content a { background-image: none; text-decoration: underline; }
  .entry-content thead th {
    background: #eee !important; color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .entry-content table, .entry-content figure { page-break-inside: avoid; }
  .entry-content h1, .entry-content h2, .entry-content h3 { page-break-after: avoid; }
}