/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. ROOT / VARIABLES
   2. BASE & RESET
   3. UTILITIES
   4. LAYOUT
   5. NAVIGATION
   6. HEADER / HERO SECTION
   7. MAIN CONTENT SECTIONS
   8. COMPONENTS
      - Gallery
      - Exhibitions List
      - Lightbox
      - Filter Buttons
   9. FOOTER
   10. MEDIA QUERIES (RESPONSIVE STYLES)
   ========================================================================== */



/* ==========================================================================
   1. ROOT / VARIABLES
   ========================================================================== */

:root {
	--font-primary: "Cormorant Garamond", "Cormorant Garamond Fallback", Garamond, serif;
    /* Define colors and ../fonts here in the future for easy changes */
    --color-text: #333;
    --color-background: #F3F4F6;
    /* ACCESSIBILITY FIX: Changed to a darker blue for better contrast */
    --color-accent: #0059b3;
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Font-family inherited from inlined CSS */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden; /* Prevents horizontal scroll issues */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
	font-family: inherit;
}


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* For accessibility with "opens in new tab" links and screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
    max-width: 50rem;
    padding: 0 1.6rem;
    margin: 0 auto;
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

#navbar {
    /* Ensure the navbar is on top of content and spans full width */
    z-index: 1000;
}

#navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    /* Merged padding from mobile rules for tighter look */
    padding: 0.8rem 0.5rem; 
    /* CRITICAL CHANGE: Allow items to wrap and auto-adjust height */
    flex-wrap: wrap; 
    height: auto; 
    align-items: center;
}

/* Define the size and spacing of the main nav items (Now applied globally) */
#navbar ul > li {
    /* Merged margin from mobile rules for tighter spacing */
    margin: 0 0.5rem; 
    width: auto; 
    flex-shrink: 0; /* Ensures items don't shrink smaller than content */
}

#navbar a {
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
    display: inline-block;
}

#navbar a:hover {
    color: #555;
}

/* --- DROPDOWN ADDITIONS --- */

/* Parent LI must be relative to position the dropdown absolutely */
#navbar .has-dropdown {
    position: relative;
    /* CRITICAL FIX for width: forces the flex item to shrink-wrap its content (the link) */
    display: inline-block;
    width: auto;
}

/* Style the Dropdown Menu container */
.dropdown-menu {
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
    
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%); /* Center the dropdown horizontally under its parent LI */
    
    background: var(--color-background);
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: max-content; 
    padding: 0.5rem 0;
    z-index: 1010; 
    text-align: center;
    
    display: flex;
    flex-direction: column;
}

/* Style the links inside the dropdown */
.dropdown-menu li {
    margin: 0; 
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem; 
    font-weight: 400;
    white-space: nowrap;
    width: 100%; 
}

/* Highlight dropdown items on hover/focus */
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: var(--color-accent); 
    background: #f0f0f0;
}

/* Show the dropdown menu on hover or when a focusable element within it is active (:focus-within) */
#navbar .has-dropdown:hover .dropdown-menu,
#navbar .has-dropdown:focus-within .dropdown-menu {
    visibility: visible;
    opacity: 1;
}

/* Adjust the main nav link hover color so it doesn't clash with the dropdown list hover */
#navbar .has-dropdown > a:hover {
    color: var(--color-text);
}
/* --- END DROPDOWN ADDITIONS --- */


/* ==========================================================================
   6. HEADER / HERO SECTION
   ========================================================================== */

#hero-featured {
    /* Styles are mostly inlined for immediate visual presentation */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#hero-featured .featured-image.is-loaded {
    /* Apply the animation once the image is loaded */
    animation: fadeIn 1.2s ease-in-out forwards;
    opacity: 1; /* Ensure final state is visible */
}

#hero-featured .hero-content {
    flex-shrink: 0;
}

#hero-featured h1 {
    /* Styles are mostly inlined for immediate visual presentation */
}

#hero-featured .featured-image {
    /* Styles are mostly inlined for immediate visual presentation */
}

#hero-featured .featured-image img {
    /* Styles are mostly inlined for immediate visual presentation */
}

#hero-featured .caption {
    /* Styles are mostly inlined for immediate visual presentation */
}


/* ==========================================================================
   7. MAIN CONTENT SECTIONS
   ========================================================================== */

.section {
	padding-bottom: 2rem;
    /* Ensure content starts below the (now potentially wrapped) header */
    scroll-margin-top: 4rem; 
}

.section h2 {
    text-align: center;
    font-size: 1.618rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.section p {
    text-align: left;
    margin-bottom: 1.6em;
}

.section-about {

}

.section-contact {
    text-align: center;
}

.section-contact a {
	color: var(--color-accent);
	text-decoration: underline;
}

details {
    /* margin-bottom: 1em; */
}

summary {
	text-align: center;
    font-weight: 700;
    cursor: pointer;
}

/* style for C.V. */
.curriculum-vitae dt {
	font-weight: 700;
}

.curriculum-vitae .date-range {
	font-weight: 700;
}

/* ==========================================================================
   8. COMPONENTS
   ========================================================================== */

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding-top: 1.6rem;
}

.gallery-item {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
}

.gallery-item .caption {
    margin-top: 0.5rem;
}

/* Exhibitions List */
.exhibitions-list {
    list-style: none;
    text-align: left;
}

.exhibitions-list li {
    margin-bottom: 0.75rem;
}

/* --- Exhibition Cards (NEW) --- */

/* Parent container for each exhibition entry */
.exhibition-statement-block {
    background: #fff; /* Use white background to make it stand out from page background */
    padding: 2rem;
    margin-bottom: 2.5rem; /* Spacing between cards */
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 4px; /* Subtle rounding */
}

/* Layout for image and text */
.media-text-container {
    display: flex;
    flex-direction: column; /* Default stack on mobile/narrow screens */
    gap: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Image/Media Placeholder Styling */
.media-placeholder {
    /* Use a fixed, smaller width for the image on desktop */
    min-width: 200px; 
    max-width: 300px;
    flex-shrink: 0;
}

.media-placeholder img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Formatting for Curated By / Acknowledgements lists */
.curated-by,
.press-section,
.acknowledgements {
    font-size: 0.95rem;
}

.press-section {
	margin-top: 1rem;
}

.curated-by-list,
.acknowledgements-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
}

.curated-by-list li,
.acknowledgements-list li {
    margin-bottom: 0.25rem;
}
/* --- END Exhibition Cards (NEW) --- */


/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(243, 244, 246, 0.98);
    display: none; /* Toggled by JS */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 1rem;
}

.lightbox.active {
    display: flex;
}

.lightbox-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 95vh;
    text-align: center;
}

.lightbox-img {
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.lightbox-caption {
    padding: 1rem;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: -10px;
    right: 0;
    background: none;
    border: none;
    font-size: 2.5rem;
    font-weight: 300;
    color: #555;
    cursor: pointer;
    z-index: 10;
    padding: 0.25rem;
    line-height: 1;
}

.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem 0.5rem;
    z-index: 2001;
    transition: background 0.2s;
    border-radius: 4px;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* Filter Buttons */
.filter-group {
    margin-bottom: 1rem;
}

.filter-btn {
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
}

.filter-btn.active {
    background: #222;
    color: #fff;
    border-color: #222;
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

#footer {
    padding: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}


/* ==========================================================================
   10. MEDIA QUERIES (RESPONSIVE STYLES)
   ========================================================================== */
   
/* Removed the max-width: 768px media query block 
   and applied critical mobile styles globally in section 5. NAVIGATION */