/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1920,18,1.2,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* html font-size scaling below is taken from website, to match the layout spacing as per main website, 
so that components align correctly. This had to be used for alignment as css in components is from main website
which is using rems. Further on in this file, I have, updated font-sizes for main, so that the text matches the website too */

html {
  font-size: 93.75%;
}

@media (min-width: 36rem) {
  html {
    font-size: 100%;
  }
}

@media (min-width: 40rem) {
  html {
    font-size: 106.25%;
  }
}

@media (min-width: 44rem) {
  html {
    font-size: 112.5%;
  }
}

:root {
  --step--1: max(0.8333rem, min(calc(0.8125rem + 0.1042vw), 0.9375rem));
  --step-0: max(1rem, min(calc(0.975rem + 0.125vw), 1.125rem));
  --step-1: max(1.2rem, min(calc(1.17rem + 0.15vw), 1.35rem));
  --step-2: max(1.44rem, min(calc(1.404rem + 0.18vw), 1.62rem));
  --step-3: max(1.728rem, min(calc(1.6848rem + 0.216vw), 1.944rem));
  --step-4: max(2.0736rem, min(calc(2.0218rem + 0.2592vw), 2.3328rem));
  --step-5: max(2.4883rem, min(calc(2.4261rem + 0.311vw), 2.7994rem));
  --step-6: max(2.986rem, min(calc(2.9113rem + 0.3732vw), 3.3592rem));
  --barnardos-green: #0b463d;
  --offwhite: #f7f6f1;
}

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

* {
  margin: 0;
}

@font-face {
  font-family: "barnardos-express";
  src:
    url("/static/fonts/barnardos-express.woff2") format("woff2"),
    url("/static/fonts/barnardos-express.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: "barnardos-speak";
  src:
    url("/static/fonts/barnardos-speak.woff2") format("woff2"),
    url("/static/fonts/barnardos-speak.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

/* Added to make sure screen doesn't scroll horizontally on mobile */
html,
body {
  overflow-x: hidden;

  @media screen and (min-width: 1024px) {
    overflow-x: unset;
  }
}

body {
  color: #1d1d1d;
  display: flex;
  flex-direction: column;
  font-family: arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 100%;
  min-block-size: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

h1 {
  font-family: barnardos-express, sans-serif;
  font-size: var(--step-6);
  font-weight: 300;
  line-height: 53.9477px;
}

h2 {
  font-family: barnardos-speak, Impact, sans-serif;
  font-size: var(--step-5);
  line-height: 44.789px;
}

h3 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 31.104px;
}

h4 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 25.92px;
}

h5,
h6 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-1);
  font-weight: 300;
}

/* !IMPORTANT Having to resize font-size in main container, so that text matches the website font-size, 
otherwise it will be too big. If below is removed, the LAYOUT of page and components will BREAK. */
main {
  font-size: 106.5%;
}

@media (min-width: 36rem) {
  main {
    font-size: 100%;
  }
}

@media (min-width: 40rem) {
  main {
    font-size: 94.5%;
  }
}

@media (min-width: 44rem) {
  main {
    font-size: 90.5%;
  }
}

main > p {
  margin-top: 16px;
}

main > h2,
main > h3,
main > h4,
main > h5,
main > h6 {
  margin-top: 32px;
}

@media screen and (min-width: 1024px) {
  main > h2 {
    margin-top: 72px;
  }
}

@media screen and (min-width: 768px) {
  main > h2 {
    margin-top: 64px;
  }
}

main > p + h2 {
  margin-top: 32px;
}

main > :first-child {
  margin-top: 72px;
}

a {
  color: var(--barnardos-green);
}

a:hover {
  text-decoration: none;
}

:focus-visible {
  outline: 0.2rem solid #e86c00;
}

main > ul,
ul,
main > ol,
ol {
  margin-top: 16px;
  padding-left: 24px;
  position: relative;
}

main > ul li:not(:first-child),
main > ol li:not(:first-child) {
  margin-top: 12px;
}

input,
button,
textarea,
select {
  font: inherit;
}

#mainHeader header .header-top .skip-link {
  color: #fff;
  display: block;
  font-family: arial, sans-serif;
  font-size: var(--step-2);
  left: -100vw;
  margin: 1rem;
  padding: 0.5rem 2rem;
  position: absolute;
  text-align: center;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-transform: lowercase;
}

#mainHeader header .header-top .skip-link:focus {
  background-color: #0b463d;
  left: 0;
  z-index: 1;
}

#mainHeader header .header-top .prominent-link:hover {
 filter: none;
}

#mainHeader header .header-top .prominent-link:focus-visible {
  border: 0.2rem solid #3B0A00;
  clip-path: inset(0 0 0 0);
}

.headerBackground {
  background: #f7f6f1;
}

#mainHeader header {
  container-type: inline-size;
  margin: 0 auto;
  max-width: 87.5rem;
  padding: 1.5rem 2rem 2.5rem;
}

#mainHeader .header-top {
  align-items: center;
  display: flex;
  padding-bottom: 16px;
}

#logo {
  flex: 1 1 auto;
  margin-right: 1rem;
}

#logo a {
  display: inline-block;
}

#logo img {
  aspect-ratio: 16 / 4;
  display: block;
  height: auto;
  max-width: 100%;
}

@container (min-width: 864px) {
  #logo img {
    max-width: 276px;
  }
}

#mainHeader search {
  display: flex;
  height: 35%;
  margin-left: 24px;
}

.headerBottom {
  color: var(--barnardos-green);
  font-family: barnardos-express, sans-serif;
  font-size: var(--step-3);
  display: block;
  letter-spacing: 0.586px;
  text-align: center;
  width: 100%;
}

@container (min-width: 864px) {
  .headerBottom {
    display: none;
    font-size: var(--step-5);
  }
}

.subLogoInline {
  display: inline-block;
  margin-left: 1rem;
}

#logo .subLogoInline {
  display: none;
}

@container (min-width: 864px) {
  #logo a {
    margin-right: 1rem;
    text-decoration: none;
  }

  #logo .logoInner {
    align-items: center;
    display: flex;
  }

  #logo .subLogoInline {
    color: var(--barnardos-green);
    display: inline-block;
    font-family: barnardos-express, sans-serif;
    font-size: var(--step-3);
  }
}

@media (width < 864px) {
  #widenav {
    display: none;
  }

  #hamburger {
    display: flex;
  }

  #mainHeader .strapline {
    /* if you want this to fit to width, here's some brilliantly appalling CSS https://kizu.dev/fit-to-width-text/ - but you'll probably have to set the font-size as a style attribute on the actual tag because they will be different lengths */
    font-size: 1.5em;
    font-family: barnardos-speak, Impact, "Arial Narrow Bold", sans-serif;
  }

  #mainHeader search {
    display: none;
  }
}

@media (width >=1024px) {
  #mainHeader.no-JS + #widenav {
    display: none;
  }

  #mainHeader.JS + #widenav {
    display: grid;
    margin: 0 auto;
    max-width: 87.5rem;
  }

  #mainHeader .strapline {
    display: none;
  }
}

@media (width < 864px) {
  #mainHeader .strapline {
    /* if you want this to fit to width, here's some brilliantly appalling CSS https://kizu.dev/fit-to-width-text/ - but you'll probably have to set the font-size as a style attribute on the actual tag because they will be different lengths */
    font-family: barnardos-speak, Impact, "Arial Narrow Bold", sans-serif;
    font-size: 1.5em;
  }

  #mainHeader search,
  #mainHeader header .header-top .shop,
  #mainHeader .news,
  #mainHeader .jobs {
    display: none;
  }
}

@media (width >= 864px) {
  #mainHeader .strapline {
    display: none;
  }

  header .header-top > a:nth-of-type(3) {
    margin-right: 24px;
  }
}

@media (width < 600px) {
  #mainHeader .donate span {
    display: none;
  }
}

#mainHeader header .header-top > a,
#narrownav .prominent-link {
  text-decoration: none;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% + 4px) 5%,
    calc(100% + 4px) calc(100% + 4px),
    0 calc(100% + 4px)
  );
  clip-path: polygon(
    0 0,
    calc(100% + 4px) 5%,
    calc(100% + 4px) calc(100% + 4px),
    0 calc(100% + 4px)
  );
  color: #0b463d;
  display: flex;
  filter: drop-shadow(4px 6px #0b463d);
  padding: 10px 12px;
  text-transform: uppercase;
}

#narrownav .prominent-link {
  display: inline-block;
  margin-right: 1rem;
  width: 45%;
}

[popover]:not(:popover-open):not(dialog[open]) {
  display: none;
}

#narrownav {
  background: #fff;
  box-shadow: inset -4px -4px 5px 0px rgba(0, 0, 0, 0.15);
  padding: 40px;
}

#narrownav > ul {
  margin-top: 2rem;
}

#narrownav li a {
  text-decoration: none;
}

#narrownav > ul ul li {
  padding: 16px 8px;
}

#narrownav ul ul li a,
#widenav ul ul li a {
  color: #000;
}

#narrownav #menuTopLink {
  margin-top: 24px;
  padding-left: 0;
}

#narrownav li a:hover {
  text-decoration: underline;
}

#narrownav ul ul li {
  font-size: var(--step-1);
}

/* DO NOT ADD THIS CSS TO WIDENAV, AS ON WIDE VIEWPORT IT WILL BECOME BIGGER THAN IT SHOULD BE */
#narrownav #menuTopLink a {
  color: var(--barnardos-green);
  font-family: barnardos-speak, Impact, sans-serif;
  font-size: var(--step-3);
}

/* show a different style nav when it's popover. You can use this hook to style the 'floating' popover */
#narrownav[popover] {
  background: #f7f6f1;
  max-height: 100vh;
}

#narrownav h2 {
  font-family: barnardos-speak, Impact, sans-serif;
}

#narrownav .shop,
#narrownav .news,
#narrownav .jobs {
  margin-bottom: 2rem;
}

#narrownav > a:hover,
#narrownav > a:focus {
  filter: none;
}

#narrownav button {
  display: none;
}

/* interesting stuff: */
/* style the hamburger button differently if the no-js popover nav is open - eg, with the close icon. Brilliant code nicked from https://twitter.com/luke_warlow/status/1784925671581475326 */

:has(#narrownav:popover-open) #hamburger {
  background: pink;
}

.no-js #hamburger {
  margin-left: 1rem;
}

#widenav {
  background-color: #f7f6f1;
  display: block;
  margin: 0 auto;
  max-width: 87.5rem;
  position: relative;
  z-index: 100;
}

#widenav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  /* remove weird margins that make this ul taller than its own container: */
  margin: 0 auto;
  padding: 0 2rem;
}

#widenav button + ul {
  display: none;
}

#widenav button,
#widenav .menu-buttons {
  background: transparent;
  border: none;
  color: var(--barnardos-green);
  cursor: pointer;
  font-family: barnardos-speak, Impact, "Arial Narrow Bold", sans-serif;
  font-size: var(--step-2);
  line-height: 27px;
  margin-left: 1rem;
  padding-bottom: 24px;
  text-align: left;
}

#widenav .menu-buttons {
  margin-left: 0;
}

#widenav .menuTopLevel:not(:has(button)) {
  margin-bottom: 21px;
}

#narrownav .menu-buttons {
  color: var(--barnardos-green);
  font-family: barnardos-speak, Impact, sans-serif;
  font-size: var(--step-3);
}

#narrownav .menuTopLevel,
#narrownav .menuTopLevel ul {
  padding: 0;
}

#narrownav .menuTopLevel > li {
  margin-top: 24px;
  padding-bottom: 1rem;
}

#widenav button:hover,
#widenav button[aria-expanded="true"] {
  text-decoration: none;
}

/* if you're hovering over the button, or if you're hovering over the ul once it's already displaying, show it as a prog enhancement.
Does this fall foul of WCAG (see https://github.com/barnardos/website/issues/1721)? If so, may need to recode in JS. But I'm not convinced it fails this, because the hover mechanism is a progressive enhancement to the keyboard-accessible/ touch-friendly button based navigation. That bug was raised when hover was the *only* way to access the sub-nav; this refactor changes that. */
#widenav button + ul:hover,
#widenav button:hover + ul,
#widenav [aria-expanded="true"] + ul {
  background-color: white;
  box-shadow: 4px 15px 25px 0px rgba(0, 0, 0, 0.149);
  color: black;
  display: block;
  list-style-type: none;
  padding: 0.7em 0.7em 22px;
  position: absolute;
}

#widenav > ul li {
  position: relative;
}

/* subnav link styles */
#widenav ul ul li a,
#widenav #menuTopLink span {
  display: block;
  padding: 0.5rem 1.5rem 1rem 1rem;
}

#widenav ul ul li {
  border-left: 2px solid #8efe9a;
  margin-left: 1rem;
  min-width: 15rem;
}

#widenav ul.menuTopLevel > li {
  margin-left: 24px;
}

#widenav ul.menuTopLevel > li:first-child {
  margin-left: 0;
}

#widenav ul.menuTopLevel > li:last-child ul {
  right: 0;
}

#widenav ul.menuTopLevel > li:first-child ul,
#widenav ul.menuTopLevel > li:only-child ul {
  left: 0;
  right: unset;
}

#widenav li a {
  font-size: var(--step-0);
  text-decoration: none;
}

#widenav li a:hover {
  text-decoration: underline;
}

#widenav .menuTopLevel > li:hover button::after,
#widenav button[aria-expanded="true"]::after {
  bottom: -25%;
  content: url("/static/images/peachcurve.svg");
  height: 35px;
  left: 33%;
  position: absolute;
  width: 67px;
  z-index: 300;
}

#widenav #menuTopLink a,
#widenav #menuTopLink span {
  color: var(--barnardos-green);
  font-family: barnardos-speak, Impact, sans-serif;
  font-size: var(--step-1);
}

#widenav #menuTopLink {
  border-left: none;
  margin-left: 0;
  margin-top: 28px;
}

#hamburger {
  margin-left: 1rem;
}

/* viewport-sized over rides */
@media (width < 864px) {
  #widenav {
    display: none;
  }

  #hamburger {
    background: none;
    border: none;
    display: flex;
    margin-left: 1rem;
  }
}

nav li a.is-active {
  font-weight: bold;
}

@media (width >= 864px) {
  #mainHeader.no-JS + #widenav {
    display: none;
  }

  #mainHeader.JS + #widenav {
    display: block;
  }

  .js #hamburger {
    display: none;
  }
}

#narrownav ul,
#widenav ul {
  list-style: none;
}

#narrownav li:not(:first-child),
#widenav li:not(:first-child) {
  margin-top: 0;
}

nav a[aria-current="page"] {
  font-weight: bold;
}

#main.searchResults {
  @media screen and (min-width: 1024px) {
    grid-column: 4 / 13;
    background-color: #f7f6f199;
    padding: 2rem 4rem;
  }
}

#mainHeader search .searchFormInput,
#narrownav search .searchFormInput,
.searchResults search .searchFormInput {
  appearance: none;
  border: 2px solid #0b463d;
  border-right: none;
  box-shadow: none;
  color: #1d1d1d;
  display: block;
  flex-grow: 1;
  font-family: arial, sans-serif;
  font-size: var(--step-0);
  height: 50px;
  margin-top: 0 !important;
  padding: 8px 12px;
  transform: translateY(2px);
  width: 100%;
}

.siteSearchLabel {
  flex-grow: 1;
}

.siteSearchLabel > span {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.searchResults search {
  @media screen and (min-width: 1024px) {
    width: 60%;
  }
}

.searchFormInput::placeholder {
  color: #1d1d1d;
}

search form {
  display: flex;
}

.searched {
  margin-top: 15px;
}

#mainHeader search .searchSubmit,
#narrownav search .searchSubmit,
.searchResults search .searchSubmit {
  background-color: #a5feae;
  background-image: url("static/images/magnifyingglass.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 33px 31px;
  border-radius: 0;
  border-width: 0;
  box-shadow: 4px 4px 0 #0b463d;
  box-sizing: border-box;
  display: inline-block;
  height: 50px;
  text-indent: -1000em;
  width: 50px;
}

search .searchSubmit:hover {
  box-shadow: none;
}

#main #results {
  margin-top: 40px;
}

.searchResults h1 {
  margin-bottom: 2rem;
}

#search_query {
  color: var(--barnardos-green);
  font-weight: 700;
}

#results .searchItem {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
}

#results .linkContainer,
#results .resultContainer {
  padding: 24px 40px;
}

#results .linkContainer {
  background-color: #f6f5ef;
}

#results a {
  color: #0b463d;
  font-family: arial, sans-serif;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

#results a:hover {
  text-decoration: underline;
}

/* Set layout and main classes to match main website layout */
.layout {
  flex: 1 0 auto;
  height: 100%;
  margin: 0 auto auto;
  max-width: 87.5rem;
  width: 100%;
  z-index: 10;
}

#main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 20px;

  @media screen and (min-width: 44.938rem) {
    margin: 0 60px;
  }

  @media screen and (min-width: 64.125rem) {
    margin: 0 100px;
  }
}

main > * {
  grid-column: 1 / 13;
}

@media screen and (min-width: 1024px) {
  main > h2,
  main > h3,
  main > h4,
  main > h5,
  main > h6,
  main > p,
  main > .accordion,
  main > ol,
  main > ul,
  main > .cta,
  main > .DownloadableResources,
  main > .cms-embed,
  main > .anchor {
    grid-column: 3 / 11;
  }
}

.rich-text p:not(:first-of-type),
.accordion p:not(:first-child),
.inlineMediaAndText p:not(:first-child) {
  margin-top: 16px;
}

/* Following components are being made 100% width, because main element in BHAJI is set as
grid css and another grid within it becomes smaller if there is not enough content within
the component itself, so setting components that are less than 12 columns to 100% width here,
if they are set as display:grid */
.teaser-card-list {
  width: 100%;
}

/* In our base.css, there is a max-width of 908px to match the 8/12 grid columns on main website.
Components that need full width, can be added to the list below. Media query of 989px has been added so it doesn't affect it
until the actual component is 908px wide and avoids breaking small screen styling */

@media screen and (min-width: 989px) {
  .socialAccount,
  #timetable-wrapper {
    max-width: 100%;
  }
}

/* Trapezium links */
.trapeziumLinks {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem auto 0;
}

.trapeziumLinks .trapeziumParent {
  display: flex;
  flex-basis: 100%;
  filter: drop-shadow(8px 6px #0b463d);
  justify-content: center;

  @media screen and (min-width: 500px) {
    flex-basis: 50%;
    justify-content: unset;
  }
}

@media screen and (min-width: 500px) {
  .trapeziumParent:nth-child(odd) a {
    margin-left: auto;
  }
}

.trapeziumLinks a {
  background-color: #a4feae;
  color: #0b463d;
  font:
    400 var(--step-0) barnardos-speak,
    sans-serif;
  margin-bottom: 1rem;
  min-width: 220px;
  max-width: 220px;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;

  @media screen and (min-width: 500px) {
    align-items: center;
    display: flex;
    min-width: 170px;
    max-width: 170px;
  }

  @media screen and (min-width: 1024px) {
    min-width: 220px;
    max-width: 220px;
  }
}

.trapeziumLinks a span {
  flex: 1;
}

.trapeziumLinks .trapeziumParent:nth-child(1) a,
.trapeziumLinks .trapeziumParent:nth-child(4) a {
  clip-path: polygon(
    5% 0%,
    95% 0%,
    calc(99% + 4px) calc(100% + 6px),
    0% calc(100% + 6px)
  );
}

.trapeziumLinks .trapeziumParent:nth-child(2) a,
.trapeziumLinks .trapeziumParent:nth-child(3) a,
.trapeziumLinks .trapeziumParent:nth-child(5) a {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(94% + 4px) calc(100% + 6px),
    5% calc(100% + 6px)
  );
}

.trapeziumLinks .trapeziumParent:nth-child(2),
.trapeziumLinks .trapeziumParent:nth-child(3),
.trapeziumLinks .trapeziumParent:nth-child(5) {
  filter: drop-shadow(4px 6px #0b463d);
}

#main .trapeziumLinks .trapeziumParent:focus,
#main .trapeziumLinks .trapeziumParent:hover {
  filter: none;
}

#main .trapeziumLinks .trapeziumParent a:focus,
.singleTrapezium a:focus {
  filter: drop-shadow(4px 6px #e86c00);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  outline: 1rem solid #e86c00;
}

/* make sure this css stays at the bottom of trapezium css so it's not flex like rest of the link */
.trapeziumParent:last-child:nth-child(odd),
.trapeziumParent:last-child:nth-child(odd) a {
  display: block;
  margin: auto;
}

.singleTrapezium {
  filter: drop-shadow(4px 6px var(--barnardos-green));
}

.singleTrapezium:hover {
  filter: none;
}

.singleTrapezium a {
  background-color: #a4feae;
  clip-path: polygon(
    0% 5%,
    100% 0%,
    calc(94% + 4px) calc(100% + 6px),
    5% calc(100% + 6px)
  );
  color: #0b463d;
  display: inline-block;
  font:
    400 var(--step-0) barnardos-speak,
    sans-serif;
  padding: 1.2rem 1.5rem;
  text-align: center;
  text-decoration: none;
}

/* Table styles */
table {
  border-collapse: collapse;
  display: block;
  margin-top: 2rem;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;

  @media screen and (min-width: 1024px) {
    display: table;
    overflow-x: unset;
    white-space: normal;
  }
}

table th,
table td {
  padding: 16px;
  text-align: left;
}

table th {
  background-color: #9db5b1;
}

table th p {
  margin: auto 0;
}

table tbody tr:nth-child(even) {
  background-color: #f6f5ef;
}

table th:not(:last-child) {
  border-right: 1px solid #fff;
}

table tr td:not(:last-child) {
  border-right: 1px solid #9db5b1;
}

table tbody tr:last-child {
  border-bottom: 1px solid #9db5b1;
}

/* cookie banner */
._barnardos-cookie-overlay#overlay {
  z-index: 900;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner {
  z-index: 1000;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner button {
  background-color: #0b463d;
  border: none;
  box-shadow: 3px 3px 0 #1d1d1d;
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  line-height: 1.2;
  outline: none;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner button:hover {
  box-shadow: none;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner h2 {
  color: #1d1d1d;
  font-family: barnardos-speak, sans-serif;
  font-size: max(2.4883rem, min(calc(2.4261rem + 0.311vw), 2.7994rem));
  line-height: 1.2;
  margin-bottom: 0;
}

.backLink {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0B463D;
  border-radius: 0;
  box-shadow: 4px 4px 0px 0px #000;
  color: #fff;
  display: inline-block;
  font-family: barnardos-speak, Impact, sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.2;
  margin: 32px 0;
  max-width: 500px;
  padding: .4rem 1rem .5rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: normal;
}

.anchor-list a {
  text-decoration: none;
}

.backLink:hover {
  box-shadow: none;
}

.backLink img {
  height: 1.5rem;
  margin: .6rem .6rem 0 0;
}

#main .backLinkContainer {
  margin-top: 0;
}

footer {
  background-color: var(--barnardos-green);
  color: var(--offwhite);
  margin-top: 56px;
  padding: 16px;

  @media screen and (min-width: 768px) {
    margin-top: 64px;
  }

  @media screen and (min-width: 1024px) {
    margin-top: 72px;
  }

  @media screen and (min-width: 48rem) {
    padding: 24px 32px;
  }
}

.footer-inner {
  margin: 0 auto;
  max-width: 83.5rem;
  position: relative;
}

footer ul {
  padding: 0;
}

#footer a {
  color: var(--offwhite);
}

#footer a:hover {
  color: #bbfec2;
}

#footer .fr-digital-badge {
  display: block;
  float: none;
  height: 4rem;
  width: 12rem;

  @media screen and (min-width: 48rem) {
    float: right;
  }
}

.footer-social {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.follow-us {
  color: var(--offwhite);
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 27px;
  margin: 0 0 16px;
}

.footer-links,
.footer-info,
.footer-copyright {
  line-height: 27px;
  margin-top: 16px;
}

.footer-social-icons {
  margin-top: 0;
}

.footer-social-icons a {
  background-size: cover;
  display: inline-block;
  height: 3rem;
  margin-right: 16px;
  overflow: hidden;
  text-indent: -100vw;
  width: 3rem;

  @media screen and (min-width: 48rem) {
    height: 2.5rem;
    margin-right: 32px;
    width: 2.5rem;
  }
}

.footer-social-icons a:hover {
  scale: 1.5;
  filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1029%)
    hue-rotate(65deg) brightness(101%) contrast(99%);
}

.footer-social-icons a:focus,
.footer-social-icons a:focus-visible {
  scale: 1.5;
  outline: 0.2rem solid #e86c00;
}

.footer-instagram {
  background: url("/static/images/instagram.svg") no-repeat center;
}

.footer-facebook {
  background: url("/static/images/facebook.svg") no-repeat center;
}

.footer-twitter {
  background: url("/static/images/twitter-x.svg") no-repeat center;
}

.footer-youtube {
  background: url("/static/images/youtube.svg") no-repeat center;
}

.footer-tiktok {
  background: url("/static/images/tiktok.svg") no-repeat center;
}

.footer-linkedin {
  background: url("/static/images/linkedin.svg") no-repeat center;
}

.footer-links,
.footer-social-icons {
  list-style: none;
}

.footer-links li {
  display: inline-block;
  margin-right: 16px;
}

.footer-social-icons li {
  display: inline-block;
}

.footer-links li a {
  line-height: 2.8rem;
}

.footer-registered {
  max-width: 40rem;
}

#main.standalone:has(.pageNotFound) {
  padding: 0 0 2rem;
}

.pageNotFound {
  background: #ffaa7bcc;
  clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 92%);
  color: var(--barnardos-green);
  font-family: barnardos-speak, sans-serif;
  font-weight: 400;
  padding: 5rem 4rem;
  text-align: center;

  @media screen and (min-width: 1024px) {
    clip-path: polygon(0% 0%, 100% 8%, 92% 100%, 5% 92%);
    padding: 6rem 7rem;
  }
}

.pageNotFound h1 {
  font-size: 4rem;
  margin-bottom: 3rem;

  @media screen and (min-width: 1024px) {
    font-size: 7rem;
  }
}

.notFoundLead {
  color: var(--barnardos-green);
  font-size: var(--step-3);
}

.pageNotFound + .singleTrapezium {
  display: flex;
  margin-top: -2.5rem;
}

.pageNotFound + .singleTrapezium a {
  margin: auto;
}

#mainHeader .accessibilityContainer {
  background-color: #cadfd5;
  border-radius: 25px;
  display: inline-block;
  min-width: fit-content;
  padding: 10px 22px;
}

#mainHeader .accessibilityInner {
  align-items: center;
  display: flex;
}

#mainHeader #google_translate_element {
  position: relative;
}


#mainHeader .goog-te-combo {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #cadfd5;
  border: none;
  font-size: var(--step-0);
  font-weight: 700;
  max-width: 180px;
  padding-left: 1rem;

  @media screen and (min-width: 400px) {
    max-width: 235px;
  }
}

#mainHeader .goog-te-gadget {
  font-size: 0;
  display: flex;
}

#mainHeader .goog-te-gadget::before {
    color: #000;
    content: '\2691';
    display: flex;
    font-size: 1rem;
    margin: 0;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 17%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    pointer-events: none;
}

#mainHeader .goog-te-gadget::after {
content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    display: block;
    width: 0;
    height: 0;
    margin-left: 0.437rem;
    border-top: 0.4rem solid #000;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translate(-45px, -50%);
    pointer-events: none;

    @media screen and (min-width: 400px) {
      right: 0;
  }
}

#mainHeader .VIpgJd-ZVi9od-l4eHX-hSRGPd {
  display: none;
}

.header-bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

    @container (min-width: 864px) {
      display: block;
      text-align: right;
    }
}


@container (max-width: 863px) {
  p.headerBottom {
    display: inline-block;
    margin-right: 24px;
    text-align: left;
    width: auto;
  }
}

/* Dark and Light mode switch */

.darkModeSwitch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 25px;
}

.darkModeSwitch input { 
  opacity: 0;
  width: 30px;
  height: 30px;
}

.darkModeSwitch input:focus-visible + .darkModeSlider::before {
  outline: 0.2rem solid #e86c00;
}

.darkModeSlider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.darkModeSlider::before {
  background: url("/static/images/lightMode.svg") center center no-repeat;
  position: absolute;
  content: "";
  height: 25px;
  width: 35px;
  left: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#darkModeSwitch:checked + .darkModeSlider {
  background-color: #fff;
}

#darkModeSwitch:checked + .darkModeSlider::before {
  background: #000 url("/static/images/darkMode.svg") center center no-repeat;
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(30px);
}

/* Rounded sliders */
.darkModeSlider.round {
  border-radius: 34px;
}

.darkModeSlider.round::before {
  border-radius: 45%;
}