@import 'accordion.css';
@import 'buttons.css';
@import 'facets.css';
@import 'fontawesome/css/fontawesome.css';
@import 'fontawesome/css/regular.css';
@import 'fontawesome/css/solid.css';
@import 'fonts/fonts.css';
@import 'footer.css';
@import 'header.css';
@import 'navigation.css';
@import 'search.css';
@import 'show.css';

:root {
    /* SLU FONT FAMILIES */
    --slu-font-merriweather: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
    --slu-font-oswald: 'Oswald', Helvetica, Arial, sans-serif;
    --slu-font-roboto: 'Roboto', Helvetica, Arial, sans-serif;
    --slu-font-roboto-condensed: 'Roboto Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif;

    /* FONT AWESOME */
    --font-awesome: 'Font Awesome 6 Pro';

    /* SLU BLUE */
    --slu-duva: #b9d3dc;
    --slu-himmel: #6ad1e3;
    --slu-turkos: #00b0b9;
    --slu-havsvik: #007681;
    --slu-havsdjup: #004851;

    /* SLU GREEN */
    --slu-lindblom: #d8ed96;
    --slu-apple:  #c4d600;

    /* SLU GREY */
    --slu-fjader: #d9d9d6; /* use for lighter borders */
    --slu-glimmer: #bbbcbc; /* use for darker borders */
    --slu-betong: #888b8d;
    --slu-titan: #53565a;

    /* SLU RED */
    --slu-hallon: #ce0037;

    /* SLU YELLOW */
    --slu-kada: #ffb81c;

    /* MISC COLORS */
    --heading-color: #302f2f;
    --link-blue: #3f41dc;
    --focus-blue: #0060df;

    /* OUTLINES */
    --focus-outline: 2px solid var(--slu-kada);
    --focus-outline-blue: 2px solid var(--focus-blue);
    --focus-outline-offset: -2px;

    /* BORDER RADII */
    --small-radius: 5px;
    --medium-radius: 8px;
    --large-radius: 16px;

    /* TRANSITIONS */
    --default-transition: background-color .35s ease-out;

    /* SHADOWS */
    --default-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), -8px 10px 10px rgba(0, 0, 0, 0.1), 8px 10px 10px rgba(0, 0, 0, 0.1);
}

/* COMMON ELEMENTS */
body {
    display: flex;
    flex-direction: column;
    font-family: var(--slu-font-merriweather);
    margin: 0;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--slu-font-oswald);
}

h1 {
    font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

h2.discreet,
h3.discreet {
    font-family: var(--slu-font-roboto);
    font-size: 1.125rem;
    font-weight: 700;
}

p, table, ul { font-weight: 300; }

span.cc-message {
    font-family: var(--slu-font-roboto-condensed);
    font-size: 1.125rem;
    line-height: 1;
}

a, a.cc-link {
    border-bottom: 1px dotted;
    color: var(--link-blue);
    text-decoration: none;
}

.cc-message a.cc-link {
    color: var(--link-blue);
    padding: 0;
}

li > a {
    border: none;
}

a:hover, a:focus, a.cc-link:hover, a.cc-link:focus {
    background-color: var(--slu-lindblom);
    border-bottom: 1px solid;
    -webkit-box-shadow: -0.25rem 0px 0 var(--slu-lindblom), 0.25rem 0px 0 var(--slu-lindblom);
    -moz-box-shadow: -0.25rem 0px 0 var(--slu-lindblom), 0.25rem 0px 0 var(--slu-lindblom);
    box-shadow: -0.25rem 0px 0 var(--slu-lindblom), 0.25rem 0px 0 var(--slu-lindblom);
    color: black;
    outline: none;
}

a:visited, .cc-message a.cc-link:visited {
    color: #814180;
}

a:visited:hover, a:visited:focus {
    color: black;
}

/* CUSTOM CLASSES */
a.dark-bg {
    color: var(--slu-lindblom);
}

a.dark-bg:hover, a.dark-bg:focus, a.dark-bg:visited:hover, a.dark-bg:visited:focus {
    color: black;
}

a.dark-bg:visited {
    color: var(--slu-lindblom);
}

a.skip-to-main-link {
    background: var(--slu-kada);
    border: none;
    color: black;
    display: block;
    font-family: var(--slu-font-roboto-condensed);
    font-size: 1.125rem;
    font-weight: 600;
    left: -200%;
    padding: 16px;
    position: absolute;
}

a.skip-to-main-link:focus {
    left: auto;
    outline: none;
    position: relative;
    width: auto;
    z-index: 999999;
}

a.skip-to-main-link:focus, a.skip-to-main-link:visited:focus {
    background-color: var(--slu-kada);
}


.primary, .secondary { font-family: var(--slu-font-roboto-condensed); }
.primary a, .secondary a { font-weight: 400; }
.primary { font-size: 1.5em; }
.secondary { font-size: 1.25em; }

.about {
    margin-top: 1.5rem;
}

/* COMMON HORIZONTAL MARGIN */
footer, .about, .search-hit, .search-results {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}