/* =========================================================
   YRVB Base Styles
========================================================= */

/* Typography contract */
#page,
#page body,
#page p,
#page li,
#page a,
#page span,
#page div,
#page input,
#page button,
#page textarea,
#page select {
  font-family: var(--yrvb-font-body);
}

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6 {
  font-family: var(--yrvb-font-display);
  letter-spacing: -0.01em;
}

/* Base document */
#page{
  color: var(--yrvb-ink);
  background: var(--yrvb-bg);
  font-size: var(--yrvb-text);
  line-height: var(--yrvb-line);
}

#page *{ box-sizing:border-box; }
#page img{ max-width:100%; height:auto; }

/* Links (exclude buttons) */
#page a:not(.yrvb-btn){
  color: var(--yrvb-blue);
  text-decoration:none;
}
#page a:not(.yrvb-btn):hover{ text-decoration:underline; }

#page a:focus-visible{
  outline:none;
  box-shadow: var(--yrvb-focus);
  border-radius: 6px;
}

/* Container + rhythm */
#page .yrvb-container{
  max-width: var(--yrvb-max);
  margin: 0 auto;
  padding: 0 var(--yrvb-gutter);
}

#page .yrvb-section{ padding: 56px 0; }
#page .yrvb-section--tight{ padding: 36px 0; }

/* Headings */
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6{
  margin: 0 0 12px;
  color: var(--yrvb-ink);
}

#page h1{ font-size: clamp(2.0rem, 1.5rem + 1.5vw, 3.0rem); line-height: 1.1; }
#page h2{ font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1.15; }
#page h3{ font-size: 1.35rem; line-height: 1.2; }
#page h4{ font-size: 1.15rem; line-height: 1.25; }

#page p{ margin: 0 0 14px; color: var(--yrvb-ink); }
#page .yrvb-muted{ color: var(--yrvb-slate); }

/* Forms */
#page input,
#page textarea,
#page select{
  border: 1px solid var(--yrvb-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--yrvb-white);
  color: var(--yrvb-ink);
}

#page input:focus,
#page textarea:focus,
#page select:focus{
  outline:none;
  box-shadow: var(--yrvb-focus);
  border-color: rgba(30,58,138,.35);
}

/* Buttons */
#page button{ font-family: var(--yrvb-font-body); }
#page button:focus-visible{
  outline:none;
  box-shadow: var(--yrvb-focus);
  border-radius: var(--yrvb-btn-radius);
}

/* =========================================================
   GLOBAL CONTRAST SYSTEM
   Use .yrvb-on-dark on containers with dark backgrounds.
   Also: light "surfaces" (cards) ALWAYS reset to dark ink,
   even when placed inside a dark section.
========================================================= */

/* Dark container baseline */
#page .yrvb-on-dark{
  color: rgba(255,255,255,0.92);
}

#page .yrvb-on-dark h1,
#page .yrvb-on-dark h2,
#page .yrvb-on-dark h3,
#page .yrvb-on-dark h4,
#page .yrvb-on-dark h5,
#page .yrvb-on-dark h6{
  color: #fff;
}

#page .yrvb-on-dark p{
  color: rgba(255,255,255,0.86);
}

#page .yrvb-on-dark .yrvb-muted{
  color: rgba(255,255,255,0.72);
}

/* Links on dark should never default to brand-blue */
#page .yrvb-on-dark a:not(.yrvb-btn){
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}
#page .yrvb-on-dark a:not(.yrvb-btn):hover{
  color: var(--yrvb-gold);
  text-decoration: underline;
}

/* ---------- LIGHT SURFACES (GLOBAL RULE) ----------
   Cards are light surfaces. Even inside a dark container,
   they must use dark ink, not white. */
#page .yrvb-card{
  color: var(--yrvb-ink);
}

#page .yrvb-card h1,
#page .yrvb-card h2,
#page .yrvb-card h3,
#page .yrvb-card h4,
#page .yrvb-card h5,
#page .yrvb-card h6{
  color: var(--yrvb-blue-dark);
}

#page .yrvb-card p,
#page .yrvb-card li{
  color: rgba(11,18,32,0.86);
}

#page .yrvb-card .yrvb-muted{
  color: var(--yrvb-slate);
}

#page .yrvb-card a:not(.yrvb-btn){
  color: var(--yrvb-blue);
}
#page .yrvb-card a:not(.yrvb-btn):hover{
  color: var(--yrvb-blue-dark);
  text-decoration: underline;
}

/* Outline buttons inside light cards must never be white-on-white */
#page .yrvb-card .yrvb-btn--outline{
  border-color: rgba(10,35,66,0.35);
  color: var(--yrvb-blue-dark) !important;
  background: transparent;
}
#page .yrvb-card .yrvb-btn--outline:hover{
  background: var(--yrvb-blue-dark);
  color: #fff !important;
  border-color: var(--yrvb-blue-dark);
}