/* =========================================================
   Fahrschule Müller — Custom Stylesheet
   ========================================================= */

:root {
  --fs-primary: #0f5b9a;
  --fs-primary-dark: #0b3f6b;
  --fs-primary-light: #3c7fba;
  --fs-accent: #e58a12;
  --fs-accent-light: #f2b84b;
  --fs-bg: #f4f7fb;
  --fs-surface: #ffffff;
  --fs-text: #1b2433;
  --fs-muted: #5f6b7a;
}

/* ---- Typography ---- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--fs-text);
  background: var(--fs-bg);
}

/* ---- Bootstrap overrides ---- */
:root {
  --bs-primary: var(--fs-primary);
  --bs-primary-rgb: 15, 91, 154;
  --bs-link-color: var(--fs-primary);
  --bs-link-hover-color: var(--fs-primary-dark);
}

.btn-primary {
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--fs-primary-dark);
  border-color: var(--fs-primary-dark);
}
.bg-primary { background-color: var(--fs-primary) !important; }
.text-primary { color: var(--fs-primary) !important; }
.border-primary { border-color: var(--fs-primary) !important; }

/* ---- Accent Color ---- */
.bg-accent { background-color: var(--fs-accent) !important; }
.text-accent { color: var(--fs-accent) !important; }

.btn-accent {
  background-color: var(--fs-accent);
  border-color: var(--fs-accent);
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
  background-color: #c87409;
  border-color: #c87409;
  color: #fff;
}

/* ---- Soft backgrounds ---- */
.bg-primary-soft { background-color: rgba(15, 91, 154, .12) !important; }
.bg-accent-soft  { background-color: rgba(229, 138, 18, .14) !important; }
.bg-success-soft { background-color: rgba(25, 135, 84, .1) !important; }
.text-white-75   { color: rgba(255,255,255,.75) !important; }

/* ---- Utility ---- */
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.lead-sm { font-size: 1.05rem; }
.x-small { font-size: .75rem; }
.fs-7 { font-size: .85rem; }
.section-gray { background: #edf3f9; }
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fs-accent);
  margin-bottom: .5rem;
}
.opacity-60 { opacity: .6; }

/* =========================================================
   Navbar
   ========================================================= */
.fs-navbar {
  background: linear-gradient(90deg, var(--fs-primary-dark), var(--fs-primary)) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.15);
}
.fs-navbar .navbar-brand { font-size: 1.25rem; font-weight: 800; }
.brand-accent { color: var(--fs-accent-light); }
.fs-navbar .nav-link {
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: .5rem;
  transition: background .2s;
}
.fs-navbar .nav-link:hover, .fs-navbar .nav-link.active {
  background: rgba(255,255,255,.15);
}

/* =========================================================
   Hero Section
   ========================================================= */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #09182b 0%, var(--fs-primary-dark) 45%, var(--fs-primary) 100%);
  padding: 110px 0 140px;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,143,0,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(60,127,186,.28) 0%, transparent 70%);
  pointer-events: none;
}
.hero-overlay { display: none; }
.hero-content { position: relative; z-index: 2; }
.hero-wave {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  z-index: 2;
  line-height: 0;
}
.hero-wave svg { display: block; width: 100%; height: 80px; }

/* =========================================================
   Stat Cards
   ========================================================= */
.stat-card {
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  background: var(--fs-surface);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--fs-primary);
  line-height: 1;
}
.stat-label { font-size: .82rem; color: #6c757d; margin-top: .3rem; }

/* =========================================================
   Feature Cards
   ========================================================= */
.feature-card {
  background: var(--fs-surface);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: .875rem;
  font-size: 1.15rem;
}

/* =========================================================
   License Cards
   ========================================================= */
.license-card {
  background: var(--fs-surface);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.license-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.license-icon {
  width: 72px; height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fs-primary-dark), var(--fs-primary-light));
  color: #fff;
  font-size: 1.75rem;
}

/* =========================================================
   CTA Section
   ========================================================= */
.cta-section {
  background: linear-gradient(135deg, #0a2f51, var(--fs-primary-dark) 50%, var(--fs-primary));
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
}

/* =========================================================
   Page Header (inner pages)
   ========================================================= */
.page-header {
  background: linear-gradient(135deg, var(--fs-primary-dark), var(--fs-primary));
  padding: 3rem 0 3.5rem;
}
.page-header .breadcrumb-item a { color: rgba(255,255,255,.7); text-decoration: none; }
.page-header .breadcrumb-item a:hover { color: #fff; }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,.55); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* =========================================================
   About Page
   ========================================================= */
.about-img-placeholder {
  width: 100%;
  height: 320px;
  background: linear-gradient(135deg, #dfeaf7, #c4d9ee);
}

.team-card {
  background: var(--fs-surface);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .2s;
}
.team-card:hover { transform: translateY(-4px); }
.team-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(15, 91, 154, .12);
  display: flex; align-items: center; justify-content: center;
}

.value-card {
  background: var(--fs-surface);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* =========================================================
   Info Page
   ========================================================= */
.info-card {
  background: var(--fs-surface);
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-left: 5px solid var(--fs-primary);
  transition: transform .15s, box-shadow .15s;
}
.info-card:hover { transform: translateX(4px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.info-class-badge {
  width: 64px; height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Process Steps */
.process-steps { display: flex; flex-direction: column; gap: 1rem; }
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--fs-surface);
  border-radius: .875rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.process-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--fs-primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}
.process-step-text { padding-top: .4rem; font-weight: 500; }

/* =========================================================
   Contact Page
   ========================================================= */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =========================================================
   Footer
   ========================================================= */
.fs-footer {
  background: #0b1f36;
  padding: 4rem 0 2rem;
  color: #a7b7ca;
}
.fs-footer h5, .fs-footer h6 { color: #edf3fb; }

/* =========================================================
   Admin – Quick Link Cards
   ========================================================= */
.quick-link-card { transition: transform .15s, box-shadow .15s; color: inherit; }
.quick-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* =========================================================
   Accordion overrides
   ========================================================= */
.accordion-button:not(.collapsed) { background: rgba(15,91,154,.08); color: var(--fs-primary); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(15,91,154,.22); }
