/* =========================================================
   BALLITO DOLPHINS RUGBY CLUB THEME - Logo Blue/Pink
   Fixes mobile navigation and white-on-white headings
   ========================================================= */

/* -------------------------
   ROOT BRAND VARIABLES
-------------------------- */
:root {
  --brand: #009fe3;        /* Logo blue */
  --brand-dark: #007bb8;   /* Darker logo blue */
  --accent: #e6007e;       /* Pink */
  --accent-light: #ff4da6; /* Light pink */
  --yellow: #fde047;       /* Highlight */

  --ink: #0f172a;
  --ink-light: #222;
  --bg: #ffffff;
  --muted: #64748b;
  --ring: rgba(0,159,227,.25);

  /* Keep compatibility variables */
  --brand-primary: #009fe3; /* SAME AS LOGO BLUE */
  --brand-accent: #e6007e;  /* Pink */
  --brand-white: #ffffff;
  --brand-gold: #FFD700;    /* Gold (hamburger only) */
  --brand-grey: #F5F5F5;
  --bg-muted: #F5F5F5;
  --border: #E5E7EB;
}

/* -------------------------
   GLOBAL LAYOUT + SAFE DEFAULT TEXT
   (Prevents white text leaking onto white areas)
-------------------------- */
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

/* Default headings are ALWAYS dark unless inside a dark bar */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink) !important;
}

/* Default text helpers */
.text-muted { color: var(--muted) !important; }

/* Make sure typical content containers stay readable */
.container, .content, .card, .panel, .box, .table, .row, .col, .col-12 {
  color: var(--ink);
}

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

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

/* -------------------------
   NAVBAR (LOGO BLUE) - Desktop & Mobile
-------------------------- */
.navbar {
  background: var(--brand) !important; /* Logo blue instead of navy */
}

/* White text ONLY inside navbar */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6 {
  color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--accent) !important; /* Pink hover instead of gold */
}

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

.navbar-toggler:hover { border-color: var(--yellow) !important; }

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem var(--ring) !important;
}

/* Restore default Bootstrap hamburger icon stripes and set color to black */
.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='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* -------------------------
   MOBILE NAVIGATION SIDEBAR (OFFCANVAS)
-------------------------- */
.offcanvas {
  background: var(--brand) !important; /* Logo blue */
  color: #fff !important;
}

.offcanvas-header {
  background: var(--brand) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.offcanvas-title {
  color: #fff !important;
}

.offcanvas-body {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Mobile sidebar navigation links */
.offcanvas .nav-link,
.offcanvas .navbar-nav .nav-link,
.offcanvas .list-group-item,
.offcanvas a {
  color: #fff !important;
  border: none !important;
  background: transparent !important;
}

.offcanvas .nav-link:hover,
.offcanvas .navbar-nav .nav-link:hover,
.offcanvas .list-group-item:hover,
.offcanvas a:hover {
  color: var(--accent) !important; /* Pink hover */
  background: rgba(255,255,255,0.1) !important;
}

.offcanvas .nav-link.active,
.offcanvas .navbar-nav .nav-link.active {
  color: var(--accent) !important; /* Pink for active */
  background: rgba(255,255,255,0.15) !important;
}

/* Close button styling for mobile sidebar */
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Mobile dropdown menus */
.offcanvas .dropdown-menu {
  background: var(--brand-dark) !important; /* Darker logo blue */
  border: none !important;
}

.offcanvas .dropdown-item {
  color: #fff !important;
}

.offcanvas .dropdown-item:hover,
.offcanvas .dropdown-item:focus {
  background: var(--accent) !important; /* Pink background */
  color: #fff !important;
}

/* -------------------------
   FOOTER (LOGO BLUE)
-------------------------- */
.footer {
  width: 100%;
  background: var(--brand); /* LOGO BLUE */
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 100;
  color: #fff;
  padding: 1rem 0;
  /* subtle pink accent */
  border-top: 6px solid var(--accent);
}

/* White text ONLY inside footer */
.footer *,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: #fff !important;
}

.footer a { color: var(--accent) !important; }
.footer a:hover { color: var(--accent-light) !important; }

/* -------------------------
   TITLE / WELCOME BARS (LOGO BLUE)
   IMPORTANT: Background becomes blue, BUT we only force white text
   inside these bars — not globally.
-------------------------- */
.page-title,
.page-title-bar,
.welcome-bar,
.hero-bar,
.app-welcome-bar {
  background: var(--brand) !important; /* Logo blue */
}

/* Force white text ONLY inside those bars */
.page-title *,
.page-title-bar *,
.welcome-bar *,
.hero-bar *,
.app-welcome-bar * {
  color: #fff !important;
}

/* -------------------------
   ANNOUNCEMENT BAR (LOGO BLUE)
-------------------------- */
.club-announce {
  background: var(--brand) !important; /* LOGO BLUE */
  color: #fff !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent); /* Pink accent */
}

.club-announce * { color: #fff !important; }

/* -------------------------
   BUTTONS
-------------------------- */
.club-btn {
  background: var(--brand); /* Logo blue */
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
}

.club-btn:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* Secondary = pink */
.club-btn.secondary {
  background: var(--accent); /* Pink */
  color: #fff;
  border: 1px solid transparent;
}

.club-btn.secondary:hover {
  background: var(--accent-light);
  color: #fff;
}

/* -------------------------
   BADGES
-------------------------- */
.club-badge {
  background: var(--yellow); /* Highlight yellow */
  color: var(--accent); /* Pink text */
  border: 1px solid var(--accent);
  font-weight: 600;
  padding: 0.35rem 0.6rem;
}

/* -------------------------
   LINKS
-------------------------- */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.link, a.link {
  color: var(--accent); /* Pink */
  text-decoration: none;
}

.link:hover, a.link:hover {
  color: var(--yellow); /* Yellow hover */
  text-decoration: underline;
}

/* -------------------------
   FORMS / INPUTS
-------------------------- */
.form-control { border-color: var(--border); }

.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem var(--ring);
}

/* -------------------------
   LOGIN PAGE
-------------------------- */
body.login-page { background-color: var(--bg-muted); }

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

.login-header {
  text-align: center;
}

.login-header .logo {
  width: 150px;
  padding: 20px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  /* Ensure text-based logos are visible */
  font-size: 14px;
  font-weight: bold;
  color: #fff !important;
  text-align: center;
  line-height: 1.3;
  max-height: 120px;
  object-fit: contain;
  /* Handle both image and text logos */
  display: block;
  margin: 0 auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.login-header h2 { color: var(--brand) !important; margin-bottom: 0; }
.login-header p { color: var(--accent) !important; font-size: 15px; }

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

.login-form .forgot { color: var(--accent) !important; font-size: 14px; }
.login-form .forgot:hover { color: var(--accent-light) !important; }

.login-form .btn-signin {
  background: var(--brand-gold);
  color: var(--brand);
  font-weight: 700;
  border: none;
}

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

.login-container .register { font-size: 14px; color: var(--muted) !important; }
.login-container .register a { color: var(--accent) !important; font-weight: 700; }
.login-container .register a:hover { color: var(--accent-light) !important; }

/* -------------------------
   CARDS / PANELS
-------------------------- */
.card, .panel, .box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

hr { border-color: var(--border); }

/* -------------------------
   IMPORTANT: DO NOT OVERRIDE BOOTSTRAP WARNING COLORS
   (No .bg-warning / .alert-warning overrides)
-------------------------- */

/* -------------------------
   Keyboard focus
-------------------------- */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}