/* define default colors for KUUBIK */
:root {
    --petrol-color: #207C8A;
    --green-color: #1BA833;
    --amber-color: #FFB205;
    --invert-color: #DF8375; /* invert to petrol */
    --petrol-color-extralight: #D6F1F5;
    --petrol-color-light: #5AC7D8;
    --petrol-color-medium: #2CA7BA;
    --petrol-color-dark: #134A53;
    --green-color-extralight: #D3F8D9;
    --green-color-light: #65E67B;
    --green-color-medium: #24DB42;
    --green-color-dark: #126E21;
    --amber-color-extralight: #FFF7E6;
    --amber-color-light: #FFE099;
    --amber-color-medium: #FFC94D;
    --amber-color-dark: #CC8F00;
    --invert-color-light: #ECB5AC;
    --invert-color-dark: #D35845;
}

/* use KUUBIK typical fonts */
@font-face {
    font-family: MontserratBlack; /* for logo "KUUBIK" */
    src: url(/fonts/Montserrat-Black.ttf);
}

@font-face {
    font-family: MontserratLight; /* for logo part after "KUUBIK" */
    src: url(/fonts/Montserrat-Light.ttf);
}

@font-face {
    font-family: SourceSansPro; /* font for special text like blockquotes */
    src: url(/fonts/SourceSansPro-Regular.ttf);
}

@font-face {
    font-family: SourceSansProLight; /* standard font for all text in the website */
    src: url(/fonts/SourceSansPro-Light.ttf);
}

@font-face {
    font-family: SourceSansProSemiBold; /* font for emphasising like in buttons */
    src: url(/fonts/SourceSansPro-SemiBold.ttf);
}

@font-face {
    font-family: SourceSansProBlack; /* font for headers */
    src: url(/fonts/SourceSansPro-Black.ttf);
}

@font-face {
    font-family: SourceCodePro; /* font for code blocks in documentation */
    src: url(/fonts/SourceCodePro-Regular.ttf);
}

@font-face {
    font-family: segoemdl2assets; /* font for icons to be used in buttons etc */
    src: url(/fonts/SEGMDL2.TTF);
}

/* style standard HTML tags */
html {
  font-size: 18px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    padding-bottom: 30px;
    font-family: SourceSansProLight; /* use standard font in all documents */
}

p {
    font-family: SourceSansProLight;
}

h1 {
    font-family: SourceSansProBlack;
    color: var(--petrol-color);
    text-align: center;
}

h2 {
    font-family: SourceSansProBlack;
    color: var(--petrol-color-medium);
    text-align: center;
}

h3 {
    font-family: SourceSansProBlack;
    color: var(--petrol-color-medium);
    text-align: center;
}

h4 {
    font-family: SourceSansProBlack;
    color: var(--petrol-color-medium);
}

h5 {
    font-family: SourceSansProSemiBold;
    color: var(--petrol-color-medium);
}

h6 {
    font-family: SourceSansProSemiBold;
    color: var(--petrol-color);
}

a {
    color: var(--petrol-color-medium);
}
    a:hover {
        color: var(--amber-color-dark);
    }
footer a {
    text-decoration: none;
    color: var(--petrol-color-light); 
}

code {
    font-family: SourceCodePro;
    color: var(--invert-color-dark);
}

blockquote {
    background: var(--petrol-color-extralight);
    border-left: 4px solid var(--petrol-color);
    padding: 1em;
    margin: 1em 0;
    font-style: italic;
    color: #333;
}

q {
    font-style: italic;
}

pre {
    font-family: SourceCodePro;
}

table.table-bordered {
    border: 1px solid var(--petrol-color-light);
    margin-top: 20px;
}

    table.table-bordered > thead > tr > th {
        background-color: var(--petrol-color-dark);
        color: white;
    }


/* class for the icons displayed with segoe mdl2 assets */
.fonticon {
    font-family: 'segoemdl2assets';
    font-weight: bold;
    margin-right: 0.75em;
}

/* header line with dark color when we do not want to use hX HTML tag */
.header-kuubik {
    font-family: SourceSansPro;
    color: var(--petrol-color-dark);
    font-weight: bold;
}
    .header-kuubik.green {
        color: var(--green-color-dark);
    }
    .header-kuubik.amber {
        color: var(--amber-color-dark);
    }

/* use this to emphasize important text, uses Source Sans Pro instead of Source Sans Pro Light, 
    which makes text looking bolder, to further emphasize this can still be combined with fw-bold */
.bold-kuubik {
    font-family: SourceSansPro;
}

/* standard buttons in kuubik petrol background and white text, hovering in amber */
.btn-kuubik {
    font-family: SourceSansProSemiBold;
    background-color: var(--petrol-color);
    color: white;
}
    .btn-kuubik:hover {
        color: white;
        background-color: var(--amber-color-dark);
    }

/* imitating logo by using MontserratBlack font and a bigger size, this can be used for section headers*/
.logo-kuubik-bold {
    font-family: MontserratBlack;
    color: var(--petrol-color);
    font-size: 32px;
}

    .logo-kuubik-bold.green {
        color: var(--green-color);
    }

    .logo-kuubik-bold.amber {
        color: var(--amber-color);
    }
.logo-kuubik-light {
    font-family: MontserratLight;
    color: var(--petrol-color);
    font-size: 32px;
}

    .logo-kuubik-light.green {
        color: var(--green-color);
    }

    .logo-kuubik-light.amber {
        color: var(--amber-color);
    }

/* adjusted HR tag for displaying HR lines below section headers */
.hr-kuubik {
    border: 3px solid var(--petrol-color);
    margin-top: 0px;
}
    .hr-kuubik.logo {
        width: 120%;
    }
    .hr-kuubik.green {
        border: 3px solid var(--green-color);
    }
    .hr-kuubik.amber {
        border: 3px solid var(--amber-color);
    }

/* use this to display computer code with Source Code Pro font and invert color and a box around */
.codeblock-kuubik {
    color: black;
    padding: 0.5rem;
    border: 1px solid;
    border-color: var(--petrol-color);
    background-color: var(--petrol-color-extralight);
    font-family: SourceCodePro;
    color: var(--invert-color-dark);
    font-size: 16px;
}

/* change ul different icon if wished */
ul.ul-kuubik {
    list-style: none; 
    padding-left: 0.5em;
}
    ul.ul-kuubik li::before {
        font-family: segoemdl2assets;
        content: "\EBD2"; /* cube symbol from Segoe MDL2 assets */
        color: var(--petrol-color);
        margin-right: 0.5em;
    }
    ul.ul-kuubik.green li::before {
        color: var(--green-color);
    }
    ul.ul-kuubik.amber li::before {
        color: var(--amber-color);
    }

/* add color to ol elements */
ol.ol-kuubik li::marker {
    color: var(--petrol-color);
    font-weight: bold; 
}
    ol.ol-kuubik.green li::marker {
        color: var(--green-color);
    }
    ol.ol-kuubik.amber li::marker {
        color: var(--amber-color);
    }

/* progress-bar in KUUBIK colors (base like .progress-bar, .progress-bar-striped, .progress-bar-animated) */
.progress-kuubik {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    background-color: var(--petrol-color);
    background-image: linear-gradient( 45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}
    .progress-kuubik.green {
        background-color: var(--green-color);
    }
    .progress-kuubik.amber {
        background-color: var(--amber-color);
        color: var(--petrol-color-dark);
    }

/* color spinners in KUUBIK colors */
.spinner-border.kuubik {
    color: var(--petrol-color-medium);
}
    .spinner-border.kuubik.green {
        color: var(--green-color);
    }
    .spinner-border.kuubik.amber {
        color: var(--amber-color);
    }

/* background colors of KUUBIK projects */
.bg-danger-light {
    background-color: var(--invert-color-light) !important;
}
.bg-success-light {
    background-color: lightgreen !important;
}
.bg-warning-light {
    background-color: var(--amber-color-light) !important;
}
.bg-petrol {
    background-color: var(--petrol-color-medium) !important;
}
.bg-petrol-light {
    background-color: var(--petrol-color-extralight) !important;
}

/* text colors of KUUBIK projects */
.text-petrol {
    color: var(--petrol-color);
}
.text-petrol-dark {
    color: var(--petrol-color-dark);
}
.text-petrol-medium {
    color: var(--petrol-color-medium);
}
.text-petrol-light {
    color: var(--petrol-color-light);
}
.text-green {
    color: var(--green-color);
}
.text-green-dark {
    color: var(--green-color-dark);
}
.text-green-medium {
    color: var(--green-color-medium);
}
.text-green-light {
    color: var(--green-color-light);
}
.text-amber {
    color: var(--amber-color);
}

.text-amber-dark {
    color: var(--amber-color-dark);
}

.text-amber-medium {
    color: var(--amber-color-medium);
}

.text-amber-light {
    color: var(--amber-color-light);
}


/* style of navigation bar menu items */
.nav-link-kuubik {
    font-family: MontserratBlack !important;
    margin-left: 0.5em !important;
    color: var(--petrol-color-medium) !important;
}
    .nav-link-kuubik:hover {
        color: var(--amber-color) !important;
    }
    .nav-link-kuubik.active {
        color: var(--amber-color-dark) !important;
    }
        .nav-link-kuubik.active:hover {
            color: var(--amber-color) !important;
        }


.dropdown-item {
    font-family: MontserratLight;
}

.dropdown-item.active {
    color: var(--amber-color-dark) !important;
    background-color: transparent !important; /* falls du keinen Hintergrund willst */
}
/* ✅ Desktop: farbiger Hintergrund */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        background-color: var(--petrol-color-extralight);
        border: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar .dropdown-item {
        color: var(--petrol-color-dark);
    } 
        .navbar .dropdown-item:hover {
            background-color: var(--amber-color-medium);
        }
        .navbar .dropdown-item.active:hover {
            background-color: var(--amber-color-medium) !important;
        }
}

/* ✅ Mobile: kein Rahmen, weißer Hintergrund, Einrückung */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        background-color: #fff;
        border: none !important;
        box-shadow: none !important;
        padding-left: 1.5rem; /* Einrückung */
    }

    .navbar .dropdown-item {
        padding-left: 0.5rem; /* zusätzliche Einrückung */
    }
        .navbar .dropdown-item:hover {
            background-color: var(--amber-color-light);
        }
        .navbar .dropdown-item.active:hover {
            background-color: var(--amber-color-medium) !important;
        }
}

/* TODO: continue with styling seeberUIcomponents */