/* Global styles will go here */
body {
    background-color: #800020; /* Rich Burgundy */
    color: #f5f5dc; /* Off-white Parchment */
    font-family: 'Lora', serif; /* Lora for body text */
    /* Existing Inter font from body class in HTML will be overridden by this */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif; /* Cinzel for headings */
    color: #f5f5dc; /* Headings also use parchment, accents/borders will be silver */
}

/* Styling for Nav based on new palette */
nav {
    background-color: #800020 !important; /* Ensure burgundy, override Tailwind if present */
    border-bottom: 1px solid #c0c0c0; /* Silver border accent */
}
nav ul {
    /* display: flex; already handled by Tailwind */
    /* justify-content: center; /* Or space-around, etc. if desired */
}
nav a {
    color: #f5f5dc !important; /* Parchment for nav links, !important to override Tailwind if needed */
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-family: 'Cinzel', serif; /* Headings font for nav links */
}
nav a:hover {
    color: #800020 !important; /* Burgundy text on hover */
    background-color: #c0c0c0 !important; /* Silver background on hover */
}


/* Styles for the main content container */
.main-content {
  /* Desktop centering */
  margin-left: auto;
  margin-right: auto;
  max-width: 960px; /* Adjust as needed for your desktop design */
  padding: 20px; /* Optional: adds some spacing around the content */
  background-color: rgba(245, 245, 220, 0.05); /* Very subtle parchment wash for content on burgundy */
  /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */ /* Optional: adds a subtle shadow - consider removing or making it silver based */
  border: 1px solid #c0c0c0; /* Silver border for the main content area */
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.6); /* Slightly more pronounced silver shadow */
}

/* Media query for smaller screens (e.g., phones) */
@media (max-width: 768px) {
  .main-content {
    width: 100%;
    max-width: none; /* Override the desktop max-width */
    padding: 10px; /* Adjust padding for smaller screens if needed */
    /* box-shadow: none; */ /* Optional: remove shadow on mobile or adjust */
    border-left: none;
    border-right: none; /* Remove side borders on mobile for full-width feel */
  }
}

/* Chart container styles (from index.html and about.html) */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 320px;
    max-height: 400px;
    border: 1px solid #c0c0c0; /* Silver border for charts */
    padding: 10px;
    background-color: #c0c0c0; /* Silver background for charts */
}

@media (min-width: 768px) {
    .chart-container {
        height: 400px;
    }
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker overlay */
    z-index: 1000; /* Ensure it's on top */
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.lightbox-content {
    position: relative;
    background-color: #f5f5dc; /* Parchment background for the content box */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(192, 192, 192, 0.5); /* Silver shadow */
    max-width: 90vw; /* Max width relative to viewport width */
    max-height: 90vh; /* Max height relative to viewport height */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lightbox-img {
    max-width: 100%;
    object-fit: contain; /* Ensures image scales without distortion */
    /* Let the image shrink to fit the available space in the flex container. */
    flex: 1 1 auto;
    min-height: 0; /* Prevents flexbox sizing issues with images */
    display: block;
    margin-bottom: 15px; /* Space between image and caption */
    border: 3px solid #800020; /* Burgundy border for the image */
}

.lightbox-caption-container {
    color: #800020; /* Burgundy text for caption */
    text-align: center;
    max-height: 8.78rem; /* Limit caption height */
    overflow-y: auto; /* Allow scrolling for long captions */
    width: 100%;
}

#lightbox-description {
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background-color: #800020; /* Burgundy */
    color: #f5f5dc; /* Parchment */
    border: 1px solid #c0c0c0; /* Silver */
    cursor: pointer;
    font-size: 24px; /* Larger icons */
    font-weight: bold;
    padding: 5px 10px;
    z-index: 1001; /* Above lightbox content but below modal itself if needed */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background-color: #c0c0c0; /* Silver */
    color: #800020; /* Burgundy */
}

.lightbox-close {
    top: 10px;
    right: 15px;
    font-size: 30px; /* Make close button X larger */
}

.lightbox-prev {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.lightbox-next {
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

/* Responsive adjustments for lightbox controls */
@media (max-width: 768px) {
    .lightbox-content {
        padding: 15px;
    }
    /* #lightbox-img max-height override removed as flexbox handles sizing */
    .lightbox-prev, .lightbox-next {
        font-size: 20px;
        padding: 3px 7px;
    }
    .lightbox-close {
        font-size: 24px;
        top: 5px;
        right: 10px;
    }
    .lightbox-caption-container {
        max-height: 8.155rem; /* Adjust for smaller screens */
    }
}

/* Flow arrow styles (from index.html and about.html) */
.flow-arrow {
    /* color: #A133FF; */ /* Original color, updated inline in HTML for silver */
    font-size: 2rem;
    line-height: 1;
    color: #c0c0c0; /* Default to silver if not overridden inline */
}

/* Basic heading styles for about.html content - these will inherit the global Cinzel/Parchment */
.main-content main.grid .container h1 {
    font-size: 2.5rem; /* ~40px */
    font-weight: 700; /* Cinzel has weights, use them */
    margin-bottom: 1rem;
    /* color: #1e293b; */ /* slate-800 - Removed, will use global parchment */
}
.main-content main.grid .container h2 {
    font-size: 2rem; /* ~32px */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    /* color: #334155; */ /* slate-700 - Removed */
}
.main-content main.grid .container h3 {
    font-size: 1.5rem; /* ~24px */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* color: #475569; */ /* slate-600 - Removed */
}
.main-content main.grid .container h4 {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* color: #475569; */ /* slate-600 - Removed */
}
.main-content main.grid .container h5 {
    font-size: 1rem; /* ~16px */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* color: #475569; */ /* slate-600 - Removed */
}
.main-content main.grid .container h6 {
    font-size: 0.875rem; /* ~14px */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* color: #475569; */ /* slate-600 - Removed */
}
/* Paragraphs within about.html's specific container will use Lora via body style */
.main-content main.grid .container p {
    margin-bottom: 1rem;
    line-height: 1.6;
    /* color will be inherited parchment */
}

/* Ensure Tailwind's body background is still visible around the main-content */
/* body { */
    /* background-color: #f1f5f9; */ /* bg-slate-100 from body class - REMOVED FOR NEW STYLE */
    /* color: #334155; */ /* text-slate-800 from body class - REMOVED FOR NEW STYLE */
    /* font-family: 'Inter', sans-serif; */ /* Moved from inline style - REMOVED FOR NEW STYLE */
/* } */

/* Figure and Figcaption Styles for About page */
.main-content main.grid .container figure {
    margin-bottom: 1rem;
    border: 1px solid #c0c0c0; /* Silver border for figures */
    padding: 8px; /* Some padding around the image inside the border */
    background-color: rgba(0,0,0,0.15); /* Slightly darker overlay for figures to stand out */
    box-shadow: 0 0 5px rgba(192,192,192,0.3); /* Subtle silver shadow for figures */
}

.main-content main.grid .container figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

.main-content main.grid .container figcaption {
    font-size: 0.875rem;
    color: #f5f5dc !important; /* Parchment for figcaptions, important to override inline if any */
    margin-top: 0.5rem;
    line-height: 1.4;
    text-align: center; /* Center align captions */
}

/* Button Styling */
button, .button, input[type="button"], input[type="submit"] {
    background-color: #800020; /* Burgundy background */
    color: #f5f5dc; /* Parchment text */
    border: 1px solid #c0c0c0; /* Silver border */
    padding: 10px 20px;
    font-family: 'Cinzel', serif; /* Cinzel for buttons */
    cursor: pointer;
    text-transform: uppercase; /* Optional: for a more 'epic' feel */
    letter-spacing: 1px; /* Optional */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow */
}

button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #c0c0c0; /* Silver background on hover */
    color: #800020; /* Burgundy text on hover */
    box-shadow: 0 4px 8px rgba(192,192,192,0.5); /* Enhanced silver shadow on hover */
}

/* Styling for any elements that should look like containers or cards within sections */
.styled-container {
    border: 1px solid #c0c0c0; /* Silver border */
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: rgba(0,0,0,0.1); /* Slight dark overlay, similar to charts/figures */
    box-shadow: 0 0 5px rgba(192,192,192,0.3);
}


/* Utility Classes for Silver Accents and Borders */
.text-silver {
    color: #c0c0c0 !important; /* Ensure it overrides other text colors if needed */
}

.border-b-silver {
    border-bottom: 1px solid #c0c0c0;
}

.border-silver { /* General silver border */
    border: 1px solid #c0c0c0;
}

.border-silver-heavy { /* Heavier silver border for specific elements like table header row */
    border-bottom: 2px solid #c0c0c0;
}

/* Specific container style for highlighted evolution step */
.evolution-step-highlight {
    background-color: #c0c0c0;
    color: #800020; /* Burgundy text for contrast */
    border-color: #800020; /* Matching border for emphasis */
}
.evolution-step-highlight h3, .evolution-step-highlight p {
    color: #800020 !important; /* Ensure text inside also uses burgundy */
}

/* Flow arrow specific style (though it's already in .flow-arrow, this makes it explicit if needed elsewhere) */
.flow-arrow-silver {
    color: #c0c0c0;
}


/* Responsive considerations for floated figures */
@media (max-width: 768px) {
    figure[style*="float"] { /* Target figures with inline float styles */
        float: none !important; /* Disable float on smaller screens */
        width: 80% !important; /* Adjust width, e.g., 80% of container */
        max-width: 300px; /* Add a max-width to prevent them from becoming too large */
        margin-left: auto !important; /* Center the figures */
        margin-right: auto !important;
        margin-bottom: 1.5rem; /* Add more space between stacked figures */
    }

    /* Ensure paragraphs following a cleared float still have appropriate spacing */
    br[clear="all"] + p {
        margin-top: 1rem;
    }
    br[clear="all"] {
        display: none; /* Hide the clear element when floats are disabled */
    }
}

/* Hero Background Wrapper Styles */
.hero-background-wrapper {
    position: relative; /* Needed for the ::before pseudo-element to be positioned correctly */
    overflow: hidden; /* Ensures the pseudo-element doesn't bleed out if it's larger */
    min-height: 250px; /* Ensures visibility on smaller viewports where content might be sparse. */
}

.hero-background-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/cdn-cgi/image/width=1000,format=auto,quality=70,fit=cover/images/FirstDraftFolded.jpg'); /* Default image */
    background-size: cover;
    background-position: center;
    background-color: #333333; /* ADDED: Fallback color (dark gray) */
    opacity: 0.5;
    z-index: 0;
}

/* Ensure content within the hero-background-wrapper is above the pseudo-element */
.hero-background-wrapper > header,
.hero-background-wrapper > main, /* Applied to main within hero wrapper on index.html */
.hero-background-wrapper > section { /* Applied to section within hero wrapper on popupplayingcards.html */
    position: relative;
    z-index: 1;
}

/* Specific for Pop Up Playing Cards Page Hero */
/* This rule now only needs to change the background image */
.popup-hero-background::before {
    background-image: url('/cdn-cgi/image/width=1000,format=auto,quality=70,fit=cover/images/PopUpdPlayingCardWell.jpg'); /* Override for the popup page hero */
}