/*
 * KFZ Unger — Custom Stylesheet
 * Phase 1: Bootstrap 5 overrides and project-specific styles
 * Color reference: PROJECT/colors.md
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  --ku-blue:       #003087;   /* Martini Blue  — primary brand color  */
  --ku-red:        #E8001C;   /* Martini Red   — accent / highlight   */
  --ku-sky:        #72C5E8;   /* Martini Sky Blue — stripe / divider  */
  --ku-dark:       #1A1A1A;   /* Near Black    — body text            */
  --ku-grey:       #4A4A4A;   /* Dark Grey     — secondary text       */
  --ku-border:     #D8D8D8;   /* Light Grey    — borders, dividers    */
  --ku-surface:    #F5F5F5;   /* Off White     — card backgrounds     */
  --ku-footer-bg:  #001A4D;   /* Dark Navy     — footer background    */
}


/* ==========================================================================
   Bootstrap Primary Color Override → Martini Blue
   ========================================================================== */

.btn-primary,
.btn-primary:focus {
  background-color: var(--ku-blue);
  border-color: var(--ku-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #002570;
  border-color: #002570;
  color: #fff;
}

.btn-outline-primary {
  color: var(--ku-blue);
  border-color: var(--ku-blue);
}

.btn-outline-primary:hover {
  background-color: var(--ku-blue);
  border-color: var(--ku-blue);
  color: #fff;
}

.btn-danger {
  background-color: var(--ku-red);
  border-color: var(--ku-red);
}

.text-primary {
  color: var(--ku-blue) !important;
}

.bg-primary {
  background-color: var(--ku-blue) !important;
}

.border-primary {
  border-color: var(--ku-blue) !important;
}


/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
  background-color: var(--ku-blue) !important;
}

.navbar-brand img {
  max-height: 50px;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
  border-bottom-color: var(--ku-red);
}

.navbar .dropdown-menu {
  border-radius: 0;
}

.navbar .dropdown-item:hover {
  background-color: var(--ku-surface);
  color: var(--ku-blue);
}


/* ==========================================================================
   Martini Stripe Divider
   A decorative horizontal stripe referencing the livery.

   Default (.ku-stripe):
     Blue → Red → Sky Blue
     Use on light/white backgrounds — Blue is clearly visible.

   Modifier (.ku-stripe--on-dark):
     Sky Blue → Red → Blue  (mirror of the default via scaleX)
     Use directly after dark backgrounds (e.g. below the navbar, above the footer).
     Sky Blue provides contrast against dark navy; Blue fades into white below.

   Usage:
     <div class="ku-stripe"></div>               ← between content sections
     <div class="ku-stripe ku-stripe--on-dark"></div>  ← directly below navbar
   ========================================================================== */

.ku-stripe {
  height: 6px;
  background: linear-gradient(
    to right,
    var(--ku-blue)  0%,
    var(--ku-blue)  60%,
    var(--ku-red)   60%,
    var(--ku-red)   80%,
    var(--ku-sky)   80%,
    var(--ku-sky)   100%
  );
  width: 100%;
}

.ku-stripe--on-dark {
  background: linear-gradient(
    to right,
    var(--ku-footer-bg)  0%,
    var(--ku-footer-bg)  10%,
    var(--ku-sky)        10%,
    var(--ku-sky)        60%,
    var(--ku-red)        60%,
    var(--ku-red)        80%,
    var(--ku-blue)       80%,
    var(--ku-blue)       100%
  );
}


/* ==========================================================================
   Hero / Carousel
   ========================================================================== */

.carousel-item img {
  object-fit: cover;
  max-height: 520px;
  width: 100%;
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  padding: 1rem 1.5rem;
}


/* ==========================================================================
   Section Headings
   ========================================================================== */

.ku-section-title {
  color: var(--ku-blue);
  font-weight: 700;
  border-left: 5px solid var(--ku-red);
  padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border: 1px solid var(--ku-border);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 48, 135, 0.15);
}

.card .card-title {
  color: var(--ku-blue);
  font-weight: 600;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--ku-footer-bg);
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 1.5rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-heading {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}