/* Due to a safari issue, relative paths to background images won't work as variables, so we list them here */

.menubar {
    background-image: url("../images/escher_logo2.png");
}

.logo, .toolbar {
    background-image: none;
}

.splash {
    background-image: url("../images/escher_splash.png");
}

app-header {
    background-image: none;
}

body {
    --pb-content-height-dipl: calc(100vh - 325px);
    --pb-content-height-norm: calc(100vh - 450px);
    --pb-logo-image-width: 200px;
    --pb-logo-image-height: 109px;
    --pb-splash-image-size: 200px auto;
    --pb-menubar-background-color: #211f1f;
    --pb-menubar-color: var(--pb-color-inverse);
    --pb-toolbar-background-color: #f0f0f0;
    --pb-toolbar-color: var(--pb-color-primary);
    --pb-lang-input-color: var(--pb-color-primary);
    --pb-lang-label-color: var(--pb-color-primary);
    --pb-base-font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    --pb-base-font-size: 16px;
    --pb-base-font-weight: 400;
    --pb-base-line-height: 1.75;
    --pb-heading-font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    --pb-heading-line-height: 1.75;
    --pb-content-font-family: var(--pb-base-font-family);
    --pb-content-font-size: 16px;
    --pb-letter-font-family: "Libre Baskerville";
    --pb-letter-font-size: 18px;
    --pb-font-size-small: 0.8rem;
    --pb-font-size-smallest: 0.64em;
    --pb-view-height: auto;
    --pb-link-color: #2474C2;
    --pb-color-focus: #FFA500;
    --pb-heading-h1-font-size: 2.441em;
    --pb-heading-h2-font-size: 1.953em;
    --pb-heading-h3-font-size: 1.563em;
    --pb-heading-h4-font-size: 1.25em;
    --pb-heading-h5-font-size: 1em;
    --pb-heading-h6-font-size: 1em;
    --pb-facsimile-border: 2px solid var(--pb-color-focus);
    --pb-timeline-color-highlight: var(--pb-color-focus);
    --pb-timeline-background-color-title: var(--pb-menubar-background-color);
    --pb-timeline-title-font-size: var(--pb-font-size-small);
    --pb-timeline-tooltip-font-size: var(--pb-font-size-small);
}

@media (max-width: 1023px) {
    body {
        --pb-base-font-size: 14px;
        --pb-content-font-size: var(--pb-base-font-size);
        --pb-letter-font-size: var(--pb-base-font-size);
        --pb-heading-h1-font-size: 2.074em;
        --pb-heading-h2-font-size: 1.728em;
        --pb-heading-h3-font-size: 1.44em;
        --pb-heading-h4-font-size: 1.2em;
        --pb-heading-h5-font-size: 1em;
        --pb-heading-h6-font-size: 1em;
    }
}

app-header-layout {
    min-height: 100vh;
}

a:link, a:visited {
    text-decoration: none;
    color: var(--pb-link-color);
}

.menubar a, .menubar paper-menu-button {
    color: var(--pb-menubar-color);
}

.menubar {
    height: 109px;
    display: flex;
}

.menubar {
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: 20px center;
}

.menubar .logo {
    margin: 0 16px 0 0;
}

.menubar .menu {
    display: flex;
    flex: 2;
}

@media (min-width: 769px) {
    .toolbar pb-navigation {
        display: none;
    }
}

footer {
    display: flex;
    justify-content: flex-end;
    font-size: var(--pb-font-size-small);
}

footer .contact {
    margin-right: 1rem;
}

paper-checkbox, paper-card {
    font-family: var(--pb-base-font-family);
}

.breadcrumbs {
    margin: 0;
    /* grid-column: 1; */
}

@media (max-width: 459px) {
    .breadcrumbs {
        display: none;
    }
}

/**** Print icon in toolbar ****/
.toolbar-button__label {
    font-size: 12px;
    margin-left: 20px;
}

@media screen and (min-width: 769px) {
    .toolbar-button__label {
        font-size: 1em;
    }
}

.letter {
    flex: 2;
    position: relative;
    margin: 0 20px;
    display: grid;
    column-gap: 40px;
    grid-template-columns: 1fr minmax(360px, 45vw);
    grid-template-rows: auto auto 1fr;
}

.letter.toggle {
    height: auto;
    margin: auto;
    grid-template-columns: 1fr minmax(auto, 320px) auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    /* max-width: calc(var(--pb-view-max-width) + 360px); */
}

.letter .edition-nav {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: var(--pb-font-size-small);
}

.letter.toggle .edition-nav {
    grid-column: 2 / 4;
}

.letter .corresp-nav {
    grid-column: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-content: space-between;
    background-color: var(--pb-toolbar-background-color);
    font-size: var(--pb-font-size-small);
}

.letter.toggle .corresp-nav {
    grid-column: 2 / 4;
}

.letter .corresp-nav #next {
    grid-column: 3;
    text-align: right;
}

.letter .corresp-nav div {
    grid-column: 2;
    text-align: center;
}

.letter .timeline-nav {
    display: none;
}

.letter.toggle .timeline-nav {
    display: flex;
    grid-column: 2 / 4;
    background-color: var(--pb-toolbar-background-color);
    font-size: var(--pb-font-size-small);
    justify-content: center;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.letter #reference-view1 {
    margin: 0;
}

.transcript {
    --pb-view-max-width: 41.24rem;
    overflow: auto;
    justify-self: center;
    height: var(--pb-content-height-norm);
    padding-bottom: 60px;
}

.letter:not(.toggle) .transcript {
    height: var(--pb-content-height-dipl);
    --pb-view-max-width: auto;
}

.letter .transcript pb-view {
    margin: 0;
}

.noscroll {
    scrollbar-width: none; /* Firefox 64 */
    -ms-overflow-style: none;
}

.noscroll::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

.letter .transcript {
    grid-column: 1;
    --pb-heading-font-family: var(--pb-letter-font-family);
    --pb-content-font-size: var(--pb-letter-font-size);
}

.letter.toggle .transcript {
    grid-column: 3;
    margin: 0;
}

.letter #register {
    grid-column: 2;
    /* grid-row: 3; */
    width: 100%;
    height: var(--pb-content-height-norm);
    overflow: auto;
    padding-bottom: 60px;
}

.letter pb-facsimile {
    grid-column: 2;
    grid-row: 1 / 5;
}

.letter.toggle pb-facsimile {
    display: none;
}

.letter #register {
    display: none;
}

.letter.toggle #register {
    display: block;
}

.article {
    --pb-view-max-width: 41.24rem;
    position: relative;
    margin: 0 20px;
    display: grid;
    column-gap: 40px;
    grid-template-columns: 1fr 41.24rem 1fr;
    height: calc(100vh - 233px);
}

.article pb-view {
    grid-column: 2;
}

.content-body {
    flex: 2;
    --pb-view-max-width: 41.24rem;
    --pb-view-height: 100%;
    position: relative;
    margin: 0 20px;
    display: grid;
    column-gap: 40px;
    grid-template-columns: 1fr minmax(auto, 320px);
}

.content-body.single-col {
    grid-template-columns: auto;
}

.content-body .transcript {
    height: calc(100vh - 270px);
}

.content-body.single-col .transcript {
    max-width: 41.24rem;
    height: auto;
    overflow: initial;
}

.content-body #register {
    overflow: auto;
    height: calc(100vh - 270px);
    overflow: auto;
    padding-bottom: 60px;
}

.content-body #subsections {
    margin-top: 1em;
    margin-bottom: 2em;
}

.content-body #transcription {
    overflow: none;
}

.content-body pb-navigation {
    position: fixed;
    bottom: 45%;
    --paper-fab-background: #35424b;
    color: white;
}

.content-body pb-navigation[direction=backward] {
    left: 20px;
}

.content-body pb-navigation[direction=forward] {
    right: 20px;
}

pb-facsimile {
    --pb-facsimile-height: var(--pb-view-height);
}

@media (max-width: 1023px) {
    pb-facsimile, .letter aside, .letter.toggle aside {
        display: none;
    }
    .letter.toggle {
        grid-template-columns: 1fr minmax(auto, 240px) auto 1fr;
    }
    .letter, .letter.toggle {
        grid-template-columns: 1fr;
        column-gap: 0;
        margin: 0 20px;
    }
    .content-body {
        grid-template-columns: 1fr minmax(auto, 220px);
    }
    #register {
        --pb-content-font-size: var(--pb-font-size-small);
    }
}

@media (max-width: 459px) {
    .content-body {
        grid-template-columns: 1fr;
    }
    .content-body .transcript, .content-body #register {
        height: auto;
    }
    .corresp-nav div {
        display: none;
    }
    .letter, .letter.toggle {
        grid-template-columns: 1fr;
        display: block;
        margin: 0 10px;
    }

    .letter #register {
        height: auto;
    }
    .letter .transcript {
        height: auto;
    }

    .hide-sm {
        display: none;
    }
}

.emph {
    font-style: italic;
    font-weight: 600;
}

.initial {
    display: inline-block;
    margin-right: 1.5em;
}

/* Browsing letters (index.html) */

.document-info h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.document-info .subheading {
    font-size: var(--pb-font-size-small);
}

.document-info .term ~ .term::before {
    content: ", ";
}

.bibentry {
    display: grid;
    grid-template-columns: 3em 1fr;
}

.active, pb-split-list::part(active-item) {
    color: #E36F1E !important;
}

pb-split-list::part(items) {
    margin-top: 1em;
}

.person ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header.categories, header.nav-by-letter {
    margin-bottom: 20px;
}

#toc {
    font-size: var(--pb-font-size-small);
    overflow: auto;
    height: calc(100vh - 270px);
    padding-bottom: 60px;
}

#toc h1, #toc h2, #toc h3, #toc h4 {
    margin-top: .5em;
    margin-bottom: 0;
}

app-drawer a, app-drawer a:link {
    text-decoration: none;
    color: var(--pb-link-color);
}

#select-view1 {
    min-width: 18em;
}

pb-timeline::part(tooltip-link)  {
    color: var(--pb-color-inverse);
}

/* ==========================================================================
   Print styles.
   ========================================================================== */

/* The print preview */
.printPreview {
    padding: 4rem 2rem;
}
.printPreview paper-button {
    font-size: 1em;
    margin-bottom: 1rem;
    padding: 4px 10px 4px 4px;
    background-color: transparent;
    border: 1px solid #e9e7e7;
}
.printPreview paper-button:nth-of-type(2) {
    margin-left: 2rem;
    background-color: #eee;
    border: #e1e1e1;
}

.printPreview .letter-title {
    font-family: --pb-letter-font-family;
}

.printPreview .popover {
    text-decoration-line: underline;
    text-decoration-color: #8F9194;
    text-underline-offset: 3px;
}

.printPreview .pb {
    color: #8F9194;
}

.printPreview .closer {
    text-align: center;
}

.printPreview .signature {
    text-align: right;
}

@media print {
    *,
    *::before,
    *::after { background: transparent !important; color: black !important; text-shadow: none !important; box-shadow: none !important; filter:none !important; -ms-filter: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 1.5cm 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }

    nav,
    footer,
    object,
    aside,
    select,
    .menubar,
    .splash,
    .toolbar,
    .edition-nav,
    .corresp-nav { display: none !important; }
    #reference-view1 { display: block; }
    body {font-size: 11pt;}
    h1 { font-size: 16pt;}
    h2 {font-size: 15pt;}
    h3 {font-size: 14pt;}
    h4 {font-size: 13pt;}
    .letter-title {font-family: --pb-letter-font-family}
    .popover { text-decoration-color: #8F9194; }
    .signature { text-align: right; }
    .closer { text-align: center; }
    .pb { color: #8F9194; }
    .tei-summary, .footnotes {font-size: 11pt;}
    a { word-wrap: break-word; }
    .hidden-print { display: none !important; }
    #info iron-icon,
    .letter #register
     { display: none !important; }
    pb-facsimile { page-break-inside: avoid; }
}