/* ================================
   CREST / LOGO THEME (BLUE + GOLD)
   ================================ */

/* Navbar hamburger */
.navbar-toggler {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23082B5A' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ================================
   BRAND COLOURS (FROM LOGO)
   ================================ */
:root {
  --brand-primary: #0B3C8A;     /* Royal Blue */
  --brand-dark: #082B5A;        /* Deep Navy */
  --brand-gold: #F2C300;        /* Heraldic Gold */
  --brand-gold-soft: #FFD966;   /* Gold hover */
  --brand-ribbon: #9CC9E8;      /* Light blue ribbons */
  --brand-white: #FFFFFF;
  --brand-grey: #F5F5F5;

  /* Compatibility aliases */
  --brand: var(--brand-primary);
  --accent: var(--brand-gold);
  --accent-light: var(--brand-gold-soft);
  --yellow: var(--brand-gold);

  --ink: #0f172a;
  --ink-light: #334155;
  --bg: #ffffff;
  --muted: #64748b;
  --ring: rgba(11, 60, 138, 0.25);
}

/* ================================
   HEADER BANNER
   ================================ */
.header-banner {
  width: 100%;
  text-align: center;
  background: var(--brand-white);
  line-height: 0;
}

.header-banner img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

/* ================================
   LAYOUT
   ================================ */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

main.container, main {
  flex: 1 0 auto;
}

/* ================================
   FOOTER
   ================================ */
.footer {
  width: 100%;
  background: var(--brand-dark);
  color: var(--brand-white);
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 100;
}

/* ================================
   CLUB / SITE ELEMENTS
   ================================ */
.club-announce {
  background: var(--brand);
  color: var(--brand-white);
}

.club-btn {
  background: var(--brand);
  color: var(--brand-white);
}

.club-btn.secondary {
  background: var(--brand-gold);
  color: var(--brand-dark);
}

.link {
  color: var(--brand-gold);
}

.link:hover {
  color: var(--brand-gold-soft);
}

.club-badge {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border: 1px solid var(--brand-dark);
}

/* ================================
   LOGIN PAGE
   ================================ */
body.login-page {
  background-color: var(--brand-grey);
}

.login-container {
  background: var(--brand-white);
  border-radius: 1rem;
  border: 1px solid #e3e3e3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  width: 350px;
  max-width: 98vw;
  padding: 2rem;
}

.login-header h2 {
  color: var(--brand-primary);
  margin-bottom: 0;
}

.login-header p {
  color: var(--brand-gold);
  font-size: 15px;
}

.login-form .form-label {
  font-weight: bold;
}

.login-form .forgot {
  color: var(--brand-gold);
  font-size: 14px;
}

.login-form .btn-signin {
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-weight: 600;
}

.login-form .btn-signin:hover {
  background: var(--brand-gold-soft);
  color: var(--brand-dark);
}

.login-container .register {
  font-size: 14px;
}

.login-container .register a {
  color: var(--brand-gold);
  font-weight: bold;
}

/* ================================
   FIX: WELCOME / TITLE BAR (BLUE)
   ================================ */

/* Covers Bootstrap + mySport360 common patterns */
.bg-warning,
.alert-warning,
.page-title,
.page-title-bar,
.welcome-bar,
.hero-bar,
.app-welcome-bar {
  background-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
}

/* ================================
   FIX: WELCOME ANNOUNCEMENT BAR
   ================================ */
.club-announce {
  background-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
  font-weight: 600;
}