/* Motown Marines - Global Styles */
/* Color system derived from Motown Marines patch: Red, Navy, Gold with accessible contrast */
:root{
  --red-600:#e11d2f; /* red */
  --red-700:#b91c1c;
  --navy-900:#0b1a3a;
  --navy-800:#122a57;
  --gold-500:#f5c21a;
  --gold-600:#d2a411;

  --gray-900:#0f172a;
  --gray-800:#1f2937;
  --gray-700:#374151;
  --gray-600:#4b5563;
  --gray-500:#6b7280;
  --gray-300:#d1d5db;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;
  --white:#ffffff;
  --focus:#2563eb;
  --success:#16a34a;
  --warning:#ca8a04;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--gray-900);
  background:linear-gradient(180deg, #fff, #fafafa);
}

/* Utility */
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:600; border-radius:.75rem; text-decoration:none;
  padding:.8rem 1.1rem; border:2px solid transparent;
}
.btn-primary{ background:var(--red-600); color:var(--white) }
.btn-primary:hover{ background:var(--red-700) }
.btn-outline{ border-color:var(--red-600); color:var(--red-600); background:transparent}
.btn-outline:hover{ background:var(--red-600); color:var(--white) }
.badge{display:inline-block; padding:.25rem .5rem; border-radius:.5rem; background:var(--black); color:var(--white); font-size:.75rem}
.section{padding:4.5rem 0}

/* Header */
header{
  position:sticky; top:0; z-index:40; background:rgba(17,17,17,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
.nav a{ color:#e5e7eb; text-decoration:none; font-weight:600; margin-left:1rem}
.nav a:hover, .nav a:focus{ color:#ffffff; outline:none}
.brand{ display:flex; align-items:center; gap:.75rem}
.brand img{ height:38px; width:auto; border-radius:.25rem}
.brand .title{ color:#fff; font-weight:800; letter-spacing:.3px}
.mobile-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.5rem }

/* Hero */
.hero{
  position:relative; color:#fff; min-height:58vh; display:grid; place-items:center; text-align:center; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; background:url('../img/hero.jpg') center/cover no-repeat;
  filter:brightness(.55);
}
.hero .inner{ position:relative; z-index:1; padding:4rem 1rem }
.hero h1{ font-size:clamp(2rem, 5vw, 3rem); margin:.5rem 0 0 }
.hero p{ font-size:clamp(1rem, 2.2vw, 1.2rem); opacity:.95; max-width:750px; margin:0 auto 1.25rem }
.hero .cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center }

/* Cards / sections */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem }
.card{
  grid-column:span 12; background:#fff; border:1px solid var(--gray-200); border-radius:1rem; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.card .content{ padding:1.25rem 1.25rem 1.5rem }
.card h3{ margin-top:0; margin-bottom:.25rem }

/* Facebook callout */
.fb-callout{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem; background:#0a0a0a; color:#fff }
.fb-callout .left{ display:flex; align-items:center; gap:.75rem }
.fb-callout img{ height:48px; width:48px; border-radius:.5rem; object-fit:cover; background:#fff }

/* Contact & form */
.contact{ background:var(--gray-100) }
.form{ background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:1.25rem }
.form label{ display:block; font-weight:600; margin:.75rem 0 .35rem }
.form input,.form textarea, .form select{
  width:100%; padding:.8rem 1rem; border:1px solid var(--gray-300); border-radius:.65rem; font:inherit;
}
.form input:focus,.form textarea:focus{ outline:3px solid rgba(37,99,235,.25); border-color:var(--focus) }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form .actions{ margin-top:1rem; display:flex; align-items:center; gap:.75rem }
.form .success{ display:none; color:var(--success); font-weight:700 }
.form .error{ display:none; color:#b91c1c; font-weight:700 }

/* Footer */
footer{ background:#0b0b0b; color:#d1d5db; padding:2rem 0; border-top:1px solid rgba(255,255,255,.06) }
.footer-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
footer a{ color:#fff }
small, .legal{ color:#9ca3af }

/* ---------- Responsive layout ---------- */

/* Mobile-first: stack */
.grid { grid-template-columns: 1fr; }
.grid > * { grid-column: 1 / -1; }

/* Tablet+ card split */
@media (min-width: 720px){
  .card{ grid-column:span 6 }
  .footer-grid{ grid-template-columns: 2fr 1fr 1fr }
}

/* Desktop: 8/4 split for main/aside on pages that use these classes */
@media (min-width: 960px){
  .card-main { grid-column: span 8; }
  .card-aside { grid-column: span 4; }
}

/* FB callout tidy on small screens */
@media (max-width: 959px){
  .fb-callout { flex-direction: row; align-items: center; }
  .fb-callout .left { flex: 1 1 auto; min-width: 0; }
  .fb-callout .left div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Mobile navigation (CSS-only) ---------- */

/* Hide the checkbox control offscreen */
.nav-toggle{ position:absolute; left:-9999px; }

/* Base rule: show desktop nav links */
@media (min-width: 901px){
  .mobile-toggle{ display:none; }
  nav.links{ display:block; position:static; background:transparent; padding:0; }
}

/* Mobile dropdown (authoritative) */
@media (max-width: 900px){
  header .nav{ position: relative; }
  .mobile-toggle{ display:block; cursor:pointer; }
  /* Hide links by default on mobile */
  nav.links{ display:none !important; }

  /* Show when the checkbox is checked */
  .nav-toggle:checked ~ nav.links{
    display:block !important;
    position:absolute;
    top:64px; left:0; right:0;
    background: rgba(17,17,17,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index:1000;
    padding:.5rem 0;
  }

  /* Full-width items with centered labels */
  nav.links a{
    display:flex;                 /* ensures easy centering */
    align-items:center;
    justify-content:center;       /* center contents */
    width:100%;
    margin:0;
    padding:.9rem 1rem;
    color:#e5e7eb;
    text-align:center;            /* belt-and-suspenders centering */
    border-top:1px solid rgba(255,255,255,.06);
    transition: background .15s ease;
  }
  nav.links a:first-child{ border-top:0; }

  /* Hover/active highlight (subtle BVFD red tint) */
  nav.links a:hover,
  nav.links a:focus-visible{
    background: rgba(225, 29, 47, 0.12); /* ~12% of var(--red-600) */
    outline:none;
  }
  nav.links a:active{
    background: rgba(225, 29, 47, 0.22);
  }

  /* Donate button still full-width, nicely centered with gutter */
  nav.links a.btn{
    width: calc(100% - 2rem);
    margin: .5rem 1rem;
    justify-content:center;
  }
}


/* === BVFD Mobile nav (CSS-only), centered items + hover highlight === */
.nav-toggle{ position:absolute; left:-9999px; }
@media (min-width:901px){
  .mobile-toggle{ display:none; }
  nav.links{ display:block; position:static; background:transparent; padding:0; }
}
@media (max-width:900px){
  header .nav{ position:relative; }
  .mobile-toggle{ display:block; cursor:pointer; }
  nav.links{ display:none !important; }
  .nav-toggle:checked ~ nav.links{
    display:block !important;
    position:absolute; top:64px; left:0; right:0;
    background:rgba(17,17,17,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index:1000; padding:.5rem 0;
  }
  nav.links a{
    display:flex; align-items:center; justify-content:center; width:100%;
    margin:0; padding:.9rem 1rem; color:#e5e7eb; text-align:center;
    border-top:1px solid rgba(255,255,255,.06); transition:background .15s ease;
  }
  nav.links a:first-child{ border-top:0; }
  nav.links a:hover, nav.links a:focus-visible{ background:rgba(225,29,47,.12); outline:none; }
  nav.links a:active{ background:rgba(225,29,47,.22); }
  nav.links a.btn{ width:calc(100% - 2rem); margin:.5rem 1rem; justify-content:center; }
}



/* Highlight active nav link */
.nav a.active {
  color: var(--white);
  border-bottom: 2px solid var(--red-600);
}

@media (max-width: 900px) {
  nav.links a.active {
    background: rgba(225,29,47,.22);
    border-bottom: none;
  }
}


/* Footer legal links */
.legal-links a{ color:#fff; text-decoration:none; opacity:.85 }
.legal-links a:hover{ text-decoration:underline; opacity:1 }