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

    This file contains rules for
    JUMBOTRON
    that implement the UU design system specifically for Sitevision

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

.jumbotron {
    isolation: isolate;
}

/* Jumbotron background image is set by variable image */
.jumbotron-image {
    background-image: var(--image);
 }

/* Jumbotron header, this makes sure that the header is always looking the same regardless of the
   header level */
.jumbotron-header {
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: normal;
    margin-bottom: .5rem;
    padding: 0;
}

/* Remove margin bottom of last child of class jumbotron-text */
.jumbotron-text > :last-child {
    margin-bottom: 0;
}


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

  Add warning variation of jumbotron, TBD move to design system

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


/* Override the Sitevision style */

.jumbotron-alert .jumbotron-alert-header {
    color: #fff;
}

@media print {
    .jumbotron-image {
        background-image: none !important;
    }
}

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

  Fullheight version of jumbotron with associated classes

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

.jumbotron-image-fullheight {
    min-height: calc(80vh - 120px);
    margin-bottom: var(--space-extra-large);
}

.jumbotron-image-fullheight .jumbotron-text {
    background: transparent;
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    padding: 0;
    z-index: 1;
}

.jumbotron-image-fullheight > div {
    padding-inline: calc(var(--bs-gutter-x) * 0.5)
}

.link-call-to-action-rounded {
    align-items: center;
    color: var(--color-text);
    display: flex;
    text-decoration: none;
}

.link-call-to-action-rounded::after {
    background-position: center;
    border-radius: 50%;
    border: 0.5px var(--color-border) solid;
    filter: invert(0.6);
    flex-shrink: 0;
    float: right;
    height: 2.5rem;
    width: 2.5rem;
    transition: background-color 0.5s ease;
}

.link-call-to-action-rounded:hover {
    background-color: transparent;
}

.link-call-to-action-rounded:hover::after {
    background-color: var(--color-profile);
    border-color: transparent;
    filter: invert(0);
    transition: background-color 0.5s ease;
}

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

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

.light-text .link-call-to-action-rounded {
    color: var(--color-white);
}

.light-text .link-call-to-action-rounded.icon-call-to-action::after {
    filter: invert(0);
}

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

  Jumbotron info
  This should be removed when the design system has a jumbotron info component

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

.jumbotron-info {
    --border-color: #ccc;
    background-color: var(--color-grey-light);
    padding: var(--space-large);
}

.jumbotron-info .jumbotron-text {
    border-left: var(--space-small) solid var(--border-color);
    padding: 0 0 0 calc(var(--space-large) - var(--space-small));
}

.jumbotron-info a:not(.button) {
    color: var(--color-text);
}

.jumbotron-info a:not(.button):hover{
    background-color: transparent;
}

.jumbotron-info p:last-of-type {
    margin-bottom: var(--space-small);
}

.jumbotron-info p:last-of-type:has(a.button),
.jumbotron-info p:last-of-type:has(button) {
    margin-bottom: 0;
}

.jumbotron-info-header {
    font-size: 1em;
    font-weight: bold;
}

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

  Designsystem adjustments

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

.jumbotron-alert a.button:hover,
.jumbotron-warning a.button:hover,
.jumbotron-info a.button:hover {
    background-color: var(--color-button-hover);
}