/* UI fixes for the static moksha.in, loaded last on every page (tools/postprocess.py ui_fixes()).
   These issues already existed on the WordPress site; found in the screenshot review of 26 Oct 2026 (tools/shoot.py). */

/* 1. Header: pages that don't put the content behind the header (services, blog posts, pressroom, archives) showed a
      white bar, and the white logo and menu icon on it were invisible. Make it the black bar the other pages show. */
.edgtf-page-header .edgtf-menu-area,
.edgtf-page-header .edgtf-sticky-header .edgtf-sticky-holder { background-color: #000 !important; }

/* 2. Footer copyright line: 7px on phones, and "2025" wrapped onto its own line. */
@media (max-width: 1024px) {
  .edgtf-footer-bottom-holder .mekona.desk-p { font-size: 12px !important; line-height: 1.5 !important; white-space: nowrap; }
}

/* 3. Blog / archive lists on phones: post titles were 56px, so words broke in the middle ("PSYCHOLO-GY"). */
@media (max-width: 767px) {
  .edgtf-blog-holder .edgtf-post-title,
  .edgtf-blog-holder .edgtf-post-title a { font-size: 28px !important; line-height: 1.15 !important; overflow-wrap: normal; word-break: normal; hyphens: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .edgtf-blog-holder .edgtf-post-title,
  .edgtf-blog-holder .edgtf-post-title a { font-size: 40px !important; line-height: 1.1 !important; }
}

/* 4. Blog posts: the "Previous Blog" / "Next Blog" labels are CSS text on a Font Awesome icon, so the words fell back to
      a serif font. Keep the icon font for the arrow, use the site font for the words. */
html .navigation-sec .post-navigation__arrow-wrapper .fa,
html .navigation-sec-mobile .post-navigation__arrow-wrapper .fa {
  font-family: "Font Awesome 5 Free", "Mekona", sans-serif !important; font-weight: 900; letter-spacing: .02em;
}

/* 5. /real-world-success-stories/: an empty portfolio list showed "Sorry, no posts matched your criteria." */
.edgtf-pl-not-found { display: none !important; }

/* 6. /biometrics/: the hero slider had a fixed 607px width on phones (Elementor setting), so it started off-screen,
   and its row had a 242px left margin. */
@media (max-width: 767px) {
  .elementor-21651 .elementor-element.elementor-element-33aa694 { width: 100% !important; max-width: 100% !important; --container-widget-width: 100% !important; }
  .elementor-21651 .elementor-element.elementor-element-d67be08 > .elementor-container { margin-left: 0 !important; width: 100% !important; }
}

/* 7. Blog posts: the hero heading (Elementor element a4009d4, reused across posts) has a -150px left margin, an overlap
      effect on desktop; on tablets and phones it was cut off at the left edge. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-a4009d4 > .elementor-widget-container { margin-left: 0 !important; }
}

/* 8. Blog posts: the Prev/Next post links sit in a <table> that grew to fit the long post titles (1087px on a tablet). */
#footer-post-navigation > table { table-layout: fixed; width: 100%; }