/* Base Reset and Font adjustments handled by Tailwind */

.grecaptcha-badge { 
    visibility: hidden;
}

:root {
    --bg-color: #000000;
    --text-color: #e5e5e5;
    --accent-color: #ffffff;
    --link-color: #ffffff;
    --link-hover: #cccccc;
    --secondary-bg: #1a1a1a;
    
    /* Increased brightness for visibility (60% opacity) */
    --border-color: rgba(255, 255, 255, 0.6);
    --muted-text: #cccccc;

    /* Identity specific - Brighter Lines */
    --line-color: rgba(255, 255, 255, 0.6);
    --subtitle-color: #cccccc;

    /* Form Specifics */
    --form-bg: rgba(255, 255, 255, 0.1);
    --form-border: rgba(255, 255, 255, 0.3);
    --form-text: #ffffff;
    --btn-bg: #ffffff;
    --btn-text: #000000;

    /* Default Fonts */
    --font-identity: 'Cinzel', serif;
    --font-subtitle: 'Montserrat', sans-serif;
    --font-nav: 'Inter', sans-serif;
    --font-cat: 'Inter', sans-serif;
    --font-headers: 'Montserrat', sans-serif;
    --font-body: 'Helvetica', Arial, sans-serif;
}

body {
    background-color: var(--bg-color); 
    color: var(--text-color);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Dynamic Fonts */
.font-dynamic-identity { font-family: var(--font-identity); }

.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.font-dynamic-subtitle { font-family: var(--font-subtitle); }
.font-dynamic-nav { font-family: var(--font-nav); }
.font-dynamic-cat { font-family: var(--font-cat); }
.font-dynamic-headers { font-family: var(--font-headers); }
.font-dynamic-body { font-family: var(--font-body); }

/* UPB Rich Text Body Content */
.upb-body-text ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.upb-body-text ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
.upb-body-text li { margin: 0.25rem 0; }
.upb-body-text a { color: var(--link-color); text-decoration: underline; }
.upb-body-text a:hover { color: var(--link-hover); }
.upb-body-text b, .upb-body-text strong { font-weight: bold; }
.upb-body-text i, .upb-body-text em { font-style: italic; }
.upb-body-text h1, .upb-body-text h2, .upb-body-text h3, .upb-body-text h4 { font-family: var(--font-headers, inherit); font-weight: bold; margin: 0.5rem 0; }
.upb-body-text h1 { font-size: 1.6em; } .upb-body-text h2 { font-size: 1.3em; } .upb-body-text h3 { font-size: 1.1em; }

/* --- THEMES --- */

/* White Theme: High readability fixes */
body.theme-light { 
    --bg-color: #ffffff; 
    --text-color: #111111; 
    --accent-color: #000000; 
    --link-color: #111111; 
    --link-hover: #555555; 
    --secondary-bg: #f3f4f6; 
    --border-color: #d1d5db; /* Visible gray borders */
    --muted-text: #374151; 
    
    --line-color: #000000;
    --subtitle-color: #374151;

    --form-bg: #f3f4f6;
    --form-border: #4b5563; /* Dark gray input borders */
    --form-text: #000000;
    --btn-bg: #e5e7eb;
    --btn-text: #000000;
}

/* High Contrast: Black/White only */
body.theme-contrast { 
    --bg-color: #000000; 
    --text-color: #ffffff; 
    --accent-color: #ffffff; 
    --link-color: #ffffff; 
    --link-hover: #dddddd; 
    --secondary-bg: #000000; 
    --border-color: #ffffff; 
    --muted-text: #ffffff; /* No grays */
    font-weight: 500;

    --line-color: #ffffff;
    --subtitle-color: #ffffff;

    --form-bg: #ffffff;
    --form-border: #ffffff;
    --form-text: #000000;
    --btn-bg: #ffffff;
    --btn-text: #000000;
}

/* Navy Theme */
body.theme-navy { 
    --bg-color: #0A1128; 
    --text-color: #e5e5e5; 
    --accent-color: #ffffff; 
    --link-color: #ffffff; 
    --link-hover: #cccccc; 
    --secondary-bg: #121E3D; 
    --border-color: rgba(255, 255, 255, 0.4); 
    --muted-text: #9ca3af; 
    
    --line-color: rgba(255, 255, 255, 0.4);
    --subtitle-color: #9ca3af;

    --form-bg: rgba(255, 255, 255, 0.05);
    --form-border: rgba(255, 255, 255, 0.2);
    --form-text: #ffffff;
    --btn-bg: #ffffff;
    --btn-text: #000000;
}

/* Medium Gray Theme */
body.theme-medium-gray { 
    --bg-color: #4b5563; /* Tailwind gray-600 */
    --text-color: #ffffff; 
    --accent-color: #ffffff; 
    --link-color: #ffffff; 
    --link-hover: #e5e7eb; 
    --secondary-bg: #374151; /* gray-700 */
    --border-color: rgba(255, 255, 255, 0.4); 
    --muted-text: #e5e7eb; 
    
    --line-color: rgba(255, 255, 255, 0.5);
    --subtitle-color: #e5e7eb;

    --form-bg: rgba(255, 255, 255, 0.1);
    --form-border: rgba(255, 255, 255, 0.3);
    --form-text: #ffffff;
    --btn-bg: #ffffff;
    --btn-text: #000000;
}

/* Black w/ Accents: Updated for better readability */
body.theme-gold { 
    --bg-color: #050505; 
    --text-color: #e5e5e5; 
    --accent-color: #d4af37; 
    --link-color: #e5e5e5; 
    --link-hover: #ffffff; 
    --secondary-bg: #1a1a1a; 
    --border-color: #d4af37; 
    --muted-text: #cccccc; /* Light Gray, not accent */
    --line-color: #d4af37;
    --subtitle-color: #cccccc; /* Light Gray */
}
body.theme-gold .nav-link:hover::after, body.theme-gold .nav-link.active::after { background-color: #d4af37; }

body.theme-blue { 
    --bg-color: #050505; 
    --text-color: #e5e5e5; 
    --accent-color: #60a5fa; 
    --link-color: #e5e5e5; 
    --link-hover: #ffffff; 
    --secondary-bg: #0f172a; 
    --border-color: #1e3a8a; 
    --muted-text: #cccccc; /* Light Gray */
    --line-color: #60a5fa;
    --subtitle-color: #cccccc; /* Light Gray */
}
body.theme-blue .nav-link:hover::after, body.theme-blue .nav-link.active::after { background-color: #60a5fa; }


/* Colored Backgrounds: Brighter bg, Links white -> color */
body.theme-red { --bg-color: #050505; --text-color: #f3e8e8; --accent-color: #ef4444; --link-color: #ffffff; --link-hover: #fca5a5; --secondary-bg: #111111; --border-color: #7f1d1d; --muted-text: #fca5a5; --line-color: #ef4444; --subtitle-color: #fca5a5; }
body.theme-green { --bg-color: #050505; --text-color: #e8f3e8; --accent-color: #22c55e; --link-color: #ffffff; --link-hover: #86efac; --secondary-bg: #111111; --border-color: #14532d; --muted-text: #86efac; --line-color: #22c55e; --subtitle-color: #86efac; }
body.theme-purple { --bg-color: #050505; --text-color: #f3e8f3; --accent-color: #a855f7; --link-color: #ffffff; --link-hover: #d8b4fe; --secondary-bg: #111111; --border-color: #581c87; --muted-text: #d8b4fe; --line-color: #a855f7; --subtitle-color: #d8b4fe; }
body.theme-orange { --bg-color: #331205; --text-color: #f3ebe8; --accent-color: #f97316; --link-color: #ffffff; --link-hover: #fdba74; --secondary-bg: #4f1c08; --border-color: #7c2d12; --muted-text: #fdba74; --line-color: #f97316; --subtitle-color: #fdba74; }
body.theme-yellow { --bg-color: #2b2b05; --text-color: #f3f3e8; --accent-color: #eab308; --link-color: #ffffff; --link-hover: #fde047; --secondary-bg: #3f3f08; --border-color: #713f12; --muted-text: #fde047; --line-color: #eab308; --subtitle-color: #fde047; }

/* Sepia Theme */
body.theme-sepia { --bg-color: #3d342b; --text-color: #f5f0e6; --accent-color: #e6ccb2; --link-color: #ffffff; --link-hover: #e6ccb2; --secondary-bg: #52463a; --border-color: #7f6a55; --muted-text: #d6c0a8; --line-color: #e6ccb2; --subtitle-color: #d6c0a8; }

body.theme-blue-orange { --bg-color: #0f172a; --text-color: #f8fafc; --accent-color: #f97316; --link-color: #38bdf8; --link-hover: #f97316; --secondary-bg: #1e293b; --border-color: #334155; --muted-text: #94a3b8; --line-color: #f97316; --subtitle-color: #38bdf8; }
body.theme-blue-orange .nav-link:hover::after, body.theme-blue-orange .nav-link.active::after { background-color: #f97316; }

body.theme-purple-green { --bg-color: #000000; --text-color: #f8fafc; --accent-color: #22c55e; --custom-bg-accent-color: #4c1d95; --link-color: #fbbf24; --link-hover: #22c55e; --secondary-bg: #4c1d95; --border-color: #5b21b6; --muted-text: #c4b5fd; --line-color: #22c55e; --subtitle-color: #fbbf24; }
body.theme-purple-green .nav-link:hover::after, body.theme-purple-green .nav-link.active::after { background-color: #22c55e; }

body.theme-imperial { --bg-color: #f8fafc; --text-color: #0f172a; --accent-color: #dc2626; --custom-bg-accent-color: #fee2e2; --link-color: #000000; --link-hover: #dc2626; --secondary-bg: #e2e8f0; --border-color: #000000; --muted-text: #475569; --line-color: #000000; --subtitle-color: #000000; --form-bg: #e2e8f0; --form-border: #94a3b8; --form-text: #0f172a; --btn-bg: #cbd5e1; --btn-text: #0f172a; }
body.theme-imperial .nav-link:hover::after, body.theme-imperial .nav-link.active::after { background-color: #dc2626; }

body.theme-light-green { --bg-color: #f8fafc; --text-color: #0f172a; --accent-color: #16a34a; --custom-bg-accent-color: #bbf7d0; --link-color: #000000; --link-hover: #16a34a; --secondary-bg: #e2e8f0; --border-color: #000000; --muted-text: #475569; --line-color: #000000; --subtitle-color: #000000; --form-bg: #e2e8f0; --form-border: #94a3b8; --form-text: #0f172a; --btn-bg: #cbd5e1; --btn-text: #0f172a; }
body.theme-light-green .nav-link:hover::after, body.theme-light-green .nav-link.active::after { background-color: #16a34a; }

body.theme-light-blue { --bg-color: #f8fafc; --text-color: #0f172a; --accent-color: #2563eb; --custom-bg-accent-color: #bfdbfe; --link-color: #000000; --link-hover: #2563eb; --secondary-bg: #e2e8f0; --border-color: #000000; --muted-text: #475569; --line-color: #000000; --subtitle-color: #000000; --form-bg: #e2e8f0; --form-border: #94a3b8; --form-text: #0f172a; --btn-bg: #cbd5e1; --btn-text: #0f172a; }
body.theme-light-blue .nav-link:hover::after, body.theme-light-blue .nav-link.active::after { background-color: #2563eb; }

body.theme-fall { --bg-color: #2e1503; --text-color: #fdf6e3; --accent-color: #d95c14; --link-color: #f2a65a; --link-hover: #d95c14; --secondary-bg: #4a2511; --border-color: #8c3b0c; --muted-text: #f2a65a; --line-color: #d95c14; --subtitle-color: #f2a65a; }
body.theme-fall .nav-link:hover::after, body.theme-fall .nav-link.active::after { background-color: #d95c14; }

body.theme-underwater { --bg-color: #001f3f; --text-color: #e0f7fa; --accent-color: #00e5ff; --link-color: #84ffff; --link-hover: #00e5ff; --secondary-bg: #003366; --border-color: #00838f; --muted-text: #b2ebf2; --line-color: #00e5ff; --subtitle-color: #84ffff; }
body.theme-underwater .nav-link:hover::after, body.theme-underwater .nav-link.active::after { background-color: #00e5ff; }

body.theme-fire { --bg-color: #2a0800; --text-color: #fff3e0; --accent-color: #ff3d00; --link-color: #ff9100; --link-hover: #ffea00; --secondary-bg: #4e1a05; --border-color: #bf360c; --muted-text: #ffcc80; --line-color: #ff3d00; --subtitle-color: #ff9100; }
body.theme-fire .nav-link:hover::after, body.theme-fire .nav-link.active::after { background-color: #ff3d00; }

/* Custom Themes */
body.theme-dark-custom { --bg-color: var(--custom-bg-color, #050505); --text-color: #e5e5e5; --accent-color: var(--custom-accent-color, #60a5fa); --link-color: var(--custom-link-color, #3b82f6); --link-hover: var(--custom-link-hover-color, #60a5fa); --secondary-bg: #0f172a; --border-color: var(--custom-accent-color, #1e3a8a); --muted-text: #cccccc; --line-color: var(--custom-accent-color, #60a5fa); --subtitle-color: #cccccc; }
body.theme-dark-custom .nav-link:hover::after, body.theme-dark-custom .nav-link.active::after { background-color: var(--custom-accent-color, #60a5fa); }

body.theme-light-custom { --bg-color: var(--custom-bg-color, #ffffff); --text-color: #111111; --accent-color: var(--custom-accent-color, #000000); --link-color: var(--custom-link-color, #3b82f6); --link-hover: var(--custom-link-hover-color, #60a5fa); --secondary-bg: #f3f4f6; --border-color: #d1d5db; --muted-text: #374151; --line-color: var(--custom-accent-color, #000000); --subtitle-color: #374151; --form-bg: #f3f4f6; --form-border: #4b5563; --form-text: #000000; --btn-bg: #e5e7eb; --btn-text: #000000; }
body.theme-light-custom .nav-link:hover::after, body.theme-light-custom .nav-link.active::after { background-color: var(--custom-accent-color, #000000); }


/* Utility Mapping */
.text-offwhite { color: var(--text-color); }
.bg-background { background-color: var(--bg-color); }
/* Specific override for white theme text collision */
.text-white-force { color: #ffffff !important; } 
.text-white { color: var(--text-color); } /* General text mapped to theme text color */
.text-accent { color: var(--accent-color); } /* Specific accent text */
.text-muted { color: var(--muted-text); }

/* Helper Backgrounds - Decoupled from border-color to prevent child opacity inheritance issues */
/* Use RGBA directly to ensure background is transparent but content remains opaque */
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); } 
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.15); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.25); } 
.hover-bg-subtle:hover { background-color: color-mix(in srgb, var(--text-color) 10%, transparent); }

/* Identity specific mapping */
.identity-line { background-color: var(--line-color); }
.border-identity-line { border-color: var(--line-color); }
.identity-sub { color: var(--subtitle-color); }

/* Form inputs */
.form-input {
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
    color: var(--form-text);
}
.form-input:focus { outline: none; border-color: var(--accent-color); }

/* Buttons */
.btn-primary {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--border-color);
}
.btn-primary:hover { opacity: 0.8; }

.btn-share {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.btn-share:hover {
    background-color: var(--accent-color) !important;
    color: var(--bg-color) !important;
    border-color: var(--accent-color) !important;
}

/* Links */
a, .nav-link, button.nav-btn { color: var(--link-color); transition: color 0.3s ease; position: relative; } /* Position relative ensures underline is contained */
a:hover, .nav-link:hover, button.nav-btn:hover { color: var(--link-hover); }

/* Nav Underline */
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 0;
    background-color: var(--accent-color); transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Use Accent Color Overrides */
.nav-use-accent { color: var(--accent-color) !important; }
.nav-use-accent:hover { color: var(--link-hover) !important; opacity: 1; }
.cat-use-accent { color: var(--accent-color) !important; }
.cat-use-accent:hover { color: var(--link-hover) !important; opacity: 1; }

/* Safe Area Inset */
.safe-area-inset { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Hide scrollbar for mobile navs but keep functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Grid Layouts */
.masonry-grid { column-count: var(--cols-mobile, 1); column-gap: 1.5rem; width: 100%; }
@media (min-width: 768px) { .masonry-grid { column-count: var(--cols-desktop, 3); } }

.std-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; width: 100%; }
/* Items */
.masonry-item { width: 100%; margin-bottom: 1.5rem; break-inside: avoid; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.std-grid .masonry-item { width: 100%; margin-bottom: 0; }
@media (min-width: 768px) { .std-grid .masonry-item { width: calc(100% / var(--cols-desktop, 3) - 1.5rem * (var(--cols-desktop, 3) - 1) / var(--cols-desktop, 3)); } }

.masonry-item.visible { opacity: 1; transform: none; }

.img-container { overflow: hidden; position: relative; background-color: var(--secondary-bg); }
.img-container img { transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; display: block; }

/* Ratios & Crops */
.ratio-square .img-container img, .img-container.ratio-square img { aspect-ratio: 1 / 1; object-fit: cover; }
.ratio-portrait .img-container img, .img-container.ratio-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.ratio-landscape .img-container img, .img-container.ratio-landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
.crop-top { object-position: top !important; }
.crop-bottom { object-position: bottom !important; }
.crop-left { object-position: left !important; }
.crop-right { object-position: right !important; }
.crop-center { object-position: center !important; }
.crop-matte { object-fit: contain !important; height: 100% !important; background: var(--secondary-bg); }

/* Apply mobile no crop only to small screens (Portrait/1-col) */
@media (max-width: 640px) {
    .mobile-no-crop .masonry-item { margin-bottom: 1rem; }
    .mobile-no-crop .img-container img { aspect-ratio: auto !important; object-fit: contain !important; height: auto !important; }
}

.img-container:hover img { transform: scale(1.05); }
.img-container:hover img.crop-matte { transform: scale(1); }

.img-overlay { background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transition: opacity 0.3s ease; }
.img-container:hover .img-overlay { opacity: 1; }
.img-overlay.overlay-always-show { opacity: 1 !important; }

/* Lightbox */
#lightbox { transition: opacity 0.3s ease; }
#lightbox.hidden { opacity: 0; pointer-events: none; }
#lightbox:not(.hidden) { opacity: 1; pointer-events: auto; }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60; color: white; background: transparent; border: none; padding: 20px; cursor: pointer; opacity: 0.2; transition: opacity 0.3s ease, transform 0.2s ease; }
.lb-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
#lb-prev { left: 10px; }
#lb-next { right: 10px; }

/* Sub Filter Cycler */
#sub-filter-wrapper { position: relative; max-width: 100%; overflow: hidden; }
#sub-filter-scroll { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; gap: 1rem; padding: 0 2rem; align-items: center; }
#sub-filter-scroll::-webkit-scrollbar { display: none; }
.sub-cycler-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; 
    color: var(--accent-color); padding: 0.5rem 2rem; opacity: 0.7; 
    height: 100%; display: flex; align-items: center; justify-content: center;
}
.sub-cycler-btn.left-0 { background: linear-gradient(to right, var(--bg-color) 40%, transparent); justify-content: flex-start; padding-left: 0.5rem; }
.sub-cycler-btn.right-0 { background: linear-gradient(to left, var(--bg-color) 40%, transparent); justify-content: flex-end; padding-right: 0.5rem; }
.sub-cycler-btn:hover { opacity: 1; }

/* Mobile Nav Container - Increased Height */
#nav-cat-container {
    padding-bottom: 10px; /* Increase touch area */
    min-height: 50px; /* Ensure enough vertical space */
    display: flex;
    align-items: center;
}

/* Nav Scroll Buttons & Wrappers */
/* --cat-fade-bg is set via JS inline style on #nav-cat-outer-wrapper when header_cat_bg is on.
   Falls back to --bg-color when unset, so the fade always matches the actual background. */
.nav-scroll-btn {
    position: absolute; top: 0; bottom: 0; z-index: 20;
    color: var(--muted-text); width: 56px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.2s ease, opacity 0.2s ease;
    display: none; /* Hidden by default */
}
.nav-scroll-btn i { font-size: 1.15rem; }
.nav-scroll-btn.left-0 {
    background: linear-gradient(to right, var(--cat-fade-bg, var(--bg-color)) 45%, transparent);
    justify-content: flex-start;
    padding-left: 0.75rem;
}
.nav-scroll-btn.right-0 {
    background: linear-gradient(to left, var(--cat-fade-bg, var(--bg-color)) 45%, transparent);
    justify-content: flex-end;
    padding-right: 0.75rem;
}
.nav-scroll-btn:hover { color: var(--accent-color); }

/* Gallery Options */
.masonry-grid.no-gap, .std-grid.no-gap {
    column-gap: 0 !important;
    gap: 0 !important;
}
.masonry-grid.no-gap .masonry-item, .std-grid.no-gap .masonry-item {
    margin-bottom: 0 !important;
}
@media (min-width: 768px) {
    .std-grid.no-gap .masonry-item {
        width: calc(100% / var(--cols-desktop, 3)) !important;
    }
}

/* Borders */
.img-container.border-thin { border: 1px solid var(--gallery-border-color, transparent); }
.img-container.border-thick { border: 4px solid var(--gallery-border-color, transparent); }

.border-black { --gallery-border-color: #000000; }
.border-white { --gallery-border-color: #ffffff; }

/* Overflow classes triggered by JS */
@media (max-width: 767px) {
    .has-overflow .nav-scroll-btn { display: flex !important; }
    /* Pad both sides so items don't hide under the arrow buttons */
    .has-overflow .nav-content-ul { padding-left: 3.5rem; padding-right: 3.5rem; }
}

.nav-scroll-btn.disabled {
    opacity: 0;
    pointer-events: none;
}

/* Buttons */
.filter-btn.active { color: var(--accent-color); border-bottom: 1px solid var(--accent-color); }
.sub-filter-btn.active { color: var(--accent-color); background-color: var(--border-color); border-color: var(--border-color); }

/* Loader */
.loader { border: 2px solid #333; border-top: 2px solid var(--accent-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 50px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Page Content */
.page-content p { margin-bottom: 1.5rem; }
.page-content a { text-decoration: underline; color: var(--accent-color); }
.page-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content b, .page-content strong { font-weight: 700; color: var(--accent-color); }
.page-content i, .page-content em { font-style: italic; }

/* Brand Colors */
.hover\:text-instagram:hover { color: #E1306C; }
.hover\:text-facebook:hover { color: #1877F2; }
.hover\:text-youtube:hover { color: #FF0000; }
.hover\:text-bluesky:hover { color: #0085ff; }
.hover\:text-tiktok:hover { color: #00f2ea; }

/* Background Styles */
#bg-effect-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--bg-effect-opacity, 1);
    transition: opacity 0.3s ease;
}

/* Gradient Effects */
.effect-solid {
    background-color: var(--custom-bg-accent-color, var(--accent-color));
}
.effect-gradient-top {
    background: linear-gradient(to bottom, var(--custom-bg-accent-color, var(--accent-color)), transparent 100%);
}
.effect-gradient-bottom {
    background: linear-gradient(to top, var(--custom-bg-accent-color, var(--accent-color)), transparent 100%);
}

/* Cloud Effect - Complex blurred gradients */
.effect-cloud {
    background: radial-gradient(circle at 50% 50%, var(--custom-bg-accent-color, var(--accent-color)), transparent 70%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.effect-cloud::before, .effect-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
}
.effect-cloud::before {
    top: -20%; left: -20%; width: 80%; height: 80%;
    background: radial-gradient(circle, var(--custom-bg-accent-color, var(--accent-color)), transparent);
    animation: floatCloud 20s infinite alternate ease-in-out;
}
.effect-cloud::after {
    bottom: -20%; right: -20%; width: 80%; height: 80%;
    background: radial-gradient(circle, var(--custom-bg-accent-color, var(--accent-color)), transparent);
    opacity: 0.4; /* Increased opacity for accent */
    animation: floatCloud 25s infinite alternate-reverse ease-in-out;
    mix-blend-mode: screen;
}

@keyframes floatCloud {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 5%) scale(1.1); }
}

/* Light Theme Adjustments for Cloud */
body.theme-light .effect-cloud::after {
    mix-blend-mode: multiply;
    opacity: 0.3;
}

/* Purple & Green Theme Adjustments for Cloud */
body.theme-purple-green .effect-cloud {
    background: radial-gradient(circle at 50% 50%, var(--secondary-bg), transparent 70%);
}
body.theme-purple-green .effect-cloud::before {
    background: radial-gradient(circle, var(--secondary-bg), transparent);
}
body.theme-purple-green .effect-cloud::after {
    background: radial-gradient(circle, var(--accent-color), transparent);
}

/* Background Image Layer */
#bg-image-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Logo Styles */
.nav-logo {
    max-height: 80px; /* Default max height */
    width: auto;
    display: block;
}