/*fonts*/

/* schibsted-grotesk-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/schibsted-grotesk/schibsted-grotesk-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* schibsted-grotesk-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/schibsted-grotesk/schibsted-grotesk-v3-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../assets/fonts/bricolage-grotesque/BricolageGrotesque12ptCondensed-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

/*variables*/

:root {
    font-size: 16px; /* 1rem = 16px */
    --default-font: "Schibsted Grotesk";
    --header-font: "Bricolage Grotesque";
    --breakpoint-tablet-small: 768px;
    --breakpoint-tablet-large: 1024px;
    --breakpoint-desktop-small: 1280px;
    --breakpoint-desktop-large: 1480px;

    --accent: #231942;
    --amber: #f7b785;
    --highlight: #28c8a9;
    --light: #e4e5e7;
    --middle: #bbbcc2;
    --pop: #f14188;
    --promotion: #5d5fef;

    --color-rich-black: #003c3b;
    --color-eucalyptus: #2fddac;
    --color-yellow-green: #a8e07b;
    --color-lincoln-green: #1c4900;
    --color-apple-red: #dd002c;
    --color-gargoyle-gas: #fee33f;
    --color-persimmon: #e2490c;
    --color-mystic-red: #ff5601;
    --color-soap: #d0bff8;
    --color-blue-violet: #451d85;
    --color-pale-blue: #aaebef;
    --color-lapis-lazuli: #2C64A1;
    --color-pastel-red: #FF6858;
    --color-blood: #631006;
    --color-raspberry: #fa0064;
    --color-dark: #4d4d4d;
    --color-gray: #bbbcc2;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-old-silver: #858585;
    --color-spanish-gray: #989898;
    --color-bright-gray: #EEEDF2;
}

body {
    --header-height: 91px;
    --color-primary: var(--color-raspberry);
    --color-secondary: var(--color-white);
    --background-color-header: var(--color-white);
    --footer-background-color: var(--accent);
    --footer-text-color: var(--color-white);
    --fs-body: 1rem; /* 16px */
    --fs-h1-xl: 3.25rem; /* 52px */
    --fs-h1-lg: 2.875rem; /* 46px */
    --fs-h1: 2.375rem; /* 38px */
    --fs-h2: 1.625rem; /* 26px */
    --fs-h3: 1.5rem; /* 24px */
    --fs-h4: 1.25rem; /* 20px */
    --fs-small: 0.875rem; /* 14px */
    --fs-large: 1.25rem; /* 20px */

    font-family: var(--default-font), sans-serif;
    font-weight: 400;
    color: var(--color-dark);
    font-size: var(--fs-body);
}

:is(h1, h2, h3) {
    font-family: var(--header-font), Helvetica, Arial, sans-serif;
    font-weight: 400;
    margin: 0;
}

:is(h4, h5, h6) {
    margin: 0;
}



h1 {
    font-size: var(--fs-h1);

    &.lg {
        --fs-h1: var(--fs-h1-lg);
    }
    &.xl {
        --fs-h1: var(--fs-h1-xl);
    }
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 700;
}

h5 {
    font-size: var(--fs-h4);
    font-weight: 400;
}

h6 {
    font-size: var(--fs-h4);
}

.font-small {
    font-size: var(--fs-small);
}

.font-large {
    font-size: var(--fs-large);
}

.color-primary {
    color: var(--color-primary);
}

:is(a, button) {
    background-color: var(--btn-bg-color, transparent);
    border: var(--btn-border, none);
    color: var(--btn-color, inherit);
    font-size: var(--btn-font-size, inherit);
    font-weight: var(--btn-font-weight, 700);
    cursor: pointer;

    &:focus {
        outline: none;
    }

    @media (hover: hover) { /* when hover is supported */
        &:hover {
            filter: var(--btn-hover-filter, brightness(130%));
            transition: var(--btn-hover-transition, all 0.3s ease-in-out);
        }
    }
    @media (hover: none) {
        &:active {
            -webkit-tap-highlight-color: transparent;
            filter: var(--btn-hover-filter, brightness(130%));
            transition: var(--btn-active-transition, background-color 0.1s);
        }
    }

}

a {
    text-decoration: var(--a-text-decoration, none);

    @media (hover: hover) { /* when hover is supported */
        /* When <a> tag does not have a class */
        &:not([class]):hover {
            --a-text-decoration: underline;
        }
    }

    @media (hover: none) { /* when hover is supported */
        --a-text-decoration: underline;
    }
}

:is(input, select, textarea) {
    padding: var(--input-padding, 1rem);
    border-radius: var(--input-border-radius, 0.75rem);
    border: var(--input-border, 1px solid var(--color-gray));

    &:focus {
        outline: none;
        border-color: var(--input-focus-border, inherit);
    }
}

@media (min-width: 1024px) {
    body {
        --header-height: 150px;
        --fs-body: 1.125rem; /* 18px */
        --fs-h1-xl: 4.375rem; /* 70px */
        --fs-h1-lg: 3.875rem; /* 62px */
        --fs-h1: 3.25rem; /* 52px */
        --fs-h2: 1.875rem; /* 30px */
    }
}


/* ************************************************ */
/* TODO: Remove
 * This is part of the old carousel on event, attraction and article
 */
.card {
    border-radius: 15px;
    min-height: 180px;
    overflow: hidden;
    background-color: var(--light);
}

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


/*.link,*/
/*.btn-link {*/
/*    color: var(--dark);*/
/*    font-weight: 500;*/
/*    text-decoration: none;*/
/*}*/

/*.link:hover,*/
/*.btn-link:hover,*/
/*.link:focus,*/
/*.btn-link:focus {*/
/*    color: var(--color-primary);*/
/*    text-decoration: underline;*/
/*}*/

/*.btn,*/
/*.btn:focus,*/
/*.btn:hover {*/
/*    text-decoration: none;*/
/*}*/

/*.btn-link {*/
/*    background-color: transparent;*/
/*    text-decoration: underline;*/
/*    border: none;*/
/*}*/

/*.text-center {*/
/*    text-align: center !important;*/
/*}*/






/*input,*/
/*textarea,*/
/*.input-button {*/
/*    font-size: 1rem;*/
/*    padding: 12px 15px;*/
/*    border-radius: 5px;*/
/*    border: 1px solid var(--middle);*/
/*    font-family: var(--circular-font);*/
/*}*/

/*input:hover:not(:disabled),*/
/*textarea:hover:not(:disabled),*/
/*.input-button:hover:not(:disabled) {*/
/*    border-color: var(--dark);*/
/*}*/

/*input:focus,*/
/*textarea:focus,*/
/*.input-button:focus {*/
/*    border-color: var(--color-secondary);*/
/*}*/


/*.input-container {*/
/*    position: relative;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 66px;*/
/*}*/

/*.input {*/
/*    padding: 11px 2px 12px 13px;*/
/*    border-radius: 5px;*/
/*    border: 1px solid var(--middle);*/
/*    font-family: var(--circular-font);*/
/*    outline: none;*/
/*    color: var(--dark);*/
/*    font-weight: normal;*/
/*}*/



/*.checkbox[type="checkbox"] {*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    margin: 0 15px 0 0;*/
/*    padding: 1px 2px 2px;*/
/*    border-radius: 3px;*/
/*    border: solid 1px var(--dark);*/
/*    background-color: var(--white);*/
/*}*/

/*.checkbox[type="checkbox"]:active,*/
/*.checkbox[type="checkbox"]:focus,*/
/*.checkbox[type="checkbox"]:focus-within,*/
/*.checkbox[type="checkbox"]:focus-visible,*/
/*.checkbox[type="checkbox"]:hover,*/
/*.checkbox[type="checkbox"]:target {*/
/*    outline: none;*/
/*}*/

/*.capitalize-first {*/
/*    text-transform: capitalize;*/
/*}*/




/*.white-card {*/
/*    background-color: var(--white);*/
/*    border: 1px solid var(--middle);*/
/*}*/



/*.error-container {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    margin-top: 20px;*/
/*    margin-bottom: 0;*/
/*}*/

/*.error {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-grow: 1;*/
/*    text-align: center;*/
/*    position: relative;*/
/*}*/

/*.error > * {*/
/*    font-family: var(--black-font), sans-serif;*/
/*    font-weight: 500;*/
/*    margin: 0 auto 5px auto;*/
/*}*/

/*.error > *:not(.primary-btn),*/
/*.field-validation-error {*/
/*    color: var(--pop);*/
/*}*/

/*.error-title {*/
/*    font-size: 3rem;*/
/*}*/

/*.error-img {*/
/*    width: 100%;*/
/*    max-width: 300px;*/
/*}*/

/*.error-sm {*/
/*    font-weight: bold;*/
/*    font-size: 1.1rem;*/
/*}*/

/*.error-message {*/
/*    font-size: 1.75rem;*/
/*    margin-bottom: 0.625rem;*/
/*}*/

/*.error-container .error-controls {*/
/*    display: flex;*/
/*    margin-top: 1.875rem;*/
/*}*/

/*.error-container .error-controls > * {*/
/*    margin: 0.625rem;*/
/*}*/

/*a.pagination__link,*/
/*a.tag__link {*/
/*    backface-visibility: hidden;*/
/*    background-color: var(--white);*/
/*    border-radius: 5px;*/
/*    border: 1px solid var(--middle);*/
/*    color: var(--dark);*/
/*    font-weight: 500;*/
/*    margin: 0.375rem 0.375rem 0 0;*/
/*    padding: 0.375rem 0.625rem;*/
/*    text-decoration: none;*/
/*    transition: all 0.3s ease-in-out;*/
/*}*/

/*a.pagination__link:not(.active):hover,*/
/*a.tag__link:not(.active):hover {*/
/*    background-color: var(--pop);*/
/*    color: var(--white);*/
/*}*/
