/* The frame every page shares: the two rows under the header
   (mercy/templates/admin/base_site.html), and the front page's buttons
   (index.html beside it). The colours are Django's own variables, so its
   dark theme carries through. */

/* Django underlines every link outside its own header and tools, by a rule
   that names an id, a class and two elements. A rule has to outweigh that
   to leave these plain, as tabs and buttons are. */
#container nav.sections li a,
#container nav.screens li a,
#container .section-buttons li a.section-button {
    text-decoration: none;
}

nav.sections ul,
nav.screens ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

nav.sections li,
nav.screens li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The sections sit in the band where Django's trail of links was, in its
   colours. A name's own padding is 14 pixels, so 26 at the side puts the
   first name over the page's left edge at 40. */
nav.sections {
    background: var(--breadcrumbs-bg);
    padding: 5px 26px 0;
}

nav.sections a,
nav.sections .waiting {
    display: block;
    padding: 7px 14px;
    border-radius: 4px 4px 0 0;
    font-size: 0.9375rem;
    color: var(--breadcrumbs-link-fg);
}

#container nav.sections li a:hover,
#container nav.sections li a:focus {
    color: var(--breadcrumbs-fg);
    text-decoration: underline;
}

/* The section the page is in is a tab joined to the page below it. */
nav.sections a.current {
    background: var(--body-bg);
    color: var(--body-fg);
    font-weight: 600;
}

#container nav.sections li a.current:hover,
#container nav.sections li a.current:focus {
    color: var(--body-fg);
    text-decoration: none;
}

/* A section this version does not have yet: there to be seen, not clicked. */
nav.sections .waiting {
    color: var(--breadcrumbs-fg);
    opacity: 0.55;
    cursor: default;
}

/* The screens of the section, on the page's own colour. */
nav.screens {
    background: var(--body-bg);
    padding: 0 26px;
    border-bottom: 1px solid var(--hairline-color);
}

nav.screens a {
    display: block;
    padding: 7px 14px 4px;
    border-bottom: 3px solid transparent;
    color: var(--body-quiet-color);
}

nav.screens a:hover,
nav.screens a:focus {
    color: var(--body-fg);
}

nav.screens a.current {
    border-bottom-color: var(--header-bg);
    color: var(--body-fg);
    font-weight: 600;
}

/* Django narrows the page's own margin to 20 pixels at this width. */
@media (max-width: 1024px) {
    nav.sections {
        padding: 5px 6px 0;
    }

    nav.screens {
        padding: 0 6px;
    }
}

/* The front page: a large button for each section. Five fit side by side
   at 1366 pixels. */
.section-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 20px 0 0;
    padding: 0;
}

.section-buttons li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 100%;
    min-height: 130px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--darkened-bg);
}

a.section-button:hover,
a.section-button:focus {
    border-color: var(--header-bg);
    background: var(--selected-bg);
}

.section-button .name {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--body-fg);
}

/* The screens inside the section, or why the button cannot be pressed. */
.section-button .holds {
    font-size: 0.8125rem;
    color: var(--body-quiet-color);
}

/* A section this version does not have yet. */
.section-button.waiting {
    border-style: dashed;
    opacity: 0.55;
    cursor: default;
}

/* The band across the top of every page of a practice copy. Its colours
   are its own, the same in the light and the dark theme, so that it never
   looks like part of the page. */
.practice-band {
    background: #f4c430;
    color: #1d1d1d;
    font-weight: 600;
    padding: 8px 16px;
    text-align: center;
}

/* The version at the foot of a page on a server: there to be found, not
   read. */
#footer .release {
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    margin: 0;
    padding: 8px 40px;
}