/* Dark Gallery 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);
}

/* Dark theme styling */
body {
    background-color: var(--background-primary);
    color: var(--font-color-text);
}

/* Header decorative line */
.header-decorative-line {
    background: var(--header-line-gradient);
    height: 2px;
    width: 100%;
    margin: 1rem 0;
}

/* Enhanced hover effects for dark theme */
.gallery-item:hover {
    transform: scale(var(--hoverscale));
    transition: transform var(--growtime) ease;
}

/* Dark card styling with subtle glow */
.content-card {
    background: linear-gradient(90deg, var(--background-highlight) calc(var(--cards-image-ratio) / 3.3), var(--background-highlight, var(--cards-image-ratio)), transparent calc(1.5 * 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(1.5 * var(--cards-image-ratio) + .2%));
        align-self: end;
}
.content-card:nth-child(even) h4 {
            align-self: end;
            margin-right: 1em;
            margin-left: auto;
            padding-right: 0;
            padding-right: 1em !important;
            margin-left: auto !important;
}
.card-content-container {
    display: block;
    text-align: left;
    width: fit-content;
    align-self: end;
}

/* Topic background images for cards */
#topic1::before,
#topic2::before,
#topic3::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* initially hidden */
    transition: opacity 0.3s ease-in-out;
    filter: brightness(0.86) contrast(1.05); /* Darken images for better text contrast */
}

#topic2::before,
#topic3::before {
    right: 0;
    left: var(--cards-image-ratio);
}

#topic1::before {
    right: var(--cards-image-ratio);
    left: 0;
}

/* Navigation styling for dark theme */
.nav-item {
    border-bottom: 2px solid transparent;
}

.nav-item:hover,
.nav-item.active {
    border-bottom-color: var(--font-color-highlight);
    text-shadow: 0 0 8px var(--font-color-accent);
}

.tab-headers label, .tab-headers label .tab-icon {
    color: var(--font-color-highlight);
    filter: none;
}   

.tab-headers label {
    border-color: var(--font-color-highlight);
}

.tab-headers label, 
button {
    border-color: var(--font-color-highlight);
    background-color: var(--background-highlight);
    color: var(--font-color-text);
}

button:hover {
    background-color: var(--background-primary);
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.3);
}

/* Form elements styling for dark theme */
input, textarea, select {
    background-color: var(--background-highlight);
    color: var(--font-color-text);
    border: 1px solid #4a5568;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--font-color-accent);
    box-shadow: 0 0 0 2px rgba(167, 243, 208, 0.2);
}

/* Links styling for dark theme */
a {
    color: var(--font-color-highlight);
}
blockquote {
    color: contrast-color(var(--background-highlight-transparent));
    background-color: var(--background-highlight-transparent);
    filter: brightness(.9);
    a {
        color: var(--background-highlight-transparent);
    }
}
a:hover {
    color: var(--font-color-accent);
    text-shadow: 0 0 5px var(--font-color-accent);
}
/* Style sticky up button to match gallery/slideshow navmenu buttons */
#navmenu-sticky-up button {
    color: var(--font-color-text);
    background-color: var(--background-highlight-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);
}

#navmenu-sticky-up button .svg-icon {
    color: var(--font-color-text);
    border-radius: 50%;
    -webkit-filter: drop-shadow(1px 1px 1px black);
    filter: drop-shadow(1px 1px 1px black) drop-shadow(-1px -1px 1px black) drop-shadow(-1px 1px 1px black) drop-shadow(1px -1px 1px black);
}
@media screen and (min-width: 1921px) {
    :root {
        font-size: 114%;
    }
    .intro-text {
        padding-bottom: 3.5svh; /* additional padding because of scaled bg images in #topic[n]::before bg images */ 
    }
    /* test comment */ 
    .cards {
        gap: 12svh;
        padding-bottom: min(12svh, 7rem); /* additional padding because of scaled bg images in #topic[n]::before bg images */
    }
    #topic1, 
    #topic2, 
    #topic3 {
        overflow: visible;
    }
    #topic1::before,
    #topic2::before,
    #topic3::before {
        min-height: 35svh; /* Ensure a minimum height (incl. overhang) for ::before 'bg' images height on large screens */         
        top: -3svh; /* to create an overhang effect */
        bottom: -12svh; /* to create an overhang effect */
    }
    /* Extend linkspace to cover the ::before overhang so bg images are clickable */
    #topic2 > a.linkspace,
    #topic3 > a.linkspace {
        right: -15svw;
        top: -3svh;
        bottom: -12svh;
    }
    #topic1 > a.linkspace {
        left: -17svw;
        top: -3svh;
        bottom: -12svh;
    }
    #topic2::before,
    #topic3::before {
    right: -15svw;
    left: calc(var(--cards-image-ratio) + 12em);
    }

    #topic1::before {
    left: -17svw;
    right: calc(var(--cards-image-ratio) + 17em);
    }
}

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