/* Custom styles to match the vision board */
body {
    background-color: #FDF6E3;
    /* Beige neutral background */
    /* NEW: Adds a subtle, repeating linear texture like old newsprint */
    background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 1px 2px;
    /* Controls the thickness and spacing of the lines */
    font-family: 'Merriweather', serif;
    color: #2c2c2c;
    /* Faded black/sepia */
}

/* Force header to always stay on top */
header {
    z-index: 1000 !important;
    /* Fallback if Tailwind fails */
    background-color: white;
}

/* Typography from the vision board */
.font-headline {
    font-family: 'Playfair Display', serif;
}

.font-subhead {
    font-family: 'Bebas Neue', sans-serif;
}

.font-body {
    font-family: 'Merriweather', serif;
}

/* Color Palette from the vision board */
:root {
    --pop-red: #EF4444;
    --pop-yellow: #FBBF24;
    --pop-cyan: #22D3EE;
    --pop-magenta: #EC4899;
    --pop-teal: #14B8A6;
    --neutral-offwhite: #F8F7F4;
    --neutral-beige: #FDF6E3;
    --neutral-sepia: #4a4238;
}

/* Halftone dot effect for backgrounds */
/* Halftone dot effect for backgrounds */
.halftone-bg {
    /* 1. Set a solid background color explicitly so content doesn't show through */
    background-color: #ffffff;

    /* 2. Use background-image instead of 'background' so we don't overwrite the color */
    background-image:
        radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px),
        radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);

    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

/* Simulating cut-out photo effect */
.cutout-image {
    filter: grayscale(80%) contrast(1.2);
    transition: all 0.3s ease-in-out;
}

.cutout-image:hover {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.02);
}

/* Collage effect for story cards */
.story-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0px var(--neutral-sepia);
}

/* --- RESTORED: Comic Style Navigation (Always Visible & No Overlap) --- */

.nav-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1rem;
    /* REDUCED: Vertical padding for a "thinner" look */
    margin: 0.5rem 0.25rem;
    /* NEW: Added vertical margin for spacing */
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    transform: skew(-10deg);
    /* NEW: Adds a dynamic comic-panel skew */
    z-index: 1;
}

.nav-button .nav-text {
    position: relative;
    z-index: 2;
    /* Keep text on top */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    /* REDUCED: Slightly smaller font */
    letter-spacing: 0.05em;
    color: white;
    text-shadow: 2px 2px 0px black;
    /* The transform: skew(10deg); property has been removed to match your screenshot */
}

/* Pseudo-element for the comic background */
.nav-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10% 25% 15% 30% / 30% 15% 25% 10%;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

/* Pseudo-element for the black border */
.nav-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid black;
    border-radius: 10% 25% 15% 30% / 30% 15% 25% 10%;
    z-index: 1;
}


/* --- Hover and Active Effects --- */
.nav-button:hover {
    transform: scale(1.05) skew(-10deg);
    /* Keep skew on hover */
}

.nav-button.active::before {
    filter: brightness(1.15);
}


/* --- Individual Beat Colors --- */
.nav-red::before {
    background-color: #EF4444;
}

/* Red */
.nav-blue::before {
    background-color: #2563EB;
}

/* Dark Blue */
.nav-purple::before {
    background-color: #9333EA;
}

/* Purple */
.nav-pink::before {
    background-color: #EC4899;
}

/* Bright Pink */
.nav-green::before {
    background-color: #16A34A;
}

/* Green */
.nav-button[onclick*="showPage('about')"]::before,
.nav-button[href*="#about"]::before {
    background-color: var(--neutral-sepia);
}

/* FIX: Prevent child elements from blocking the link click */
.nav-button>*,
.nav-button::before,
.nav-button::after {
    pointer-events: none;
}

/* --- NEW: Search Form Styles --- */
.search-form .search-field {
    width: 180px;
    /* Default width */
    transition: all 0.3s ease-in-out;
    padding-right: 2.75rem;
    /* Make space for the icon button */
    background-color: var(--neutral-beige);
    /* Make sure text is visible */
    color: var(--neutral-sepia);
    font-size: 0.9rem;
}

/* Optional: Make the search bar expand on focus */
.search-form .search-field:focus {
    width: 250px;
    background-color: white;
}

/* Style for screen-reader-only labels */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Blog Post Typography Improvements */

/* Paragraph Spacing and Indentation */
.prose p {
    margin-bottom: 1.5em;
    /* Ensure spacing between paragraphs */
    text-indent: 2em;
    /* Add indentation as requested */
    line-height: 1.8;
    /* Improve readability */
}

/* Remove indent for the first paragraph */
.prose>p:first-of-type {
    text-indent: 0;
}

/* Drop Cap for the first letter of the first paragraph */
.prose>p:first-of-type::first-letter {
    float: left;
    font-family: 'Playfair Display', serif;
    /* Use the headline font */
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    padding-top: 0.1em;
    color: var(--pop-red);
    /* Use theme color */
}

/* Blockquote Styling */
.prose blockquote {
    border-left: 4px solid var(--pop-yellow);
    background-color: rgba(251, 191, 36, 0.1);
    /* Light yellow background */
    padding: 1em 1.5em;
    margin: 2em 0;
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-size: 1.2em;
    color: var(--neutral-sepia);
}

/* Make headings pop a bit more inside the content */
.prose h2,
.prose h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}