/* =========================================================
   PERFECT PORTAL MEGA MENU (FINAL CLEAN CSS)
   - Complex panels align to container-left via JS vars
   - Simple panels are smaller + centred within container
   IMPORTANT:
   - DO NOT add another .c-sd-pp-panel or .c-sd-pp-top-item rule below this.
   ========================================================= */

/* Wrapper */
.c-sd-pp-mega-menu{
  position: relative;
  width: 100%;
}

/* Top bar should be horizontal */
.c-sd-pp-mega-menu .c-sd-pp-top{
  display: flex;
  gap: var(--top-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: right;
  margin-right: var(--margin-right);
}

@media (max-width: 1224px){
	.c-sd-pp-mega-menu .c-sd-pp-top{
		 gap:40px;	
		 margin-right: 40px;
	}
}
@media (max-width: 1078px){
	.c-sd-pp-mega-menu .c-sd-pp-top{
		 gap:24px;	
		 margin-right: 24px;
	}
}


/* Hide WP default nested sub menus completely */
.c-sd-pp-mega-menu ul.sub-menu{
  display: none !important;
}

/* IMPORTANT: keep panels anchored to the menu wrapper, NOT each li */
.c-sd-pp-mega-menu .c-sd-pp-top-item{
  position: static; /* critical */
}

/* Links */
.c-sd-pp-mega-menu .c-sd-pp-top-item > a{
  text-decoration: none;
  color: var(--top-link-color, #FFF);
  text-align: center;

  font-family: Roboto;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 130% !important;
  letter-spacing: 0.8px !important;

  display: inline-flex;
  align-items: center;
  gap: var(--topmenu_arrow_gap);
}

.c-sd-pp-mega-menu .c-sd-pp-top-item > a:focus,
.c-sd-pp-mega-menu .c-sd-pp-top-item > a:focus-within{
  outline: none;
}

/* Top chevron */
.c-sd-pp-mega-menu .c-sd-pp-top-item.has-mega > a::after{
  content: '\f078'; /* chevron-down */
  font-family: "Font Awesome 7 Pro";
  font-size: 12px;
  transition: transform 0.2s ease;
}

.c-sd-pp-mega-menu .c-sd-pp-top-item.has-mega > a[aria-expanded="true"]::after{
  content: '\f077'; /* chevron-up */
}

/* =========================================================
   PANEL POSITIONING (authoritative)
   JS sets:
     --panel-left
     --panel-effective-width
   ========================================================= */
.c-sd-pp-mega-menu .c-sd-pp-panel{
  position: absolute;
  top: 100%;
  left: var(--panel-left, 0px);
  width: var(--panel-effective-width, 100%);
  max-width: calc(100vw - 40px);
  transform: translateY(var(--panel-offset, 20px));

  display: none;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,.15);
  z-index: 9999;
  border-radius: 20px;
}

.c-sd-pp-mega-menu .c-sd-pp-panel.active{
  display: flex;
}

/* Only complex panels get the tall min-height */
.c-sd-pp-panel--complex.active{
  min-height: 385px;
}

/* =========================================================
   COMPLEX PANEL LAYOUT (left + right)
   ========================================================= */
.c-sd-pp-mega-menu .c-sd-pp-left{
  width: 30%;
  max-width: 312px;

  border-right: 1px solid #eee;
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: space-evenly;

  background: var(--White, #FFF);
  border-radius: 20px 0 0 20px;
}

.c-sd-pp-mega-menu .c-sd-pp-right{
  width: 100%;
  padding: 40px 65px 40px 65px;

  background: var(--Background, #F1F4FB);
  border-radius: 0 20px 20px 0;
}

/* Left triggers */
.c-sd-pp-mega-menu .c-sd-pp-left-item{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 24px 20px;
  border-radius: 10px;
  border: 2px solid transparent;

  color: var(--Font-colour, #646F79);

  font-family: Poppins;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;

  transition: all .4s ease;
}

.c-sd-pp-mega-menu .c-sd-pp-left-item::after{
  content:'\f054';
  font-family: "Font Awesome 7 Pro";
  width: 24px;
  height: 24px;
  transition: all .4s ease;
}

.c-sd-pp-mega-menu .c-sd-pp-left-item:hover::after,
.c-sd-pp-mega-menu .c-sd-pp-left-item[aria-expanded="true"]::after{
  transform: translateX(10px);
}

.c-sd-pp-mega-menu .c-sd-pp-left-item {
  border: 2px solid transparent;
  border-radius: 10px;
}

.c-sd-pp-mega-menu .c-sd-pp-left-item:hover,
.c-sd-pp-mega-menu .c-sd-pp-left-item[aria-expanded="true"]{
  color: var(--Pink, #C05F84);

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #40B5B7, #C05F84, #40B5B7) border-box;

  background-size: 100% 100%, 300% 100%;
  animation: gradientBorderMove 3s linear infinite;
}

@keyframes gradientBorderMove {
  0% {
    background-position: 0 0, 0% 50%;
  }
  100% {
    background-position: 0 0, 100% 50%;
  }
}













/* Title */
.c-sd-pp-mega-menu .c-sd-pp-panel-title{
  margin: 0 0 40px;
  color: var(--Font-colour, #646F79);

  font-family: Roboto;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

/* Submenu grids */
.c-sd-pp-mega-menu .c-sd-pp-submenu{
  display: none;
}

.c-sd-pp-mega-menu .c-sd-pp-submenu.active{
  display: grid;
 /* grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));*/
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  column-gap: var(--column-gap, 24px);
  row-gap: 24px;
}

/* Links inside submenus */
.c-sd-pp-submenu.active a{
  font-family: Poppins;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--Navy, #1B2930);

  display: flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;
  padding: 6px 0;
}

.c-sd-pp-submenu.active a i{
  font-size: 10px;
  transition: all 0.4s ease;
}

.c-sd-pp-submenu.active a:hover i{
  transform: translateX(10px);
}
.c-sd-pp-submenu a:focus,
.c-sd-pp-submenu a:focus-within,
.c-sd-pp-submenu a:focus-visible{
  outline: none;
}


/* =========================================================
   SIMPLE PANEL (Resources) — smaller + centred
   - Uses same container-left baseline, then centres within container width
   ========================================================= */
/* SIMPLE PANEL — centre in container */
.c-sd-pp-mega-menu .c-sd-pp-panel--simple{
  width: 912px;
  min-height: 295px;

  /* centre point of the container */
  left: calc(var(--panel-left, 0px) + (var(--panel-effective-width, 100%) / 2));

  /* override the base translateY-only transform */
  transform: translateX(-50%) translateY(var(--panel-offset, 20px));
}

/* Simple panel should be a single card (no split background) */
.c-sd-pp-panel--simple .c-sd-pp-right{
  width: 100%;
  padding: 40px 80px;
  background: #F1F4FB;          /* override complex right bg */
  border-radius: 20px;       /* full card radius */
}


/* Simple grid */
.c-sd-pp-simple-grid{
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
  column-gap: var(--column-gap, 24px);
  row-gap: 30px;
}

/* Simple links */
.c-sd-pp-simple-link{
  font-family: Poppins;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--Navy, #1B2930);

  display: flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;
  padding: 6px 0;
}

.c-sd-pp-simple-link i{
  font-size: 10px;
  transition: all 0.4s ease;
}

.c-sd-pp-simple-link:hover i{
  transform: translateX(5px);
	color: var(--Navy, #1B2930) !important;
}
a.c-sd-pp-simple-link:hover{
	color: var(--fl-global---pp-navy, #1B2930) !important;
}
.c-sd-pp-simple-link:focus,
.c-sd-pp-simple-link:focus-within{
  outline: none;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 1024px){
  .c-sd-pp-mega-menu{
    display: none;
  }
}
.sd-mobile-menu li:not(.has-submenu) > a{
  display: inline-block;
}

.sd-mobile-menu li:not(.has-submenu) > a > .sd-label{
  flex: 0 1 60%;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}