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;
  }
}


/* ==========================================================================
   MINDFIELDS: HEADINGS ON MOBILE (REQ-005)
   --------------------------------------------------------------------------
   What this does
   The theme's mobile stylesheet turns on automatic hyphenation for all
   headings below 480px, which splits words mid-way ("au-tomation",
   "re-search-enabled"). The rules below switch it off, so headings only
   wrap at spaces and whole words move to the next line.

   overflow-wrap: break-word is a safety net only. It breaks a word (without
   a hyphen) when that single word is wider than the whole container, so the
   page never scrolls sideways on very small phones.

   "body" is added in front of the selectors so these rules win over the
   theme's own h1-h6 rule.
   ========================================================================== */

@media (max-width: 479px) {
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   MINDFIELDS: HOME HERO TITLE (REQ-011)
   --------------------------------------------------------------------------
   The first hero slide title is now an H1 (for SEO) instead of an H2.
   The theme gives H1 a different letter spacing from H2, so this keeps the
   H1 looking exactly like the other slide titles. Everything else (size,
   weight, line height, margins) was already identical.
   ========================================================================== */
h1.mfh__title {
  letter-spacing: var(--theme-font-h2_letter-spacing);
}

/* REQ-013: NSW logo files have extra empty space – enlarge them to match the other client logos */
.mf-logos__slot img[src*="nsw-customer-service"] { scale: 1.75; }
.mf-logos__slot img[src*="department-of-planning-housing"] { scale: 1.8; }

/* Hero slider: same entrance animation, but with transform instead of top/left, so it doesn't count as layout shift (CLS) */
.mfh__tag, .mfh__title { transition: transform 0.8s, opacity 0.8s; }
.mfh__carousel.slick-initialized .mfh__tag,
.mfh__carousel.slick-initialized .mfh__title { top: 0; transform: translateY(1.25rem); }
.mfh--ready .slick-slide.slick-active .mfh__tag,
.mfh--ready .slick-slide.slick-active .mfh__title { transform: none; }
.mfh__cta { transition: transform 0.5s 0.6s, opacity 0.5s 0.6s, background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.mfh__carousel.slick-initialized .mfh__cta { left: 0; transform: translateX(-10%); }
.mfh--ready .slick-slide.slick-active .mfh__cta { transform: none; }