/* Jakob von Rotz Theme - Decorative Elements
   Rebuilt on the dark theme's decorative layer (current, well-maintained
   effects & filters) with this theme's own colour scheme (via variables.css)
   plus the signature full-page circular gradient backdrop. Obsolete
   jakobvonrotz-only effects — heavy multi-shadow header text, the solarize
   topic filter, and the pre-refactor nav selectors (header > section.navmenu_*
   button, button#sticky-up-button, div.galleryTitle) that stopped matching
   after the navmenu rework — were dropped in favour of the dark theme's
   cleaner, current set. */

/* Header decorative line */
.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);
}

/* Signature full-page circular gradient backdrop (kept from this theme).
   Fixed behind all content; concentric rings anchored at the bottom-right,
   built from the translucent background colours in variables.css. */
.header::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--header-pattern-background);
    z-index: -1;
}

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 */
.gallery-item:hover {
    transform: scale(var(--hoverscale));
    transition: transform var(--growtime) ease;
}

.content-card {
    background: linear-gradient(
                    90deg,
                    var(--background-highlight),
                    var(--background-highlight),
                    transparent
                );
}
.content-card:nth-child(even) {
    background: linear-gradient(
                    270deg,
                    var(--background-highlight),
                    var(--background-highlight),
                    transparent
                );
}
.content-card:nth-child(even) h4 {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: calc(var(--cards-image-ratio) /3) !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 */
.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 var(--font-color-accent-transparent);
}

/* Form elements styling */
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 var(--font-color-accent-transparent);
}

/* Links styling */
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);
}

/* Gallery title uses the theme's display font */
header > div#gallery-title {
    font-family: var(--font-family-display);
}

@media screen and (min-width: 1921px) {
    :root {
        font-size: 114%;
        --beforeimageoffset-vert: 3em;
        --beforeimageoffset-hor: 5svw;
    }
    .intro-text {
        padding-bottom: 3.5svh; /* additional padding because of scaled bg images in #topic[n]::before bg images */
    }
    .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;
    }
    #topic2::before,
    #topic3::before {
        right: calc(-1 * var(--beforeimageoffset-hor));
        min-height: 35svh; /* Ensure a minimum height (incl. overhang) for ::before 'bg' images height on large screens */
        top: calc(-1 * var(--beforeimageoffset-vert));
        bottom: calc(-1 * var(--beforeimageoffset-vert));
    }

    #topic1::before {
        left: calc(-1 * var(--beforeimageoffset-hor));
        min-height: 35svh; /* Ensure a minimum height (incl. overhang) for ::before 'bg' images height on large screens */
        top: calc(-1 * var(--beforeimageoffset-vert));
        bottom: calc(-1 * var(--beforeimageoffset-vert));
    }
    /* Extend linkspace to cover the ::before overhang so bg images are clickable */
    #topic2 > a.linkspace,
    #topic3 > a.linkspace {
        right: calc(-1 * var(--beforeimageoffset-hor));
        top: var(--beforeimageoffset-vert);
        bottom: calc(-1 * var(--beforeimageoffset-vert));
    }
    #topic1 > a.linkspace {
        left: calc(-1 * var(--beforeimageoffset-hor));
        top: var(--beforeimageoffset-vert);
        bottom: calc(-1 * var(--beforeimageoffset-vert));
    }
}

@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%));
    }
}

/* Mobile-portrait bottom navmenu bar — theme adaptation.
   Core (style.css) pins the bar to the bottom and makes the buttons round /
   icon-only; here we give those round buttons a cohesive pill fill so they
   read as tap targets on the translucent bar. */
@media screen and (max-width: 768px) and (orientation: portrait) {
    header > section.navmenu button.ui-button {
        background-color: var(--background-highlight-transparent);
        box-shadow: none;
    }
    header > section.navmenu button.ui-button:hover {
        background-color: var(--background-highlight);
    }
}