/* ============================================
   MODERNIZED CSS FOR HANK LACY PHOTOGRAPHY
   Updated: December 2025
   ============================================ */

/* CSS VARIABLES - Easy theming and consistency */
:root {
    --color-primary: #551A00;
    --color-primary-light: #8b4513;
    --color-secondary: #E7E2BE;
    --color-accent: #C7E8FC;
    --color-visited: #C8DBFC;
    --color-active: #EEAF87;
    --color-text: #3a3a3a;
    --color-background: #f8f6f3;
    
    --font-display: 'Playfair Display', 'Tangerine', serif;
    --font-script: 'Cormorant Garamond', 'Tangerine', cursive;
    --font-body: 'Crimson Text', Georgia, serif;
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    --border-radius: 8px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #f8f6f3 0%, #ebe8e1 100%);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
}

/* Subtle texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.01) 2px,
            rgba(0, 0, 0, 0.01) 4px
        );
    pointer-events: none;
    z-index: 1;
}

/* For pages with background images */
body.has-bg-image {
    background-image: url('../Images/HomeImages/BackgroundWall02.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

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

a {
    color: inherit;
    transition: var(--transition-smooth);
}

/* ============================================
   LAYOUT - MAIN WRAPPER
   ============================================ */

.foreground {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}

/* ============================================
   HEADER & TITLE
   ============================================ */

#Masthead {
    display: none;
}

.titlebar {
    text-align: center;
    margin-top: 0;
    padding: var(--spacing-xs) 0;
    animation: fadeInDown 1s ease-out;
}

.title {
    font-family: 'Tangerine', cursive;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-primary);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.02em;
    margin: 0;
}

.subtitle {
    font-family: 'Tangerine', cursive;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 500;
    color: var(--color-primary-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
    margin: 0;
}

/* ============================================
   CONTENT GRID (nav + container alignment)
   ============================================ */

.content-grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 0;
    margin-top: var(--spacing-xs);
}

.content-grid #top_nav {
    grid-column: 2;
    margin-left: 4%;
    margin-right: 4%;
}

.content-grid-main {
    grid-column: 1 / -1;
}

.content-grid-main {
    margin-top: 0;
}

/* ============================================
   NAVIGATION
   ============================================ */

#top_nav {
    clear: both;
    text-align: center;
    animation: fadeIn 1s ease-out 0.3s both;
}

#top_nav ul {
    list-style-type: none;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 var(--spacing-xs);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.2rem var(--spacing-md);
    border-radius: 50px;
    box-shadow: var(--shadow-md);
}

#top_nav li {
    display: inline-block;
}

#top_nav a {
    font-family: var(--font-script);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 600;
    text-decoration: none;
    padding: 0.2rem var(--spacing-sm);
    border-radius: var(--border-radius);
    display: inline-block;
    position: relative;
    transition: var(--transition-smooth);
}

#top_nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

#top_nav a:hover::after {
    width: 80%;
}

#top_nav a:link {
    color: var(--color-primary);
    background-color: transparent;
}

#top_nav a:visited {
    background-color: var(--color-visited);
    color: var(--color-primary);
}

#top_nav a:hover {
    color: var(--color-primary);
    background-color: #FFD700;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

#top_nav a:active {
    color: var(--color-primary);
    background-color: #FFD700;
}

/* ============================================
   MAIN CONTAINER - CSS GRID LAYOUT
   ============================================ */

#container {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    animation: fadeIn 1s ease-out 0.6s both;
}

/* ============================================
   GALLERY COLUMNS (LEFT & RIGHT)
   ============================================ */

#left_col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 0 0 200px;
    width: 200px;
}

#right_col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 0 0 200px;
    width: 200px;
}

.cellstyle,
.photo-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.cellstyle:hover,
.photo-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    outline: 4px solid blue;
}

.cellstyle,
.photo-item {
    outline: none;
}

.cellstyle img,
.photo-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.cellstyle:hover img,
.photo-item:hover img {
    transform: scale(1.05);
}

.cellstyle a,
.photo-item a {
    display: block;
    text-decoration: none;
}

/* Staggered animation for gallery items */
.cellstyle,
.photo-item {
    animation: fadeIn 0.6s ease-out both;
}

.cellstyle:nth-child(1),
.photo-item:nth-child(1) { animation-delay: 0.7s; }
.cellstyle:nth-child(2),
.photo-item:nth-child(2) { animation-delay: 0.8s; }
.cellstyle:nth-child(3),
.photo-item:nth-child(3) { animation-delay: 0.9s; }
.cellstyle:nth-child(4),
.photo-item:nth-child(4) { animation-delay: 1s; }
.cellstyle:nth-child(5),
.photo-item:nth-child(5) { animation-delay: 1.1s; }
.cellstyle:nth-child(6),
.photo-item:nth-child(6) { animation-delay: 1.2s; }

/* ============================================
   PHOTO FRAME (CENTER SLIDESHOW)
   ============================================ */

.photo-frame-wrapper {
    position: relative;
    display: flex;
    flex: 0 0 55%;
    min-width: 0;
    min-height: 0;
    max-width: 55%;
    background: transparent;
    border-radius: 12px;
    padding: 0;
    box-shadow: var(--shadow-lg);
}

#photoframe {
    width: 100%;
    min-height: 850px;
    flex: 1;
    border: 5px ridge var(--color-primary);
    border-radius: var(--border-radius);
    background: linear-gradient(
        to bottom,
        rgba(109, 1, 0, 1) 0%,
        rgba(111, 5, 3, 1) 1%,
        rgba(189, 143, 134, 1) 39%,
        rgba(226, 209, 196, 0.74) 57%,
        rgba(226, 209, 196, 0.5) 73%
    );
}

/* ============================================
   NARRATIVE SECTION
   ============================================ */

#narrative {
    clear: both;
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-lg);
    animation: fadeIn 1s ease-out 0.9s both;
}

.textframe {
    max-width: 670px;
    width: 100%;
    min-height: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    /* Stronger than 0.9 for readability; still not fully opaque */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 5px ridge var(--color-primary);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

/* ============================================
   HOME INDEX — fixed hero (photoframe + columns) + scroll narrative
   ============================================ */

#home-fixed-main {
    position: relative;
}

/*
 * Pinned header/grid/photoframe: document scroll only moves spacer + narrative,
 * so the text frame can rise over a stationary hero.
 */
body.home-narrative-ready #home-fixed-main {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    z-index: 2;
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-lg);
    box-sizing: border-box;
    pointer-events: auto;
}

body.home-index.home-narrative-ready .foreground {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--spacing-md);
}

#home-scroll-spacer,
#home-narrative-scroll-tail {
    width: 100%;
    pointer-events: none;
}

body.home-narrative-reduced #home-fixed-main {
    position: static;
    transform: none;
    padding: 0;
    max-width: none;
}

body.home-narrative-reduced #home-scroll-spacer,
body.home-narrative-reduced #home-narrative-scroll-tail {
    display: none;
    height: 0 !important;
    min-height: 0 !important;
}

/*
 * #narrative must not use transform on the animated property: any transformed
 * ancestor makes position:fixed descendants use that ancestor as their containing
 * block, so the overlay would paint off-viewport and vanish.
 */
body.home-index:not(.home-narrative-reduced) #narrative {
    animation: homeNarrativeReveal 1s ease-out 0.9s both;
}

/* In-flow narrative paints above the fixed hero when overlapping before overlay */
body.home-narrative-ready #narrative {
    position: relative;
    z-index: 10;
    /* Tight gap under hero; spacer JS also tucks narrative up toward photoframe */
    margin-top: var(--spacing-xs);
}

body.home-index.home-narrative-reduced #narrative {
    margin-top: var(--spacing-xs);
    position: relative;
    z-index: 5;
}

/* Home: main row is center slideshow only */
body.home-index #container {
    justify-content: center;
}

body.home-index #container .photo-frame-wrapper {
    flex: 0 0 55%;
    max-width: 55%;
}

/* Home: left/right galleries below narrative; center gap matches photoframe width */
#home-gallery-below-narrative {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin-top: var(--spacing-lg);
    box-sizing: border-box;
    position: sticky;
    top: var(--home-gallery-sticky-top, 12rem);
    z-index: 2;
}

body.home-narrative-ready #home-gallery-below-narrative {
    z-index: 8;
}

body.home-index.home-narrative-reduced #home-gallery-below-narrative {
    position: relative;
    top: auto;
}

.home-gallery-center-gap {
    flex: 0 0 55%;
    min-width: 0;
    max-width: 55%;
    pointer-events: none;
    align-self: stretch;
}

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

#narrative-frame-shell {
    position: relative;
    width: 100%;
    max-width: min(96vw, 1120px);
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

body.home-narrative-ready #narrative-frame-shell .textframe {
    max-width: none;
    width: 100%;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Elevates over header / photoframe / columns (script moves shell to body while active) */
#narrative-frame-shell.narrative-overlay {
    position: fixed;
    left: 50%;
    z-index: 50;
    width: min(96vw, 1120px);
    max-width: 1120px;
    margin: 0;
    box-sizing: border-box;
    will-change: top, opacity, mask-image;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
}

html.home-narrative-scroll-active {
    scroll-behavior: auto;
}

body.home-narrative-reduced #narrative-frame-shell,
body.home-narrative-reduced #narrative-frame-shell.narrative-overlay {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 1;
    width: 100%;
    max-width: min(96vw, 1120px);
    margin-left: auto;
    margin-right: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    will-change: auto;
}

body.home-narrative-reduced #narrative-frame-shell .textframe {
    max-width: none;
    width: 100%;
}

body.home-narrative-reduced.home-index {
    scroll-behavior: smooth;
}

/*
 * Home opened from a gallery "Home" link: no narrative text block, no scroll-driven
 * narrative; same static hero + two-column gallery as reduced-motion home.
 */
body.home-index.home-from-gallery #narrative {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
}

body.home-index.home-from-gallery #home-fixed-main {
    position: static;
    transform: none;
    padding: 0;
    max-width: none;
}

body.home-index.home-from-gallery #home-scroll-spacer,
body.home-index.home-from-gallery #home-narrative-scroll-tail {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
}

body.home-index.home-from-gallery #home-gallery-below-narrative {
    position: relative;
    top: auto;
    z-index: 2;
    /* Row lives inside #container after home-from-gallery-layout.js reparents DOM */
    margin-top: 0;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

body.home-index.home-from-gallery .foreground {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

/* ============================================
   PAGE CONTENT (For sub-pages)
   ============================================ */

#page_content {
    grid-column: 2;
    padding: var(--spacing-md);
}

.nepaltext {
    width: 100%;
    max-width: 638px;
    height: 450px;
    background-color: rgba(240, 248, 255, 0.9);
    color: navy;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

#footer {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    font-style: italic;
    color: var(--color-primary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
    .foreground {
        max-width: 1000px;
    }
    
    .content-grid {
        grid-template-columns: 180px 1fr 180px;
    }
    
    #container {
        gap: 6px;
    }
    
    #left_col,
    #right_col {
        flex: 0 0 180px;
        width: 180px;
    }
}

@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .content-grid #top_nav {
        grid-column: 1;
        margin-left: 0;
        margin-right: 0;
    }
    
    #container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    #home-gallery-below-narrative {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .home-gallery-center-gap {
        display: none;
        height: 0;
        flex: 0 0 0 !important;
        max-width: 0 !important;
        width: 0 !important;
        overflow: hidden;
    }

    body.home-index #home-gallery-below-narrative {
        position: relative;
        top: auto;
    }
    
    #left_col,
    #right_col {
        flex: 1 1 auto;
        width: 100%;
    }
    
    #left_col,
    #right_col {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-sm);
    }
    
    /* Center slideshow takes full width when stacked on tablet/mobile */
    .photo-frame-wrapper,
    body.home-index #container .photo-frame-wrapper {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
    
    #photoframe {
        min-height: 600px;
    }
}

@media (min-width: 1025px) and (max-height: 900px) {
    /*
     * Short laptop displays (e.g. 14" screens around 1366x768) need a shorter
     * hero so the fixed home layout does not crowd the narrative immediately.
     */
    #photoframe {
        min-height: clamp(560px, 70vh, 700px);
    }
}

@media (max-width: 768px) {
    /* Fix iOS Safari: fixed background causes scroll/performance issues on mobile */
    body.has-bg-image {
        background-attachment: scroll;
    }
    
    .foreground {
        padding: var(--spacing-sm);
    }
    
    #top_nav ul {
        flex-wrap: wrap;
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-xs);
        border-radius: 25px;
    }
    
    /* Larger tap targets for touch (Apple recommends 44px minimum) */
    #top_nav a {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    #left_col,
    #right_col {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    #photoframe {
        min-height: 500px;
    }
    
    .textframe {
        min-height: 300px;
        padding: var(--spacing-sm);
    }

    body.home-narrative-ready #narrative-frame-shell,
    #narrative-frame-shell.narrative-overlay {
        width: min(96vw, 1120px);
    }
}

@media (max-width: 640px) {
    /*
     * Keep mobile nav to a single scrollable row so it does not consume a large
     * share of the viewport above the slideshow.
     */
    #top_nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #top_nav::-webkit-scrollbar {
        display: none;
    }

    #top_nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
    }

    #top_nav a {
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .foreground {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .title {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }
    
    #top_nav a {
        font-size: 0.9rem;
        padding: 0.5rem 0.6rem;
    }
    
    #left_col,
    #right_col {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }
    
    /* Shorter slideshow height for iPhone screens - fits viewport better */
    #photoframe {
        min-height: min(58vh, 420px);
        border-width: 3px;
    }
    
    .textframe {
        min-height: 280px;
        padding: var(--spacing-sm);
        border-width: 3px;
    }

    body.home-narrative-ready #narrative-frame-shell,
    #narrative-frame-shell.narrative-overlay {
        width: min(96vw, 1120px);
    }
}

/* iPhone-specific: safe area insets for notched devices */
@supports (padding: max(0px)) {
    @media (max-width: 480px) {
        .foreground {
            padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
            padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
        }
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }