/* ==========================================================================
   ACCH overrides on top of the hub theme.
   Loaded LAST, after style.css and responsive.css.
   Keep this file for things that are ACCH-specific; anything generic belongs
   in style.css so the diff against the original design stays readable.
   ========================================================================== */

:root {
  --acch-brand: #E2183E;
  --acch-dark: #1c1c1c;
  --acch-muted: #8a8a8a;
}

/* --------------------------------------------------------------------------
   Replacements for artwork the design references but never shipped.
   Each rule below mirrors the original selector exactly and only swaps the
   missing file for an inline equivalent, so the layout is untouched.
   -------------------------------------------------------------------------- */

/* was images/line.svg — the little marker in front of a testimonial name */
.each-testi-box h6:after {
  background-image: none;
  background-color: var(--acch-brand);
  border-radius: 50%;
}

/* was images/search.svg — magnifier over a gallery thumbnail on hover */
.gallery-thumbs .dtl-car-slide::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
  background-size: 3rem 3rem;
}

/* Vehicle photos come in portrait and landscape mixed, so every slide gets the
   same box: the main image fits inside it whole, the thumbnails crop to fill. */
.dtl-top-slider .gallery-top .swiper-slide {
  aspect-ratio: 4 / 3;
  background: #f8f8f8;
}

.dtl-top-slider .gallery-top .swiper-slide .fancybox {
  display: block;
  height: 100%;
}

.dtl-top-slider .gallery-top .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dtl-top-slider .gallery-thumbs .swiper-slide {
  aspect-ratio: 4 / 3;
}

.dtl-top-slider .gallery-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* was images/kenteken_plaat/kenteken_plaat.png — Dutch number plate */
.kenteken_np {
  background-image: linear-gradient(
    to right,
    #1c3f94 0,
    #1c3f94 26px,
    #f5c400 26px,
    #f5c400 100%
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  border: 2px solid var(--acch-dark);
  border-radius: 4px;
  padding: 4px 8px 6px 34px;
  font-family: "Sequel100Black45", sans-serif;
  color: var(--acch-dark);
  display: inline-block;
  letter-spacing: 0.1em;
}

/* was images/arw-color.svg — arrow in the mobile widget header */
.widget-mobile h6 span:after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* was images/pakketten-check.svg — checkmark in a service package list */
.servicepakketten li:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2183E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Solid header on pages without a banner.
   The header is fixed everywhere so the menu travels with the page; over a
   banner it is transparent, and the design toggled .inner-header with inline
   jQuery on pages that have none. A body class from the view does the same
   without page-specific script, and reserves the header's height.
   -------------------------------------------------------------------------- */

body.has-inner-header .header-area {
  background-color: #181818;
}

/* The header stays fixed on every page, so pages without a banner reserve its
   height (.header-area is 100px tall) instead of starting underneath it. */
body.has-inner-header main {
  padding-top: 100px;
}

/* --------------------------------------------------------------------------
   Branding
   -------------------------------------------------------------------------- */

.header-logo img {
  max-height: 6rem;
  width: auto;
}

.footer-logo img {
  max-height: 7rem;
  width: auto;
}

/* --------------------------------------------------------------------------
   Form feedback. The design shipped jquery.validationEngine; we validate
   server-side and render Laravel's 422 messages into these instead.
   -------------------------------------------------------------------------- */

.form-styl.is-invalid {
  border-color: var(--acch-brand);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.3rem;
  color: var(--acch-brand);
}

.form-styl.is-invalid ~ .invalid-feedback,
.invalid-feedback.d-block {
  display: block;
}

.form-message {
  margin-top: 2rem;
  font-size: 1.6rem;
}

.form-message.is-success {
  color: #1a7f37;
}

.form-message.is-error {
  color: var(--acch-brand);
}

/* --------------------------------------------------------------------------
   Cookie consent (vendor view, rewritten from Tailwind to plain CSS)
   -------------------------------------------------------------------------- */

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  padding: 1.5rem 0;
  background: rgba(28, 28, 28, 0.96);
  color: #fff;
}

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-consent__message {
  flex: 1 1 30rem;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #fff;
}

.cookie-consent__message a {
  color: #fff;
  text-decoration: underline;
}

.cookie-consent__agree {
  flex: 0 0 auto;
}

/* The mobile contact bar is fixed at the bottom with z-index 9998, so the
   cookie bar has to clear it and outrank it instead of sliding underneath. */
@media (max-width: 767px) {
  .cookie-consent {
    bottom: 45px;
    z-index: 9999;
  }
}

/* --------------------------------------------------------------------------
   Footer legal line
   -------------------------------------------------------------------------- */

.footer-legal p {
  margin: 3rem 0 0;
  font-size: 1.3rem;
  opacity: 0.6;
}

/* Below 767px a fixed 45px contact bar covers the bottom of the page, which
   swallowed the copyright, KVK and VAT line. */
@media (max-width: 767px) {
  .footer-area {
    padding-bottom: 7rem;
  }

  /* The theme drops section padding to 3rem here, which leaves a tile grid
     sitting almost against the block above it. */
  .category-tiles-sec {
    padding-top: 6rem;
  }
}

/* --------------------------------------------------------------------------
   Listing container while an AJAX filter is in flight
   -------------------------------------------------------------------------- */

#motorhomes-container.is-loading {
  opacity: 0.45;
  transition: opacity 0.2s;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.each-product .product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Card thumbnails all share one ratio, so listings and tile blocks line up
   whatever dimensions the images were uploaded at. */
.product-img {
  aspect-ratio: 4 / 3;
}

.product-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-img-placeholder {
  padding: 6rem;
  opacity: 0.15;
  object-fit: contain;
}

/* "Veel gekozen pagina's" is a six-tile grid of mostly square artwork, so it
   gets a taller box than the photo cards. */
.category-tiles-6 .product-img {
  aspect-ratio: 5 / 4;
}

/* Accessory shots are often smaller than the card and sit on a white
   background: fit them inside the box instead of upscaling and cropping. */
.accessory-card .product-img {
  background: #fff;
}

.accessory-card .product-img img {
  object-fit: contain;
  padding: 1.5rem;
}

/* Sold or reserved: keep the card readable but visibly secondary. */
.each-product.is-unavailable .product-img {
  filter: grayscale(1);
  opacity: 0.7;
}

.each-product.is-unavailable .product-pk h6 {
  text-transform: uppercase;
}

.category-tile .product-info,
.news-card .product-info {
  padding: 2rem;
}

/* The diagonal .product-sec::before is decoration: keep it behind the cards
   instead of painting over the news thumbnails. */
.news-sec .common-wrap {
  position: relative;
  z-index: 1;
}

.news-card .news-date {
  color: var(--acch-muted);
  margin-bottom: 1rem;
}

.news-card .news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--acch-muted);
}

/* The theme mirrors every second image/text row with :nth-child(even): those are
   the rows with the image left and the text right. Our rows come from CMS blocks,
   one per section, so nth-child never matches and the mirrored set hangs off a
   class instead. Breakpoints follow responsive.css. */
.each-diensten-list.has-text-right .each-diensten-text {
  padding-left: 0;
  padding-right: 15%;
}

/* The theme clamps the row's paragraph to four lines because there it is a
   teaser with a "lees meer" button. The wysiwyg blocks hold the real copy. */
.each-diensten-text.is-rich p {
  display: block;
  overflow: visible;
  text-overflow: clip;
}

/* The white wedge sits over the photo at top: 0 with height: 100%; on fractional
   layout heights its bottom edge lands a hair short, leaving a 1px strip of
   image below it. One pixel down and it overshoots the bottom instead. */
.each-diensten-img::before {
  top: 1px;
  /* left: 1px; */
}

/* Same seam at the bottom of the opening-hours wedge. */
.contact-time-sec::before {
  height: 13.2%;
  bottom: -1px;
}

.each-diensten-list.has-text-right .each-diensten-img::before {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 48% 100%);
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 48% 100%);
  /* Only these rows put the photo in the left column; one pixel over covers the
     seam on its inner edge. Rows with the photo on the right keep left: 0. */
  left: 1px;
}

.each-diensten-list.has-text-right::before {
  clip-path: polygon(93% 0, 100% 0, 100% 100%, 67% 100%);
  -webkit-clip-path: polygon(93% 0, 100% 0, 100% 100%, 67% 100%);
}

/* Each block brings its own section, so two stacked rows would double the
   padding. Tile grids keep theirs — they need the room above the heading. */
.diensten-list-sec:not(.category-tiles-sec) + .diensten-list-sec:not(.category-tiles-sec) {
  padding-top: 0;
}

/* The theme's banner only ever holds an <h1>; the featured block adds body text
   and a button, which need their own colour and spacing over the photo. */
.featured-banner {
  position: relative;
}

.featured-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 70%);
}

.featured-banner .inner-banner-content {
  position: relative;
}

.featured-banner p {
  color: #fff;
  margin-top: 2rem;
  max-width: 60rem;
}

.featured-banner .common-btn {
  margin-top: 3.5rem;
}

@media (max-width: 1699.98px) {
  .each-diensten-list.has-text-right .each-diensten-text {
    padding-right: 9%;
  }
}

@media (max-width: 1399.98px) {
  .each-diensten-list.has-text-right .each-diensten-text {
    padding-right: 8%;
  }
}

@media (max-width: 767px) {
  .each-diensten-list.has-text-right .each-diensten-text {
    padding: 3rem 4%;
  }

  .featured-banner p {
    max-width: none;
  }
}

/* On a vehicle the spec table separates the price from the buttons; an accessory
   has no specs, so there the button needs that breathing room itself. */
.dtl-top-car-price + .dtl-top-car-btn {
  margin-top: 8%;
}

/* The theme hangs the back button over the share row with position: absolute.
   The accessory page has no share row, so there it stays in flow. */
.dtl-bk-btn-sec-static {
  padding: 4.5rem 0 0;
}

.dtl-bk-btn-sec-static .common-btn {
  position: static;
}

/* Slider and lightbox arrows in the brand red: the theme washed the slider
   arrows out to white (brightness(10)), which disappeared on light photos. */
.common-arrow img,
.dtl-top-slider .common-arrow img {
  filter: none;
  -webkit-filter: none;
}

.carousel__button.is-prev,
.carousel__button.is-next {
  --carousel-button-color: var(--acch-brand);
  --carousel-button-svg-stroke-width: 2.5;
  color: var(--acch-brand);
}

/* prev.svg and next.svg ship without width/height attributes, so an <img>
   without an explicit size falls back to the 300px default. */
.slim_effect_text_link span img {
  width: 1.2rem;
  height: auto;
}

.dtl-top-no-image {
  padding: 8rem;
  background: #f8f8f8;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq-sec .accordion-item {
  border: 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  background: transparent;
}

.faq-sec .accordion-button {
  font-family: "Sequel100Black45", sans-serif;
  font-size: 1.8rem;
  padding: 2.4rem 0;
  background: transparent;
  box-shadow: none;
  color: var(--acch-dark);
}

.faq-sec .accordion-button:not(.collapsed) {
  color: var(--acch-brand);
}

.faq-sec .accordion-body {
  padding: 0 0 2.4rem;
  color: var(--acch-muted);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-hint {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.3rem;
  color: var(--acch-muted);
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.empty-state {
  padding: 6rem 0;
  text-align: center;
  color: var(--acch-muted);
  font-size: 1.8rem;
}