/* ==========================================================
   Kentucky Truck Tuning Header
========================================================== */

:root {
  --ktt-header-red: #d71920;
  --ktt-header-black: #111;
  --ktt-header-white: #fff;
  --ktt-header-border: rgba(17, 17, 17, 0.08);
  --ktt-header-height: 60px;
}

.ktt-site-header,
.ktt-site-header * {
  box-sizing: border-box;
}

.ktt-site-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--ktt-header-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    box-shadow 250ms ease,
    background-color 250ms ease;
}

.ktt-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(100% - 48px), 1180px);
  height: var(--ktt-header-height);
  min-height: var(--ktt-header-height);
  margin-inline: auto;
}


/* ==========================================================
   Logo
========================================================== */

.ktt-header-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 38px;
  margin: 0 34px 0 0;
  padding: 0;
  text-decoration: none;
}

.ktt-header-logo img {
  display: block;
  width: 76px;
  height: auto;
  max-width: none;
}


/* ==========================================================
   Desktop Navigation
========================================================== */

.ktt-primary-navigation {
  flex: 0 0 auto;
  width: auto;
}

.ktt-primary-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ktt-primary-menu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ktt-primary-menu > li:not(.menu-cta) {
  margin-right: 24px;
}

.ktt-primary-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  color: var(--ktt-header-black);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.ktt-primary-menu > li > a {
  color: var(--ktt-header-black);
}

.ktt-primary-menu > li > a:hover,
.ktt-primary-menu > li > a:focus-visible {
  color: #555;
}

.ktt-primary-menu > .current-menu-item > a,
.ktt-primary-menu > .current-menu-parent > a,
.ktt-primary-menu > .current-menu-ancestor > a {
  color: var(--ktt-header-black);
}


/* ==========================================================
   Book a Tune CTA
========================================================== */

.ktt-primary-menu > .menu-cta {
  margin-left: 4px;
}

.ktt-primary-menu > .menu-cta > a {
  min-height: 36px;
  padding: 9px 18px;
  color: var(--ktt-header-white) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: var(--ktt-header-black);
  border-radius: 999px;
}

.ktt-primary-menu > .menu-cta > a:hover,
.ktt-primary-menu > .menu-cta > a:focus-visible,
.ktt-primary-menu > .menu-cta.current-menu-item > a {
  color: var(--ktt-header-white) !important;
  background: #2a2a2a;
  transform: translateY(-1px);
}


/* ==========================================================
   Mobile Controls Hidden on Desktop
========================================================== */

.ktt-menu-toggle,
.ktt-mobile-navigation {
  display: none;
}

@media (min-width: 768px) {
  .ktt-header-inner > .ktt-menu-toggle {
    display: none !important;
  }
}


/* ==========================================================
   Accessibility
========================================================== */

.ktt-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  padding: 10px 14px;
  color: #fff;
  background: #111;
  transform: translateY(-200%);
}

.ktt-skip-link:focus {
  transform: translateY(0);
}

.ktt-site-header a:focus-visible,
.ktt-site-header button:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.35);
  outline-offset: 3px;
}


/* ==========================================================
   Sticky Header — Scrolled State

   IMPORTANT:
   The header and logo intentionally remain the same physical
   size when scrolling. Only the shadow changes. Keeping the
   header geometry fixed prevents the small layout "shiver"
   that can occur when the sticky state is activated.
========================================================== */

.ktt-site-header.is-scrolled {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   Mobile Header
========================================================== */

@media (max-width: 767px) {

  .ktt-header-inner {
    justify-content: space-between;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 6px 18px;
  }


  /* Logo */

  .ktt-header-logo {
    flex: 0 0 108px;
    justify-content: flex-start;
    width: 108px;
    height: 42px;
    margin: 0;
  }

  .ktt-header-logo img {
    width: 108px;
    height: auto;
    max-width: 100%;
  }


  /* Keep mobile size stable while scrolling */

  .ktt-site-header.is-scrolled .ktt-header-inner {
    height: 56px;
    min-height: 56px;
  }

  .ktt-site-header.is-scrolled .ktt-header-logo img {
    width: 108px;
  }


  /* Hide desktop menu */

  .ktt-primary-navigation {
    display: none;
  }


  /* Hamburger */

  .ktt-menu-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    color: var(--ktt-header-black);
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    visibility: visible;
  }

  .ktt-menu-toggle:hover,
  .ktt-menu-toggle:focus,
  .ktt-menu-toggle:active,
  .ktt-menu-toggle[aria-expanded="true"] {
    color: var(--ktt-header-black);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .ktt-menu-toggle span {
    position: absolute;
    left: 50%;
    display: block;
    width: 26px;
    height: 2px;
    margin: 0;
    padding: 0;
    background: var(--ktt-header-black);
    border: 0;
    border-radius: 999px;
    transform-origin: 50% 50% !important;
    transition:
      top 200ms ease,
      transform 200ms ease,
      opacity 160ms ease;
  }


  /* Explicit hamburger line positions */

  .ktt-menu-toggle span:nth-child(1) {
    top: 11px;
    transform: translateX(-50%);
  }

  .ktt-menu-toggle span:nth-child(2) {
    top: 19px;
    transform: translateX(-50%);
  }

  .ktt-menu-toggle span:nth-child(3) {
    top: 27px;
    transform: translateX(-50%);
  }


  /* Hamburger becomes a centered X */

  .ktt-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(45deg);
  }

  .ktt-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  .ktt-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-45deg);
  }

  .ktt-menu-toggle:focus {
    outline: none;
  }

  .ktt-menu-toggle:focus-visible {
    outline: 3px solid rgba(215, 25, 32, 0.35);
    outline-offset: 3px;
  }


  /* Mobile dropdown */

  .ktt-mobile-navigation {
    display: block;
    width: 100%;
    max-height: 0;
    padding: 0 18px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: var(--ktt-header-white);
    border-top: 1px solid transparent;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      max-height 280ms ease,
      padding 280ms ease,
      opacity 180ms ease,
      transform 280ms ease,
      border-color 280ms ease,
      visibility 0s linear 280ms;
  }

  .ktt-mobile-navigation[hidden] {
    display: none;
  }

  .ktt-mobile-navigation.is-open {
    max-height: 500px;
    padding: 0 18px 18px;
    visibility: visible;
    opacity: 1;
    border-top-color: var(--ktt-header-border);
    transform: translateY(0);
    pointer-events: auto;
    transition:
      max-height 280ms ease,
      padding 280ms ease,
      opacity 180ms ease,
      transform 280ms ease,
      border-color 280ms ease,
      visibility 0s linear 0s;
  }

  .ktt-mobile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
  }

  .ktt-mobile-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ktt-mobile-menu li a {
    display: block;
    width: 100%;
    padding: 13px 4px;
    color: var(--ktt-header-black);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    border-bottom: 1px solid var(--ktt-header-border);
  }

  .ktt-mobile-menu li a:hover,
  .ktt-mobile-menu li a:focus-visible {
    color: var(--ktt-header-red);
  }


  /* Mobile Book a Tune CTA */

  .ktt-mobile-menu .menu-cta {
    padding-top: 14px;
  }

  .ktt-mobile-menu .menu-cta a {
    padding: 13px 20px;
    color: var(--ktt-header-white) !important;
    text-align: center;
    background: var(--ktt-header-black);
    border: 0;
    border-radius: 999px;
  }

  .ktt-mobile-menu .menu-cta a:hover,
  .ktt-mobile-menu .menu-cta a:focus-visible {
    color: var(--ktt-header-white) !important;
    background: #2a2a2a;
  }
}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .ktt-mobile-navigation,
  .ktt-menu-toggle span {
    transition: none !important;
  }
}


/* ==========================================================
   Hamburger Button Reset
========================================================== */

.ktt-menu-toggle,
.ktt-menu-toggle:hover,
.ktt-menu-toggle:active,
.ktt-menu-toggle:focus {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Keep an accessible keyboard focus indicator */

.ktt-menu-toggle:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 4px;
}