/* GRM minimal theme – colorful but clean */
:root{
  --grm-primary:#ff4d2d;   /* bright red-orange */
  --grm-primary-600:#e04126;
  --grm-secondary:#0ea5a4; /* teal */
  --grm-ink:#0f172a;       /* slate-900 */
  --grm-ink-700:#1f2937;   /* gray-800 */
  --grm-muted:#6b7280;     /* gray-500 */
  --grm-bg:#ffffff;
  --grm-soft:#f8fafc;      /* slate-50 */
  --grm-card:#ffffff;
  --grm-border:#e5e7eb;    /* gray-200 */
}

/* Font */
@supports (font-variation-settings: normal) {
  body { font-family: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji"; }
}

/* Navbar */
.navbar-brand{ font-weight:700; letter-spacing:.3px }
.navbar.bg-dark{ background: linear-gradient(90deg, var(--grm-ink) 0%, #111827 60%, #0b1222 100%) !important; }
.nav-link{ opacity:.9 }
.nav-link:hover{ opacity:1 }

.display-5 {
  color: black;
}

.lead {
  color: black;
}

/* Accent buttons */
.btn-primary{
  --bs-btn-bg: var(--grm-primary);
  --bs-btn-border-color: var(--grm-primary);
  --bs-btn-hover-bg: var(--grm-primary-600);
  --bs-btn-hover-border-color: var(--grm-primary-600);
  --bs-btn-focus-shadow-rgb: 255,77,45;
}
.btn-outline-primary{
  --bs-btn-color: var(--grm-primary);
  --bs-btn-border-color: var(--grm-primary);
  --bs-btn-hover-bg: var(--grm-primary);
  --bs-btn-hover-border-color: var(--grm-primary);
  --bs-btn-hover-color: #fff;
}

/* Cards */
.card{ border:1px solid var(--grm-border); background: var(--grm-card); }
.card-hover{ transition: transform .18s ease, box-shadow .18s ease }
.card-hover:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(16,24,40,.12) }

/* Section helpers */
.section-title{
  font-weight:700; color: var(--grm-ink);
  position:relative; display:inline-block; padding-bottom:.25rem;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:64px;
  background: linear-gradient(90deg, var(--grm-primary), var(--grm-secondary));
  border-radius:2px;
}
.section-soft{ background: linear-gradient(180deg, var(--grm-soft), #fff); border-radius: .75rem; }
.cta{
  background: radial-gradient(100% 120% at 0% 0%, rgba(14,165,164,.08) 0%, rgba(255,77,45,.08) 70%, transparent 100%), #fff;
  border:1px solid var(--grm-border);
}

/* Hero */
.hero{ min-height:60vh; border-radius:.75rem; overflow:hidden }
.carousel .carousel-item img{ object-fit:cover }

/* Badges (if you use any) */
.badge-grm{
  background: linear-gradient(90deg, var(--grm-primary), var(--grm-secondary));
  color:#fff; border:0;
}

/* Footer */
footer{ background: linear-gradient(90deg, #0b1222, #111827) }
footer a{ color:#cbd5e1 }
footer a:hover{ color:#fff }

/* Optional dark-mode polish */
@media (prefers-color-scheme: dark){
  :root{ --grm-bg:#0b1222; --grm-card:#0f172a; --grm-border:#1f2937; --grm-ink:#e5e7eb; }
  body{ background: var(--grm-bg); color: var(--grm-ink) }
  .section-soft{ background: linear-gradient(180deg, #0f172a, #0b1222) }
  .card{ border-color:#1f2937 }
}



/* --- Funky Bike Event Enhancements --- */
:root{
  --grm-bg: #0b0f14;
  --grm-card: #0f141b;
  --grm-ink: #eaf2ff;
  --grm-ink-700: #c9d7ef;
  --grm-primary: #ff3d71;
  --grm-primary-600:#ff5a85;
  --grm-secondary:#00e0b8;
  --grm-accent:#ffb300;
  --grm-soft: #0d1824;
  --grm-border: #1d2734;
  --grm-tread: rgba(255,255,255,.06);
}

.grm-hero-slim{
  position: relative;
  background: linear-gradient(135deg, var(--grm-primary) 0%, var(--grm-secondary) 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--grm-border);
}

.grm-card{ border:1px solid var(--grm-border); border-radius:16px; background:linear-gradient(180deg, #0f141b, #0b1016); }
.grm-tilt{ transition: transform .16s ease, box-shadow .16s ease; }
.grm-tilt:hover{ transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 16px 44px rgba(2,6,23,.35); }

.grm-btn-cta{ display:inline-flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:.3px; padding:.85rem 1.25rem; border-radius:999px; background:linear-gradient(90deg, var(--grm-primary), var(--grm-secondary)); color:#021018; text-decoration:none; box-shadow:0 10px 40px rgba(255,61,113,.25), 0 6px 26px rgba(0,224,184,.22); }
.grm-btn-ghost{ border:1px dashed var(--grm-secondary); color: var(--grm-secondary); padding:.75rem 1.1rem; border-radius: 14px; text-decoration:none; }

.grm-divider{ --dash: 14px; height: 10px; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 var(--dash), transparent var(--dash) calc(var(--dash)*2)); border-radius: 99px; margin: 2.25rem 0; }
.grm-prose{ font-size:1.05rem; line-height:1.75; color: var(--grm-ink-700); }
.grm-prose h2, .grm-prose h3{ color: var(--grm-ink); font-weight:800; margin-top:1.25rem }
.grm-prose a{ color: var(--grm-secondary); text-decoration:underline; }

.grm-club-logo{ width:120px; height:120px; object-fit:contain; filter: drop-shadow(0 6px 16px rgba(2,6,23,.16)); }
.grm-logo-fallback{ width:120px; height:120px; display:grid; place-items:center; border-radius:14px; background: var(--grm-soft); font-weight:800; color:var(--grm-primary-600); font-size:1.5rem; }



/* =================== GRM Light Theme =================== */
:root{
  --grm-bg: #ffffff;
  --grm-card: #ffffff;
  --grm-ink: #0f172a;            /* slate-900 */
  --grm-ink-700: #334155;       /* slate-700 */
  --grm-primary: #e11d48;       /* rose-600 (keeps brand punch) */
  --grm-primary-600:#be123c;    /* rose-700 */
  --grm-secondary:#0ea5a4;      /* teal-600 */
  --grm-accent:#f59e0b;         /* amber-500 */
  --grm-soft: #f8fafc;          /* slate-50 background accents */
  --grm-border: #e5e7eb;        /* gray-200 */
  --grm-tread: rgba(2,6,23,.06);
}

/* Body */
.grm-theme{
  background: var(--grm-bg);
  color: var(--grm-ink);
}

/* Header / nav on light bg */
.navbar, .site-header{
  background: #ffffff;
  border-bottom: 1px solid var(--grm-border);
  backdrop-filter: none;
}

/* Cards */
.grm-card{
  border: 1px solid var(--grm-border);
  background: var(--grm-card);
  box-shadow: 0 4px 18px rgba(2,6,23,.06);
}

/* Heroes: soften gradients for light mode */
.grm-hero,
.grm-hero-slim{
  background:
    radial-gradient(1100px 520px at 0% 0%, rgba(225,29,72,.06), transparent 65%),
    radial-gradient(820px 440px at 100% 0%, rgba(14,165,164,.06), transparent 60%),
    var(--grm-bg);
  border-bottom: 1px solid var(--grm-border);
}
.grm-hero-slim{
  background:
    linear-gradient(180deg, #fff, #fff 40%, rgba(14,165,164,.04) 100%);
}

/* CTAs keep contrast on white */
.grm-btn-cta{
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(225,29,72,.20), 0 5px 18px rgba(14,165,164,.18);
}
.grm-btn-ghost{
  border-color: var(--grm-ink-700);
  color: var(--grm-ink-700);
}

/* Dividers / stickers */
.grm-divider{
  background-image:
    repeating-linear-gradient(90deg, rgba(2,6,23,.10) 0 var(--dash), transparent var(--dash) calc(var(--dash)*2));
}
.grm-sticker{
  background: rgba(14,165,164,.10);
  border-color: rgba(14,165,164,.35);
  color: var(--grm-ink);
}

/* Prose */
.grm-prose{ color: var(--grm-ink-700); }
.grm-prose h1,.grm-prose h2,.grm-prose h3{ color: var(--grm-ink); }

/* Footer */
.site-footer{
  background: #f8fafc;
  color: var(--grm-ink-700);
  border-top: 1px solid var(--grm-border);
}



/* Section backgrounds (subtle, light) */
.bg-soft-a { background: #f9fafb; }  /* cool gray */
.bg-soft-b { background: #f7fbff; }  /* pale blue */
.bg-soft-c { background: #fffaf5; }  /* warm cream */

/* Section titles with a tiny accent underline */
.section-title {
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin: .6rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--grm-primary), var(--grm-accent));
}

/* Utility for object-fit in case Bootstrap build lacks it */
.object-fit-cover { object-fit: cover; }