/*** General layout ***/

html { font-size: 16px; }

body {
    margin: 0;
    font-family: Noto Sans, DejaVu Sans, Helvetica, Calibri, sans-serif;
}

header {
    background: #492A1A;
    text-align: center;
    line-height: 1;
}

header a {
    text-decoration: none;
    font-weight: bold;
}

header a:hover { text-decoration: underline; }

a#site-title > img {
    display: block;
    margin: auto;
    width: 50rem;
    max-width: 100%;
}

nav {
    display: flex;
    justify-content: center;
    padding: 0.625rem;
}

nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: center;
    align-items: baseline;

    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav#main-nav {
    background: #EE3465;
}

nav#main-nav a {
    color: #FFFFFF;
    text-transform: uppercase;
}

nav#user-nav {
    background: #F0F0F0;
    border-bottom: 2px solid #EE3465;
}

nav#user-nav a {
    color: #EE3465;
}

nav#user-nav input {
    /* Let the log out button overlap nav padding */
    margin: -0.625rem 0;
}

main {
    margin: auto;
    padding: 1.5rem 2rem;
    max-width: 80rem;
}

@media (max-width: 50rem) {
    main { padding: 0.75rem 1rem; }
}

main > *:first-child { margin-top: 0;}
main > *:last-child { margin-bottom: 0;}


main a {
    color: #EE3465;
    text-decoration: none;
    font-style: italic;
}

main a:hover { color: #000000; }

h1 {
    font-size: 1.75rem;
    font-weight: bold;
    border-bottom: 3px solid #EE3465;
    margin-bottom: 0.875rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
}

img { vertical-align: middle; }
img.thumbnail { max-width: 64px; max-height: 64px; }

dt { font-weight: bold; }
dd { margin-left: 0; }
dl:not(.compact-dl, .order-design) > dd + * { margin-top: 1rem; }

dl.compact-dl {
    /* dl with dts on the left and dds on the right */
    /* XXX Maybe find a more semantic name for this -- I just slap this on any
       dl whose keys are short enough to fit... */
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    row-gap: 0.5rem;
}

dl.compact-dl dt { grid-column-start: 1; justify-self: right; }
dl.compact-dl dt::after { content: ':\A0'; }  /* non-breaking space necessary */
dl.compact-dl dd { grid-column-start: 2; }

ul#flash-messages {
    border: 2px solid #EE3465;
    background: #FBDEE3;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
}

*.not-applicable {
    font-style: italic;
    color: #808080;
}


/*** Forms ***/

textarea {
    display: block;
    width: 100%;
    height: 4rem;
    box-sizing: border-box;
    padding: 0.25rem;
    font-family: inherit;
    font-size: inherit;
}

textarea.date-list { width: calc(10ch + 1rem); height: 10rem; }

input[type="date"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="submit"],
input[type="text"],
input[type="url"],
button,
select {
    /* Consistency across browsers */
    box-sizing: border-box;
    height: 1.75rem;
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
}

input[type="date"] { width: 9rem; }
input[type="url"] { width: 100%; }
input[type="file"] { max-width: 100%; height: auto; }
input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

@media (width < 30rem) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select {
        width: 0;
        min-width: 100%;
    }
}

fieldset {
    background: #F8F8F8;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #D8D8D8;
}

fieldset > *:first-child { margin-top: 0; }
fieldset > *:last-child { margin-bottom: 0; }
fieldset > h2 { line-height: 1; padding-bottom: 0.25rem; }

label.required::before {
    content: '* ';
    color: #EE3465;
}

p.form-instructions { margin: 0; }
p.form-note { margin: 0; font-style: italic; }

ul.form-error {
    color: #EE3465;
    margin: 0;
    padding-left: 1.5rem;
}

div.form-actions {
    display: flex;
    align-items: stretch;
    background: #F0F0F0;
    border: solid #C0C0C0;
    border-width: 2px 0;
    padding: 0.5rem 1rem;
}

div.form-actions > input + input { margin-left: 0.25rem; }
div.form-actions > *.main-action { font-weight: bold; }

*.implicit-submit {
    /* An invisible button in case submitting with enter hits the wrong one */
    display: none;
}

span.order-complexity:not(.show-complexity) { display: none; }


/*** Datepicker ***/

div.datepicker {
    display: inline-block;
    position: relative;
}

div.datepicker > input { width: calc(8ch + 2rem); }

div.datepicker-box {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 2px solid #D8D8D8;
}

div.datepicker-box.active { display: block; }

span.datepicker-header { font-weight: bold; display: flex; }
button.datepicker-prev { order: 0; }
span.datepicker-month { order: 1; margin: auto; }
button.datepicker-next { order: 2; }

table.datepicker-calendar {
    table-layout: fixed;
    border-collapse: collapse;
    width: 0;
    margin-bottom: 0;
}

table.datepicker-calendar thead { border-bottom: none; }
table.datepicker-calendar tbody { border: 1px solid #EE3465; }
table.datepicker-calendar tr { height: auto; border: none; }

table.datepicker-calendar th {
    width: 2rem;
    border: 1px inset transparent;  /* Needs to take up space */
}

table.datepicker-calendar td {
    height: 2rem;
    border: 1px solid #EE3465;
}

table.datepicker-calendar th, table.datepicker-calendar td {
    padding: 0;
    text-align: center;
}

button.date {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    height: 100%;
    width: 100%;
    font-size: 0.875rem;
}

button.date[disabled] {
    background: #FBDEE3;
    color: inherit;
}

table.datepicker-calendar td.other-month {
    opacity: 0.4;
    border-style: dotted;
}

table.datepicker-calendar td.past,
table.datepicker-calendar td.today {
    border-color: black;
}

td.past > button.date { background: #D8D8D8; }
td.today > button.date { background: #ECECEC; }

button.date.rush-order::after {
    content: '!';
    position: absolute;
    display: inline-block;
    vertical-align: super;
    padding-left: 1px;
    color: #EE3465;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
}

dl.datepicker-legend {
    /* dl with dts on the left and dds on the right */
    /* XXX Should just work this on top of compact-dl at some point */
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 0.25rem;
    align-items: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #EE3465;
}

dl.datepicker-legend dt {
    grid-column-start: 1;
    margin: 0;
}

dl.datepicker-legend dd { grid-column-start: 2; }

dt.datepicker-legend-rush { font-weight: bold; color: #EE3465; }


/*** Order form ***/

dl.order-design {
    display: grid;
    align-items: baseline;
    border-top: 2px solid #EE3465;

    > dt { justify-self: end; }
    > dt::after { content: ':\A0'; }

    > dt.name-area { grid-area: name-l; padding-left: 1rem; }
    > dd.name-area { grid-area: name; padding: 0.5rem 0; }
    > dd.name-area > input { width: 100%; }

    > dd.actions-area {
        grid-area: actions;
        justify-self: end;
        /* Remove button plays badly with baseline, but center happens to sit
           the text perfectly on the intended baseline */
        align-self: center;
    }

    > dd.price-area {
        grid-area: price;
        min-width: 6.5ch;
        padding: 0 1rem;
        z-index: 1;
        text-align: right;
    }

    > dt.price-area, > dt.actions-area { display: none; }
    > dd.price-area { font-weight: bold; }

    > dd.thumbnail-area { place-self: center; }

    &::before {
        /* Grey "subform header" background; stretches behind multiple elements
        */
        content: '';
        grid-area: name-l / name-l / price / price;
        background: #E8E8E8;
        align-self: stretch;
        justify-self: stretch;
    }

    &::after {
        /* Slightly lighter background behind the price; uses another pseudo-
           element b/c it requires `align-self: stretch` whereas the price uses
           `baseline` or `center` to align the actual text */
        content: '';
        grid-area: price;
        background: #F0F0F0;
        align-self: stretch;
        justify-self: stretch;
        border-right: 2px solid #E8E8E8;
        border-bottom: 2px solid #E8E8E8;
        border-left: 2px solid #D8D8D8;
    }
}

@media (width >= 60rem) {
    dl.order-design {
        display: grid;
        grid-template:
            'name-l name  name     .       actions price' auto
            'matl-l matl  extras-l files-l files   thumb' auto
            'size-l size  extras   notes-l notes   thumb' auto
            'qty-l  qty   extras   .       notes   thumb' 1fr
            / auto  11rem 14rem    auto    1fr     auto;
        row-gap: 0.5rem;

        > dd.actions-area { padding-right: 1rem; }
        > dt.material-area { grid-area: matl-l; }
        > dd.material-area { grid-area: matl; }
        > dt.size-area { grid-area: size-l; }
        > dd.size-area { grid-area: size; }
        > dt.quantity-area { grid-area: qty-l; }
        > dd.quantity-area { grid-area: qty; }
        > dt.files-area { grid-area: files-l; }
        > dd.files-area { grid-area: files; }
        > dd.thumbnail-area { grid-area: thumb; }
        > dt.notes-area { grid-area: notes-l; }
        > dd.notes-area { grid-area: notes; height: 100%; }

        select { width: 100%; }
        textarea {
            height: 100%;
            padding-top: 0;
            padding-bottom: 0;
        }

        > dt.extras-area {
            grid-area: extras-l;
            justify-self: start;
        }

        /* Let extras list take up the space between extras-l and extras too */
        > dd.extras-area { grid-area: extras-l / extras-l / extras / extras; }
        > dd.extras-area::before {
            /* Take up one line to bump the list out from behind the label */
            /* Can't use a margin for this b/c of align-items: baseline */
            content: '\A0';
            display: block;
        }

        /* Put a gap between the three visual "columns" (not column-gap b/c
           there are more than three actual grid columns) */
        > dt.extras-area, > dd.extras-area { margin: 0 1.5rem; }

        div#order-form-designs > & {
            grid-template-columns: auto auto auto auto 1fr auto;
            row-gap: 0.875rem;

            dd.files-area { grid-area: files / files / thumb / thumb; }
            dd.notes-area { grid-area: notes / notes / thumb / thumb; }
        }
    }
}

@media (width < 60rem) {
    dl.order-design {
        grid-template:
            "name-l name actions price"
            /* Remaining dts/dds automatically add rows down here */
            / auto  1fr  auto    auto;
        row-gap: 0.5rem;

        > dt { grid-column: 1; }
        > dd { grid-column: 2 / span 3; }

        > dd.price-area,
        > dd.actions-area {
            padding: 0 0.5rem;
            align-self: center;
        }

        /* Place thumb to the right of material/size/qty */
        > dd.thumbnail-area { grid-area: 2 / 4 / span 3 / span 1; }
        > dd.material-area, > dd.size-area, > dd.quantity-area {
            grid-column: 2 / span 2;
        }
    }

    button.remove-row > span { display: none; }
}

@media (width < 30rem) {
    /* Fold design name so the label and field are on separate lines */
    dl.order-design {
        grid-template:
            "name-l name-l actions price"
            "name   name   actions price"
            /* Remaining dts/dds automatically add rows down here */
            / auto  1fr    auto    auto;

        > dd.thumbnail-area { grid-row-start: 3; }
    }

    dl.order-design > dt.name-area {
        justify-self: start;
        padding: 0.25rem 0 0 0.5rem;
        margin-bottom: -0.5rem;  /* Cancel out row gap */
    }

    dl.order-design > dd.name-area { padding: 0 0 0.25rem 0.5rem; }
}

ul.extras {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 1.3125rem;
}

ul.order-item-files {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    list-style-type: none;
    margin: -0.5rem 0;
    padding: 0;
    gap: 0.25rem;
}

ul.order-item-files > li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.25rem;
    padding-right: 0.25rem;
    height: 2rem;
    line-height: 2rem;

    > img { max-width: 2rem; max-height: 2rem; align-self: center; }
    > input[type="file"] { width: 15rem; line-height: 2rem; }
    &:has(input[type="file"]) { padding-right: 0; padding-left: 0.25rem; }

    div#order-form-designs & {
        background: #E8E8E8;
        border: 1px solid #D8D8D8;
    }
}

@media (width >= 60rem) {
    /* Let files take two rows and squish notes down if there are at least three items */
    dd.files-area:has(li + li + li) {
        grid-row: 2 / span 2 !important;
        ~ dt.notes-area, ~ dd.notes-area { grid-row: 4 !important; }

        /* Same as [type=text] */
        ~ dd.notes-area > textarea { height: 1.75rem; }
    }
}

@media (width < 30rem) {
    ul.order-item-files {
        flex-direction: column;
        align-items: stretch;
    }

    ul.order-item-files > li > span {
        flex: 1 1 auto;
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    ul.order-item-files > li > input[type=file] {
        flex: 1 1 auto;
        width: 0;
    }
}

label.remove-file-label {
    align-self: center;
    width: 1rem;
    height: 1rem;
    background-image: url("/static/remove.svg");
    background-size: contain;
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    border-radius: 12.5%;
}

label.remove-file-label:hover {
    background-color: #F8F8F8;
}

label.remove-file-label:active {
    background-color: #E8E8E8;
}

input.existing-file-ticky,
li:has(input.existing-file-ticky:not(:checked)) {
    display: none;
}

button.remove-row {
    display: flex;
    align-items: center;
    font-weight: bold;
}

button.remove-row > img {
    height: 100%;
}

div#order-designs-footer {
    background: #E8E8E8;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    border: solid #C0C0C0;
    border-width: 2px 0;
}

dl#order-designs-subtotals,
dl#order-confirm-totals {
    grid-template-columns: 1fr max-content;
    font-weight: bold;
}

dl#order-designs-subtotals { margin-right: 1rem; }

dl#order-confirm-totals {
    border-top: 2px solid #EE3465;
    row-gap: 0;
    text-align: right;
    background: #E8E8E8;

    > dt {
        /* Mimic design item header */
        justify-self: stretch;
        padding: 0.5rem calc(1rem - 2px);
    }

    > dd {
        background: #F0F0F0;
        border-left: 2px solid #D8D8D8;
        border-right: 2px solid #E8E8E8;
        min-width: 6.5ch;
        padding: 0.5rem calc(1rem - 2px);
    }

    > dd:last-child {
        padding-bottom: calc(0.5rem - 2px);
        border-bottom: 2px solid #E8E8E8;
    }
}

@media (width < 60rem) {
    dl#order-confirm-totals > dt,
    dl#order-confirm-totals > dd { 
        padding: 0.5rem calc(0.5rem - 2px);
    }
}

dl:not(.has-subdivision-options) > *.order-subdivision-select {
    display: none;
}

dl.has-subdivision-options > *.order-subdivision-text {
    display: none;
}

ul.shipping-method-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

ul.shipping-method-list > li { margin-top: 0.75rem; }
ul.shipping-method-list label { display: block; }
li.shipping-method-not-applicable { display: none; }

input.quantity-field { width: 4.5rem; }


dl.order-totals {
    grid-template-columns: max-content max-content;
    justify-items: right;
}

dt.rush-fee-label:not(.has-rush-fee),
dt.rush-fee-label:not(.has-rush-fee) + dd,
dt.shipping-discount-label:not(.has-shipping-discount),
dt.shipping-discount-label:not(.has-shipping-discount) + dd {
    display: none;
}


/*** Confirm order page ***/

p#order-confirm-warning {
    border: 2px solid #EE3465;
    background: #FBDEE3;
    padding: 0.5rem 1rem;
    font-size: 1.375rem;
}

form#order-confirm > div.form-actions > input.action-cancel {
    margin-left: auto;
}


/*** FAQ ***/
dl.faq > dd > p:first-child { margin-top: 0; }


/*** Charm info page ***/
table.pricing { text-align: right; }
table.pricing th { vertical-align: bottom; }


/*** Specialty materials ***/
img.material-lineup {
    display: block;
    margin: auto;
    width: 40rem;
    max-width: 100%;
}

ul.material-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10rem);
    gap: 1rem;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
}

@media (max-width: 34rem) {
    /* Keep three columns minimum, squishing them down if need be.

       XXX 34rem is the exact point where we have to switch over.  It would be
       nice to avoid hard-coding that, if possible... */

    ul.material-list { grid-template-columns: 1fr 1fr 1fr; }
}

ul.material-list > li > figure {
    border: 1px solid #D8D8D8;
    text-align: center;
    margin: 0;
}

ul.material-list > li > figure > img { width: 100%; }

/* XXX would be nice to cover this under something broader */
p.materials-note { font-style: italic; }


/*** Charm scan settings ***/

span.charm-link-static-part { color: #808080; }

dl.charm-links-grouped > dt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #F0F0F0;
    padding: 0.25rem 0.5rem;
}

ul.charm-links-designs {
    display: contents;
    list-style-type: none;
}

ul.charm-links-designs > li {
    display: flex;
    align-items: center;
}

ul.charm-links-designs > li > img.thumbnail {
    max-width: 32px;
    max-height: 32px;
}

dl.charm-links-grouped > dt > a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.25rem 1rem;
    background: #492A1A;
    border-radius: 0.25rem;
    color: white;
    font-style: normal;
}

dl.charm-links-grouped > dt > a:hover { text-decoration: underline; }
dl.charm-links-grouped > dd { padding: 0.25rem 1rem; }

form#charm-scan-set-links label {
    display: flex;
    align-items: center;
}

fieldset#link-options label {
    border: 1px solid #D8D8D8;
    padding: 0.5rem 1rem;
}

fieldset#link-options dl { margin: 0; flex: 1; }
fieldset#link-options li + li { margin-top: 1rem; }

form#charm-scan-set-links ul:not(.form-error) {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

form#charm-scan-set-links input[type=checkbox],
form#charm-scan-set-links input[type=radio] {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}