/* ==========================================================================
   BookBase Theme (global)
   ========================================================================== */

:root {
  --bb-page-bg: #b8c0d0;
  --bb-card-bg: #acbdd8;
  --bb-border: rgba(0,0,0,.125);
  --bb-border-soft: #c7ccd6;
  --bb-blue: #5b82ca;
  --bb-blue-dark: #264a8c;
  --bb-blue-mid: #627aa3;
  --bb-hover: #a2b2cf;
}

body { background-color: var(--bb-page-bg); }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

/* Show a clear outline only when keyboard users tab to elements */
:focus-visible {
  outline: 3px solid var(--bb-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   Header / Navbar
   ========================================================================== */

/* Centered tagline (desktop) */
.navbar-tagline {
  font-size: 1.05rem;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

 .navbar-text {
      font-family: 'Great Vibes', cursive;
      font-weight: 300;
      letter-spacing: 0px;
      font-size: 1.3rem;
      position: relative;
    }

/* Subtle hover treatment for nav links without making the bar heavy */
.navbar .nav-link:hover {
  background-color:rgb(230, 230, 230);
  border-radius: .5rem;
  color: var(--bb-blue-dark);
}

/* Active page highlight (add .active in template) */
.navbar .nav-link.active {
  background-color:rgb(230, 230, 230);
  border-radius: .5rem;
  color: var(--bb-blue-dark) !important;
}

/* Lift the small B logo by a few px */
.brand-logo { transform: translateY(-2px); }

/* Top spacing helper for page headings and a lifted B icon in H1s */
.page-header { margin-top: 2rem; }
.logo-b { margin-right: 1px; transform: translateY(-10px); }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary action used on Home search etc. */
.btn-custom {
  background-color: var(--bb-blue-mid);
  color: #fff;
  border: none;
}
.btn-custom:hover {
  background-color: var(--bb-blue-dark);
  color: #fff;
}

/* Add Book button – single, de-duplicated definition */
.btn-add-book {
  padding: 0.25rem 0.8rem;
  font-size: 0.9rem;
  border-radius: 6px;
  line-height: 1.3;
  min-width: 110px;
  text-align: center;
}

/* Load More button */
#loadMoreBtn {
  background-color: rgb(157, 163, 175);
  color: var(--bb-blue-dark);             /* fallback if border fails */
  border: 1px solid var(--bb-blue-dark);
  transition: background-color .2s ease, color .2s ease;
}
#loadMoreBtn:hover {
  background-color: #5c77ab !important;
  color: #fff !important;
  border-color: var(--bb-blue) !important;
}

/* ==========================================================================
   Cards (grid) – shared across Home, My Collection, Community grid
   ========================================================================== */

.book-card {
  background-color: var(--bb-card-bg) !important;
  border: 1px solid var(--bb-border);
  border-radius: .5rem;
  transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
  display: flex;
  flex-direction: column;
  height: 100%; /* equal height grid */
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Keep buttons pinned at bottom inside cards */
.book-card .card-body { display: flex; flex-direction: column; }
.book-card .card-body > div:first-child { flex-grow: 1; }

/* Covers */
.card-img-top {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  background-color: #f8f9fa;
}

/* Optional helper for 2:3 ratios and object-fit containment */
.ratio-2x3 { --bs-aspect-ratio: calc(3 / 2 * 100%); }
.object-fit-contain { object-fit: contain; width: 100%; height: 100%; }

/* Soft blue surface for standalone cards (profile/detail) */
.soft-blue, .custom-card {
  background-color: var(--bb-card-bg);
  border: 1px solid var(--bb-border);
  border-radius: .5rem;
  padding: 1rem;
}

/* Slight lift on hover in collections */
.collection-card:hover { transform: translateY(-2px); transition: transform 120ms ease; }

/* ==========================================================================
   List view rows (My Collection & Community list)
   ========================================================================== */

.bb-list-item {
  background-color: var(--bb-card-bg);
  border-color: var(--bb-border-soft);
  transition: background-color .15s, box-shadow .15s;
}
.bb-list-item:hover {
  background-color: var(--bb-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Compact cover in list rows */
.bb-cover-list {
  height: 64px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Title link color in list rows */
.bb-title-link { color: #203c71; text-decoration: underline; }
.bb-title-link:hover { color: #152845; text-decoration: none; }

/* ==========================================================================
   Comments
   ========================================================================== */

.bb-comment { background-color: var(--bb-card-bg); }

/* Pagination – compact, centered, and on-brand */
.pagination {
  display: inline-flex;
  border: 1px solid var(--bb-border-soft);
  border-radius: 6px;
  padding: .25rem .5rem;
  background-color: transparent;
  margin: 0 auto;
}
.pagination .page-link {
  background-color: transparent;
  color: var(--bb-blue-dark);
  border: none;
}
.pagination .page-item.active .page-link {
  background-color: var(--bb-blue);
  color: #fff;
  border-radius: 4px;
}
.pagination .page-item.disabled .page-link {
  color: #9aa0ac;
  pointer-events: none;
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

/* Keep max 2 cards per row on very small phones */
@media (max-width: 575.98px) {
  #book-card-grid .col-12 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .bb-list-item { padding: .75rem; }  /* tighten row padding on xs */
}

/* ==========================================================================
   Style the hamburger toggler
   ========================================================================== */
  
.navbar-toggler {
  border: none; /* remove the default grey border */
  padding: 0.5rem 0.75rem;
}

/* ==========================================================================
   Footer social media icons
   ========================================================================== */

footer .social-link i {
  font-size: 1.8rem;          /* bigger size */
  color: #264a8c;             /* bold blue */
  transition: color 0.3s ease, transform 0.2s ease;
}

footer .social-link i:hover {
  color: #5b82ca;             /* lighter hover blue */
  transform: scale(1.2);      /* pop effect on hover */
}


/* Make <h1> headings bolder on tablets & smaller devices */
@media (max-width: 768px) {
  h1, h2 {
    -webkit-text-stroke: 0.5px #000; /* thin outline */
    text-shadow: 1px 1px 0 #000;
  }
}