/* Shared typography and page background, followed by the mobile layout. */
html, body { background-color: #0c3f58; }
html { overflow-y: scroll; }
div#top-bg, div#main-bg, div#page-holder { background-color: #f2f2f2; }
div#header h1 { font-size: 22px; }
div#footer-end {
    box-sizing: border-box; height: auto; min-height: 40px;
    padding: 8px 20px; font-size: 14px; line-height: 1.8;
}
div#content.application-content, div#kontakt-formular table { font-size: 16px; line-height: 1.6; }
div#kontakt-formular table { table-layout: fixed; }
div#kontakt-formular input.text, div#kontakt-formular textarea {
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
    font-size: 16px; line-height: 1.5; padding: 8px; min-height: 44px;
}
div#kontakt-formular input[name='postnr'] { width: 28%; }
div#kontakt-formular input[name='by'] { width: 68%; }
.ansoegning-dropzone-text, .ansoegning-file-item, .ansoegning-file-remove,
#submit_ansoegning { font-size: 16px; }
.mobile-header, .mobile-brand, .mobile-painting, .mobile-navigation, .footer-mobile { display: none; }

@media screen and (min-width: 840px) {
    /* Align the right border with the painting and contain wide CMS tables. */
    div#page-bg { width: 791px; }
    table#content-table { table-layout: fixed; }
    .cms-content table { max-width: 100%; }
    .cms-content img { max-width: 100% !important; height: auto !important; }
}

@media screen and (max-width: 839px) {
    .mobile-header {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        position: relative; z-index: 20; padding: 18px 20px;
        background: white; border-bottom: 2px solid #81c1ff;
    }
    .mobile-brand {
        display: flex; align-items: center; gap: 10px; min-width: 0;
        color: #34434a; text-decoration: none;
        font: clamp(16px, 4.8vw, 20px)/1.2 Georgia, serif;
    }
    .mobile-brand img { width: 48px; height: 48px; flex-shrink: 0; }
    /* Crop the 824px source to its 760px painting, from y=72 to y=306. */
    .mobile-painting {
        display: block; height: calc(100vw * 234 / 760);
        background: url('/elements/images/dame-oppe.jpg') no-repeat;
        background-size: calc(100vw * 824 / 760) auto;
        background-position: calc(100vw * -32 / 760) calc(100vw * -72 / 760);
    }
    div#top-bg, div#main-bg, div#page-holder, div#page-bg {
        width: auto; margin: 0; padding: 0; border: 0; min-height: 0; background: white;
    }
    div#top { display: none; }
    table#content-table, table#content-table > tbody,
    table#content-table > tbody > tr, table#content-table > tbody > tr > td.page-body {
        display: block; width: auto; padding: 0; border: 0; background: transparent;
    }
    td#content-table-image { display: none; }
    div#page-bg {
        background: white url('/elements/images/dame-nedre-mobil.jpg') no-repeat;
        background-size: calc(100vw * 201 / 760) auto;
        background-position: calc(100vw * -16 / 760) 0;
    }
    div#header {
        position: relative; z-index: 1; box-sizing: border-box; margin: 0;
        min-height: 64px;
        padding: 32px 20px 0 24%;
    }
    div#header h1.page-heading {
        flex-wrap: wrap; border-bottom: 2px solid #81c1ff;
        padding: 0 0 10px; margin: 0; font-size: 22px; line-height: 1.35;
        overflow-wrap: anywhere;
    }
    div#header .page-edit-actions { margin: 8px 0 0; }
    div#header .page-edit-link { font-size: 12px; }
    .mobile-navigation { display: block; position: relative; flex-shrink: 0; font-family: Verdana, sans-serif; }
    .mobile-navigation summary {
        display: flex; align-items: center; justify-content: center; box-sizing: border-box;
        width: 44px; height: 44px; cursor: pointer; list-style: none;
    }
    .mobile-navigation summary::-webkit-details-marker { display: none; }
    .mobile-menu-icon { display: flex; flex-direction: column; gap: 5px; width: 22px; }
    .mobile-menu-icon > span { display: block; height: 2px; background: #0c3f58; border-radius: 1px; }
    .mobile-navigation nav {
        position: absolute; z-index: 10; right: 0; top: calc(100% + 10px); width: 230px;
        max-width: calc(100vw - 40px); padding: 4px 0;
        border: 1px solid #c5d7e0; background: white; box-shadow: 0 6px 14px #0002;
    }
    .mobile-navigation nav a {
        display: block; padding: 13px 16px; color: #0c3f58;
        font-size: 16px; line-height: 1.4; text-decoration: none;
    }
    .mobile-navigation nav a[aria-current='page'], .mobile-navigation nav a:hover { background: #e9f3f8; }
    .mobile-navigation summary:focus-visible, .mobile-navigation a:focus-visible { outline: 2px solid #156184; outline-offset: 2px; }
    .public-content-wrap {
        position: relative; padding: 32px 20px 28px;
        /* Keep the sculpture faintly visible behind the first lines of text. */
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .62),
            rgba(255, 255, 255, .88) max(64px, calc(100vw * 234 / 760 - 40px)),
            white max(128px, calc(100vw * 234 / 760 + 24px)));
    }
    .public-content-wrap::before {
        content: ''; position: absolute; top: -64px; left: 0; right: 0; height: 64px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .62));
        pointer-events: none;
    }
    div#content, div#content-uddelinger { padding: 0; overflow-wrap: anywhere; }
    .cms-content { display: flow-root; }
    .cms-content img { max-width: 100% !important; height: auto !important; }
    .cms-content table { max-width: 100%; }
    .cms-content iframe, .cms-content video { max-width: 100%; }
    .cms-content > :first-child { margin-top: 0 !important; }
    /* The form reflows instead of being scaled, keeping touch controls usable. */
    div#kontakt-formular table, div#kontakt-formular tbody,
    div#kontakt-formular tr, div#kontakt-formular td { display: block; width: auto; }
    table#content-table div#kontakt-formular td { padding: 10px 0; }
    div#kontakt-formular textarea { resize: vertical; }
    div#kontakt-formular .radio-button { width: 22px; height: 22px; margin: 10px 8px 10px 0; vertical-align: middle; }
    .ansoegning-file-item { gap: 8px; }
    .ansoegning-file-item > span { min-width: 0; overflow-wrap: anywhere; }
    .ansoegning-file-remove { flex-shrink: 0; min-height: 44px; }
    #submit_ansoegning { min-height: 44px; font-size: 16px; }
    div#footer-end { height: auto; padding: 16px 0; }
    .footer-desktop { display: none; }
    .footer-mobile { display: flex; flex-wrap: wrap; column-gap: 24px; padding: 0 20px; text-align: left; }
    .footer-mobile > div { flex-basis: 100%; }
    .footer-mobile a { display: block; max-width: 100%; margin: 0; color: white; line-height: 36px; overflow-wrap: anywhere; }
}