/* ==========================================================================
   COMPONENTS.CSS — Colour Utilities, Cards, Buttons, Image Helpers, Dark Mode
   Autohaus Vorndran GmbH — MODX 3.2.0
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BACKGROUND COLOUR UTILITIES  (using CSS vars)
   -------------------------------------------------------------------------- */

.bg-white      { background-color: #ffffff; }
.bg-black      { background-color: #000000; }
.bg-transparent { background-color: transparent; }
.bg-footer     { background-color: var(--footer-background-colour); }
.bg-topbar     { background-color: var(--topbar-background-colour); }

/* Secondary (dark grey nav/hero background) */
.bg-secondary          { background-color: var(--secondary-colour); }
.bg-secondary-600      { background-color: var(--secondary-600-colour); }

/* Primary (light grey) */
.bg-primary            { background-color: var(--primary-colour); }

/* Tailwind-style gray scale needed by source HTML */
.bg-gray-100  { background-color: rgb(242 244 247); }
.bg-gray-200  { background-color: rgb(234 236 240); }
.bg-gray-900  { background-color: rgb(16 24 40); }

/* White with opacity (used in search bar) */
.bg-white\/0  { background-color: rgba(255,255,255,0); }
.bg-opacity-65 { --tw-bg-opacity: 0.65; }


/* --------------------------------------------------------------------------
   2. TEXT COLOUR UTILITIES
   -------------------------------------------------------------------------- */

.text-white          { color: #ffffff; }
.text-black          { color: #000000; }
.text-footer-text    { color: var(--footer-text-colour); }
.text-topbar-text    { color: var(--topbar-text-colour); }
.text-primary        { color: var(--primary-colour); }
.text-secondary      { color: var(--secondary-colour); }
.text-primary-text   { color: var(--primary-text-colour); }
.text-secondary-text { color: var(--secondary-text-colour); }

/* Gray scale text */
.text-gray-200  { color: rgb(234 236 240); }
.text-gray-400  { color: rgb(152 162 179); }
.text-gray-500  { color: rgb(102 112 133); }
.text-gray-600  { color: rgb(71 84 103); }
.text-gray-700  { color: rgb(52 64 84); }
.text-gray-900  { color: rgb(16 24 40); }


/* --------------------------------------------------------------------------
   3. BORDER & SHAPE UTILITIES
   -------------------------------------------------------------------------- */

.border-t      { border-top: 1px solid; }
.border-gray-200 { border-color: rgb(234 236 240); }
.rounded-b-xl  { border-bottom-left-radius: .75rem; border-bottom-right-radius: .75rem; }
.rounded-\[30px\] { border-radius: 30px; }

/* Image rounding driven by CSS var */
.theme-image-rounding { border-radius: var(--image-rounding); }


/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary {
    display:          inline-block;
    padding:          .625rem 1.25rem;
    background-color: var(--secondary-colour);
    color:            #ffffff !important;
    font-family:      var(--body-font);
    font-size:        var(--button-size);
    font-weight:      var(--button-weight);
    text-decoration:  none;
    text-align:       center;
    border-radius:    var(--button-rounding);
    cursor:           pointer;
    transition:       background-color 0.2s ease;
    margin:           .375rem;
}

.btn-primary:hover {
    background-color: var(--secondary-600-colour);
    text-decoration:  none;
}

@media (min-width: 768px) {
    .md\:w-auto { width: auto; }
}

/* AGB button container spacing */
.w-full.mx-auto.flex.flex-wrap.items-center.justify-center {
    margin-top: 2rem !important;
    gap: .75rem;
}


/* --------------------------------------------------------------------------
   5. BRAND CARD GRID  (Fabrikate section — 4 brand images)
   -------------------------------------------------------------------------- */

.brand-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    text-align:     center;
    row-gap:        1.25rem;
}

.brand-card img {
    width:      auto;
    max-width:  100%;
    height:     auto;
    max-height: 100%;
    border-radius: var(--image-rounding);
}

.brand-card-text {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
}

.brand-card-link {
    display:         inline-flex;
    justify-content: center;
    align-items:     center;
    font-weight:     600;
    color:           rgb(16 24 40);
}


/* --------------------------------------------------------------------------
   5. NEWS CARD GRID  (same 4-column grid structure)
   -------------------------------------------------------------------------- */

.news-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    text-align:     center;
    row-gap:        1.25rem;
}

.news-card-body {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
}

.news-card-title {
    font-family: var(--body-font);
    font-weight: var(--display-weight);
    font-size:   1.125rem;
    line-height: 1.75rem;
    color:       rgb(16 24 40);
}

@media (min-width: 1024px) {
    .news-card-title {
        font-size:   1.25rem;
        line-height: 1.875rem;
    }
}

.news-card-excerpt {
    font-size:   1rem;
    line-height: 1.5rem;
    color:       rgb(71 84 103);
}

.news-card-more {
    display:         inline-flex;
    justify-content: center;
    align-items:     center;
    font-weight:     600;
    color:           rgb(16 24 40);
}


/* --------------------------------------------------------------------------
   6. FEATURED VEHICLE CAROUSEL WRAPPER  (app-featured web component)
   -------------------------------------------------------------------------- */

.featured {
    width: 100%;
}


/* --------------------------------------------------------------------------
   7. IMAGE LAZY LOAD  (lazysizes + native loading)
   -------------------------------------------------------------------------- */

img[data-src] { opacity: 0; transition: opacity 0.3s; }
img.lazyloaded { opacity: 1; }


/* --------------------------------------------------------------------------
   8. OBJECT FIT / POSITION HELPERS
   -------------------------------------------------------------------------- */

.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }
.object-center  { object-position: center; }


/* --------------------------------------------------------------------------
   9. TRANSITION / ANIMATION HELPERS  (Alpine.js transitions)
   -------------------------------------------------------------------------- */

.transition { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-transform { transition-property: transform; transition-duration: 0.15s; }
.duration-200 { transition-duration: 0.2s; }
.duration-250 { transition-duration: 0.25s; }
.duration-500 { transition-duration: 0.5s; }
.ease-in      { transition-timing-function: cubic-bezier(.4,0,1,1); }
.ease-out     { transition-timing-function: cubic-bezier(0,0,.2,1); }
.ease-in-out  { transition-timing-function: cubic-bezier(.4,0,.2,1); }
.opacity-0    { opacity: 0; }
.opacity-100  { opacity: 1; }

/* Transform helpers used by Alpine menu */
.transform               { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.origin-top-right        { transform-origin: top right; }
.-translate-x-1\/2       { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)); }
.-translate-y-1\/2       { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)); }
.-translate-y-2          { --tw-translate-y: -.5rem; }
.translate-y-2           { --tw-translate-y: .5rem; }
.-translate-x-5          { --tw-translate-x: -1.25rem; }
.-rotate-135             { --tw-rotate: -135deg; }
.rotate-135              { --tw-rotate: 135deg; }
.opacity-0.-translate-x-5 { transform: translateX(-1.25rem); }


/* --------------------------------------------------------------------------
   10. DARK MODE  (body.dark:bg-secondary toggle, OCS dark mode)
   Dark mode is toggled by adding class="dark" to <body> or a parent element.
   -------------------------------------------------------------------------- */

.dark\:bg-secondary { background-color: var(--secondary-colour); }
.dark .dark\:bg-secondary   { background-color: var(--secondary-colour); }
.dark .dark\:text-gray-200  { color: rgb(234 236 240); }
.dark .dark\:text-white     { color: #ffffff; }
.dark .dark\:border-white   { border-color: #ffffff; }

/* The source site uses Tailwind's is(.dark *) selector pattern.
   In MODX without Tailwind compiler, we approximate with body.dark: */
body.dark .dark\:bg-secondary   { background-color: var(--secondary-colour); }
body.dark .dark\:text-gray-200  { color: rgb(234 236 240); }