/**
 * Books Styles
 * File Version: 1.0.0
 * File Date: 2026-04-09
 */
 /* =====================================================================
   COURSE STYLES - INDEX
   ---------------------------------------------------------------------
   MARK: Base Styles
   MARK: Header
   MARK: Layout and Sidebar
   MARK: Footer
   MARK: Typography
   MARK: Buttons
   MARK: Lesson Styles
   MARK: Project Styles
   MARK: Cards
   MARK: Breadcrumbs
===================================================================== */

/* =====================================================================
   MARK: Base Styles
===================================================================== */

:root {
  --gbm-site-primary: #1c85cf;
  --gbm-site-primary-hover: #2272ac;
  --gbm-books-c1: #6293bf;
  --gbm-books-c2: #863e1a;
  --gbm-books-c3: #45869c;
  --gbm-books-c4: #db8831; 
  --gbm-books-c5: #e5a528;

  --reader-main-bg: #e8e3e3;
  --reader-sidebar-bg: #ffffff;
  --reader-sidebar-text: #2b2b2c;
  --reader-border-color: #ddd;
  --reader-border-color-dark: rgb(255, 255, 255);

  --reader-link-color: #202021;
  --reader-link-hover-bg: rgba(16, 16, 17, 0.053);
  --reader-link-active-bg: rgb(191, 191, 197);

  /* Typography */
   --reader-h1: 1.8rem;
   --reader-h2: 1.6rem;
   --reader-h3: 1.4rem;
   --reader-h4: 1rem;
   --reader-txt-sm: 0.75rem;
   --reader-txt-md: 0.85rem;
   --reader-txt-lg: 0.95rem;
   --reader-txt-xl: 1.05rem;

   /* Coloring */
   --reader-h1-color: #2f3037;
   --reader-h2-color: var(--gbm-site-primary);
   --reader-h3-color: var(--gbm-site-secondary, #4a691b);
   --reader-text-color: #222;
   --reader-italic-color: #42c2f9;

   /* Spacing */
   --reader-h-space-xl: 0.6rem;
   --reader-h-space-sm: 0.8rem;
   --reader-h-space-base: 1rem;
   --reader-h-space-lg: 1.2rem;
   --reader-h-space-xl: 1.5rem;
}

/* =====================================================================
   MARK: Header
===================================================================== */

/* .gbm-action-strip {
  background: var(--gbm-site-primary);
}

.gbm-site-header .navbar::after {
  background: var(--gbm-site-primary);
} */

/* Hover underline for ALL nav links */
.navbar-nav .nav-item:hover::after,
.navbar-nav .nav-item:focus-within::after {
   background: var(--gbm-site-primary);
}

/* =====================================================================
   MARK: Layout and Sidebar
===================================================================== */

/* =====================================================================
   MARK: Footer
===================================================================== */

/* .gbm-site-footer {
  border-top: solid 5px var(--gbm-site-primary);
} */

/* =====================================================================
   MARK: Typography
===================================================================== */

/* =====================================================================
   MARK: Buttons
===================================================================== */

.btn-outline-primary {
   color: var(--gbm-site-primary);
   border-color: var(--gbm-site-primary);
}

.btn-outline-primary:hover {
   background: var(--gbm-site-primary);
   border-color: white;
}

.btn-outline-primary:active {
   background: var(--gbm-site-primary) !important;
   border-color: white !important;
}

.btn-primary {
   background: var(--gbm-site-primary);
   color: white;
   border-color: var(--gbm-site-primary);
}

.btn-primary:hover {
   background: var(--gbm-site-primary-hover);
   color: white;
   border-color: var(--gbm-site-primary);
}


/* =====================================================================
   MARK: Lesson Styles
===================================================================== */

/* =====================================================================
   MARK: Project Styles
===================================================================== */

/* =====================================================================
   MARK: Cards
===================================================================== */

/* =====================================================================
   MARK: Breadcrumbs
===================================================================== */

/* =====================================================================
   MARK: Reusable Styles
===================================================================== */

.reader-panel {
   background: #fff;
   border: 1px solid var(--reader-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem 0rem;
   box-shadow: 0 2px 4px var(--reader-shadow);
   grid-column: 1 / -1;
}

.reader-panel img {
   max-width: 100%;
   border-radius: 8px;
}

.reader-panel--top {
   background: #fff;
   border: 1px solid var(--reader-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem 0rem;
}

.reader-section {
   background: #fff;
   border: 1px solid var(--reader-border-color);
   border-radius: 8px;
   padding: 1rem;
   box-shadow: 0 2px 4px var(--reader-shadow);
   grid-column: 1 / -1;
}

.add-announcement {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.add-announcement p {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.book-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: var(--course-txt-sm);
   font-weight: 700;
}

.book-badge--category {
   background: #e5f3ff;
   color: #115f9a;
}

.book-badge--sub-category {
   background: #e5f3ff;
   color: #117f9e;
}

/* =====================================================================
   MARK: Reader Layout
===================================================================== */

.books-reader h1 {
   margin: var(--gbm-space-sm) 0;
   font-size: 1.5rem;
   color: var(--gbm-site-primary);
}

.books-reader h2 {
   margin: var(--gbm-space-sm) 0 var(--gbm-space-base);
   color: var(--gbm-books-c2);
   font-size: 1.5rem;
}

.books-reader h3 {
   margin: 0.7rem 0rem 0.5rem;
   color: var(--gbm-books-c3);
   font-size: 1.3rem;
}

.books-reader,
.books-reader * {
   box-sizing: border-box;
}

.books-reader {
   font-family: Arial, sans-serif;
   color: #222;
}

.books-reader-layout {
   display: grid;
   grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
   gap: 0;
   background: var(--reader-main-bg);
   overflow: hidden;
}

.books-reader-sidebar {
   background: var(--reader-sidebar-bg);
   border-right: 2px solid #5b6160; 
   color: var(--reader-sidebar-text);
   padding: 1.5rem 1rem;
   min-width: 0;
}

.books-reader-sidebar p {
   color: var(--reader-sidebar-text);
}

.books-reader-main {
   padding: 1rem;
   min-width: 0;
}

@media (max-width: 992px) {
   .books-reader-layout {
      grid-template-columns: 1fr;
   }
   .books-reader-sidebar {
   border-right: 0;
   border-bottom: 1px solid var(--reader-border-color);
   }

}

/* =====================================================================
   MARK: Reader Nav
===================================================================== */

.book-nav {
   display: grid;
   gap: 0.25rem;
}

.book-nav__link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  color: var(--reader-link-color);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.book-nav__link:hover {
  background: var(--reader-link-hover-bg);
}

.book-nav__link.is-active {
  background: var(--reader-link-active-bg);
  border: 1px solid var(--reader-border-color);
  border-bottom: 2px solid var(--gbm-site-primary);
  font-weight: 600;
}

.book-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.book-nav__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.8;
}

.book-nav__link.is-active .book-nav__icon {
  opacity: 1;
}

/* ==========================================================
   MARK: Browse Books View
========================================================== */

.book-card {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
   justify-content: start;
   gap: 1rem;
   padding: 1rem;
}

.book-card__item {
   overflow: hidden;
   display:block; 
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   text-decoration: none;
   color: inherit;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.book-card__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.10);
}

.book-card__item:focus-visible {
  outline: 2px solid var(--gbm-site-primary);
  outline-offset: 2px;
}

.book-card__graphic {
  position: relative;
}

.book-card__graphic img {
   display: block;
   width: 100%;
   aspect-ratio: 2/3;
   border-radius: 8px;
   object-fit: cover;
}

.book-card__overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 3rem 0.75rem 0.75rem;
   /* background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); */
   background: linear-gradient(to top, rgba(0,0,0,0.90) 0%, transparent 100%);
   /* background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 40%, transparent 100%); */
   text-shadow: 0 1px 4px rgba(0,0,0,0.8);
   border-radius: 0 0 8px 8px;
   color: #fff;
   font-size: 1rem;
   font-weight: 600;
   transform: translateY(8px);
   opacity: 0;
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.book-card__item:hover .book-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
   .book-card {
    grid-template-columns: 1fr;
  }

   .book-card__graphic {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .book-card__graphic img {
    flex: 0 0 70px;
    width: 70px;
    aspect-ratio: 2/3;
    border-radius: 4px 0 0 4px;
  }

  .book-card__overlay {
    position: static;    /* no longer absolute */
    flex: 1;
    opacity: 1;          /* always visible */
    transform: none;     /* cancel the translateY */
    padding: 0.75rem;
    background: none;    /* ditch the gradient */
    color: var(--gbm-books-c2, #333);   /* dark text on white card */
    text-shadow: none;
    font-size: 0.95rem;
    border-radius: 0;
  }
}

.log-hero {
   display: grid;
   grid-template-columns: minmax(150px, 200px) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
   padding: 1em;
   margin: 1rem 0rem;
   background: #fff;
   border-radius: 8px;
}

.log-hero__graphic {
   width: 150px;
   max-width: 100%;
}

.log-hero__graphic img {
   max-width: 100%;
   border-radius: 8px;
}

.log-hero__summary p {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--reader-txt-xl);
   line-height: 1.65;
}

/* ==========================================================
   MARK: Book View
========================================================== */

.book-hero {
   display: grid;
   grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
   padding: 1em;
   margin: 1rem 0rem;
   background: #fff;
   border-radius: 8px;
}

.book-hero__graphic {
   width: 250px;
   max-width: 100%;
}

.book-hero__graphic img {
   max-width: 100%;
   border-radius: 8px;
}

.book-hero__summary p {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--reader-txt-xl);
   line-height: 1.65;
}

.book-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--reader-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}

.book-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}

.book-chapter-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

   background: #ffffff;
   border: 2px solid var(--reader-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.6rem 0rem;
   box-shadow: 0 2px 4px var(--reader-shadow);
   color: #333;
}

.book-chapter-row:hover {
   transform: translateY(-2px);
   /* border-color: var(--gbm-site-primary); */
   border-color: color-mix(in srgb, var(--gbm-site-primary) 60%, transparent);
}

.book-chapter-row p {
   margin: 0;
   font-size: 1.1rem;
}

.book-chapter-row__title {
   margin: 0;
   color: var(--gbm-books-c3);
   font-size: 1.05rem;
   font-weight: 600;
}

/* @media (max-width: 768px) {
   .book-hero {
      grid-template-columns: 1fr;
   }
} */

@media (max-width: 992px) {
   .book-hero {
      grid-template-columns: 1fr;
   }
}


/* ==========================================================
   MARK: Chapter View
========================================================== */

.chapter-hero {
   display: grid;
   grid-template-columns: minmax(160px, 160px) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
   padding: 1em;
   margin: 1rem 0rem;
   background: #fff;
   border-radius: 8px;
}

.chapter-hero__graphic {
   width: 120px;
   max-width: 100%;
}

.chapter-hero__graphic img {
   max-width: 100%;
   border-radius: 8px;
}

.chapter-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--reader-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}

.chapter-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}

.chapter-content {
   margin-top: 1.5rem;
   line-height: 1.75;
   color: var(--reader-text-color, #222);
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 4rem 5rem;
}

.chapter-number {
   margin: 0;
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--gbm-books-c1);
}

.chapter-content p {
   margin: 0 0 1rem;
}

.chapter-content h1 {
   margin: 1.5rem 0 0.75rem;
   color: var(--reader-h1-color);
   font-size: var(--reader-h1);
}

.chapter-content h2 {
   margin: 1.5rem 0 0.75rem;
   color: var(--reader-h2-color);
   font-size: var(--reader-h2);
}

.chapter-content h3 {
   margin: 1.5rem 0 0.5rem;
   color: var(--reader-h3-color);
   font-size: var(--reader-h3);
}

.chapter-content i {
   color: var(--reader-italic-color);
}

/* .chapter-content a {
   color: var(--gbm-site-primary);
   text-decoration: underline;
} */

.chapter-breadcrumb {
   font-style: italic;
   font-size: 1rem;
   color: var(--muted);
   margin-top: 1rem;
}

.chapter-breadcrumb a {
   text-decoration: none;
}

.chapter-breadcrumb a:hover {
   /* text-decoration: underline; */
   color: var(--gbm-site-primary);
}

@media (max-width: 992px) {
   .chapter-hero {
      grid-template-columns: 1fr;
   }
   .chapter-content {
      padding: 2rem;
   }
}


/* ==========================================================
   MARK: Reading List View
========================================================== */


/* ==========================================================
   MARK: Search View
========================================================== */


/* =====================================================================
   MARK: TESTING
===================================================================== */