/*
   MangaDex App - PageDrop Theme Switcher CSS
   v1.0.2
   Colors taken from the original mangadexapp.org design:
   dark navy background + orange (#ff6740) accent
*/

:root {
    /* Backgrounds - dark navy family from the original site */
    --bg-primary: #0e1520;
    --bg-secondary: #141d2b;
    --bg-card: #1a2536;
    --bg-elevated: #223046;
    --bg-input: #121a27;

    /* Text */
    --text-primary: #e9edf2;
    --text-secondary: #a8b2c1;
    --text-muted: #6f7b8d;
    --text-heading: #ffffff;

    /* Accent - the original orange */
    --accent: #ff6740;
    --accent-hover: #ff7d5c;
    --accent-light: rgba(255, 103, 64, 0.15);
    --accent-glow: rgba(255, 103, 64, 0.3);

    /* Status colors */
    --success: #2ecc71;
    --warning: #ffb901;
    --danger: #e74c3c;
    --info: #3498db;

    /* Borders */
    --border: #263349;
    --border-light: #1c2738;
}

/* ============================================
   v1.0.1 - Fix: buttons inside post content
   The theme rule ".post-content a" overrides button text color,
   making button labels invisible (accent on accent).
   These higher-specificity rules restore correct button colors.
   ============================================ */

.post-content a.btn {
    text-decoration: none;
}

.post-content a.btn-primary,
.post-content a.btn-primary:hover,
.post-content a.btn-success,
.post-content a.btn-success:hover,
.post-content a.btn-danger,
.post-content a.btn-danger:hover {
    color: #fff;
}

.post-content a.btn-secondary {
    color: var(--text-primary);
}

.post-content a.btn-secondary:hover {
    color: var(--text-heading);
}

.post-content a.btn-outline {
    color: var(--accent);
}

.post-content a.btn-outline:hover {
    color: #fff;
}

.post-content a.btn-ghost {
    color: var(--text-secondary);
}

.post-content a.btn-ghost:hover {
    color: var(--text-heading);
}

/* ============================================
   v1.0.2 - Uniform screenshot grids
   Images inside a grid can have different source sizes;
   these rules normalize them into equal tiles so the
   screenshots section stays aligned.
   ============================================ */

.grid > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Broken/missing images: keep the tile shape instead of a tiny icon */
.grid > img:-moz-broken {
    opacity: 0;
}