/**
 * Download cards for files attached inside topic content.
 *
 * One stylesheet, three places: the reader page, the admin content view, and
 * the TinyMCE editing iframe (loaded through `content_css`), so what the writer
 * sees while writing is what the reader gets.
 *
 * The markup comes from static/js/content_files.js:
 *
 *   <a class="content-file" href="/download_file/12" download>
 *     <span class="content-file-icon" data-ext="docx">DOCX</span>
 *     <span class="content-file-text">
 *       <span class="content-file-name">worksheet.docx</span>
 *       <span class="content-file-meta">Word document · 9 KB</span>
 *     </span>
 *     <span class="content-file-action">Download</span>
 *   </a>
 *
 * Cards written before the redesign have an arrow glyph in the tile and no
 * action button; every rule below degrades cleanly without them.
 */

.content-file-wrap {
    margin: 0;
}

.content-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 30rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(93, 64, 55, 0.14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(45, 27, 20, 0.04);
    color: #2d1b14;
    text-decoration: none;
    line-height: 1.4;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.content-file:hover,
.content-file:focus {
    border-color: #ff7043;
    box-shadow: 0 8px 24px rgba(93, 64, 55, 0.13);
    transform: translateY(-1px);
    color: #2d1b14;
    text-decoration: none;
}

.content-file:focus-visible {
    outline: 2px solid #ff7043;
    outline-offset: 3px;
}

/* ── The type tile ──────────────────────────────────────────────────────
   Shows the extension, so the reader knows what they are getting before
   they click. Colour-coded by family; the brand orange is the fallback. */
.content-file-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: #ff7043;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, sans-serif;
}

.content-file-icon[data-ext="pdf"]  { background: #e5484d; }
.content-file-icon[data-ext="doc"],
.content-file-icon[data-ext="docx"],
.content-file-icon[data-ext="odt"]  { background: #2b6cb0; }
.content-file-icon[data-ext="xls"],
.content-file-icon[data-ext="xlsx"],
.content-file-icon[data-ext="csv"],
.content-file-icon[data-ext="ods"]  { background: #2f855a; }
.content-file-icon[data-ext="ppt"],
.content-file-icon[data-ext="pptx"] { background: #dd6b20; }
.content-file-icon[data-ext="zip"],
.content-file-icon[data-ext="rar"],
.content-file-icon[data-ext="7z"]   { background: #b7791f; }
.content-file-icon[data-ext="png"],
.content-file-icon[data-ext="jpg"],
.content-file-icon[data-ext="jpeg"],
.content-file-icon[data-ext="gif"],
.content-file-icon[data-ext="webp"] { background: #6b46c1; }
.content-file-icon[data-ext="mp3"],
.content-file-icon[data-ext="mp4"]  { background: #0987a0; }

/* ── Name and type ─────────────────────────────────────────────────────── */
.content-file-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.content-file-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #2d1b14;
    overflow-wrap: anywhere;
}

.content-file-meta {
    font-size: 0.8rem;
    color: #7a6a63;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ── The download affordance ───────────────────────────────────────────── */
.content-file-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: #fff1ea;
    color: #d84315;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.content-file:hover .content-file-action,
.content-file:focus .content-file-action {
    background: #ff7043;
    color: #fff;
}

/* Narrow screens: the pill loses its label and keeps the arrow. */
@media (max-width: 30rem) {
    .content-file {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    .content-file-action-label {
        display: none;
    }
}

/* Inside the editor the card is a single unit to select and delete, not
   something to click into. */
.mce-content-body .content-file {
    position: relative;
    cursor: default;
}

/* Hidden on the reader page so existing cards look the same. Shown only
   inside TinyMCE so a writer can take an upload back out. */
.content-file-remove {
    display: none;
}

.mce-content-body .content-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    border: 1px solid rgba(93, 64, 55, 0.16);
    background: #fff;
    color: #7a6a63;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(45, 27, 20, 0.12);
    user-select: none;
}

.mce-content-body .content-file-remove:hover {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}