/* ABZO shared presentation */

:root {
    --primary: #1a0012;
    --secondary: #735c00;
    --surface: #fdf9f4;
    --surface-low: #f7f3ee;
    --surface-mid: #f1ede8;
    --text: #1c1c19;
    --muted: #50434a;
    --outline: #82737a;
    --plum: #3d0c2f;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--surface);
    color: var(--text);
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

.material-symbols-outlined {
    display: inline-block;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.site-nav {
    transition: background-color 240ms ease, border-color 240ms ease, padding 240ms ease;
}

.glass-nav {
    background-color: rgba(253, 249, 244, 0.68) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    border-bottom: 1px solid rgba(115, 92, 0, 0.12);
}

.nav-link-active {
    color: var(--secondary) !important;
}

.hero-bg-overlay {
    background: radial-gradient(circle at center, rgba(253, 249, 244, 0.05) 0%, rgba(253, 249, 244, 0.58) 100%);
}

.vertical-divider {
    width: 1px;
    height: 96px;
    background: linear-gradient(to bottom, var(--secondary), transparent);
    margin: 3rem auto 0;
}

.image-tile {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-low);
    border-radius: 8px;
}

.image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.image-tile:hover img {
    transform: scale(1.045);
}

.organic-mask {
    border-radius: 64% 36% 70% 30% / 30% 60% 40% 70%;
}

.organic-mask-soft {
    border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.mobile-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
}

.mobile-panel.is-open {
    max-height: 28rem;
}

.form-status {
    min-height: 1.5rem;
}

/* Nav Logo */
.nav-logo {
    height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(253, 249, 244, 0.4));
    transition: height 300ms ease;
}

/* .glass-nav .nav-logo { height: 45px; } - Removed to maintain consistent size */

@media (max-width: 767px) {
    .site-nav-inner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .vertical-divider {
        height: 72px;
        margin-top: 2rem;
    }

    .nav-logo {
        height: 48px;
    }
    
    /* .glass-nav .nav-logo { height: 38px; } - Removed to maintain consistent size */
}

/* Navigation Visibility Enhancements */
.site-nav {
    transition: background-color 300ms ease, border-color 300ms ease, padding 300ms ease, backdrop-filter 300ms ease;
    background-color: transparent !important;
    backdrop-filter: none !important;
    /* Default (Transparent) state */
    --nav-text-color: #ffffff;
    --nav-text-hover: rgba(255, 255, 255, 0.9);
    --nav-border-color: rgba(255, 255, 255, 0.3);
    --nav-button-hover-bg: #ffffff;
    --nav-button-hover-text: #1a2a22;
}

.site-nav a, .site-nav button {
    font-weight: 700;
}

/* Base text shadow for transparent nav links, removed when glass-nav */
.site-nav:not(.glass-nav) .nav-link-color, 
.site-nav:not(.glass-nav) .nav-btn-outline {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 12px rgba(253, 249, 244, 0.8) !important;
}

.glass-nav {
    background-color: rgba(253, 249, 244, 0.9) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid rgba(115, 92, 0, 0.08);
    /* Scrolled (Glass) state */
    --nav-text-color: var(--text);
    --nav-text-hover: var(--secondary);
    --nav-border-color: rgba(115, 92, 0, 0.3);
    --nav-button-hover-bg: var(--secondary);
    --nav-button-hover-text: #ffffff;
}

/* Nav links styling */
.nav-link-color {
    color: var(--nav-text-color);
}
.nav-link-color:hover {
    color: var(--nav-text-hover);
}

/* Nav outline button styling */
.nav-btn-outline {
    color: var(--nav-text-color);
    border-color: var(--nav-border-color);
}
.nav-btn-outline:hover {
    background-color: var(--nav-button-hover-bg);
    color: var(--nav-button-hover-text);
}

/* Dual Logo styling */
.site-nav:not(.glass-nav) .logo-white {
    opacity: 1;
}
.site-nav:not(.glass-nav) .logo-black {
    opacity: 0;
}
.site-nav.glass-nav .logo-white {
    opacity: 0;
}
.site-nav.glass-nav .logo-black {
    opacity: 1;
}