/*
 * clean.css — Siam University Website Bootstrap overrides
 *
 * Official brand colors (from www.siam.edu):
 *   Maroon  #790000  — Primary
 *   Gold    #fdb913  — Accent
 *
 * See siam-theme.css for full CSS variable definitions.
 */

:root {
  --siam-maroon:      #790000;
  --siam-maroon-dark: #5a0000;
  --siam-gold:        #fdb913;
  --siam-gold-dark:   #d89e0a;
  --siam-dark:        #222222;
  --siam-white:       #ffffff;
  --siam-bg:          #f5f5f7;
  --siam-border:      #d5d5d7;
}

/* ── Global ───────────────────────────────────────────────── */
body {
  background: var(--siam-white);
  font-family: 'Prompt', 'Kanit', Arial, sans-serif;
  color: var(--siam-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', 'Prompt', Arial, sans-serif;
  color: var(--siam-maroon);
}

/* Keep heading contrast readable in dark sections that use .text-white containers */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: inherit !important;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar,
.sidenav {
  background-color: var(--siam-maroon) !important;
  border-bottom: 3px solid var(--siam-gold);
}

.navbar .nav-link,
.navbar-brand,
.footer a {
  color: #ffffff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.footer a:hover,
.footer a:focus {
  color: var(--siam-gold) !important;
  text-decoration: underline;
}

/* ── Utilities ────────────────────────────────────────────── */
.text-gold  { color: var(--siam-gold) !important; }
.bg-gold    { background-color: var(--siam-gold) !important; color: var(--siam-dark) !important; }
.btn-gold   {
  background-color: var(--siam-gold) !important;
  color: var(--siam-dark) !important;
  border: none;
  font-weight: 700;
}
.btn-gold:hover,
.btn-gold:focus {
  background-color: var(--siam-gold-dark) !important;
  color: var(--siam-dark) !important;
}

/* ── Focus accessibility ──────────────────────────────────── */
:focus {
  outline: 2px solid var(--siam-gold);
  outline-offset: 2px;
}

/* ── Skip-to-content ──────────────────────────────────────── */
.visually-hidden-focusable {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  padding: 8px;
  background: var(--siam-maroon);
  color: var(--siam-white);
  text-align: center;
  z-index: 9999;
}

.visually-hidden-focusable:focus {
  top: 0;
}