/* Additional variables */
:root {
    interpolate-size: allow-keywords;

    /* Font */
    /* First on below is 400 */
    --font-weight-normal: var(--bs-body-font-weight);
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --h1-font-size: calc(1rem + 1.125vw);
    --h2-font-size: calc(1rem + .9vw);
    --h3-font-size: calc(1rem + .6vw);
    --h4-font-size: calc(1rem + .3vw);
    --h5-font-size: 1.125rem;
    --h6-font-size: 1rem;

    /* Colors */
    --portalThemeColor10: #e3e3e3;
    --portalThemeOnColor10: #b70045;

    --color-black: var(--portalThemeColor4);
    --color-white: var(--portalThemeColor7);
    --color-primary: var(--portalThemeColor8);
    --color-primary-hover: var(--portalThemeOnColor10);

    --han-color-brand: var(--color-primary);
    --han-color-brand-hover: var(--color-primary-hover);
    --han-neutral-100: var(--color-white);
    --han-neutral-200: var(--portalThemeColor5);
    --han-neutral-300: var(--portalThemeColor10);
    --han-neutral-400: #919191;
    --han-neutral-500: #757575;
    --han-neutral-600: #454545;
    --han-neutral-700: #282828;
    --han-neutral-800: var(--color-black);

    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary);

    /* Pagination */
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--color-white);
    --bs-pagination-active-color: var(--color-white);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);

    /* Forms */
    --input-padding-size: 0.75rem;

    /* Buttons */
    --btn-padding-size: 1.25rem;

    /* Borders */
    --border-width: 2px;
    --border-color-light: var(--han-neutral-300);
    --border-color-dark: var(--han-neutral-600);

    /* Dropdowns */
    --dropdown-border-radius: 0;
}

/* Base */
*,
::after,
::before {
    box-sizing: border-box;
}

/* Html */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* Body */
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vb;

    &.block-scroll {
        overflow: clip;
    }

    & * {
        font-family: var(--bs-body-font-family);
    }

    p,
    a,
    .btn {
        font-size: var(--bs-body-font-size);
    }
}

/* Head/titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-black);
}

h1,
.h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

h2,
.h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

h3,
.h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

h4,
.h4 {
    font-size: var(--h4-font-size);
}

h5,
.h5 {
    font-size: var(--h5-font-size);
}

h6,
.h6 {
    font-size: var(--h6-font-size);
}

/* Links */
a {
    color: var(--color-primary);

    &:hover {
        color: var(--color-primary-hover);
    }
}

a,
a:not(.btn) {
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 3rem;
    padding: var(--btn-padding-size);
    border: 2px solid var(--color-black);
    border-radius: 0;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.4;
    text-decoration: none;
    -webkit-text-decoration: none;
    outline: 0;
    transition: background-color .1s, border-color .1s, color .1s;

    &:focus {
        outline: 0;
    }

    &.btn-primary {
        background-color: var(--color-primary);
        border-color: var(--color-primary);

        &:active,
        &:hover {
            background-color: var(--color-primary-hover);
            border-color: var(--color-primary-hover);
            text-decoration: underline;
        }
    }
}

.han-button-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: fit-content;

    @media (max-width: 576px) {
        width: auto;
    }

    .btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* Loader */
.loader {
    margin: 0.5rem auto;
    width: 2rem;
    padding: 0.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--han-neutral-500);
    --_m:
        conic-gradient(#0000 10%, var(--han-neutral-600)),
        linear-gradient(var(--han-neutral-600) 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

/* Containers */
.han-container {
    --container-padding: 4rem;
    --container-max-width: 75rem;
    width: min(100% - var(--container-padding), var(--container-max-width));
    margin-left: auto;
    margin-right: auto;
}

main,
#content_form,
#content-container,
body>.container {
    flex-grow: 1;
    padding-bottom: 2rem;
}

.crmEntityFormView {

    .actions,
    .tab-title,
    .section-title.show-bar {
        border: none;
    }
}

/* Tabs */
.tab-title {
    display: none;
}

/* Breadcrumbs */
.han-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.875rem;
    margin: 0;
    padding: 0;
    gap: 0.5rem;

    .han-breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .han-breadcrumb-link {
            color: inherit;
            font: inherit;
            margin: 0 !important;
            text-decoration: none;

            &:hover,
            &:focus,
            &:active {
                color: inherit;
            }

            &:focus-visible {
                outline: 2px solid currentColor;
                outline-offset: 4px;
            }

            &[aria-current="page"] {
                font-weight: 600;
            }
        }
    }
}

.breadcrumb {
    padding: 0.5rem 0;
}

/* Dropdown */
.dropdown-menu {
    --bs-dropdown-border-radius: var(--dropdown-border-radius);
}

/* Pagination */
.view-pagination,
.pagination {
    justify-content: center;
}

.pagination {
    &>.active {

        &>a,
        &>a:focus {
            background-color: var(--bs-pagination-color) !important;
            border-color: var(--bs-pagination-color) !important;
        }

        &>a:hover {
            background-color: var(--bs-pagination-active-bg) !important;
            border-color: var(--bs-pagination-active-bg) !important;
        }
    }
}

/* Table */
.crmEntityFormView {
    .cell {
        padding: 0 0 1.5rem;
    }

    tr {
        td {
            &:first-child {
                padding-right: 0.75rem;
            }

            &:not(:first-child) {
                padding-left: 0.75rem;

                @media (max-width: 576px) {
                    padding-left: 0;
                }
            }

            &:not(:last-child):not(:has(+ .zero-cell)) {
                padding-right: 0.75rem;

                @media (max-width: 576px) {
                    padding-right: 0;
                }
            }

            &.zero-cell {
                padding-left: 0;
            }
        }
    }
}

/* Entity Grid */
.entity-grid {
    a {
        color: var(--color-black);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* Accordion */
.accordion {
    .accordion-item {
        .accordion-header {
            margin-top: 0;

            .accordion-button {
                font-weight: 600;

                &:focus {
                    box-shadow: none;
                    background-color: var(--color-primary-hover);
                    color: var(--color-white);
                }

                &:not(.collapsed) {
                    background-color: var(--color-primary);
                    color: var(--color-white);

                    &::after {
                        filter: brightness(0) invert(1);
                    }
                }
            }
        }
    }
}

/* Modal */
.modal-container-read-more-container {
    .modal-container-read-more-content {
        border: 1px solid var(--border-color-light);
        border-bottom: var(--border-width) solid var(--border-color-dark);
        padding: var(--input-padding-size);
    }

    .modal-container-read-more-link-container {
        margin-bottom: 2rem;
        display: flex;
        justify-content: flex-end;

        .modal-container-read-more-link {
            position: relative;
            display: flex;
            align-items: center;
            color: var(--color-black);
            text-decoration: none;
            border-bottom: 1px solid var(--border-color-light);
            padding: 0.75rem;
            width: 100%;

            &:after {
                flex-shrink: 0;
                width: 1.25rem;
                height: 1.25rem;
                margin-left: auto;
                content: "";
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-size: 1.25rem;
                transition: transform 0.2s ease-in-out;
            }
        }

        .modal-container-read-more-link.expanded {
            &:after {
                transform: rotate(-180deg);
            }
        }
    }
}