/** 
 * PRINT
 *
 *  PBI 1114
 *
    ========================================================================== */


body {
    background-color: #fff;
}

.main-content :is(a, .btn--text, .standalone-link) {
    color: inherit;
}

p {
    orphans: 3;
    widows: 3;
}

.card {
    break-inside: avoid;
}

.container.detail > .row:first-of-type,
.footer,
.gallery,
.header,
.header__brand,
.header__nav,
.header__searcher,
.header__security,
.navigation-link,
.tooltip {
    display: none !important;
}

.container {
    max-width: 100%;
}




/** 
 * PRINT > Index
    ========================================================================== */


.index__item:not(:has(.active)),
.index-carrousel__nav {
    display: none;
}

.index-carrousel__voice-list {
    column-count: 2;
}




/** 
 * PRINT > Landing page
    ========================================================================== */


.card-stand-out {
    break-inside: avoid;
    flex-direction: initial;
    outline: 1px solid;
}

.card-stand-out__body {
    background-color: #fff;
    color: #000;
    flex-grow: 1;
    position: static;
    width: auto;
}

.card-stand-out__extra-content {
    max-height: 100%;
}

.card-stand-out__image {
    height: auto;
    max-width: 10rem;
    width: 100%;
}

.landing-page-intro {
    background: none;
    padding-block: 0;
}

    .landing-page-intro * {
        max-width: 100%;
    }

.landing-page-intro__call-to-action {
    display: none;
}

.landing-page-stand-out__item {
    width: 100%;
}

.main-content p {
    max-width: 100%;
}




/** 
  * PRINT > List page
    ========================================================================== */


.results .list-group-item {
    page-break-inside: avoid;
}




/** 
 * PRINT > List page > Facets
 *
 * @markup
    <form class="facets">
        <a class="navigation-link">[img]</a>
        <div class="facets__header">
            <button class="facets__trigger" type="button">[text]</button>
            <button class="facets__clear" type="button">[text]</button>
        </div>
        <section class="facets__content">[accordion]</section>
    </form>
    ========================================================================== */


.facets {
    width: 100%;
}

.facets__header {
    display: none !important;
}




/** 
 * PRINT > List page > Facets > Accordion
 *
 * @markup
    <section class="facets__content accordion">
        <article class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button">[text]</button>
            </h2>
            <section class="accordion-collapse">[facet]</section>
        </article>
    </section>
    ========================================================================== */


.facets__content,
.facets__content .accordion-header {
    display: none;
}

    .facets__content .accordion-button {
        padding-block: 0;
    }

    .facets__content .accordion-collapse {
        display: initial;
        margin: 0;
    }

    .facets__content .accordion-button::after {
        background: none;
    }

    .facets__content:has(.facet-check__input:checked),
    .facets__content .accordion-collapse {
        display: block;
    }




/** 
 * PRINT > List page > Facets > Facet
 *
 * @markup
    <article class="facet">
        <h4 class="facet__title">[text]</h4>
        <ul class="list-group">                        
            <li class="d-flex">
                [facet-check]
                <span class="badge">[number]</span>
            </li>
            [li]
        </ul>                    
        <div class="see-more">[see-more]</div>
    </article>
    ========================================================================== */


.facet {
    --mdb-gutter-y: 0px;
}

    .facet:not(:has(.facet-check__input:checked)) {
        display: none;
    }

    .facet li {
        max-height: 0;
        overflow: hidden;
    }

        .facet li:has(.facet-check__input:checked),
        .facet li:has(.facet-check__input:checked) *:not(.facet-check__input) {
            display: inline !important;
        }

        .facet li:has(.facet-check__input:checked) {
            max-height: 100%;
        }

    .facet .badge::after {
        content: ')';
    }

    .facet .badge::before {
        content: '(';
    }

.facet-check__input {
    display: none !important;
}

.facet__title,
.facet__title + .list-group {
    display: inline;
}

.facet__title {
    border-top: 0 !important;
}

    .facet__title::after {
        content: ': ';
    }




/** 
 * PRINT > List page > Facets > Facet > Facet check
 *
 * @markup
    <div class="facet-check">
        <input[ checked] class="facet-check__input" type="checkbox" />
        <label class="facet-check__label">[text]</label>
    </div>
    ========================================================================== */


.facet-check {
    padding-left: 0;
}

.facet-check__input {
    display: none;
}




/** 
 * PRINT > List page > Facets > Facet > See more
 *
 * @markup
    <div class="see-more">
        <input class="see-more__trigger" type="checkbox">
        <ul class="see-more__target">                        
            <li class="d-flex">[facet-check]</li>
            [li]
        </ul>
        <label class="see-more__label">
            <span class="see-more__opened">[text]</span>
            <span class="see-more__closed">[text]</span>
        </label>
    </div>
    ========================================================================== */


.see-more,
.see-more__target {
    display: inline-flex;
    vertical-align: bottom;
}

    .see-more:not(:has(.facet-check__input:checked)),
    .see-more__label {
        display: none;
    }




/** 
 * PRINT > List page > Results
 *
 * @markup
    <section class="results">
        <div class="results__header">
            <p class="results__total">[text]</p>
            <div class="results__configuration">                    
                <div>
                    <select class="change-first">
                        <option value="[number]">[number]</option>
                        [option]
                    </select>
                </div>                    
                <form class="searcher">
                    <select class="form-select form-select-sm borderer-0 searcher__input searcher__trigger py-0">
                        <option>[text]</option>
                        [option]
                    </select>
                </form>
            </div>
        </div>
        <nav class="pagination">[pagination__pages]</nav>
        <ol>[li]</ol>
        <nav class="pagination">[pagination__pages]</nav>
    </section>
    ========================================================================== */


.pagination ~ .pagination {
    display: none !important;
}

.results {
    width: 100%;
}

.results__configuration {
    padding-right: 12ch;
}

    .results__configuration > * {
        align-items: center;
        display: flex;
    }

    .results__configuration > div::before {
        content: 'Voces:';
        font-size: 0.775rem;
    }

    .results__configuration .form-select {
        background: none;
        border-width: 0;
        box-shadow: none;
        font-family: inherit;
    }

    .results__configuration .searcher--only-order::before {
        content: 'Orden:';
        font-size: 0.775rem;
    }




/** 
 * PRINT > List page > Results > Pagination
 *
 * @markup
    <nav class="pagination">
        <ol class="pagination__pages">
            [<li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>
            <li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>]
            [<li class="pagination__page">[text]</li>]
            [<li class="pagination__page">
                <a class="pagination__page-link">[number]</a>
            </li>]
            [<li class="pagination__page">
                <span class="pagination__page-current">[number]</span>
            </li>]
            [<li class="pagination__page">
                <a class="pagination__page-link">[number]</a>
            </li>]
            [<li class="pagination__page">
                <span class="pagination__page-current">[number]</span>
            </li>]
            [<li class="pagination__page">[text]</li>]
            [<li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>
            <li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>]
        </ol>
    </nav>
    ========================================================================== */


.pagination {
    max-height: 0;
}

.pagination__page:not(:has(.pagination__page-current)) {
    display: none;
}

.pagination__page-current {
    border: none !important;
    display: block;
}

    .pagination__page-current::before {
        content: 'Página ';
        max-width: auto;
    }

.pagination__pages {
    font-weight: normal;
    transform: translateY(-2.5rem);
}




/** 
 * PRINT > Detail page
    ========================================================================== */


.detail__aside {
    width: 100%;
}

    .detail__aside:first-of-type {
        display: none;
    }

.detail__content,
.detail__extra-info {
    margin-block: 1rem;
    padding-top: 0.5rem;
}

.detail__extra-info {
    background-color: #fff;
    outline: 1px solid;
}

.detail__header {
    padding-bottom: 0.5rem;
}

.detail__image {
    height: auto !important;
    position: static !important;
}

.detail__info {
    width: 100%;
}

.related li {
    display: inline;
    margin-bottom: 0;
}

    .related li:not(:last-child)::after {
        content: ', ';
        white-space: pre;
    }

.related ul {
    display: block;
}




/** 
 * PRINT > Page Detail > Expandable Content (.expandable)
 *
 * BEM
 *  expandable
 *      __trigger
 *      __actuator
 *
 * @markup
    <article class="expandable">
        <input class="expandable__trigger" id="[text]" type="checkbox" />
        <label class="expandable__actuator" for="[.expandable__trigger#id]">[text]</label>
    </article>
    ========================================================================== */


.expandable {
    max-height: 100%;
}

.expandable__actuator {
    display: none;
}




@page {
    background-color: none;
    border-bottom: 1px solid;
    margin-block: 2rem 5rem;
    /*padding: 4rem 2%;
    padding: 0 2%;*/

    @bottom-left {
        font-size: min(10px, 0.75rem);
        padding-bottom: 1rem;
        white-space: pre-line;
    }

    @top-left {
        content: "Diccionario de la Zarzuela";
        font: var(--dizo-subheading-1-font);
        font-size: 16px;
        font-weight: normal;
        letter-spacing: var(--dizo-subheading-1-letter-spacing);
        margin-left: 1rem;
        /*padding-top: 2rem;*/
    }
}