@font-face {
    font-family: 'Roboto';
    src: url(/assets/fonts/roboto-regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url(/assets/fonts/roboto-bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Custom Colors */
    /* -------------------------------------------------------- */
    --primary-color: #00324a;
    --secondary-color: #4d8bff;
    --border: var(--border-width) solid #A4A4A452;
    --border-hr: calc(1/2 * var(--border-width)) solid #A4A4A452;

    /* Overwrite Core-Colors */
    /* -------------------------------------------------------- */
    --rrsoftware-headline: var(--primary-color);

    /* Custom Background Colors */
    /* -------------------------------------------------------- */
    --primary-background-color: #ffffff;
    --side-content-background-color: #FAFAFA;
    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);

    /* Custom Fonts */
    /* -------------------------------------------------------- */
    --font-family: "Roboto", "sans-serif";
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;

    /* Custom Sizes */
    /* -------------------------------------------------------- */
    --body-width: 1920px;
    --header-width: 90vw;
    --main-content-width: 1200px;
    --side-by-side-breakpoint: 921px;
    --content-padding: 16px;
    --border-width: 2px;
    --grid-columns: 12;
    --grid-collapse-column-size: calc(2* var(--content-padding) + 2rem + var(--border-width));
    /* 2rem = Collapse Button Width */

    /* Icons */
    /* -------------------------------------------------------- */
    --icon-close-side-content-left: "left_panel_close";
    --icon-open-side-content-left: "left_panel_open";
    --icon-close-side-content-right: "right_panel_close";
    --icon-open-side-content-right: "right_panel_open";
}

/* Internal CSS */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

/* General Rules */
/* -------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 16px;
    min-height: 100vh;
}

h1,
h2,
h3 {
    font-weight: 500;
    color: var(--rrsoftware-headline);
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--font-size-h3);
}


/* Layout */
/* -------------------------------------------------------- */
body {
    max-width: var(--body-width);
    margin: auto;
    box-shadow: var(--box-shadow);
}

main {
    text-align: left;
    min-height: calc(100vh - (6em + 2*8px) - (16px + 2*32px) - 5px);
    /* Header Height + Header Padding, Footer Height + Footer Padding, Additional Spacing */
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--primary-background-color);
    box-shadow: var(--box-shadow);
    color: var(--primary-color);
    padding: 8px var(--content-padding);
    height: 6em;
    display: flex;
    justify-content: center;
}

.page-title {
    max-width: var(--header-width);
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    column-gap: 16px;

    .title-image {
        img {
            display: block;
            max-width: 150px;
            max-height: 80px;
            width: auto;
            height: auto;
            place-self: center;
        }

        .rrsoftware-customer-image:has(+ img) {
            display: none;
        }
    }

    .title-container {
        overflow-wrap: break-word;
        hyphens: auto;

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

.main-footer {
    padding: 32px var(--content-padding);
    border-top: var(--border);
}

.page-footer {
    max-width: var(--header-width);
    width: 100%;
    margin: auto;

    ul {
        padding: 0;
        margin: 0;
        display: flex;
        column-gap: 16px;
    }

    li {
        list-style-type: none;
    }

    a,
    a:active,
    a:visited {
        color: var(--secondary-color);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .powered-by-antrago {
        flex-grow: 1;
        text-align: right;
    }
}

/* Layout: Side-by-Side */
/* -------------------------------------------------------- */
main {
    display: grid;
    grid-template-columns: var(--grid-collapse-column-size) repeat(calc(var(--grid-columns) - 2), 1fr) var(--grid-collapse-column-size);
    column-gap: var(--content-padding);
    grid-auto-rows: max-content;

    >* {
        grid-column: auto/span var(--grid-columns);
    }
}

.main-content,
.side-content {
    padding: var(--content-padding);

    .rrsoftware__segment-line {
        margin-left: calc(-1 * var(--content-padding));
        margin-right: calc(-1 * var(--content-padding));
    }
}

.main-content {
    /*90vw max-width and 95% width are used to calc --header-width, if updaded, please also update calculation*/
    max-width: min(var(--main-content-width), 90vw);
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.side-content {
    background-color: var(--side-content-background-color);

    /* Hide Side-Content */
    &:has(.close-side-content-button.active) {
        >*:not(.close-side-content-button-section) {
            display: none;
        }
    }

    >* {
        max-width: min(var(--main-content-width), 90vw);
        margin: auto;
    }
}

.side-content:has(~ .main-content) {
    border-right: var(--border)
}

.main-content~.side-content {
    border-left: var(--border)
}

/* Details Page */
.main-content:has(~ .side-content) .rrsoftware__segment-line {
    margin-right: calc(-2 * var(--content-padding));
}

.details-page {
    .side-content:has(~ .main-content) {
        border-right: unset;
    }
}

.rrsoftware__course-details__title {
    margin-top: 16px;
}

/* List Page */
.side-content~.main-content .rrsoftware__segment-line {
    margin-left: calc(-2 * var(--content-padding));
}


/* @media (min-width: var(--side-by-side-breakpoint)) { */
@media (min-width: 921px) {
    :root {
        /* Because header is not in grid, need to calc grid space, should be refactored in next design */
        --calc-base-width: min(100vw, var(--body-width));
        --calc-column-size: calc((var(--calc-base-width) - (2 * var(--grid-collapse-column-size)) - ((var(--grid-columns) - 1) * var(--content-padding))) / (var(--grid-columns) - 2));
        --calc-side-content-size: calc(var(--calc-column-size) * 2 + var(--grid-collapse-column-size) + var(--content-padding) * 2);
        --calc-main-content-space: calc(var(--calc-base-width) - var(--calc-side-content-size) - var(--content-padding));
        /* 90vw and 95% width from .main-content*/
        --calc-main-content-size: min(var(--main-content-width), 90vw, calc(var(--calc-main-content-space) * 0.95));
        --header-width: calc(var(--calc-main-content-size) + var(--calc-side-content-size) + var(--content-padding));
    }

    .main-content:has(~ .side-content),
    .side-content~.main-content {
        grid-column: auto/span 9;
    }

    .side-content {
        grid-column: auto/span 3;
        grid-row: auto / span 2;
    }

    /* Hide Side-Content */
    .side-content:has(.close-side-content-button.active) {
        grid-column: auto/span 1;

        ~.main-content {
            grid-column: auto/span calc(var(--grid-columns) - 2);
        }
    }

    @media (max-width: 1300px) {

        /* Hide Side-Content */
        .side-content:has(.close-side-content-button.active) {
            ~.main-content {
                grid-column: auto/span calc(var(--grid-columns) - 1);
            }
        }
    }
}

/* Change Base-Components */
/* -------------------------------------------------------- */
.antrago-course-image {
    --rrsoftware-image-height: 400px;
}

.rrsoftware__course-details__title .rrsoftware__headline {
    margin-top: 0px;
}

.rrsoftware__segment-line {
    margin: 16px 0;
    border: var(--border-hr);
}

.rrsoftware__course-list {
    margin-top: 11px;
}

.page-content .rrsoftware__pagination {
    --pagination-border: var(--border-hr);
}