/* fonts */
@font-face {
    font-family: kingthingswrote;
    src: url(./fonts/kingthingswrote/Kingthings_Wrote-webfont.woff);
}

@font-face {
    font-family: abhayalibre;
    src: url(./fonts/abhayalibre/AbhayaLibre-Regular-webfont.woff);
}

/*Custom properties*/
:root {
    --light-grey: #E7E4E2;
    --grey: #868691;
    --vivamagenta: #BB2649;
    --brass: #C58455;
    --darkblue: #2E3040;
  }

/* dynamic font size */
html {
    font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (2800 - 300)));
    font-family: 'abhayalibre', serif;
  }

/* main page container with 100vh for fixed header with grid */
.page-container {
    display: grid;
    height: 100vh; /* important for fixed header*/
    grid-template-rows: auto 1fr;
    grid-template-areas: 
    'header'
    'main-content';
}

/* header element */
header {
    grid-area: header;
    background-color: var(--darkblue);
    display: flex;
    padding: 15px;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.logo {
    margin-right: auto;
    font-size: 2rem;
    padding: 10px;
    font-family: 'kingthingswrote', serif;
    color: var(--brass);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* 'Add Book' button in the header */
.add-book-main {
    margin-right: 15px;
    margin-left: 15px;
    height: 2.5rem;
    width: 2.5rem;
    padding: 10px;
    color: var(--vivamagenta);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.add-book-main:hover {
    box-shadow: none;
    color: var(--grey);
}

.add-book-main:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* book card container */
main {
    grid-area: main-content;
    background-color: var(--grey);
    overflow: auto; /* important for fixed header and scrolling cards*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: repeat(3, 1fr);
    gap: 25px;
    padding: 15px;
}

/* card styling */
.book-card {
    background-color: var(--light-grey);
    color: var(--darkblue);
    border-radius: 12px;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    padding: 15px;
    gap: 10px;
    align-content: space-between;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}

.card-title,
.card-author,
.card-pages {
    overflow: hidden;
}

.card-button-container {
    display: flex;
    justify-content: space-evenly;
}

svg {
    height: 1rem;
    width: 1rem;
    /*prevents icon inside button to hinder button action*/
    pointer-events: none;
    fill: var(--darkblue);
}

.delete-button-text,
.toggle-read-button-text,
.edit-button-text {
    pointer-events: none;
    color: var(--darkblue);
}

/* Form elements styling */
dialog {
    background-color: var(--brass);
    font-family: 'abhayalibre', serif;
    color: var(--darkblue);
}

.modal-header {
    display: flex;
    align-items: center;
}

.header-text {
    margin-right: auto;
}

/* 'close modal' button styling */
.close-modal {
    height: 1.5rem;
    width: 1.5rem;
    background-color: var(--light-grey);
    color: var(--vivamagenta);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.close-modal:hover {
    box-shadow: none;
    color: var(--grey);
}

.close-modal:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

label {
    display: flex;
    justify-content: flex-end;
}

input {
    background-color: var(--light-grey);
    margin-left: 5px;
}

input[type="text"],
input[type="number"] {
    width: 250px;
}

input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
}

.disclaimer {
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin-top: 10px;
}

/* Submit and edit book buttons */
.submit-book-button,
.add-edited-book {
    height: 1.5rem;
    background-color: var(--light-grey);
    color: var(--vivamagenta);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.submit-book-button:hover,
.add-edited-book:hover {
    box-shadow: none;
    color: var(--grey);
}

.submit-book-button:active,
.add-edited-book:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* hidden class for Submit/ Edit buttons toggle */
.hidden {
    display: none;
}