/**
 * CSS Normalize + Cross-Browser Reset
 * Provides consistent baseline styling across all browsers
 */

/* ============================================
   1. Modern CSS Reset (based on Andy Bell's reset)
   ============================================ */

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

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Prevent font size inflation on mobile */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* ============================================
   2. Remove animations for people who prefer not to see them
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   3. Focus visible for accessibility
   ============================================ */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ============================================
   4. Smooth scroll (with fallback detection in JS)
   ============================================ */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

/* ============================================
   5. Backdrop-filter fallback
   ============================================ */
.no-backdrop-filter .glassmorphism {
    background: rgba(30, 30, 50, 0.95) !important;
}

/* ============================================
   6. Flexbox gap fallback
   ============================================ */
.no-flexbox-gap .gap-2 > * + * { margin-left: 0.5rem; }
.no-flexbox-gap .gap-3 > * + * { margin-left: 0.75rem; }
.no-flexbox-gap .gap-4 > * + * { margin-left: 1rem; }
.no-flexbox-gap .gap-6 > * + * { margin-left: 1.5rem; }
.no-flexbox-gap .gap-8 > * + * { margin-left: 2rem; }

/* Vertical gaps for flex-col */
.no-flexbox-gap .flex-col.gap-2 > * + * { margin-left: 0; margin-top: 0.5rem; }
.no-flexbox-gap .flex-col.gap-3 > * + * { margin-left: 0; margin-top: 0.75rem; }
.no-flexbox-gap .flex-col.gap-4 > * + * { margin-left: 0; margin-top: 1rem; }
.no-flexbox-gap .flex-col.gap-6 > * + * { margin-left: 0; margin-top: 1.5rem; }

/* ============================================
   7. Gradient text fallback
   ============================================ */
.no-gradient-text .bg-clip-text {
    background: none !important;
    color: #a78bfa !important; /* Purple fallback */
}

/* ============================================
   8. CSS Variables fallback (if not supported)
   ============================================ */
.no-css-variables .text-purple-400 { color: #a78bfa; }
.no-css-variables .text-purple-300 { color: #c4b5fd; }
.no-css-variables .text-gray-200 { color: #e5e7eb; }
.no-css-variables .text-gray-300 { color: #d1d5db; }
.no-css-variables .text-gray-400 { color: #9ca3af; }
.no-css-variables .bg-slate-900 { background-color: #0f172a; }
.no-css-variables .bg-purple-900 { background-color: #581c87; }

/* ============================================
   9. Line-clamp fallback (for older browsers)
   ============================================ */
@supports not (-webkit-line-clamp: 3) {
    .line-clamp-3 {
        display: block;
        max-height: 4.5em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================
   10. Form elements normalization
   ============================================ */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

/* Remove inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Correct styling for input placeholder */
::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* ============================================
   11. Safari-specific fixes
   ============================================ */
/* Fix for Safari sticky positioning */
@supports (-webkit-overflow-scrolling: touch) {
    .sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ============================================
   12. Print styles
   ============================================ */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
}