/* FONTFACE
====================================================== */

@font-face {
    font-family: "Cormorant Garamond Variable";
    src: url("./fonts/CormorantGaramond-Variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 150%;
    font-display: swap;
}

@font-face {
    font-family: "Gill Sans";
    src: url("./fonts/GillSans.woff2") format("woff2"),
         url("./fonts/GillSans.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gill Sans";
    src: url("./fonts/GillSans-Medium.woff2") format("woff2"),
         url("./fonts/GillSans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gill Sans";
    src: url("./fonts/GillSans-Light.woff2") format("woff2"),
         url("./fonts/GillSans-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* VARIABLES
====================================================== */

:root { 
    --c-black: hsl(0 0% 10%);
    --c-grey-default: hsl(0 4% 46%);
    --c-grey-light: hsl(0 4% 62%);
    --c-grey-faint: hsl(0 4% 74%);
    --c-red: hsl(357 53% 60%);

    --c-bg-primary: hsl(37 40% 94%);
    --c-bg-secondary: hsl(35 32% 86%);

    --c-text-default: var(--c-black);
    --c-text-muted: var(--c-grey-default);
}

/* NORMALISE
====================================================== */

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

input, button {
    font: inherit;
}

button {
    cursor: pointer;
}

hr {
    border: none;
}

/* BASE
====================================================== */

h1, h2, h3, h4 {
    font-family: "Cormorant Garamond Variable", serif;
}

body {
    height: 100vh;
    font-family: "Gill Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    background-color: var(--c-bg-primary);
    color: var(--c-black);
}

.container {
    height: 100%;
    display: grid;
    grid-template: auto 1fr / 2fr 4fr;
    grid-template-areas: 
    "stats header"
    "form library";
}

/* HEADER
====================================================== */

header {
    grid-area: header;
    position: sticky;
    top: 0;
    background-color: var(--c-bg-primary);
}

.header-text {
    max-width: 900px;
    display: grid;
    grid-template: auto auto / 1fr 1fr;
    grid-template-areas: 
    "title title"
    "subtitle filters";
    margin: 120px 36px 0px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--c-grey-faint);
}

header h1 {
    grid-area: title;
    position: relative;
    top: -12px;
    font-size: 3rem;
    line-height: 1.2;
}

header p {
    grid-area: subtitle;
    margin-top: -5px;
    font-size: 1.25rem;
    color: var(--c-text-muted);
}

header hr {
    max-width: 900px;
    margin: 0px 36px;
    border-top: 1px solid var(--c-grey-faint);
}

header .filters {
    grid-area: filters;
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 10px;
}

.filter-btn {
    background-color: transparent;
    border: none;
    color: var(--c-grey-default);
    font-size: 0.9125rem;
    transition: all 0.15s ease-in-out;
}

.filter-btn:hover {
    color: var(--c-black);
}

.filter-btn.active {
    color: var(--c-black);
    text-decoration: underline;
}

/* MAIN
====================================================== */

.library {
    grid-area: library;
    display: grid;
    grid-auto-rows: min-content;
    padding: 36px 36px 100px;
}

.card {
    max-width: 900px;
    min-width: 600px;
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 0.3fr 0.52fr 0.1fr 0.10fr;
    align-items: center;
    gap: 20px;
    padding: 20px 0px;
    border-bottom: 1px solid var(--c-grey-faint);
}

.card h3 {
    font-size: 1.25rem;
}

.card p {
    margin-top: 3px;
    color: var(--c-text-muted);
}

.card > p + p {
    min-width: 40px;
}

/* dropdown menu select read status */

select,
::picker(select) {
    appearance: base-select;  /* not supported by firefox and safari */
}

.select-read-status {
    min-width: 122px;
    padding: 4px 8px;
    font-family: "Gill Sans";
    font-size: 0.8125rem;
    text-transform: uppercase;
    border: 1px solid var(--c-grey-faint);
    border-radius: 0;
    background-color: var(--c-bg-primary);
    color: var(--c-text-muted);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.select-read-status:hover {
    border: 1px solid var(--c-black);
    color: var(--c-text-default);
    background-color: transparent;
}

.select-read-status::picker-icon {
    content: "⌵";
    margin-top: -2px;
    color: var(--c-grey-default);
    transition: rotate 0.4s;
}

.select-read-status:open::picker-icon {
    rotate: 180deg;
}

.select-read-status:open {
    border: 1px solid var(--c-black);
    color: var(--c-text-default);
}

.select-read-status option {
    padding: 2px 4px 2px 8px;
    background-color: var(--c-bg-primary);
    transition: all 0.15s ease-in-out;
}

.select-read-status option:hover {
    background-color: var(--c-bg-secondary);
}

.select-read-status option::checkmark {
    order: 1;
    margin-left: auto;
    content:"◀";
}

/* buttons: open modal edit book and delete confirmation */

.modal-btn {
    min-width: 20px;
    display: flex;
    justify-content: end;
    background: none;
    border: none;
}

.card-icon {
    width: 20px;
    height: 20px;
    stroke: var(--c-grey-default);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: all 0.15s ease-in-out;
}

.card-icon:hover {
    stroke: var(--c-black);
}

/* ASIDE
====================================================== */

aside {
    display: contents;
}

/* STATISTICS BOOKS */

.stats-section {
    position: sticky;
    top: 0;
    grid-area: stats;
    display: flex;
    justify-content: end;
    padding: 120px 36px 0px;
    background-color: var(--c-bg-secondary);
}

.stats-wrapper {
    display: flex;
    flex-direction: column;
    flex-basis: 320px;
    min-width: 260px;
    border-bottom: 1px solid var(--c-bg-primary);
}

li {
    text-transform: uppercase;
    text-align: end;
    font-size: 0.8125rem;
}

li h4 {
    display: inline;
    position: relative;
    top: -1px;
    margin-right: 6px;
    font-size: 1.125rem;
    line-height: 1;
}

li p {
    display: inline;
    color: var(--c-text-muted);
}

/* ADD BOOK + EDIT BOOK(MODAL) FORM */

form {
    grid-area: form;
    display: flex;
    justify-content: end;
    padding: 36px 36px 0px;
    background-color: var(--c-bg-secondary);
}

.form-wrapper {
    position: sticky;
    top: 274px;
    align-self: start;
    display: flex;
    flex-direction: column;
    flex-basis: 320px;
    min-width: 260px;
}

.form-wrapper h2 {
    padding: 20px 0px;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--c-bg-primary);
}

.form-content {
    display: grid;
    margin-top: 20px;
}

label {
    text-transform: uppercase;
    font-size: 0.8125rem;
}

input {
    background: linear-gradient(to bottom, #00000005, transparent);
    padding: 4px 10px;
    border: 1px solid var(--c-grey-light);
    box-shadow: inset 0px 3px 3px -1px #0000000a;
    border-radius: 2px;
    transition: border 0.15s ease-in-out;
    font-weight: 400;
}

input:hover {
    border: 1px solid var(--c-grey-default);
}

input:focus {
    outline: none;
    border: 1px solid var(--c-grey-default);
    box-shadow: inset 0px 0px 0px 0.3px var(--c-grey-default);
}

input[type="radio"] {
    appearance: none;
    height: 20px;
    background-color: transparent;
    cursor: pointer;
    transition: border 0.15s ease-in-out;
}

input[type="radio"]:hover+label {
    color: var(--c-black);
    cursor: pointer;
}

input[type="radio"]:checked {
    background-color: var(--c-black);
    box-shadow: inset 0 0 0 1px var(--c-bg-secondary);
}

input[type="radio"]:checked+label {
    color: var(--c-black);
}

.radio-buttons-wrapper {
    display: flex;
    gap: 10px;
}

.radio-button {
    display: flex;
    gap: 4px;
}

.radio-button label {
    margin-right: 6px;
    font-size: 0.875rem;
    text-transform: none;
    color: var(--c-text-muted);
    transition: all 0.15s ease-in-out;
}

.add-book-button {
    text-align: end;
    margin-top: 24px;
}

.edit-book-buttons {
    display: flex;
    justify-content: end;
    padding: 24px 36px 36px 36px;
    background-color: var(--c-bg-secondary);
}

.edit-book-buttons-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.submit-btn {
    padding: 6px 14px;
    border: none;
    font-size: 0.8125rem;
    text-transform: uppercase;
    background-color: var(--c-black);
    color: var(--c-bg-secondary);
    transition: all 0.15s ease-in-out;
}

.submit-btn:hover {
    box-shadow: inset 0 0 0 1px var(--c-black);
    background-color: var(--c-bg-secondary);
    color: var(--c-black);
}

/* MODALS
====================================================== */


.modal {
    position: fixed;
    margin: auto;
    border: none;
}

.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0.3px);
}

.modal button {
    text-transform: uppercase;
    font-size: 0.8125rem;
}

.cancel-btn {
    border: 1px solid var(--c-grey-light);
    background-color: transparent;
}

.cancel-btn:hover {
    border: 1px solid var(--c-black);
}

/* EDIT BOOK DETAILS MODAL */

/* check form styling for more */

#edit-form .form-wrapper {
    margin-top: -30px;
}

/* DELETE BOOK CONFIRMATION MODAL */

.delete-modal-content {
    display: grid;
    grid-template: auto auto 1fr / 1fr 1fr;
    grid-template-areas: 
    "header header"
    "text text"
    "cancel delete";
    gap: 10px;
    padding: 40px;
    background-color: var(--c-bg-secondary);
}

.delete-modal-content h2 {
    grid-area: header;
    line-height: 1;
}

.delete-modal-content p {
    grid-area: text;
    margin-bottom: 10px;
    color: var(--c-text-muted);
}

.delete-modal-content button {
    padding: 6px;
}

.delete-btn {
    border: none;
    font-weight: 500;
    background-color: var(--c-red);
}

.delete-btn:hover {
    background-color: color-mix(in hsl shorter hue, var(--c-red), black 12%)
}


/* MEDIA QUERIES
====================================================== */

@media (width <= 980px) {

    .container {
        grid-template: repeat(4, auto) / 1fr;
        align-content: start;
    }

    header {
        grid-column: 1 / 5;
        grid-row: 1;
        position: relative;
    }

    .stats-section {
        grid-column: 1 / 5;
        grid-row: 2 / 3;
        position: relative;
        display: inline;
        padding: 20px 36px 0px;
        background-color: transparent;
    }

    .stats-wrapper {
        gap: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--c-grey-faint);
    }

    .stats-wrapper ol {
        display: flex;
        gap: 20px;
    }

    .add-form {
        grid-column: 1 / 5;
        grid-row: 3 / 4;
        display: inline;
        padding: 0px 36px;
        background-color: transparent;
    }

    .add-form .form-wrapper {
        position: relative;
        top: 0px;
        display: grid;
        grid-template: repeat(5, auto) / 1fr 1fr;
        column-gap: 36px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--c-grey-faint);
    }

    .form-wrapper h2,
    .form-wrapper hr,
    .add-book-button {
        grid-column: 1 / span 2;
    }

    .form-wrapper h2 {
        border-bottom: 1px solid var(--c-bg-secondary);
    }

    .add-book-button {
        margin-top: 10px;
    }

    .add-book-button .submit-btn:hover {
        background-color: transparent;
    }

    .library {
        grid-column: 1 / 5;
        grid-row: 4 / 5;
    }
}