@import url('theme.css');

/* ============================================
   GLOBALS & LAYOUT VARIABLES
   ============================================ */
:root {
    --app-navigation-width: 350px;
    --app-content-max-width: 80ch;
    --app-mobile-breakpoint: 1080px;
    --darkmode-background: #101219;
}

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

body {
    a {
        color: var(--wa-color-brand);
    }
}

@media (prefers-color-scheme: dark) {

    html,
    body.wa-cloak {
        background-color: var(--darkmode-background);
    }
}


/* ============================================
   WA-PAGE: THE MAIN SCAFFOLD
   ============================================ */
wa-page {
    /* Let the component handle its own background. We'll style the slots. */

    /* Define column widths for the desktop view */
    &[view='desktop'] {
        --menu-width: var(--app-navigation-width);
        --menu-padding: var(--wa-space-l);
    }

    /* Collapse columns on mobile. The 'auto' is key. */
    &[view='mobile'] {
        --menu-width: auto;
        --menu-padding: var(--wa-space-l) 0;
    }

    &::part(base) {
        background-color: var(--wa-color-surface-default);
    }
}

/* ============================================
   SLOT-LEVEL STYLING
   This is where you style the page regions.
   ============================================ */

/* The main page header */
header[slot='header'] {
    border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
    padding: var(--wa-space-s) var(--wa-space-m);

    /* The wa-split component inside provides the spacing, so we don't need much padding here. */
    a {
        color: var(--wa-color-text-normal);
        text-decoration: none;
    }
}

/* Styling for the mobile-only navigation header */
[slot='navigation-header'] {

    /* Ensure the link inside looks right */
    a {
        color: var(--wa-color-text-normal);
        text-decoration: none;
    }
}

/* The navigation sidebar/drawer */
[slot='navigation'] {
    padding: var(--menu-padding);
    /* Consistent padding for both mobile and desktop */

    /* Add a border ONLY on desktop view */
    wa-page[view='desktop'] & {
        border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
        overflow-y: auto;
        /* Ensure it can scroll independently */
    }
}

/* The main content area and its footer */
main {
    padding: var(--wa-space-m);
    /* padding-bottom: var(--wa-space-l); */
}

main:has(article),
main:has(.about) {
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding: var(--wa-space-l);

    a {
        &:hover {
            text-decoration: underline;
            text-decoration-color: var(--wa-color-brand);
            transition: text-decoration-color var(--wa-transition-normal) var(--wa-transition-easing);
        }
    }

    .purple {
        color: var(--wa-color-purple-on-quiet);
        background-color: var(--wa-color-purple-fill-normal);
    }
}

/* ============================================
   CONTENT & COMPONENT STYLING
   ============================================ */

/* Navigation list styling */
[slot='navigation'] {
    .nav-section {
        padding-bottom: var(--wa-space-l);
    }

    h2 {
        font-size: var(--wa-font-size-s);
        color: var(--wa-color-text-quiet);
        margin: 0 0 var(--wa-space-xs) 0;
    }

    ul {
        border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li a {
        display: block;
        padding: var(--wa-space-s) var(--wa-space-m);
        color: var(--wa-color-text-normal);
        text-decoration: none;
        border-radius: var(--wa-border-radius-m);
        transition: background-color var(--wa-transition-normal);
        /* --- ADD THESE THREE LINES FOR TRUNCATION --- */
        /* 1. Prevent text from wrapping to multiple lines */
        white-space: nowrap;
        /* 2. Hide any text that goes beyond the element's width */
        overflow: hidden;
        /* 3. Display an ellipsis to indicate hidden text */
        text-overflow: ellipsis;

        &:hover {
            background-color: var(--wa-color-surface-lowered);
        }

        &.current {
            font-weight: var(--wa-font-weight-bold);
            color: var(--wa-color-brand-on-loud);
            background-color: var(--wa-color-brand-fill-loud);
        }
    }
}

wa-button[data-toggle-nav] {
    &::part(base) {
        outline-color: transparent;
    }
}

/* ============================================
   MOBILE-SPECIFIC ADJUSTMENTS
   ============================================ */

/*
  THE PADDING SOLUTION:
  Use a media query matching your breakpoint to reduce padding on smaller screens.
  This is more reliable and direct than trying to do it all with component attributes.
*/
@media screen and (max-width: 1080px) {
    blockquote {
        /* Your original blockquote style is good here */
        font-size: var(--wa-font-size-m);
        padding: var(--wa-space-s) var(--wa-space-xs) var(--wa-space-s) var(--wa-space-m);
    }
}

/* ============================================
   VIEW TRANSITIONS
   ============================================ */

/* Enable view transitions for page navigation (MPA) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fade-out 300ms ease-out both;
    /* animation: fade-out-up 250ms cubic-bezier(0.65, 0.05, 0.35, 1); */
    /* ease-out */
}

::view-transition-new(root) {
    animation: fade-in 300ms ease-in both;
    /* animation: fade-in-up 250ms cubic-bezier(0.65, 0.05, 0.35, 1); */
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out-up {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -4rem, 0)
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 4rem, 0)
    }

    100% {
        opacity: 1;
        transform: translateZ(0)
    }
}