/* ══════════════════════════════════════════════════════════
   Skippy's Pudding Palace — Custom Styles
   Palette: Midnight Blue (#040B18) + Mint (#4DD9B8)
   Fonts: Playfair Display (display) + Inter (body)
   ══════════════════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #040B18;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ─── Selection ─── */
::selection {
    background-color: rgba(77, 217, 184, 0.3);
    color: #ffffff;
}

/* ─── Focus Styles ─── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #4DD9B8;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─── Typography Scale ─── */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ─── Utility: Container ─── */
.container {
    max-width: 7rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ─── Section Spacing ─── */
section {
    position: relative;
}

/* ─── Image Handling ─── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}

/* ─── Print Styles ─── */
@media print {
    #navbar,
    #hamburger,
    #mobile-menu {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
}