/* Fonts */

/* Title font */
@font-face {
  font-family: 'Cinzel Decorative';

  src:  local('Cinzel Decorative Bold'), local('CinzelDecorative-Bold'),
        url('assets/fonts/CinzelDecorative/subset-CinzelDecorative-Bold.woff2') format('woff2'),
        url('assets/fonts/CinzelDecorative/subset-CinzelDecorative-Bold.woff') format('woff');

  font-weight: bold;
  font-style: normal;

  /*
  Title font is important as it is used in the logo. 
  The font display strategy for the subtitle font must be set such that the subtitle does not appear before the title.
  */
  font-display: block;
}

/* Subtitle font */
@font-face {
  font-family: 'Noto Serif';

  src:  local('Noto Serif Regular'), local('NotoSerif-Regular'),
        url('assets/fonts/NotoSerif/subset-NotoSerif-Regular.woff2') format('woff2'),
        url('assets/fonts/NotoSerif/subset-NotoSerif-Regular.woff') format('woff');

  font-weight: normal;
  font-style: normal;

  /* The font display strategy for the subtitle font must be set such that the subtitle does not appear before the title. */
  font-display: block;
}

/* Body fonts */
@font-face {
  /* Junicode */
  font-family: 'Junicode';

  src:  local('Junicode'),
        url('assets/fonts/Junicode/Junicode.woff2') format('woff2'),
        url('assets/fonts/Junicode/Junicode.woff') format('woff');

  font-weight: normal;
  font-style: normal;

  font-display: block;
}

@font-face {
  /* Junicode Bold */
  font-family: 'Junicode';

  src:  local('Junicode Bold'), local('Junicode-Bold'),
        url('assets/fonts/Junicode/Junicode-Bold.woff2') format('woff2'),
        url('assets/fonts/Junicode/Junicode-Bold.woff') format('woff');

  font-weight: bold;
  font-style: normal;

  font-display: block;
}

@font-face {
  /* Junicode Italic */
  font-family: 'Junicode';

  src:  local('Junicode Italic'), local('Junicode-Italic'),
        url('assets/fonts/Junicode/Junicode-Italic.woff2') format('woff2'),
        url('assets/fonts/Junicode/Junicode-Italic.woff') format('woff');

  font-weight: normal;
  font-style: italic;

  font-display: block;
}

@font-face {
  /* Junicode Bold Italic */
  font-family: 'Junicode';

  src:  local('Junicode Bold Italic'), local('Junicode-BoldItalic'),
        url('assets/fonts/Junicode/Junicode-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/Junicode/Junicode-BoldItalic.woff') format('woff');

  font-weight: bold;
  font-style: italic;

  font-display: block;
}

/* Selector style rules */

/* (A) CSS Variables */
:root {
  /* Fonts */

  /* 
  A combination of the system font stacks used on GitHub, Medium and WordPress Admin (as of October 2022), with some symbol and emoji support.
  Read more on: https://css-tricks.com/snippets/css/system-font-stack/#aa-method-1-system-fonts-at-the-element-level.

  EXPLANATION:
  ------------
  The stack aims to use the default font of whichever operating system the user is viewing the page on from the following: Apple systems, Windows, Android, and Linux.
  
  - "Noto Sans" is applied if none of the default fonts of the previous operating systems is found.
  - "Helvetica Neue", "Arial", and sans-serif are applied as fallback for older operating systems.

  - "Apple Color Emoji", "Segoe UI Emoji", and "Segoe UI Symbol" are used for rendering symbols and emojis in the native operating system font.

  NOTE:
  The `system-ui` generic font family, which can replace `-apple-system, BlinkMacSystemFont`, is not supported in the latest versions of some web browsers, so it is not used.
  Refer to https://caniuse.com/font-family-system-ui.
  */
  --system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --title-font: 'Cinzel Decorative', var(--system-font-stack);
  --subtitle-font: 'Noto Serif', var(--system-font-stack);
  --body-font: 'Junicode', var(--system-font-stack);

  /* Colors */

  /* TODO: Implement light theme - Use color scheme from the Grand Egyptian Museum (GEM) official homepage https://www.visit-gem.com/en/home */

  --brand-color-primary: #212529;
  --brand-color-secondary: #7C6857;

  --text-color-content: #FFFFFF;

  /* Other variables */

  /* The outline width and style used for most buttons */
  --outline-width-and-style: 2px solid;

  /* The transition duration and timing function used for all user interactions. */
  --transition-duration-and-timing: 0.2s ease-in-out;
}

/* (B) General styles */

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* (B - 1) Anchor styles */

a, .mark-as-read-unread {
  --link-text-and-shadow-color: var(--brand-color-secondary);

  color: var(--link-text-and-shadow-color);
  text-decoration: underline;

  -webkit-transition: text-shadow var(--transition-duration-and-timing);
  -moz-transition: text-shadow var(--transition-duration-and-timing);
  -ms-transition: text-shadow var(--transition-duration-and-timing);
  -o-transition: text-shadow var(--transition-duration-and-timing);
  transition: text-shadow var(--transition-duration-and-timing);
}

a:hover, a:focus-visible, .mark-as-read-unread:hover, .mark-as-read-unread:focus-visible {
  text-shadow: 0 0 4px var(--link-text-and-shadow-color);
}

a:active, .mark-as-read-unread:active {
  color: var(--text-color-content);
}

/* (B - 2) Button styles */

button {
  border: none;
  outline: none;

  cursor: pointer;

  /* Buttons do not inherit the font family of the parent by default. */
  font-family: var(--body-font);
}

.add-book, #add-edit-book-form > footer button {
  outline: var(--outline-width-and-style) var(--brand-color-secondary);
}

.add-book::before {
  /* U+2795: Heavy Plus Sign Unicode character - The Plus Sign Unicode character does not align with the rest of the button text. */
  content: '\2795';
}

/* (B - 3) Image styles */

svg {
  --width-and-height: 90%;

  width: var(--width-and-height);
  height: var(--width-and-height);
}

/* (2) Body styles */

/*
NOTE: for the purposes of this project:
1. Flexbox will be used for one-dimensional layouts, while Grid will be used for two-dimensional ones, and for centering, with exception for the `body` and `main` elements (see below).
2. The `rem` and `em` units will be used exclusively for text-related properties.
*/

body {
  /*
  Grid used for full page layout as it causes less layout shifting than Flexbox on slower connections (so long as content does not define grid tracks or grid track sizes).

  Read more: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/.
  */
  display: grid;

  /* The header and footer heights are set to values that are not content-relative in their respective selectors. */
  grid-template-rows: auto 1fr auto;

  width: 100vw;
  height: 100vh;

  background-color: var(--brand-color-primary);
  color: var(--text-color-content);

  font-family: var(--body-font);
}

/* Header styles */

body > header {
  /* Required for positioning of the background image attribution paragraph. */
  --header-border-bottom: 4px;
  --header-height: 35vh;

  display: flex;
  flex-direction: column;

  justify-content: center;

  height: var(--header-height);
}

body > header, dialog header {
  background-image: url(assets/images/header-background.jpg),

                    /* Used as a fallback in case the background image fails to load, as well as the background for the bottom border. */
                    linear-gradient(to right, var(--brand-color-secondary) 50%, var(--brand-color-primary));

  /* Allows the second background image to occupy the bottom border of the header, creating an illusion of a border with a gradient background. */
  background-clip: padding-box, border-box;
  border-bottom: 4px solid transparent;

  background-size: cover;
}

.header-button {
  font-size: 1.5rem;

  --text-and-outline-color: var(--brand-color-secondary);

  padding: 4px 12px;

  background-color: var(--brand-color-primary);
  color: var(--text-and-outline-color);

  -webkit-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), outline var(--transition-duration-and-timing);
  -moz-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), outline var(--transition-duration-and-timing);
  -ms-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), outline var(--transition-duration-and-timing);
  -o-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), outline var(--transition-duration-and-timing);
  transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), outline var(--transition-duration-and-timing);
}

.header-button:hover, .header-button:focus-visible {
  --text-and-outline-color: var(--brand-color-primary);
}

.header-button:active {
  --text-and-outline-color: var(--text-color-content);
}

.header-button:hover, .header-button:focus-visible, .header-button:active {
  color: var(--text-and-outline-color);
  background-color: var(--brand-color-secondary);

  outline: var(--outline-width-and-style) var(--text-and-outline-color);
}

/* `div.header-top` not yet implemented in the markup. */
/* 
.header-top {

}
*/

.header-bottom {
  display: flex;
  justify-content: space-around;
}

.header-bottom > * {
  display: flex;
  flex-direction: column;

  justify-content: center;
}

.header-left > * {
  /* The title and subtitle require the same horizontal padding, in order for their contents to start at the same vertical line. */
  --title-and-subtitle-padding-horizontal: 20px;

  background-color: var(--brand-color-primary);
  color: var(--brand-color-secondary);

  /* Prevents the background color of each of the title and subtitle from extending to the full width of the parent container. */
  width: fit-content;
}

.title {
  /* `font-weight` set in case another font that has multiple font weights replaces the current one. */
  font: bold 4.5rem var(--title-font);

  margin-bottom: 20px;
  padding: 8px var(--title-and-subtitle-padding-horizontal);
}

.subtitle {
  font: normal 1.5rem var(--subtitle-font);

  padding: 8px var(--title-and-subtitle-padding-horizontal);
}

.bg-image-attribution {
  position: absolute;

  top: calc(var(--header-height) - 3.5vh - var(--header-border-bottom));
  left: 1vw;

  padding: 2px 8px;

  /*
  Background image attribution is intended to appear when the user hovers over the background image.

  `display: hidden;` (or the HTML `hidden` attribute) are not used as the `display` property is not animatable.
  */
  opacity: 0;

  -webkit-transition: opacity var(--transition-duration-and-timing);
  -moz-transition: opacity var(--transition-duration-and-timing);
  -ms-transition: opacity var(--transition-duration-and-timing);
  -o-transition: opacity var(--transition-duration-and-timing);
  transition: opacity var(--transition-duration-and-timing);
}

header:hover .bg-image-attribution {
  opacity: 1;
}

/* (2) Main styles */

main {
  /* Grid used here to reduce style rules for sizing child elements. */

  display: grid;
  grid-template-columns: 5fr 1fr;

  column-gap: 32px;

  padding: 24px 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header > .add-book {
  font-size: 1.2rem;
}

.section-title {
  margin-bottom: 24px;

  font: bold 1.45rem var(--body-font);

  color: var(--brand-color-secondary);
}

/* `:not([hidden])` is used as it prevents overriding `display: hidden` set by the attribute by `display: grid`. */
.empty-library-prompt-container:not([hidden]) {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;
}

.empty-library-prompt-container:not([hidden]) > div {
  text-align: center;

  color: var(--brand-color-secondary);
}

.empty-library-message {
  --font-size: 3rem;

  display: flex;
  flex-direction: column;

  align-items: center;

  font-size: var(--font-size);

  line-height: 1.2;
}

.empty-library-prompt {
  font-size: calc(var(--font-size) * 0.5);

  color: var(--text-color-content);
}

.empty-library-message::after {
  /* U+2500: Box Drawings Line Horizontal Unicode character. */
  content: '\2500'
}

.book-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(450px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(max-content, 1fr));

  gap: 24px 20px;

  padding-top: 0;
  padding-bottom: 20px;
  padding-left: 16px;
}

.book-card {
  --outline-width: 2px;
  --border-left-width: 8px;

  display: flex;
  flex-direction: column;

  border-left: var(--border-left-width) solid var(--brand-color-secondary);
  padding: 16px;

  outline: var(--outline-width) solid var(--brand-color-secondary);
  
  background-color: inherit;
  color: var(--text-color-content);
}

.book-card, .book-buttons-container > .card-button, .close-button, #add-edit-book-form > footer button {
  -webkit-transition: box-shadow var(--transition-duration-and-timing), outline-width var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -moz-transition: box-shadow var(--transition-duration-and-timing), outline-width var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -ms-transition: box-shadow var(--transition-duration-and-timing), outline-width var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -o-transition: box-shadow var(--transition-duration-and-timing), outline-width var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  transition: box-shadow var(--transition-duration-and-timing), outline-width var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
}

.book-card:hover, .book-buttons-container > .card-button:hover, .book-buttons-container > .card-button:focus-visible,
#add-edit-book-form > footer button:hover, #add-edit-book-form > footer button:focus-visible {
  --outline-width-increase: 1px;

  box-shadow: 0px 0px 16px var(--brand-color-secondary);

  outline-width: calc(var(--outline-width) + var(--outline-width-increase));
  border-left-width: calc(var(--border-left-width) - var(--outline-width-increase));
}

.book-title {
  font-size: 1.4rem;

  color: var(--brand-color-secondary);
}

.book-title > cite {
  font-style: normal;
}

.book-info-row {
  font-size: 1.05rem;

  margin-bottom: 8px;
}

.book-info-row > *:not(:last-child)::after, .credit::after {
  /* U+00B7: Middle Dot Unicode character. Leading space ensures that the character is centered between the author's name and book genre. */
  content: ' \00B7';

  font-size: 1.05em;

  color: var(--brand-color-secondary);
}

.book-description {
  font-size: 1.03rem;

  word-spacing: -1.5px;

  margin-bottom: 24px;
}

.book-card-buttons {
  margin-top: auto;
}

.book-status-label {
  font-weight: bold;

  color: var(--brand-color-secondary);
}

.card-button {
  background: none;
}

.mark-as-read-unread {
  font-size: 1em;

  color: var(--brand-color-secondary);
}

.book-buttons-container {
  display: flex;
  justify-content: flex-end;

  gap: 16px;
}

.book-buttons-container > .card-button {
  --width-and-height: 40px;

  display: grid;
  place-items: center;

  width: var(--width-and-height);
  height: var(--width-and-height);

  padding: 8px;

  outline: var(--outline-width-and-style) var(--brand-color-secondary);

  color: var(--brand-color-secondary);
}

.book-buttons-container > .card-button:active, .close-button:active, #add-edit-book-form > footer button:active {
  --text-and-outline-color: var(--text-color-content);

  outline-color: var(--text-and-outline-color);
  color: var(--text-and-outline-color);
}

.stats-table {
  text-align: left;
}

.stats-table > caption {
  /* Table caption is meant for screen readers. */
  opacity: 0;

  height: 0;
}

/* The `tr` element is apparently not stylable */
.stats-table th, .stats-table td {
  border-bottom: 1px solid var(--brand-color-secondary);
  border-collapse: collapse;

  font-size: 1.1rem;

  padding: 4px 8px;
}

.stats-table th {
  background-color: var(--brand-color-secondary);
  color: var(--brand-color-primary);
}

.stats-table th:hover {
  background-color: color-mix(in srgb, var(--brand-color-secondary) 85%, #000000 15%);
}

.stats-table th:active {
  background-color: color-mix(in srgb, var(--brand-color-secondary) 85%, #FFFFFF 15%);
}

/* Dialog styles */

dialog {
  /* Prevents the dialog box from being scrolled towards or away from with the page. */
  position: fixed;
  /* Center the dialog box */
  margin: auto;

  border: 4px solid var(--brand-color-secondary);

  background-color: var(--brand-color-primary);
  color: var(--text-color-content);
}

dialog svg {
  --width-and-height: 32px;

  width: var(--width-and-height);
  height: var(--width-and-height);
}

dialog button {
  background-color: var(--brand-color-primary);
  color: var(--brand-color-secondary);
}

.close-button {
  background: none;
}

.close-button > svg {
  --width-and-height: 48px;
}

/* Prevents the page behind the dialog from being scrolled. */
html:has(dialog[open]) {
  overflow: hidden;
}

/* The backdrop of the dialog, which should be obscured in some way to indicate that the area behind the dialog is non-interactive until the dialog is closed. */
dialog::backdrop {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  
  /* Refer to this awesome YouTube short: https://youtube.com/shorts/NVxjpnOPGIk?si=2qVeC0XIAZFRhIZB. */
  background-image: linear-gradient(rgb(0 0 0 / 0.8) 0 0);
}

#add-edit-book-dialog {
  width: 50vw;
}

#add-edit-book-form {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

#add-edit-book-form > header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
  padding: 16px;
}

.dialog-title {
  font-size: 2rem;

  color: var(--brand-color-secondary);
}

#add-edit-book-form > article {
  font-size: 1.45rem;
}

.label-and-input {
  color: var(--brand-color-secondary);

  margin: 16px;
  margin-top: 0;
}

.label-and-input-text {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

label {
  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;

  -webkit-transition: color var(--transition-duration-and-timing);
  -moz-transition: color var(--transition-duration-and-timing);
  -ms-transition: color var(--transition-duration-and-timing);
  -o-transition: color var(--transition-duration-and-timing);
  transition: color var(--transition-duration-and-timing);
}

label:active, label:has(+ input:focus, + textarea:focus) {
  color: var(--text-color-content);
}

label:has(+ :not([type="checkbox"], [required]))::after {
  content: 'optional';
  text-transform: uppercase;

  font-size: 1rem;
}

label:has(+ :not([type="checkbox"], [required]))::after, .characters-left {
  color: var(--brand-color-primary);
  background-color: var(--brand-color-secondary);

  padding: 0 2px;
}

input, textarea {
  --border-bottom-width: 4px;

  appearance: none;

  caret-color: var(--brand-color-secondary);

  background-color: rgb(255, 255, 255, 0.1);
  color: var(--text-color-content);

  border: none;
  border-bottom: var(--border-bottom-width) solid var(--brand-color-secondary);

  padding: 8px;

  font: inherit;
  font-size: 0.95em;

  -webkit-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), caret-color var(--transition-duration-and-timing), border var(--transition-duration-and-timing), filter var(--transition-duration-and-timing) ;
  -moz-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), caret-color var(--transition-duration-and-timing), border var(--transition-duration-and-timing), filter var(--transition-duration-and-timing) ;
  -ms-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), caret-color var(--transition-duration-and-timing), border var(--transition-duration-and-timing), filter var(--transition-duration-and-timing) ;
  -o-transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), caret-color var(--transition-duration-and-timing), border var(--transition-duration-and-timing), filter var(--transition-duration-and-timing) ;
  transition: background-color var(--transition-duration-and-timing), color var(--transition-duration-and-timing), caret-color var(--transition-duration-and-timing), border var(--transition-duration-and-timing), filter var(--transition-duration-and-timing) ;

  transition-duration: 0.01s;
}

input[autocomplete="on"] {
    /* Covers the background color set by WebKit and Mozilla browsers on autocompletion. */
    --autocomplete-box-shadow: 0 0 0 64px var(--brand-color-secondary) inset !important;
}

/* Covers the background color set by WebKit and Mozilla browsers on autocompletion. */

input[autocomplete="on"]:-webkit-autofill, input[autocomplete="on"]:-webkit-autofill:hover, input[autocomplete="on"]:-webkit-autofill:focus, input[autocomplete="on"]:-webkit-autofill:active {
    -webkit-box-shadow: var(--autocomplete-box-shadow);
    
    /* Required to override the text color set by WebKit browsers on autocompletion. */
    -webkit-text-fill-color: var(--text-color-content) !important;
}

input[autocomplete="on"]:-moz-autofill, input[autocomplete="on"]:-moz-autofill:hover, input[autocomplete="on"]:-moz-autofill:focus, input[autocomplete="on"]:-moz-autofill:active {
    box-shadow: var(--autocomplete-box-shadow);
}

input::placeholder, textarea::placeholder {
  color: inherit;

  opacity: 20%;
}

input:hover, textarea:hover, .close-button:hover, .close-button:focus-visible {
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}

input:hover, textarea:hover {
  background-color: rgb(255, 255, 255, 0.2);
}

input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: none;

  border-color: var(--text-color-content);
}

textarea {
  /* Prevent resizing of the textbox from its bottom-right corner. */
  resize: none;
}

.characters-left {
  justify-self: center;
  align-self: end;

  font-size: 1.1rem;
}

.label-and-input-checkbox {
  display: flex;
  align-items: center;

  gap: 8px;
}

input[type="checkbox"] {
  --width-and-height: 28px;

  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  width: var(--width-and-height);
  height: var(--width-and-height);

  font-size: 110%;

  color: inherit;
}

input[type="checkbox"]:checked::after {
  content: '\2713';

  position: absolute;
  top: calc(-1 * (var(--border-bottom-width) + 1px));
}

#add-edit-book-form > footer {
  padding: 16px;
}

#add-edit-book-form > footer > menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 16px;
}

#add-edit-book-form > footer button {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 10px;

  flex: 1 1 50%;

  padding: 2px 8px;

  font-size: 1.2rem;
}

.close-button {
  -webkit-transition: filter var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -moz-transition: filter var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -ms-transition: filter var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  -o-transition: filter var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
  transition: filter var(--transition-duration-and-timing), color var(--transition-duration-and-timing);
}

/* (C) Footer styles */
body > footer {
  border-top: 1px solid var(--brand-color-secondary);
  padding: 8px 0;

  text-align: center;

  font-size: 1.1rem;
}

body > footer > * {
  display: inline;
}