/* font width in menu */
.c-menu__link {font-size: 20px;letter-spacing: 0px;font-weight:600}
/* Remove Shadow on ticker */
.e__ticker  {background: linear-gradient(#7cae00);}
/*Change Messanger Button (bottom Right) */
.css-k7q97h {padding: 1.75rem;background: linear-gradient(#54ccc9);padding:30px!important;}
/* Fix header text location */
.c-header__contact .divider, .c-header__social-link, .c-header__contact a, .c-header__contact button {padding-top: 7px;font-weight:600;}
/* Fix button shadow on the homepage */
.c-header__button.button:first-child {box-shadow: 10px 0 14px -8px rgba(0, 0, 0, .35); clip-path: inset(-30px -30px -30px 0);}
/* Fix footersmall text */
.c-footer__info p, .c-footer__info a  {font-weight:400!important; font-size:12px; color: #c2c2c2!important; text-align:center;max-width:400px; margin-left:auto;margin-right:auto;}
footer a[href*="facebook"] svg,
footer a[href*="instagram"] svg,
footer a[href*="facebook"] svg *,
footer a[href*="instagram"] svg * {
  fill: #fff !important;
}
.c-footer {
    background-color: #243266;
    font-family: Montserrat, sans-serif;
    color:#ffffff;
 
}

.c-footer__link-wrap p {
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    margin-top: 8px;
}
.c-footer__social p {
    color: #ffffff;
}
/* Changing the bottom message button to whats up style teal */
.css-k7q97h {
  color:#000000!important;
  position: fixed;
  bottom: -18px;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 25px 25px 43px 25px !important;
  background: #56d1d2 !important;
  border-radius: 15px 15px 0 0 !important;
  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.38),
    0 0 38px rgba(0, 0, 0, 0.28);
  overflow: visible !important;
}

/* Changing the messanger top banner colour and text*/
.css-1jieax6 {background-color:#54ccc9!important;}


.css-1jieax6 h2 {color:#000000!important;}
.css-8w9ial h3 {line-height:25px; color:#54ccc9!important;}
.css-1e4gqyb {background-color: #0d8283!important;}
.css-1q0yvn9 {background-color: #000000!important;  border-radius: 4px 4px 4px 4px !important;}
/* making the maori element on the homepage*/
.homepage__ticker{position:relative;overflow:visible;margin-top:0;z-index:5}.homepage__ticker::before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:30px;background-image:url("/assets/Uploads/Pattern-Image3.jpg");background-repeat:repeat-x;background-position:bottom left;background-size:auto 30px;z-index:10;pointer-events:none}
/* fixing the nav button height on the homepage the little green icons*/
.homepage__slides .tns-nav{bottom:40px}.homepage__slides .tns-nav button{box-shadow:0 2px 4px rgba(0,0,0,.45),0 0 8px rgba(0,0,0,.55)}  .homepage__slides .tns-nav button.tns-nav-active{outline:2px solid #7cc242;outline-offset:2px;box-shadow:0 0 10px rgba(0,0,0,.65)}
/* Adding in the Maori element to the Need help page and adding some extra animation to the buttons*/

.e-talk-banner {
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
}

.e-talk-banner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140%;
  height: 50px;
  background-image: url("/assets/Uploads/pattern-Image3__FitMaxWzkzMCwzMzZd.png?vid=4");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 50px;
  pointer-events: none;
  z-index: 2;
}

.e-talk-banner a,
.e-talk-banner button,
.e-talk-banner [role="button"] {
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    background-color 0.25s ease;
  will-change: transform;
}

.e-talk-banner a:hover,
.e-talk-banner button:hover,
.e-talk-banner [role="button"]:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 4px 8px rgba(0, 0, 0, 0.14);
  filter: brightness(1.06) saturate(1.08);
  z-index: 5;
  background: #83bf41 !important;
  cursor: pointer;
}

.e-talk-banner a:active,
.e-talk-banner button:active,
.e-talk-banner [role="button"]:active {
  transform: translateY(-2px) scale(0.99);
}

.e-talk-banner a:focus-visible,
.e-talk-banner button:focus-visible,
.e-talk-banner [role="button"]:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}
/*spacing out the menu items in the nav*/
@media only screen and (min-width: 960px) {
    .c-menu__link {
        padding: 4px 22px 20px;
    }
}

/* Explore help and advice for... heading to be bigger and sit nicer */
.e-categories__title {
  margin-top: 0 !important;
  margin-bottom: 2rem;
  font-weight: 600 !important;
  font-size: 50px;
  line-height: 1.1;
  overflow: visible !important;
}

/* Reduce the space above the heading here instead */
.e-categories {
  padding-top: 30px !important;
  overflow: visible !important;
}



/*changing the colours of the titles on the indavidual catagory pages*/
/* KIDS */
body.advice-kids .u-container h2,
body.advice-kids .u-container h3 {
  color: #7cae00 !important;
  font-weight:600;
}
body.advice-kids .u-container strong {
  color: #555 !important;
}



/* TEENS */
body.advice-teens .u-container h2,
body.advice-teens .u-container h3 {
  color: #e4481e !important;
  font-weight:600;
}

body.advice-teens .u-container strong {
  color: #555 !important;
}
/* SUPPORTERS */
body.advice-supporters .u-container h2,
body.advice-supporters .u-container h3 {
  color: #54ccc9 !important;
  font-weight:600;
  }

body.advice-supporters .u-container strong {
  color: #555 !important;
}

/* SHARED H2 STYLING */
body.advice-kids main .u-container h2,
body.advice-teens main .u-container h2,
body.advice-supporters main .u-container h2 {
  position: relative;
  display: table;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 14px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* =========================
   KIDS
   ========================= */

 

/* Teal underline behind */
body.advice-kids main .u-container h2::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: calc(100% - 4px);
  height: 5px;
  background: #54ccc9;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(1deg);
}

/* Green underline over the top */
body.advice-kids main .u-container h2::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 6px;
  width: calc(100% - 4px);
  height: 5px;
  background: #83bf41;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(-1deg);
}


/* =========================
   TEENS
   ========================= */

 

/* Teal underline behind */
body.advice-teens main .u-container h2::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: calc(100% - 4px);
  height: 5px;
  background: #54ccc9;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(1deg);
}

/* Red underline over the top */
body.advice-teens main .u-container h2::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 6px;
  width: calc(100% - 4px);
  height: 5px;
  background: #e4481e;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(-1deg);
}


/* =========================
   SUPPORTERS
   ========================= */

/* Green underline behind */
body.advice-supporters main .u-container h2::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: calc(100% - 4px);
  height: 5px;
  background: #83bf41;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(1deg);
}

/* Teal underline over the top */
body.advice-supporters main .u-container h2::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 6px;
  width: calc(100% - 4px);
  height: 5px;
  background: #54ccc9;
  border-radius: 50% 20% 50% 20%;
  transform: rotate(-1deg);
}
/* Raisely donation form */
.raisely-donate iframe {
  min-height: 900px !important;
}

@media (max-width: 768px) {
  .raisely-donate iframe {
    min-height: 1100px !important;
  }
}

/* cover image max height fix and remove padding */
.e-single-image__wrapper.e-single-image__wrapper--crop,
.e-single-image__picture-image {
  width: 100%;
  max-height: 20vw;
  object-fit:cover;
border-radius:15px;
  padding-top:0px;
    margin-bottom:30px;
}

.e-single-image   {
  padding-bottom:0px!important;
  padding-top:0px!important;
}
 
/* ___________________________________________________ */
/* Align the text panel with the Donate heading */

.max-50 {
  display: inline-block !important;
  vertical-align: top !important;
  position: relative;
  clear: none !important;
  box-sizing: border-box;
}

.max-50 {
  display: inline-block !important;
  vertical-align: top !important;
  position: relative;
  clear: none !important;
  box-sizing: border-box;
}
@media (min-width: 951px) {
  .max-50:first-of-type,
  .max-50:first-child {
    padding-left: 0 !important;
  }

  .max-50:first-of-type > div,
  .max-50:first-child > div {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* Large desktop */
@media (min-width: 1400px) {
  .max-50 {
    width: 690px !important;
    max-width: 690px !important;
    left: calc((100vw - 1380px) / 2) !important;
  }
}

/* Smaller desktop and tablet */
@media (min-width: 951px) and (max-width: 1399px) {
  .max-50 {
    width: calc(50vw - 24px) !important;
    max-width: none !important;
    left: 20px !important;
  }
}

/* Mobile */
@media (max-width: 950px) {
  .max-50 {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    left: 0 !important;
    margin: 0 20px 30px !important;
    padding-left: 0 !important;
  }
}
/* ___________________________________________________ */

/* New Ping animated Image size */
.e-homepage-slider__slide-icon {
    width: 200px;
    height: 200px;
    margin-bottom:0px;
     }
    
/* Kids Button Colour - white  made grey */

.button--white {
    background-color: #ededed;
    color: #000;
}

.button--white:hover {
    background-color: #d6d6d6;
}

/* __________________Ping-size on homepage_________________________________ */

.quote-ping {
  width: 25% !important;
  height: auto !important;
}

/* __________________Hero Image on the HomePage_________________________________ */
/* Image area */
.gradient-image-white .e-image-content__image-wrapper {
  transform: translateX(-40px);
  margin-top:2%!important;
   margin-bottom:2%!important;
}

@media (max-width: 700px) {
  .gradient-image-white .e-image-content__image-wrapper::after,
  .gradient-image-white [class*="image-wrapper"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}
/* __________________Dropping the image down a little on the mega menu_________________________________ */
.c-menu__child-link img { transform: translateY(18px);}

/* __________________Changing the background on the homepage _________________________________ */

.element-bg--blue {
    background-color: #243266;
}

  /* __________________Remove the buttons in the footer on Need Help page________________________________ */
 body:has(.need-help-page-marker) .c-footer__action-links {
  display: none !important;
}

  /* __________________Changing the Contact button on the footer to teal ________________________________ */
 .c-footer__action-links .button--blue {
    background-color: #54ccc9;
    color: #000000;
}
   /* __________________Changing the Donate Button to be orange highlight ________________________________ */
.c-header__buttons .button--grey {
    background-color: #e4481e;
}
 
 /*_______________Impact Story Mobile Image Sizing____________*/
@media screen and (max-width: 767px) {
  html:has(link[rel="canonical"][href*="/impact-stories/"])
  main img[src*="/assets/Banners/"] {
    display: block !important;
    width: 40vw !important;
    max-width: 40vw !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    float: right !important;
    margin-left:20px!important;
    object-fit: contain !important;
  }
}
/* ======================================================
   ABOUT WHAT'S UP HELPLINE
   Designed to sit inside a 50% website column
   ====================================================== */

.wu-about-stats {
  --wu-dark-blue: #000000;
  --wu-white: #ffffff;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 clamp(30px, 4vw, 60px);
  padding: clamp(32px, 4vw, 50px);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--wu-white);
  color: var(--wu-dark-blue);
  border: 2px solid #e4e4e4;
  border-radius: 15px;
}

.wu-about-stats,
.wu-about-stats * {
  box-sizing: border-box;
}

.wu-about-stats__inner {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* Main heading */

.wu-about-stats .wu-about-stats__title {
  margin: 0 0 42px;
  color: #e4481e;
  font-family: inherit;
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-align: center;
}
/* Two columns by two rows */

.wu-about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 30px;
  width: 100%;
  min-width: 0;
  align-items: start;
}

/* Individual statistics */

.wu-about-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  margin: 0;
  padding: 0;

  text-align: center;
}

/* Icon area */

.wu-about-stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 95px;
  margin: 0 auto 16px;
}

.wu-about-stats__icon img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
}

/* The kids icon is naturally wider */

.wu-about-stats__item:last-child .wu-about-stats__icon {
  width: 135px;
}

/* Large statistic numbers */

.wu-about-stats .wu-about-stats__item h3 {
  margin: 0 0 10px;
  color: #e4481e;
  font-family: inherit;
  font-size: clamp(40px, 4vw, 53px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
}

/* Supporting text */

.wu-about-stats .wu-about-stats__item p {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;

  color: var(--wu-dark-blue);
  font-family: inherit;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

/* Narrow 50% columns and tablets */

@media screen and (max-width: 1100px) {
  .wu-about-stats {
    padding: 36px 28px 44px;
  }

  .wu-about-stats .wu-about-stats__title {
    margin-bottom: 38px;
    font-size: clamp(32px, 4vw, 44px);
  }

  .wu-about-stats__grid {
    gap: 42px 24px;
  }

  .wu-about-stats__icon {
    width: 100px;
    height: 88px;
  }

  .wu-about-stats__item:last-child .wu-about-stats__icon {
    width: 125px;
  }

  .wu-about-stats .wu-about-stats__item h3 {
    font-size: clamp(28px, 7.5vw, 48px);
  }

  .wu-about-stats .wu-about-stats__item p {
    font-size: 16px;
  }
}

/* Mobile: change to one item per row */

@media screen and (max-width: 600px) {
  .wu-about-stats {
    padding: 38px 24px 48px;
    border-radius: 15px;
  }

  .wu-about-stats .wu-about-stats__title {
    margin-bottom: 42px;
    font-size: clamp(34px, 10vw, 46px);
  }

  .wu-about-stats__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .wu-about-stats__icon {
    width: 120px;
    height: 105px;
  }

  .wu-about-stats__item:last-child .wu-about-stats__icon {
    width: 145px;
  }

  .wu-about-stats .wu-about-stats__item h3 {
    font-size: 38px;
  }

  .wu-about-stats .wu-about-stats__item p {
    max-width: 330px;
    font-size: 18px;
  }
}

/* ----------- Font size on the translation of the title on the homepage -------------*/

.c-talk__title-translation {font-size:18px!important;}


/* ----------- More Help Description text spacing tighten -----------------*/
.resource-description {
  letter-spacing:-0.4px;
}
/* ----------- Red button should have white text -----------------*/
.button--red {
    background-color: #e4481e;
}
/* Fun dropdown entrance effect */
@media (min-width: 1024px) {

  nav li:hover > :is(
    ul,
    .mega-menu,
    .dropdown-menu,
    .submenu,
    .sub-menu,
    [class*="mega-menu"],
    [class*="dropdown"]
  ),

  nav li:focus-within > :is(
    ul,
    .mega-menu,
    .dropdown-menu,
    .submenu,
    .sub-menu,
    [class*="mega-menu"],
    [class*="dropdown"]
  ),

  :is(
    .mega-menu,
    .dropdown-menu,
    .submenu,
    .sub-menu,
    [class*="mega-menu"],
    [class*="dropdown"]
  ):is(
    .open,
    .show,
    .active,
    .is-open,
    .is-active
  ) {
    animation: wu-menu-pop 0.45s cubic-bezier(0.22, 1.3, 0.36, 1) both !important;
    transform-origin: top centre;
    will-change: opacity, translate, scale, filter;
  }
}

@keyframes wu-menu-pop {
  0% {
    opacity: 0;
    translate: 0 -20px;
    scale: 0.97;
    filter: blur(6px);
  }

  65% {
    opacity: 1;
    translate: 0 4px;
    scale: 1.01;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  nav ul,
  .mega-menu,
  .dropdown-menu,
  .submenu,
  .sub-menu {
    animation: none !important;
  }
}


/* Remove the outline after mouse or touch clicks */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Keep an accessible keyboard focus style */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid #243266;
  outline-offset: 3px;
}

/* --------------- FaceBook Page Previw ------------------*/

.whatsup-facebook-section {
  width: 100%;
  padding: 40px 10px;
  box-sizing: border-box;
  text-align: left;
  overflow: visible !important;
}

.whatsup-facebook-heading {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 12px;
}

.whatsup-facebook-heading h2 {
  margin: 0 0 6px;
  color: #000000;
  font-size: 32px;
  line-height: 1.1;
}

.whatsup-facebook-heading p {
  margin: 0;
  color: #000000;
  font-size: 18px;
  line-height: 1.4;
}


/* FACEBOOK FEED */

.whatsup-facebook-feed {
  width: 100%;
  max-width: 500px;
  height: 600px !important;
  min-height: 600px !important;
  margin: 0 auto;
  overflow: hidden !important;
}

.whatsup-facebook-feed iframe {
  display: block !important;
  width: 100% !important;
  max-width: 500px !important;
  height: 600px !important;
  min-height: 600px !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* TABLET */

@media (max-width: 768px) {

  .whatsup-facebook-section {
    padding: 35px 15px;
  }

  .whatsup-facebook-heading h2 {
    font-size: 30px;
  }

  .whatsup-facebook-feed,
  .whatsup-facebook-feed iframe {
    height: 600px !important;
    min-height: 600px !important;
  }

}


/* MOBILE */

@media (max-width: 550px) {

  .whatsup-facebook-section {
    padding: 30px 10px;
  }

  .whatsup-facebook-heading h2 {
    font-size: 28px;
  }

  .whatsup-facebook-heading p {
    font-size: 16px;
  }

  .whatsup-facebook-feed {
    width: 100%;
    max-width: 100%;
    height: 600px !important;
    min-height: 600px !important;
  }

  .whatsup-facebook-feed iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
  }

}
/* =========================================
   TABLET — STOP FACEBOOK INTERNAL SCROLLING
   ========================================= */

@media (min-width: 551px) and (max-width: 1024px) {

  .whatsup-facebook-feed {
    overflow: hidden !important;
  }

  .whatsup-facebook-feed iframe {
    overflow: hidden !important;
    pointer-events: none !important;
    touch-action: none !important;
  }

}
/* =========================================
   BARNARDOS SERVICES
   ========================================= */

.barnardos-services {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;

  /* Matches Facebook section top position */
  padding: 40px 10px;

  box-sizing: border-box;

  color: #111111;
}


/* =========================================
   HEADING
   ========================================= */

.barnardos-services-heading {
  width: 100%;
  margin: 0 0 18px;
}

.barnardos-services-heading h2 {
  margin: 0 0 6px;

  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;

  color: #111111;
}


/* Barnardos brand green */

.barnardos-services-heading h2 span {
  color: #84BD41;
}


.barnardos-services-heading p {
  margin: 0;

  font-size: 18px;
  line-height: 1.45;

  color: #333333;
}


/* =========================================
   SERVICE LIST
   ========================================= */

.barnardos-service-list {
  display: flex;
  flex-direction: column;
  gap: 11px;

  width: 100%;
}


/* =========================================
   SERVICE CARD
   ========================================= */

.barnardos-service-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 15px;

  width: 100%;

  padding: 15px 50px 15px 15px;

  box-sizing: border-box;

  background: #ffffff;

  border: 2px solid #84BD41;
  border-radius: 14px;

  color: #111111;
  text-decoration: none !important;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* HOVER */

.barnardos-service-card:hover {
  background: #f4f9ee;

  transform: translateY(-2px);

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.08);
}


/* =========================================
   NUMBER CIRCLE
   ========================================= */

.barnardos-service-number {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: #84BD41;

  color: #111111;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}


/* =========================================
   CARD TEXT
   ========================================= */

.barnardos-service-content {
  flex: 1;
  min-width: 0;
}

.barnardos-service-content h3 {
  margin: 0 0 4px;

  color: #111111;

  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;

  text-decoration: none !important;
}


.barnardos-service-content p {
  margin: 0;

  color: #444444;

  font-size: 14px;
  line-height: 1.4;

  text-decoration: none !important;
}


/* Remove site-wide link underlines */

.barnardos-service-card h3,
.barnardos-service-card p,
.barnardos-service-card:hover h3,
.barnardos-service-card:hover p {
  text-decoration: none !important;
}


/* =========================================
   ARROW
   ========================================= */

.barnardos-arrow {
  position: absolute;

  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  color: #84BD41;

  font-size: 24px;
  line-height: 1;

  transition: transform 0.2s ease;
}


.barnardos-service-card:hover .barnardos-arrow {
  transform: translate(4px, -50%);
}


/* =========================================
   MAIN BUTTON
   ========================================= */

.barnardos-services-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 18px;

  padding: 14px 24px;

  box-sizing: border-box;

  background: #84BD41;

  color: #111111 !important;

  border-radius: 30px;

  font-size: 16px;
  line-height: 1;
  font-weight: 700;

  text-decoration: none !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.barnardos-services-button span {
  font-size: 20px;

  transition: transform 0.2s ease;
}


.barnardos-services-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.12);
}


.barnardos-services-button:hover span {
  transform: translateX(4px);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 768px) {

  .barnardos-services {
    padding: 35px 15px;
  }

  .barnardos-services-heading h2 {
    font-size: 30px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 550px) {

  .barnardos-services {
    padding: 30px 10px;
  }

  .barnardos-services-heading h2 {
    font-size: 28px;
  }

  .barnardos-services-heading p {
    font-size: 16px;
  }

  .barnardos-service-card {
    padding: 14px 45px 14px 12px;
    gap: 12px;
  }

  .barnardos-service-number {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .barnardos-service-content h3 {
    font-size: 18px;
  }

  .barnardos-service-content p {
    font-size: 13px;
  }

}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  EXTERNAL LINKS PAGE CSS
  Add this to the website stylesheet or Custom CSS area.
  Everything is scoped to .external-resources-page.
*/

.external-resources-page {
  --navy: #243266;
  --green: #83bf41;
  --green-dark: #517200;
  --teal: #54ccc9;
  --red: #d65a45;
  --yellow: #ffd84d;
  --ink: #1d2742;
  --muted: #667085;
  --line: #dce3ee;
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow: 0 12px 30px rgba(36, 50, 102, 0.09);
  --content: 1240px;

  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  border-radius: 0;
 
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

.external-resources-page,
.external-resources-page * {
  box-sizing: border-box;
}

.external-resources-page a {
  color: inherit;
}

.external-resources-page a:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 3px;
}

.external-resources-page img {
  max-width: 100%;
}

.external-resources-page h1,
.external-resources-page h2,
.external-resources-page h3,
.external-resources-page h4,
.external-resources-page h5,
.external-resources-page h6,
.external-resources-page .section-eyebrow,
.external-resources-page .resource-org {
  text-shadow: none !important;
  filter: none !important;
}

/* Main page title */

.external-resources-page .external-resources-page-title {
  width: min(100%, var(--content));
  margin: 0 auto 24px;
  padding: 0 24px;
  color: var(--navy);
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Introduction */

.external-resources-page .external-resources-intro {
  width: min(calc(100% - 48px), var(--content));
  margin: 0 auto;
  padding: 0 0 38px;
}

.external-resources-page .external-resources-intro p {
  max-width: 820px;
  margin: 0;
  color: #505c72;
  font-size: 1.08rem;
}

.external-resources-page .browser-find-note {
  margin-top: 12px !important;
  padding: 12px 16px;
  border-left: 5px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: #eefafa;
  color: var(--navy) !important;
  font-size: 0.94rem !important;
}

.external-resources-page .browser-find-note strong {
  font-weight: 800;
}

/* Main content */

.external-resources-page .page-main,
.external-resources-page .external-resources-footer__inner {
  width: min(100%, var(--content));
  margin-inline: auto;
}

.external-resources-page .page-main {
  padding: 18px 24px 84px;
}

/* Quick Links */

/* QUICK LINKS */

.external-resources-page .jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 42px;
}

.external-resources-page .jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;

  border-style: solid !important;
  border-width: 2px 2px 2px 7px !important;
  border-color: #243266 !important;

  border-radius: 999px;
  background: #e8edf7 !important;
  color: #243266 !important;
  box-shadow: none !important;

  font-weight: 800;
  text-decoration: none !important;

  transition:
    background-color 160ms ease,
    transform 160ms ease;
}


/* GREEN */

.external-resources-page .jump-links a[href$="#young-wellbeing"],
.external-resources-page .jump-links a[href$="#all-wellbeing"],
.external-resources-page .jump-links a[href$="#all-local"] {
  border-color: #83bf41 !important;
}


/* RED */

.external-resources-page .jump-links a[href$="#young-safety"],
.external-resources-page .jump-links a[href$="#all-violence"] {
  border-color: #d65a45 !important;
}


/* TEAL */

.external-resources-page .jump-links a[href$="#young-support"],
.external-resources-page .jump-links a[href$="#all-phone"],
.external-resources-page .jump-links a[href$="#all-rainbow"] {
  border-color: #54ccc9 !important;
}


/* DARK BLUE */

.external-resources-page .jump-links a[href$="#young-topic"],
.external-resources-page .jump-links a[href$="#all-counselling"] {
  border-color: #243266 !important;
}


/* YELLOW */

.external-resources-page .jump-links a[href$="#directory"] {
  border-color: #ffd84d !important;
}


/* ROLLOVER */

.external-resources-page .jump-links a:hover,
.external-resources-page .jump-links a:focus-visible {
  background: #ffffff !important;
  color: #243266 !important;
  transform: translateY(-1px);
}
/* Resource sections */

.external-resources-page .resource-section {
  --accent: var(--navy);
  margin-top: 58px;
  scroll-margin-top: 24px;
}

.external-resources-page .accent-green {
  --accent: var(--green);
}

.external-resources-page .accent-red {
  --accent: var(--red);
}

.external-resources-page .accent-teal {
  --accent: var(--teal);
}

.external-resources-page .accent-navy {
  --accent: var(--navy);
}

.external-resources-page .accent-yellow {
  --accent: var(--yellow);
}

/* Section headings */

.external-resources-page .external-resources-section-heading {
  max-width: 820px;
  margin-bottom: 22px;
  padding-left: 18px;
  border-left: 8px solid var(--accent);
}

.external-resources-page .section-eyebrow {
  margin: 0 0 4px;
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.external-resources-page .accent-red .section-eyebrow,
.external-resources-page .accent-navy .section-eyebrow {
  color: var(--navy);
}

.external-resources-page .external-resources-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.external-resources-page .external-resources-heading-row h3 {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.75rem, 4vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.external-resources-page .external-resources-section-heading > p:last-child {
  margin: 10px 0 0;
  color: #59647a;
}

/* Back to top buttons */

.external-resources-page .back-to-top-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 0 !important;
  border-radius: 999px;
  background: #243266 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none !important;
  white-space: nowrap;
}

.external-resources-page .back-to-top-button:hover {
  background: #555c66 !important;
  color: #ffffff !important;
}

/* Resource grid */

.external-resources-page .resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Resource cards */

.external-resources-page .resource-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(36, 50, 102, 0.06);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.external-resources-page .resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.external-resources-page .resource-card__meta {
  display: flex;
  min-height: 50px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
}

.external-resources-page .resource-type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf0f8;
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Logo panels */

.external-resources-page .resource-logo-link,
.external-resources-page .resource-logo-link.has-logo {
  display: flex;
  aspect-ratio: 16 / 7;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  overflow: hidden;
  border: 2px dotted var(--accent);
  border-radius: 14px;
  background: #eceffa;
  box-shadow: none;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

.external-resources-page a.resource-logo-link:hover,
.external-resources-page a.resource-logo-link.has-logo:hover,
.external-resources-page a.resource-logo-link:focus-visible,
.external-resources-page a.resource-logo-link.has-logo:focus-visible {
  border: 2px solid var(--accent);
  background: #eceffa;
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.external-resources-page .resource-logo-link img,
.external-resources-page .resource-logo-link.has-logo img {
  display: block;
  width: 84%;
  height: 76%;
  object-fit: contain;
  object-position: center;
}

/* Placeholder logo panel */

.external-resources-page .logo-placeholder {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 16px;
  color: var(--navy);
  text-align: center;
}

.external-resources-page .logo-placeholder__initials {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.external-resources-page .logo-placeholder__label {
  font-size: 0.78rem;
  font-weight: 800;
}

.external-resources-page a.resource-logo-link:hover .logo-placeholder__initials,
.external-resources-page a.resource-logo-link:focus-visible .logo-placeholder__initials {
  background: var(--accent);
}

/* Resource-card text */

.external-resources-page .resource-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 20px;
}

.external-resources-page .resource-org {
  margin: 0 0 5px;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.external-resources-page .resource-card h4 {
  margin: 0;
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.16;
}

.external-resources-page .resource-description {
  flex: 1;
  margin: 12px 0 16px;
  color: #505c72;
  font-size: 0.96rem;
}

.external-resources-page .resource-links {
  display: grid;
  gap: 8px;
}

.external-resources-page .resource-url {
  display: block;
  overflow-wrap: anywhere;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.external-resources-page .resource-url.is-muted {
  color: var(--muted);
  text-decoration: none;
}

.external-resources-page .resource-phone {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

/* Page information at the bottom */

.external-resources-page .external-resources-footer {
  padding: 34px 24px;
  background: var(--navy);
  color: #ffffff;
}

.external-resources-page .external-resources-footer p {
  max-width: 900px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
}

.external-resources-page .external-resources-footer p + p {
  margin-top: 8px;
}

/* Tablet */

@media screen and (max-width: 980px) {
  .external-resources-page .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */

@media screen and (max-width: 680px) {
  .external-resources-page {
    font-size: 17px;
  }

  .external-resources-page .external-resources-page-title {
    width: min(100%, var(--content));
    margin-bottom: 20px;
    padding: 0 14px;
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .external-resources-page .external-resources-intro {
    width: calc(100% - 28px);
    padding-bottom: 28px;
  }

  .external-resources-page .page-main {
    padding: 18px 14px 68px;
  }

  .external-resources-page .resource-grid {
    grid-template-columns: 1fr;
  }

  .external-resources-page .resource-section {
    margin-top: 46px;
  }

  .external-resources-page .resource-card:hover {
    transform: none;
  }

  .external-resources-page .resource-logo-link,
  .external-resources-page .resource-logo-link.has-logo {
    aspect-ratio: 16 / 6.5;
  }

  .external-resources-page .resource-logo-link img,
  .external-resources-page .resource-logo-link.has-logo img {
    width: 82%;
    height: 74%;
  }
}

@media screen and (max-width: 600px) {
  .external-resources-page .external-resources-heading-row {
    align-items: flex-start;
    gap: 12px;
  }

  .external-resources-page .back-to-top-button {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.76rem;
  }
}

/* Reduce movement for people who request it */

@media (prefers-reduced-motion: reduce) {
  .external-resources-page .resource-card,
  .external-resources-page .jump-links a,
  .external-resources-page .resource-logo-link {
    transition: none;
  }
}

.external-resources-page .jump-links a {
  border-width: 2px 2px 2px 7px !important;
  box-shadow: 0 3px 8px rgba(36, 50, 102, 0.08) !important;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}


/* GREEN SECTIONS */

.external-resources-page .jump-links a[href$="#young-wellbeing"],
.external-resources-page .jump-links a[href$="#all-wellbeing"],
.external-resources-page .jump-links a[href$="#all-local"],
.external-resources-page .jump-links a[href$="#cultural-support"] {
  border-color: #83bf41 !important;
  background: #eef7df !important;
  color: #243266 !important;
}


/* RED SECTIONS */

.external-resources-page .jump-links a[href$="#young-safety"],
.external-resources-page .jump-links a[href$="#sexual-health"],
.external-resources-page .jump-links a[href$="#all-violence"] {
  border-color: #d65a45 !important;
  background: #fbe8e4 !important;
  color: #243266 !important;
}


/* TEAL SECTIONS */

.external-resources-page .jump-links a[href$="#young-support"],
.external-resources-page .jump-links a[href$="#online-safety"],
.external-resources-page .jump-links a[href$="#all-phone"],
.external-resources-page .jump-links a[href$="#all-rainbow"] {
  border-color: #54ccc9 !important;
  background: #e4f8f7 !important;
  color: #243266 !important;
}


/* DARK-BLUE SECTIONS */

.external-resources-page .jump-links a[href$="#young-topic"],
.external-resources-page .jump-links a[href$="#all-counselling"],
.external-resources-page .jump-links a[href$="#neurodiversity"] {
  border-color: #243266 !important;
  background: #e6eaf6 !important;
  color: #243266 !important;
}


/* YELLOW SECTIONS */

.external-resources-page .jump-links a[href$="#alcohol-drugs"],
.external-resources-page .jump-links a[href$="#directory"] {
  border-color: #ffd84d !important;
  background: #fff7cf !important;
  color: #243266 !important;
}


/* GREEN ROLLOVER */

.external-resources-page .jump-links a[href$="#young-wellbeing"]:hover,
.external-resources-page .jump-links a[href$="#all-wellbeing"]:hover,
.external-resources-page .jump-links a[href$="#all-local"]:hover,
.external-resources-page .jump-links a[href$="#cultural-support"]:hover,
.external-resources-page .jump-links a[href$="#young-wellbeing"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-wellbeing"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-local"]:focus-visible,
.external-resources-page .jump-links a[href$="#cultural-support"]:focus-visible {
  background: #83bf41 !important;
  color: #243266 !important;
}


/* RED ROLLOVER */

.external-resources-page .jump-links a[href$="#young-safety"]:hover,
.external-resources-page .jump-links a[href$="#sexual-health"]:hover,
.external-resources-page .jump-links a[href$="#all-violence"]:hover,
.external-resources-page .jump-links a[href$="#young-safety"]:focus-visible,
.external-resources-page .jump-links a[href$="#sexual-health"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-violence"]:focus-visible {
  background: #d65a45 !important;
  color: #ffffff !important;
}


/* TEAL ROLLOVER */

.external-resources-page .jump-links a[href$="#young-support"]:hover,
.external-resources-page .jump-links a[href$="#online-safety"]:hover,
.external-resources-page .jump-links a[href$="#all-phone"]:hover,
.external-resources-page .jump-links a[href$="#all-rainbow"]:hover,
.external-resources-page .jump-links a[href$="#young-support"]:focus-visible,
.external-resources-page .jump-links a[href$="#online-safety"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-phone"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-rainbow"]:focus-visible {
  background: #54ccc9 !important;
  color: #243266 !important;
}


/* DARK-BLUE ROLLOVER */

.external-resources-page .jump-links a[href$="#young-topic"]:hover,
.external-resources-page .jump-links a[href$="#all-counselling"]:hover,
.external-resources-page .jump-links a[href$="#neurodiversity"]:hover,
.external-resources-page .jump-links a[href$="#young-topic"]:focus-visible,
.external-resources-page .jump-links a[href$="#all-counselling"]:focus-visible,
.external-resources-page .jump-links a[href$="#neurodiversity"]:focus-visible {
  background: #243266 !important;
  color: #ffffff !important;
}


/* YELLOW ROLLOVER */

.external-resources-page .jump-links a[href$="#alcohol-drugs"]:hover,
.external-resources-page .jump-links a[href$="#directory"]:hover,
.external-resources-page .jump-links a[href$="#alcohol-drugs"]:focus-visible,
.external-resources-page .jump-links a[href$="#directory"]:focus-visible {
  background: #ffd84d !important;
  color: #243266 !important;
}


/* SHARED ROLLOVER MOVEMENT */

.external-resources-page .jump-links a:hover,
.external-resources-page .jump-links a:focus-visible {
  box-shadow: 0 6px 14px rgba(36, 50, 102, 0.16) !important;
  transform: translateY(-2px);
}