/* Core Structural CSS - Theme Independent */

/* Theme CSS files are loaded dynamically in head.php based on ACTIVE_THEME */
/* No hardcoded @import statements here - allows for theme switching */
html {
    scroll-behavior: smooth;
}
/* SVG Colors - uses theme variables */
.svg-icon {
    color: var(--font-color-highlight);
    aspect-ratio: 1;
    height: 1.33em; /* don't set to 'lh' css unit! */
}
.home { color: var(--color-home); }
.danger { color: var(--color-danger); }
.admin, .user { color: var(--color-neutral); }
.exit, .check, .play { color: var(--color-ok); }
 
/* Close and Toggle Buttons (ROUND!) */
.close,
.toggle-collapse {
    display: grid;
    color: var(--font-color-highlight);
    float: right;
    background-color: var(--background-highlight);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--font-color-highlight);
    text-align: center;
    align-content: center;
    padding: 0.1em;
    cursor: pointer;
}

/* Media elements */
iframe {
    min-height: calc(20lvh + 10vw);
    width: 100%;
}
video {
    max-width: 100lvw;
    max-height: 80lvh;

}
.video-container {
    position: relative;
    max-width: 65ch;
    margin: auto;
    /* Reserve space with aspect ratio to prevent layout shifts */
    aspect-ratio: 16 / 9;
    min-height: 200px;
    width: 100%;
}
.video-thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-player {
    max-width: 100%;
}
.video-player[controls] {
    background-color: black;
}
.video-player.playing {
    display: block;
}

/* Body and base typography */
body {
    position: relative;
   line-height: calc(sqrt(2));
   background: var(--background-primary);
   font-size: var(--font-size-body);
}
body, input, select, button  {
   font-family: var(--font-family-text);
   color: var(--font-color-text);
}

/* Header structure (decorative elements moved to theme) */
.header {
   grid-column: main-start / main-end;
   display: inline-flex;
}

/* Form */
form.admin-form {
    display: inline-flex;
    align-items: center;
}
/* Form elements */
form.login, form.create {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    max-width: fit-content;
}
form.login button.ui-button,
form.create button.ui-button {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    grid-column: 2 / 3;
}
form.login > label,
form.create > label {
   margin: auto .3rem auto auto;
}
form.login > input[type=submit], 
form.create > input[type=submit] {
   text-transform: uppercase;
   width: min-content;
   margin: 1rem 0.3rem auto auto;
}

/* Layout sections */
div.admin-toolcontainer {
   padding: 0 0 1.2em 0;
}
email {
   display: inline-block;
   background-color: var(--background-highlight);
   padding: 1em 1em 1em 1em;
}
section.impressum {
   grid-column: content-start / content-end;
   background-color: var(--background-primary-transparent);
   margin-bottom: 1em;
   max-width: fit-content;
}
.flexrow > h2 {
    margin-top: 0;
    margin-bottom: 0;
}
address {
   margin-left: 2em;
   padding: 0 0 0 1em;
   grid-column: 1 / 3;
}
section {
   background-color: transparent;
   margin-bottom: 1em;
}
a {
   max-width: max-content;
}

/* Typography utilities */
.oblique { font-style: oblique; }
.uppercase { text-transform: uppercase; }
.capital-start-letter {
   list-style-type: none;
}
.capital-start-letter::first-letter {
   background-color: inherit;
   vertical-align: text-top;
   float: left;
   color: var(--font-color-highlight);
   font-size: 2.2em;
   line-height: 0.8;
   font-family: 'azaret_mono';
   text-decoration: none;
   margin-right: -0.03em;
}
@-moz-document url-prefix() {
   .capital-start-letter::first-letter {
       font-size: 336%;
       margin-right: 0.06em;
   }
}

/* Headers */
h1.icon {
    display: flex;
    z-index: 2;
    padding: 0;
    flex-basis: 5em;
    margin-top: .4em;
    margin-left: .5em;
}
h1.icon > a > span::first-letter,
h1.icon > a > span > span > span { /* This was needed because there is no appropriate selector available */
    font-weight: 700;
    font-family: 'expletussans_regular';
    font-size: 130%;
    margin-right: 0;
}
h1.icon > a > span > span {
    margin-left: 0.7rem;
}
h2, h3, h4 {
   z-index: 2;
}
h2 {
   font-size: calc(1em + 0.1vh);
   display: inline;
   margin-right: 1.5rem;
}
.nowrap {
   display: inline-block;
   white-space: nowrap;
}

/* Grid layout system */

.content-grid {     /********* GRID LAYOUT *********/
   position: relative;
   display: grid;
   grid-template-columns: [main-start] 10% [content-start] 1fr [content-end] 10% [main-end];
   grid-template-rows: auto 1fr auto;
   margin: auto;
}
.main {
   grid-column: main-start / main-end;
   max-width: var(--content-max-width-cards);
}

/* Content sections */
.content { 
    grid-column: content-start / content-end;
    position: relative;
    z-index: 1;
    padding: 1em;
    width: -moz-available;
    width: -webkit-fill-available;
    max-width: var(--content-max-width);
    max-height: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

/* ===== MEDIA QUERIES ===== */
/* Media queries are placed at the end to ensure they override earlier styles */

/* Firefox-specific styles */
@-moz-document url-prefix() {
    .capital-start-letter::first-letter {
        font-size: 336%;
        margin-right: 0.06em;
    }
}

/* Desktop and large screen adjustments */
@media screen and (max-width: 1920px) {
    h1.icon {
        margin-left: 1em;
    }
    .ss-img-div {
        grid-column: main-start / main-end;
    }
    .directory-comment-item {
        flex-basis: 100%;
        padding: 0 10vw;
    }
}
/* Gallery hover z-index - ensure hovered/focused thumbnails appear on top */
.gallery-container > a:hover,
.gallery-container > a:focus {
    z-index: 20; /* Above other gallery items but below modals */
    position: relative; /* Needed for z-index to work */
}

/* Touch devices and coarse pointers (tablets, phones) */
@media screen and (pointer: coarse) {
    :root {
        --cards-image-ratio: 95%; /* in percent, please! */

    }
    .header {
        margin-bottom: 3rem;
    } 

    /* The mirrored card un-mirrors itself on a coarse pointer -- one card per
       row, text over the full width. Those rules live in style.css now, directly
       under the desktop ones they undo (1.11.40). They were moved because this
       sheet was @imported and carried no cache-bust of its own; that is fixed at
       the source instead -- head.php links this sheet with its own `?v=<mtime>`
       (1.11.41) -- and they stay there because they read better beside the rules
       they correct. */
    /* Content card and topic styles moved to theme files */
    
    /* Prevent layout shifts during image/video loading on touch devices */
    .video-container {
        /* More aggressive space reservation on mobile */
        min-height: 200px;
        contain: layout; /* Prevent layout recalculation from affecting other elements */
    }
    
    img.gallery-image,
    .video-thumbnail {
        /* Ensure images maintain aspect ratio during loading */
        min-height: 100px;
        background-color: var(--background-highlight-transparent, rgba(0,0,0,0.1));
    }
    
    /* Adjust sticky header positioning for mobile */
    div.shared-content-header h3,
    div.regular-content-header h3 {
        top: 50%; /* Keep centered vertically */
        transform: rotate(-90deg) translateY(-50%); /* "Shared" header */
    }
    
    div.regular-content-header h3 {
        transform: rotate(90deg) translateY(-50%); /* "Regular" header */
    }
}
/* Mobile and small screen responsive styles */
@media screen and (max-width: 916px) {    
    header p.claim {
         display: none;
    }
    h2.galleryTitle {
         font-size: 1rem;
         white-space: nowrap;
         overflow-x: auto;
         text-overflow: ellipsis;
         max-width: 100%;
         padding-right: 0.5rem;
    }
    .gallery-container {
        padding-left: .8em;
        padding-right: .8em;
    }
    span.usermessage {
        display: none;
    }
}
@media screen and (max-width: 915px) {    
    header h1.icon {
        display: none;
    }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
    header > section.navmenu:not(.navmenu_gallery):not(.navmenu_slideshow) {
        right: unset;
    }
}
@media screen and (max-width: 468px) {
    header > section.navmenu {
        top: -1.1rem;
        right: 1rem;
        left: 1rem;
    };
    button {
        min-width: 21svw;
        grid-template-columns: auto;
        text-align: center;
        justify-items: center;
        .svg-icon {
            grid-row: 2;
        }
    }
}
/* Markdown content read-more functionality */
/* Long text gallery items take up more flex space */
@media (max-width: 768px) {
    .has-comment.long-text {
        flex: 1 1 100%; /* Full width on mobile */
    }
    
    .video-container {
        /* Ensure video containers maintain space while loading */
        min-height: 180px;
    }
    
    .site-footer {
        /* Enhanced mobile footer positioning */
        padding-bottom: calc(1em + env(safe-area-inset-bottom, 20px)); /* Fallback for older browsers */
        margin-bottom: calc(-.5em + env(safe-area-inset-bottom, 0px));
    }
}
@media screen and (min-width: 1921px) {
    
    .gallery-container {
        --gallery-unit: 10svw;
    }
}