/*
 * Universität Münster / Sprachenzentrum footer (current "layout2017" design).
 * Self-contained and scoped to <footer> so it reproduces the official footer
 * without pulling the full WWU main.css (which would clash with the app's
 * Bootstrap layout). Loaded last so it overrides the app's own footer styles.
 */
@font-face {
    font-family: 'MetaWebPro';
    src: url('https://www.uni-muenster.de/imperia/md/content/allgemein/farbunabhaengig/fonts/metawebpro-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MetaWebPro';
    src: url('https://www.uni-muenster.de/imperia/md/content/allgemein/farbunabhaengig/fonts/metawebpro-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

footer {
    width: 100%;
    margin: 0;
    clear: both;
    overflow: hidden;
    font-family: 'MetaWebPro', Verdana, sans-serif;
    line-height: 1.28;
    box-sizing: border-box;
}
footer * { box-sizing: border-box; }
footer a { text-decoration: none; }
footer .row { width: 100%; margin: 0; }

/* top: green "back to top" bar */
footer .row.top { background-color: #7ab51d; }
footer .nav-slideup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 21px;
    color: #fff;
    font-weight: 700;
    font-size: 1.2em;
}
footer .nav-slideup::after { content: "\2191"; font-size: 1.4em; }
footer .nav-slideup:hover { color: #fff; font-weight: 700; }

/* upper: dark slate with contact + claim */
footer .row.upper {
    background-color: #333f48;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
footer .row.upper * { color: #fff; }
footer .row.upper .module { padding: 21px; flex: 1 1 100%; }
footer .row.upper h2 {
    margin: 0 0 .5em;
    font-size: 1.57em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}
footer address { font-style: normal; line-height: 1.28; }
footer address .p-adr { margin: .3em 0 1em; }
footer .claim { font-size: 36px; font-weight: 700; letter-spacing: -.05em; }
footer .spacer { display: none; }

/* lower: white with footer nav + copyright */
footer .row.lower {
    background-color: #fff;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
footer .row.lower * { color: #333; }
footer .row.lower a { color: #333f48; }
footer .nav-footer { padding: 15px 21px; flex: 1 1 100%; text-align: center; }
footer .nav-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
footer .nav-footer li { text-transform: uppercase; padding: 0 8px; }
footer .nav-footer li + li { border-left: 1px solid #333f48; }
footer .nav-footer a:hover { font-weight: 700; }
footer .module-content { padding: 15px 21px; flex: 1 1 100%; text-align: center; }
footer .module-content p { margin: 0; }

/* hidden on phones, like the official footer */
footer .not-on-smartphone { display: none; }

@media (min-width: 37.5em) {
    footer .not-on-smartphone { display: block; }
}
@media (min-width: 49.125em) {
    footer .row.upper .module { flex: 1 1 0; }
    footer .row.upper .claim-module { text-align: right; }
    footer .nav-footer { flex: 0 1 auto; text-align: left; }
    footer .nav-footer ul { justify-content: flex-start; }
    footer .module-content { flex: 0 1 auto; text-align: right; }
}