/* Salsabeel Academy - "The Reading Room" editorial visual layer.
   Plain CSS, loaded after styles.min.css and accessibility.css. No Tailwind rebuild, no JavaScript.
   Public pages only: everything is scoped to body.reading-room (the admin console does not get it).
   Palette: ivory #F7F4EC, deep teal #174C4B, antique gold #B78A43 (gold-light #DFC188 on dark surfaces). */

:root {
  --rr-ivory: #F7F4EC;
  --rr-paper: #FFFEFA;
  --rr-teal: #174C4B;
  --rr-gold: #B78A43;
  --rr-gold-light: #DFC188;
  --rr-bronze: #76521C;
  --rr-rule: rgba(23, 76, 75, 0.16);
  --rr-rule-gold: rgba(183, 138, 67, 0.55);
  /* Type scale (section titles) and vertical rhythm */
  --rr-title: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
  --rr-section-y: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
  --rr-radius: 0.5rem;
}

/* ============================================================ */
/* 1. Typography                                                 */
/* ============================================================ */
.reading-room #main-content :is(h1, h2).font-serif {
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.reading-room #main-content h1.font-serif {
  line-height: 1.1;
}
.reading-room #main-content p {
  text-wrap: pretty;
}
.reading-room .rr-title {
  font-size: var(--rr-title);
  line-height: 1.15;
  font-weight: 500;
}
.reading-room .rr-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.6rem;
}
.reading-room .rr-eyebrow[class*="text-brand-bronze"] {
  color: var(--rr-bronze);
}

/* ============================================================ */
/* 2. Spacing rhythm (home page sections)                        */
/* ============================================================ */
.reading-room .rr-section {
  padding-top: var(--rr-section-y);
  padding-bottom: var(--rr-section-y);
}
.reading-room .rr-hero {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* ============================================================ */
/* 3. Button levels: primary (teal) / secondary (outlined) /     */
/*    quiet (text link). Wording and targets are unchanged.      */
/* ============================================================ */
.btn-primary,
.btn-secondary,
.btn-quiet {
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border-radius: var(--rr-radius);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}
.btn-primary {
  background-color: var(--rr-teal);
  color: #fff;
  border: 1px solid var(--rr-teal);
}
.btn-primary:hover {
  background-color: #103B3A;
  border-color: #103B3A;
}
.btn-secondary {
  background-color: var(--rr-paper);
  color: var(--rr-teal);
  border: 1px solid rgba(23, 76, 75, 0.35);
}
.btn-secondary:hover {
  background-color: #fff;
  border-color: var(--rr-gold);
}
.btn-quiet {
  background-color: transparent;
  color: var(--rr-teal);
  border: 1px solid transparent;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.btn-quiet:hover {
  background-color: transparent;
  color: var(--rr-teal);
  text-decoration-color: var(--rr-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary,
  .btn-secondary,
  .btn-quiet {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, text-decoration-color 160ms ease;
  }
}

/* ============================================================ */
/* 4. Status badges: one shape and scale; colours stay as they   */
/*    are in styles.min.css (opaque, >= 4.5:1).                  */
/* ============================================================ */
.badge-status-ongoing,
.badge-status-upcoming,
.badge-status-completed,
.badge-status-neutral {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
  border-radius: 0.375rem;
  box-shadow: none;
}

/* ============================================================ */
/* 5. Navigation and mobile drawer                               */
/* ============================================================ */
.reading-room header.sticky {
  background-color: var(--rr-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: rgba(183, 138, 67, 0.3);
}
.reading-room .top-nav-link:hover {
  background-color: transparent;
}
.reading-room .top-nav-link:not(.active):hover::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0.625rem;
  right: 0.625rem;
  height: 2px;
  background-color: rgba(183, 138, 67, 0.55);
  border-radius: 9999px;
}
#mobileDrawerBackdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(4, 39, 44, 0.62);
}
#mobileDrawer h4 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}
#mobileDrawer .mobile-nav-link {
  min-height: 48px;
  border-radius: 0.5rem;
}
#mobileDrawer .mobile-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.07);
}
#mobileDrawer nav > a.mobile-nav-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#mobileDrawer .mobile-nav-link.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid var(--rr-gold) !important;
}
#mobileDrawer .mobile-nav-link.active span {
  color: #fff;
}
/* The built stylesheet has no text-emerald-300, so the Admissions line inherited the dark body colour. */
#mobileDrawer .mobile-nav-link[data-nav="admissions"]:not(.active) {
  color: #6EE7B7;
}

/* ============================================================ */
/* 6. Focus (keyboard) and hover refinements                     */
/* ============================================================ */
.reading-room :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--rr-teal);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(183, 138, 67, 0.3);
}
.reading-room :is(#mobileDrawer, footer, .bg-brand-deep) :where(a, button):focus-visible {
  outline-color: var(--rr-gold-light);
  box-shadow: none;
}
#coursesContainer .course-card h2 a,
#featuredCourses .course-card h3 a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
#coursesContainer .course-card h2 a:hover,
#featuredCourses .course-card h3 a:hover {
  text-decoration-color: var(--rr-gold);
}
@media (prefers-reduced-motion: no-preference) {
  #coursesContainer .course-card h2 a,
  #featuredCourses .course-card h3 a {
    transition: text-decoration-color 160ms ease, color 160ms ease;
  }
}

/* ============================================================ */
/* 7. Home hero: calmer, ruled kicker instead of a pill          */
/* ============================================================ */
.reading-room .hero-kicker {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rr-rule-gold);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0.25rem 0.55rem;
  letter-spacing: 0.16em;
  color: var(--rr-bronze);
}
.reading-room .hero-emblem img {
  height: 5rem;
  width: 5rem;
}
@media (min-width: 640px) {
  .reading-room .hero-emblem img {
    height: 5.75rem;
    width: 5.75rem;
  }
}
.reading-room .rr-hero h1 {
  font-weight: 500;
  letter-spacing: -0.02em;
}
.reading-room .rr-hero p {
  max-width: 38rem;
}
/* Let the three hero buttons sit on one line from tablet width up (labels never wrap). */
.reading-room .rr-hero .btn-primary,
.reading-room .rr-hero .btn-secondary,
.reading-room .rr-hero .btn-quiet {
  white-space: nowrap;
}
.reading-room .rr-hero div.max-w-xl {
  max-width: 48rem;
}

/* ============================================================ */
/* 8. Home hallmarks: gold rule over each column                 */
/* ============================================================ */
.reading-room .rr-hallmarks .grid > div {
  border-top: 2px solid var(--rr-rule-gold);
  padding-top: 1.25rem;
}
@media (min-width: 640px) {
  .reading-room .rr-hallmarks .grid > div {
    border-top-width: 2px;
  }
}
.reading-room .rr-hallmarks p {
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ============================================================ */
/* 9. Course-card metadata (existing fields only)                */
/* ============================================================ */
.course-card .course-card-category-badge {
  color: var(--rr-bronze);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.course-card .course-card-language-badge {
  color: #4B5963;
  font-size: 0.75rem;
}
.course-card .course-card-meta {
  border-top: 1px solid rgba(183, 138, 67, 0.3);
  padding-top: 0.85rem;
  gap: 0.5rem 0.75rem;
}
.course-card .course-card-date,
.course-card .course-card-fee {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.8125rem;
}
.course-card .course-card-date + .course-card-fee {
  border-left: 1px solid var(--rr-rule);
  padding-left: 0.75rem;
}

/* ============================================================ */
/* 10. FAQ as a ruled list                                       */
/* ============================================================ */
#faqAccordion > .faq-item {
  margin-top: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rr-rule);
  border-radius: 0;
  box-shadow: none;
}
#faqAccordion > .faq-item:first-child {
  border-top: 1px solid var(--rr-rule-gold);
}
#faqAccordion .faq-toggle {
  padding: 1.25rem 0.25rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.35;
  gap: 1rem;
}
#faqAccordion .faq-toggle:hover,
#faqAccordion .faq-toggle[aria-expanded="true"] {
  color: var(--rr-teal);
}
#faqAccordion .faq-toggle i {
  color: var(--rr-gold);
  flex-shrink: 0;
}
#faqAccordion .faq-answer-inner > div {
  border-top: 0;
  padding: 0 0.25rem 1.35rem;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ============================================================ */
/* 11. Phone header: logo + hamburger only (<= 639px).           */
/*     Gift, Sign In, Dashboard, avatar and Sign Out stay in the */
/*     existing mobile drawer. Desktop/tablet header unchanged.  */
/* ============================================================ */
.drawer-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem 0.5rem;
}
.drawer-user.hidden {
  display: none;
}
.drawer-user__avatar {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--rr-teal);
  border: 1px solid rgba(183, 138, 67, 0.45);
  color: var(--rr-gold-light);
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.drawer-user__name {
  min-width: 0;
  color: #E5E7EB;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Drawer touch targets (every width the drawer can open at) */
#mobileDrawer :is(a, button) {
  min-height: 44px;
}
#mobileDrawerLoginBtn,
#mobileDrawerAdminBtn,
#mobileDrawerLogoutBtn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#mobileDrawerCloseBtn {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 639.98px) {
  #memberGiftNavBtn,
  #topLoginBtn,
  #topAdminBtn,
  #userProfilePill,
  #topLogoutBtn {
    display: none !important;
  }
  header.sticky > div {
    padding-left: 1rem;
    padding-right: 0.5rem;
  }
  header.sticky > div > a[aria-label="Salsabeel Academy Home"] {
    min-width: 0;
    min-height: 44px;
  }
  #mobileDrawerOpenBtn {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================ */
/* 12. Wide-screen header spacing (>= 1536px).                   */
/*     With six navigation items (Downloads added) and the admin */
/*     controls, the content was wider than the 80rem container, */
/*     so logo, links and buttons touched or overflowed to the   */
/*     right. A slightly wider header box and tighter link       */
/*     padding restore breathing room. Phones/tablets/laptops    */
/*     are not affected (min-width media query).                 */
/* ============================================================ */
@media (min-width: 1536px) {
  header.sticky > div {
    max-width: 90rem;
  }
  header.sticky .top-nav-link {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}