/* /assets/css/layout.css */
:root {
    --header-height: 82px;
    --footer-height: 56px;
    --main-padding: 16px;

    --color-bg: #111111;
    --color-surface: #1a1410;
    --color-surface-2: #241a14;
    --color-surface-3: #2e2118;

    --color-primary: #a61e2a;
    --color-primary-hover: #8c1823;
    --color-primary-soft: rgba(166, 30, 42, 0.16);

    --color-accent: #d4a63a;
    --color-accent-hover: #be922e;
    --color-accent-soft: rgba(212, 166, 58, 0.18);

    --color-brown: #6b4a2e;
    --color-brown-soft: rgba(107, 74, 46, 0.22);

    --color-text: #f3e7c9;
    --color-text-muted: #d8c7a1;
    --color-text-soft: #bfae89;

    --color-border: rgba(212, 166, 58, 0.18);
    --color-border-strong: rgba(212, 166, 58, 0.32);
    --color-shadow: rgba(0, 0, 0, 0.38);

    --page-bg:
        radial-gradient(circle at top left, rgba(166, 30, 42, 0.10), transparent 30%),
        radial-gradient(circle at bottom right, rgba(212, 166, 58, 0.08), transparent 24%),
        linear-gradient(180deg, #120e0b 0%, #1a1410 42%, #0f0b09 100%);
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--page-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

.site-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
    min-height: 100vh;
    min-height: 100dvh;
}

.site-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
}

.site-sidebar {
    display: none;
}

.site-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    padding: var(--main-padding);
    box-sizing: border-box;
    overflow-x: hidden;
}

.site-footer {
    grid-area: footer;
    min-height: var(--footer-height);
    width: 100%;
    position: relative;
    z-index: 1200;
}

@media (max-width: 900px) {
    :root {
        --header-height: 86px;
        --footer-height: 54px;
        --main-padding: 14px;
    }

    .site-sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: min(88vw, 320px);
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.is-sidebar-open .site-sidebar {
        transform: translateX(0);
    }

    .site-main {
        padding: 12px;
    }
}


/* iPad/tablet hard layout repair */
@media (min-width: 901px) and (max-width: 1366px) and (pointer: coarse) {
    html,
    body {
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        padding-top: var(--site-header-live-height, 86px);
        background: var(--page-bg) !important;
    }

    .site-shell {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        background: var(--page-bg) !important;
    }

    .site-main {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }
}