body.single-post .page_content_wrap {
  padding-bottom: 0;
}

body.single-post.header_position_over .page_content_wrap {
  padding-top: 0;
}

/* ==========================================================================
   MINDFIELDS: STICKY HEADER STYLES
   --------------------------------------------------------------------------
   What this does
   The header is made sticky by Elementor Pro (not by this CSS). When the
   visitor scrolls past the "Effects Offset", Elementor adds the class
   .elementor-sticky--effects to the header. The rules below use that class
   to switch the header to a solid white style: white background, dark menu
   links, outlined blue button, smaller colour logo and black burger icon.

   Required Elementor settings (on BOTH the Desktop Header and the Mobile
   Header containers, in Theme Builder > Header):
   - Advanced > CSS Classes: header-principal
   - Advanced > Motion Effects > Sticky: Top
   - Sticky On: only the devices where that header is visible
   - Effects Offset: scroll distance (px) before the sticky style kicks in
   Leave the theme's own "Sticky section" option OFF to avoid conflicts.

   Brand colours used
   #00729e  Mindfields blue (header button)
   #FD780F  Mindfields orange (menu hover / current page)
   #000000  Menu links and burger icon on the white sticky background

   Where this CSS lives: Elementor > Site Settings > Custom CSS
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Smooth transitions between the normal and the sticky state
   -------------------------------------------------------------------------- */
.header-principal {
  transition: background-color .3s ease,
              padding .3s ease,
              box-shadow .3s ease;
}

.header-principal .trx-addons-menu-link,
.header-principal .trx-addons-menu-link-text,
.header-principal .elementor-button,
.header-principal .elementor-button-text {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}


/* --------------------------------------------------------------------------
   2. Logo size in the normal (non-sticky) header
   Several selectors are listed because the logo can be output by the
   Elementor Site Logo widget, an Image widget or the ThemeREX logo widget.
   -------------------------------------------------------------------------- */
.header-principal .elementor-widget-theme-site-logo img,
.header-principal .elementor-widget-image img,
.header-principal .elementor-widget-trx_sc_layouts_logo img,
.header-principal .sc_layouts_logo img,
.header-principal .trx-addons-logo img {
  max-height: 52px;
  transition: max-height .3s ease;
}


/* --------------------------------------------------------------------------
   3. Sticky state: white background, subtle border and shadow, less padding
   Adjust padding-top / padding-bottom to make the sticky bar taller or
   slimmer.
   -------------------------------------------------------------------------- */
.header-principal.elementor-sticky--effects {
  background-color: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(6, 42, 60, .08);
  box-shadow: 0 2px 16px rgba(6, 42, 60, .08);
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}


/* --------------------------------------------------------------------------
   4. Sticky state: menu link colours (DESKTOP ONLY)
   Limited to desktop on purpose: on mobile the menu opens in a dark
   full-screen panel, where black links would be unreadable.
   1025px matches Elementor's default desktop breakpoint.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .header-principal.elementor-sticky--effects .trx-addons-menu-link,
  .header-principal.elementor-sticky--effects .trx-addons-menu-link-text {
    color: #000000 !important;
  }

  /* Hover and current page */
  .header-principal.elementor-sticky--effects .trx-addons-menu-link:hover,
  .header-principal.elementor-sticky--effects .trx-addons-menu-link:hover .trx-addons-menu-link-text,
  .header-principal.elementor-sticky--effects .current-menu-item > .trx-addons-menu-link,
  .header-principal.elementor-sticky--effects .current-menu-item > .trx-addons-menu-link .trx-addons-menu-link-text {
    color: #FD780F !important;
  }
}


/* --------------------------------------------------------------------------
   5. Sticky state: header button ("Contact us") becomes an outlined blue
   button, filled blue on hover
   -------------------------------------------------------------------------- */
.header-principal.elementor-sticky--effects .elementor-button,
.header-principal.elementor-sticky--effects .elementor-button-text {
  color: #00729e !important;
}

.header-principal.elementor-sticky--effects .elementor-button {
  border-color: #00729e !important;
  background-color: transparent !important;
  padding-top: 9px !important;      /* slimmer button in the sticky bar */
  padding-bottom: 9px !important;
}

.header-principal.elementor-sticky--effects .elementor-button:hover,
.header-principal.elementor-sticky--effects .elementor-button:hover .elementor-button-text {
  color: #ffffff !important;
}

.header-principal.elementor-sticky--effects .elementor-button:hover {
  background-color: #00729e !important;
  border-color: #00729e !important;
}


/* --------------------------------------------------------------------------
   6. Sticky state: swap to the colour logo and make it smaller
   The normal logo is white (for dark hero images), so it is replaced by the
   colour version on the white sticky background.
   To change the logo, replace the URL below with the new file from the
   Media Library.
   -------------------------------------------------------------------------- */
.header-principal.elementor-sticky--effects .elementor-widget-theme-site-logo img,
.header-principal.elementor-sticky--effects .elementor-widget-image img,
.header-principal.elementor-sticky--effects .elementor-widget-trx_sc_layouts_logo img,
.header-principal.elementor-sticky--effects .sc_layouts_logo img,
.header-principal.elementor-sticky--effects .trx-addons-logo img {
  content: url("https://mindfieldsglobal.com/wp-content/uploads/2025/05/210724-Mindfields-Branding.png");
  max-height: 32px;
}


/* --------------------------------------------------------------------------
   7. Sticky state: burger (mobile menu) icon in black
   The burger is the ThemeREX (TRX Addons) menu widget. Its icon colour is
   set on the SVG path by the widget, so the rule targets the path directly.
   Only the burger icon (.trx-addons-toggle-text) is changed; the opened
   mobile menu panel is not affected.
   -------------------------------------------------------------------------- */
.header-principal.elementor-sticky--effects .trx-addons-hamburger-toggle .trx-addons-toggle-text svg path,
.header-principal.elementor-sticky--effects .trx-addons-hamburger-toggle .trx-addons-toggle-text i {
  fill: #000000 !important;
  color: #000000 !important;
}


/* --------------------------------------------------------------------------
   8. Mobile (up to 767px): tighter sticky header and smaller logo
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header-principal.elementor-sticky--effects {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    box-shadow: 0 1px 10px rgba(6, 42, 60, .07);
  }

  .header-principal.elementor-sticky--effects .elementor-widget-theme-site-logo img,
  .header-principal.elementor-sticky--effects .elementor-widget-image img,
  .header-principal.elementor-sticky--effects .elementor-widget-trx_sc_layouts_logo img,
  .header-principal.elementor-sticky--effects .sc_layouts_logo img,
  .header-principal.elementor-sticky--effects .trx-addons-logo img {
    max-height: 26px;
  }
}