/*
 * Map pages (Farstanaset-karta.html, Farstanaset-karta-stor.html): main2.css + this file.
 *
 * --site-content-max-width: align with the main site column (main.css body max-width).
 *   When you change the default width on regular pages, update this variable to match.
 *
 * --karta-layout-duration / --karta-layout-ease: desktop expand/collapse (similar pace to sidemenu).
 */

:root {
    --site-content-max-width: 800px;
    --karta-layout-duration: 0.36s;
    --karta-layout-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/*
 * main2.css uses body { max-width: 100% }. On desktop we start at column width and expand (JS adds .karta-layout-expanded).
 * Without JS, <noscript> on map pages forces full width.
 */
@media screen and (min-width: 1026px) {
    body.page-karta {
        max-width: var(--site-content-max-width) !important;
        margin-left: auto;
        margin-right: auto;
        transition:
            max-width var(--karta-layout-duration) var(--karta-layout-ease),
            box-shadow var(--karta-layout-duration) var(--karta-layout-ease);
    }

    body.page-karta.karta-layout-expanded {
        max-width: 100% !important;
    }

    @media (prefers-reduced-motion: reduce) {
        body.page-karta {
            transition: none !important;
        }
    }
}

/*
 * Logotype: full-width body makes width: 13% track the viewport — use fixed px (see main2 / earlier fix).
 */
@media screen and (min-width: 1026px) {
    .logotype a {
        width: auto !important;
        max-width: none;
        margin-right: 24px;
    }

    .logotype img {
        float: none !important;
        width: 104px !important;
        max-width: 104px !important;
        min-width: 104px !important;
        height: auto !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 1025px) {
    .logotype img {
        width: 104px !important;
        max-width: 104px !important;
        min-width: 104px !important;
        height: auto !important;
    }
}

/*
 * Brödsmula: ligger i <header> direkt under huvudmenyn (inte i <main>, som gav centrerad ruta ovanför menyn).
 * Vänsterjusterad i ytan under menyraden (t.ex. under ”Om oss”-kolumnen).
 */
body.page-karta header .site-breadcrumbs {
    clear: both;
    margin: 0.2rem 0 0.45rem 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    box-sizing: border-box;
}

@media screen and (min-width: 1026px) {
    body.page-karta header .site-breadcrumbs {
        padding-left: 2px;
    }
}

/* Kort hjälptext om PDF-zoom (inbyggd läsare styrs av webbläsaren) */
body.page-karta .karta-pdf-tip {
    margin: 0.35em 0 0.6em 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #4a5c58;
    max-width: var(--site-content-max-width);
}
body.page-karta .karta-pdf-tip kbd {
    font-size: 0.9em;
    padding: 0.05em 0.35em;
    border: 1px solid #b8ccc4;
    border-radius: 3px;
    background: #f4faf7;
}

/* Tipsraden gäller främst desktop (Ctrl+rull); på mobil/tablet räcker nyp-zoom i PDF:en */
@media screen and (max-width: 1025px) {
    body.page-karta .karta-pdf-tip {
        display: none;
    }
}