/* ==========================================================================
   BASE.CSS — CSS Reset, Custom Properties & Variables
   Autohaus Vorndran GmbH — MODX 3.2.0
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

:root {
    /* --- Fonts --- */
    --display-font:   'Open Sans', ui-sans-serif, system-ui, -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                      Arial, "Noto Sans", sans-serif;
    --body-font:      'Open Sans', ui-sans-serif, system-ui, -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                      Arial, "Noto Sans", sans-serif;
    --body-font-size: 16px;

    /* --- Brand Colours --- */
    --primary-text-colour:   #000000;
    --secondary-text-colour: #ffffff;

    --primary-colour:        #B0B0B0;
    --primary-25-colour:     #FBFBFB;
    --primary-50-colour:     #F6F6F6;
    --primary-100-colour:    #E7E7E7;
    --primary-200-colour:    #E3E3E3;
    --primary-300-colour:    #D1D1D1;
    --primary-400-colour:    #BFBFBF;
    --primary-600-colour:    #8D8D8D;
    --primary-700-colour:    #797979;
    --primary-800-colour:    #636363;
    --primary-900-colour:    #565656;
    --primary-950-colour:    #353535;

    --secondary-colour:      #595959;
    --secondary-25-colour:   #F7F7F7;
    --secondary-50-colour:   #EDEDED;
    --secondary-100-colour:  #CDCDCD;
    --secondary-200-colour:  #C3C3C3;
    --secondary-300-colour:  #9F9F9F;
    --secondary-400-colour:  #797979;
    --secondary-600-colour:  #474747;
    --secondary-700-colour:  #3D3D3D;
    --secondary-800-colour:  #323232;
    --secondary-900-colour:  #2C2C2C;
    --secondary-950-colour:  #1B1B1B;

    /* --- State Colours --- */
    --success-colour: #059669;
    --warning-colour: #d97706;
    --error-colour:   #dc2626;

    /* --- Layout --- */
    --header-height:  5rem;
    --aspect-height:  3;
    --aspect-width:   4;

    /* --- Shape --- */
    --button-rounding: 0.5rem;
    --icon-rounding:   9999px;
    --image-rounding:  0px;

    /* --- Topbar — white background, grey text --- */
    --topbar-background-colour: #ffffff;
    --topbar-text-colour:       var(--secondary-colour);

    /* --- Footer --- */
    --footer-background-colour: #b0b0b0;
    --footer-text-colour:       #000000;

    /* --- Buttons & Typography Weights --- */
    --button-size:      0.75rem;
    --button-weight:    900;
    --display-weight:   600;
    --subtitle-weight:  600;
}


/* --------------------------------------------------------------------------
   2. FONT FACES
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/open-sans/open-sans-400.woff2') format('woff2'),
         url('/assets/fonts/open-sans/open-sans-400.ttf')   format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/open-sans/open-sans-500.woff2') format('woff2'),
         url('/assets/fonts/open-sans/open-sans-500.ttf')   format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/open-sans/open-sans-600.woff2') format('woff2'),
         url('/assets/fonts/open-sans/open-sans-600.ttf')   format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans/open-sans-700.woff2') format('woff2'),
         url('/assets/fonts/open-sans/open-sans-700.ttf')   format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/open-sans/open-sans-800.woff2') format('woff2'),
         url('/assets/fonts/open-sans/open-sans-800.ttf')   format('truetype');
}


/* --------------------------------------------------------------------------
   3. BASE RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid #eaecf0;
}

html {
    font-family:    var(--body-font);
    font-size:      var(--body-font-size);
    line-height:    1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin:      0;
    line-height: inherit;
    color:       rgb(71 85 105);
}

h1, h2, h3, h4, h5, h6 {
    font-size:   inherit;
    font-weight: inherit;
    margin:      0;
}

p, blockquote, dl, dd, figure, hr, pre {
    margin: 0;
}

ol, ul, menu {
    list-style: none;
    margin:     0;
    padding:    0;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display:        block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height:    auto;
}

a {
    color:           inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

[hidden] {
    display: none;
}


/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

.font-body    { font-family: var(--body-font); }
.font-display { font-family: var(--display-font); }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }

.display-weight   { font-weight: var(--display-weight); }
.subtitle-weight  { font-weight: var(--subtitle-weight); }

.title-size-xxs { font-size: 1rem;    line-height: 1.5rem; }
.title-size-xs  { font-size: 1.5rem;  line-height: 2rem; }
.title-size-sm  { font-size: 1.875rem; line-height: 2.375rem; }
.title-size-md  { font-size: 2.25rem; line-height: 2.75rem; }
.title-size-lg  { font-size: 3rem;    line-height: 3.75rem; }
.title-size-xl  { font-size: 3.75rem; line-height: 4.5rem; }
.title-size-2xl { font-size: 4.5rem;  line-height: 5.625rem; }

@media (min-width: 1024px) {
    .lg\:title-size-sm  { font-size: 1.875rem; line-height: 2.375rem; }
    .lg\:title-size-md  { font-size: 2.25rem;  line-height: 2.75rem; }
    .lg\:title-size-lg  { font-size: 3rem;     line-height: 3.75rem; }
    .lg\:title-size-xl  { font-size: 3.75rem;  line-height: 4.5rem; }
}

.text-xs   { font-size: .75rem;   line-height: 1.125rem; }
.text-sm   { font-size: .875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-md   { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.875rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }

@media (min-width: 1024px) {
    .lg\:text-xl { font-size: 1.25rem; line-height: 1.875rem; }
    .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

.text-section p { color: inherit; margin-bottom: 1.5rem; }
.text-section p:last-child  { margin-bottom: 0; }
.text-section p strong      { color: inherit; font-weight: 700; }
.text-section a             { text-decoration-line: underline; }
.text-section ul li         { list-style-type: disc; }
.text-section ol li         { list-style-type: decimal; }
.text-section ul li,
.text-section ol li         { margin-left: 1.5rem; padding: .25rem 0; }
.text-section h1,
.text-section h2,
.text-section h3,
.text-section h4,
.text-section h5,
.text-section h6            { color: rgb(16 24 40); }

.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}


/* --------------------------------------------------------------------------
   5. ICON SIZING UTILITIES
   -------------------------------------------------------------------------- */

.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.mr-2 { margin-right: 0.5rem; }


/* --------------------------------------------------------------------------
   6. TOPBAR & COLOR UTILITIES
   -------------------------------------------------------------------------- */

.bg-topbar        { background-color: var(--topbar-background-colour); }
.text-topbar-text { color: var(--topbar-text-colour); }
.bg-topbar a:hover { opacity: 0.7; }