/* GlitKraft logo — steering-wheel mark + wordmark.
   Single colour via currentColor so it swaps white<->dark exactly like the
   original template logo (white over the hero, dark on the solid header). */

.gk-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  line-height: 1;
  color: #15171c;                 /* dark: inner header + home header once scrolled */
  white-space: nowrap;
}
.gk-logo:hover { color: #15171c; }

.gk-logo__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: inherit;                 /* strokes/fills follow the logo colour */
}

.gk-logo__text {
  font-family: "Figtree", "Outfit", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: inherit;
}

/* Home page: transparent header over the hero -> white logo.
   Once .header-lower gets .is-fixed (scrolled), this stops matching and the
   dark default above takes over — same trigger the template uses. */
.main-header.style-white .header-lower:not(.is-fixed) .gk-logo { color: #ffffff; }
.main-header.style-white .header-lower:not(.is-fixed) .gk-logo:hover { color: #ffffff; }

/* Footer sits on a dark background -> white logo. */
.footer .gk-logo,
footer .gk-logo { color: #ffffff; }

.gk-logo--white { color: #ffffff; }

/* Login / register modals are on white cards -> keep the dark logo (default). */

/* -------------------------------------------------------------------------
   Homepage car grids (HomeCars / list-car-grid-4)
   The base .box-car-list is `display:block; overflow:hidden`, and only the
   inventory grid overrides the card to a column layout. Without that, the
   image fills the card and the title / specs / price get clipped. Mirror the
   inventory card layout here so the content shows, and keep it responsive.
   ------------------------------------------------------------------------- */
.list-car-grid-4 .box-car-list.style-2 {
  display: flex;
  flex-direction: column;
}
.list-car-grid-4 .box-car-list.style-2 .image-group {
  width: 100% !important;
}
.list-car-grid-4 .box-car-list.style-2 .img-style {
  height: 200px;
}
.list-car-grid-4 .box-car-list.style-2 .img-style a {
  display: block;
  height: 100%;
}
.list-car-grid-4 .box-car-list.style-2 .img-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

@media (max-width: 1200px) { .list-car-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .list-car-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .list-car-grid-4 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Translucent "glassy" buttons, targeted by href.
   - "Go to Listing" (hero) always sits over the hero image -> always glassy.
   - "Sell Us Your Car" is in the header: glassy over the transparent hero
     header, but SOLID once the header turns white (scrolled home / inner
     pages) so it doesn't disappear white-on-white.
   ------------------------------------------------------------------------- */

/* Hero "Go to Listing" — always glassy */
.chat-wrap a.sc-button[href="listing-grid.html"] {
  background: #FFFFFF1A !important;
  color: #FFFFFF !important;
}
.chat-wrap a.sc-button[href="listing-grid.html"] span { color: #FFFFFF !important; }
.chat-wrap a.sc-button[href="listing-grid.html"]:hover { background: #FFFFFF33 !important; }

/* "Sell Us Your Car" — solid dark by default (visible on any white header) */
a.sc-button[href="sell-your-car.html"] {
  background: #15171c !important;
  color: #FFFFFF !important;
}
a.sc-button[href="sell-your-car.html"] span { color: #FFFFFF !important; }
a.sc-button[href="sell-your-car.html"]:hover { background: #000000 !important; }

/* ...but glassy while the home header is still transparent over the hero */
.main-header.style5 .header-lower:not(.is-small) a.sc-button[href="sell-your-car.html"] {
  background: #FFFFFF1A !important;
}
.main-header.style5 .header-lower:not(.is-small) a.sc-button[href="sell-your-car.html"]:hover {
  background: #FFFFFF33 !important;
}

/* -------------------------------------------------------------------------
   Black hamburger (mobile menu toggle) + black homepage search button.
   ------------------------------------------------------------------------- */
/* Hamburger: the three lines are drawn as the span + ::before / ::after */
.mobile-button span,
.mobile-button::before,
.mobile-button::after {
  background-color: #15171c !important;
}

/* Homepage search widget "Search" button (All category / New / Used tabs) */
.button-search .sc-button {
  background: #15171c !important;
}
.button-search .sc-button:hover {
  background: #000000 !important;
}
.button-search .sc-button i,
.button-search .sc-button span {
  color: #ffffff !important;
}

/* "Trusted Local Car Dealership" section — after removing the left 972K visual
   the remaining pitch spans full width, so centre it. */
.section-reputable .col-lg-12 { text-align: center; }
.section-reputable .col-lg-12 .heading-section,
.section-reputable .col-lg-12 .content-reputable { margin-left: auto; margin-right: auto; }
.section-reputable .col-lg-12 .btn-wrap { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Light title bars: `.flat-title.bg-3` uses a light background (#F5F7FE), so
   the template's white heading/breadcrumb text is invisible. Force it dark on
   these pages (Inventory, Blog, Blog detail, Sell, etc.).
   ------------------------------------------------------------------------- */
.flat-title.bg-3 .heading.text-white { color: #15171c !important; }
.flat-title.bg-3 .breadcrumbs .text-white,
.flat-title.bg-3 .breadcrumbs a.text-white { color: #555 !important; }

/* -------------------------------------------------------------------------
   Car detail page layout: two columns on desktop (content + dealer sidebar),
   stacked to one column on tablet/mobile so the main content isn't crushed
   down to a sliver (which made the description wrap one word per line).
   ------------------------------------------------------------------------- */
.gk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 991px) {
  .gk-detail-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* -------------------------------------------------------------------------
   Car detail — dealer sidebar on mobile.
   The template turns .dealer-sidebar into an off-canvas drawer at <=991px
   (position:fixed; right:-350px) that only opens via a toggle button we don't
   use — so the price / WhatsApp / dealer-info panel was stuck off-screen and
   users couldn't reach the "Message dealer on WhatsApp" button. Force it back
   to a normal stacked block so it flows below the car details.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .gk-detail-grid .dealer-sidebar {
    position: static !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
    margin-top: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   Meet the Founders page — alternating photo / text rows, responsive.
   ------------------------------------------------------------------------- */
.gk-founder-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
.gk-founder-row.reverse .gk-founder-img { order: 2; }
.gk-founder-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}
@media (max-width: 767px) {
  .gk-founder-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .gk-founder-row.reverse .gk-founder-img { order: 0; }
  .gk-founder-img img { aspect-ratio: 4 / 3; }
}