/* 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: #5c4744 !important;
  }
}

.site-wordmark {
  display: inline-block;
  padding: 24px 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #6b1f2a;
}

/* footer.dark-style's background moved from vendor-theme charcoal to a
   near-black wine (#241014, see style.css) — the theme's own muted grays
   for footer text (#8f7773 etc.) were tuned for that lighter charcoal and
   read too low-contrast here, so footer text/link colors are overridden
   explicitly below rather than left to the sed-swapped defaults. */
footer.dark-style p,
footer.dark-style .copyright-line {
  color: #cdb3ac;
}

footer.dark-style .site-footer-disclaimer {
  max-width: 640px;
  margin: 0 auto 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #b89a92;
  border-left: 2px solid #c98a2b;
  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: #b89a92;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

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

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

.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 #6b1f2a;
  color: #6b1f2a;
}

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

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

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

.search-field {
  width: 100%;
  padding: 13px 20px;
  background: #efe9e0;
  color: #5c4744;
  font-size: 14px;
  font-family: "Ubuntu", sans-serif;
  border: 1px solid #e3d6cd;
  outline: none;
}

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

.search-results-count {
  margin: 20px 0;
  color: #8f7773;
  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 #e3d6cd;
}

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

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

.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: #5c4744;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

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

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

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

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

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

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

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

.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: #6b1f2a;
}

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

.disclaimer-bar {
  margin: 30px 0;
  padding: 14px 18px;
  border-left: 3px solid #6b1f2a;
  background: #fdf3f2;
  color: #5c4744;
  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: #2b201d;
  color: #fdf9f5;
  font-family: "Ubuntu", sans-serif;
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 15px;
}

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

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

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

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

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

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

.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: "Ubuntu", sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #5c4744;
  max-width: none;
}

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

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

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

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

.empty-state {
  padding: 20px 0;
  color: #8f7773;
  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: "Ubuntu", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2b201d !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: #6b1f2a !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: #efe9e0;
  border: 1px solid #e3d6cd;
  border-left: 3px solid #6b1f2a;
}

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

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

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

/* 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: #fdf9f5;
  border: 1px solid #e3d6cd;
  border-left: 3px solid #e3d6cd;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================================
   Romantic-editorial structural pass — the color/font swap alone left every
   card, the hero, and the header reading as the stock Mite template with
   new colors. These rules change actual shape: rounded/shadowed imagery,
   pill-badge category labels (scoped to card/hero contexts only — a.text-
   link is reused unstyled for the plain "view all" link in
   .category-line-section .title-section, which already has its own rule
   above and must stay a plain underlined link, not a pill), a masthead
   header, an ornamental section-title rule, and a footer flourish.
   ========================================================================= */

/* Post cards (PostCard.tsx: .news-post.article-post) --------------------
   Breathing room pass: the grid's default Bootstrap gutter plus this
   card's original tight rhythm (10-12px between every element) read as
   cramped once real content filled it in. Widens the column gutter,
   gives cards a bottom margin so multi-row grids don't collide, and
   opens up the vertical spacing between image/tag/title/meta/excerpt. */

section.category-line-section .category-line-box .row {
  margin-left: -20px;
  margin-right: -20px;
}

section.category-line-section .category-line-box .row > [class*="col-"] {
  padding-left: 20px;
  padding-right: 20px;
}

.news-post.article-post {
  margin-bottom: 40px;
}

.news-post.article-post .image-holder {
  border-radius: 14px;
  box-shadow: 0 10px 28px -16px rgba(43, 32, 29, 0.45);
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.news-post.article-post .image-holder img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.news-post.article-post:hover .image-holder {
  box-shadow: 0 16px 34px -14px rgba(107, 31, 42, 0.4);
  transform: translateY(-4px);
}

.news-post.article-post > a.text-link {
  display: inline-block;
  margin-top: 22px;
  padding: 4px 12px;
  background: #f6e6e3;
  color: #6b1f2a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 200ms ease, color 200ms ease;
}

.news-post.article-post > a.text-link:hover {
  background: #6b1f2a;
  color: #fdf9f5;
}

.news-post.article-post h2 {
  margin-top: 14px;
  font-size: 21px;
  line-height: 1.4;
}

.news-post.article-post ul.post-tags {
  margin-top: 10px;
}

.news-post.article-post p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e3d6cd;
  line-height: 1.65;
}

/* Hero (page.tsx Hero(): .top-slider-section) ---------------------------- */

.top-slider-section .image-post {
  border-radius: 20px;
}

.top-slider-section .hover-post a.category-link {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(253, 249, 245, 0.16);
  border: 1px solid rgba(253, 249, 245, 0.4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-slider-section .hover-post h2 {
  margin-top: 12px;
  font-size: 30px;
  line-height: 1.25;
}

.top-slider-section .hover-post p {
  color: #f0e2df;
  max-width: 60ch;
}

.top-list-posts > h2 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e3d6cd;
}

ul.list-thumb-posts > li .image-holder {
  border-radius: 10px;
  overflow: hidden;
}

/* Header masthead --------------------------------------------------------- */

header {
  background: #fdf9f5 !important;
  border-top: 3px solid #6b1f2a;
  border-bottom: 1px solid #e3d6cd;
}

/* Section titles (homepage cluster rows: .category-line-section) -------- */

.category-line-section .title-section h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.category-line-section .title-section h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: #c98a2b;
}

/* Category cards (homepage "Explore por gênero") ------------------------ */

.category-card {
  border-radius: 10px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(43, 32, 29, 0.4);
}

/* Footer flourish ---------------------------------------------------------
   A short gold rule between the wordmark and the copyright line, echoing
   the header's masthead rule and the icon's gold accent dot. */

footer.dark-style h1 {
  font-size: 32px;
  margin-bottom: 4px;
}

footer.dark-style .copyright-line {
  position: relative;
  padding-top: 22px;
}

footer.dark-style .copyright-line::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  margin: 0 auto 20px;
  background: #c98a2b;
}

/* About page heading hierarchy --------------------------------------------
   section.page-banner-section h1 and .about-post h2 both fell back to the
   vendor theme's unscoped h1/h2 rules, which land at the same 24px — the
   page title and every stacked subsection heading below it read as the
   same size, no hierarchy at all. Bumps the page h1 up and gives the
   section headings their own smaller, bolder treatment. */
section.page-banner-section h1 {
  font-size: 32px;
  line-height: 1.25;
}

section.about-section .about-post h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}

/* Cover images — kill the vendor theme's rotate+scale hover animation
   (the "imagemove" keyframe, triggered on .image-post, .standard-post,
   .article-post and .article-post2 image-holders). The lift+shadow hover
   added above on .news-post.article-post already gives cover images
   feedback on hover; the spin/zoom read as dated rather than editorial. */
.image-post:hover img,
.standard-post .image-holder:hover img,
.article-post .image-holder:hover img,
.article-post2 .image-holder:hover img {
  animation: none;
}