/* Additions on top of the Mite theme for real site content the template
   didn't ship a pattern for: brand wordmark, footer legal row, editorial
   stamp bar, clinician avatar, FAQ accordion, empty states. */

/* Mobile nav polish ---------------------------------------------------------
   style.css's own @media(max-width:991px) block caps .navbar-nav at
   max-height:300px with overflow-y:scroll — with 6 clusters + About +
   Contact, that pushed the last couple of links into a cramped internal
   scroll area (easy to miss entirely; the thin scrollbar reads as a stray
   UI glitch, not "there's more below"). Dropping the cap lets the whole
   list lay out in the page's normal scroll instead of a nested one, and
   the divider/spacing rules below give each link some visual separation
   now that single-category clusters render as one flat link (see
   app/(site)/layout.tsx) instead of a link plus a redundant one-item
   submenu repeating the same name. */
/* style.css ships an unscoped `.navbar-nav.active > li > a { opacity: 0;
   visibility: hidden; }` rule, presumably for some other header variant's
   JS-driven reveal animation. Something (Bootstrap's collapse toggle
   itself appears to add .active here, not just .show) was setting that
   class on our menu on open, making every link invisible while the
   collapsed box's border/padding still rendered — exactly the "opens to a
   blank box" symptom. Force links visible regardless of that class. */
header .navbar-nav.active > li > a,
header .navbar-nav > li > a {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 991px) {
  .navbar-nav {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 8px 15px !important;
  }

  .navbar-nav > li {
    border-bottom: 1px solid #f0f0f0;
  }

  .navbar-nav > li:last-child {
    border-bottom: none;
  }

  .navbar-nav > li > a {
    padding: 14px 0 !important;
    font-size: 14px !important;
  }

  .navbar-nav li.drop-link > a i.fa-angle-down {
    float: right;
    padding-top: 2px;
  }

  .navbar-nav .dropdown {
    padding: 0 0 10px 15px !important;
  }

  .navbar-nav .dropdown li a {
    font-size: 13px;
    color: #666666 !important;
  }
}

.site-wordmark {
  display: inline-block;
  padding: 24px 0;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #333333;
}

footer.dark-style .site-footer-disclaimer {
  max-width: 640px;
  margin: 0 auto 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #888888;
  border-left: 2px solid #e74c3c;
  padding-left: 12px;
  text-align: left;
}

ul.site-footer-legal {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

ul.site-footer-legal li {
  display: inline-block;
  margin: 0 10px;
}

ul.site-footer-legal a {
  color: #999999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

ul.site-footer-legal a:hover {
  color: #e74c3c;
}

#contact-form input[type="email"] {
  width: 100%;
  padding: 13px 20px;
  background: #fafafa;
  color: #999999;
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  outline: none;
  border: 1px solid #e1e1e1;
  margin: 0 0 30px;
}

#contact-form input[type="email"]:focus {
  border: 1px solid #e74c3c;
}

.form-status {
  padding: 12px 20px;
  margin-top: 30px;
  font-size: 13px;
}

.form-status--ok {
  border: 1px solid #5cb85c;
  color: #3c763d;
}

.form-status--error {
  border: 1px solid #e74c3c;
  color: #e74c3c;
}

.legal-page {
  padding: 50px 0;
}

.legal-page .legal-meta {
  color: #999999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: -10px;
}

.legal-page .legal-note {
  border-left: 3px solid #c98a2b;
  background: #fafafa;
  padding: 12px 16px;
  color: #666666;
  font-size: 13px;
}

.search-field {
  width: 100%;
  padding: 13px 20px;
  background: #fafafa;
  color: #666666;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  border: 1px solid #e1e1e1;
  outline: none;
}

.search-field:focus {
  border-color: #e74c3c;
}

.search-results-count {
  margin: 20px 0;
  color: #999999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results-list li {
  padding: 20px 0;
  border-bottom: 1px solid #ebebeb;
}

.search-results-list h2 {
  margin: 6px 0 8px;
}

.article-toc-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #ebebeb;
}

.article-toc-widget li {
  margin: 0;
}

.article-toc-widget li.toc-sub a {
  padding-left: 28px;
}

.article-toc-widget a {
  display: block;
  padding: 8px 0 8px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #666666;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-toc-widget a:hover {
  color: #333333;
}

.article-toc-widget a.active {
  border-left-color: #e74c3c;
  color: #e74c3c;
}

.post-subtitle {
  font-size: 17px;
  color: #999999;
  margin-top: -10px;
}

/* Editorial / clinical review stamp ------------------------------------ */

.editorial-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1px solid #ebebeb;
  background: #fafafa;
  margin: 20px 0;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666666;
}

.editorial-stamp span {
  padding: 10px 16px;
  border-left: 1px solid #ebebeb;
}

.editorial-stamp span:first-child {
  border-left: none;
}

.editorial-stamp.editorial-stamp--compact {
  border: none;
  background: none;
  padding-left: 10px;
  border-left: 3px solid #999999;
}

.editorial-stamp.editorial-stamp--compact span {
  border-left: none;
  padding: 2px 10px 2px 0;
}

.editorial-stamp--body-and-health {
  border-left-color: #5cb85c;
}

.editorial-stamp--cycle-and-motherhood,
.editorial-stamp--mind-and-mood {
  border-left-color: #e74c3c;
}

/* Disclaimer bar --------------------------------------------------------- */

.disclaimer-bar {
  margin: 30px 0;
  padding: 14px 18px;
  border-left: 3px solid #e74c3c;
  background: #fdf3f2;
  color: #666666;
  font-size: 13px;
  line-height: 1.7;
}

/* Clinician avatar placeholder ------------------------------------------- */

.avatar-initials {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 15px;
}

/* FAQ accordion ----------------------------------------------------------- */

.faq-list {
  border-top: 1px solid #ebebeb;
  margin: 20px 0;
}

.faq-list details {
  border-bottom: 1px solid #ebebeb;
  padding: 14px 0;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #333333;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  float: right;
  color: #e74c3c;
}

.faq-list details[open] summary::after {
  content: "\2212";
}

.faq-list p {
  margin: 10px 0 0;
}

/* Article body (MDX) — match the theme's reading type instead of the
   editorial-serif tokens globals.css sets up for the admin panel. */

#mite-container .article-body {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #666666;
  max-width: none;
}

#mite-container .article-body h2,
#mite-container .article-body h3 {
  font-family: "Roboto", sans-serif;
  color: #333333;
}

#mite-container .article-body a {
  color: #e74c3c;
}

#mite-container .article-body li::marker {
  color: #e74c3c;
}

/* Empty state -------------------------------------------------------------- */

.empty-state {
  padding: 20px 0;
  color: #999999;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Header Navbar Category Navigation --------------------------------------
   Scoped to >=992px (Bootstrap's lg breakpoint, matching navbar-expand-lg
   in the markup) — these rules force the nav row open and hover-driven,
   which is a desktop pattern. Applying them unscoped previously broke the
   native Bootstrap collapse/toggle behavior on mobile: the menu rendered
   permanently expanded (every cluster and its dropdown sub-items inline),
   pushing all page content below the fold. Below 992px, the theme's own
   navbar-toggler/collapse JS and CSS are left untouched. */
@media (min-width: 992px) {
  header .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  header .navbar-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-grow: 1 !important;
    justify-content: center !important;
  }

  header .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
  }

  header .navbar-nav > li {
    display: inline-block !important;
    position: relative !important;
    margin: 0 4px !important;
  }

  header .navbar-nav > li > a {
    display: block !important;
    padding: 20px 8px !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
  }

  header .navbar-nav > li > a:hover {
    color: #e74c3c !important;
  }

  header .navbar-nav li.drop-link:hover > .dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 100% !important;
  }
}

/* Contact page info cards -------------------------------------------------- */

.contact-info-box {
  padding: 20px 22px;
  margin-bottom: 20px;
  background-color: #fafafa;
  border: 1px solid #ebebeb;
  border-left: 3px solid #e74c3c;
}

.contact-info-box h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  margin-bottom: 8px;
}

.contact-info-box p {
  font-size: 14px;
  color: #666666;
  margin-bottom: 0;
}

.contact-info-box a {
  color: #e74c3c;
}

/* Browse-by-category cards ------------------------------------------------ */

.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .category-cards {
    grid-template-columns: 1fr;
  }
}

.category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  border-left: 3px solid #e1e1e1;
}

.category-card:hover {
  border-left-color: #e74c3c;
}

.category-card-name {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #333333;
}

.category-card:hover .category-card-name {
  color: #e74c3c;
}

.category-card-count {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #999999;
  white-space: nowrap;
}

/* Sources section styling ------------------------------------------------ */
.sources-box {
  margin: 40px 0 20px;
  padding: 24px;
  background: #fcfcfc;
  border: 1px solid #ebebeb;
  border-left: 3px solid #333333;
}

.sources-box h2 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  margin-bottom: 16px;
}

.sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sources-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #e1e1e1;
}

.sources-list li:last-child {
  border-bottom: none;
}

.source-link {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 1.5;
  text-decoration: none;
}

.source-link:hover {
  color: #e74c3c;
  text-decoration: underline !important;
}

.source-meta {
  display: block;
  font-size: 12px;
  color: #888888;
  margin-top: 4px;
}