@import url(../modules/explorerSVG.css);
@import url(../modules/sectionHead.css);
@import url(../modules/row2.css);
@import url(../modules/fancyDetails.css);
@import url(../modules/shadowList.css);
@import url(../modules/popover.css);


body {
    margin: 0;
}

:target {
    scroll-margin-top: 10px;
}

/***************/
/* INLINE SVGs */
/***************/

.svgWrapper {
    flex: 1 1 60%;
    height: fit-content;
    max-width: fit-content;
    overflow: hidden;

    border: solid var(--border_weight) var(--border_color);
    border-radius: var(--border_rad);
}

svg.hoverMap {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 90vh;
}


/*************/
/* INDEX MAP */
/*************/

#topMap {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem;
    position: relative;
}

#topMap .rowMedia {
    margin-bottom: 0;
}

html[data-layout="V"] #topMap {
    place-self: center;
    flex-direction: column;
    align-items: center;
}

html[data-layout="V"] #topMap .rowMedia.left {
    margin-right: 0;
}



/**************/
/* INDEX TEXT */
/**************/

.index {
    flex: 1 2 20%;
    overflow: hidden;
    min-width: 25ch;
    border: solid var(--border_weight) var(--border_color);
    border-radius: var(--border_rad);
}

.indexHead {
    color: var(--title_color);
    padding: .5rem 1em;
    background-color: var(--title_background);
    border-block: solid var(--border_weight) var(--border_color);
    margin-top: calc(-1*var(--border_weight));
    margin-bottom: calc(-2*var(--border_weight));
    text-align: center;
}

.indexList {
    margin: 0;
    list-style: none;
    padding: calc(2*var(--border_weight)) 0;
}

.indexList li {
    padding: 0;
}

.indexList li a {
    display: block;
}

html[data-layout="V"] .index {
    width: 0;
    min-width: 100%;
}

/* html[data-layout="H"] .index {

} */

/*********/
/* CARDS */
/*********/
.cardBox {
    margin: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border_color) var(--extraContrast);
    overscroll-behavior: auto;

    padding-right: var(--rowPadding);
}

html[data-layout="H"] .cardBox {
    padding-top: var(--rowPadding);
}

html[data-layout="V"] .cardBox {
    min-height: unset;
    height: fit-content;
    display: flex;
    flex-direction: column;
    /* width: 0; */
    width: 100%;
    overflow: visible;
    padding-inline: 0;
}

.card:not(:first-of-type) {
    margin-top: .5rem;
}

.card {
    background: var(--bandedContrast);
    overflow: hidden;
    border-radius: var(--border_rad);
    border: solid var(--border_color) var(--border_weight);
    box-shadow: 2px 2px 8px black;

    transition-property: all;
    transition-duration: calc(var(--durationScalar) * .3s);
    transition-timing-function: ease-in-out;
}

.card>* {
    cursor: default;
    margin: 0;
}

.cardHead {
    color: var(--title_color);
    transition-property: all;
    transition-duration: calc(var(--durationScalar) * .3s);
    transition-timing-function: ease-in-out;
}

.card.hovering .cardHead {
    border-color: var(--classic_btc_blue);
}

.card.hovering {
    border-color: var(--classic_btc_blue);
    box-shadow: 5px 5px 10px black;
}

.card p,
.card ul,
.card ol {
    margin: .5rem 1rem;
}

.keyword {
    white-space: nowrap;
}

.rowText ol {
    list-style: decimal inside;
}

.rowText li~li {
    margin-top: 0.5rem;
}

.rowText li ul {
    list-style: disc inside;
}

.indentNextLine {
    display: block;
    margin-left: 1.5rem;
}

.card .media {
    display: block;
    justify-self: center;
    height: auto;
    width: 0;
    min-width: min(500px, 90%);
    margin: 1rem;

    border-radius: var(--border_rad);
    border: solid var(--border_color) var(--border_weight);
    box-shadow: 4px 4px 8px 4px black;
}