/* =========================================
   CSS Variables & Global Reset
   ========================================= */
:root {
    /* Color Palette - Deep, Moody, Warm */
    --bg-color: #161513;
    /* Very dark warm charcoal brown */
    --text-primary: #EBE5D9;
    /* Soft cream/off-white */
    --text-muted: #A39B8E;
    /* Warm taupe */
    --accent-color: #79806A;
    /* Muted sage green found in the plant photos */

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Karla', sans-serif;

    /* Spacing & Layout */
    --spacing-xl: 4rem;
    --spacing-lg: 2rem;
    --spacing-md: 1.5rem;
    --spacing-sm: 0.75rem;

    --container-padding: 3rem;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================================
   Layout & Container
   ========================================= */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: var(--spacing-lg) var(--container-padding);
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

/* =========================================
   Header Section
   ========================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    z-index: 10;
    position: sticky;
    top: var(--spacing-lg);
}

.logo-section {
    display: flex;
    flex-direction: column;
    transition: opacity 0.5s ease;
}

.name {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-sm);
}

.name-first,
.name-last {
    display: block;
}

.name-last {
    margin-left: 2rem;
    /* Indent last name */
}

.title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-left: 2rem;
}

.header-right {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    transition: opacity 0.5s ease;
}

/* Scroll Fade Effect */
.header.scrolled .logo-section,
.header.scrolled .header-right {
    opacity: 0.1;
    pointer-events: none;
    /* Prevent accidentally clicking when faded */
}

/* Circular Badge */
.circular-badge {
    width: 120px;
    height: 120px;
}

.badge-text {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

/* Vertical Phone Number */
.phone-vertical {
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding-top: 10px;
    /* Aligns visually with the badge */
}

/* =========================================
   Main Content Area (Navigation + Photo)
   ========================================= */
.main-content {
    display: flex;
    gap: 2rem;
    flex: 1;
    align-items: flex-start;
    margin-top: -3rem;
}

.main-content.home-main {
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
}

.main-content.home-main .nav {
    position: relative;
    top: auto;
    align-self: flex-end;
}

/* Navigation */
.nav {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 30vh;
    align-self: flex-start;
    padding-left: 0;
}

.nav-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 100%;
    /* Indicator logic will be refined later, hiding for POC simplicity unless needed */
    display: none;
}

.nav-phone {
    display: none;
}

.home-hero-img {
    display: none;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--text-primary);
}


/* =========================================
   Footer
   ========================================= */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    /* Push to bottom */
    padding-top: var(--spacing-xl);
}

.year {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--text-muted);
}

.footer-arrow {
    display: flex;
    justify-content: flex-end;
    color: var(--text-muted);
    transform: scale(0.7);
    /* Scale down the SVG slightly */
    transform-origin: bottom right;
}

/* =========================================
   Mobile Menu (Hidden for POC structural review)
   ========================================= */
.menu-toggle {
    display: none;
}

/* =========================================
   Background Image Layouts (Inner Pages Experiment)
   ========================================= */
body.bg-image-page {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    /* Background image URL and position will be set inline per page */
}

/* Gradient overlay to ensure text readability on the left */
body.bg-image-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark gradient from left fading to transparent on right — wider coverage */
    background: linear-gradient(to right, rgba(22, 21, 19, 0.97) 0%, rgba(22, 21, 19, 0.85) 40%, rgba(22, 21, 19, 0.3) 65%, transparent 85%);
    z-index: -1;
    pointer-events: none;
}

/* Modifier for gradient on the right (if text is on the right) */
body.bg-image-page.gradient-right::before {
    background: linear-gradient(to left, rgba(22, 21, 19, 0.97) 0%, rgba(22, 21, 19, 0.85) 40%, rgba(22, 21, 19, 0.3) 65%, transparent 85%);
}

.text-overlay-content {
    display: flex;
    flex: 1;
    width: 100%;
}

.text-panel {
    max-width: 450px;
    /* Restrict width so it doesn't cover the photo's focal point */
    padding: 2rem;
    background: rgba(22, 21, 19, 0.4);
    border-radius: 2px;
}

.text-panel.align-right {
    margin-left: auto;
    /* Push text to the right side if photo is on the left */
}

.text-panel.wide {
    max-width: 545px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.05em;
}

.body-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-weight: 300;
}

/* =========================================
   Topic Headings & Body (Temos Page)
   ========================================= */
.topic-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(163, 155, 142, 0.15);
}

.topic-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.topic-heading {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.topic-body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    font-weight: 300;
    margin-bottom: 0;
}

/* =========================================
   Social Links (Kontaktai Page)
   ========================================= */
.social-links {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.social-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--accent-color);
}

/* =========================================
   Fade-in Animations
   ========================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.nav-list li {
    opacity: 0;
    animation: fadeIn 0.6s ease-out both;
}

.nav-list li:nth-child(1) {
    animation-delay: 0.15s;
}

.nav-list li:nth-child(2) {
    animation-delay: 0.25s;
}

.nav-list li:nth-child(3) {
    animation-delay: 0.35s;
}

.nav-list li:nth-child(4) {
    animation-delay: 0.45s;
}

.nav-list li:nth-child(5) {
    animation-delay: 0.55s;
}

.nav-list li:nth-child(6) {
    animation-delay: 0.65s;
}

/* =========================================
   Nav Underline Hover Effect
   ========================================= */
.nav-list a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--accent-color);
    transition: width 0.3s ease;
    margin-top: 2px;
}

.nav-list a:hover::after,
.nav-list a.active::after {
    width: 100%;
}

/* =========================================
   Mobile Styles (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {

    /* Container — remove side padding, handle per-section */
    .container {
        padding: 0;
    }

    /* Disable background images — solid dark bg only */
    body.bg-image-page {
        background-image: none !important;
    }

    body.bg-image-page::before {
        display: none;
    }

    /* Header — compact, sticky, full-width */
    .header {
        position: sticky;
        top: 0;
        z-index: 150;
        background: var(--bg-color);
        margin-bottom: 0;
        padding: 1.2rem 1.25rem;
        border-bottom: 1px solid rgba(163, 155, 142, 0.15);
        align-items: center;
    }

    .name {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }

    .name-last {
        margin-left: 0;
    }

    .title {
        margin-left: 0;
        font-size: 0.6rem;
    }

    /* Hide badge, phone and their container from header */
    .header-right {
        display: none;
    }

    /* Disable header scroll-fade on mobile */
    .header.scrolled .logo-section,
    .header.scrolled .header-right {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hamburger button — fixed top-right above everything */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        position: fixed;
        top: 1.1rem;
        right: 1.25rem;
        z-index: 200;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 1px;
        background: var(--text-primary);
        transition: transform 0.3s ease;
        transform-origin: center;
    }

    /* Animate hamburger → X when active */
    .menu-toggle.active span:first-child {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle.active span:last-child {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Nav — full-screen overlay, hidden by default */
    .nav {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--bg-color);
        max-width: 100%;
        display: none;
        flex-direction: column;
        padding: 9rem 1.25rem 2rem;
        top: 0;
        align-self: auto;
        overflow-y: auto;
    }

    .nav.active {
        display: flex;
    }

    /* Override home-main nav positioning */
    .main-content.home-main .nav {
        position: fixed;
        top: 0;
        align-self: auto;
    }

    /* Nav links — larger, more breathing room */
    .nav-list {
        gap: 2rem;
    }

    .nav-list a {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
    }

    /* Disable staggered fade-in animation inside overlay */
    .nav-list li {
        opacity: 1;
        animation: none;
    }

    /* Phone number at bottom of overlay */
    .nav-phone {
        display: block;
        margin-top: auto;
        padding-top: 2rem;
        color: var(--text-muted);
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        text-decoration: none;
        font-family: var(--font-body);
    }

    /* Main content — stack vertically */
    .main-content {
        flex-direction: column;
        margin-top: 0;
        gap: 0;
        align-items: stretch;
    }

    .main-content.home-main {
        justify-content: flex-start;
        align-items: stretch;
    }

    /* Text panels — full width, no background overlay */
    .text-overlay-content {
        display: block;
        width: 100%;
    }

    .text-panel {
        max-width: 100%;
        background: none;
        padding: 2rem 1.25rem;
        border-radius: 0;
    }

    .text-panel.align-right {
        margin-left: 0;
    }

    .text-panel.wide {
        max-width: 100%;
    }

    /* Typography scale-down */
    .section-title {
        font-size: 2rem;
    }

    .body-text {
        font-size: 1rem;
    }

    .topic-heading {
        font-size: 1.1rem;
    }

    /* Homepage — hero photo banner */
    .home-hero-img {
        display: block;
        width: 100%;
        height: 55vh;
        object-fit: cover;
        object-position: right center;
        -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%), linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, black 40%, transparent 100%), linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-composite: intersect;
    }

    /* Homepage — nav links always visible, no overlay needed */
    body.home-page .main-content .nav {
        position: static;
        display: flex;
        padding: 2rem 1.25rem;
        background: none;
        inset: auto;
    }

    /* Homepage — hide hamburger since nav is always visible */
    body.home-page .menu-toggle {
        display: none;
    }

    /* Footer — compact, hide decorative arrow */
    .footer {
        padding: 2rem 1.25rem 1.5rem;
    }

    .footer-arrow {
        display: none;
    }

    .year {
        font-size: 1.5rem;
    }
}