/*
Theme Name: Unknown Field
Theme URI: https://unknownfield.art
Author: Radim Koros
Description: A minimalist conceptual WordPress theme for art-research projects.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: unknown-field
*/

:root {
    --black: #0a0a0a;
    --white: #fafafa;
    --gray: #888888;
    --gray-light: #f0f0f0;
    --gray-dark: #222222;
    --font: 'Source Serif Pro', Georgia, serif;
    --transition: 0.4s ease;
}

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

html { font-size: 18px; }

body {
    font-family: var(--font);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

body.theme-light { background: var(--white); color: var(--black); }
body.theme-dark { background: var(--black); color: var(--white); }
body.theme-dark a { color: var(--white); }

a { color: inherit; text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.5; }

h1, h2, h3 { font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: 0.1em; margin-bottom: 2rem; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; }

p { margin-bottom: 1.5rem; max-width: 700px; }

.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.site-content { flex: 1; padding: 10rem 4rem 4rem; animation: fadeIn 1s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== HEADER ===== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 2rem 4rem;
    display: flex; justify-content: space-between; align-items: center;
}

.site-logo {
    font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
}

.header-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Back button - EXACT same position as cat-toggle */
.back-button {
    position: fixed;
    left: 50%;
    top: 2rem;
    transform: translateX(-50%);
    font-family: var(--font);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 100;
}

/* Mobile header */
@media (max-width: 768px) {
    .site-header {
        padding: 1.5rem 1rem;
    }
    /* Back button on mobile - use fixed position like cat-toggle */
    .back-button {
        position: fixed;
        left: 50%;
        top: 1.5rem;
        transform: translateX(-50%);
    }
    .cat-toggle {
        position: fixed;
        left: 50%;
        top: 1.5rem;
        transform: translateX(-50%);
    }
}

/* Categories - spread randomly below header line */
.header-categories {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    z-index: 99;
    transition: height 0.3s ease;
}

.cat-toggle {
    position: fixed;
    left: 50%;
    top: 2rem;
    transform: translateX(-50%);
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    color: inherit;
    pointer-events: auto;
    z-index: 100;
}

/* Desktop: inline category items */
.cat-items-desktop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: height 0.3s ease;
}
.cat-items-desktop.is-open { display: block; }

.cat-item {
    position: absolute;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    pointer-events: auto;
    white-space: nowrap;
}
.cat-item:hover { color: inherit; opacity: 1; }
.cat-item.active { color: inherit; text-decoration: underline; }

/* Mobile: Category overlay (hidden on desktop) */
.cat-overlay {
    display: none;
}

/* Mobile category styles */
@media (max-width: 768px) {
    .header-categories {
        top: auto;
        bottom: auto;
        height: auto;
        position: static;
    }
    .cat-toggle {
        position: fixed;
        left: 50%;
        top: 1.5rem;
        transform: translateX(-50%);
    }
    .back-button {
        position: fixed;
        left: 50%;
        top: 1.5rem;
        transform: translateX(-50%);
    }
    /* Hide desktop dropdown on mobile */
    .cat-items-desktop {
        display: none !important;
    }
    /* Category overlay - fullscreen with scroll support */
    .cat-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        padding: 2rem;
        overflow-y: auto;
    }
    body.theme-light .cat-overlay { background: var(--white); }
    body.theme-dark .cat-overlay { background: var(--black); }
    .cat-overlay.is-open {
        display: block;
    }
    .cat-close {
        position: fixed;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        font-family: var(--font);
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        color: inherit;
        z-index: 201;
    }
    .cat-overlay-items {
        position: relative;
        width: 100%;
        min-height: 100%;
    }
    .cat-overlay-item {
        position: absolute;
        font-size: 1.25rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--gray);
        white-space: nowrap;
    }
    .cat-overlay-item:hover { color: inherit; }
    .cat-overlay-item.active { color: inherit; text-decoration: underline; }
}

/* Header menu - same style as main menu but smaller */
.header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-menu > li > a {
    font-size: 0.8rem; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
    display: inline-block;
}
.header-menu .uf-arrow { 
    font-size: 0.7rem; 
    margin-left: 0.3rem; 
}

.header-right {
    display: flex; align-items: center; gap: 1.5rem;
}

.nav-toggle {
    background: none; border: none; font-family: var(--font);
    font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; color: inherit;
}

/* ===== FULLSCREEN MENU ===== */
.nav-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    flex-direction: column; justify-content: center; align-items: center;
    background: var(--white);
}
body.theme-dark .nav-overlay { background: var(--black); }
.nav-overlay.is-open { display: flex; }

.nav-close {
    position: absolute; top: 2rem; right: 4rem;
    background: none; border: none; font-family: var(--font);
    font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; color: inherit;
}

.main-menu { list-style: none; text-align: center; }
.main-menu > li { margin: 0.75rem 0; }
.main-menu > li > a {
    font-size: 2rem; letter-spacing: 0.05em;
    display: inline-block; padding: 0.25rem 0;
}
.main-menu .uf-arrow { font-size: 1rem; margin-left: 0.5rem; }

/* Submenu - hidden by default, random positioned */
.uf-submenu {
    display: none; list-style: none; position: fixed; z-index: 300;
}
.uf-submenu.is-visible { display: block; }
.uf-submenu li {
    position: fixed; padding: 0.5rem 1rem;
    font-size: 1.25rem; color: var(--gray);
}
body.theme-light .uf-submenu li { background: var(--white); }
body.theme-dark .uf-submenu li { background: var(--black); }

/* ===== HOME ===== */
.home-hero {
    height: 100vh;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    padding: 4rem;
    overflow: hidden;
}
.home-hero .home-title { 
    font-size: clamp(3rem, 12vw, 8rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
    animation: fadeIn 1s 0.3s both;
    margin-bottom: 1rem;
}
.home-hero .home-subtitle {
    font-size: 1rem; color: var(--gray); margin-bottom: 2rem;
    max-width: 600px; animation: fadeIn 1s 0.5s both;
}
.home-hero .home-intro { animation: fadeIn 1s 0.7s both; margin-bottom: 2rem; }
.home-hero .home-intro p { margin-bottom: 0; font-size: 0.9rem; }
.home-hero .home-nav { animation: fadeIn 1s 0.9s both; margin-bottom: 1rem; }
.home-nav .main-menu { text-align: left; }
.home-nav .main-menu > li > a { font-size: 1.1rem; }
.home-nav .main-menu > li { margin: 0.25rem 0; }

/* Home footer - left aligned, under menu */
.home-footer {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: fadeIn 1s 1.1s both;
}
.home-footer a {
    color: var(--gray);
}
.home-footer a:hover {
    color: inherit;
}

/* Home mobile menu button - centered in header */
.home-mobile-header {
    display: none;
}
.home-menu-toggle {
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    color: inherit;
}

/* Home mobile footer - scrolls with content */
.home-mobile-footer {
    display: none;
    padding: 2rem;
    text-align: center;
}
.home-mobile-footer .footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.home-mobile-footer .footer-nav a {
    color: var(--gray);
}
.home-mobile-footer .footer-nav a:hover {
    color: inherit;
}

/* Desktop/Mobile visibility helpers */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Desktop home - fit to screen but allow scroll on smaller screens */
@media (min-width: 769px) {
    body.home {
        overflow: auto;
    }
    .home-hero { 
        min-height: 100vh;
        padding: 3rem 4rem;
        overflow: visible;
    }
    .home-nav .main-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 2rem;
    }
    .home-nav .main-menu > li {
        margin: 0;
    }
    /* Hide mobile elements on desktop */
    .home-mobile-header {
        display: none !important;
    }
    .home-mobile-footer {
        display: none !important;
    }
}

/* Large desktop - lock scrolling when content fits */
@media (min-width: 769px) and (min-height: 700px) {
    body.home {
        overflow: hidden;
    }
    .home-hero {
        height: 100vh;
        min-height: auto;
        overflow: hidden;
    }
}

/* Mobile home page */
@media (max-width: 768px) {
    body.home {
        overflow: auto;
    }
    /* Mobile header with centered menu button */
    .home-mobile-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .home-hero {
        height: auto;
        min-height: auto;
        padding: 6rem 2rem 2rem;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }
    .home-hero .home-title {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
    .home-hero .home-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .home-hero .home-intro {
        margin-bottom: 2rem;
    }
    .home-hero .home-intro p {
        font-size: 0.9rem;
    }
    /* Hide desktop elements on mobile */
    .desktop-only {
        display: none !important;
    }
    /* Show mobile elements */
    .mobile-only {
        display: block !important;
    }
    /* Mobile footer - scrolls with content, not fixed */
    .home-mobile-footer {
        display: block;
        position: static;
        padding: 2rem;
    }
}

/* ===== CONTENT PAGES ===== */
.page-header { margin-bottom: 4rem; }
.page-title { font-size: 2rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Text content - 55% centered */
.text-container { width: 55%; margin: 0 auto; position: relative; }
@media (max-width: 900px) { .text-container { width: 100%; } }

/* Content Categories */
.content-categories {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: var(--gray);
}
.content-categories a {
    color: var(--gray);
}
.content-categories a:hover {
    color: inherit;
}
.cat-sep {
    margin: 0 0.3rem;
    color: var(--gray);
}

.text-content p { line-height: 2; }

/* Random media in text - ONLY for text posts on wide desktop */
@media (min-width: 1200px) {
    .text-content img, .text-content figure {
        position: absolute; max-width: 35%;
    }
    .text-content img:nth-of-type(odd), .text-content figure:nth-of-type(odd) { left: -45%; }
    .text-content img:nth-of-type(even), .text-content figure:nth-of-type(even) { right: -35%; }
}
@media (max-width: 1199px) {
    .text-content img, .text-content figure { width: 100%; position: static; margin: 1rem 0; }
}

/* Normal media in single posts (image, sound, video) - NOT random */
.single-body img, .single-body figure {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

/* Gallery - simple responsive layout */
.gallery-grid { 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.gallery-item { 
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.gallery-image {
    width: 100%; 
}

.gallery-image img { 
    width: 100%; 
    height: auto; 
    display: block;
}

.gallery-image a {
    display: block;
}

.gallery-placeholder { 
    color: var(--gray); 
    font-size: 0.8rem; 
    letter-spacing: 0.2em; 
    text-transform: uppercase;
    padding: 4rem;
    display: block;
    background: var(--gray-light);
}
body.theme-dark .gallery-placeholder { background: var(--gray-dark); }

.gallery-caption { 
    margin-top: 1rem; 
    font-size: 0.9rem; 
    color: var(--gray); 
}

/* List items */
.items-list { display: flex; flex-direction: column; gap: 2rem; }
.list-item { padding-bottom: 2rem; border-bottom: 1px solid var(--gray-light); }
body.theme-dark .list-item { border-color: var(--gray-dark); }
.list-item:last-child { border: none; }
.item-image { margin-bottom: 1rem; }
.item-image img { width: 100%; height: auto; display: block; }
.item-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.item-excerpt { color: var(--gray); }
.item-meta { font-size: 0.75rem; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.5rem; }

/* Media items */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.media-item { }
.media-thumb { margin-bottom: 1rem; }
.media-thumb img { width: 100%; height: auto; }

/* Experiment canvas */
.experiment-wrap { width: 100%; height: 60vh; border: 1px solid var(--gray-light); margin-bottom: 2rem; }
body.theme-dark .experiment-wrap { border-color: var(--gray-dark); }
#experiment-canvas { width: 100%; height: 100%; cursor: crosshair; }
.experiment-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.experiment-btns button {
    background: none; border: 1px solid currentColor; padding: 0.75rem 1.5rem;
    font-family: var(--font); font-size: 0.75rem; letter-spacing: 0.1em;
    text-transform: uppercase; cursor: pointer; color: inherit;
}

/* Footer - Vertical on desktop (not front page) */
.site-footer-vertical {
    display: none;
}
.site-footer-mobile {
    display: none;
}

/* Desktop: Vertical rotated footer on right edge */
@media (min-width: 769px) {
    .site-footer-vertical {
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 90;
        transform-origin: bottom right;
        transform: rotate(-90deg) translateX(100%);
        white-space: nowrap;
        padding: 1rem 2rem;
    }
    .footer-nav-vertical {
        display: flex;
        gap: 1.25rem;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .footer-nav-vertical a {
        color: var(--gray);
    }
    .footer-nav-vertical a:hover {
        color: inherit;
    }
    .site-footer-mobile {
        display: none !important;
    }
}

/* Mobile: Horizontal footer at bottom */
@media (max-width: 768px) {
    .site-footer-vertical {
        display: none !important;
    }
    .site-footer-mobile {
        display: block;
        padding: 2rem;
        text-align: center;
    }
    .site-footer-mobile .footer-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .site-footer-mobile .footer-nav a {
        color: var(--gray);
    }
    .site-footer-mobile .footer-nav a:hover {
        color: inherit;
    }
}

/* Single post */
.single-header { margin-bottom: 2rem; padding-top: 1rem; }
.single-title { font-size: 1.5rem; letter-spacing: 0.1em; }
.single-meta { font-size: 0.75rem; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.5rem; }
.single-body p { line-height: 2; }
.post-nav { display: flex; justify-content: space-between; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--gray-light); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
body.theme-dark .post-nav { border-color: var(--gray-dark); }

/* Single image page - fit screen elegantly */
.single-image-article {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 12rem);
}
.single-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.single-image-container img {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 404 */
.not-found { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* User Account Pages */
.account-form {
    max-width: 400px; margin: 0 auto;
}
.account-form .form-group { margin-bottom: 1.5rem; }
.account-form label {
    display: block; font-size: 0.75rem; letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 0.5rem; color: var(--gray);
}
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    width: 100%; padding: 0.75rem; border: 1px solid var(--gray-light);
    font-family: var(--font); font-size: 1rem; background: transparent; color: inherit;
}
body.theme-dark .account-form input { border-color: var(--gray-dark); }
.account-form input:focus { outline: none; border-color: var(--gray); }
.account-form button[type="submit"] {
    width: 100%; padding: 1rem; background: var(--black); color: var(--white);
    border: none; font-family: var(--font); font-size: 0.8rem;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
body.theme-dark .account-form button[type="submit"] { background: var(--white); color: var(--black); }
.account-form button:hover { opacity: 0.8; }
.account-form .form-links {
    margin-top: 2rem; font-size: 0.85rem; color: var(--gray);
}
.account-form .form-links a { text-decoration: underline; }
.account-message {
    padding: 1rem; margin-bottom: 2rem; font-size: 0.9rem;
}
.account-message.success { background: #e8f5e9; color: #2e7d32; }
.account-message.error { background: #ffebee; color: #c62828; }
.account-message.pending { background: #fff3e0; color: #e65100; }
body.theme-dark .account-message.success { background: #1b5e20; color: #a5d6a7; }
body.theme-dark .account-message.error { background: #b71c1c; color: #ef9a9a; }
body.theme-dark .account-message.pending { background: #e65100; color: #ffe0b2; }

/* User dashboard */
.user-dashboard { }
.user-info { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray-light); }
body.theme-dark .user-info { border-color: var(--gray-dark); }

/* Responsive */
@media (max-width: 768px) {
    .site-content { padding: 8rem 1.5rem 2rem; }
    .site-header { padding: 1.5rem; }
    .nav-close { right: 1.5rem; }
    .home-hero { padding: 2rem; }
    .header-center { display: none; }
}