/* =======================================================
   SEARCH: Results panel (desktop, under the input)
   ======================================================= */
#search_result {
  position: absolute;
  left: 9px;
  width: 884px;
  z-index: 1080;
  top: 54px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  max-width: calc(100vw - 32px);
}
#search_result .card { background: transparent; border: 0; box-shadow: none; }

/* =======================================================
   SEARCH: Suggestions dropdown under the input
   ======================================================= */
#search_suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 1070;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: .5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
#search_suggest.show { display: block; }
#search_suggest .dropdown-item {
  display: flex; align-items: center; gap: .5rem;
  white-space: normal; line-height: 1.25;
  padding-top: .6rem; padding-bottom: .6rem;
}
#search_suggest .dropdown-item .thumb {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 50%; object-fit: cover;
}
#search_suggest .dropdown-item .title { font-weight: 600; font-size: .95rem; }
#search_suggest .dropdown-item .tags  { font-size: .75rem; opacity: .75; }

@media (max-width: 991.98px) {
  input#search.form-control { width: 100% !important; max-width: none !important; }
}


/* =======================================================
   SEARCH (mobile): Results list (if present)
   ======================================================= */
#results_list { list-style: none; margin: 0; padding: 0; display: none; }
#results_list li { border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.1)); }
#results_list li:last-child { border-bottom: 0; }
#results_list a { color: inherit; text-decoration: none; }
#results_list .thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
@media (max-width: 991.98px) { #results_list { display: block; } }


/* =======================================================
   GENERAL COMPONENTS / UTILITIES
   ======================================================= */
.eplus-card-title { height: 75px; overflow-wrap: anywhere; }

/* max-width: it affects the video icon */
.card img, .alignnone {
  /* max-width: 100% !important; */
  height: auto;
  display: block;
  margin: auto;
}

.bg-light-pcv {
  background-color: #E9F3FF !important;
}

/* .card-body img { width: 100%; height: auto; } */

img, .aligncenter { border-radius: 20px; }

 /* Use Metronic’s z-index when fixed to avoid overlaps */
 .app-sidebar { z-index: 105; }

.imgcard {
  width: 85px; height: 85px; border-radius: 10px;
  background-color: #fff; border: 1px solid #ccc; padding: 5px;
}

/* Category buttons */
.bout_ameliorer a { background:#CC3333; letter-spacing:1px; color:#fff; border-radius:3px; padding:0 8px; margin-top:13px; display:block; }
.bout_gerer a     { background:#99CC00; letter-spacing:1px; color:#fff; border-radius:3px; padding:0 8px; margin-top:13px; display:block; }
.bout_concevoir a { background:#009999; letter-spacing:1px; color:#fff; border-radius:3px; padding:0 8px; margin-top:13px; display:block; }
.bout_evaluer a   { background:#FF6633; letter-spacing:1px; color:#fff; border-radius:3px; padding:0 8px; margin-top:13px; display:block; }

/* Footnotes & info boxes */
.footnote_referrer { display: contents; position: absolute; width: 33px; font-size: small; }
.footnote_referrer a { font-size: x-small; }
.energie-sommaire { text-align: left !important; }
.exemple { width: 100%; padding: 10px; border: 2px dashed #CB520A !important; border-collapse: collapse !important; }
.donnees_txt, td { border: 2px solid #009999 !important; border-collapse: collapse !important; padding: 10px; }
.donnees_txt { border-radius: 10px !important; padding: 10px; margin: 30px 0; }

/* Resource chips */
.ressources a {
  background-color: #9b9b9b; letter-spacing: 1px; color: #fff; border-radius: 3px; padding: 0 8px;
}

/* Container padding at ≤1280px  TEST FULL SITE HEADER
{ padding-left: 4px !important; padding-right: 4px !important; } */

@media (max-width: 1280px) {
    [data-kt-app-sidebar-enabled=true] .app-header-logo { width: 150px; margin-right: 30px; }
}


/* =======================================================
   SIDEBAR (left menu)
   ======================================================= */
#epsidemenu { width: 100%; height: 1864px; position: relative; top: 0; left: 0; overflow: hidden; }
.epmnuul {
  list-style: none; margin: 0; padding: 0; position: relative; top: 0; z-index: 3;
}
.epmnuul:first-child > li { height: 1864px; }
.epmnuul:first-child > li > a.title { text-align: center; }
.epmnuul:first-child > li > a span { margin: 0; }
.expandable { transition: all 2.5s ease-in-out; top: 400px; }
.epmnuul > li {
   height: 50px; width: 100%; line-height: 50px; box-sizing: border-box;
}
.epmnuul > li > a {
  display: block; padding: 0 10px; box-sizing: border-box; text-decoration: none; color: black;
  z-index: 20; position: relative; background: #fff; -webkit-transition: all .1s linear;
  cursor: pointer; border-top-left-radius: 13px; border-top-right-radius: 13px;
}
.epmnuul > li > a:active { background: #eee; }
.epmnuul > li > a > span { margin-left: 35px; }
.epmnuul > li > a > img { width: 22px; position: absolute; top: 13px; border-radius: 0; }
.epmnuul > li > a i {
  position: absolute; right: 10px; opacity: 1; top: 20px;
  -webkit-transition: -webkit-transform .1s linear; color: red; font-size: 10px;
}
.epmnuback {
  display: block; left: 15px; -webkit-transform: rotate(0deg) !important; font-size: 12px !important;
  top: 20px; position: absolute; color: white;
}
.epmnuul > li > a.title i { -webkit-transform: rotate(90deg); opacity: .7; font-size: 15px; color: #fff !important; }
.title { color:#fff !important; font-weight:bold; background:#ed2024 !important; }
.title.color1 { background:#7981E0; }
.title.color2 { background:#97CEDB; }
.title.color3 { background:#9BD898; }


/* Only the sidebar tree titles */
#epsidemenu a.title,
.epmnuul > li > a.title { 
  color:#fff !important; 
  font-weight:bold; 
  background:#ed2024 !important; 
}
#epsidemenu a.title.color1, .epmnuul > li > a.title.color1 { background:#7981E0; }
#epsidemenu a.title.color2, .epmnuul > li > a.title.color2 { background:#97CEDB; }
#epsidemenu a.title.color3, .epmnuul > li > a.title.color3 { background:#9BD898; }

/* Text utilities */
.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

@keyframes fadeInUp { 0%{transform:translateY(100%);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
.fadeInUp-animation { animation: 1.5s fadeInUp; }

.epmnuul > li > a { background: var(--bs-body-bg); color: var(--bs-body-color); }
.epmnuul > li > a:hover { background: var(--bs-body-bg); color: var(--bs-body-color); }

.image-result { width: 40px; height: 40px; border-radius: 50%; display: inline-block; }


/* =======================================================
   TYPOGRAPHY / VISIBILITY / BASIC RESPONSIVE
   ======================================================= */
.p1 { font-size: medium; }
p > a { font-size: medium; }
.mb-17 > p { font-size: medium; }

h2 { font-size: xxx-large; line-height: 100px; }

scrolltop, .scrolltop { right: 95px; }

@media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) { .logo { display: none; } }
@media (min-width: 800px) { .only-mobile { display: none !important; } }


/* =======================================================
   FOOTER
   ======================================================= */
#kt_footer_social { padding-top: 20px; padding-bottom: 20px; margin-top: 20px; margin-right: 20px; }
#kt_footer_sections .widget-title { margin-bottom: 10px; color: #5E0709 !important; }
@media only screen and (max-width: 425px) {
  #kt_footer_sections .widget-title, #kt_footer_sections .f-copyright { padding-left: 5px !important; }
  #kt_footer_sections nav { padding-left: 10px !important; }
}
html[data-bs-theme="dark"] #kt_footer_social .widget-title,
html[data-bs-theme="dark"] #kt_footer_sections .widget-title { color: inherit !important; }
#kt_footer_sections .menu.menu-column > .menu-item > a { display: block; padding-left: 0; text-decoration: none; }
html[data-bs-theme="light"] #kt_app_footer { background-color: #E4EEF8; }
#kt_app_footer { padding: 0 30px 0 320px; }
@media (min-width: 1024px) { #kt_app_footer { padding: 0 40px 0 354px; } }
@media (max-width: 425px)  { #kt_app_footer { padding: 10px; } }
@media (min-width: 425px) and (max-width: 768px) { #kt_app_footer { padding: 20px; } }
.btn-danger-partners { background-color: #ED2024; color:#fff; border-color:#ED2024; }
html[data-bs-theme="light"] .bg-partners { background-color: #D2E1F0 !important; }
.img-partner { max-height:70px; object-fit:contain; }
@media (max-width: 425px) { .img-partner { max-height: 55px; } }


/* =======================================================
   MOBILE SEARCH: Top drawer (sheet)
   ======================================================= */
html.mobile-search-noscroll, html.mobile-search-noscroll body { overflow: hidden !important; touch-action: none; }
@media (max-width: 991.98px) { #search_suggest, #search_result { display: none !important; } }

.mobile-search-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 2147483500; display: none;
}
.mobile-search-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

.mobile-search-sheet {
  position: fixed; left: 0; right: 0; top: 56px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 2147483600;
  padding: 10px 12px;
  display: none; visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-24px);
  transition: transform .25s ease, opacity .2s ease;
  max-height: calc(100vh - 56px); overflow: hidden;
}
.mobile-search-sheet.open { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-search-header, .mobile-search-title { display: none !important; }
.mobile-search-close {
  border: 0; background: transparent; font-size: 1.5rem; line-height: 1;
  padding: 2px 6px; cursor: pointer; color: var(--bs-body-color);
  position: absolute; top: 6px; right: 6px;
}
.mobile-search-form { display: flex; gap: 8px; align-items: center; padding-right: 28px; margin: 0; }
.mobile-search-input {
  flex: 1 1 auto; height: 40px; padding: 6px 10px;
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.2));
  border-radius: 8px; background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: 16px;
}
.mobile-search-input[aria-invalid="true"] { border-color: #dc3545; }
.mobile-search-button {
  flex: 0 0 auto; height: 40px; padding: 0 14px; border-radius: 8px; border: none; cursor: pointer;
  background: #ED2024; color: #fff; font-weight: 600; font-size: .95rem;
}
.mobile-suggest {
  margin-top: 12px; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
  border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px;
}
.mobile-suggest .mobile-suggest-item { display:flex; align-items:center; gap:.5rem; text-decoration:none; padding:.6rem .5rem; border-radius:.5rem; }
.mobile-suggest .mobile-suggest-item:hover { background: rgba(0,0,0,.04); }
html[data-bs-theme="dark"] .mobile-suggest .mobile-suggest-item:hover { background: rgba(255,255,255,.06); }
.mobile-suggest .thumb { flex:0 0 36px; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.mobile-suggest .title { font-weight:600; font-size:.95rem; }
.mobile-suggest .tags  { font-size:.75rem; opacity:.75; }
.mobile-results { margin-top: 12px; }
.mobile-results-header { font-size:.9rem; margin-bottom:8px; opacity:.8; }
.mobile-results-list { list-style:none; margin:0; padding:0; }
.mobile-results-list .mobile-result-item { margin-bottom:8px; }
.mobile-results-list a {
  display:flex; gap:.6rem; text-decoration:none; padding:.6rem .5rem;
  border:1px solid var(--bs-border-color, rgba(0,0,0,.125));
  border-radius:.5rem; background:var(--bs-body-bg);
}
.mobile-results-list a:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
mobile-results-list .thumb { flex:0 0 40px; width:40px; height:40px; border-radius:50%; object-fit:cover; }
.mobile-results-list .title { font-weight:600; font-size:.95rem; color: var(--bs-body-color); }
.mobile-results-list .tags  { font-size:.75rem; opacity:.75; }
@media (min-width: 992px) { .mobile-search-backdrop, .mobile-search-sheet { display: none !important; } }


/* =======================================================
   HOME — News grid & cards
   ======================================================= */
#home-news .news-grid{
  display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start;
}
@media (min-width: 768px){
  #home-news .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#home-news .card .ratio { width: 100%; }
#home-news .card .ratio img{
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}
#home-news .card .card-body{ padding: 1rem 1rem 1.25rem; }
#home-news .card-body p{ display: none !important; }
#home-news.card { height: auto !important; }
#webinars > .card { height: auto !important; }
#dossiers-list { display: block; }
#dossiers-list .dossier-card img{ width: 100% !important; height: auto !important; object-fit: cover; }
.col-md-6.col-lg-6.col-xl-6.col-xxl-6 > .card.h-100 { height: auto !important; }
#home-news, #webinars > .card { margin-bottom: 1.25rem; }
.news-tag{
  font-size: .75rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--bs-gray-600); margin-bottom: .25rem;
}
#hero-news-cover{ background-size: cover !important; background-position: center !important; }
#home-news #news-featured .btn{ display: none !important; }


/* =======================================================
   HERO — Split banner (image left / text right)
   ======================================================= */
.hero-news-card{
  position: relative; border: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}
.hero-news-card .card-body{ padding: 0; }
#hero-news-cover.hero-news-cover{
  min-height: 380px; background-size: cover !important; background-position: center !important;
}
@media (min-width: 992px){ #hero-news-cover.hero-news-cover{ min-height: 520px; } }
.hero-news-panel{
  background: #103B4D; color: #E7F2F8; display: flex; align-items: center;
}
.hero-news-panel .hero-inner{ padding: 48px 56px; width: 100%; }
.hero-kicker{ font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; display: inline-block; margin-bottom: 6px; }
.hero-divider{ display: block; width: 28px; height: 2px; background: rgba(255,255,255,.6); margin: 8px 0 20px; }
#hero-news-title{ color:#fff; font-weight:800; line-height:1.2; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
#hero-news-excerpt{ color: rgba(255,255,255,.85); max-width: 46ch; }
.hero-news-panel .btn-success{ background:#27C160; border:0; font-weight:700; padding:.6rem 1.2rem; border-radius:10px; }
.hero-news-panel .btn-success:hover{ filter: brightness(.95); }
.hero-navs{
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 14px;
}
@media (min-width: 992px){ .hero-navs{ display: flex; } }
.hero-navs .nav-btn{
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
}


/* =======================================================
   POSTS — Layout, typography & content sanitization
   ======================================================= */
html, body { max-width: 100%; overflow-x: clip; }
.app-root, .app-page, .app-wrapper, .app-main, .app-content,
.flex-row-fluid, .d-flex > .flex-row-fluid { min-width: 0; }

#kt_app_content .card {
  background-color: var(--bs-card-bg, #fff) !important;
  overflow: hidden; border-radius: 1rem;
}

#kt_app_content article h1,
#kt_app_content .entry-content h1 { line-height: 1.25; }
#kt_app_content article h2,
#kt_app_content .entry-content h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem) !important;
  line-height: 1.25 !important;
  margin: 1.6rem 0 .8rem; font-weight: 800;
}
#kt_app_content article h3,
#kt_app_content .entry-content h3 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.3; margin: 1.2rem 0 .6rem; font-weight: 700;
}

 /* #kt_app_content .card .card-body, 
 #kt_app_content article, 
 #kt_app_content .entry-content, 
#kt_app_content .post-content { overflow-wrap: anywhere; word-break: break-word; } */


#kt_app_content .card .card-body iframe,
#kt_app_content article iframe,
#kt_app_content .entry-content iframe,
#kt_app_content .card .card-body video,
#kt_app_content article video,
#kt_app_content .entry-content video {
  max-width: 100%; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

#kt_app_content .entry-content .wp-block-embed,
#kt_app_content .entry-content figure,
#kt_app_content .entry-content .wp-block-image,
#kt_app_content .entry-content .wp-block-group,
#kt_app_content .entry-content .wp-block-columns,
#kt_app_content .entry-content .alignfull,
#kt_app_content .entry-content .alignwide {
  margin-left: 0 !important; margin-right: 0 !important;
  width: 100% !important; max-width: 100% !important;
}

#kt_app_content .entry-content .row { --bs-gutter-x: 1rem; margin-left:0 !important; margin-right:0 !important; }
#kt_app_content .entry-content [class^="col-"],
#kt_app_content .entry-content [class*=" col-"] {
  padding-left: calc(var(--bs-gutter-x)/2);
  padding-right: calc(var(--bs-gutter-x)/2);
}

#kt_app_content .entry-content .container,
#kt_app_content .entry-content .container-fluid {
  max-width: 100% !important; padding-left: 0; padding-right: 0;
}

#kt_app_content .card .card-body table,
#kt_app_content article table,
#kt_app_content .entry-content table { width: 100%; border-collapse: collapse; }
#kt_app_content .table-responsive,
#kt_app_content article .table-responsive,
#kt_app_content .entry-content .table-responsive { overflow-x: auto; }
#kt_app_content pre, #kt_app_content code, #kt_app_content .wp-block-code {
  white-space: pre-wrap; word-break: break-word; max-width: 100%;
}

#kt_app_content .alignleft  { float: left;  margin: 0 1rem 1rem 0; }
#kt_app_content .alignright { float: right; margin: 0 0 1rem 1rem; }
#kt_app_content .aligncenter { display: block; margin-left: auto; margin-right: auto; float: none; }

#kt_app_content .entry-content::after,
#kt_app_content #post-content::after { content:''; display:block; clear:both; }


/* Normalize: no side padding by default in container variants */
.app-container.container-fluid,
.app-container.container-xxl{
  padding-left: 0;
  padding-right: 0;
}

#kt_app_content article p,
#kt_app_content .entry-content p { line-height: 1.6; margin-bottom: 1rem; }

#structure-de-linformation-blocks .card .card-body img,
#structure-de-linformation-blocks .alignnone {
  max-width: auto !important;
}

#energie-blocks .card .card-body img,
#energie-blocks .alignnone {
  max-width: auto !important;
}

/* =======================================================
   POSTS — Fallback visuals & common content elements
   ======================================================= */
#kt_app_content #post-content,
#kt_app_content .entry-content {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.12));
  border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: clamp(16px, 2vw, 28px);
}

#kt_app_content > .app-container.container-xxl > :not(.card):first-child,
#kt_app_content > .app-container > :not(.card):first-child {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.12));
  border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: clamp(16px, 2vw, 28px);
}

#kt_app_content .wp-caption,
#kt_app_content figure.wp-caption,
#kt_app_content .wp-block-image { margin: 1rem 0; text-align: center; }
#kt_app_content .wp-caption-text,
#kt_app_content .wp-block-image figcaption { font-size: .875rem; opacity: .8; margin-top: .5rem; }

#kt_app_content blockquote {
  margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid #ed2024; background: rgba(0,0,0,.035);
}
html[data-bs-theme="dark"] #kt_app_content blockquote { background: rgba(255,255,255,.05); }

#kt_app_content table { width: 100%; border-collapse: collapse; margin: 1rem 0; overflow: hidden; }
#kt_app_content table th, #kt_app_content table td {
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.12)); padding: .6rem .75rem; vertical-align: top;
}

/* Ensure post paragraphs are visible (override home rule hiding p) */
#home-news .card-body p { display: none !important; }
#kt_app_content #post-content p,
#kt_app_content .entry-content p { display: block !important; }

#kt_app_content > :not(.app-container) {
  max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px;
}

#kt_app_content .card .card-body .ratio img { height: 100% !important; object-fit: cover; }
#kt_app_content .card .card-body .post-body img,
#kt_app_content .card .card-body #post-content img { height: auto !important; object-fit: initial; }

*, *::before, *::after { box-sizing: border-box; }

/* =======================================================
   HERO — COMPLETE OVERRIDES 
   ======================================================= */

/* Background */
#home-hero-news,
#home-hero-news.card,
#home-hero-news .card,
#home-hero-news .card-body{
  background:#0E3953 !important;
  padding:0;
  border-radius:20px;
}

/* Wrapper */
#home-hero-news{
  --hero-gap-desktop: clamp(20px, 2.2vw, 32px);
  --hero-gap-mobile: .85rem;
  border-radius:20px;
  overflow:hidden;
  width:95%;
  margin:0 auto;
  border:0;
  box-shadow:none;
}
#home-hero-news .card-body{ padding: clamp(16px, 2vw, 28px); }

/* Height base */
#home-hero-news .row.g-0{ min-height:320px; height:100%; }
#home-hero-news .col-lg-6{ height:100%; }

/* Desktop / Tablet */
@media (min-width:992px){ #home-hero-news .row.g-0{ height:460px; } }
@media (max-width:991.98px){ #home-hero-news .row.g-0{ height:auto; } }

/* Image (col left) */
#home-hero-news .col-lg-6:first-child a.d-block,
#home-hero-news .col-lg-6:first-child a.h-100{ display:block; height:100%; }
#home-hero-news #hero-slide-img,
#home-hero-news .hero-img{
  width:100%; height:100% !important; object-fit:cover; display:block;
  border-top-left-radius:20px; 
  border-bottom-left-radius:20px;
}

/* ===== Text panel (col right) ===== */
#home-hero-news .col-lg-6:last-child{
  color:#fff; background:#0E3953; position:relative;
  display:flex; flex-direction:column; justify-content:center; height:100%;
}


/* Desktop: grid occupying full height with generous gaps */
@media (min-width: 992px){
  #home-hero-news .col-lg-6:last-child{
    display:grid;
    grid-template-rows: min-content min-content 1fr min-content; 
    row-gap: var(--hero-gap-desktop);
    padding: clamp(24px, 2.4vw, 36px);
    align-content: stretch;
  }
  /* Clear internal margins and control with grid-gap */
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7,
  #home-hero-news .col-lg-6:last-child h2,
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt,
  #home-hero-news .col-lg-6:last-child .hero-btn,
  #home-hero-news .col-lg-6:last-child .btn-success{ margin:0 !important; }
}


/* ========= Types + Spacing ========= */
/* Centered category with same-color underline */
#home-hero-news .text-uppercase.fs-7{
  color:rgba(255,255,255,.92)!important;
  letter-spacing:.12em; font-weight:600;
  text-align:center;
  margin: 0 auto clamp(12px, 1.2vw, 18px);
  width: fit-content;
}
#home-hero-news .text-uppercase.fs-7::after{
  content:""; display:block; height:2px; 
  width: clamp(40px, 7vw, 76px);
  background: currentColor; 
  margin: clamp(8px, .8vw, 12px) auto 0;
  border-radius: 1px;
}

/* Title with top and bottom breathing room (fallback if grid does not apply) */
#home-hero-news h2{ margin:0; }
#home-hero-news h2 a{
  color:#fff !important; font-weight:700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height:1.18;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  margin-top: clamp(10px, 1vw, 16px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
}

/* Excerpt with good breathing space before the CTA */
#home-hero-news #hero-slide-excerpt{
  color:rgba(255,255,255,.9);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height:1.55; 
  max-width:56ch;
  margin: 0 0 clamp(18px, 1.8vw, 28px) !important;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* CTA: lift + shadow + darker green hover */
#home-hero-news .hero-btn,
#home-hero-news .btn-success{
  background:#22C55E; color:#fff; border:0; font-weight:600;
  padding:.7rem 1.25rem; border-radius:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  transform: translateY(0);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  align-self:flex-start;
}
#home-hero-news .hero-btn:hover,
#home-hero-news .btn-success:hover{
  background:#16A34A; transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0,0,0,.28);
}
#home-hero-news .hero-btn:active,
#home-hero-news .btn-success:active{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
}
#home-hero-news .hero-btn:focus-visible,
#home-hero-news .btn-success:focus-visible{
  outline:2px solid #16A34A; outline-offset:2px;
}

/* Arrows */
#home-hero-news #hero-prev,
#home-hero-news #hero-next,
#home-hero-news .btn.btn-light.btn-icon{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75);
  background:transparent; color:#fff;
}
#home-hero-news #hero-prev:hover,
#home-hero-news #hero-next:hover,
#home-hero-news .btn.btn-light.btn-icon:hover{
  background:#fff; color:#0E3953; border-color:#fff;
}

/* Counter */
#home-hero-news .small.text-muted{ color: rgba(255,255,255,.75)!important; }

/* Dark mode */
[data-bs-theme="dark"] #home-hero-news,
[data-bs-theme="dark"] #home-hero-news .col-lg-6:last-child,
[data-bs-theme="dark"] #home-hero-news .card-body{ background:#0E3953; }

/* =========================
   MOBILE — FULL-BLEED + 50/50 + FIXED HEIGHT
   ========================= */
@media (max-width:575.98px){
  #home-hero-news{
    --hero-h-mobile: 540px; /* ADJUSTABLE: 500–580px */
    width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    margin-right: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  #home-hero-news,
  #home-hero-news .card,
  #home-hero-news .card-body,
  #home-hero-news .col-lg-6,
  #home-hero-news img{ border-radius:0 !important; }

  /* FIXED height to prevent jumping between slides */
  #home-hero-news .row.g-0{
    display:grid;
    grid-template-rows: 1fr 1fr;   /* 50/50 */
    height: var(--hero-h-mobile);
    min-height: var(--hero-h-mobile);
    overflow:hidden;
  }
  #home-hero-news .col-lg-6{ overflow:hidden; }

  /* Image occupies the top half */
  #home-hero-news .col-lg-6:first-child{ order:1; height:100%; }
  #home-hero-news #hero-slide-img,
  #home-hero-news .hero-img{
    width:100%; height:100% !important; object-fit:cover; display:block;
  }

  /* Content occupies the bottom half with grid and gaps */
  #home-hero-news .col-lg-6:last-child{
    order:2; height:100%;
    display:grid;
    grid-template-rows: min-content min-content 1fr min-content; /* cat, h2, excerpt, CTA */
    row-gap: var(--hero-gap-mobile);
    padding: 16px 16px 18px !important;
    align-content: stretch;
  }

  /* Typographic adjustments so everything fits */
  #home-hero-news .text-uppercase.fs-7{ margin: 0 auto .35rem; }
  #home-hero-news h2 a{
    font-size: clamp(18px, 5vw, 22px);
    line-height:1.18;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    margin: .35rem 0 .5rem;
  }
  #home-hero-news #hero-slide-excerpt{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    margin: 0 0 .75rem !important;
  }

  /* Arrows centered at the bottom (optional) */
  #home-hero-news .hero-nav,
  #home-hero-news .hero-nav-wrapper{
    margin-top:auto; display:flex; justify-content:center; gap:.6rem;
  }
  #home-hero-news #hero-prev, 
  #home-hero-news #hero-next{ position:static; }
}

/* =========================
   DESKTOP ARROW POSITION
   ========================= */
@media (min-width:576px){
  #home-hero-news .col-lg-6:last-child{ position:relative; }
  #home-hero-news .hero-nav,
  #home-hero-news .hero-nav-wrapper{
    position:absolute; right: clamp(12px, 2vw, 20px); bottom: clamp(12px, 2vw, 20px);
    display:flex; gap:.5rem; z-index:2;
  }
}

/* =========================
   PURE CSS ANIMATIONS (no JS)
   ========================= */
:root{
  --hero-dur:.8s; 
  --hero-ease:cubic-bezier(.22,.61,.36,1); 
  --hero-d1:.10s; --hero-d2:.25s; --hero-d3:.40s;
}
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
@keyframes heroFadeDown{ from{opacity:0; transform:translateY(-18px)} to{opacity:1; transform:none} }
@keyframes heroFadeIn{ from{opacity:0; filter:blur(2px)} to{opacity:1; filter:blur(0)} }
@keyframes heroSlideInLeft{ from{opacity:0; transform:translateX(-30px)} to{opacity:1; transform:none} }
@keyframes heroSlideInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
@keyframes heroScaleIn{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:scale(1)} }

/* Base state: hidden (revealed when the slide activates) */
#home-hero-news .carousel-item :is(.hero-img,#hero-slide-img,
  .text-uppercase.fs-7,h2 a,#hero-slide-excerpt,
  .hero-btn,.btn-success,#hero-prev,#hero-next){ 
  opacity:0; will-change: opacity, transform; 
}

/* SLIDE 1 */
#home-hero-news .carousel-item:nth-child(1).active :is(#hero-slide-img,.hero-img){ animation: heroFadeUp var(--hero-dur) var(--hero-ease) both; }
#home-hero-news .carousel-item:nth-child(1).active .text-uppercase.fs-7{ animation: heroFadeDown var(--hero-dur) var(--hero-ease) var(--hero-d1) both; }
#home-hero-news .carousel-item:nth-child(1).active h2 a{ animation: heroFadeIn var(--hero-dur) var(--hero-ease) calc(var(--hero-d1)+.05s) both; }
#home-hero-news .carousel-item:nth-child(1).active #hero-slide-excerpt{ animation: heroFadeIn var(--hero-dur) var(--hero-ease) var(--hero-d2) both; }
#home-hero-news .carousel-item:nth-child(1).active :is(.hero-btn,.btn-success){ animation: heroFadeUp var(--hero-dur) var(--hero-ease) var(--hero-d3) both; }
#home-hero-news .carousel-item:nth-child(1).active :is(#hero-prev,#hero-next){ animation: heroScaleIn .6s var(--hero-ease) calc(var(--hero-d3)+.1s) both; }

/* SLIDE 2 */
#home-hero-news .carousel-item:nth-child(2).active :is(#hero-slide-img,.hero-img){ animation: heroSlideInLeft var(--hero-dur) var(--hero-ease) both; }
#home-hero-news .carousel-item:nth-child(2).active .text-uppercase.fs-7{ animation: heroFadeDown var(--hero-dur) var(--hero-ease) var(--hero-d1) both; }
#home-hero-news .carousel-item:nth-child(2).active h2 a{ animation: heroSlideInLeft var(--hero-dur) var(--hero-ease) var(--hero-d2) both; }
#home-hero-news .carousel-item:nth-child(2).active #hero-slide-excerpt{ animation: heroFadeIn var(--hero-dur) var(--hero-ease) calc(var(--hero-d2)+.1s) both; }
#home-hero-news .carousel-item:nth-child(2).active :is(.hero-btn,.btn-success){ animation: heroFadeUp var(--hero-dur) var(--hero-ease) var(--hero-d3) both; }
#home-hero-news .carousel-item:nth-child(2).active :is(#hero-prev,#hero-next){ animation: heroScaleIn .6s var(--hero-ease) calc(var(--hero-d3)+.1s) both; }

/* SLIDE 3 */
#home-hero-news .carousel-item:nth-child(3).active :is(#hero-slide-img,.hero-img){ animation: heroSlideInUp var(--hero-dur) var(--hero-ease) both; }
#home-hero-news .carousel-item:nth-child(3).active .text-uppercase.fs-7{ animation: heroFadeDown var(--hero-dur) var(--hero-ease) var(--hero-d1) both; }
#home-hero-news .carousel-item:nth-child(3).active h2 a{ animation: heroFadeIn var(--hero-dur) var(--hero-ease) var(--hero-d2) both; }
#home-hero-news .carousel-item:nth-child(3).active #hero-slide-excerpt{ animation: heroSlideInUp var(--hero-dur) var(--hero-ease) calc(var(--hero-d2)+.1s) both; }
#home-hero-news .carousel-item:nth-child(3).active :is(.hero-btn,.btn-success){ animation: heroFadeUp var(--hero-dur) var(--hero-ease) var(--hero-d3) both; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* =========================
   HERO — RIGHT COLUMN SPACING FIX
   ========================= */

/* Desktop (≥992px): use vertical FLEX + clear margins */
@media (min-width: 992px){
  /* The right column takes full height and arranges in a column */
  #home-hero-news .col-lg-6:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding: clamp(28px, 2.6vw, 40px) !important; /* a bit more breathing room */
    gap: 0 !important; /* we’ll control with semantic margins below */
  }

  /* Category: centered, with good spacing before the H2 */
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7{
    margin: 0 auto clamp(16px, 1.6vw, 24px) !important;
  }

  /* Title: sufficient top/bottom margin */
  #home-hero-news .col-lg-6:last-child h2 a{
    margin-top: clamp(8px, 1vw, 14px) !important;
    margin-bottom: clamp(16px, 1.8vw, 24px) !important;
    line-height: 1.2 !important;
  }

  /* Description: leave a “cushion” before the CTA + minimum height
     so the button never sticks even with short descriptions */
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    margin-bottom: clamp(20px, 2vw, 28px) !important;
    min-height: clamp(56px, 12vh, 140px); /* acts as a flexible separator */
  }

  /* CTA: anchor to the bottom with auto so it uses all available height */
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    margin-top: auto !important;
  }

  /* Arrow adjustment in case the CTA “lifts” on hover */
  #home-hero-news .hero-nav,
  #home-hero-news .hero-nav-wrapper{
    bottom: clamp(14px, 2vw, 22px) !important;
  }
}

/* Tablet (576–991px): same idea but without fully anchoring the CTA */
@media (min-width:576px) and (max-width:991.98px){
  #home-hero-news .col-lg-6:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding: clamp(22px, 2.2vw, 32px) !important;
  }
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7{
    margin: 0 auto clamp(12px, 1vw, 18px) !important;
  }
  #home-hero-news .col-lg-6:last-child h2 a{
    margin: clamp(8px, .8vw, 12px) 0 clamp(14px, 1.2vw, 20px) !important;
  }
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    margin-bottom: clamp(16px, 1.6vw, 24px) !important;
  }
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    margin-top: clamp(8px, 1.2vw, 16px) !important; /* not auto, but with space */
  }
}

/* Mobile (≤575.98px): keep 50/50 + fixed height and more visual gap */
@media (max-width:575.98px){
  /* Fixed height without jumps (if you already defined --hero-h-mobile, it reuses it) */
  #home-hero-news{ --hero-h-mobile: var(--hero-h-mobile, 540px); }
  #home-hero-news .row.g-0{
    height: var(--hero-h-mobile) !important;
    min-height: var(--hero-h-mobile) !important;
  }

  /* More breathing room between blocks on the right panel */
  #home-hero-news .col-lg-6:last-child{
    row-gap: 1rem !important;
    padding: 16px 16px 18px !important;
  }
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7{
    margin: 0 auto .5rem !important;
  }
  #home-hero-news .col-lg-6:last-child h2 a{
    margin: .35rem 0 .6rem !important;
  }
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    margin-bottom: .85rem !important;
  }
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    margin-top: .25rem !important;
  }
}

/* Optional: if there are intermediate wrappers that “break” the gap,
   force spacing with uniform margins at descendant level */
#home-hero-news .col-lg-6:last-child :where(.text-uppercase.fs-7){
  display:block; /* ensures proper centering + underline */
}
#home-hero-news .col-lg-6:last-child :where(h2, #hero-slide-excerpt){
  max-width: 60ch;
}
/* =========================
   HERO — SPACING PATCH / ANTI-CLIPPING
   ========================= */

/* ===== DESKTOP (≥992px): right column with flex + gap and CTA not stuck ===== */
@media (min-width: 992px){
  /* Use flex and distribute with gap (instead of loose margins) */
  #home-hero-news .col-lg-6:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding: clamp(28px, 2.6vw, 40px) !important;
    gap: clamp(16px, 1.8vw, 28px) !important;   /* space between blocks */
  }

  /* Cancel internal margins so the gap governs spacing */
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7,
  #home-hero-news .col-lg-6:last-child h2,
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt,
  #home-hero-news .col-lg-6:last-child .hero-btn,
  #home-hero-news .col-lg-6:last-child .btn-success{
    margin:0 !important;
  }

  /* The excerpt stretches if there’s free height (pushes the CTA down) */
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    flex: 1 1 auto !important;
    min-height: 0 !important;           /* avoids forced “cuts” */
    -webkit-line-clamp: 3;              /* keeps 3 lines as the limit */
    overflow: hidden;
  }

  /* CTA always with breathing room, left-aligned */
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    align-self: flex-start !important;
    margin-top: clamp(8px, 1vw, 16px) !important; /* fixed separator from the text */
  }

  /* Arrow adjustment in case the CTA “lifts” on hover */
  #home-hero-news .hero-nav,
  #home-hero-news .hero-nav-wrapper{
    bottom: clamp(14px, 2vw, 22px) !important;
  }
}

/* ===== TABLET (576–991px): flex + gap with healthy separations ===== */
@media (min-width:576px) and (max-width:991.98px){
  #home-hero-news .col-lg-6:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding: clamp(22px, 2.2vw, 32px) !important;
    gap: clamp(12px, 1.4vw, 20px) !important;
  }

  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7,
  #home-hero-news .col-lg-6:last-child h2,
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt,
  #home-hero-news .col-lg-6:last-child .hero-btn,
  #home-hero-news .col-lg-6:last-child .btn-success{
    margin:0 !important;
  }

  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    align-self: flex-start !important;
    margin-top: clamp(8px, .9vw, 14px) !important;
  }
}

/* ===== MOBILE (≤575.98px): fixed height without jumps + better internal distribution ===== */
@media (max-width:575.98px){
  /* consistent fixed height between slides */
  #home-hero-news{ --hero-h-mobile: var(--hero-h-mobile, 540px); }
  #home-hero-news .row.g-0{
    height: var(--hero-h-mobile) !important;
    min-height: var(--hero-h-mobile) !important;
    overflow: hidden; /* prevents anything from “spilling out” */
  }

  /* right panel in flex to better distribute the bottom 50% */
  #home-hero-news .col-lg-6:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding: 16px 16px 18px !important;
    gap: 1rem !important;               /* space between blocks */
  }

  /* clear margins so the gap rules */
  #home-hero-news .col-lg-6:last-child .text-uppercase.fs-7,
  #home-hero-news .col-lg-6:last-child h2,
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt,
  #home-hero-news .col-lg-6:last-child .hero-btn,
  #home-hero-news .col-lg-6:last-child .btn-success{
    margin:0 !important;
  }

  /* flexible excerpt: takes what it can but without covering the CTA */
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-line-clamp: 2; /* on mobile we keep 2 lines so everything fits */
    overflow:hidden;
  }

  /* CTA with fixed breathing room, never stuck */
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    align-self:flex-start !important;
    margin-top: .25rem !important;
  }
}

/* ===== Lifesaver: if internal wrappers collapse spaces ===== */
#home-hero-news .col-lg-6:last-child > *{
  max-width: 60ch;               /* avoids very long lines */
}
#home-hero-news .col-lg-6:last-child .text-uppercase.fs-7{
  max-width: none;               /* the category remains centered without limit */
}
/* =========================================
   HERO — MOBILE HEIGHT LOCK + CTA SPACING
   ========================================= */

/* --- MOBILE: real fixed height throughout the entire carousel tree --- */
@media (max-width:575.98px){
  /* Adjust this value if you want more/less height (520–580 usually works well) */
  #home-hero-news{ --hero-h-mobile: 540px; }

  /* The container and wrappers adopt the fixed height */
  #home-hero-news,
  #home-hero-news .card,
  #home-hero-news .card-body{
    height: var(--hero-h-mobile) !important;
    min-height: var(--hero-h-mobile) !important;
    overflow: hidden !important;
  }
  /* No padding on mobile so as not to “eat up” the 50/50 height */
  #home-hero-news .card-body{ padding: 0 !important; }

  /* The carousel and its items also get fixed height */
  #home-hero-news .carousel,
  #home-hero-news .carousel-inner,
  #home-hero-news .carousel-item{
    height: 100% !important;
    min-height: 100% !important;
  }
  #home-hero-news .carousel-inner{ overflow: hidden !important; }

  /* The inner row takes 100% and maintains the 50/50 */
  #home-hero-news .carousel-item > .row.g-0{
    display: grid !important;
    grid-template-rows: 1fr 1fr !important; /* image 50% / content 50% */
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  /* Safety: nothing “grows” beyond its half */
  #home-hero-news .col-lg-6{ min-height: 0 !important; overflow: hidden !important; }
  #home-hero-news .col-lg-6:first-child img{
    width:100%; height:100% !important; object-fit:cover !important; display:block;
  }

  /* Right panel: flex + gap, flexible excerpt and CTA with space */
  #home-hero-news .col-lg-6:last-child{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    padding: 16px 16px 18px !important; /* without trimming the bottom half */
    min-height: 0 !important;
  }
  #home-hero-news #hero-slide-excerpt{
    flex: 1 1 auto !important;  /* takes available space, pushes CTA down */
    min-height: 0 !important;
    -webkit-line-clamp: 2;      /* keeps two lines; doesn’t get cut by CTA */
    overflow: hidden;
  }
  /* MORE separation of the CTA from the description */
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    margin-top: clamp(12px, 4vw, 20px) !important;
    align-self: flex-start !important;
  }
}

/* --- DESKTOP/TABLET: avoid CTA sticking using flex + gap --- */
@media (min-width:576px){
  #home-hero-news .col-lg-6:last-child{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: clamp(16px, 1.6vw, 28px) !important; /* consistent space between blocks */
  }
  /* Let the excerpt take space and push the button */
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  /* CTA with extra top margin */
  #home-hero-news .col-lg-6:last-child :is(.hero-btn,.btn-success){
    margin-top: clamp(12px, 1.2vw, 22px) !important;
    align-self: flex-start !important;
  }
}

/* Post view: keep content inside the card */
#kt_app_content .card .card-body article#post-content { 
  overflow: hidden; 
}


/* Kill Lightweb static backup */
#legacy-content { 
  display: none !Important;
}

/* --- POST in the main card: no inner card skin --- */
#kt_app_content .card .card-body article#post-content,
#kt_app_content .card .card-body article#post-content .entry-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* DO NOT hide modals/backdrops or the mobile drawer */
#kt_app_wrapper ~ :not(#kt_app_footer):not(.modal):not(.modal-backdrop)
:not(#GFG):not(#mobile_search_backdrop):not(#mobile_search_sheet) {
  display: none !important;
}

 
/* =======================================================
   Information architecture — icons inside H4
   (crop ONLY the images inside the headings)
   ======================================================= */
#kt_app_content #structure-de-linformation-blocks h4{
  display: flex;                 /* icon + text inline */
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  line-height: 1.25;
}

/* direct or linked image inside the h4 */
#kt_app_content #structure-de-linformation-blocks h4 img,
#kt_app_content #structure-de-linformation-blocks h4 a > img{
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;        /* overrides global width:100% !important */
  height: 1.7em !important;      /* icon size relative to text */
  max-height: 1.7em !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
}

/* in case they come with WP alignment classes */
#kt_app_content #structure-de-linformation-blocks h4 img.alignnone,
#kt_app_content #structure-de-linformation-blocks h4 img.alignleft,
#kt_app_content #structure-de-linformation-blocks h4 img.alignright{
  width: auto !important;
  height: 1.7em !important;
  max-height: 1.7em !important;
  max-width: none !important;
}

/* =======================================================
   GRAY BORDERS (strong override)
   Applies to: search drawer (#search_result) + tables in posts
   ======================================================= */

/* --------- Search drawer (DataTables) --------- */
#search_result table.dataTable,
#search_result table.dataTable.no-footer {
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.14)) !important;
  border-collapse: collapse !important;
}

#search_result table.dataTable > thead > tr > *,
#search_result table.dataTable > tbody > tr > *,
#search_result table.dataTable > tfoot > tr > * {
  border-color: var(--bs-border-color, rgba(0,0,0,.14)) !important;
}

/* If “.table-primary” class arrives (turquoise tint) */
#search_result .table-primary,
#search_result .table-primary > :not(caption) > * > * {
  border-color: var(--bs-border-color, rgba(0,0,0,.14)) !important;
  background: transparent !important;
}

/* DataTables pagination: no turquoise accents */
#search_result .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.14)) !important;
  background: transparent !important;
  color: inherit !important;
}
#search_result .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#search_result .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: rgba(0,0,0,.05) !important;
  border-color: var(--bs-border-color, rgba(0,0,0,.14)) !important;
  color: inherit !important;
}

/* Sticky header consistent with gray borders */
#search_result thead th {
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.14)) !important;
  position: sticky; top: 0; z-index: 2;
}

/* Zebra + hover (neutral colors only; borders remain gray) */
#search_result tbody tr:nth-child(odd) > * { background: rgba(0,0,0,.03) !important; }
#search_result tbody tr:hover > * { background: rgba(0,0,0,.05) !important; }
html[data-bs-theme="dark"] #search_result tbody tr:nth-child(odd) > * { background: rgba(255,255,255,.04) !important; }
html[data-bs-theme="dark"] #search_result tbody tr:hover > * { background: rgba(255,255,255,.07) !important; }

/* --------- Tables inside posts --------- */
#kt_app_content .entry-content table,
#kt_app_content article table,
#kt_app_content .entry-content .table,
#kt_app_content article .table {
  --tbl-border: var(--bs-border-color, rgba(0,0,0,.14));
  border: 1px solid var(--tbl-border) !important;
  border-collapse: collapse !important;
}

#kt_app_content .entry-content table thead th,
#kt_app_content article table thead th {
  border: 1px solid var(--tbl-border) !important;
}

#kt_app_content .entry-content table th,
#kt_app_content .entry-content table td,
#kt_app_content article table th,
#kt_app_content article table td {
  border: 1px solid var(--tbl-border) !important;
}

/* Neutralize “primary/info” variants also in posts */
#kt_app_content .entry-content .table-primary,
#kt_app_content .entry-content .table-primary > :not(caption) > * > *,
#kt_app_content article .table-primary,
#kt_app_content article .table-primary > :not(caption) > * > * {
  background: transparent !important;
  border-color: var(--tbl-border) !important;
}
html[data-bs-theme="dark"] #search_result table.dataTable,
html[data-bs-theme="dark"] #search_result table.dataTable.no-footer,
html[data-bs-theme="dark"] #search_result table.dataTable > :not(caption) > * > *,
html[data-bs-theme="dark"] #kt_app_content .entry-content table,
html[data-bs-theme="dark"] #kt_app_content .entry-content table * {
  border-color: rgba(255,255,255,.18) !important;
}


/* ————— APP CONTAINER ————— */

/* Mobile/tablet base: no side padding on the wrapper */
.app-container {
  padding-left: 0;
  padding-right: 0;
}

/* Any Bootstrap variant used on the wrapper behaves “fluid” */
.app-wrapper > .app-container[class*="container-"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Desktop (≥992px): same spacing as Home across the ENTIRE site */
@media (min-width: 992px) {
  .app-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

#kt_app_content .card-header { border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important; }
html[data-bs-theme="dark"] #kt_app_content .card-header { border-bottom-color: var(--bs-border-color, rgba(255,255,255,.18)) !important; }
#kt_app_content  .border-lines { border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important; }
html[data-bs-theme="dark"] #kt_app_content .border-lines { border-bottom-color: var(--bs-border-color, rgba(255,255,255,.18)) !important; }
/* HERO (home.html) – adjustments */
#home-hero-news .hero-img { object-fit: cover; object-position: center; display:block; }

/* prev/next buttons */
#home-hero-news .hero-nav { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; }
#home-hero-news .hero-nav .nav-btn {
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background: rgba(0,0,0,.45); color:#fff; border:0;
  transition: transform .15s ease;
}
#home-hero-news .hero-nav .nav-btn:hover { transform: scale(1.05); }

/* Mobile: image 75% viewport height + content below */
@media (max-width: 991.98px) {
  #home-hero-news .hero-left { order: 0; }
  #home-hero-news .hero-right { order: 1; }
  #home-hero-news .hero-left .hero-img { height: 75vh; width:100%; }
  #home-hero-news .hero-right { padding: 1rem 1.25rem !important; }
}

@media (max-width: 991.98px){
  /* so the header doesn’t clip the modal */
  .nav-area, .nav-area .nav-area-inner, .topbar, .topbar .row {
    overflow: visible !important;
  }

  /* ensure modal above the sticky header */
  #GFG.modal { z-index: 12010 !important; }
  .modal-backdrop { z-index: 12000 !important; }
}


/* ===== ENERGY+ left sidebar fixes (encapsulated to the KT container) ===== */
#kt_app_sidebar #epsidemenu .epmnuul { list-style: none; margin: 0; padding: 0;}
#kt_app_sidebar #epsidemenu .epmnuli { margin: 0;}

#kt_app_sidebar #epsidemenu a.epmnu-leaf,
#kt_app_sidebar #epsidemenu a.epmnu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .45rem .65rem;
  text-decoration: none;
  border-radius: .5rem;
  color: inherit;
}
#kt_app_sidebar #epsidemenu a.epmnu-leaf:hover,
#kt_app_sidebar #epsidemenu a.epmnu-toggle:hover {
  background: var(--bs-secondary-bg, rgba(0,0,0,.05));
}

/* expand arrow */
#kt_app_sidebar #epsidemenu a.epmnu-toggle > i.fa { transition: transform .15s ease; }
#kt_app_sidebar #epsidemenu a.epmnu-toggle.is-open > i.fa { transform: rotate(90deg); }

#kt_app_sidebar #epsidemenu ul.submenu {
  display: none;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-left: .25rem;
  border-left: 2px solid var(--bs-border-color, rgba(0,0,0,.06));
}

/* “Recents” block */
#kt_app_sidebar #epsidemenu .ep-recents { margin-bottom: .5rem; }
#kt_app_sidebar #epsidemenu .ep-recents-title {
  font-weight: 600; padding: .25rem .5rem; opacity: .9;
}

/* special case: Case studies with extended visible scroll */
#kt_app_sidebar #epsidemenu ul.submenu[data-section="case-studies"] {
  display: block;               /* optional: open by default */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

/* Metronic’s wrapper is already scrollable via data-kt-scroll,
   but we reinforce containment */
#kt_app_sidebar_wrapper,
#kt_app_sidebar_nav_wrapper {
  overflow: hidden; /* scrolling occurs in the inner levels */
}

/* Mobile: KT’s drawer handles overlay/closing.
   We just ensure submenus remain contained. */
@media (max-width: 991.98px) {
  #kt_app_sidebar #epsidemenu ul.submenu {
    max-height: none;
    overflow-y: auto;
  }
}

/* ==== Scrollable sidebar and submenus (desktop & mobile) ==== */

/* The sidebar wrapper must not bleed content outward */
#kt_app_sidebar .app-sidebar-wrapper { overflow: hidden; }

/* The menu’s inner container: its own vertical scroll */
#kt_app_sidebar_nav_wrapper {
  max-height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;          /* Prevents the body from scrolling behind on mobile */
  /* scrollbar-gutter: stable both-edges;   Avoids layout jumps when the scrollbar appears */
}
@supports (height: 100dvh) {
  #kt_app_sidebar_nav_wrapper { max-height: 100dvh; }
}

/* Long submenus: internal scroll and contained height */
#sidebar .epmnuul.submenu {
  max-height: min(70vh, 480px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px; /* margin so the bar doesn’t cover text */
}

/* Subtle highlight when a submenu was “clamped” by height */
#sidebar .epmnuul.submenu.clamped {
  box-shadow: inset 0 -8px 8px -8px rgba(0,0,0,.2);
}

/* Client-reported case: Case studies without scrollbar */
#sidebar .epmnuul.submenu[data-section="case-studies"] {
  max-height: min(70vh, 520px);
  overflow: auto;
}

/* Respect iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  #kt_app_sidebar_nav_wrapper {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Light/Dark: inherit theme colors; don’t set “hard” colors */
#sidebar a { color: inherit; }
#sidebar a:hover { opacity: .9; }

/* Smooth transitions without dizziness and respecting reduced motion */
@media (prefers-reduced-motion: no-preference) {
  #sidebar .epmnuul.submenu { scroll-behavior: smooth; }
}

#kt_app_content .card-header .ms-3 img,
#kt_app_content .card-header .ms-3 svg {
  width: 35px !important;           /* desired size */
  height: 35px !important;          /* desired size */
  object-fit: contain;
  display: block;
  transform: translateY(0.5px); /* fine vertical adjustment, remove if not needed */
}

#mobile_suggest { text-align: left !important; }
#mobile_suggest a.mobile-suggest-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background: transparent !important; background-color: transparent !important;
  box-shadow: none !important; -webkit-tap-highlight-color: transparent;
  text-align: left !important; justify-content: flex-start !important;
}
#mobile_suggest a.mobile-suggest-item:hover,
#mobile_suggest a.mobile-suggest-item:focus,
#mobile_suggest a.mobile-suggest-item:active,
#mobile_suggest a.mobile-suggest-item.active{
  background: transparent !important; background-color: transparent !important;
  box-shadow: none !important; color: inherit !important;
}
#mobile_suggest .title{ color:#181C32 !important; text-align:left !important;background: transparent !important; }
#mobile_suggest .thumb{ display:block; border-radius:6px; }
/* (Optional but recommended) Suggestions from the mobile drawer */
#kt_drawer_suggest { text-align: left !important; }
#kt_drawer_suggest .title { 
  background: transparent !important; 
  color: var(--bs-body-color) !important;
}
#kt_drawer_suggest a.suggest-item{
  background: transparent !important;
  justify-content: flex-start !important;
}
#kt_drawer_suggest a.suggest-item:hover{
  background: transparent !important;
}
/* ===== MOBILE SEARCH: results 100% left-aligned and top-aligned ===== */
#mobile_results,
#mobile_results * { text-align: left !important; }

.mobile-results-list a{
  display: flex;
  justify-content: flex-start !important;  /* everything pushed to the left */
  align-items: flex-start !important;      /* thumbnail and text aligned to the top */
}

.mobile-results-list .meta{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;      /* titles left-aligned */
}

.mobile-results-list .title{
  margin: 0 !important;                    /* no vertical “jumps” */
  text-align: left !important;
}

/* Consistent thumbnail (in case some style centers it) */
.mobile-results-list .thumb{
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 6px; object-fit: cover;
}
/* ============================
   RELATED POSTS – black text in LIGHT theme
   ============================ */
html[data-bs-theme="light"] #kt_app_content :is(
  #related, #related-articles,
  .related, .related-posts, .related-articles,
  .ep-related, .block-related,
  .jp-relatedposts, .wp-block-jetpack-related-posts,
  .yarpp-related
){
  --rel-color: #181C32;                 /* Metronic’s “gray 900” */
  color: var(--rel-color) !important;
}

@media (max-width: 425px) { 
  .img-partner-archi { 
    max-height: 50px !important; 
    padding-right: 25px !important;
  } 
  .img-partner-ucl { 
    max-height: 50px !important; 
    padding: 0 25px 0 25px !important;
  } 
  .img-partner-spw { 
    max-height: 50px !important; 
    padding-left: 25px !important;
  } 
} 


html[data-bs-theme="dark"] .img-partner-archi {
  content: url("/assets/media/icons/energieplus/Architecture-et-climat-dark-mode.svg");
  height:75px; 
  object-fit:contain;
}

html[data-bs-theme="dark"] .img-partner-ucl {
  content: url("/assets/media/icons/energieplus/UCLouvain-dark-mode.svg");
  height:75px; 
  object-fit:contain;
}

html[data-bs-theme="dark"] .img-partner-spw {
  content: url("/assets/media/icons/energieplus/Wallonie-energie-SPW-dark-mode.svg");
  height:75px; 
  object-fit:contain;
}

html[data-bs-theme="dark"] .icon-open-dark {
  content: url("/assets/media/icons/energieplus/icon-open-dark.svg");
  background-color: #1B1C22;
  border-radius: 50%;
  padding: 8px;           /* space around the icon */
}

html[data-bs-theme="light"] #kt_app_content :is(
  #related, #related-articles,
  .related, .related-posts, .related-articles,
  .ep-related, .block-related,
  .jp-relatedposts, .wp-block-jetpack-related-posts,
  .yarpp-related
) :is(h2,h3,h4,h5,.card-title,.title,.meta,.excerpt,a,p,span){
  color: var(--rel-color) !important;   /* forces titles, links and meta */
}

/* In case utilities like .text-white arrive on links/titles */
html[data-bs-theme="light"] #kt_app_content :is(
  #related, #related-articles,
  .related, .related-posts, .related-articles,
  .ep-related, .block-related,
  .jp-relatedposts, .wp-block-jetpack-related-posts,
  .yarpp-related
) .text-white{
  color: var(--rel-color) !important;
}

/* =========================
   Youtube embed videos
========================= */
.energieplusyoutube{
  width: 530px;
  height: 315px;
  border-radius: 24px;
}

@media (min-width: 768px) {
  #kt_footer_sections > .row.g-4.align-items-center.mb-10 {
    --bs-gutter-x: 2rem !important;
  }

  #kt_footer_sections .bg-partners {
    padding-right: 1.25rem !important;
  }
}

#kt_footer_sections .img-partner-archi,
#kt_footer_sections .img-partner-ucl,
#kt_footer_sections .img-partner-spw {
  max-height: 75px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

#kt_footer_sections .img-partner-archi{
 padding-right: 50px;
}
#kt_footer_sections .img-partner-ucl{
 padding: 0 50px 0 50px;
}
#kt_footer_sections .img-partner-spw{
  padding-left: 50px;
}

#kt_footer_sections .d-grid > div {
  padding: 0.35rem 0 !important;
}

/* =======================================================
   ARTICLES & DOSSIERS — Unified card styles (mirror Dossiers)
   ======================================================= */

/* Token */
:root { --ep-card-radius: 16px; }

/* Shell: border, radius, shadow, transitions */
:is(#dossiers-list .dossier-card,
    #dossiers-list .card,
    #articles-list .article-card,
    #articles-list .card,
    #articles .card){
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.12));
  border-radius: var(--ep-card-radius);
  background: var(--bs-card-bg, var(--bs-body-bg));
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover lift */
:is(#dossiers-list .dossier-card,
    #dossiers-list .card,
    #articles-list .article-card,
    #articles-list .card,
    #articles .card):hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Body spacing */
:is(#dossiers-list .dossier-card .card-body,
    #dossiers-list .card .card-body,
    #articles-list .article-card .card-body,
    #articles-list .card .card-body,
    #articles .card .card-body){
  padding: 1rem 1rem 1.25rem;
}

/* Images (ratio + fallback) */
:is(#dossiers-list, #articles-list, #articles) .ratio { width:100%; }
:is(#dossiers-list, #articles-list, #articles) .ratio img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
:is(#dossiers-list, #articles-list, #articles)
  :is(.dossier-card, .article-card, .card) > img{
  width:100% !important; height:auto !important; object-fit:cover; display:block;
}

/* Titles/excerpts */
:is(#dossiers-list, #articles-list, #articles) :is(.card-title, .title){
  font-weight:700; line-height:1.25;
}
:is(#dossiers-list, #articles-list, #articles) :is(.excerpt, .card-text){
  margin-top:.35rem; color: var(--bs-body-color);
}

/* Tag/kicker */
:is(#articles-list, #dossiers-list) .news-tag{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.02em;
  color: var(--bs-gray-600); margin-bottom:.25rem;
}

/* Avoid forced full-height */
:is(#articles-list, #dossiers-list) .card.h-100{ height:auto !important; }

/* Dark mode borders */
:root[data-bs-theme="dark"]
  :is(#dossiers-list .dossier-card, #dossiers-list .card,
      #articles-list .article-card, #articles-list .card, #articles .card),
[data-bs-theme="dark"]
  :is(#dossiers-list .dossier-card, #dossiers-list .card,
      #articles-list .article-card, #articles-list .card, #articles .card),
.dark
  :is(#dossiers-list .dossier-card, #dossiers-list .card,
      #articles-list .article-card, #articles-list .card, #articles .card),
.theme-dark
  :is(#dossiers-list .dossier-card, #dossiers-list .card,
      #articles-list .article-card, #articles-list .card, #articles .card){
  border:1px solid var(--bs-border-color) !important;
  background-clip: padding-box;
  box-shadow:none;
}

/* System-dark fallback */
@media (prefers-color-scheme: dark){
  :is(#dossiers-list .dossier-card, #dossiers-list .card,
      #articles-list .article-card, #articles-list .card, #articles .card){
    border:1px solid var(--bs-border-color) !important;
    background-clip: padding-box;
    box-shadow:none;
  }
}

/* =======================================================
   HOMEPAGE — Announcements slider fixes
   Date: 2025-09-10
   ======================================================= */

/* 1) Dark mode: same background as cards (override teal) */
[data-bs-theme="dark"] #home-hero-news,
[data-bs-theme="dark"] #home-hero-news .card,
[data-bs-theme="dark"] #home-hero-news .card-body,
[data-bs-theme="dark"] #home-hero-news .col-lg-6:last-child,
[data-bs-theme="dark"] #home-hero-news .hero-news-panel{
  background: var(--bs-card-bg) !important; /* same bg as cards in dark */
}

/* Keep teal in light mode (no change in design) */
html[data-bs-theme="light"] #home-hero-news,
html[data-bs-theme="light"] #home-hero-news .card,
html[data-bs-theme="light"] #home-hero-news .card-body,
html[data-bs-theme="light"] #home-hero-news .col-lg-6:last-child,
html[data-bs-theme="light"] #home-hero-news .hero-news-panel{
  background: #0E3953 !important;
}

/* 2) Right column: vertically center content on desktop/tablet */
@media (min-width: 576px){
  #home-hero-news .col-lg-6:last-child{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* vertical center */
    align-items: flex-start !important;   /* left aligned text */
  }
  /* If wrapper .hero-inner exists, ensure it centers too */
  #home-hero-news .col-lg-6:last-child .hero-inner{
    margin-top: auto; 
    margin-bottom: auto;
  }
  /* Balanced spacing between inner blocks */
  #home-hero-news .col-lg-6:last-child :is(.text-uppercase.fs-7, h2, #hero-slide-excerpt, .hero-btn, .btn-success){
    margin-top: 0 !important;
    margin-bottom: clamp(8px, 1.2vw, 16px) !important;
  }
  #home-hero-news .col-lg-6:last-child #hero-slide-excerpt{
    margin-bottom: clamp(14px, 1.6vw, 22px) !important;
  }
}

/* 3) Remove top gap so the slider aligns with the left menu */
#kt_app_content > .app-container > #home-hero-news,
#kt_app_content > .app-container.container-xxl > #home-hero-news,
#home-hero-news{
  margin-top: 0 !important;
}

/* If the Home body class exists, ensure no top padding on content */
body.home #kt_app_content,
.home #kt_app_content{
  padding-top: 0 !important;
}

/* Guard: if the first child had any top margin, neutralize (Home only) */
#kt_app_content > .app-container > :first-child{
  margin-top: 0 !important;
}

/* NOTE: arrows remain unchanged on purpose */

/* =======================================================
   HOMEPAGE — Sidebar top alignment to hero/slider
   (forces the same top offset as the hero)
   ======================================================= */

/* Desktop only, so we don't affect the mobile drawer */
@media (min-width: 992px){
  /* If you want this site-wide (all pages): */
  #kt_app_sidebar{
    padding-top: 45px !important;  /* match the hero/slider */
    margin-top: 0 !important;      /* avoid stacking with previous nudges */
  }

  /* Prevent inner wrappers from re-adding gaps */
  #kt_app_sidebar .app-sidebar,
  #kt_app_sidebar .app-sidebar-wrapper,
  #kt_app_sidebar_nav_wrapper{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}


/* ========= NEWS: visible border (same as Dossiers) + dark mode ========= */

/* News cards in grid or standalone card */
.ep-news .card,
.news-grid .card,
.card.news-card,
.card.ep-news {
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.125)) !important;
  box-shadow: none !important; /* like Dossiers */
}

/* News lists (stacked items): bottom border only */
.ep-news-list .card,
.news-list .card {
  border: 0 !important;
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.125)) !important;
  box-shadow: none !important;
}

/* Avoid double border between consecutive items */
.ep-news-list .card + .card,
.news-list .card + .card {
  border-top: 0 !important;
}

/* Optional: if your theme does not define --bs-border-color in dark mode,
   force a pleasant fallback in dark */
@media (prefers-color-scheme: dark) {
  .ep-news .card,
  .news-grid .card,
  .card.news-card,
  .card.ep-news {
    border-color: rgba(255,255,255,.16) !important;
  }
  .ep-news-list .card,
  .news-list .card {
    border-bottom-color: rgba(255,255,255,.16) !important;
  }
}

/* ===== Mobile navbar search width & visuals ===== */
@media (max-width: 991.98px){
  /* allow the slot to expand between logo and gear */
  #mobile-search-slot { min-width: 0; flex: 1 1 auto; }

  /* keep pill-like look and left icon spacing */
  #search_mobile.form-control { height: 44px; border-radius: 12px; padding-left: 3rem; }

  /* left magnifier fixed position inside the input */
  #search_mobile_form .ki-magnifier { left: .9rem; pointer-events: none; color: var(--bs-primary); }
}

/* Desktop is untouched: keep your original widths (w-900px/mw-900px) */

/* ======= MOBILE HEADER: correct order and widths ======= */
@media (max-width: 991.98px) {
  /* 1) Remove the “gap” from the menu wrapper (the drawer still handles itself) */
  #kt_app_header_menu_wrapper {
    /* no longer a flex item that occupies width */
    display: contents !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* 2) The right bar (.app-navbar) expands and hosts search + gear */
  .app-navbar {
    flex: 1 1 auto !important;      /* allows it to grow between logo and right edge */
    min-width: 0 !important;         /* prevents the input from pushing the gear */
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  /* 3) The mobile search slot grows; the gear stays on the far right */
  #mobile-search-slot {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* gear block (no grow) */
  .app-navbar > .app-navbar-item#kt_header_user_menu_toggle {
    order: 2;
    flex: 0 0 auto !important;
  }

  /* 4) Logo always visible next to the hamburger (neutralize old rules) */
  .app-header-logo .logo { 
    display: inline-block !important; 
    max-width: 120px;                 /* adjust if needed on very small screens */
  }
  /* neutralize the old rule that hid the logo on iPhone X */
  @media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3){
    .app-header-logo .logo { display: inline-block !important; }
  }

  /* 5) Logo block does not reserve fixed width on mobile */
  [data-kt-app-sidebar-enabled="true"] .app-header-logo {
    width: auto !important;
    margin-right: 6px !important;
  }

  /* 6) The input truly fills the available space */
  #search_mobile_form { width: 100% !important; }
  #search_mobile       { width: 100% !important; }
}


/* ====================================
   HOME – Slider announcements (hero)
   ==================================== */

/* Slider images: NO rounded corners */
#home-hero-news .hero-left .hero-img,
#home-hero-news .hero-left .hero-img img,
#announcements-slider img,
.announcements-slider img {
  border-radius: 0 !important;
}

/* Slider text panel background */
#home-hero-news .hero-right,
#announcements-slider .slide-caption,
.announcements-slider .slide-caption,
#home-hero-news .hero-right  {
  background-color: #0E3953 !important;
  color: #fff !important;
}

/* Text inside the panel: white (readable) */
#home-hero-news .hero-right .kicker,
#home-hero-news .hero-right h2,
#home-hero-news .hero-right p,
#home-hero-news .hero-right a {
  color: #fff !important;
}

/* control of gap + image border radius */
#home-news { 
  --news-img-gap: .75rem; 
  --news-img-radius: .85rem; /* = .rounded */
}

#home-news .news-grid article.card > .ratio {
  width: calc(100% - (var(--news-img-gap) * 2)) !important;
  margin: var(--news-img-gap) auto 0 !important;

  border: 1px solid var(--bs-border-color);
  border-radius: var(--news-img-radius) !important; /* image radius */
  overflow: hidden;
}

/* ensure the image inherits the same radius (in case utilities override it) */
#home-news .news-grid article.card > .ratio > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit !important; /* uses the .85rem of the container */
}


/* =======================================
   HOME — Articles (next to Webinars): clone Dossiers shadow/hover
   ======================================= */
#home-news .news-grid article.card {
  /* exact same base shadow/transition as Dossiers */
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
#home-news .news-grid article.card:hover {
  /* exact same hover lift/shadow as Dossiers */
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
}
/* HOME — News/Articles: keep titles color; remove blue hover */
#home-news .news-grid article.card :is(h2, h3, .card-title, .title) a {
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

#home-news .news-grid article.card :is(h2, h3, .card-title, .title) a:hover,
#home-news .news-grid article.card :is(h2, h3, .card-title, .title) a:focus,
#home-news .news-grid article.card :is(h2, h3, .card-title, .title) a:active,
#home-news .news-grid article.card :is(h2, h3, .card-title, .title) a:visited {
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

/* ================================================
   SEARCH — Suggest dropdown styled like results table
   ================================================ */

#search_suggest { padding: 0 !important; } /* table will handle gutters */

#search_suggest .suggest-table-wrap {
  width: 100%;
  overflow: hidden; /* keeps rounded corners if any */
}

#search_suggest .suggest-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#search_suggest .suggest-table tbody tr {
  cursor: pointer;
}

#search_suggest .suggest-table td {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.14));
  padding: .6rem .7rem;
  vertical-align: middle;
}

/* last row without bottom border */
#search_suggest .suggest-table tbody tr:last-child td {
  border-bottom: 0;
}

/* zebra like #search_result */
#search_suggest .suggest-table tbody tr:nth-child(odd) td {
  background: rgba(0,0,0,.03);
}
html[data-bs-theme="dark"] #search_suggest .suggest-table tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,.04);
}

/* hover like #search_result */
#search_suggest .suggest-table tbody tr:hover td {
  background: rgba(0,0,0,.05);
}
html[data-bs-theme="dark"] #search_suggest .suggest-table tbody tr:hover td {
  background: rgba(255,255,255,.07);
}

html[data-bs-theme="dark"] :is(tbody, td, tfoot, th, thead, tr) {
  background-color: #15171C;
}

/* columns */
#search_suggest .suggest-table .sg-thumb {
  width: 52px; /* enough for 44px image + padding */
  padding-right: .4rem;
}
#search_suggest .suggest-table .sg-thumb img {
  width: 44px; height: 44px;
  object-fit: cover;
  display: block;
  border-radius: .375rem; /* matches results look */
}

#search_suggest .suggest-table .sg-main {
  overflow: hidden;
}

#search_suggest .suggest-table .sg-title {
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* two lines max like results */
}

/* keep title color; remove blue hover/visited */
#search_suggest .suggest-table .sg-title a {
  color: inherit !important;
  text-decoration: none !important;
}
#search_suggest .suggest-table .sg-title a:hover,
#search_suggest .suggest-table .sg-title a:focus,
#search_suggest .suggest-table .sg-title a:active,
#search_suggest .suggest-table .sg-title a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

#search_suggest .suggest-table .sg-tags {
  font-size: .8rem;
  opacity: .75;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dark mode borders alignment with results */
html[data-bs-theme="dark"] #search_suggest .suggest-table td {
  border-bottom-color: rgba(255,255,255,.18) !important;
}

/* ============================================================
   Search titles → force primary (blue/light blue)
   - Suggestions (desktop and mobile, GFG and drawer)
   - Mobile results (list and drawer table)
   - Keep desktop as-is (in case a theme rewrites it)
   ============================================================ */

/* --- Desktop dropdown suggestions (#search_suggest) --- */
#search_suggest .sg-title a,
#search_suggest a.dropdown-item,
#search_suggest a.dropdown-item .title {
  color: var(--bs-primary) !important;
  text-decoration: none;
}
#search_suggest .sg-title a:hover,
#search_suggest a.dropdown-item:hover,
#search_suggest a.dropdown-item .title:hover {
  text-decoration: underline;
}

/* --- GFG modal (suggestions inside the modal) --- */
#GFG #search_suggest .sg-title a,
#GFG #search_suggest a.dropdown-item,
#GFG #search_suggest a.dropdown-item .title,
#GFG .mobile-suggest-item .title {
  color: var(--bs-primary) !important;
  text-decoration: none;
}
#GFG #search_suggest .sg-title a:hover,
#GFG .mobile-suggest-item .title:hover {
  text-decoration: underline;
}

/* --- Drawer mobile suggestions --- */
#kt_drawer_suggest .suggest-item .title {
  color: var(--bs-primary) !important;
  text-decoration: none;
}
#kt_drawer_suggest .suggest-item .title:hover {
  text-decoration: underline;
}

/* --- Mobile sheet suggestions (id=mobile_suggest) --- */
#mobile_suggest .mobile-suggest-item .title {
  color: var(--bs-primary) !important;
  text-decoration: none;
}
#mobile_suggest .mobile-suggest-item .title:hover {
  text-decoration: underline;
}

/* --- Desktop results (safety; they’re already fine) --- */
#kt_table_results tbody td:nth-child(2) a,
#kt_results_table tbody td:nth-child(2) a {
  color: var(--bs-primary) !important;
}

/* --- Mobile results (list in header_* → #search_results_mobile) --- */
#search_results_mobile .title,
#search_results_mobile .title a,
#results_list .title,
#results_list .title a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#search_results_mobile .title a:hover,
#results_list .title a:hover {
  text-decoration: underline;
}

/* --- Ensure :visited status also on primary --- */
#search_suggest a:visited,
#kt_table_results a:visited,
#kt_results_table a:visited,
#search_results_mobile a:visited,
#kt_drawer_suggest a:visited,
#mobile_suggest a:visited {
  color: var(--bs-primary) !important;
}

/* ===================================================================
SEARCH — Force primary color (blue/light blue) on titles
Applies to:
- Desktop suggestions (#search_suggest)
- Mobile results (list/modal and drawer table)
=============================================================== */

/* --- DESKTOP SUGGESTIONS (dropdown) ----------------------- */
/* Primary anchor in row rendered by wp_suggest() */
#search_suggest .sg-title > a,
#search_suggest .suggest-table .sg-main > a,
#search_suggest .suggest-table .sg-main .sg-title > a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#search_suggest .sg-title > a:hover,
#search_suggest .suggest-table .sg-main > a:hover,
#search_suggest .suggest-table .sg-main .sg-title > a:hover {
  text-decoration: underline;
}

/* extra fallback in case some utility class overrides the color */
#search_suggest .suggest-table a.text-gray-900 {
  color: var(--bs-primary) !important;
}

/* --- MOBILE RESULTS (list in modals/templates) -------- */
/* header_post: <ul id="results_list"> with .title */
#results_list .title,
#results_list .title a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#results_list .title a:hover {
  text-decoration: underline;
}

/* mobile “sheet” (if used): #mobile_results / #mobile_results_list */
#mobile_results .mobile-results-list .mobile-result-item .meta .title,
#mobile_results .mobile-results-list .mobile-result-item .meta .title a,
#mobile_results_list .mobile-result-item .meta .title,
#mobile_results_list .mobile-result-item .meta .title a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#mobile_results .mobile-results-list .mobile-result-item .meta .title a:hover,
#mobile_results_list .mobile-result-item .meta .title a:hover {
  text-decoration: underline;
}

/* drawer/table on mobile: second column (Title) */
@media (max-width: 991.98px) {
  #kt_results_table tbody td:nth-child(2) a {
    color: var(--bs-primary) !important;
    text-decoration: none;
    font-weight: 600;
  }
  #kt_results_table tbody td:nth-child(2) a:hover {
    text-decoration: underline;
  }
}

/* --- MOBILE SUGGESTIONS (in case there is a simple list) -------------- */
#kt_drawer_suggest .suggest-item .title,
#mobile_suggest .mobile-suggest-item .title,
#GFG #search_suggest .sg-title a,
#GFG .mobile-suggest-item .title {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#kt_drawer_suggest .suggest-item .title:hover,
#mobile_suggest .mobile-suggest-item .title:hover,
#GFG #search_suggest .sg-title a:hover,
#GFG .mobile-suggest-item .title:hover {
  text-decoration: underline;
}

/* --- State :visited consistent in all contexts -------- */
#search_suggest a:visited,
#kt_table_results a:visited,
#kt_results_table a:visited,
#results_list a:visited,
#mobile_results a:visited,
#kt_drawer_suggest a:visited,
#mobile_suggest a:visited {
  color: var(--bs-primary) !important;
}

/* --- Green badges on mobile (categories) --------------------- */
#results_list .badge.badge-light-success,
#mobile_results .badge.badge-light-success,
#kt_results_table .badge.badge-light-success {
  filter: none !important; /* prevent theme overwrites */
}

/* ===================================================================
SEARCH (Mobile) — Force primary color on result titles
Applies to:
- Mobile list in modals/header (#search_results_mobile / #results_list)
- Mobile list in sheet (#mobile_results / #mobile_results_list)
- Mobile drawer table (#kt_results_table) already had a rule, we keep it
================================================================= */

/* Mobile lists (modal/header and general header) */
#search_results_mobile a,
#search_results_mobile .title,
#search_results_mobile .title a,
#results_list a,
#results_list .title,
#results_list .title a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#search_results_mobile a:hover,
#results_list a:hover {
  text-decoration: underline;
}

/* Mobile sheet */
#mobile_results .mobile-results-list .mobile-result-item .meta .title,
#mobile_results .mobile-results-list .mobile-result-item .meta .title a,
#mobile_results_list .mobile-result-item .meta .title,
#mobile_results_list .mobile-result-item .meta .title a {
  color: var(--bs-primary) !important;
  text-decoration: none;
  font-weight: 600;
}
#mobile_results .mobile-results-list .mobile-result-item .meta .title a:hover,
#mobile_results_list .mobile-result-item .meta .title a:hover {
  text-decoration: underline;
}

/* Drawer/table on mobile (2nd col → title) */
@media (max-width: 991.98px) {
  #kt_results_table tbody td:nth-child(2) a {
    color: var(--bs-primary) !important;
    text-decoration: none;
    font-weight: 600;
  }
  #kt_results_table tbody td:nth-child(2) a:hover {
    text-decoration: underline;
  }
}

/* ====== SEARCH: Mobile – force blue in GFG modal titles and lists ====== */
@media (max-width: 991.98px){
/* GFG modal results (2nd column = title) */
  #GFG #gfg_results_table tbody td:nth-child(2) a {
    color: var(--bs-primary) !important;
    text-decoration: none !important;
    font-weight: 600;
  }
  #GFG #gfg_results_table tbody td:nth-child(2) a:hover {
    text-decoration: underline !important;
  }

  /* Reinforcement for mobile lists (in case any previous rule overrides the color) */
  #mobile_results .mobile-results-list .meta .title,
  #mobile_results .mobile-results-list .meta .title a,
  #mobile_results_list .mobile-result-item .meta .title,
  #mobile_results_list .mobile-result-item .meta .title a,
  #results_list .title,
  #results_list .title a {
    color: var(--bs-primary) !important;
    text-decoration: none !important;
    font-weight: 600;
  }
  #mobile_results .mobile-results-list .meta .title a:hover,
  #mobile_results_list .mobile-result-item .meta .title a:hover,
  #results_list .title a:hover {
    text-decoration: underline !important;
  }
}

/* ====== MOBILE: smooth scrolling in drawer/sheet and modal ====== */
@media (max-width: 991.98px){
  .mobile-search-sheet {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #GFG .modal-body{
    max-height: calc(100vh - 160px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
#articles .kicker,
#articles .badge,
#articles .category,
#articles [class*="kicker"],
#articles [class*="tag"],
#articles-list .kicker,
#articles-list .badge,
#articles-list .category,
#articles-list [class*="kicker"],
#articles-list [class*="tag"] {
  text-transform: uppercase !important;
}

/* Adjust search input padding in mobile version */
@media (max-width: 991.98px) {
  /* Drawer mobile */
  #kt_search_drawer #kt_drawer_query,
  /* Modal mobile GFG */
  #GFG #search,
  /* Custom mobile sheet (if you have one) */
  #mobile_search_input {
    padding-left: .6rem !important;
    padding-right: .6rem !important; /* ← fixed: .6rem */
  }
}

/* Hide the ki-magnifier icon ONLY inside popups/drawers/mobile sheet */
#GFG .ki-magnifier,
#GFG .ki-magnifier::before,
#kt_search_drawer .ki-magnifier,
#kt_search_drawer .ki-magnifier::before,
#mobile_search_sheet .ki-magnifier,
#mobile_search_sheet .ki-magnifier::before{
  content: none !important;
  display: none !important;
}

/* Modal #GFG: never wider than the screen on iOS */
#GFG .modal-dialog { margin: 0 auto !important; }
@supports (width: 100dvw) {
  #GFG .modal-dialog {
    max-width: min(900px, calc(100dvw - 24px)) !important;
    width: calc(100dvw - 24px) !important;
  }
}
@supports not (width: 100dvw) {
  #GFG .modal-dialog {
    max-width: min(900px, calc(100vw - 24px)) !important;
    width: calc(100vw - 24px) !important;
  }
}

/* Result Drawer: width also contained */
@supports (width: 100dvw) {
  #kt_search_drawer.drawer {
    width: min(900px, calc(100dvw - 24px)) !important;
  }
}
@supports not (width: 100dvw) {
  #kt_search_drawer.drawer {
    width: min(900px, calc(100vw - 24px)) !important;
  }
}

/* Injected moving sheet: exact width + safe areas */
@supports (width: 100dvw) {
  #mobile_search_sheet { width: 100dvw !important; max-width: 100dvw !important; }
}
#mobile_search_sheet {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* ===== iOS/mobile: the popup ALWAYS takes up the width of the phone ===== */
@media (max-width: 991.98px){
 /* Metronic Drawer */
  #kt_search_drawer{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; /* full-bleed */
    width: 100dvw !important;         /* iOS/Android: viewport visual */
    max-width: 100dvw !important;
    margin: 0 !important;
    overflow: hidden !important;       /* no side scrolling of the container */
    -webkit-overflow-scrolling: touch;
  }
  #kt_search_drawer .card{
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;         /* screen height, keyboard-aware on modern iOS */
    border-radius: 0 !important;
  }

/* If you use your own sheet */
  .mobile-search-sheet{
    left: 0 !important; right: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
  }

 /* If in some cases you open Bootstrap modal */
  #GFG .modal-dialog{
    margin: 0 auto !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
  }

/* Fallback for engines without dvw (or old iOS) */
  @supports not (width: 100dvw){
    #kt_search_drawer, .mobile-search-sheet, #GFG .modal-dialog{
      width: -webkit-fill-available !important;
      max-width: -webkit-fill-available !important;
    }
  }

  /* Safe areas of the notch within the popup content */
  #kt_search_drawer .card,
  .mobile-search-sheet,
  #GFG .modal-content{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

 /* Nothing inside the popup should “break” the width */
  #kt_search_drawer .table-responsive{ overflow-x: auto; }
  #kt_search_drawer img{ max-width: 100% !important; height: auto !important; }
  #kt_results_table, #kt_results_table_wrapper{ width: 100% !important; }

 /* Kill global horizontal scrolling on mobile */
  html, body{ max-width: 100%; overflow-x: hidden !important; }
}

/* Force nothing to go outside the card */
.card .card-body {
  overflow: hidden;
  word-wrap: break-word;
}

.card .card-body img,
.card .card-body iframe,
.card .card-body table {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Container behaves like Bootstrap .row (no gap so columns still sum to 100%) */
.energieplus_related_articles{
  display: flex;
  flex-wrap: wrap;
  --eplus-gutter-x: var(--bs-gutter-x, 1.2rem);
  margin-left: calc(var(--eplus-gutter-x) * -0.5);
  margin-right: calc(var(--eplus-gutter-x) * -0.5);
  padding-bottom: 20px;
}

/* Direct column children (equivalent to .row > *) */
.energieplus_related_articles > [class*="col-"]{
  box-sizing: border-box;
  padding-left: calc(var(--eplus-gutter-x) * 0.5);
  padding-right: calc(var(--eplus-gutter-x) * 0.5);
}

/* Remove extra margin from the anchor that widens the card */
.energieplus_related_articles .ratio.m-3{ margin: 0 !important; }

/* Prevent overflow and keep images nicely cropped */
.energieplus_related_articles .ratio{ overflow: hidden; border-radius: 12px; }
.energieplus_related_articles .ratio img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle elevation baseline + stronger hover; do NOT remove borders */
.energieplus_related_articles .card.hover-shadow {
  /* baseline shadow so the bottom never looks "cut" */
  box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
  transition: box-shadow .2s ease, transform .2s ease;
  border: 1px solid var(--bs-border-color); /* keep border visible in light/dark */
}

.energieplus_related_articles .card.hover-shadow:hover {
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15));
  transform: translateY(-2px);
}

/* safety: make sure shadows aren't clipped by any parent */
.energieplus_related_articles,
.energieplus_related_articles > [class*="col-"] {
  overflow: visible;
}

/* Baseline shadow + border for related cards (always on) */
.energieplus_related_articles .card {
  box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075)) !important;
  border: 1px solid var(--bs-border-color) !important;
  transition: box-shadow .2s ease, transform .2s ease;
  transform: translateZ(0);               /* avoid paint cutoffs on some GPUs */
  will-change: transform, box-shadow;
}

/* Elevation on hover (trigger on card OR its column wrapper) */
.energieplus_related_articles .card:hover,
.energieplus_related_articles > [class*="col-"]:hover .card {
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15)) !important;
  transform: translateY(-2px);
}

/* Prevent clipping of the shadow by parents */
.energieplus_related_articles,
.energieplus_related_articles > [class*="col-"] {
  overflow: visible;
}
/* Baseline shadow + border for related cards */
.energieplus_related_articles .card {
  box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
  border: 1px solid var(--bs-border-color);
  transition: box-shadow .2s ease, transform .2s ease;
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

/* Elevation on hover (same feel as home) */
.energieplus_related_articles .card:hover,
.energieplus_related_articles > [class*="col-"]:hover .card {
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15));
  transform: translateY(-2px);
}

/* Ensure shadows are not clipped */
.energieplus_related_articles,
.energieplus_related_articles > [class*="col-"] {
  overflow: visible;
}

#home-news .card-title .card-label,
#webinars .card-title .card-label,
#dossiers-card .card-title .card-label {
  font-size: 1.5rem;
}

/* === POST CONTENT: avoid overflows inside the card ======================= */
/* Supports .entry-content, #post-content and .post-content */
:is(.entry-content, #post-content, .post-content) {
  display: flow-root;          /* avoids margin-collapse and clears floats */
  /* overflow-wrap: anywhere;     splits very long words */
  /* word-break: break-word; */
  overflow-x: hidden;          /* safety net against a phantom px */
}

/* No WP element should exceed the container width */
:is(.entry-content, #post-content, .post-content) img,
:is(.entry-content, #post-content, .post-content) figure,
:is(.entry-content, #post-content, .post-content) .wp-caption,
:is(.entry-content, #post-content, .post-content) iframe,
:is(.entry-content, #post-content, .post-content) video,
:is(.entry-content, #post-content, .post-content) table,
:is(.entry-content, #post-content, .post-content) pre {
  max-width: 100% !important;
}

/* WP often injects fixed width on figure/caption → clamp fully */
:is(.entry-content, #post-content, .post-content) figure,
:is(.entry-content, #post-content, .post-content) .wp-caption {
  width: 100% !important;
}
:is(.entry-content, #post-content, .post-content) figure > img,
:is(.entry-content, #post-content, .post-content) .wp-caption img,
:is(.entry-content, #post-content, .post-content) .wp-block-image img {
  width: 100% !important;
  height: auto !important;
}

/* Responsive iframes and videos */
:is(.entry-content, #post-content, .post-content) iframe,
:is(.entry-content, #post-content, .post-content) video,
:is(.entry-content, #post-content, .post-content) .wp-block-embed__wrapper iframe {
  width: 100% !important;
  height: auto;
  max-height: 80vh;
  display: block;
}

/* Long tables: horizontal scroll inside the card (without breaking layout) */
:is(.entry-content, #post-content, .post-content) table {
  display: block;
  width: 100% !important;
  overflow-x: auto;
  border-collapse: collapse;
}
/* :is(.entry-content, #post-content, .post-content) table td,
:is(.entry-content, #post-content, .post-content) table th {
  word-break: break-word;
} */

/* Long code with wrap and/or horizontal scroll */
:is(.entry-content, #post-content, .post-content) pre,
:is(.entry-content, #post-content, .post-content) code,
:is(.entry-content, #post-content, .post-content) kbd,
:is(.entry-content, #post-content, .post-content) samp {
  white-space: pre-wrap;
  word-break: break-word;
}
:is(.entry-content, #post-content, .post-content) pre { overflow-x: auto; }

/* Gutenberg blocks with alignments: never exceed */
:is(.entry-content, #post-content, .post-content) .wp-block-image,
:is(.entry-content, #post-content, .post-content) .wp-block-gallery,
:is(.entry-content, #post-content, .post-content) .aligncenter,
:is(.entry-content, #post-content, .post-content) .alignleft,
:is(.entry-content, #post-content, .post-content) .alignright,
:is(.entry-content, #post-content, .post-content) .alignwide,
:is(.entry-content, #post-content, .post-content) .alignfull {
  max-width: 100% !important;
}

/* Prevent the last margin from visually “jumping” outside the card */
:is(.entry-content, #post-content, .post-content) > :last-child { margin-bottom: 0; }

/* On mobile, disable floats of aligned images */
@media (max-width: 768px) {
  :is(.entry-content, #post-content, .post-content) .alignleft,
  :is(.entry-content, #post-content, .post-content) .alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Sidebar: container with its own scroll and stable height */
#kt_aside,
#kt_aside_menu {
  height: 100vh;
  overflow: hidden;
}

#kt_aside_menu .menu-wrapper,
#kt_aside_menu .menu {
  max-height: calc(100vh - 80px); /* adjust the 80px to your header */
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 0.75rem;
}

/* Avoid “jumps” due to scrollbar appearing/disappearing */
html { scrollbar-gutter: stable both-edges; }

/* Energieplus Loader */


.eplusloader {
height: 200px;
  aspect-ratio: 1;
  position: relative;
  width: 200px;
  margin: auto;
}

.eplusloader .eplusbox {
  position: absolute;
  background: rgba(100, 100, 100, 0.15);
  background: linear-gradient(0deg, rgba(50, 50, 50, 0.2) 0%, rgba(100, 100, 100, 0.2) 100%);
  border-radius: 50%;
  border-top: 1px solid #646464;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px 0px;
  backdrop-filter: blur(5px);
  animation: ripple 2s infinite ease-in-out;
}

.eplusloader .eplusbox:nth-child(1) {
  inset: 40%;
  z-index: 99;
}

.eplusloader .eplusbox:nth-child(2) {
  inset: 30%;
  z-index: 98;
  border-color: rgba(100, 100, 100, 0.8);
  animation-delay: 0.2s;
}

.eplusloader .eplusbox:nth-child(3) {
  inset: 20%;
  z-index: 97;
  border-color: rgba(100, 100, 100, 0.6);
  animation-delay: 0.4s;
}

.eplusloader .eplusbox:nth-child(4) {
  inset: 10%;
  z-index: 96;
  border-color: rgba(100, 100, 100, 0.4);
  animation-delay: 0.6s;
}

.eplusloader .eplusbox:nth-child(5) {
  inset: 0%;
  z-index: 95;
  border-color: rgba(100, 100, 100, 0.2);
  animation-delay: 0.8s;
}

.eplusloader .epluslogo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 30%;
}

.eplusloader .epluslogo svg {
  fill: grey;
  width: 100%;
  animation: color-change 2s infinite ease-in-out;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px 0px;
  }

  50% {
    transform: scale(1.3);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px 0px;
  }

  100% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px 0px;
  }
}

@keyframes color-change {
  0% {
    fill: grey;
  }

  50% {
    fill: white;
  }

  100% {
    fill: grey;
  }
}

.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a { color: var(--bs-primary) !important; }


.energiepluswpimage {border-radius: 0px !important;}
.footnote_referrer {display: none !important;}
/* ===== Related Articles — 20px gap on mobile ===== */

@media (max-width: 576px) {
  /* most common wrappers */
.energieplus_related_articles{gap: 20px}

}

/* =========================================================
   SIDEBAR — Home without scrolling; categories with scrolling if necessary
   Unifies a single scrollable container and eliminates fixed heights
   ========================================================= */

/* Adjust this offset if your sidebar header occupies a different height */
:root { --sidebar-offset: 45px; }  /* 45px ≈ padding-top you applied to the sidebar */

/* Do not reserve scrollbar channel on desktop */
@media (min-width: 992px){
  html { scrollbar-gutter: auto !important; }
}

/* ---------- Reset fixed heights inherited from the old menu ---------- */
@media (min-width: 992px){
  #epsidemenu,
  .epmnuul,
  .epmnuul:first-child,
  .epmnuul:first-child > li {
    height: auto !important;         /* override 1864px / 814px */
  }
}

/* ---------- A single scroller for the sidebar (wrapper) ---------- */
@media (min-width: 992px){
  /* The top container does NOT clip: we let the wrapper scroll */
  #kt_aside,
  #kt_aside_menu {
    height: auto !important;
    overflow: visible !important;     /* override previous overflow:hidden */
  }

  /* ONLY scrollable container: appears ONLY if there is overflow */
  #kt_app_sidebar_nav_wrapper{
    max-height: calc(100dvh - var(--sidebar-offset)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: auto !important;     /* Firefox */
    -ms-overflow-style: auto !important;  /* IE/old Edge */
    scrollbar-gutter: auto !important;    /* no reserved channel */
  }

 /* Avoid nested slashes on inner levels */
  #kt_aside_menu .menu-wrapper,
  #kt_aside_menu .menu,
  #kt_app_sidebar #epsidemenu ul.submenu {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0.5rem; /* small respite without forcing overflow */
  }
}

/* ---------- HOME: no internal scroll (but still “auto” if ever needed) ---------- */
@media (min-width: 992px){
  body.home #kt_app_sidebar_nav_wrapper,
  body.front-page #kt_app_sidebar_nav_wrapper,
  body.blog #kt_app_sidebar_nav_wrapper{
    /* Normally, there will be no overflow at Home; we keep auto and
    explicitly state that no channel will be reserved or clipped by mistake */
    max-height: calc(100dvh - var(--sidebar-offset)) !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
  }

  /* In case any previous style hid or forced the bar in Home */
  body.home #kt_aside_menu .menu-wrapper,
  body.front-page #kt_aside_menu .menu-wrapper,
  body.blog #kt_aside_menu .menu-wrapper,
  body.home #kt_aside_menu .menu,
  body.front-page #kt_aside_menu .menu,
  body.blog #kt_aside_menu .menu {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* ---------- CATEGORIES / SUBCATEGORIES: scroll if content exceeds container ---------- */
@media (min-width: 992px){
  /* WP usually marks categories/archives like this; add other body classes if you use them (e.g. .tax-*) */
  body.category  #kt_app_sidebar_nav_wrapper,
  body.archive   #kt_app_sidebar_nav_wrapper,
  body.tag       #kt_app_sidebar_nav_wrapper,
  body.taxonomy  #kt_app_sidebar_nav_wrapper {
    max-height: calc(100dvh - var(--sidebar-offset)) !important;
    overflow-y: auto !important;   /* if the list is long, the bar appears */
  }
}

/* Sidebar: Hide the sidebar on desktop by default; show it if needed */
@media (min-width: 992px){
  #kt_app_sidebar_nav_wrapper{
    overflow-y: hidden;          /* base: without scroll */
    scrollbar-width: none;       /* Firefox */
  }
  #kt_app_sidebar_nav_wrapper::-webkit-scrollbar{ width:0; height:0; } /* WebKit */

  /* When JS detects overflow and it is NOT Home, we enable visible scroll */
  #kt_app_sidebar_nav_wrapper.show-scrollbar{
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #kt_app_sidebar_nav_wrapper.show-scrollbar::-webkit-scrollbar{ width: 8px; height: 8px; }
}

/* 404: hide side menu and top text */
body.error404 #kt_app_sidebar,
body.error404 #epsidemenu,
body.error404 .sidebar-top-text { display: none !important; }

/* Desktop: scrollbar only if necessary */
@media (min-width: 992px){
  #kt_app_sidebar_nav_wrapper { overflow-y: hidden; }
  #kt_app_sidebar_nav_wrapper.show-scrollbar { overflow-y: auto; }
}

/* === E+ SIDEBAR HOTFIX: neutralize old heights and overflow === */
@media (min-width: 992px){
  #epsidemenu,
  .epmnuul,
  .epmnuul:first-child,
  .epmnuul:first-child > li{
    height: auto !important;   /* override fixed 1864/814px */
  }
  #epsidemenu{ overflow: visible !important; }
}
/* === E+ SIDEBAR HOTFIX: wrapper with permanent “auto” scroll on desktop === */
@media (min-width: 992px){
  #kt_app_sidebar_nav_wrapper{
    max-height: calc(100dvh - var(--sidebar-offset)) !important;
    overflow-y: auto !important;      /* instead of hidden */
    overflow-x: hidden !important;
  }
}

/* === E+ SIDEBAR DRILLDOWN STYLES ===================== */
#epsidemenu .epmnu-item .epmnu-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 10px; border-radius:4px; text-decoration:none;
}
#epsidemenu .epmnu-item.is-active > .epmnu-link{
  background:#c40000; color:#fff;   /* active red */
}
#epsidemenu .submenu{
  margin:6px 0 6px 12px; padding-left:10px;
  border-left:1px solid rgba(0,0,0,.08);
}

#epsidemenu .epmnu-caret{ width:12px; height:12px; margin-left:8px; position:relative; flex:0 0 12px; }
#epsidemenu .epmnu-caret::before{
  content:'';
  position:absolute; left:0; top:2px;
  width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid currentColor;
  transform: rotate(0deg);
}
#epsidemenu .epmnu-caret.is-open::before{ transform: rotate(90deg); }

#epsidemenu .epmnu-back{ margin:6px 0 8px; }
#epsidemenu .epmnu-back .btn-back{
  display:none; background:transparent; border:0; color:inherit;
  padding:6px 8px; cursor:pointer; font:inherit;
}

/* healthy scrolling on desktop (if you didn’t already apply it) */
@media (min-width: 992px){
  #kt_app_sidebar_nav_wrapper{
    max-height: calc(100dvh - 120px);   /* adjust 120px if header/breadcrumb change */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* --- Sidebar safety: allow scrolling in long lists --- */
#kt_app_sidebar_nav_wrapper { overflow-y: auto !important; }
#epsidemenu .epmnuul.noscroll { overflow-y: auto !important; }  /* in case some edge case leaves it applied */
/* === Sidebar: allow viewing ALL subcategories ======================= */
/* The sidebar wrapper must be able to scroll if needed */
#kt_app_sidebar_nav_wrapper { 
  overflow-y: auto !important; 
}

/* By default, the lists can scroll on Y (when they are long) */
#epsidemenu .epmnuul { 
  overflow-y: auto; 
}


/* Keep the active header (red background) always visible within its list */
#epsidemenu .epmnuul > li > a.title { 
  position: sticky; 
  top: 0; 
  z-index: 5; 
}

/* (Optional) if you want a taller “frame” before the scrollbar appears */
#kt_app_sidebar_nav_wrapper { 
  max-height: calc(100vh - 120px) !important; /* adjust 120px if needed */
}

/* ===== iOS Safari zoom fix for inputs (iPhone) ===== */
@media (max-width: 991.98px) {
  /* Limitar el alcance al buscador y a inputs comunes */
  input[type="search"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  .mobile-search-input {
    font-size: 16px !important;
  }

  /* Coherencia del placeholder */
  input::placeholder,
  textarea::placeholder {
    font-size: 16px;
  }
}