/* ==========================================================================
   THEME: Typography & Root Variables
   - Reuse by keeping fonts unified and overriding the CSS variables in :root.
   - To theme a different page/scope, you can wrap a parent (e.g., <div class="theme-blue">)
     and move these :root variables into `.theme-blue { --var: value; }`.
   ========================================================================== */

/* ===== Global: ONLY Poppins ===== */
html, body, * { font-family: "Poppins" !important; }

/* ===== Brand colors tuned to screenshot =====
   Reuse: Override these variables to restyle across the site without touching components.
*/
:root{
  --hero-blue: #1E56D9;      /* headline + primary button */
  --hero-blue-ink: #1646B5;  /* hover/ink */
  --hero-blue-20: rgba(30,86,217,0.12);  /* outline btn hover bg */
  --hero-text: #111827;      /* near-black */
  --hero-muted: #475467;     /* subtitle gray */
  --chip-border: #1E56D9;
  --chip-text: #11316F;
  --radius-xl: 1.25rem;
  --radius-lg: .9rem;
  --nav-blue: #1E56D9;        /* matches your hero blue */
  --nav-blue-ink: #1646B5;    /* hover/active */
}

/* --- Brand logo (reusable utility) --- */
.brand-logo {
  height: 32px;      /* adjust if you want it larger/smaller */
  width: auto;
  display: block;
}

/* ==========================================================================
   HEADER / NAV (reusable across pages)
   - Reuse: Keep spacing + link styles; update only CSS vars for color.
   ========================================================================== */

.site-header .navbar { padding-block: .35rem; }

.navbar-nav .nav-link{ color:#2D2D2D; font-weight:500; padding:.375rem .5rem; }
.navbar-nav .nav-link:hover{ color:#1646B5; }
.navbar-nav .nav-link.active{ color:#1E56D9; font-weight:700; }
.header-cta{ background:#1E56D9; border-color:#1E56D9; padding:.5rem .9rem; border-radius:.75rem; font-weight:600; }
.header-cta:hover{ background:#1646B5; border-color:#1646B5; }

/* Toggler icon since we removed custom icons */
.navbar-toggler { border:none; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Remove extra spacing below header into hero */
.hero { padding-top: 2.25rem; }          /* keep hero tight under header */
@media (min-width: 992px){ .hero{ padding-top: 3rem; } }

/* ==========================================================================
   HERO: Title, Subtitle, CTAs, Chips, Cover
   - Reuse: All hero colors come from CSS vars. Swap images freely.
   ========================================================================== */

/* Headline */
.hero-title{
  color: var(--hero-blue);
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  margin: 0 0 .5rem;
}
.hero-title > span{ display:block; }

/* Subtitle */
.hero-subtitle{
  color: var(--hero-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: .25rem 0 1rem;
}

/* CTAs */
.hero-ctas .btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.15rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
}
.hero-btn-primary{
  background-color: var(--hero-blue);
  border: 2px solid var(--hero-blue);
  color: #fff;
  text-decoration: none;
}
.hero-btn-primary:hover{
  background-color: var(--hero-blue-ink);
  border-color: var(--hero-blue-ink);
  color: #fff;
}
.hero-btn-outline{
  background: #fff;
  border: 2px solid var(--hero-blue);
  color: var(--hero-blue);
  text-decoration: none;
}
.hero-btn-outline:hover{
  background: var(--hero-blue-20);
  border-color: var(--hero-blue);
  color: var(--hero-blue);
}

/* Font Awesome sizes */
.hero-ctas .btn i { font-size: 1.1rem; line-height: 1; }

/* Chips */
.hero-chips{ gap: .6rem !important; margin-top: .25rem; }
.chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .95rem;
  border-radius: 9999px;
  border: 2px solid var(--chip-border);
  background: #fff;
  color: var(--chip-text);
  font-weight: 300;
  font-size: .75rem;
}
.chip i{ font-size: .95rem; line-height: 1; }

/* Cover frame */
.hero-cover{
  margin: 0;
  max-width: 420px; /* keeps a nice size */
}
.hero-cover img{
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   ABOUT THE BOOK (cards, icons)
   - Reuse: Components are neutral; colors via vars/static tokens.
   ========================================================================== */

.about-book{ padding: 2.5rem 0; }
@media (min-width: 768px){ .about-book{ padding: 3rem 0; } }

.about-title{
  color:#1E2A44;          /* deep navy */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.about-subtitle{
  color:#6B7280;          /* muted subtitle */
  margin:0;
}

/* Card */
.about-card{
  border:1px solid #E6E8F0;
  border-radius:.9rem;
  background:#fff;
  padding:1.25rem;
}
@media (min-width: 768px){ .about-card{ padding:1.5rem; } }

/* Icon circle */
.about-icon{
  width:46px; height:46px;
  border-radius:9999px;
  background:#1E56D9;     /* brand blue */
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  margin: .25rem auto .9rem;
}
.about-icon i{ font-size:20px; line-height:1; }

/* Titles & text */
.about-card-title{
  font-weight:800;
  color:#111827;
  font-size:1.05rem;
  margin:0 0 .4rem;
}
.about-card-text{
  color:#4B5563;
  font-size:.95rem;
  line-height:1.6;
  margin:0;
}

/* ==========================================================================
   AUTHORS (cards, photos, socials)
   - Reuse: Structure works for any “people” grid.
   ========================================================================== */

.authors { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px){ .authors{ padding-top: 3rem; padding-bottom: 3rem; } }

.authors-title{
  color:#1E2A44;            /* deep navy like screenshot */
  font-weight: 800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.authors-subtitle{
  color:#6B7280;            /* muted gray */
  margin:0;
}

/* Card */
.author-card{
  border:1px solid #E6E8F0;
  border-radius: .8rem;
  background:#fff;
  padding:1rem;
}
@media (min-width: 768px){ .author-card{ padding:1.25rem; } }

/* Photo */
.author-photo-wrap{
  border-radius:.8rem;
  overflow:hidden;
  background:#F3F4F6;
  aspect-ratio: 1 / 1;          /* perfect square */
  width:100%;
}
.author-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Text */
.author-name{
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 .25rem;
  color:#111827;
}
.author-role{
  font-weight:700;
  color:#111827;
  margin-bottom:.5rem;
}
.author-bio{
  color:#4B5563;
  font-size:.92rem;
  line-height:1.55;
  margin-bottom:.65rem;
}

/* Social icons */
.author-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:6px;
  background:#E8F0FF;           /* light blue chip bg */
  color:#1E56D9;                /* brand blue */
  margin-right:.4rem;
  text-decoration:none;
}
.author-social a:hover{
  background:#DBE7FF;
  color:#1646B5;
}
.author-social i{ font-size: 14px; line-height: 1; }

/* ==========================================================================
   CHAPTERS (horizontal scroller + cards)
   - Reuse: Works as a generic “carousel without JS”.
   ========================================================================== */

.chapters { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px){ .chapters{ padding-top: 3rem; padding-bottom: 3rem; } }

.chapters-title{
  color:#1E2A44;           /* deep navy like screenshot */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.chapters-subtitle{
  color:#6B7280;           /* muted gray */
  margin:0 0 1rem;
}

/* Horizontal drag/scroller */
.chapters-scroller{
  display:flex;
  gap: .75rem;
  overflow-x:auto;
  padding-bottom:.25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;             /* Firefox */
}
.chapters-scroller::-webkit-scrollbar{ height:6px; }
.chapters-scroller::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:999px; }
.chapters-scroller::-webkit-scrollbar-track{ background:transparent; }

/* Each item snaps into view */
.chapter-slide{
  flex: 0 0 85%;                     /* mobile: big card */
  scroll-snap-align:start;
}
@media (min-width:576px){ .chapter-slide{ flex-basis: 60%; } }
@media (min-width:768px){ .chapter-slide{ flex-basis: 45%; } }   /* ~2 per view */
@media (min-width:1200px){ .chapter-slide{ flex-basis: 30%; } }  /* ~3 per view */

/* Card look */
.chapter-card{
  border:1px solid #E6E8F0;
  border-radius:.9rem;
  background:#fff;
  text-align:center;
  height:100%;
  padding:1.25rem;
}
.chapter-card h3{
  font-size:1.05rem;
  font-weight:800;
  color:#111827;
  margin:0 0 .35rem;
}
.chapter-card .chapter-kicker{
  font-weight:800;
  color:#111827;
}
.chapter-card p{
  color:#4B5563;
  font-size:.93rem;
  line-height:1.55;
  margin:.5rem 0 1rem;
}

/* Button (blue, rounded) */
.chapter-card .btn-chapter{
  background:#1E56D9;
  border:2px solid #1E56D9;
  color:#fff;
  border-radius:.75rem;
  padding:.5rem 1rem;
  font-weight:600;
  text-decoration:none;
}
.chapter-card .btn-chapter:hover{
  background:#1646B5;
  border-color:#1646B5;
  color:#fff;
}

/* Carousel controls — subtle, aligned vertically center */
.chapters-control{
  width: 3rem;
  opacity:.9;
}
.chapters-control:hover{ opacity:1; }

/* Multi-item spacing */
.chapters .col-slide{ padding: .5rem; }  /* gutters inside each slide */

/* ==========================================================================
   CHAPTER Q&A (filters, list, accordion)
   - Reuse: Drop-in for any FAQ/Q&A by swapping data.
   ========================================================================== */

.qa-section{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px){ .qa-section{ padding-top: 3rem; padding-bottom: 3rem; } }

.qa-title{
  color:#1E2A44;               /* deep navy */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.qa-subtitle{ color:#6B7280; margin:0; }

/* Filters */
.qa-label{ font-weight:600; color:#1E293B; }
.qa-dropdown{
  border-radius:.6rem;
  padding:.6rem .8rem;
  color:#111827;
  border-color:#E6E8F0;
}
.qa-dropdown:focus{ box-shadow:none; border-color:#CBD5E1; }

/* Search with icon */
.qa-search{
  border-radius:.6rem;
  padding-right:2.25rem;
  border-color:#E6E8F0;
}
.qa-search:focus{ box-shadow:none; border-color:#CBD5E1; }
.qa-search-icon{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  color:#94A3B8; pointer-events:none;
}

/* Group wrapper (per chapter) */
.qa-group{
  border:1px solid #E6E8F0;
  border-radius:.9rem;
  background:#fff;
}
.qa-group-header{
  font-weight:600;
  color:#1F2937;
  padding: .9rem 1rem .5rem;
}
.qa-group-body{ padding: .25rem 1rem 1rem; }

/* Question pill (details/summary) */
.qa-item{
  border-radius:.75rem;
  background: #F2F4F7; /* soft gray pill like screenshot */
  margin-bottom:.6rem;
  overflow:hidden;
  border:1px solid #EAECF0;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.03);
}
.qa-item summary{
  list-style:none; cursor:pointer;
  padding:.7rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  color:#1F2937; font-weight:600;
}
.qa-item summary::-webkit-details-marker{ display:none; }
.qa-item .qa-chevron{ transition: transform .2s ease; color:#6B7280; }
.qa-item[open] .qa-chevron{ transform: rotate(180deg); }

.qa-answer{
  padding: .2rem 1rem .9rem;
  color:#4B5563;
  font-size:.95rem; line-height:1.55;
}

/* Chips */
.qa-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem;
  border-radius: 9999px;
  border: 2px solid #1E56D9;
  color: #11316F; background:#fff;
  font-weight:600; font-size:.9rem;
}
.qa-chip.active{ background:#E8F0FF; border-color:#1E56D9; color:#1646B5; }
.qa-chip .fa{ font-size:.9rem; }

/* ==========================================================================
   SPEAKING & MEDIA (forms + cards)
   - Reuse: Inputs styled with brand blue outlines.
   ========================================================================== */

.speaking { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px){ .speaking { padding-top: 3rem; padding-bottom: 3rem; } }

.speaking-title{
  color:#1E2A44;            /* deep navy */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.speaking-subtitle{
  color:#6B7280;
  margin:0;
}

.speak-card{
  border:1px solid #E6E8F0;
  border-radius:.9rem;
  background:#fff;
  padding:1rem;
}
@media (min-width: 768px){ .speak-card{ padding:1.25rem; } }

.speak-card-title{
  font-weight:700;
  color:#111827;
  margin:0 0 .75rem;
  font-size:1.05rem;
}

/* List block */
.speak-list{
  margin:0; padding-left:1.2rem;
  color:#1F2937;
}
.speak-list li{ margin:.5rem 0; }

/* Labels + Inputs (blue outline textareas like screenshot) */
.speak-label{
  font-weight:600;
  color:#1E293B;
  margin-bottom:.25rem;
}
.speak-input{
  border:2px solid #1E56D9;
  border-radius:.7rem;
  resize:none;
  padding:.6rem .75rem;
  line-height:1.35;
}
.speak-input:focus{
  border-color:#1646B5;
  box-shadow:none;
}

/* Submit button */
.speak-btn{
  background:#1E56D9;
  border:2px solid #1E56D9;
  color:#fff;
  font-weight:700;
  padding:.6rem 1.1rem;
  border-radius:.7rem;
}
.speak-btn:hover{
  background:#1646B5;
  border-color:#1646B5;
  color:#fff;
}

/* ==========================================================================
   FOOTER (compact bar)
   - Reuse: Neutral dark footer; change only colors if needed.
   ========================================================================== */

.site-footer{
  background: #2f3031;       /* dark grey bar */
  color: #e6e6e6;            /* light text */
  padding: 18px 0 22px;      /* compact like screenshot */
}
.site-footer .footer-copy{
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.site-footer .footer-social{
  display: inline-flex;
  gap: 18px;
}
.site-footer .footer-social a{
  color: #e6e6e6;
  opacity: 0.95;
  text-decoration: none;
  transition: opacity .15s ease;
}
.site-footer .footer-social a:hover{
  opacity: 1;
}
.site-footer .footer-social i{
  font-size: 18px;           /* icon size from screenshot */
  line-height: 1;
  vertical-align: middle;
}

/* ==========================================================================
   Q&A POLISH (enhanced visuals)
   - Reuse: Plug-and-play with your existing Q&A JS.
   ========================================================================== */

#qaChips{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0 .25rem;
  -ms-overflow-style:none; scrollbar-width:none;
}
#qaChips::-webkit-scrollbar{ display:none; }

.qa-chip{
  border:1.5px solid #2f6fed; background:#fff; color:#2f6fed;
  padding:.5rem .875rem; border-radius:9999px; font-weight:600;
  white-space:nowrap; transition:all .15s ease; line-height:1;
}
.qa-chip:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(47,111,237,.12); }
.qa-chip.active{ background:#2f6fed; color:#fff; }

#qaResults .qa-group{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.06);
  overflow:hidden; margin:1rem 0;
}
#qaResults .qa-group-header{
  font-weight:700; padding:.875rem 1rem; border-bottom:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg,#fafbfd,#f5f7fb);
}

.qa-item{ border-bottom:1px dashed rgba(0,0,0,.06); }
.qa-item:last-child{ border-bottom:none; }
.qa-item summary{
  list-style:none; cursor:pointer; outline:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem;
  background:#f7f9fc;
}
.qa-item[open] summary{ background:#eef2ff; }
.qa-item summary::-webkit-details-marker{ display:none; }

.qa-item .qa-chevron{ transition:transform .18s ease; }
.qa-item[open] .qa-chevron{ transform:rotate(180deg); }

.qa-answer{ padding:0 1rem 1rem 1rem; color:#1f2937; line-height:1.6; }

/* Dropdown tidy */
#qaChapterMenu.dropdown-menu{
  max-height:360px; overflow:auto; border-radius:12px; padding:.25rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  min-width: min(560px, 96vw); /* wide, but responsive */
}
#qaChapterMenu .dropdown-item{ padding:.625rem 1rem; }
#qaChapterMenu .dropdown-item:hover{ background:#eef2ff; }

/* Search input spacing (optional) */
#qaSearch{ border-radius:12px; }

/* Card-like details hover */
.qa-item summary:hover{ filter:brightness(0.98); }

/* ==========================================================================
   HERO TWEAKS (chips to text, image as plain)
   - Reuse: Keep CTAs; render hero chips as simple text; no image frame.
   ========================================================================== */

/* 1) Leave primary + outline CTAs as-is (no overrides here) */

/* 2) Make the three chips look like plain text (no border/bg/rounded) */
.hero .hero-chips {
  gap: .25rem 1rem;          /* tighter, natural spacing */
}
.hero .hero-chips .chip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important; /* use body text color */
  font-weight: 500;          /* nice reading weight */
  line-height: 1.5;
}
.hero .hero-chips .chip i {
  display: none !important;  /* text only, hide icons */
}

/* 3) Remove the hero image container’s background/border/shadow */
.hero .hero-cover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
}

/* Ensure the image itself is clean and responsive */
.hero .hero-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important; /* in case an inline bg is set */
}

/* --- Q&A subscription gating (reusable) --- */
.qa-item.gated { position: relative; }
.qa-item.gated .qa-gate-blur {
  filter: blur(3px);
  pointer-events: none;
}
.qa-item.gated .qa-gate-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
}
.qa-gate-card{
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:9999px; padding:.4rem .8rem; box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-weight:600; color:#1f2a44;
}
.qa-gate-card .lock{ font-size: .95rem; }
.qa-gate-card .unlock-btn{
  margin-left:.25rem;
  border:0; border-radius:.6rem; padding:.35rem .6rem;
  background: var(--hero-blue, #1E56D9); color:#fff; font-weight:700;
}
.qa-gate-card .unlock-btn:hover{ background: var(--hero-blue-ink, #1646B5); }

/* Optional: hint the group header is a preview when gated */
.qa-group-header.preview::after{
  content:" (preview)"; color:#6B7280; font-weight:600;
}