/* =====================================================================
   app.css — variables-driven custom styles (+ large-text classes)
   All colours/fonts reference CSS variables set by Theme.php from the
   settings table. A Settings change updates the whole system.
   ===================================================================== */

:root {
    --slant: clamp(24px, 4vw, 64px);
}

/* ---- Base ---- */
body {
    font-family: var(--font-family), system-ui, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), Georgia, serif;
    letter-spacing: .5px;
}

.navbar, .nav-link, .btn, .badge, .small, .footer-heading, .sidebar-link {
    font-family: var(--font-ui), system-ui, sans-serif;
}

.btn {
    font-family: var(--font-ui), system-ui, sans-serif;
    letter-spacing: .3px;
}

/* ---- Italic accent words (reference site style) ---- */
em.accent {
    font-family: var(--font-heading), Georgia, serif;
    font-style: italic;
    color: var(--color-primary);
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-get-help {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    font-weight: 600;
}
.btn-get-help:hover,
.btn-get-help:focus {
    background-color: #c53a3f;
    border-color: #c53a3f;
    color: #fff;
}

.btn-quick-exit {
    background-color: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
    font-weight: 600;
}
.btn-quick-exit:hover,
.btn-quick-exit:focus {
    background-color: var(--color-muted);
    border-color: var(--color-muted);
    color: #fff;
}

/* ---- Cards ---- */
.card {
    background-color: var(--color-surface);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* ---- Sidebar ---- */
.app-sidebar {
    width: 240px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: .875rem;
    transition: background-color .2s;
}
.sidebar-link:hover,
.sidebar-link:focus {
    background-color: rgba(255,255,255,.06);
    color: var(--sidebar-text);
}
.sidebar-link[data-active="true"] {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}
.sidebar-divider {
    height: 1px;
    margin: .5rem 1rem;
    background: rgba(255,255,255,.08);
}

.app-main {
    min-height: 100vh;
    background: var(--color-bg);
}
.app-topbar {
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ---- Text size classes (from user_preferences.text_size) ---- */
body.text-large {
    font-size: 1.125rem;
}
body.text-large .small,
body.text-large .sidebar-link {
    font-size: .875rem;
}
body.text-xlarge {
    font-size: 1.25rem;
}
body.text-xlarge .small,
body.text-xlarge .sidebar-link {
    font-size: .9375rem;
}

/* ---- Low-data mode: hide cover images ---- */
body.low-data img[data-cover],
body.low-data .article-cover {
    display: none !important;
}

/* ---- Quick exit bar ---- */
.quick-exit-bar {
    pointer-events: auto;
}

/* ---- Floating help button ---- */
.floating-help-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    background-color: var(--color-danger);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: transform .2s;
}
.floating-help-btn:hover {
    transform: scale(1.05);
    color: #fff;
}

/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    padding: .5rem 1rem;
    z-index: 2000;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}

/* ---- Footer ---- */
.footer-link {
    color: var(--color-muted);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ---- Reveal animation (for scroll reveal) ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}