/**
 * siam-theme.css — Official Siam University Brand Theme
 *
 * Brand colors sourced from www.siam.edu (official university website):
 *   Maroon  #790000  — Primary brand color (university seal ring)
 *   Gold    #fdb913  — Secondary accent  (siam.edu --s-color-5)
 *   Dark    #222222  — Body text
 *   White   #ffffff  — Backgrounds
 *   Gray    #f5f5f7  — Light section backgrounds
 *
 * Typography: IBM Plex Sans Thai / Prompt / Kanit (as used on siam.edu)
 */

:root {
  /* ── Core brand ─────────────────────────────────────────── */
  --siam-maroon:        #790000;   /* Primary — maroon from seal */
  --siam-maroon-dark:   #5a0000;   /* Hover / pressed state */
  --siam-maroon-light:  #9b0000;   /* Lighter variant */
  --siam-gold:          #fdb913;   /* Accent — official gold */
  --siam-gold-dark:     #d89e0a;   /* Gold hover */
  --siam-gold-text:     #7a4f00;   /* Gold text on light bg */

  /* ── Neutrals ───────────────────────────────────────────── */
  --siam-white:         #ffffff;
  --siam-bg:            #f5f5f7;   /* Section alternate bg */
  --siam-bg-alt:        #fafafa;
  --siam-dark:          #222222;   /* Body text */
  --siam-gray:          #58595b;   /* Secondary text */
  --siam-gray-light:    #939598;   /* Muted text */
  --siam-border:        #d5d5d7;

  /* ── Typography ─────────────────────────────────────────── */
  --font-body:    'Prompt', 'Kanit', 'IBM Plex Sans Thai', system-ui, Arial, sans-serif;
  --font-heading: 'Kanit', 'Prompt', 'IBM Plex Sans Thai', system-ui, Arial, sans-serif;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --container-max: 1140px;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--siam-dark);
  background: var(--siam-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--siam-maroon);
}

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

.navbar a.nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

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

.navbar-brand {
  color: var(--siam-white) !important;
  font-family: var(--font-heading);
  font-weight: 700;
}

.navbar-brand .text-gold,
.navbar-brand .brand-gold {
  color: var(--siam-gold) !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ── Page Headers ─────────────────────────────────────────── */
.su-page-header {
  background: linear-gradient(135deg, var(--siam-maroon), var(--siam-maroon-light)) !important;
  color: var(--siam-white);
  min-height: 180px;
  display: flex;
  align-items: center;
}

.su-page-header h1,
.su-page-header h2 {
  color: var(--siam-white);
}

/* Ensure headings stay readable on maroon gradient page headers used by main pages. */
section[style*="790000"] h1,
section[style*="790000"] h2,
section[style*="790000"] h3,
section[style*="790000"] .display-5,
section[style*="790000"] .display-4,
section[style*="790000"] .lead {
  color: var(--siam-white) !important;
}

/* Bootstrap-like utility used in templates but not defined in base styles. */
.text-white-75 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-siam-primary,
.btn-maroon {
  background-color: var(--siam-maroon) !important;
  color: var(--siam-white) !important;
  border: none;
  font-weight: 600;
}

.btn-siam-primary:hover,
.btn-maroon:hover {
  background-color: var(--siam-maroon-dark) !important;
  color: var(--siam-white) !important;
}

.btn-siam-gold,
.btn-gold {
  background-color: var(--siam-gold) !important;
  color: var(--siam-dark) !important;
  border: none;
  font-weight: 700;
}

.btn-siam-gold:hover,
.btn-gold:hover {
  background-color: var(--siam-gold-dark) !important;
  color: var(--siam-dark) !important;
}

/* Bootstrap btn-warning → gold (since we use warning for gold CTAs) */
.btn-warning {
  background-color: var(--siam-gold) !important;
  border-color: var(--siam-gold) !important;
  color: var(--siam-dark) !important;
  font-weight: 700;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--siam-gold-dark) !important;
  border-color: var(--siam-gold-dark) !important;
  color: var(--siam-dark) !important;
}

/* Bootstrap btn-primary → maroon */
.btn-primary {
  background-color: var(--siam-maroon) !important;
  border-color: var(--siam-maroon) !important;
  color: var(--siam-white) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--siam-maroon-dark) !important;
  border-color: var(--siam-maroon-dark) !important;
}

.btn-outline-primary {
  color: var(--siam-maroon) !important;
  border-color: var(--siam-maroon) !important;
}

.btn-outline-primary:hover {
  background-color: var(--siam-maroon) !important;
  color: var(--siam-white) !important;
}

/* ── Utility classes ──────────────────────────────────────── */
.text-gold,
.text-siam-gold { color: var(--siam-gold) !important; }

.text-maroon,
.text-siam-maroon,
.text-primary { color: var(--siam-maroon) !important; }

.bg-gold,
.bg-siam-gold { background-color: var(--siam-gold) !important; color: var(--siam-dark) !important; }

.bg-maroon,
.bg-siam-maroon,
.bg-primary { background-color: var(--siam-maroon) !important; color: var(--siam-white) !important; }

.bg-siam-bg { background-color: var(--siam-bg) !important; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  border-radius: 0.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(121, 0, 0, 0.12) !important;
}

.border-warning { border-color: var(--siam-gold) !important; }
.border-primary { border-color: var(--siam-maroon) !important; }

/* ── Badges ───────────────────────────────────────────────── */
.badge.bg-warning { background-color: var(--siam-gold) !important; color: var(--siam-dark) !important; }
.badge.bg-primary { background-color: var(--siam-maroon) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: #1a0000 !important;   /* very dark maroon */
  border-top: 4px solid var(--siam-gold);
}

.footer-link:hover { color: var(--siam-gold) !important; }

/* ── Navbar active link ───────────────────────────────────── */
.navbar .nav-link.active {
  color: var(--siam-gold) !important;
  border-bottom: 2px solid var(--siam-gold);
}

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

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar .nav-link { padding: 0.5rem 0.75rem; }
}