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

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

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

/* Set margin bottom to 0 for education modules so the modules has height zero when they do
   not display any content. If a content is displayed the margin will be set by module itself */
.sv-se-uu-uit-webb-webapp-education-course-contact,
.sv-se-uu-uit-webb-webapp-education-course-courses-in-package,
.sv-se-uu-uit-webb-webapp-education-course-description,
.sv-se-uu-uit-webb-webapp-education-course-header,
.sv-se-uu-uit-webb-webapp-education-course-instances,
.sv-se-uu-uit-webb-webapp-education-course-reading-lists,
.sv-se-uu-uit-webb-webapp-education-course-syllabi,
.sv-se-uu-uit-webb-webapp-education-error,
.sv-se-uu-uit-webb-webapp-education-outline,
.sv-se-uu-uit-webb-webapp-education-programme-header,
.sv-se-uu-uit-webb-webapp-education-programme-instances,
.sv-se-uu-uit-webb-webapp-education-programme-programme-syllabi,
.sv-se-uu-uit-webb-webapp-education-programme-outlines,
.sv-se-uu-uit-webb-webapp-education-programme-specialisations,
.sv-se-uu-uit-webb-webapp-education-programme-syllabus,
.sv-se-uu-uit-webb-webapp-education-reading-list,
.sv-se-uu-uit-webb-webapp-education-redirect,
.sv-se-uu-uit-webb-webapp-education-syllabus {
    margin-bottom: 0 !important;
}

/* Add a little bit of space after alerts in the education modules */
.education .alert {
    padding-top: var(--space-medium);
    padding-bottom: var(--space-medium);
}

/* Alerts in the education module do not have a h3 header, so make the icon a little bit bigger */
.education .alert p.icon-position-left::before {
    background-size: 1.3em;
    height: 1.3em;
    width: 1.3em;
    margin-top: -0.15em;
}

/* Alerts in the education instance module should have less margin bottom than normal */
.education-instance-alert {
    margin-bottom: 1rem !important;
}

/* Add a little bit more space after the course description */
.sv-se-uu-uit-webb-webapp-education-course-description .education {
    margin-bottom: 2rem;
}

/* Remove a little bit of space between the course syllabi and reading lists (syllabi is always
   followed by reading lists) */
.sv-se-uu-uit-webb-webapp-education-course-syllabi .sv-collapsible-content {
    margin-bottom: 1rem;
}

/* A paragraph with class linebreak should have no margin between it and the paragraph above it.
   This class is used in texts from Selma/Infoglue */
.education p+p.linebreak {
    margin-top: -1rem;
}

/* Set correct color for links in texts and lists that are in the education module */
.education :is(p, ul, ol, dl) a:not(.button) {
    color: var(--color-link);
}

.education :is(p, ul, ol, dl) a:hover:not(.button) {
    color: #000;
}

/* Call to action links in education modules should not display an after element */
.education p.call-to-action a::after {
    display: none;
}

/* Set style of header with name and credits in education modules and education templates.
   H1 with education-header-name class and div with education-header-name class is used in the
   education modules. The rest is for the education templates. */
.education-header {
    margin-bottom: 2rem;
}

h1.education-header-name,
div.education-header-name,
.education-header-name .sv-text-portlet-content,
.education-header-name h1 {
    display: inline;
}

h1.education-header-name,
div.education-header-name {
    margin-right: 0.4rem;
}

div.education-header-credits,
.education-header-credits p {
    --bs-text-opacity: 1;
    /* From class text-muted */
    color: var(--color-text-muted) !important;
    /* From class text-muted */
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.education-header-credits p {
    margin-bottom: 1rem;
}

/* Style pseudo-headings, this is used for flattened texts where we can not keep h1-h6 elements */
.education .pseudo-heading {
    font-style: italic;
    margin-bottom: 0;
}

/* Style of education instance title and subtitle */
.education-instance-title {
    font-size: 1rem !important;
    font-weight: 500;
}

.education-instance-title .sv-collapsible-content-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media screen and (min-width: 768px) {
    .education-instance-title .sv-collapsible-content-title {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 1200px) {
    .education-instance-title .sv-collapsible-content-title {
        gap: 2rem;
    }
}

/* For some collapsible headers in the education module h3 headers should have the size of a h4
   header */
a.education-course-collapsible-header,
a.education-programme-syllabus-outlines-collapsible-header,
a.education-search-index-collapsible-header {
    font-size: 1rem;
}

/* No margin-bottom for the education instance info and last child of the info */
.education-instance-info,
.education-instance-info :last-child {
    margin-bottom: 0 !important;
}

/* Style paragraphs in the education instance info */
.education-instance-info p {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Paragraphs with class linebreak in education instance info should have no margin between it and
   the paragraph above it. */
.education-instance-info p+p.linebreak {
    margin-top: -0.5rem;
}

/* Lists in the education instance info should have a small margin-bottom */
.education-instance-info ul,
.education-instance-info ol {
    margin-bottom: 0.5rem;
}

/* Toggle content in the education instance info should have a margin left */
.education-instance-info .toggle-content p {
    margin-left: 1rem;
}

/* The button in education instance info  should take up as less vertical space as possible */
.education-instance-info button {
    line-height: 1.3em;
    margin-top: -0.75em;
}

.education-instance-info button::before {
    background-size: 1.3em;
    height: 1.3em;
    min-width: 1.3em;
    width: 1.3em;
}

/* Do not show the call-to-action icon after single line links in the education instance info */
.education-instance-info p.call-to-action a::after {
    display: none;
}

/* There is a bug in older Safari that adds a line break before the call-to-action icon in a button
   with exactly the text "Gå till anmälan", this rule fixes that */
.education-instances-apply-button,
.education-instances-apply-button:hover {
    letter-spacing: .0500001em;
}

/* Lists in the education contact module should have a little bit more space between them */
.education ul+ul {
    margin-top: var(--space-medium) !important;
}

/* The education syllabus and programme syllabus information should have no margin-bottom */
.education-syllabus-information dl> :last-child,
.education-programme-syllabus-information dl> :last-child {
    margin-bottom: 0 !important;
}

/* Set style for the revision select in the education modules */
.education-revision-select {
    height: auto;
    padding-right: 2.5rem;
    white-space: normal;
}

/* Add more margin before reading lists in syllabus module, before syllabi in reading list
   module, before outlines in the programme syllabus module and before programme syllabi in the
   outline module */
.education-syllabus-reading-lists,
.education-reading-list-syllabi,
.education-programme-syllabus-outlines,
.education-outline-programme-syllabi {
    margin-top: 3.5rem;
}

/* Lists in reading lists should have less margin-bottom */
.sv-se-uu-uit-webb-webapp-education-reading-list ul {
    margin-bottom: 1rem;
}

.education-reading-list-increased-margin-top {
    margin-top: 2rem !important;
}

/* Tables in the education module should have a little bit more margin-bottom */
.education table {
    margin-bottom: 1.5rem
}

/* Make sure module for listing programme syllabi always has a margin-top */
.sv-se-uu-uit-webb-webapp-education-programme-programme-syllabi {
    margin-top: 1rem;
}

/* The module for listing outlines is not always shown but when it is it should have a negative
    margin-top to reduce the space between it and the module listing programme syllabi above it */
.sv-se-uu-uit-webb-webapp-education-programme-outlines .sv-collapsible-content {
    margin-top: -1rem;
}

/* In module for searching course and programme syllabi the table should have a little bit more
   padding. Also make sure that names of courses and programmes can be hyphenated. */
.education-search-syllabi-table th,
.education-search-syllabi-table td {
    -webkit-hyphenate-limit-after: 5;
    -webkit-hyphenate-limit-before: 4;
    hyphenate-limit-chars: 10 4 5;
    hyphens: auto;
    overflow-wrap: break-word;
    padding: 0.5rem;
    white-space: normal;
    word-break: break-word;
}

/* Layout for programme and course links at sites of subject and interest. */
.education-subject-course-level-header {
    padding-left: var(--bs-card-spacer-x);
    font-size: 0.9rem;
    padding-top: 0.6rem;
}

.sv-se-uu-uit-webb-webapp-education-subject-courses .list-group .list-group-item {
    padding-left: calc(2*var(--bs-card-spacer-x));
}

/* Layout for information about revision */
.education-revision {
    text-align: right;
    color: var(--bs-gray-600);
    font-size: var(--font-size-small);
}

.education-revision.icon-position-left::before {
    background-size: 1.1rem;
    margin-right: 0.1rem;
}

/* Card content container for lists of syllabi and so on */
.education-card-content-wrapper {
    container: education-card-content-wrapper / inline-size;
    width: 100%;
}

.education-card-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@container education-card-content-wrapper (min-width: 768px) {
    .education-card-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

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

Print

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

.education-print-only {
    display: none;
}

@media print {

    /* All education modules are added to templates and therefore not printed by default. This
       rule makes sure that they are printed. */
    .sv-se-uu-uit-webb-webapp-education-course-header,
    .sv-se-uu-uit-webb-webapp-education-course-description,
    .sv-se-uu-uit-webb-webapp-education-course-instances,
    .sv-se-uu-uit-webb-webapp-education-course-courses-in-package,
    .sv-se-uu-uit-webb-webapp-education-course-contact,
    .sv-se-uu-uit-webb-webapp-education-programme-header,
    .sv-se-uu-uit-webb-webapp-education-programme-instances,
    .sv-se-uu-uit-webb-webapp-education-programme-specialisations,
    .sv-se-uu-uit-webb-webapp-education-syllabus,
    .sv-se-uu-uit-webb-webapp-education-reading-list,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus,
    .sv-se-uu-uit-webb-webapp-education-outline,
    .sv-se-uu-uit-webb-webapp-education-subject-pages,
    .sv-se-uu-uit-webb-webapp-education-subject-courses,
    .sv-se-uu-uit-webb-webapp-education-subject-programmes {
        display: block;
    }

    /* Show all tab panes in the instances modules */
    .sv-se-uu-uit-webb-webapp-education-course-instances nav,
    .sv-se-uu-uit-webb-webapp-education-programme-instances nav {
        display: none;
    }

    .sv-se-uu-uit-webb-webapp-education-course-instances .tab-content,
    .sv-se-uu-uit-webb-webapp-education-programme-instances .tab-content {
        border: 0;
    }

    .sv-se-uu-uit-webb-webapp-education-course-instances .tab-pane,
    .sv-se-uu-uit-webb-webapp-education-programme-instances .tab-pane {
        display: block !important;
        margin-bottom: 1rem;
        opacity: 1 !important;
        padding: 0;
    }

    .sv-se-uu-uit-webb-webapp-education-course-instances .tab-pane .education-print-only,
    .sv-se-uu-uit-webb-webapp-education-programme-instances .tab-pane .education-print-only {
        display: inline;
    }

    /* Make sure content of buttons with collapsible content are printed but not the buttons
       themselves */
    .education-semesters-pane-card button {
        display: none;
    }

    .education-semesters-pane-card .collapsing {
        height: auto !important;
    }

    /* Icons are having problem with printing due to the use of filter. Do not print them. */
    .education-instance-title span::before,
    .education .env-collapse-header::before {
        display: none !important;
    }

    /* Use flex direction row for title and subtitle in instances modules */
    .education-instance-title {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Remove margin-top for subtitle in instances modules */
    .education-instance-subtitle {
        margin-top: 0;
    }

    /* Do not show buttons in instances modules */
    .education-instance-info button {
        display: none;
    }

    /* However, the apply link in the instances modules have really long URLs. This rule will make
      sure that the URLs will fit inside the button. */
    .education-instances-apply-button::after {
        display: inline !important;
    }

    /* Do not show any border for cards and revision select in syllabus, reading list, programme
       syllabus and outline modules */
    .sv-se-uu-uit-webb-webapp-education-syllabus .card,
    .sv-se-uu-uit-webb-webapp-education-reading-list .card,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus .card,
    .sv-se-uu-uit-webb-webapp-education-outline .card {
        border: 0;
    }

    .sv-se-uu-uit-webb-webapp-education-syllabus .card-body,
    .sv-se-uu-uit-webb-webapp-education-reading-list .card-body,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus .card-body,
    .sv-se-uu-uit-webb-webapp-education-outline .card-body {
        padding: 0;
    }

    .sv-se-uu-uit-webb-webapp-education-syllabus select,
    .sv-se-uu-uit-webb-webapp-education-reading-list select,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus select,
    .sv-se-uu-uit-webb-webapp-education-outline select {
        background: 0;
        border: 0;
        margin-top: -2.5rem;
        padding-left: 0;
    }

    /* Turn off showing URLs for some modules */
    .sv-se-uu-uit-webb-webapp-education-syllabus .card a,
    .sv-se-uu-uit-webb-webapp-education-reading-list a,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus .card a,
    .sv-se-uu-uit-webb-webapp-education-outline a {
        text-decoration: none;
    }

    .sv-se-uu-uit-webb-webapp-education-syllabus .card a:not([role="button"]):not([href="/"])::after,
    .sv-se-uu-uit-webb-webapp-education-reading-list a:not([role="button"]):not([href="/"])::after,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus .card a:not([role="button"]):not([href="/"])::after,
    .sv-se-uu-uit-webb-webapp-education-outline a:not([role="button"]):not([href="/"])::after {
        display: none !important;
    }

    /* Do not print lists of syllabi, reading lists, outlines and programme syllabi */
    .sv-se-uu-uit-webb-webapp-education-syllabus .education-syllabus-reading-lists,
    .sv-se-uu-uit-webb-webapp-education-reading-list .education-reading-list-syllabi,
    .sv-se-uu-uit-webb-webapp-education-programme-syllabus .education-programme-syllabus-outlines,
    .sv-se-uu-uit-webb-webapp-education-outline .education-outline-programme-syllabi {
        display: none;
    }

    /* Do not print lists of syllabi and reading lists for courses in a course package, also change
       the styling of the header */
    .sv-se-uu-uit-webb-webapp-education-course-courses-in-package .toggle-section {
        display: none !important;
    }

    .sv-se-uu-uit-webb-webapp-education-course-courses-in-package .sv-collapsible-content+.sv-collapsible-content {
        margin-top: -2.5rem;
    }

    .sv-se-uu-uit-webb-webapp-education-course-courses-in-package a.env-collapse-header {
        background: none;
        border: 0;
        padding-left: 0;
    }

    /* Add more margin before the contact module for courses */
    .sv-se-uu-uit-webb-webapp-education-course-contact {
        margin-top: 2rem;
    }
}