/*
 * app.css — mtg.scottliu.com
 *
 * Global base overrides for the MTG game theme (Lato font, green palette).
 * Loaded last so it wins over the suite (tokens → base → components → theme → app).
 *
 * Site-specific layout lives in the page CSS files loaded alongside this one:
 *   style.css     — Cube Analyzer  (/cube)
 *   scryfall.css  — Scryfall+       (/scryfall)
 *   deals.css     — Deals           (/deals, /deals/dismissed)
 */

/* Lato font (game-theme exception — overrides suite's Source Serif Pro body) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ===== BODY ===== */
html {
    background-color: var(--bg-main);
}
body {
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

/* Ensure main/containers are normal block elements, not flex/grid from suite */
main, .main-container, .container { display: block; }

/* Override suite's Source Serif Pro headings with Lato */
h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: var(--text-dark);
}

/* Override suite's fonts on interactive elements */
.btn, .toggle-btn, .text-input, button, input, select, textarea {
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* ===== SUITE COMPONENT SIZE OVERRIDES ===== */
/* Suite uses 18px base; MTG UI is compact at 14px */
.btn, .toggle-btn {
    font-size: 13px;
    line-height: 1.4;
    padding: 0.35em 1em;
}
.btn-large { font-size: 14px; padding: 0.6em 1.4em; }
.btn-small { font-size: 12px; padding: 0.3em 0.8em; }
.text-input { font-size: 14px; padding: 0.5em 0.75em; }

/* ===== LINKS / CODE ===== */
a { color: var(--text-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    background-color: var(--accent-weak);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ===== SHARED DARK GREEN HEADER ===== */
.page-header,
.scryfall-header {
    background-color: var(--bg-contrast);
    color: var(--search-text);
    padding: 0.85rem 2rem;
    box-shadow: var(--shadow-md);
}

/* .page-header (Cube Analyzer) has items as direct children — flex them here */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

.header-content {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;   /* never stack header items vertically */
}

.site-logo,
.page-header h1 {
    font-size: 14px;
    font-weight: 700;
    color: var(--search-text);
    text-decoration: none;
    white-space: nowrap;
}
.site-logo:hover { text-decoration: none; opacity: 0.9; }

/* .site-title — section-head variant used in the dark header for page identity */
.site-title {
    font-family: var(--font-head, "Lato", sans-serif);
    font-size: var(--text-md, 0.95rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--search-text) !important;  /* override suite .section-head ink-soft */
    border-bottom: none !important;        /* suppress suite .section-head border */
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.site-title:hover { text-decoration: none; opacity: 0.9; }

.nav-links { display: flex; gap: 1.5rem; align-items: center; }

.nav-link {
    font-size: 14px;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-fast, 180ms);
}
/* Force white on dark header — suite base.css would set accent color */
.scryfall-header .nav-link,
.page-header .nav-link { color: var(--search-text); text-decoration: none; }
.scryfall-header .nav-link:hover,
.page-header .nav-link:hover {
    color: var(--search-text);
    text-decoration: none;
    border-bottom-color: var(--search-text);
}
.scryfall-header .nav-link.is-active,
.page-header .nav-link.is-active { border-bottom-color: var(--accent); }

/* Buttons in the dark header need white border+text to be visible */
.scryfall-header .btn,
.page-header .btn { border-color: var(--search-text); color: var(--search-text); }
.scryfall-header .btn:hover,
.page-header .btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--search-text);
    color: var(--search-text);
    transform: none;
    box-shadow: none;
}

/* ===== SHARED MAIN CONTAINER ===== */
.container,
.main-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 2rem;
}

/* ===== EMPTY STATE ===== */
/* Override suite's .empty-state to restore large icon */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
}
.empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.3; display: block; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; }
.empty-state-text { font-size: 14px; color: var(--text-light); }
/* Span full grid width when inside a card grid */
#deals-grid .empty-state,
.card-grid-scryfall .empty-state,
.card-grid-fixed .empty-state { grid-column: 1 / -1; }

/* ===== RESPONSIVE (shared) ===== */
@media (max-width: 768px) {
    .page-header, .scryfall-header { padding: 0.85rem 1rem; }
    .header-content { flex-direction: column; gap: 0.75rem; }
    .nav-links { width: 100%; justify-content: center; }
    .container, .main-container { padding: 1rem; }
}