/* Site-wide styles (moved out of base.html so browsers can cache them). */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-regular.f1f8a8210104.woff2") format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-bold.13a58e05dfd2.woff2") format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-italic.de4c0c22fd4e.woff2") format('woff2');
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-bolditalic.4a631a0a40b7.woff2") format('woff2');
}

:root {
    --ink: #1c1a17;
    --paper: #faf8f4;
    --line: #d8d2c6;
    --input-border: #8a8172;   /* darker than --line: form controls need 3:1 contrast (WCAG 1.4.11), --line doesn't clear it */
    --accent: #6b4226;
    --muted: #736d64;
    --slate: #5c6b73;
    --error: #a4322a;
    --font-body: Georgia, 'Times New Roman', serif;

    --font-size-xl: 1.8rem;     /* site brand */
    --font-size-lg: 1.4rem;     /* section headings */
    --font-size-body: 1.2rem;   /* base body text */
    --font-size-base: 1rem;     /* form inputs, buttons */
    --font-size-label: 1.125rem; /* form labels (25% larger than base 0.9rem) */
    --font-size-sm: 0.85rem;    /* help text, small print */
    --label-color: #4c4740;    /* form label text, darker than --muted */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    font-size: var(--font-size-body);   /* changes font size throughout web page */
}

main a:link, main a:visited {
    color: var(--accent);
}
main a:hover, main a:focus {
    color: var(--ink);
}

/* Faint grayscale watermark of the home page's background photo,
   shown on every page except home (which has its own full hero). */
body:not(.home-page)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/home-background.c7b9cb672293.jpg");
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: 0.15;
    z-index: -1;
}

header {
    border-bottom: 1px solid var(--line);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--slate);
}

header .brand {
    font-size: var(--font-size-xl);
    letter-spacing: 0.04em;
    font-weight: bold;
    text-decoration: none;
    color: var(--paper);
}

nav form.logout-form {
    display: inline;
}

nav a,
nav form.logout-form button {
    margin-left: 1.75rem;
    color: var(--paper);
    text-decoration: none;
    font-size: var(--font-size-lg);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

nav a:hover, nav a:focus,
nav form.logout-form button:hover, nav form.logout-form button:focus {
    color: var(--paper);
    text-decoration: underline;
    font-weight: bold;
    opacity: 1;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.0rem 1.0rem;
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.messages li {
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    background: #fff;
    margin-bottom: 0.5rem;
}

/* Django's default class for form-level and field-level
   validation errors (non_field_errors, and per-field errors). */
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--error);
}

.errorlist li {
    margin-bottom: 0.25rem;
}

/* Applied via JS to a specific input that caused a validation
   error (e.g. a missing/invalid piece duration), so the member can
   see exactly which field to fix. */
.field-error {
    border-color: var(--error) !important;
    outline: 1px solid var(--error);
}

.field-error-text {
    display: block;
    color: var(--error);
    font-size: var(--font-size-sm);
    margin-top: 0.2em;
}

/* Visually hides text while keeping it in the accessibility tree --
   used to give repeated link/button labels ("Watch video", "This is
   mine") distinguishing context for screen readers without changing
   what sighted users see. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lets keyboard/screen-reader users bypass the repeated nav and
   jump straight to page content. Hidden until it receives focus
   (e.g. the first Tab press on any page), then shown at the
   top-left corner above everything else. */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.1s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

form p { margin: 0 0 1rem; }

label { display: block; margin-bottom: 0.25rem; font-size: var(--font-size-label); color: var(--label-color); }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    background: #fff;
    font-family: inherit;
    font-size: var(--font-size-base);
}

/* Select2 (used for autocomplete fields like composer) draws its
   own box and ignores the native input/select styling above,
   which made it a different height than every other dropdown.
   Mirror the same padding/border/font so it lines up site-wide. */
.select2-container--default .select2-selection--single {
    height: auto;
    min-height: calc(1em + 1rem + 2px);
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    padding-right: 1.5rem;
    line-height: 1.5;
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--ink);
    width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}

.select2-container--default .select2-selection--multiple {
    min-height: auto;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    font-size: var(--font-size-base);
    font-family: inherit;
}

/* Select2's default dropdown has a fixed 200px max-height, which at
   this site's larger base font size only fits ~5 rows before
   scrolling. Widen it so roughly 10 rows show at once. */
.select2-results__options {
    max-height: 22rem !important;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin: 0;
}

button:not(.djhj-button), input[type="submit"] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    cursor: pointer;
}

button:not(.djhj-button):hover, input[type="submit"]:hover { opacity: 0.9; }

footer {
    text-align: center;
    color: var(--muted);
    font-size: var(--font-size-sm);
    padding: 2rem 1rem;
}

/* Phone-width header: the logged-in nav (9-11 links at
   --font-size-lg) wrapped into a ~450px-tall sticky block that
   covered most of a phone screen, so below this width it
   collapses behind a Menu button and opens as a vertical list.
   The logged-out nav (2 links) fits as-is and has no toggle. */
.nav-toggle { display: none; }

@media (max-width: 800px) {
    header {
        padding: 0.75rem 1rem;
        align-items: center;
        flex-wrap: wrap;
    }
    header .brand {
        font-size: var(--font-size-lg);
    }
    header .brand-subgroup {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: normal;
        letter-spacing: 0;
    }
    header.has-menu .nav-toggle {
        display: block;
        background: none !important;
        border: 1px solid var(--paper) !important;
        border-radius: 4px;
        color: var(--paper);
        padding: 0.4rem 0.8rem !important;
    }
    header.has-menu nav {
        display: none;
        flex-basis: 100%;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(250, 248, 244, 0.3);
    }
    header.has-menu nav.open {
        display: block;
    }
    header.has-menu nav a,
    header.has-menu nav form.logout-form button {
        display: block;
        margin-left: 0;
        padding: 0.6rem 0;
        font-size: var(--font-size-body);
        line-height: inherit;
        text-align: left;
    }
    header.has-menu nav form.logout-form {
        display: block;
    }
    header:not(.has-menu) nav a {
        margin-left: 1rem;
    }
}