/* =====================================================
   Sleep University — Layout (Duolingo-inspired)
   White backgrounds, clean grids, mobile bottom tabs
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--su-font);
    font-size: var(--su-text-base);
    line-height: var(--su-leading-normal);
    color: var(--su-grey-800);
    background: var(--su-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* ---- Header (navy, authoritative) ---- */
.su-header {
    background: var(--su-navy);
    height: var(--su-header-height);
    position: sticky;
    top: 0;
    z-index: 100;
}

.su-header-inner {
    max-width: var(--su-max-width);
    margin: 0 auto;
    padding: 0 var(--su-space-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.su-header-left {
    display: flex;
    align-items: center;
    gap: var(--su-space-lg);
}

.su-header-right {
    display: flex;
    align-items: center;
}

/* ---- Main ---- */
.su-main {
    flex: 1;
    width: 100%;
}

.su-container {
    max-width: var(--su-max-width);
    margin: 0 auto;
    padding: var(--su-space-2xl) var(--su-space-lg);
}

.su-container-narrow {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--su-space-2xl) var(--su-space-lg);
}

/* ---- Grid ---- */
.su-grid {
    display: grid;
    gap: var(--su-space-lg);
}

.su-grid-2 { grid-template-columns: repeat(2, 1fr); }
.su-grid-3 { grid-template-columns: repeat(3, 1fr); }
.su-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Footer (minimal) ---- */
.su-footer {
    background: var(--su-grey-50);
    border-top: 1px solid var(--su-grey-100);
    color: var(--su-grey-500);
    padding: var(--su-space-xl) 0;
    margin-top: auto;
    font-size: var(--su-text-sm);
}

.su-footer-inner {
    max-width: var(--su-max-width);
    margin: 0 auto;
    padding: 0 var(--su-space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-space-md);
}

.su-footer a {
    color: var(--su-grey-500);
    text-decoration: none;
    transition: color var(--su-transition-fast);
}

.su-footer a:hover { color: var(--su-teal); }

.su-footer-brand { font-weight: 700; }
.su-footer-brand a { color: var(--su-teal); }

.su-footer-right {
    display: flex;
    gap: var(--su-space-xl);
}

/* ---- Learn View Layout ---- */
.su-learn-layout {
    display: flex;
    min-height: calc(100vh - var(--su-header-height));
}

.su-learn-sidebar {
    width: var(--su-sidebar-width);
    background: var(--su-white);
    border-right: 2px solid var(--su-grey-100);
    overflow-y: auto;
    position: sticky;
    top: var(--su-header-height);
    height: calc(100vh - var(--su-header-height));
    flex-shrink: 0;
    transition: transform 0.3s var(--su-bounce);
}

.su-learn-content {
    flex: 1;
    padding: var(--su-space-2xl) var(--su-space-2xl);
    max-width: var(--su-content-width);
    margin: 0 auto;
    animation: fadeSlideIn 0.4s var(--su-spring);
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .su-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .su-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .su-grid-2, .su-grid-3, .su-grid-4 { grid-template-columns: 1fr; }

    .su-learn-sidebar {
        position: fixed;
        top: var(--su-header-height);
        left: 0;
        z-index: 90;
        transform: translateX(-100%);
        box-shadow: var(--su-shadow-xl);
    }

    .su-learn-sidebar.open { transform: translateX(0); }

    .su-learn-content { padding: var(--su-space-xl) var(--su-space-md); }

    .su-header-right { display: none; }

    .su-footer-inner { flex-direction: column; text-align: center; }

    /* Mobile bottom tab bar */
    .su-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--su-white);
        border-top: 2px solid var(--su-grey-100);
        z-index: 100;
        padding: var(--su-space-sm) 0 calc(var(--su-space-sm) + env(safe-area-inset-bottom));
    }

    .su-bottom-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: var(--su-space-xs) 0;
        text-decoration: none;
        color: var(--su-grey-400);
        font-size: 10px;
        font-weight: 700;
        transition: color var(--su-transition-fast);
    }

    .su-bottom-tab.active { color: var(--su-teal); }
    .su-bottom-tab-icon { font-size: 22px; }

    body { padding-bottom: 70px; }
}

@media (min-width: 769px) {
    .su-bottom-tabs { display: none; }
}

@media (max-width: 480px) {
    .su-container, .su-container-narrow { padding: var(--su-space-lg) var(--su-space-md); }
}