/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    HTML BASE ELEMENTS
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/********************************

Root

********************************/

:root {
    --box-shadow: rgba(0,0,0,0.2) 0 0 1.5em;
    --bs-body-color: #4b4b4b;
    --color-active-grey: #575757;
    --color-focus: #2E85DC;
    --color-grey-darker-rgb: 19, 19, 19;
}

/* We cannot use smooth scrolling in Sitevision as it breaks the scrolling in table of contents */
:root {
  scroll-behavior: auto !important;
}

/********************************

All elements

********************************/

* {
    font-family: WorkSans, sans-serif !important;
}

/********************************

Headers

********************************/


/* Make sure long headers wrap correctly */

h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-hyphenate-limit-after: 5;
    -webkit-hyphenate-limit-before: 4;
    font-weight: 500;
    hyphenate-limit-chars: 10 4 5;
    hyphens: auto;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

/* Space between headers */

h1+h2:not(:first-child) {
    margin-top: var(--space-medium);
}

/* We want a slightly bigger h4 than Designsystemet */

h4 {
    font-size: 1.1rem;
}

/* h5 and h6 should look exactly as h4 */

h5,
h6 {
    font-size: 1.1rem;
}

/* Space between headers in different text modules for browsers that support :has */

.sv-text-portlet:has(.sv-text-portlet-content h1:last-child)+.sv-text-portlet .sv-text-portlet-content h2:first-child,
.sv-text-portlet:has(.sv-text-portlet-content h1:last-child)+.sv-text-portlet:has(.sv-text-portlet-content) h2:first-child {
    margin-top: var(--space-medium);
}


/* Space between headers */

h2+h3:not(:first-child) {
    margin-top: var(--space-small);
}


/* Space between headers in different text modules for browsers that support :has */

.sv-text-portlet:has(.sv-text-portlet-content h2:last-child)+.sv-text-portlet .sv-text-portlet-content h3:first-child,
.sv-text-portlet:has(.sv-text-portlet-content h2:last-child)+.sv-text-portlet:has(.sv-text-portlet-content) h3:first-child {
    margin-top: var(--space-small);
}


/* Space between headers */

h3+h4:not(:first-child) {
    margin-top: var(--space-small);
}


/* Space between headers in different text modules for browsers that support :has */

.sv-text-portlet:has(.sv-text-portlet-content h3:last-child)+.sv-text-portlet .sv-text-portlet-content h4:first-child,
.sv-text-portlet:has(.sv-text-portlet-content h3:last-child)+.sv-text-portlet:has(.sv-text-portlet-content) h4:first-child {
    margin-top: var(--space-small);
}


/* Space between paragraphs and headers for browsers that support :has */

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h2:first-child {
    margin-top: var(--space-extra-large);
}

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h3:first-child,
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h4:first-child {
    margin-top: var(--space-large);
}

/* Fix top margin for heading when using floated image */

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h2:first-child {
    margin-top: var(--space-extra-large);
}

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h3:first-child, 
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h4:first-child, 
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h5:first-child, 
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet+.sv-text-portlet:not(:has(.card)) .sv-text-portlet-content h6:first-child {
    margin-top: var(--space-large);
}

/* Adjust margin for floated image to align with heading */

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet:has(+.sv-text-portlet .sv-text-portlet-content h2:first-child) {
    margin-top: var(--space-large);
}

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet:has(+.sv-text-portlet .sv-text-portlet-content h3:first-child),
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet:has(+.sv-text-portlet .sv-text-portlet-content h4:first-child),
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet:has(+.sv-text-portlet .sv-text-portlet-content h5:first-child),
.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-image-portlet:has(+.sv-text-portlet .sv-text-portlet-content h6:first-child) {
    margin-top: var(--space-medium);
}


/********************************

Link color in text

********************************/

.sv-text-portlet ul a,
.sv-text-portlet ol a,
.sv-text-portlet p a,
main a.uu-text {
    color: #0555a4;
}

.sv-text-portlet ul a:hover,
.sv-text-portlet ol a:hover,
.sv-text-portlet p a:hover,
main a.uu-text:hover {
    background: #f2f2f2;
    color: #032f5a;
    outline: 2px solid #f2f2f2;
}

/********************************

Marked element

********************************/

mark {
    background-color: #f2f2f2;
}


/********************************

Preformatted text

********************************/

pre {
    font-family: monospace !important;
    font-size: 0.875em !important;
}


/********************************

Text modules

********************************/

/* An empty lead element should never be shown */
.sv-text-portlet .lead:empty {
    display: none;
}

/********************************

Lists

********************************/

/* For Sitevision we want to use weight 500 instead of standard in Designsystemet */
dt {
    font-weight: 500;
}


/********************************

print

********************************/

@media print {
    * {
        color: black !important;
        font-family: WorkSans, sans-serif !important;
        /* override SiteVision */
        font-size: 9pt;
    }

    .uu-text {
        font-size: 1em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
    }

    p,
    dl,
    ol,
    ul {
        max-width: 65ch;
    }

    /* Icons are having problem with printing due to the use of filter. This is a fix for that. */
    a.env-collapse-header::before,
    .button-icon::before,
    .button-icon::after,
    .uu-block-link.image .icon-call-to-action::after,
    .alert .sv-text-portlet:first-child :is(h2, h3)::before,
    .alert.sv-text-portlet :is(h2, h3):first-child::before,
    .icon-position-right::after,
    .icon-position-left::before,
    .icon-position-center::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        margin-top: 20mm;
        margin-bottom: 20mm;
        margin-left: 25mm;
        margin-right: 25mm;
    }
}