/* Jakob von Rotz Theme - Decorative Elements */

/* Header decorative elements - theme-specific styling */
.header::before {
    z-index: 0;
    content: '';
    position: absolute;
    top: var(--titleline-top);
    right: 0;
    bottom: var(--titleline-btm);
    left: 0;
    background: var(--header-line-gradient);
    transform: translateY(.09rem);
}

.header::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--header-pattern-background);
    z-index: -1; /* Behind the text */
}

/* Gallery title decorative background */
div.galleryTitle {
    z-index: 0;
    content: '';
    position: absolute;
    right: 12.6svw;
    left: 12.6svw;
    background: var(--header-line-gradient);
    transform: translateY(.09rem);
}

/* Theme-specific text shadows for headers */
.header,
.galleryTitle,
.gallery-Title > h2 {
    text-shadow: .1rem .1rem 0 black, -3px -6px 1em lightpink, 3px 6px .5em var(--background-highlight-transparent), 0.5px 0.5px 0.5px black, -0.5px -0.5px 0.5px var(--font-color-text);
}

/* Content card layout - theme-specific gradients */
.content-card {
    background: linear-gradient(90deg, var(--background-highlight) var(--cards-image-ratio), transparent calc(var(--cards-image-ratio) + .2%));
}

.content-card:nth-child(even) { /* CAREFUL: topic numbers not sequential in HTML! -> topic1 is in center pos.*/
    background: linear-gradient(-90deg, var(--background-highlight) var(--cards-image-ratio), transparent calc(var(--cards-image-ratio) + .2%));
}

/* Topic background images - theme-specific filters */
#topic1::before,
#topic2::before,
#topic3::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;    
    background-size: cover;
    background-position: top 14% center;
    background-repeat: no-repeat;
    filter: invert(7%) brightness(80%) saturate(175%); /* "Solarize" effect */
    opacity: 0; /* initially hidden */
    transition: opacity var(--growtime) ease-in-out; /* Fade-in transition */
}

#topic2::before,
#topic3::before { /* CAREFUL: topic numbers not sequential in HTML! */
    right: 0;
    left: var(--cards-image-ratio);
}

#topic1::before { /* CAREFUL: topic numbers not sequential in HTML! */
    right: var(--cards-image-ratio);
    left: 0;
}

/* Thumbnail overlay gradients - theme-specific */
.thumb-div > span {
    background: linear-gradient(90deg, transparent 0%, var(--background-primary) 5%, var(--background-highlight-transparent) 37%, var(--background-primary-transparent) 100%);
}

.comment-container .floating-thumb > span {
    background: linear-gradient(90deg, transparent 0%, var(--background-primary) 5%, var(--background-highlight-transparent) 37%, var(--background-primary-transparent) 100%);
}

/* Mobile responsive adjustments for theme */
@media screen and (pointer: coarse) {
    .content-card {
        background: linear-gradient(90deg, var(--background-highlight) calc(var(--cards-image-ratio) / 3.3), transparent calc(var(--cards-image-ratio) + .2%));
    }
    
    .content-card:nth-child(even) {
        background: linear-gradient(-90deg, var(--background-highlight) calc(var(--cards-image-ratio) / 3.3), transparent calc(var(--cards-image-ratio) + .2%));
    }
    
    #topic1::before,
    #topic2::before,
    #topic3::before {
        right: 0;
        left: 0;
    }
}

.tab-headers label,
.tab-headers label .tab-icon {
    /* Add drop shadow for icons like navmenu */
    filter: drop-shadow(1px 1px 2px black) drop-shadow(-1px -1px 2px black) drop-shadow(-1px 1px 2px black) drop-shadow(1px -1px 2px black);
}
header > section.navmenu_gallery button,
header > section.navmenu_slideshow button {
    background-color: transparent;
    box-shadow: 1px 1px 3px var(--font-color-text), -1px -1px 3px var(--font-color-text), 1px -1px 3px var(--font-color-text), -1px 1px 3px var(--font-color-text);
    text-shadow: 1px 1px 3px black, -1px -1px 2px var(--font-color-accent), -1px 1px 3px black, 1px -1px 2px var(--font-color-highlight);
}
header > section.navmenu_gallery button .svg-icon,
header > section.navmenu_slideshow button .svg-icon {
    color: var(--font-color-text);
    border-radius: 50%;
    -webkit-filter: drop-shadow(1px 1px 2px black);
    filter: drop-shadow(1px 1px 2px black) drop-shadow(-1px -1px 2px black) drop-shadow(-1px 1px 2px black) drop-shadow(1px -1px 2px black);
}
header > section.navmenu {
    top: -.9rem;
}
header > div#gallery-title {
    font-family: var(--font-family-display); 
}