/*
 Theme Name:   Hello Elementor Child
 Description:  Child theme for the Hello Elementor theme
 Author:       MindWorks Marketing
 Template:     hello-elementor
 Text Domain:  hello-elementor-child
*/

/* =========================================================
   Elementor off-canvas 
   ========================================================= */
div.e-off-canvas__main div.e-off-canvas__content a.elementor-sub-item {
  font-size: 18px !important;
  margin-left: 10px;
  padding: 10px !important;
}

/***************************************************************************************************/
/********************************************* MENU ************************************************/
/***************************************************************************************************/
/* =========================================================
   MW Menu – base layout and top-level items
   ========================================================= */

/* Shortcode wrapper */
.mw-nav__container { position: relative; }

/* Horizontal top level */
.mw-nav{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:2.2rem;
  align-items:center;
  white-space:nowrap;
}

/* Top-level list items anchor dropdown positioning */
.mw-nav > li { position:relative; }

/* Top-level links (About, Resources, etc.) */
.mw-nav > li > a.mw-nav__link{
  display:inline-block;
  padding:.8rem 0;
  text-decoration:none;
  font-weight:500;
  line-height:1.2;
  font-family:'Poppins',sans-serif;
  font-size:18px;
  color:#fff !important;
  transition:color .2s ease;
}
/* Keep headings white on hover over dark headers */
.mw-nav > li > a.mw-nav__link:hover{ color:#fff !important; }


/* =========================================================
   Standard dropdowns (vertical lists)
   Flicker-free: do NOT animate opacity; animate transform only
   ========================================================= */

/* Dropdown panel (hidden by default) */
.mw-nav .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:16rem;
  margin:0;
  padding:.6rem 0 .4rem;
  list-style:none;

  /* visual styling */
  background: rgba(255,255,255,.88);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* interaction */
  visibility:hidden;         /* instant hide/show */
  pointer-events:none;
  transform:translateY(10px);/* slide only; no fade */
  transition:transform .18s ease;

  /* compositing hints to stop “bleed through” while painting */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  isolation: isolate;
  contain: paint;

  z-index:1000;
  overflow:hidden;
}

/* Links inside dropdowns */
.mw-nav .sub-menu li a{
  display:block;
  padding:.6rem 1rem;
  text-decoration:none;
  font-size:15px;
  line-height:1.3;
  font-family:'Poppins',sans-serif;
  color:#000;
  transition: background .18s ease, color .18s ease;
}

.mw-nav .sub-menu li a:hover{
  background:#f4f4f4;
  color:#aa2e3b;
}

/* Reveal (desktop pointers only) – make visible and slide up */
@media (hover:hover) and (pointer:fine){
  .mw-nav > li:hover > .sub-menu,
  .mw-nav li:focus-within > .sub-menu{
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}


/* =========================================================
   Mega menu support (kept, also flicker-free)
   ========================================================= */

/* Let mega panel anchor to the <li> that owns it */
.mw-nav > li.is-mega { position:relative; }

/* Mega panel wrapper (hidden by default) */
.mw-nav > li.is-mega > .mw-mega{
  position:absolute;
  top:100%;
  left:0;
  right:auto;                 /* do not stretch full width */
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:transform .2s ease;

  /* same composite hints */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  isolation: isolate;
  contain: paint;

  z-index:1000;
}

/* Show mega on hover/focus */
@media (hover:hover) and (pointer:fine){
  .mw-nav > li.is-mega:hover > .mw-mega,
  .mw-nav > li.is-mega:focus-within > .mw-mega{
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}

/* Mega inner “glass” box */
.mw-mega__inner{
  margin:0;
  max-width:none;
  width:auto;                 /* shrink to content */
  background: rgba(255,255,255,.88);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  padding:16px 20px;
  box-sizing:border-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Flexible columns inside mega (content-driven) */
.mw-mega__cols{
  display:flex;
  flex-wrap:wrap;
  gap:16px 32px;
  margin:0;
  padding:0;
  list-style:none;
}
.mw-mega__col{
  list-style:none;
  min-width:100px;
  padding:4px 6px;
}

/* Column heading link */
.mw-mega__heading a{
  display:inline-block;
  margin:0 0 6px 0;
  font-weight:600;
  font-size:.95rem;
  color:#000;
  text-decoration:none;
  font-family:'Poppins',sans-serif;

  /* pill-ready */
  padding:6px 14px;
  border-radius:999px;
  transition: background .2s ease, color .2s ease;
}

/* Pill hover on headings */
.mw-mega__heading a:hover{
  background:#31686B;   /* your chosen green */
  color:#fff !important;
}

/* Level-3 links inside columns */
.mw-mega__col > ul{ margin:0; padding:0; list-style:none; }
.mw-mega__col > ul > li > a{
  display:inline-block;
  padding:6px 10px;
  text-decoration:none;
  font-size:.95rem;
  line-height:1.25;
  color:#000;
  border-radius:6px;
}
.mw-mega__col > ul > li > a:hover{
  color:#aa2e3b;
  background:rgba(0,0,0,.04);
}

/* Force pill corners on hover, focus and active (standard dropdown links) */
.mw-nav .sub-menu li > a,
.mw-nav .sub-menu li > a:hover,
.mw-nav .sub-menu li > a:focus,
.mw-nav .sub-menu li > a:active {
  border-radius: 999px !important;
  background-clip: padding-box;      /* stops iOS from “squaring” when painting */
  -webkit-tap-highlight-color: transparent;
}

/* Same for mega menu column links */
.mw-mega__col > ul > li > a,
.mw-mega__col > ul > li > a:hover,
.mw-mega__col > ul > li > a:focus,
.mw-mega__col > ul > li > a:active {
  border-radius: 999px !important;
  background-clip: padding-box;
}

/* And for mega column headings */
.mw-mega__heading > a,
.mw-mega__heading > a:hover,
.mw-mega__heading > a:focus,
.mw-mega__heading > a:active {
  border-radius: 999px !important;
  background-clip: padding-box;
}

/* =========================================================
   Accessibility
   ========================================================= */
.mw-nav a:focus{
  outline:none;
/*   box-shadow:0 0 0 2px rgba(0,0,0,.08); */
  border-radius:6px;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width:1200px){ .mw-mega__col{ min-width:140px; } }
@media (max-width:1024px){ .mw-mega__col{ min-width:130px; } }


/***************************************************************************************************/
/******************************************* MENU END **********************************************/
/***************************************************************************************************/


/***************************************************************************************************/
/**************************************** NEWS ITEM START ******************************************/
/***************************************************************************************************/


.type-post {
	margin-bottom: 80px;
}

.type-post h1 {
	font-family: 'Poppins' !important;
	font-size: 3rem;
	font-weight: 700 !important;
	padding: 40px 0px 5px 0px;
    line-height: 3rem;	
	color: #31686B;
	margin-top: 40px;
}

.type-post p {
	font-family: 'Poppins';
	font-size: 18.5px;
	padding: 0px 0px;
line-height: 30px;	
	color: #2F4454;
}

.type-post a {
	font-weight: 600 !important;
	text-decoration: none !important;
}

.type-post a:hover {
	text-decoration: underline !important;
}


/* Post Meta Data */
.type-post .post-meta {
	display: inline-block;   /* key change */
font-size: 0.9rem;
	color: #2F4454;
	border: 2px solid #B7D6D9;
	border-radius: 25px;
	padding: 2px 15px;
	width: auto;
margin-bottom: 40px;
		background-color: #fff !important;
}

.type-post span.post-meta-pipe {
	color: #AA2E3B;
	font-weight: 500;
	font-size: 0.9rem;
	margin: 0 10px;
}


/* Post Tags */
.type-post .post-tags a {
		display: inline-block;   /* key change */
font-size: 0.9rem;
	color: #2F4454;
	background-color: #B7D6D9;
	border-radius: 25px;
	padding: 6px 15px;
	width: auto;
	margin: 40px 0 0 0;
}

.type-post .post-tags a:hover {
	text-decoration: none !important;
}

/* General pullquote styling */
.wp-block-pullquote {
    text-align: center;
    margin: 3rem auto;
    max-width: 800px;
    border: none;     /* strip default WP borders */
    padding: 0;
}

/* The pullquote text */
.wp-block-pullquote blockquote p {
    font-family: 'Poppins', serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #31686B;
    position: relative;
	font-style: italic;
}

.wp-block-pullquote blockquote p::before {
    content: "“";
    margin-right: 0.25em;
    color: #a02020;
}

.wp-block-pullquote blockquote p::after {
    content: "”";      /* closing quote */
    margin-left: 0.25em;
	color: #a02020;
}

/* Decorative bar above pullquotes */
.wp-block-pullquote blockquote::before {
    content: "";
    display: block;
    width: 60px;
    height: 6px;
    background: #AA2E3B;   /* adjust colour */
    margin: 0 auto 1.5rem auto;
    border-radius: 3px;
}

/* The attribution */
.wp-block-pullquote cite {
	font-family: 'Poppins', serif;
    display: block;
    margin-top: 1.5rem;
    font-size: 1.65rem;
    font-weight: 400;
    font-style: normal;
    color: #31686B;
	font-weight: 700;
}

.wp-block-pullquote cite::before {
    content: "— ";   /* em dash followed by a space */
	color: #a02020;
}



/* Images */
.type-post img {
border-radius: 25px;
width: 100%;
	margin: 0;
	padding: 0;
}

.type-post figure.left {
    float: left;
    width: 40%;       /* adjust this percentage as you like */
    margin: 0 20px 10px 0;
}

.type-post figure.right {
    float: right;
    width: 40%;
    margin: 0 0 20px 20px;
}

.type-post figure.left img,
.type-post figure.right img {
    width: 100%;
    height: auto;
    border-radius: 25px;
}

/* Reset floats on smaller screens */
@media (max-width: 768px) {
    .type-post figure.left,
    .type-post figure.right {
        float: none;
        width: 100%;
        margin: 20px 0;   /* even spacing above and below */
    }
}