/* ==========================================================================
   Bookticle — Antiquarian / Taxonomical Illustration aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600&display=swap');

/* --- Color palette ---
   Parchment:     #f5f0e8
   Cream:         #faf7f0
   Warm white:    #fffdf8
   Dark sepia:    #3d2f1e
   Medium sepia:  #6b5744
   Muted olive:   #6b7c5e
   Dusty rose:    #9c6b6b
   Faded gold:    #a08850
   Slate:         #5a6368
*/

:root {
  --parchment: #f5f0e8;
  --cream: #faf7f0;
  --warm-white: #fffdf8;
  --dark-sepia: #3d2f1e;
  --medium-sepia: #6b5744;
  --light-sepia: #b8a48c;
  --muted-olive: #6b7c5e;
  --dusty-rose: #9c6b6b;
  --faded-gold: #a08850;
  --slate: #5a6368;
  --rule-color: #d4c9b8;
  --border-color: #c9bda8;
}

/* --- Base --- */

html {
  background-color: var(--parchment);
}

body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  color: var(--dark-sepia);
  background-color: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */

h1.title, h2.title, h3.title, h4.title, h5.title, h6.title,
.title {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  color: var(--dark-sepia);
  letter-spacing: -0.01em;
}

.subtitle {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--medium-sepia);
}

a {
  color: var(--medium-sepia);
  text-decoration-color: var(--light-sepia);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--dark-sepia);
}

/* --- Navbar --- */

.navbar.is-antiquarian {
  background-color: var(--dark-sepia);
  border-bottom: 3px double var(--faded-gold);
  font-family: 'Libre Baskerville', serif;
  box-shadow: none;
}

.navbar.is-antiquarian .navbar-item,
.navbar.is-antiquarian .navbar-link {
  color: var(--parchment);
  font-size: 0.9rem;
}

.navbar.is-antiquarian .navbar-item:hover,
.navbar.is-antiquarian .navbar-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.navbar.is-antiquarian .navbar-brand .navbar-item {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faded-gold);
}

.navbar.is-antiquarian .navbar-burger span {
  background-color: var(--parchment);
}

.navbar.is-antiquarian .navbar-item .button.is-light {
  background-color: transparent;
  border: 1px solid var(--light-sepia);
  color: var(--parchment);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
}

.navbar.is-antiquarian .navbar-item .button.is-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--parchment);
}

.navbar.is-antiquarian .has-text-grey-light {
  color: var(--light-sepia) !important;
}

/* --- Section / Container --- */

.section {
  background-color: var(--parchment);
}

.container {
  max-width: 960px;
}

/* --- Boxes --- */

.box {
  background-color: var(--cream);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  box-shadow: none;
}

/* --- Cards --- */

.columns.is-multiline > .column {
  display: flex;
}

.card {
  background-color: var(--cream);
  border: 1px solid var(--faded-gold);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card .card-content {
  flex: 1;
}

.card:hover {
  border-color: var(--medium-sepia);
  box-shadow: 0 2px 8px rgba(61, 47, 30, 0.08);
}

.card .card-image,
.card .card-image figure,
.card .card-image img {
  border-radius: 0;
}

.card .card-image img {
  width: 100%;
}

.card .card-content .title a {
  color: var(--dark-sepia);
  text-decoration: none;
}

.card .card-content .title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--light-sepia);
}

.card .tags .tag {
  white-space: normal;
  height: auto;
}

.card .card-footer {
  border-top-color: var(--rule-color);
}

.card .card-footer-item {
  color: var(--medium-sepia);
}

.card .card-footer-item:not(:last-child) {
  border-right-color: var(--rule-color);
}

/* --- Tags --- */

.tag {
  font-family: 'Source Sans 3', sans-serif;
  border-radius: 2px;
  font-size: 0.8rem;
}

.tag.is-info.is-light {
  background-color: #e8efe4;
  color: var(--muted-olive);
  border: 1px solid #cddac5;
}

.tag.is-primary.is-light {
  background-color: #f0ebe0;
  color: var(--medium-sepia);
  border: 1px solid var(--border-color);
}

.tag.is-link.is-light {
  background-color: #e8efe4;
  color: var(--muted-olive);
  border: 1px solid #cddac5;
}

.tag.is-success {
  background-color: var(--muted-olive);
}

.tag.tag-public {
  background-color: var(--warm-white);
  color: var(--muted-olive);
  border: 1px solid var(--muted-olive);
}

.tag.is-warning {
  background-color: var(--faded-gold);
  color: #fff;
}

.tag.is-dark {
  background-color: var(--dark-sepia);
}

/* --- Buttons --- */

.button.is-primary {
  background-color: var(--medium-sepia);
  border-color: var(--medium-sepia);
  font-family: 'Source Sans 3', sans-serif;
  border-radius: 2px;
}

.button.is-primary:hover {
  background-color: var(--dark-sepia);
  border-color: var(--dark-sepia);
}

.button.is-warning {
  background-color: var(--faded-gold);
  border-color: var(--faded-gold);
  color: #fff;
  border-radius: 2px;
}

.button.is-warning:hover {
  background-color: #8a7340;
  border-color: #8a7340;
}

.button.is-danger {
  background-color: var(--dusty-rose);
  border-color: var(--dusty-rose);
  border-radius: 2px;
}

.button.is-danger:hover {
  background-color: #845555;
  border-color: #845555;
}

.button.is-info {
  background-color: var(--slate);
  border-color: var(--slate);
  border-radius: 2px;
}

.button.is-info:hover {
  background-color: #485358;
}

.button.is-info.is-outlined {
  background-color: transparent;
  border-color: var(--slate);
  color: var(--slate);
}

.button.is-info.is-outlined:hover {
  background-color: var(--slate);
  color: #fff;
}

.button.is-light {
  background-color: var(--cream);
  border: 1px solid var(--border-color);
  color: var(--medium-sepia);
  border-radius: 2px;
}

.button {
  border-radius: 2px;
}

/* --- Forms --- */

.input, .textarea, .select select {
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background-color: var(--warm-white);
  color: var(--dark-sepia);
  font-family: 'Source Sans 3', sans-serif;
}

.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--medium-sepia);
  box-shadow: 0 0 0 2px rgba(107, 87, 68, 0.12);
}

.label {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--dark-sepia);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.help {
  color: var(--medium-sepia);
}

.checkbox {
  color: var(--dark-sepia);
}

/* --- Notifications --- */

.notification.is-success.is-light {
  background-color: #e8efe4;
  color: #3d5a2d;
  border: 1px solid #cddac5;
}

.notification.is-danger.is-light {
  background-color: #f0e4e4;
  color: #6b3a3a;
  border: 1px solid #dcc5c5;
}

.notification.is-info.is-light {
  background-color: #e8ece0;
  color: var(--medium-sepia);
  border: 1px solid var(--border-color);
}

.notification .delete {
  background-color: rgba(61, 47, 30, 0.2);
}

.notification .delete:hover {
  background-color: rgba(61, 47, 30, 0.35);
}

/* --- Tables --- */

.table {
  background-color: var(--cream);
  color: var(--dark-sepia);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--parchment);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: #ede7da;
}

.table th {
  color: var(--medium-sepia);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-bottom-color: var(--rule-color);
}

.table td {
  border-bottom-color: var(--rule-color);
}

/* --- Book card (list show page) --- */

.book-card {
  background-color: var(--cream);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  box-shadow: none;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}

.book-card .book-rank {
  font-family: 'Libre Baskerville', serif;
  color: var(--light-sepia);
  font-size: 1.8rem;
  font-weight: 700;
  min-width: 2.5rem;
  text-align: center;
}

.book-card .book-thumbnail img {
  max-height: 150px;
  width: auto;
  border: 1px solid var(--rule-color);
}

.book-card .book-title a {
  font-family: 'Libre Baskerville', serif;
  color: var(--dark-sepia);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}

.book-card .book-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--light-sepia);
}

.book-card .book-subtitle {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: var(--medium-sepia);
  font-size: 0.9rem;
}

.book-card .book-authors {
  color: var(--medium-sepia);
  font-size: 0.95rem;
}

.book-card .book-year {
  color: var(--slate);
  font-size: 0.85rem;
}

.book-card .book-description {
  color: var(--medium-sepia);
  font-size: 0.9rem;
  line-height: 1.6;
}

.book-card details summary {
  color: var(--faded-gold);
  font-size: 0.85rem;
  cursor: pointer;
  font-style: italic;
}

.book-card details summary:hover {
  color: var(--dark-sepia);
}

/* --- List metadata --- */

.list-publisher {
  color: var(--medium-sepia);
}

.list-meta-label {
  color: var(--muted-olive);
}

.list-book-count {
  color: var(--faded-gold);
  font-weight: 600;
}

/* --- Section headings on list show --- */

h2.section-heading {
  font-family: 'Libre Baskerville', serif;
  color: var(--medium-sepia);
  font-size: 1.25rem;
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 0.4rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* --- Horizontal rules --- */

hr {
  background-color: var(--rule-color);
  height: 1px;
}

/* --- Drag handle --- */

.sortable-item {
  cursor: move;
}

.drag-handle {
  font-size: 1.2rem;
  user-select: none;
  cursor: grab;
}

/* --- Tom Select overrides --- */

.ts-wrapper .ts-control {
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 0.4rem;
  background-color: var(--warm-white);
}

.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--medium-sepia);
  box-shadow: 0 0 0 2px rgba(107, 87, 68, 0.12);
}

.ts-wrapper .ts-dropdown {
  border-color: var(--border-color);
  border-radius: 2px;
  background-color: var(--warm-white);
}

.ts-wrapper .ts-dropdown .active {
  background-color: var(--parchment);
  color: var(--dark-sepia);
}

/* --- Decorative flourish for page titles --- */

h1.title {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
}

h1.title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, var(--faded-gold), transparent);
  margin-top: 0.5rem;
}

/* --- Select dropdown --- */

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--medium-sepia);
}

/* --- Want to Read heart --- */

.want-to-read-btn {
  background: none;
  border: none;
  color: var(--faded-gold);
  cursor: pointer;
  padding: 0.15rem;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}

.want-to-read-btn:hover {
  transform: scale(1.2);
  color: #8a7340;
}

.want-to-read-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Edit icon button --- */

.edit-icon-btn {
  color: var(--medium-sepia);
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  transition: color 0.15s ease;
}

.edit-icon-btn:hover {
  color: var(--dark-sepia);
}