/* Dark Gallery Theme - Decorative Elements */

/* Header decorative elements - theme-specific styling */
header {
    margin-top: -.2em;
}
.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;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(167, 243, 208, 0.2);
}

/* Dark card styling with subtle glow */
.card {
    background: var(--background-highlight);
    border: 1px solid #4a5568;
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 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.7) contrast(1.2); /* 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);
}

a:hover {
    color: var(--font-color-accent);
    text-shadow: 0 0 5px var(--font-color-accent);
}
.svg-icon {
    stroke-width: 1pt;
}

@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 */
    }
    #topic2::before,
    #topic3::before {
    right: -15svw;
    left: calc(var(--cards-image-ratio) + 12em);
    }

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