/* ==========================================================================
   Kufer Page Download

   Deliberately restrained styling of its own instead of the layout's .btn
   classes: their btn-secondary carries a glowing ring in dark mode, which is
   too loud for a download bar.

   Every colour goes through the kufer_layout tokens WITH a fallback, so the
   extension still looks reasonable without that layout.

   Contrast measured: text 16.8:1 (light) and 12.9:1 (dark), icons 6.8:1 and
   11.0:1.
   ========================================================================== */

.page-download__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-download__item {
    margin: 0;
}

.page-download__heading {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

/* PDF is a <button> (it triggers the print dialogue), every other format is
   an <a>. Both must start from the same neutral base, otherwise the button
   keeps its browser default box and the "links" appearance still shows a grey
   rectangle. The "buttons" variant below adds the chip styling back. */
.page-download__action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text, #1d1d1f);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Icons in the accent colour. Deliberately --alert-primary-text and not
   --primary: the latter only reaches 2.41:1 on a light surface and would miss
   the 3:1 required for graphical elements (WCAG 1.4.11). In dark mode the
   same token points at --primary-dark. */
.page-download__action .bi {
    color: var(--alert-primary-text, #076570);
    font-size: 1.05em;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   "Buttons" variant - a calm chip on the surface colour, no ring
   -------------------------------------------------------------------------- */
.page-download--buttons .page-download__action {
    padding: 0.55rem 1.15rem;
    background: var(--surface, #fff);
    border: 1px solid var(--card-border-color, rgba(128, 128, 128, 0.26));
    border-radius: var(--radius-pill, 999px);
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

@media (hover: hover) {
    .page-download--buttons .page-download__action:hover {
        border-color: var(--primary, #10b8c7);
        transform: translateY(-1px);
    }
}

/* --------------------------------------------------------------------------
   "Links" variant - recognisable as a link, not by colour alone (WCAG 1.4.1)
   -------------------------------------------------------------------------- */
.page-download--links .page-download__list {
    gap: 0.4rem 1.4rem;
}

.page-download--links .page-download__action {
    text-decoration: underline;
}

@media (hover: hover) {
    .page-download--links .page-download__action:hover {
        color: var(--alert-primary-text, #076570);
    }
}

/* Let the layout's focus ring sit cleanly around the chip. */
.page-download__action:focus-visible {
    outline-offset: 3px;
}

@media print {
    /* A download bar is pointless on paper - and when the PDF is produced
       through the print dialogue it would otherwise end up in the document. */
    .page-download {
        display: none;
    }
}