/* Load Global Variables */
@import "/v1/styles/shared_variables.css";
@import "/v1/styles/page_header.css";

/* Set File Variables */
:root {
    --article-left-margin: 1rem;
    --article-right-margin: var(--article-left-margin);
    --half-indent: calc(var(--article-left-margin) / 2);
    --checkbox-size: 0.5rem;
    --definition-counter-font-style: italic;
    --article-interface-font-size: var(--standard-font-size);
    --article-font-size: var(--standard-font-size);
}


/* Clear any browser padding/margin */
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    font-size: var(--article-interface-font-size);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    padding-left: calc(var(--article-interface-font-size) / 2);
    padding-right: calc(var(--article-interface-font-size) / 2);
}

/* Header dialog box styling */

/* dialog {
    display: block;
    position: fixed;
    top: calc(50% + var(--header-height));
    left: 50%;
    margin-right: -45%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 var(--highly-transparent-dark);
    border-radius: 0.5rem;
    background-color: var(--standard-background-color);
    border: none;
    overflow: hidden;
    z-index: 1000;
}

dialog:not(:target):not([open]) {
    display: none;
}

dialog > h1 {
    padding-top: var(--article-interface-font-size);
    padding-left: var(--article-interface-font-size);
    padding-right: var(--article-interface-font-size);
    background-color: var(--primary-color);
}

dialog > p {
    margin-top: var(--article-interface-font-size);
    padding-left: var(--article-interface-font-size);
    padding-right: var(--article-interface-font-size);
}

nav.dialog-controls {
    display: grid;
    grid-template-columns: [download] auto [close] auto;
    margin-top: var(--article-interface-font-size);
    padding-left: var(--article-interface-font-size);
    padding-right: var(--article-interface-font-size);
    padding-bottom: var(--article-interface-font-size);
}

a.close-dialog {
    grid-area: close;
    justify-self: end;
}

a.download-citation {
    grid-area: download;
    justify-self: start;
}

a.close-dialog,
a.download-citation {
    background: var(--secondary-color);
    color: var(--standard-contrast-color);
    border-radius: 3px;
    line-height: calc(var(--standard-font-size) * 1.5);
    min-height: calc(var(--standard-font-size) * 1.5);
    font-size: var(--standard-font-size);
    text-decoration:none;
    min-width: calc(var(--standard-font-size) * 3);
    padding:0 0.5rem;
    box-shadow: 0 3px 6px 0 var(--highly-transparent-dark);
    transition: box-shadow 200ms, transform 200ms;
}

a.close-dialog:focus,
a.download-citation:focus {
    outline:0;
}

a.close-dialog:hover,
a.download-citation:hover {
    box-shadow: 0 6px 12px 0 var(--highly-transparent-dark);
    transform: translate(-1px, -1px);
    transition: box-shadow 50ms, transform 50ms;
}

a.close-dialog:active,
a.download-citation:active {
    box-shadow: 0 3px 6px 0 var(--highly-transparent-dark);
    transform: translate(0px, 0px);
    transition: box-shadow 200ms, transform 200ms;
} */

header.article-header > h1 {
    font-size: var(--h1-font-size);
    text-align: center;
    grid-column: title / link;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-right: calc(var(--small-details-font-size) / 2);
    justify-self: end;
}

dfn.article-lemma-headword {
    font-style: normal;
}

menu.article-links {
    list-style: none;
    display: contents;
}

menu.article-links > li.version-information {
    /* flex-grow: 0; */
    grid-column-start: version;
    grid-column-end: version;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-left: 0.5rem;
}

#concordance-link {
    font-size: var(--small-details-font-size);
    grid-column-start: link;
    grid-column-end: link;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-right: 0.5rem;
    margin-left: calc(var(--small-details-font-size) / 2);
    justify-self: start;
}

menu.article-links > li.article-details {
    font-size: var(--small-details-font-size);
    grid-column-start: publication-details;
    grid-column-end: publication-details;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

menu.article-links > li.article-details > * {
    text-align: end;
}

menu.article-links > li.article-details > *:not(:first-child) {
    margin-left: var(--article-left-margin);
    flex-grow: 0;
}

menu.article-links > li.article-details > *:not(:last-child) {
    margin-right: var(--article-right-margin);
}

/* Entry Section Titles */

:target {
    background-color: var(--highlighting);
}

:target ~ span.definition-content {
    background-color: var(--highlighting);
}

.suppress-highlight:target {
    background-color: initial;
}

.highlighted {
    background-color: var(--highlighting);
    border-bottom: calc(var(--article-font-size) / 8) solid var(--highlighting-underline);
    border-radius: 0rem 0rem calc(var(--article-font-size) / 8) calc(var(--article-font-size) / 6);
}

.highlighted-error {
    background-color: var(--highlighting-error);
    border-bottom: calc(var(--article-font-size) / 8) solid var(--highlighting-error-underline);
    border-radius: 0rem 0rem calc(var(--article-font-size) / 8) calc(var(--article-font-size) / 6);
}

article {
    overflow: auto;
    flex-grow: 6;
    scroll-padding-top: calc(var(--article-font-size) + (var(--article-font-size) / 4));
    margin-left: var(--body-padding);
    margin-right: var(--body-padding);
}

article > section {
    margin-left: var(--article-left-margin);
    margin-right: var(--article-right-margin);
    font-size: var(--article-font-size);
}

section.entry-section > h2 {
    font-size: calc(var(--article-font-size) + (var(--article-font-size) / 4));
    font-weight: bold;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
    color: var(--subdued-text-color);
    background: var(--standard-background-color);

    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 2;
}

section.entry-section > br:first-child {
    display: none;
}


/* Lemma Links */

a.lemma-href-link {
    color: var(--standard-color);
    text-decoration: none;
    cursor: pointer;
}

a.lemma-href-link:link,
a.lemma-href-link:visited,
a.lemma-href-link:hover,
a.lemma-href-link:active {
    text-decoration: none;
}


/* Lemma Forms Formatting */

section.lemma-form {
    margin-left: calc(var(--article-left-margin) * 2);
    text-indent: calc(var(--article-left-margin) * -1);
}

/* TODO: fix parsing issues that create improper h3 tags, then delete this directive */
section.lemma-form h3 {
    font-weight: normal;
}

section.lemma-form > h3:first-child {
    display: inline-block;
    font-size: inherit;
}

section.lemma-sub-form {
    margin-left: calc(var(--article-left-margin) * 3);
    text-indent: calc(var(--article-left-margin) * -1);
}

/* Text Reference Formatting */

cite {
    font-style: normal;
    font-weight: normal;
}

cite.modern-resource-reference > abbr {
    cursor: url(../../assets/book-perspective-svgrepo-com.svg) 16 16, pointer !important;
}

cite a {
    color: var(--standard-color);
    text-decoration: none;
    cursor: pointer;
}

cite a:link,
cite a:visited,
cite a:hover,
cite a:active {
    text-decoration: none;
}

/* Text Reference Block */

span.textual-citation-block a {
    color: var(--standard-color);
    text-decoration: none;
    cursor: pointer;
}

span.textual-citation-block a:link {
    text-decoration: none;
}

span.textual-citation-block a:visited {
    text-decoration: none;
}

span.textual-citation-block a:hover {
    text-decoration: none;
}

span.textual-citation-block a:active {
    text-decoration: none;
}

/* Definition Heading */

dl > dt {
    visibility: hidden;
    height: 0px;
}

dt > dfn.article-definitions-headword {
    visibility: hidden;
    height: 0px;
}

/* Fancy Definition Numbering */

section.definitions h3,
section.definitions h4,
section.definitions h5,
section.definitions h6 {
    font-size: var(--article-font-size);
    font-style: italic;
    font-weight: normal;
    display: inline;
}

section.definitions h3 *,
section.definitions h4 *,
section.definitions h5 *,
section.definitions h6 * {
    font-style: normal;
}

section.definitions ol {
    list-style-type: none;
}

li.sub-1-definition {
    margin-left: var(--half-indent);
}

li.sub-2-definition {
    margin-left: calc(var(--half-indent) * 2);
}

li.sub-3-definition {
    margin-left: calc(var(--half-indent) * 3);
}

li.definition-section-label {
    float: left;
}

/* Definition Content */

p.definition-content {
    margin-left: var(--article-left-margin);
}

/* Definition Collapsing */

li.top-level-definition, li.sub-1-definition, li.sub-2-definition, li.sub-3-definition {
    margin-top: -1rem;
}

    /* First try to hide everything with show-hide-all-definitions unchecked*/
#show-hide-all-definitions ~ ol span.definition-content {
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

    /* Toggle for individual definition content */
input.definition-checkbox + label + h3 + span.definition-content,
input.definition-checkbox + label + h4 + span.definition-content,
input.definition-checkbox + label + h5 + span.definition-content,
input.definition-checkbox + label + h6 + span.definition-content  {
    display: none;
    visibility: hidden;
    font-size: 0rem;
}
    /* Use !important so that showing the definition contents always takes precedence */
input.definition-checkbox:checked + label + h3 + span.definition-content,
input.definition-checkbox:checked + label + h4 + span.definition-content,
input.definition-checkbox:checked + label + h5 + span.definition-content,
input.definition-checkbox:checked + label + h6 + span.definition-content {
    display: initial  !important;
    visibility: visible  !important;
    font-size: var(--article-font-size)  !important;
}

    /* Toggle hiding for sub*/
input.definition-checkbox ~ ol {
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

input.definition-checkbox ~ ol span.definition-content {
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

input.definition-checkbox ~ ol ol {
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

input.definition-checkbox ~ ol ol span.definition-content{
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

input.definition-checkbox:checked ~ ol {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: auto;
}

input.definition-checkbox:checked ~ ol span.definition-content {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: auto;
}

    /* Show everything when #show-hide-all-definitions is clicked (overrides individual settings) */
#show-hide-all-definitions:checked ~ ol {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: initial;
}

#show-hide-all-definitions:checked ~ ol span.definition-content {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: initial;
}

#show-hide-all-definitions:checked ~ ol ol {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: initial;
}

#show-hide-all-definitions:checked ~ ol ol span.definition-content {
    display: initial;
    visibility: visible;
    font-size: var(--article-font-size);
    overflow: initial;
}

    /* Style the show-hide-all-definitions toggle switch */
#show-hide-all-definitions + label {
    position: relative;
    display: inline-block;
    width: calc(var(--checkbox-size) * 2.5);
    height: calc(var(--checkbox-size) * 1.5);
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin-left: 0.5rem;
    vertical-align: sub;
}

#show-hide-all-definitions {
    opacity: 0;
    width: 0;
    height: 0;
}

#show-hide-all-definitions + label span.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(192, 70, 70);
    -webkit-transition: .4s;
    transition: .4s;
}

#show-hide-all-definitions + label span.toggle-slider::before {
    position: absolute;
    content: "";
    height: var(--checkbox-size) ;
    width: var(--checkbox-size) ;
    left: calc(var(--checkbox-size) / 4);
    bottom: calc(var(--checkbox-size) / 4);
    background-color: var(--standard-background-color);
    -webkit-transition: .4s;
    transition: .4s;
}

#show-hide-all-definitions:checked + label span.toggle-slider {
    background-color: #3f9145;
}

#show-hide-all-definitions:focus + label span.toggle-slider {
    box-shadow: 0 0 1px #3f9145;
}

#show-hide-all-definitions:checked + label span.toggle-slider::before {
    -webkit-transform: translateX(var(--checkbox-size));
    -ms-transform: translateX(var(--checkbox-size));
    transform: translateX(var(--checkbox-size));
}

#show-hide-all-definitions + label span.toggle-slider.round {
    border-radius: var(--checkbox-size) ;
}

#show-hide-all-definitions + label span.toggle-slider.round::before {
    border-radius: 50%;
}

#show-hide-all-definitions:checked + label + ol label.definition-label {
    display: none;
    visibility: hidden;
    font-size: 0rem;
    overflow: hidden;
}

label.definition-label {
    width: 1rem;
}

label.definition-label::after {
    content: "▸ ";
}

input.definition-checkbox:checked+label.definition-label::after {
    content: "▾ ";
}

/* Handle Special Sigla */

sub {
    font-size: calc(var(--article-font-size) * 0.75);
}

span.strikethrough-text {
    text-decoration: line-through;
}


/* Handle abbreviations */

abbr[aria-label] {
    border-bottom: none !important;
    cursor: help !important;
    text-decoration: none !important;
}

/* Handle whitespace in span */
span {
    white-space: pre-wrap;
}