/* "Lataa esite (PDF)" -linkki Sivu-templaatin murupolun rivillä (Views/Sivu.cshtml). Erillään site.scss:stä,
   jottei tarvita scss-käännöstä. Ulkoasu kuten murupolun mobiilin takaisin-painike (site.scss .breadcrumb). */

.breadcrumb-outer:has(.brochure-link) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.brochure-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 15px 3px 12px;
    border-radius: 999px;
    border: 1px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: var(--page-accent, #298197);
    color: white;
    font-family: 'Dosis', sans-serif;
    font-size: .9em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.brochure-link:hover,
.brochure-link:focus {
    color: white;
    filter: brightness(1.1);
}

.brochure-link i.fa-duotone {
    --fa-primary-color: white;
    --fa-secondary-color: white;
}

@media screen and (max-width: 768px) {
    /* samalle riville ja samaan korkeuteen kuin murupolun painike (sillä margin-bottom 20px) */
    .breadcrumb-outer:has(.brochure-link) {
        align-items: flex-start;
    }

    .brochure-link {
        margin-bottom: 20px;
    }

    /* Mobiilissa murupolun rivi on sticky (site.scss .breadcrumb-outer). Merkit eivät saa seurata mukana ja peittää
       sisältöä: rivin laatikko puretaan (display: contents), jolloin vain takaisin-painike (.breadcrumb) on sticky ja
       merkit jäävät sivun yläosaan. Reunukset kuten rivin container-padding (10px). */
    .container.breadcrumb-outer:has(.page-badges) {
        display: contents;
    }

    .breadcrumb-outer:has(.page-badges) > .breadcrumb {
        position: sticky;
        top: 10px;
        z-index: 999;
        width: fit-content;
        /* padding eikä margin: yläreunan margin sulautuisi yläpuolisen alueen marginaaliin, ja painike osuisi
           yläosan kuvaan (Snapshot). Sama 10 px kuin rivin container-padding ennen. */
        margin: 0 10px 0 30px;
        padding-top: 10px;
    }

    .breadcrumb-outer > .page-badges {
        margin: 0 10px 10px;
        padding: 0 10px;
    }

    .page-badges .addon-badge {
        white-space: normal;
        margin-bottom: 0;
    }
}

@media print {
    .brochure-link { display: none; }
}

/* Murupolun rivin merkit: lisäpalvelu + Lataa esite (Views/Partials/esiteLinkki.cshtml) */
.breadcrumb-outer:has(.page-badges) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-badges {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Lisäpalvelu – tilataan erikseen: keltainen pilleri (sama korostusväri kuin esitteessä) */
.addon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 15px 3px 12px;
    border-radius: 999px;
    border: 1px solid #f2b544;
    background-color: #fdf3df;
    color: #3d2c06;
    font-family: 'Dosis', sans-serif;
    font-size: .9em;
    text-transform: uppercase;
    white-space: nowrap;
}

.addon-badge .plus {
    color: #b37a12;
}

/* Ominaisuuslaatta, jonka linkittämä sivu on lisäpalvelu (Partials/ominaisuus*.cshtml) */
.is-addon { position: relative; }

.addon-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #f2b544;
    color: #3d2c06;
    font-family: 'Dosis', sans-serif;
    font-size: .75em;
    line-height: 1.6;
    text-transform: uppercase;
}

.addon-mark .plus {
    color: #3d2c06;
}

/* Lataa koko esite -pillerinappi sivun alaosassa (Views/Partials/kokoEsite.cshtml) */
.container.full-brochure {
    display: flex;
    /* oikeaan reunaan kuten sivun yläosan Lataa esite; mobiilissa keskelle */
    justify-content: flex-end;
    margin-top: 30px;
    margin-bottom: 30px;
}

.full-brochure .brochure-link {
    white-space: normal;
    text-align: center;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .container.full-brochure {
        justify-content: center;
    }
}

@media print {
    .full-brochure, .addon-mark { display: none; }
}

/* Plussa piirretään kahdesta viivasta (merkki "+" jää fontin mukaan ylös/alas); badge keskittää sen tekstin kanssa */
.plus {
    display: inline-block;
    flex: none;
    width: .8em;
    height: .8em;
    overflow: hidden;
    text-indent: 2em;
    white-space: nowrap;
    background:
        linear-gradient(currentColor, currentColor) center / 100% .14em no-repeat,
        linear-gradient(currentColor, currentColor) center / .14em 100% no-repeat;
}