/* Trinity North — site styles
   Colours follow the Trinity North design system (black + gold).
   Light theme by default; dark theme follows the visitor's system setting. */

:root {
  --bg: #fbfaf7;
  --band: #ffffff;
  --hair: #ebe8e1;
  --surface: #ffffff;
  --panel: #fbfaf7;
  --border: #ebe8e1;
  --border-strong: #d6d3cb;
  --text: #141416;
  --strong: #2c2c32;
  --body: #4a4a52;
  --dim: #6b6b73;
  --accent-text: #8a6a12;
  --eyebrow: #7a5d0f;
  --pill-bg: #fbf5e3;
  --pill-border: #e6d9ad;
  --input-bg: #ffffff;
  --tile-bg: #141416;
  --tile-border: #141416;
  --cta-border: #0b0b0c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --band: #0e0e10;
    --hair: #1e1e21;
    --surface: #141416;
    --panel: #0e0e10;
    --border: #26262a;
    --border-strong: #3a3a3e;
    --text: #f4f4f5;
    --strong: #d4d4d8;
    --body: #a1a1aa;
    --dim: #8a8a90;
    --accent-text: #e4b84b;
    --eyebrow: #e4b84b;
    --pill-bg: transparent;
    --pill-border: #4a3d13;
    --input-bg: #0b0b0c;
    --tile-bg: #0b0b0c;
    --tile-border: #26262a;
    --cta-border: #26262a;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color-scheme: light dark; }
img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--body); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-text); }
.tn-dark a { color: #a1a1aa; }
.tn-dark a:hover { color: #e4b84b; }
.tn-nav a.tn-navlink:hover { color: #f4f4f5; }
.tn-nav a.tn-navlink[aria-current="page"] { color: #e4b84b; }

.tn-btn { transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
.tn-btn:active { transform: translateY(1px); }
.tn-btn:focus-visible, .tn-toggle:focus-visible, .tn-card:focus-visible { outline: 2px solid #e4b84b; outline-offset: 2px; }
.tn-btn[disabled] { opacity: .6; cursor: progress; }
a.tn-gold, .tn-dark a.tn-gold { color: #0b0b0c; }
a.tn-gold:hover, .tn-dark a.tn-gold:hover { background: #e4b84b; color: #0b0b0c; }
a.tn-current, .tn-dark a.tn-current { box-shadow: 0 0 0 2px #e4b84b; }
button.tn-gold:hover { background: #e4b84b; }
a.tn-outline { color: var(--text); }
a.tn-outline:hover { border-color: #c9a227; color: var(--text); }
.tn-dark a.tn-ghost { color: #f4f4f5; }
.tn-dark a.tn-ghost:hover { border-color: #c9a227; color: #f4f4f5; }
a.tn-textlink { color: var(--text); font-weight: 600; }
a.tn-textlink:hover { color: var(--accent-text); }
a.tn-card { color: var(--text); }
a.tn-jump { color: var(--text); }
a.tn-jump:hover { border-color: #c9a227; color: var(--text); }

.tn-card { transition: transform .18s, border-color .18s; }
.tn-card:hover { transform: translateY(-3px); border-color: #c9a227; }

.tn-input { font: inherit; font-size: 15px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; box-sizing: border-box; width: 100%; transition: border-color .15s; }
.tn-input:focus { outline: none; border-color: #c9a227; }
.tn-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); font-size: 14px; color: var(--text); cursor: pointer; transition: border-color .15s; }
.tn-chip:hover { border-color: #c9a227; }
.tn-chip input, .tn-urg input { accent-color: #c9a227; margin: 0; width: 16px; height: 16px; flex: none; }
.tn-urg { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); cursor: pointer; transition: border-color .15s; }
.tn-urg:hover { border-color: #c9a227; }
.tn-urg input { margin-top: 3px; }

.tn-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.tn-form-error { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid #b4232a; background: rgba(180, 35, 42, .08); color: var(--text); font-size: 14px; line-height: 1.5; }

.tn-toggle { display: none; }
@media (max-width: 760px) {
  .tn-links { display: none !important; }
  .tn-toggle { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tn-card, .tn-btn { transition: none; }
  .tn-card:hover { transform: none; }
}