/*!
 * @file download_button.css
 * @brief Styles for the Download dropdown button in the Shibuya theme header bar (A9OD-607)
 * @details Provides styles for the expandable Download button that offers offline HTML ZIP
 *          and/or PDF download links. The button appears in `.sy-head-actions` and is
 *          hidden in print media.
 * @author STMicroelectronics
 * @copyright Copyright (c) 2026 STMicroelectronics.
 *            All rights reserved.
 *            This software is licensed under SLA0044 terms that can be found at:
 *            https://www.st.com/SLA0044
 *            or in the LICENSE.md file in the root directory of this software component.
 */

/* ============================================================
   Download button wrapper
   Relative positioning anchors the absolute dropdown panel.
============================================================ */
.sy-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   Trigger button
   Ghost style consistent with other sy-head-actions controls.
   Meets WCAG 2.5.5 minimum touch target (44×44 px ≈ 2.75rem).
============================================================ */
.sy-download-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--sy-c-text);
    cursor: pointer;
    font-family: var(--sy-f-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    min-height: 2.75rem;
    transition: background-color 0.15s ease;
}

.sy-download-trigger:hover {
    background-color: var(--sy-c-surface);
}

.sy-download-trigger:focus-visible {
    outline: 2px solid var(--sy-c-link);
    outline-offset: 2px;
}

/* ============================================================
   Download cloud icon
============================================================ */
.sy-download-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Dark mode: invert the dark-navy icon to a light tone (same treatment as .sy-support-icon) */
html.dark .sy-download-icon {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.9;
}

/* ============================================================
   Dropdown panel
   Anchored below-right of the trigger; z-indexed above content.
============================================================ */
.sy-download-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 100;
    background: var(--sy-c-background);
    border: 1px solid var(--sy-c-border);
    border-radius: 0.375rem;
    box-shadow: var(--sy-dropdown-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
    list-style: none;
    margin: 0;
    min-width: 12rem;
    padding: 0.25rem 0;
}

/* The HTML `hidden` attribute hides by default; this guards against reset stylesheets */
.sy-download-panel[hidden] {
    display: none;
}

/* ============================================================
   Individual download link items
============================================================ */
.sy-download-item {
    color: var(--sy-c-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
    white-space: nowrap;
}

/* File-type icon inside each download item */
.sy-dl-type-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.sy-download-item:hover,
.sy-download-item:focus {
    background-color: var(--sy-c-surface);
    color: var(--sy-c-text);
    text-decoration: none;
}

.sy-download-item:focus-visible {
    outline: 2px solid var(--sy-c-link);
    outline-offset: -2px;
}

/* ============================================================
   Mobile (< 768px): show icon only to save header space
============================================================ */
@media (max-width: 767px) {
    .sy-download-trigger > span {
        display: none;
    }
}

/* ============================================================
   Print: hide the download button entirely
============================================================ */
@media print {
    .sy-download-btn {
        display: none;
    }
}