:root {
    --break-point: 900px;
    --border-width: 0;
    --border-width-minor: 0;
    --header-height: 60px;
    --sidebar-width: 280pt;
    --our-bezier: cubic-bezier(.36,-0.01,0,.77);
    --container-height: calc(100dvh - var(--header-height));
    --sidebar-font-size: 1em;
    --sidebar-font-size-small: 0.75em;
    --header-font-size: 1.2em;
    --header-font-size-small: 1.0em;
    --accent-color: #fdc500;
    --accent-color-contrast: black;
    --buttonwrapper-width: 3em;
    --button-size: 1.0em;
    --button-size-small: 2.6em;
    --chapter-range-offset: 150px;

    --primary-color: #8ea7fb;
    --local-primary-color: #FF00FF;
    --test-primary-color: #46e258;
    --test-directory-primary-color: #FF0088;
    --selection-color-background: #E0E7FF;
    --selection-color-foreground: black;
    --note-color-background: #E0E7FF;	
    --content-background: #f2f4f8;
    --doctitle-color-background: var(--primary-color);
    --doctitle-color-foreground: black;
    --header-color-background: var(--primary-color);
    --questions-color-background: var(--note-color-background);
    --navigation-hover-color-background: var(--accent-color);
    --navigation-hover-color-foreground: black;

    --main-padding: 1em;
    --main-foo-padding: 1em;
    --header-hebrew-font: 'David Libre', sans-serif;
    --header-english-font: 'EB Garamond', serif;

    --serif-font: "Times New Roman", serif;
    --sans-font: helvetica, arial, sans-serif;
    --hebrew-font: "Times New Roman", serif;
    --doctitle-font: /* JJF var(--sans-font); */  var(--header-english-font);
    --pasuk-comment-button-size: 1.5em;
    --gear-button-size: 24px;
    --gear-button-size-small: 36px;
}

#header {
    align-items: center;     /* vertically center */
    background: var(--header-color-background);
    border: var(--border-width) solid red;
    box-sizing: border-box;         /* Includes border in calculation */
    /* JJF color: white; */
    color: black;
    display: flex; /* Needed for centering the text horizontally and vertically */
    font-size: 1.5em;
    height: var(--header-height);
    justify-content: center; /* horizontally center */
    position: relative;             /* Needed for centering the button vertically */

    .header-sidebar-spacer {
        transition: width 0.2s ease;
        width: 0;
    }
    .ourheadertitle {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;

        .title-eng {
            font-family: "Times New Roman", serif;
        }
        .title-spacer {
            display: inline-block;
            width: 1em;

        }
        .title-heb {
            font-family: "Times New Roman", serif;
            font-size: 120%;
        }
    }
    .spacer {
        width: 2em;
    }
    .english-header {
        margin-right: /* JJF 1.5em; */ 0.5em;
        font-family: var(--header-english-font);
        font-weight: bold;
        font-size: var(--header-font-size);
    }
    .hebrew-header {
        font-family: var(--header-hebrew-font);
        font-size: calc(/* JJF 1.25 */ 1.1 * var(--header-font-size));
        font-weight: bold;
        margin-left: /* JJF 1.5em; */ 0.5em;
    }
}

#ourpage h1 {
    font-size: 130%;
}
#ourpage h2 {
    font-size: 110%;
}

/* This is where the default transliteration is determined, as well as the "check"
 * in the radio button in index.html.
 */
.trans[data-spell="yem"] {
    display: none;
}
.trans[data-spell="isr"] {
}
.trans[data-spell="ash"] {
    display: none;
}

#container {
    background: var(--primary-color);
    height: var(--container-height);
    position: relative;
    width: 100dvw;
}

#sidebar {
    background-color: var(--primary-color);
    border: var(--border-width) solid orange;
    box-sizing: border-box;
    /* JJF color: white; */
    color: black;
    font-size: var(--sidebar-font-size);
    height: var(--container-height);
    left: 0;
    overflow-y: auto;
    padding-left: 1em;
    padding-right: 1em;    
    padding: 20px;
    position: absolute;
    top: 0;
    width: var(--sidebar-width);
    z-index: 1;

    /* I think this is irrelevant, since it is #eve.open that we look at */
    &.open {
        transform: translateX(0);
    }

    h3 {
        margin-bottom: 1.3em;
        margin-top: 1em;
        text-align: center;
    }

    .parashot-list {
        display: flex;
        flex-direction: column;
        gap: 4px; /* Optional: space between items */
        padding: 0;
        margin: 0;
        list-style-type: none;

        .parasha-item-div {
            padding-bottom: 1px;
            margin-bottom: 1px;
            display: flex;
            justify-content: space-between;
        }

        /* Create the arrow using a Unicode character */
        .parasha-item-div.expandable {
            padding-bottom: 1px;
            margin-bottom: 1px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            position: relative;

            .chapter-range {
                position: absolute;
                left: var(--chapter-range-offset);    /* fixed distance from left edge of .bar */
                transform: translateY(-50%);
                top: 50%;
            }

            .english-parasha-name {
                position: relative;
                padding-left: 20px;
            }

            .english-parasha-name::before {
                color: black;
                font-size: 50%;
                /* content: "\25B6"; */ /* ► right-pointing triangle */
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%); /* vertical centering */
                width: 0;
                height: 0;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 9px solid black; /* visible side → triangle pointing right */
                display: inline-block;
                margin-left: 0.25rem;
                transition: transform 0.15s ease-in-out;
            }

            /* When expanded, rotate arrow down */
            &.caret-down .english-parasha-name::before {
                transform: rotate(90deg);  /* now it points down */
            }

            .hebrew-parasha-name {
            }
        }

        .hebrew-parasha-name {
            direction: rtl;
        }

        .parasha-item-div:hover {
            background-color: var(--navigation-hover-color-background);
            color: var(--navigation-hover-color-foreground);
            cursor: pointer;
        }

        li.name-of-book {
            margin-top: 1em;
        }

        .chapter-item {
            padding-top: 2px;
            padding-bottom: 2px;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .chapter-item:hover {
            background-color: var(--navigation-hover-color-background);
            color: var(--navigation-hover-color-foreground);
            cursor: pointer;
        }

        .chapter-list {
            margin-left: 2em;
        }

        .chapter-item.selected {
            background-color: var(--selection-color-background);
            color: var(--selection-color-foreground);
        }

        .parasha-item-div.selected {
            background-color: var(--selection-color-background);
            color: var(--selection-color-foreground);
        }
    }


}

#main {
    background: var(--content-background);
    border: var(--border-width) solid green;
    box-sizing: border-box;
    height: var(--container-height);
    overflow-y: auto;
    padding: var(--main-padding);
    position: relative;
    width: 100dvw;
}

/*
 * I believe there is a way to make this go away.
 * Note also that it does not extend to the bottom of the window.
 */
#main-foo {
    background: var(--content-background);
    border: var(--border-width-minor) solid red;
    box-sizing: border-box;
    padding: var(--main-foo-padding);
    position: relative;
    transition: transform 0.4s ease;
    width: 100%; /* All of main other than padding */

    .questions {
        background-color: var(--questions-color-background);
        padding: 1em;
        margin-bottom: 1em;
        /* font-family: "Times New Roman", serif; */
        border: 1px solid black;

        .questions h3 {
            font-size: 110%;
            margin-top: 0.5em;
        }

        .questions li {
            margin-bottom: 0.25em;
        }

    }

    .gmnote {
        padding: 1em;
        background: var(--note-color-background);
    }
    .gmnote-title {
        font-weight: bold;
        font-family: helvetica, arial, sans-serif;
    }
    .vspacer {
        height: 1em;
    }
    .pasuk-container {
        display: flex;
        justify-content: flex-start; /* aligns items left */
        flex-direction: row-reverse;
        width: 100%;
    }
    .pasuk-vnum {
        flex: 0 0 7%;
        vertical-align: top;
        font-family: helvetica, arial, sans-serif;
        font-weight: bold;
        text-align: right;
    }

    .pasuk-hebrew {
        flex: 0 0 45%;
        font-family: var(--hebrew-font);
        font-size: 120%;
        direction: rtl;
        text-align: right;
    }

    .pasuk-english {
        margin-right: auto;
        direction: ltr;
        text-align: left;
        font-family: helvetica, arial, sans-serif;
    }

    .doctitle-container {
        display: flex;
        justify-content: center;
        align-items: center;

        .doctitle {
            /* border: 1px solid black; */
            background-color: var(--doctitle-color-background);
            border-radius: 5pt;
            box-shadow: 0 4px 16px rgba(0,0,0,0.50);
            color: var(--doctitle-color-foreground);
            font-family: var(--doctitle-font);
            font-size: /* JJF 130%; */ 160%;
            font-weight: bold;
            margin: 1em 0;
            padding-bottom: 0.25em;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 0.25em;
            text-align: center;
        }
    }

    .intro-explanation {
        th {
            text-align: left;
            padding-left: 1em;
            padding-right: 1em;
        }
        td {
            padding-left: 1em;
            padding-right: 1em;
        }
    }

    .all-errors {
        color: red;
        font-family: helvetica, arial, sans-serif;
    }
    .an-error {
        margin-bottom: 1em;
    }

    .footnote {
        direction: ltr;
        margin-bottom: 0.5em;
        display: flex;
    }

    .footnote-popup-div {
        background: #fff;
        border: 4px solid white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        color: black;
        display: none; /* Hidden by default */
        left: 0;
        top: 0;
        padding: 8px;
        position: fixed;
        width: min(50dvw, 400px);
        z-index: 1000; /* Ensure it appears above other elements */
    }

    .footnoted-text {
        color: #3939f9
    }


    .footnote-title {
        font-weight: bold;
        font-family: helvetica, arial, sans-serif;
    }

    .fn-counter-text {
        font-size: 80%;
        text-align: right;
        flex: 0 0 4em;
        margin-right: 0.4em;
    }


    .intro-section { /* Not sure if this is used */
        font-weight: bold;
    }

    .intro-table-letters {
        margin-left: 5em;
        th {
            text-align: left;
        }
        td {
            vertical-align: top;
        }
        td:first-child {
            text-align: right;
            padding-right: 1em;
        }
        td:nth-child(2) {
            min-width: 6em;
            padding-right: 1em;
        }
    }

    .intro-table-niqud {
        margin-left: 5em;
        td {
            vertical-align: top;
        }
        td:first-child {
            text-align: right;
            padding-right: 1em;
        }
    }
}


#buttonlayer {
    width: 100dvw;
    height: var(--header-height);
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1001;

    .push-right {
        margin-left: auto;
    }

    .button-wrapper {
        align-items: center;
        display: flex;
        height: var(--header-height);
        justify-content: center;
        width: var(--buttonwrapper-width);
    }

    .ui-button {
        align-items: center;
        border-radius: 50%;
        border: none;
        color: blue;
        display: flex;
        font-size: 120%;
        font-weight: bold;
        height: var(--button-size);
        justify-content: center;
        width: var(--button-size);
        z-index: 1001;
    }

}

html, body {
    background: var(--content-background);
    font-family: Arial, sans-serif;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#debugmarker {
    position: absolute;
    left: calc(6px + (-1 * (var(--main-padding) + var(--main-foo-padding))));
    top: calc(6px + (-1 * (var(--main-padding) + var(--main-foo-padding))));
    text-align: center;
    font-size: 7pt;
    font-family: sans-serif;
    /*
    opacity: 0;
    will-change: opacity;
    transform: translateZ(0);
    pointer-events: none;
    */
}

.centered {
    text-align: center;
}

.hidden {
  display: none;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.no-select {
    -webkit-user-select: none; /* blocks text highlighting. */
    -webkit-touch-callout: none; /* prevents the “Copy / Share / Search” bubble on long-press. */
    user-select: none;
}

.custom-tooltip {
  background: white;
  /* border: 2px solid #8ca4f5; */
  border: 2px solid white;
  border-radius: 12px;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);
  color: blue;
  font-size: 14px;
  margin: 20px 20px;
  padding: 8px 12px;
  pointer-events: none; /* Prevent tooltip from interfering with mouse events */
  position: absolute;
  max-width: 18em;
  z-index: 1000;
}

#commentDialog {
    font-size: 14pt;
    max-width: 50%;
    position: relative;
    padding: 0;
    border-radius: 16px;
    border: 1px solid #E0E7FF;
    box-shadow: 0 0 3px 3px #E0E7FF;
    /* box-shadow: 0 0 10px 3px #888, 0 0 20px 5px #ccc; */
    /* box-shadow: 0 0 20px 6px rgba(0,0,0,0.25); */
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */

    #insides {
        margin: 1em;
    }

    .comment-header {
        font-size: 120%;
        font-weight: bold;
        margin-bottom: 0.5em;
        margin-top: 1em;
        padding: 0 3em;
        text-align: center;
    }

    .add-comment-section {
        background: var(--content-background);
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        justify-content: center; /* horizontally center */
        margin-top: 0.5em;
        padding: 0.5em 1em;
        position: relative;
    }

    .add-comment-header {
        font-weight: bold;
        margin-bottom: 0.2em;
        text-align: center;
    }

    .add-comment-textarea-label {
        font-size: 80%;
    }
    
    .add-comment-field {
        margin-top: 0.25em;
    }
    
    .add-comment-label {
        font-size: 80%;
        width: 6em;
    }

    .show-add-comment-status {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 1em;
        left: 0;
        top: 4em;
        position: absolute;
        width: 100%
    }

    .show-add-comment-success {
        color: blue;
        display: none;
        font-size: 120%;
        font-style: italic;
        font-weight: bold;
    }
    .show-add-comment-failure {
        color: red;
        display: none;
        font-size: 120%;
        font-weight: bold;
    }
    .show-add-comment-success.showit {
        display: block;
    }
    .show-add-comment-failure.showit {
        display: block;
    }

    #commenter-comment {
        width: 100%;
    }

    .add-comment-button-row {
        display: flex;
        justify-content: space-evenly;
    }

    .add-comment-button {
        background: var(--content-background);
        border-radius: 0.7em;
        border: 1px solid black;
        color: black;
        font-size: 90%;
        font-weight: bold;
        height: 1.8em;
        margin-top: 1em;
        padding: 0.1em 1em;
    }

    .add-comment-button:hover {
        border: none;
        color: white;
        background: black;
    }

    #AddCommentCancelButton {
    }

    #AddCommentButton {
    }

    .comment-display {
        padding: 0.5em;
        margin-bottom: 2em;
        border: 1px solid gray;
    }
    .comment-display-field {
        display: inline-block;
        font-size: 80%;
        font-weight: bold;
        width: 4em;
    }
    .comment-display-email {
        font-size: 90%;
    }
    .comment-display-name {
        font-size: 90%;
    }
    .comment-display-date {
        font-size: 90%;
    }
    .comment-display-comment {
        margin-top: 0.5em;
    }

    .comments-no-comments {
        text-align: center;
        color: blue;
    }

    #x-place {
        position: absolute;
        top: 2px;
        left: calc(100% - (12px + 1em));
    }

    .x-button {
        border: none;
        background: none;
        font-family: roboto, sans-serif;
        font-size: 16pt;
        font-weight: normal;
    }
    .x-button:hover {
        background: var(--accent-color);
    }
}

.results-table  {
    border-collapse: collapse;
    border: 1px solid blue;
}
.results-table td, .results-table th {
    border: 1px solid blue;
}

.material-icons {
    /* color: var(--primary-color); */
    color: #444;
}

.material-icons.down {
    vertical-align: -0.25em;
}

.pasuk-comment-button-container {
    margin-right: 1em;
    position: relative;
    top: -0.4em;
}
.pasuk-comment-button-container .comment-button {
    background: transparent;
    border: none;
    border-radius: 50%;
    height: var(--pasuk-comment-button-size);
    width: var(--pasuk-comment-button-size);
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.intro-comment-button-container .comment-button {
    background: transparent;
    border: none;
    border-radius: 50%;
    height: var(--pasuk-comment-button-size);
    width: var(--pasuk-comment-button-size);
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.dotted {
    --factor: 1.6;
    position: relative;
    display: inline-block;
    .dot {
        position: absolute;
        top: 1.0em;
        font-size: 0.7em;
        font-weight: normal;
        color: currentColor;
        pointer-events: none;
        user-select: none;
    }
    .dot.h { left: calc(var(--factor) * 0.14em); }
    .dot.a { left: calc(var(--factor) * 0.13em); }
    .dot.e { left: calc(var(--factor) * 0.13em); }
    .dot.i { left: calc(var(--factor) * -0.02em); }
    .dot.o { left: calc(var(--factor) * 0.13em); }
    .dot.u { left: calc(var(--factor) * 0.14em); }
    .dot.H { left: calc(var(--factor) * 0.23em); }
    .dot.A { left: calc(var(--factor) * 0.19em); }
    .dot.E { left: calc(var(--factor) * 0.20em); }
    .dot.I { left: calc(var(--factor) * 0.01em); }
    .dot.O { left: calc(var(--factor) * 0.25em); }
    .dot.U { left: calc(var(--factor) * 0.22em); }
}

#InfoDialog {

    &.dialog {
        font-size: 14pt;
        position: fixed;
        background: white;
        /* border: 2px solid #333; */
        box-shadow: 0 0 5px 2px #888, 0 0 10px 2px #ccc;
        /* box-shadow: 0 0 3px 3px #E0E7FF; */
        /*
        box-shadow:
            0 2px 8px rgba(0,0,0,0.12),
            0 1.5px 3px rgba(0,0,0,0.10),
            0 0 0 1px rgba(0,0,0,0.05);
       */
        /*
        box-shadow:
            0 1px 3px rgba(0,0,0,0.12),
            0 4px 16px rgba(0,0,0,0.08);
       */
        /*
        box-shadow:
            0 1.5px 6px 0 rgba(60, 60, 60, 0.15),
            0 1.5px 6px 1.5px rgba(60, 60, 60, 0.07);
            */
        display: none;           /* Hidden by default */
        flex-direction: column;
        touch-action: none; 
        z-index: 9999;
    }

    &.dialog.open {
        display: flex;           /* Show when open class is added */
    }

    .dialog-header {
        background: #f0f0f0;
        font-size: 9pt;
        font-weight: bold;
        text-align: center;
        cursor: move;
        user-select: none;
        flex-shrink: 0;
        padding: 0.75em;
        touch-action: none;
    }

    .dialog-content {
        margin: 0.5em;
        padding: 4px 10px;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .resize-handle {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;   /* Larger for mobile */
        height: 30px;  /* Larger for mobile */
        cursor: nwse-resize;
    }

    .resize-handle::after {
        content: '';
        position: absolute;
        bottom: 4px;
        right: 4px;
        width: 12px;
        height: 12px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
    }

    .dialog-intro {
        color: blue;
        font-size: 150%;
        font-weight: bold;
        text-align: center;
        margin-top: 4pt;
        margin-bottom: 16pt;
    }
    .dialog-copyright {
        font-size: 100%;
        text-align: center;
        margin-bottom: 0.4em;
        margin-top: 0.4em;
    }
    .dialog-construction {
        color: red;
        text-align: center;
        font-weight: bold;
        font-size: 100%;
        margin: 8pt;
    }

    .dialog-version {
        font-size: 80%;
        text-align: center;
        margin-bottom: 0.4em;
        margin-top: 0.4em;
    }

    .dialog-groundrules {
        margin-top: 1em;
    }
    .dialog-groundrule-header {
        font-weight: bold;
        font-size: 110%;
        text-align: center;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
    }


    .bugs-to {
        text-align: center;
        font-size: 80%;
    }

    .dialog-color {
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .dialog-color-chooser {
        font-size: 80%;
        text-align: center;
    }
    .dialog-centered-div {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 15px;
        display: flex;
        gap: 48px;
    }

    .picker-default-button {
        font-size: 70%;
    }

    .picker-default-button:hover {
    }

    .picker-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .picker {
    }

    .picker-box label {
        margin-bottom: 8px;
    }

    .picker-box button {
        margin-top: 8px;
    }

    .dialog-button-row {
        display: flex;
        justify-content: center;
        margin-top: 2em;
        margin-bottom: 0.5em;
        gap: 30px;
    }

    #Settings {
        width: fit-content;
        border: 1px solid black;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        padding: 10pt;
    }

    .settings-header {
        text-align: center;
        font-weight: bold;
        font-size: 110%;
    }

    .dialog-info-buttons {
        display: flex;
        flex-direction: column;
    }

    #x-place {
        position: absolute;
        top: 2px;
        left: calc(100% - (12px + 1em));
    }

    .x-button {
        border: none;
        background: none;
        font-family: roboto, sans-serif;
        font-size: 16pt;
        font-weight: normal;
    }
    .x-button:hover {
        background: var(--accent-color);
    }

    .transliteration-section {
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .transliteration-header {
        text-align: center;
        font-weight: bold;
        font-size: 100%;
        margin-bottom: 0.5em;
    }

    .transliteration-radio {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    #advanced, #closer {
        display: flex;
        justify-content: center;
        margin: 24pt 0;
        align-items: center;
    }

    #site-dims {
        font-size: 80%;
    }

    /* Visual feedback for touch resize on mobile (no cursor on touch devices) */
    &dialog.resizing {
        /* Add a colored border or shadow during resize */
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    }

    /* Optional: show which edge is being resized with colored highlight */
    &.dialog.resizing[data-resize-edge*="top"] {
        box-shadow: 0 -3px 0 0 rgba(0, 123, 255, 0.8), 0 0 5px 2px #888;
    }

    &.dialog.resizing[data-resize-edge*="bottom"] {
        box-shadow: 0 3px 0 0 rgba(0, 123, 255, 0.8), 0 0 5px 2px #888;
    }

    &.dialog.resizing[data-resize-edge*="left"] {
        box-shadow: -3px 0 0 0 rgba(0, 123, 255, 0.8), 0 0 5px 2px #888;
    }

    &.dialog.resizing[data-resize-edge*="right"] {
        box-shadow: 3px 0 0 0 rgba(0, 123, 255, 0.8), 0 0 5px 2px #888;
    }
}

.Torah-Intro,
.Hebrew-Pronunciation,
.Genesis-Intro,
.Exodus-Intro,
.Leviticus-Intro,
.Numbers-Intro,
.Deuteronomy-Intro {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* 
 *------------------------
 * On the large screen,
 *------------------------
 * 1. #sidebar shows
 * 2. #main has width 100% - sidebar-width.

 * When the button is pushed:
 * 1. #sidebar is translated left off the screen
 * 2. #main fills the whole width
 * -------
 * The #sidebar.hide property is set and unset by JavaScript
 *
 *------------------------
 * On the small screen,
 *------------------------
 * 1. #sidebar is by default translated by its width, off the screen.
 * 2. #main occupies the entire width,

 * When the button is pushed:
 * 1. #sidebar is translated to 0.
 * 2. #main-foo is translated left
 * -------
 * The #sidebar.open and #main-foo.shifted properties are set by JavaScript.
 */

/** BIG */
@media (min-width: 900px) {
    :root {
        --is-big: true;
        --sidebar-show-initially: true;
    }

    * {
        /* box-sizing: border-box; */
    }

    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s var(--our-bezier);
    }

    #InfoDialog {
        height: 80%;
        max-height: 90dvh;
        width: min(50%, 800px);

      .dialog-centered-div {
          flex-direction: row;
          align-items: flex-start;
      }
    }


    #main {
        left: 0;
        position: absolute;
        transition: left 0.2s var(--our-bezier), width 0.2s var(--our-bezier);

    }

    #main-foo {
        .gmbody {
            column-count: 2; /* splits content into 2 columns */
            column-gap: 40px; /* optional: space between columns */
            overflow: visible;
            padding: 20px 20px;
            margin: auto;
            text-align: justify;
            text-justify: inter-word;
        }
    }

    #eve.open {
        #sidebar {
            transform: translateX(0);
        }
        /* When sidebar hidden, #main moves to left and gets the whole width */
        #main {
            left: var(--sidebar-width);
            width: calc(100dvw - var(--sidebar-width));
        }
        .header-sidebar-spacer {
            width: var(--sidebar-width);
        }
    }

    .hamburger {
        color: black;
        font-size: 80%;
        left: 0px;
        position: relative;
        top: -1.5px;
    }

    .gear-button {
        /*
        width: var(--gear-button-size);
        height: var(--gear-button-size);
        */
        width: 140%;
        height: 140%;
    }

    #buttonlayer {

        /*
         * Unfortunately 
         * @media (hover: hover)
         * does not seem to work. On my telephone it is on.
         * Instead we turn off hovering for any screen with width smaller than some width, and
         * we determine tooltip behavior in JavaScript via the "touch*" events.
         */
        .ui-button:hover {
            color: var(--accent-color-contrast);
            background: var(--accent-color);
            /* Show when hovering */
            .tooltiptext {
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
            }
        }
    }
    
}

#tribe-comparison-counts {
    margin-bottom: 1em;
    margin-top: 1em;
    th {
        padding-left: 2em;
    }
    td {
        text-align: right;
    }
}


/** SMALL */
@media (max-width: 900px) {
    :root {
        --is-big: false;
        --sidebar-show-initially: false;
    }

    #eve.open {
        #sidebar {
            transform: translateX(0);        
        }
        /* When #main-foo shifted, move the sidebar */
        #main-foo {
            transform: translateX(var(--sidebar-width));
        }
    }

    #InfoDialog {

        height: 80%;
        width: min(75%, 600px);

        .transliteration-radio {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }

        .dialog-centered-div {
            flex-direction: column;
            align-items: center;
        }

        .dialog-header {
            padding: 20px 16px;   /* Taller for easier dragging */
        }
    
        .resize-handle {
            width: 40px;
            height: 40px;
        }

    }

    #main-foo #ourpage .pasuk-container {
        flex-direction: column;
        gap: 8pt;
    }

    #sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        transition: transform 0.4s ease;
    }


    #main {
        transition: transform 0.4s ease;
    }

    #buttonlayer {

        .ui-button {
            font-size: 100%;
            height: var(--button-size-small);
            width: var(--button-size-small);
        }
        .hamburger {
            top: -0.5px;
        }


    }

    .hamburger {
        font-size: 180%;
        left: 0px;
        position: relative;
        top: -1.5px;
    }

    .gear-button {
        width: 120%;
        height: 120%;
        /*
        width: var(--gear-button-size-small);
        height: var(--gear-button-size-small);
        */
    }

    #header {
        font-size: var(--header-font-size-small);
        .header-sidebar-spacer {
            width: var(--buttonwrapper-width);
        }
        .english-header {
            font-size: var(--header-font-size-small);
        }
        .hebrew-header {
            font-size: calc(1.25 * var(--header-font-size-small));
        }
    }
}