/* =====================================================================
   Elite Engines – 2025-09 Refactored CSS
   Notes:
   - Preserves existing class names to avoid HTML changes.
   - Reduces !important usage; keeps it only where specificity battles exist.
   - Normalizes colors, spacing, and typography with CSS variables.
   - Improves accessibility: focus-visible, contrast, prefers-reduced-motion.
   - DRY: merges duplicate selectors, consolidates component styles.
   ===================================================================== */

/* =====================================================================
   Design Tokens
   ===================================================================== */
:root {
  /* Brand */
  --color-primary: #006699;
  --color-primary-50: rgba(0, 102, 153, 0.05);
  --color-primary-100: rgba(0, 102, 153, 0.10);
  --color-primary-150: rgba(0, 102, 153, 0.15);
  --color-primary-200: rgba(0, 102, 153, 0.20);

  /* Neutrals */
  --black: #000000;
  --white: #ffffff;
  --gray-100: #f7f7f7;
  --gray-200: #eeeeee;
  --gray-300: #e5e5e5;
  --gray-700: #444444;
  --gray-800: #2c2c2c;
  --gray-900: #222222;

  /* Feedback */
  --focus: #1c7ed6; /* accessible blue focus outline */

  /* Typography scale */
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.5rem;

  /* Layout */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.18);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.2);

  /* Component-specific */
  --nav-padding-y: 0.35rem;
  --nav-padding-x: 0.75rem;
}

/* Dark mode hook (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --gray-100: #232323;
    --gray-200: #1e1e1e;
    --gray-300: #1a1a1a;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Base
   ===================================================================== */

html { scroll-behavior: smooth; }
body { padding-top: 4rem; } /* Fix nav overlap */

/* Typography */
.ltext,
.text-lightweight {
  font-weight: 300;
  line-height: 1.5;
}

.text-large,
.list-large,
.blockquote {
  font-size: var(--fs-lg);
}

.list-large { line-height: 1.8; }

.display-4 {
  font-size: var(--fs-5xl);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Focus visibility */
:where(a, button, [role="button"], .btn, .nav-link, .dropdown-item):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Utilities */
.text-center-mobile { text-align: center; }
.no-underline { border-bottom: 0.5px solid var(--white); }
.map-embed {
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: var(--radius-sm);
}

.table-padded td,
.table-padded th {
  padding-block: 1rem;
}

.privacy-top { padding-top: 4rem; }

/* Background helpers */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-dark-grey {
    background-color: #e5e5e5;
}
.bg-darker-grey { background-color: rgb(54 54 54) !important; } /* explicit request */
.dark-card { background-color: var(--gray-900); color: var(--white); border: none; }

/* Images & Icons */
.icon-sm { inline-size: 50px; block-size: 50px; }
.image-hover:hover { outline: 3px solid var(--white); }
.elite-engines-logo { max-width: 100%; height: auto; }
.guarantee-icon { max-height: 120px; }

/* =====================================================================
   Buttons
   ===================================================================== */

.btn-primary {
  color: var(--white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--color-primary);
  background-color: var(--white);
  border-color: var(--color-primary);
}

.btn-secondary {
  color: var(--color-primary);
  background-color: var(--white);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-facebook {
  background: #3B5998;
  color: var(--white);
  border: 1px solid #263961;
}

.btn-facebook:hover { background: #263961; }

.badge.rounded-pill { text-decoration: none; }
.badge.rounded-pill:hover { background-color: #0077aa; color: #fff; }

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

/* Call icon circle */
.icon-circle {
  inline-size: 32px;
  block-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--white);
  font-size: 1rem;
}

/* Base nav link */
.navbar .nav-link {
  font-weight: 400;
  color: inherit;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover */
.navbar .nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

/* Active */
.navbar .nav-link.active {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-100);
  font-weight: 600;
}

/* Dropdown active highlight */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--color-primary);
  color: var(--white);
}

/* =====================================================================
   Jumbotron / Hero
   ===================================================================== */

.jumbotron { padding-block: 2rem; }

/* Hero contacts */
.hero-contact a[href^="tel"],
.hero-contact a[href^="mailto"] {
  text-decoration: none;
}
.hero-contact a[href^="mailto"] { color: var(--white); }
.hero-contact a[href^="mailto"]:hover,
.hero-contact a[href^="mailto"]:focus,
.hero-contact a[href^="mailto"]:active,
.hero-contact a[href^="mailto"]:visited {
  color: var(--white);
  text-decoration: none;
}

/* =====================================================================
   Engines & Tables
   ===================================================================== */

/* Force hover color on table-hover rows */
.table.table-hover > tbody > tr:not(.table-secondary):hover > * {
  background-color: rgba(2, 133, 198, 0.172);
}

/* Visual flash util for programmatic scroll targets */
.scroll-highlight { animation: fadeHighlight 5s ease-in-out; }
@keyframes fadeHighlight {
  from { background-color: var(--color-primary-200); }
  to   { background-color: transparent; }
}

/* Engine selection cards */
.engine-card {
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: var(--radius-md);
  background: var(--white);
}

/* Temporary debug outline */
.scroll-outline {
  outline: 3px solid red;
  outline-offset: -2px;
  transition: outline 0.3s ease-in-out;
}

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

.carousel-indicators { position: static !important; margin-top: 2rem; }

.carousel-indicators [data-bs-target] {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background-color: #999 !important;
  opacity: 1 !important;
}
.carousel-indicators .active { background-color: var(--color-primary) !important; }

/* Reset inner layout constraints to default */
.carousel-inner {
  min-height: auto;
  display: block;
  align-items: unset;
  justify-content: unset;
}

/* Testimonial slide */
.testimonial-slide {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.testimonial-slide .card {
  inline-size: 100%;
  max-inline-size: 700px;
}
.blockquote-footer { margin-bottom: 3rem; }

/* =====================================================================
   FAQ (Accordion)
   ===================================================================== */

.accordion-button {
  transition: background-color 0.2s ease;
  box-shadow: none;
  outline: none;
}
.accordion-button:focus { box-shadow: none; outline: none; }

/* Active/open state */
.accordion-button:not(.collapsed) {
  background-color: var(--color-primary);
  color: var(--white);
  box-shadow: none;
}

/* Override the Bootstrap caret for contrast */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* FAQ links */
.accordion-body a {
  color: var(--color-primary);
  text-decoration: none;
}
.accordion-body a:hover { text-decoration: underline; }

/* =====================================================================
   Alerts
   ===================================================================== */
.alert-primary { background-color: var(--color-primary); color: var(--white); }

/* =====================================================================
   Footer
   ===================================================================== */
.footer-section {
  background-color: var(--black);
  color: var(--white);
  padding-block: 3rem;
}
.footer-bottom {
  background-color: var(--gray-900);
  color: var(--white);
  padding-block: 1rem;
  font-size: 0.9rem;
}
.footer-bottom a { color: var(--white); text-decoration: underline; }
.footer-logo { inline-size: 150px; margin-bottom: 1rem; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 576px) {
  /* Hero / Jumbotron */
  .jumbotron { padding: 1rem 1.5rem 2rem; padding-top: 1rem !important; }
  .jumbotron h1,
  .jumbotron .display-4 { font-size: 1.8rem; }
  .jumbotron img { max-width: 200px !important; }

  /* Icons & headings */
  .display-4,
  .fs-1,
  .display-4.bi,
  .jumbotron i { font-size: 2.4rem !important; }

  .service-icon { font-size: 2.4rem !important; }

  /* Logo */
  .elite-engines-logo {
    max-width: 200px !important;
    height: auto !important;
    margin-block: 1rem !important;
  }
  .guarantee-icon { max-height: 100px !important; }

  /* Contact icons */
  .hero-contact img { width: 48px; height: 48px; }
  .hero-contact i { font-size: 3rem !important; }

  /* Footer buttons */
  .footer-section .btn { margin-top: 0.5rem; font-size: 1rem; }

  /* Legacy home logo */
  .home-logo-mobile { width: 180px; height: 200px; }

  /* Service highlights */
  .service-highlight p,
  .service-highlight h5 {
    padding-inline: 1rem;
  }
  .service-highlight .px-2 {
    padding-inline: 1.25rem !important;
  }
  .service-highlight .text-center { text-align: center; }
  .service-highlight .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .service-highlight .row { row-gap: 1rem; }
}

/* Footer Facebook */
.footer-section .btn-outline-light.text-white { border-color: #ffffff; color: #fff; }
.footer-section .btn-outline-light.text-white:hover,
.footer-section .btn-outline-light.text-white:focus { background-color: #fff; color: #222!important; }
.footer-section .btn-outline-light.text-white:hover i,
.footer-section .btn-outline-light.text-white:focus i { color: #3b5998; }