/* -------------------------------------------- */
/* VAPAGUIDE 24 */
/* Version: 57 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Unique actors */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !ACTOR: Homepage animal group selector */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_zoo {
    width: var(--site-width);
    margin: 0 auto 0 auto;
    container-name: zoo-container;
    container-type: inline-size;
}

#actor_zoo h1 {
    display: none;
}

#actor_zoo .substance-zoo {
    background: transparent center url("./img/back_home.jpg") no-repeat;
    background-size: cover;
    position: relative;
    padding-top: var(--vertical-padding);
    padding-bottom: var(--vertical-padding);
    
    --vertical-padding: 32px;
}

/* Endless backgrounds */
#actor_zoo .substance-zoo:before, 
#actor_zoo .substance-zoo:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 100vw;
    z-index: -1;
}

#actor_zoo .substance-zoo:after {
    right: auto;
    left: 100%;
}

/* Custom colorization */
#actor_zoo .substance-zoo:before {
    background: var(--vapa-water-light);
}

#actor_zoo .substance-zoo:after {
    background: var(--vapa-land-light);
}

@media only screen and (max-width: 736px) {
    #actor_zoo .substance-zoo {
        background-image: url("./img/back_home_mobile.jpg");
        
        --vertical-padding: 16px;
    }
    
    #actor_zoo .substance-zoo:before, 
    #actor_zoo .substance-zoo:after {
        display: none;
    }
}

/* !--- Flyouts on homepage instance */
/* Override default flyout backgrounds */
#actor_zoo .substance-zoo .group-water .substance-flyout:before, 
#actor_zoo .substance-zoo .group-water .flyout-host {
    --flyout-background-color: var(--vapa-water-light);
}

#actor_zoo .substance-zoo .group-hybrid .substance-flyout:before, 
#actor_zoo .substance-zoo .group-hybrid .flyout-host {
    --flyout-background-color: var(--vapa-hybrid-light);
}

#actor_zoo .substance-zoo .group-land .substance-flyout:before, 
#actor_zoo .substance-zoo .group-land .flyout-host {
    --flyout-background-color: var(--vapa-land-light);
}

/* Unlimited height */
#actor_zoo .substance-zoo .flyout-host {
    max-height: none;
}


/* -------------------------------------------- */
/* !ACTOR: Homepage: invisible emergency links */
/* -------------------------------------------- */

#actor_emergency {
    
}


/* -------------------------------------------- */
/* !ACTOR: Global search results */
/* -------------------------------------------- */

/* !--- Grand containers */
#actor_results {
    margin: 0 0 64px 0;
    display: grid;
    grid-template-columns: 1fr;
}

/* Layout for 2 or 4 result sections */
#actor_results:has(nav:nth-child(4)), 
#actor_results:has(nav + nav):not(:has(nav:nth-child(3))) {
    grid-template-columns: 1fr 1fr;
    
    .result-section:nth-child(odd) + .result-section {
        border-left: var(--line-standard);
    }
}

#actor_results:has(nav:nth-child(4)) nav:nth-child(n+3) {
    border-top: var(--line-standard);
}

/* Layout for 3 result sections */
#actor_results:has(nav:nth-child(3)):not(:has(nav:nth-child(4))) {
    grid-template-columns: 1fr 1fr 1fr;
    
    .result-section + .result-section {
        border-left: var(--line-standard);
    }
}

/* Small viewports */
@media only screen and (max-width: 736px) {
    #actor_results {
        display: block;
    }
    
    #actor_results .result-section + .result-section {
        border-left: none !important;
        border-top: var(--line-standard);
        margin-top: 32px;
    }
}


/* !--- Idle state (no active search or zero results) */
#actor_results.expression-idle p {
    text-align: center;
    margin: 32px auto 0 auto;
}

@media only screen and (max-width: 736px) {
    #actor_results.expression-idle p {
        margin: 16px var(--mobile-gutter) 16px var(--mobile-gutter);
    }
}


/* !--- Single result section */
/* Section headline */
#actor_results .result-section h2 {
    font: var(--textset-content-l);
    font-weight: 400;
    padding: 24px 24px 24px 32px;
}

#actor_results .result-section.section-land h2 {
    background: var(--vapa-land-light);
}

#actor_results .result-section.section-water h2 {
    background: var(--vapa-water-light);
}

#actor_results .result-section.section-hybrid h2 {
    background: var(--vapa-hybrid-light);
}

#actor_results .result-section.section-other h2 {
    background: var(--vapa-general-light);
}

#actor_results .result-section h2 mark {
    font-weight: 600;
}

@media only screen and (max-width: 736px) {
    #actor_results .result-section h2 {
        padding: 16px var(--mobile-gutter) 16px var(--mobile-gutter);
    }
}

/* Link lists */
#actor_results .result-section .substance-menu {
    margin: 16px 16px 16px 12px;

    .menu-section .primary-action {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .menu-section.section-reducible:not(.item-active) li:nth-child(n+4) {
        display: none;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Abstract content */
/* -------------------------------------------- */

/* !--- Grand containers */
/* Standard layout */
#actor_content hgroup {
    padding-top: 32px;
    padding-bottom: 16px;
    height: var(--content-headline-height);
    padding-left: calc(var(--sidebar-width) + var(--width-1col));
}

#actor_content .content-flow {
    width: var(--content-width);
    margin-top: 24px;
    margin-left: calc(var(--sidebar-width) + var(--width-1col));
    margin-bottom: 64px;
    min-height: 200px;
}

#actor_content hgroup:has(h1:only-child) + .content-flow {
    margin-top: 24px;
}

@media only screen and (max-width: 736px) {
    #actor_content hgroup {
        padding: 16px var(--mobile-gutter) 0 var(--mobile-gutter);
        height: auto;
        border-bottom: none;
        
        /* VAP-198 EXPERIMENTAL */
        
        margin-top: var(--mobile-breadcumb-height);
    }
    
    #actor_content .content-flow {
        margin-top: 32px;
        margin-left: 0;
        margin-bottom: 48px;
        min-height: 0;
        padding: 0 var(--mobile-gutter) 0 var(--mobile-gutter);
    }
}

/* Layout with annotation column */
#actor_content.expression-annotated {
    display: flex;
    flex-wrap: wrap;
}

#actor_content.expression-annotated hgroup {
    width: 100%;
}

#actor_content.expression-annotated .content-annotation {
    order: 2;
    width: calc(var(--width-3col-plus) + var(--desktop-gutter));
    margin: 18px 0 0 var(--width-1col);
    height: min-content;
}

#actor_content.expression-annotated .content-annotation.annotation-shortcut {
    margin-top: 0;
}

@media only screen and (max-width: 736px) {
    #actor_content.expression-annotated {
        display: block;
    }
    
    #actor_content.expression-annotated .content-annotation, 
    #actor_content.expression-annotated .content-annotation.annotation-shortcut {
        width: 100%;
        margin: 16px 0 32px 0;
        padding: 0 var(--mobile-gutter) 0 var(--mobile-gutter);
    }
    
    #actor_content.expression-annotated .content-annotation.annotation-shortcut {
        margin-bottom: -16px;
    }
}


/* !--- Master headline */
#actor_content hgroup {
    border-bottom: var(--line-standard);
}

/* Actual headline */
#actor_content hgroup h1 {
    font: var(--textset-content-xxl);
    color: var(--textcolor-emphasis);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#actor_content hgroup h1 em {
    font-weight: 400;
}

/* Optional headline qualifier */
#actor_content hgroup p {
    font: var(--textset-content-m);
    color: var(--textcolor-dimmed);
}

@media only screen and (max-width: 736px) {
    #actor_content hgroup {
        padding-bottom: 6px;
    }
    
    #actor_content hgroup:has(+ .content-annotation.annotation-shortcut) {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    #actor_content hgroup h1 {
        white-space: normal;
        overflow: visible;
    }
    
    #actor_content hgroup h1:only-child {
        margin-bottom: 16px;
    }
}


/* !--- Main content: optional annotation column */
/* Geographical annotations */
#actor_content.expression-annotated .content-annotation .substance-media, 
#actor_content.expression-annotated .content-annotation .substance-table {
    width: 100%;
}

#actor_content.expression-annotated .content-annotation .substance-table tr:first-child th {
    padding: 4px 0 4px 0;
}

#actor_content.expression-annotated .content-annotation .substance-table td:first-child {
    font: var(--textset-table-l);
    font-weight: 600;
}

#actor_content.expression-annotated .content-annotation .substance-media {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    column-gap: 16px;
}

#actor_content.expression-annotated .content-annotation .substance-media + p {
    margin-top: 16px;
    font: var(--textset-content-m);
}

@media only screen and (max-width: 736px) {
    #actor_content.expression-annotated .content-annotation .substance-media {
        flex-direction: row;
    }
    
    #actor_content.expression-annotated .content-annotation .substance-media .media-image {
        max-width: 40dvw;
    }
    
    #actor_content.expression-annotated .content-annotation .substance-media figcaption {
        flex-grow: 1;
    }
}


/* !--- Main content: optional content shortcut links */
#actor_content.expression-annotated .content-annotation.annotation-shortcut {
    /* Section-colorized navigation sidebar */
    position: relative;
    top: -1px;
    border-top: var(--line-master);
    padding: 16px 16px 0 16px;
    
    &:is(.ensemble.expression-land .annotation-shortcut) {
        background: var(--vapa-land-light);
    }

    &:is(.ensemble.expression-hybrid .annotation-shortcut) {
        background: var(--vapa-hybrid-light);
    }

    &:is(.ensemble.expression-water .annotation-shortcut) {
        background: var(--vapa-water-light);
    }

    &:is(.ensemble.expression-general .annotation-shortcut) {
        background: var(--vapa-general-light);
    }
    
    /* Title */
    .shortcut-title {
        font-weight: 600;
        margin-bottom: 4px;
        
        &:is(.ensemble.expression-land .shortcut-title) {
            color: var(--vapa-land-solid);
        }
                
        &:is(.ensemble.expression-water .shortcut-title) {
            color: var(--vapa-water-solid);
        }

        &:is(.ensemble.expression-hybrid .shortcut-title) {
            color: var(--vapa-hybrid-solid);
        }
    }

    /* Link list */
    .substance-menu .menu-item {
        &:first-child {
            padding-top: 8px;
        }
        
        &:last-child {
            padding-bottom: 8px;
        }
        
        /* NOT USED YET: Active entry */
        &.item-active .menu-action {
            font-weight: 600;
        }
        
        &.item-active .menu-action.action-icon:before {
            background-color: var(--iconcolor-highlight);
            height: 100%;
            top: 0;
        }
    }
}

@media only screen and (max-width: 736px) {
    #actor_content.expression-annotated .content-annotation.annotation-shortcut {
        .menu-item + .menu-item {
            padding-top: 8px;
        }
    }
}


/* !--- Main content / Text Fragment API */
/* Disable default styling everywhere */
::target-text {
    background-color: unset;
    color: unset;
}

/* Enable visual matches in main content column */
#actor_content .content-flow ::target-text {
    background-color: yellow;
}


/* !--- Main content / Flow element: Headlines */
/* Phone viewports */
@media only screen and (max-width: 736px) {
    #actor_content .content-flow h2, 
    #actor_content .content-flow h3 {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
}

/* Illustrated Headlines (for Terrestrial Snakes / Distribution / Country) */
#actor_content .content-flow h2:is(#posCOL, #posPIT, #posVIP, #posELA, #posAUS) {
    --illustration-inset: 50px;
    
    margin-left: var(--illustration-inset);
    position: relative;
    
    &:before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--illustration-inset));
        bottom: 2px;
        width: 40px;
        height: 40px;
        background: transparent left bottom no-repeat;
        background-size: 40px;
    }
    
    &#posCOL:before {
        background-image: url("./img/illus/Colubrids@2x.png");
    }
    &#posPIT:before {
        background-image: url("./img/illus/PitVipers@2x.png");
    }
    &#posVIP:before {
        background-image: url("./img/illus/Vipers@2x.png");
    }
    &:is(#posELA, #posAUS):before {
        background-image: url("./img/illus/Elapids@2x.png");
    }
}

@media only screen and (max-width: 736px) {
    #actor_content .content-flow h2:is(#posCOL, #posPIT, #posVIP, #posELA, #posAUS) {
        padding-left: 0;
        padding-right: 0;
        width: calc(var(--site-width) - 2 * var(--mobile-gutter) - var(--illustration-inset));
    }
}

/* Illustrated Headlines (for Clinical management) */
#actor_content .content-flow h2.clinical-effect {
    --illustration-inset: 50px;
    
    margin-left: var(--illustration-inset);
    position: relative;
    
    &:before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--illustration-inset));
        bottom: 2px;
        width: 40px;
        height: 40px;
        background: transparent left bottom no-repeat;
        background-size: 40px;
    }
    
    /* Effect icons */
    &.effect-autopharmacological:before{
        background-image: url("./img/illus/effects/effect_ausschlag.svg");
        bottom: -2px;
    }
    &.effect-autopharmacological-none:before{
        background-image: url("./img/illus/effects/effect_ausschlag_off.svg");
        bottom: -2px;
    }

    &.effect-local:before{
        background-image: url("./img/illus/effects/effect_schwellung.svg");
        bottom: -2px;
    }
    &.effect-local-none:before{
        background-image: url("./img/illus/effects/effect_schwellung_off.svg");
        bottom: -2px;
    }

    &.effect-haemostatic:before{
        background-image: url("./img/illus/effects/effect_blut.svg");
        bottom: -4px;
    }
    &.effect-haemostatic-none:before{
        background-image: url("./img/illus/effects/effect_blut_off.svg");
        bottom: -4px;
    }

    &.effect-neurological:before{
        background-image: url("./img/illus/effects/effect_neuro.svg");
        bottom: 0px;
    }
    &.effect-neurological-none:before{
        background-image: url("./img/illus/effects/effect_neuro_off.svg");
        bottom: 0px;
    }

    &.effect-muscular:before{
        background-image: url("./img/illus/effects/effect_muskulaer.svg");
        bottom: 6px;
    }
    &.effect-muscular-none:before{
        background-image: url("./img/illus/effects/effect_muskulaer_off.svg");
        bottom: 6px;
    }

    &.effect-cardiac:before{
        background-image: url("./img/illus/effects/effect_kardio.svg");
        bottom: -2px;
    }
    &.effect-cardiac-none:before{
        background-image: url("./img/illus/effects/effect_kardio_off.svg");
        bottom: -2px;
    }

    &.effect-renal:before{
        background-image: url("./img/illus/effects/effect_nieren.svg");
        bottom: 0;
    }
    &.effect-renal-none:before{
        background-image: url("./img/illus/effects/effect_nieren_off.svg");
        bottom: 0;
    }
}

@media only screen and (max-width: 736px) {
    #actor_content .content-flow h2.clinical-effect {
        padding-left: 0;
        padding-right: 0;
        width: calc(var(--site-width) - 2 * var(--mobile-gutter) - var(--illustration-inset));
    }
}


/* !--- Main content / Flow element: Tables */
/* Desktop viewports: tables scale to main column width but may grow up to a limit if cell content is long */
@media only screen and (min-width: 736px) {
    /* General tables */
    #actor_content .content-flow .substance-table {
        width: max-content;
        min-width: var(--content-width);
        max-width: var(--content-width-extended);
    }
    
    /* Narrow tables: low complexity */
    #actor_content .content-flow .substance-table.content-table:not(:has(tr td:nth-child(4))) {
        width: 100%;
        max-width: 100%;
    }
    
    /* Narrow tables: dedicated table types */
    #actor_content .content-flow .substance-table.process-table:not(:has(tr td:nth-child(4))), 
    #actor_content .content-flow .substance-table.legend-table, 
    .expression-land #actor_content .content-flow .substance-table.distribution-table {
        width: 100%;
        max-width: 100%;
    }
}

/* Phone viewports: all tables become horizontally scrollable within their wrapper */
@media only screen and (max-width: 736px) {
    /* Horizontally scrolling container for all tables on mobile viewports */
    #actor_content .content-flow .richtext-table {
        width: 100%;
        overflow-x: auto;
        
        /* General tables: may exceed container width reasonably */
        .substance-table {
            width: max-content;
            min-width: 100%;
            max-width: 150dvw;
        }
        
        /* Narrow tables: low complexity */
        .substance-table.content-table:not(:has(tr td:nth-child(3))) {
            width: 100%;
            max-width: 100%;
        }
        
        /* Narrow Flowcharts */
        .substance-table.process-table:not(:has(tr td:nth-child(4))) {
            width: 100%;
            max-width: 100%;
        }
        
        /* Simple table or picture legends */
        .substance-table.legend-table {
            width: 100%;
            max-width: 100%;
        }
        
        /* Distribution tables for land animals: sparsely populated */
        .substance-table.distribution-table:is(.expression-land .substance-table.distribution-table) {
            width: 100%;
            max-width: 100%;
        }
    }
    
    /* Tables without a wrapper shouldn't exist anymore: we restrict them to viewport width */
    #actor_content .content-flow *:not(.richtext-table) .substance-table, 
    #actor_content .content-flow > .substance-table {
        width: auto !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}


/* !--- Main content / Flow element: Images */
#actor_content .content-flow .substance-media, 
#actor_content .content-flow *:not(.substance-media) img {
    max-width: calc(var(--site-width) - var(--sidebar-width) - var(--width-1col));
    
    /* Detailed scaling for marked images */
    &.picture-full {
    }
    
    &.picture-half,
    &.picture-left,
    &.picture-right {
        max-width: calc(0.6 * var(--content-width));
    }
    
    /* Images inside tables cells */
    &.picture-table {
        max-width: var(--width-3col);
    }
    
    &.picture-half:is(td .picture-half) {
        max-width: calc(0.5 * var(--content-width));
    }
}

@media only screen and (max-width: 736px) {
    #actor_content .content-flow .substance-media, 
    #actor_content .content-flow *:not(.substance-media) img {
        max-width: calc(var(--content-width) - 2 * var(--mobile-gutter));
        
        &.picture-full {
            max-width: calc(var(--content-width) - 2 * var(--mobile-gutter));
        }

        &.picture-half,
        &.picture-left,
        &.picture-right {
            max-width: calc(var(--content-width) - 2 * var(--mobile-gutter));
        }
        
        /* Images inside tables cells */
        &.picture-table {
            max-width: var(--width-2col);
        }
        
        &.picture-half:is(td .picture-half) {
            max-width: calc(0.3 * var(--content-width));
        }
    }
}

/* Pseudo image currently used to indicate a legend for an image - TODO: this is a nasty hack */
#actor_content .content-flow img[title="Dark grey box"] {
    content: "";
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    width: 2rem;
    height: 0.5rem;
    vertical-align: top;
    margin-top: 0.32lh;
    margin-right: 0.2rem;
    background: var(--vapa-black);
    pointer-events: none;
    
    &:is(#ensemble_main.expression-land img) {
        background: var(--vapa-land-solid);
    }
    
    &:is(#ensemble_main.expression-water img) {
        background: var(--vapa-water-solid);
    }
    
    &:is(#ensemble_main.expression-hybrid img) {
        background: var(--vapa-hybrid-solid);
    }
    
    &:is(#ensemble_main.expression-general img) {
        background: var(--vapa-general-solid);
    }
}

#actor_content .content-flow *:not(.substance-table) img.picture-table:not([title="Dark grey box"]) {
    display: inline;
    margin-bottom: 0;
    vertical-align: top;
}


/* !--- Main content: bibliography */
/* Alphabetical group headlines (not used anymore) */
#actor_content .content-flow.flow-literature h2 {
    font-weight: 400;
}

#actor_content .content-flow.flow-literature h2 em {
    font-weight: 600;
}

#actor_content .content-flow.flow-literature .literature-list {
    margin-bottom: 4em;
}

/* Single publication entry */
#actor_content .content-flow.flow-literature .literature-list div {
    display: grid;
    grid-template-columns: auto var(--width-1col-plus);
    column-gap: 8px;

    .literature-pubdate {
        font: var(--textset-content-l);
        font-weight: 400;
        text-align: right;
        color: var(--textcolor-dimmed);
        grid-row: 1;
        grid-column: 2;
    }
    
    .literature-authors {
        font: var(--textset-content-l);
        font-weight: 400;
        grid-row: 1;
        grid-column: 1;
        margin-bottom: 8px;
    }

    .literature-title {
        font-weight: 600;
        grid-row: 2;
        grid-column: 1 / 3;
        
        p {
            font-weight: inherit;
            margin-bottom: 0;
        }
        
        em {
            font-style: italic;
            font-weight: inherit;
        }
    }
    
    .literature-link {
        margin-top: 8px;
        grid-row: 3;
        grid-column: 1 / 3;
    }
    
    &:not(:last-child) {
        &:has(.literature-authors:last-child) .literature-title, 
        &:has(.literature-link:last-child) .literature-link {
            padding-bottom: 16px;
            border-bottom: var(--line-light);
            margin-bottom: 16px;
        }
    }
}

@media only screen and (max-width: 736px) {
    /* Alphabetical group headlines (not used anymore) */
    #actor_content .content-flow.flow-literature h2 span {
        display: block;
    }
    
    /* Single publication entry */
    #actor_content .content-flow.flow-literature .literature-list div {
        grid-template-columns: auto var(--width-1col);
    }
}