/* /assets/css/layout.css */

:root {
    --header-height: 300px;
    --inner-header-height: 92px;
    --sidebar-width: 300px;
    --footer-height: 56px;
    --main-padding: 16px;

    --color-bg: #ece6d7;
    --color-surface: #f4eedf;
    --color-surface-2: #e8dfc9;
    --color-surface-3: #dcd1b6;

    --color-primary: #264a2e;
    --color-primary-hover: #1d3823;
    --color-primary-soft: rgba(38, 74, 46, 0.16);

    --color-accent: #b9921f;
    --color-accent-hover: #d4ad37;
    --color-accent-soft: rgba(185, 146, 31, 0.18);

    --color-brown: #65573c;
    --color-brown-soft: rgba(101, 87, 60, 0.18);

    --color-text: #1d241d;
    --color-text-muted: #4e5d4f;
    --color-text-soft: #6c796d;

    --color-border: rgba(38, 74, 46, 0.18);
    --color-border-strong: rgba(38, 74, 46, 0.30);
    --color-shadow: rgba(0, 0, 0, 0.16);

    --page-bg:
        radial-gradient(circle at top left, rgba(38, 74, 46, 0.10), transparent 30%),
        radial-gradient(circle at bottom right, rgba(185, 146, 31, 0.08), transparent 24%),
        linear-gradient(180deg, #f6f1e4 0%, #ebe2cf 42%, #dfd4bb 100%);
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

img,
svg,
video,
iframe {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    align-items: stretch;
}

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

.site-sidebar {
    grid-area: sidebar;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1100;
}

.site-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    padding: var(--main-padding);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

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

body.page--home {
    overflow-x: hidden;
    overflow-y: auto;
}

body.page--home .site-shell {
    height: auto;
    min-height: 0;
    overflow: visible;
    align-items: start;
}

body.page--home .site-main {
    min-height: 0;
    overflow: visible;
}

body.page--home .site-footer {
    min-height: auto;
    height: auto;
}

body.page--home .site-sidebar > .sidebar {
    min-height: 100%;
}

@media (min-width: 1081px) {
    body.page--home .site-sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: var(--home-sidebar-safe-height, 100vh);
        max-height: var(--home-sidebar-safe-height, 100vh);
        overflow-y: auto;
        z-index: 1100;
    }
}

.site-sidebar-backdrop {
    display: none;
}

@media (max-width: 1080px) {
    :root {
        --sidebar-width: 272px;
        --header-height: 300px;
        --inner-header-height: 86px;
    }
}

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

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

    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(84vw, 318px);
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        transform: translateX(-104%);
        transition: transform 220ms ease;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1700;
    }

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

    body.is-sidebar-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .site-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(18, 22, 15, 0.56);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
        z-index: 1600;
    }

    body.is-sidebar-open .site-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .site-main {
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.page--home .site-shell {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.page--home .site-main {
        overflow: visible;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 360px;
        --inner-header-height: 72px;
        --main-padding: 10px;
    }
}

/* Site body JS drop-in animation */
body.is-page-drop-entering .site-shell {
    animation: siteBodyDropIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: top center;
    will-change: opacity, transform;
}

body.is-page-drop-entering.is-page-drop-reloading #site-main {
    animation: siteBodyDropIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: top center;
    will-change: opacity, transform;
}

@keyframes siteBodyDropIn {
    from {
        opacity: 0;
        transform: translate3d(0, -34px, 0) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-page-drop-entering .site-shell,
    body.is-page-drop-entering.is-page-drop-reloading #site-main {
        animation: none;
        opacity: 1;
        transform: none;
    }
}