/* 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%;
  }
}

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

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

:root {
  --backgroundColour: #bdb7ff;
  --backgroundHeader: #413a92;
  --buttonFooter: #0b463d;
  --buttonPrimary: #f486f9;
  --darkText: #1d1d1d;
  --focusRing: #e86c00;
  --helpRectangle: #b3d3ff;
  --helpRectanglePrimary: #f8b7fb;
  --hoverLink: #bbfec2;
  --lightText: #fff;
  --cloudColorOne: #b3d3ff;
  --cloudColorTwo: #f486f9;
  --cloudColorThree: #8efe9a;

  /* Font sizing */
  --size-2: 29.3px;
  --size-1: 26px;
  --size-0: 16.9px;

  /* Font family */
  --display: barnardos-speak, Impact, sans-serif;
  --funky: barnardos-express, Impact, sans-serif;
  --body: Arial, sans-serif;
}

@viewport {
  inline-size: auto !important;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

::-ms-clear {
  display: none;
}

::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
  display: none;
}

.noscroll {
  overflow: hidden;
}

/* !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. */
.layout-container,
textarea {
  font-size: 106.5%;
}

@media (min-width: 36rem) {
  .layout-container,
  textarea {
    font-size: 100%;
  }
}

@media (min-width: 40rem) {
  .layout-container,
  textarea {
    font-size: 94.5%;
  }
}

@media (min-width: 44rem) {
  .layout-container,
  textarea {
    font-size: 95%;
  }
}

body {
  background-color: var(--backgroundColour);
  color: var(--darkText);
  display: grid;
  font-family: var(--body);
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  grid-template-rows: 130px auto auto 100px;
  margin-block-end: 0;
}

/** needed whilst there is a nav bar, this can be removed when it is gone and the grid template area in the body above will need the nav removing **/
.body-nonav {
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: 130px auto 100px;
}

header {
  background-color: var(--backgroundHeader);
  padding: 8px 16px;
}

.header-grid {
  align-items: center;
  display: grid;
  grid-template-columns: 10fr 1fr;
  gap: 10%;
  margin: 0 auto;
  max-inline-size: 87.5rem;
}

.header-logo {
  display: flex;
}

.profile {
  justify-self: end;
}

header img {
  display: block;
  max-block-size: 50px;
  max-inline-size: 100%;
}

.header-start {
  display: flex;
}

.header-end {
  text-align: end;
}

.header-end .primary-button,
.header-end .signOutButton {
  margin-block-start: 0;
}

.header-name {
  align-content: center;
  color: var(--lightText);
  font-family: var(--funky);
  font-size: var(--size-2);
  margin-block-end: 0;
  padding-inline-start: 12px;
  -webkit-font-smoothing: antialiased;
}

.personName {
  color: var(--lightText);
  font-family: var(--display);
  font-size: var(--size-2);
  font-weight: 300;
  line-height: 1.2;
}

button.hamburgerMenu {
  background-image: url("/menu-icon.svg");
}

nav {
  background-color: #f7f6f1;
  color: var(--buttonFooter);
  column-gap: 60px;
  display: flex;
  flex-flow: row wrap;
  padding: 16px;
  row-gap: 20px;
}

ul {
  display: block;
  padding: 0;
}

li {
  list-style: none;
}

li a {
  color: var(--buttonFooter);
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--size-1);
}

*:hover {
  text-decoration: none;
}

*:focus {
  outline: 0.2rem solid var(--focusRing);
}

*:focus:not(:focus-visible) {
  outline: none;
}

.layout-container {
  inline-size: calc(100% - 40px);
  margin-inline: auto;
  max-inline-size: 87.5rem;
  padding: 45px 0;
  text-align: center;
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: repeat(4, 1fr);

  @media screen and (min-width: 768px) {
    grid-column-gap: 24px;
    grid-template-columns: repeat(8, 1fr);
  }

  @media screen and (min-width: 1024px) {
    grid-column-gap: 24px;
    grid-template-columns: repeat(12, 1fr);
  }
}

.layout-container-centre {
  display: grid;
  grid-column-end: span 4;
  grid-column-start: 1;

  @media screen and (min-width: 768px) {
    grid-column-end: span 8;
    grid-column-start: 1;
  }

  @media screen and (min-width: 1024px) {
    grid-column-end: span 8;
    grid-column-start: 3;
  }
}

h1 {
  font-family: var(--display);
  font-size: var(--size-2);
}

h2 {
  font-family: var(--display);
  font-size: var(--size-1);
  margin-block-end: 38px;
}

.bold {
  font-family: var(--display);
  font-size: var(--size-1);
  line-height: normal;
}

.title-logo {
  display: flex;
  justify-content: center;
  margin-block-end: 38px;
}

.text-logo {
  align-self: center;
  margin-block-end: 0;
  margin-inline-start: 20px;
}

p {
  font-family: var(--body);
  font-size: var(--size-0);
  margin-block-end: 10px;
}

.bigger {
  font-family: var(--display);
  font-size: var(--size-1);
}

button,
.button {
  background-color: var(--buttonFooter);
  border: 0;
  box-shadow: 4px 4px var(--darkText);
  color: var(--lightText);
  display: inline-block;
  font-family: var(--display);
  font-size: var(--size-1);
  font-weight: 700;
  line-height: 1.2;
  margin-block-start: 33px;
  padding: 0.65rem 0.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.back-button button {
  margin-block-start: 0;
}

button:not(:first-child),
.button:not(:first-child) {
  margin-block-start: 0;
}

button:hover,
.button:hover,
button:focus,
.button:focus {
  box-shadow: none;
}

button:focus-visible,
.button:focus-visible {
  outline: 0.2rem solid var(--focusRing);
}

.button.two-buttons {
  background-color: var(--buttonPrimary);
  color: var(--darkText);
  margin-inline-end: 30px;
  margin-block-start: 0;
}

.button.two-buttons:focus-visible {
  outline: 0.2rem solid #d95fe0;
}

.primary-button {
  background-color: var(--buttonPrimary);
  box-shadow: none;
  color: var(--darkText);
  filter: drop-shadow(4px 6px #1d1d1d);
  -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)
  );
}

.primary-button:hover {
  filter: none;
  outline: 0.2rem solid #d95fe0;
}

.primary-button:focus-visible {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  -path: inset(0 0 0 0);
  outline: 0.2rem solid #d95fe0;
  outline-offset: -0.2rem;
}

.background-shape {
  align-items: center;
  background-image: url("/background-shape.svg");
  background-position: bottom -100px right -140px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-block-end: 130px;
}

.background-shape--pages {
  background-image: url("/background-shape.svg");
  background-position: bottom -100px right -140px;
  background-repeat: no-repeat;
}

.footer {
  background-color: var(--buttonFooter);
  color: var(--lightText);
  padding: 16px;
  place-content: center;

  a {
    color: var(--lightText);
  }

  .footer__registered {
    margin: 0;
  }

  a:hover {
    color: var(--hoverLink);
    text-decoration: none;
  }
}

.form-layout,
.back-button {
  justify-self: center;
  max-inline-size: 300px;
  inline-size: 250px;
}

@media (min-width: 36rem) {
  .form-layout,
  .back-button {
    max-inline-size: 350px;
    inline-size: 3750px;
  }
}

@media (min-width: 40rem) {
  .form-layout,
  .back-button {
    max-inline-size: 400px;
    inline-size: 350px;
  }
}

@media (min-width: 44rem) {
  .form-layout,
  .back-button {
    max-inline-size: 500px;
    inline-size: 450px;
  }
}

.back-button {
  display: flex;
  justify-content: flex-end;
}

textarea {
  max-inline-size: 300px;
  inline-size: 250px;
}

@media (min-width: 36rem) {
  textarea {
    max-inline-size: 350px;
    inline-size: 3750px;
  }
}

@media (min-width: 40rem) {
  textarea {
    max-inline-size: 400px;
    inline-size: 350px;
  }
}

@media (min-width: 44rem) {
  textarea {
    max-inline-size: 500px;
    inline-size: 450px;
  }
}

.yp-notes {
  display: block;
  margin: 0 0 38px; /** change this to just bottom **/
  padding: 16px 0;
  position: relative;
}

.yp-notes .save {
  color: var(--darkText);
  font-family: var(--body);
  font-size: var(--size-0);
  font-weight: 700;
  margin-block-start: 2px;
  position: absolute;
}

.yp-notes:first-of-type {
  padding: 0;
}

.yp-notes label {
  font-family: var(--display);
  font-size: var(--size-1);
  line-height: 1.2;
}

textarea {
  font-family: var(--body);
  block-size: 100px;
}

#loading {
  display: none;
  position: absolute;
  inset-block-start: 20px;
  padding: 3em;
  --w: 40vw;
  inline-size: var(--w);
  inset-inline-start: 50%;
  margin-inline-start: calc(-0.5 * var(--w));
  box-sizing: border-box;
  background: white;
  color: #ac1d1c;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.7);
}

.no-js {
  background-color: var(--backgroundHeader);
  border-radius: 20px;
  color: var(--lightText);
  padding: 16px;
  place-content: center;
}

.helpRectanglePrimaryShape {
  background: var(--helpRectanglePrimary);
  clip-path: shape(
    from 5.97% 18.65%,
    curve to 9.58% 10.69% with -1.77% 8.2%/0.11% 4.05%,
    curve to 32.96% 8.51% with 2.44% 3.98%/29.88% 1.42%,
    curve to 89.26% 3.89% with 29.88% 1.42%/95.97% -4%,
    curve to 95.54% 18.9% with 100.26% -3.83%/103.61% 4.19%,
    curve to 90.03% 77.6% with 103.34% 13.62%/96.88% 82.52%,
    curve to 85.62% 94.65% with 96.88% 82.52%/91.71% 102.54%,
    curve to 40.06% 93.59% with 91.71% 102.54%/38.22% 101.3%,
    curve to 10.22% 92.89% with 38.22% 101.3%/3.19% 100.48%,
    curve to 5.94% 83.53% with 0.44% 100.41%/-1.79% 95.54%,
    curve to 5.75% 58.33% with -1.83% 89.49%/-2.06% 59.9%,
    curve to 5.97% 18.65% with -2.06% 59.9%/-1.8% 13.33%,
    close
  );
  margin-block-end: 38px;
  padding: 40px;
}

.helpRectanglePrimary {
  background-color: var(--helpRectanglePrimary);
  clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
  margin-block-end: 38px;
  padding: 10px 40px;
}

.helpRectangle {
  background-color: var(--helpRectangle);
  margin-block-end: 20px;
  padding: 10px;
}

.imageErrors {
  justify-self: center;
  margin-block-end: 32px;
}

.clouds {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: var(--size-1);
  gap: 13px;
  justify-content: center;
  line-height: 1.1;

  @media screen and (min-width: 768px) {
    gap: 40px;
  }
}

.clouds a {
  color: black;
  flex-basis: 167px;
  flex-grow: 1;
  flex-shrink: 0;
  max-inline-size: min-content;
  min-block-size: 168px;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.clouds a:hover {
  scale: 1.1;
}

.cloudOne {
  clip-path: shape(
    from 69.28% 22.35%,
    curve to 60.47% 22.92% with 66.26% 22.16%/63.31% 22.37%,
    curve to 60.55% 22.06% with 60.51% 22.64%/60.53% 22.35%,
    curve to 40.29% 0.05% with 61.34% 10.65%/52.27% 0.79%,
    curve to 17.18% 19.35% with 28.32% -0.7%/17.97% 7.94%,
    curve to 19.68% 30.43% with 16.91% 23.34%/17.84% 27.14%,
    curve to 0.05% 52.04% with 9.07% 32.58%/0.8% 41.22%,
    curve to 23.22% 77.22% with -0.85% 65.09%/9.53% 76.36%,
    curve to 36.95% 74.27% with 28.19% 77.53%/32.91% 76.43%,
    curve to 36.79% 75.78% with 36.88% 74.77%/36.83% 75.27%,
    curve to 59.04% 99.95% with 35.93% 88.31%/45.89% 99.13%,
    curve to 84.24% 80.33% with 71.63% 100.74%/82.58% 92.07%,
    curve to 99.93% 55.64% with 93.05% 75.2%/99.2% 66.21%,
    curve to 69.28% 22.35% with 101.12% 38.39%/87.4% 23.48%,
    close
  );
}

.cloudTwo {
  clip-path: shape(
    from 49.63% 8.32%,
    curve to 42.35% 14.48% with 46.9% 10.03%/44.47% 12.11%,
    curve to 41.92% 13.53% with 42.21% 14.16%/42.07% 13.84%,
    curve to 11.46% 3.1% with 35.88% 1%/22.25% -3.66%,
    curve to 2.85% 38.04% with 0.67% 9.87%/-3.18% 25.51%,
    curve to 11.53% 48.14% with 4.96% 42.42%/8% 45.84%,
    curve to 7.29% 83.31% with 3.62% 31.1%/-4.43% 71.43%,
    curve to 42.12% 95.23% with 14.19% 97.63%/29.78% 102.96%,
    curve to 52.24% 83.46% with 46.59% 92.42%/50.02% 88.28%,
    curve to 52.99% 85.15% with 52.48% 84.03%/52.72% 84.59%,
    curve to 86.43% 96.59% with 59.62% 98.9%/74.59% 104.02%,
    curve to 96.66% 60% with 97.77% 89.48%/102.13% 73.43%,
    curve to 95.69% 24.08% with 101.25% 49.04%/101.27% 35.68%,
    curve to 49.63% 8.32% with 86.56% 5.14%/65.94% -1.92%,
    close
  );
}

.cloudThree {
  clip-path: shape(
    from 71.3% 77.49%,
    curve to 72.83% 68.7% with 72.18% 74.58%/72.68% 71.63%,
    curve to 73.61% 69.02% with 73.09% 68.81%/73.35% 68.92%,
    curve to 98.96% 55.34% with 84.1% 72.98%/95.44% 66.86%,
    curve to 86.34% 27.3% with 102.47% 43.82%/96.82% 31.27%,
    curve to 75.39% 26.65% with 82.67% 25.92%/78.9% 25.76%,
    curve to 59.79% 1.38% with 75.88% 15.65%/69.74% 5.14%,
    curve to 30.81% 17.02% with 47.81% -3.15%/34.83% 3.85%,
    curve to 30.34% 31.29% with 29.36% 21.8%/29.28% 26.73%,
    curve to 28.97% 30.71% with 29.89% 31.08%/29.44% 30.89%,
    curve to 1.15% 45.73% with 17.46% 26.36%/5% 33.08%,
    curve to 13.57% 75.91% with -2.55% 57.84%/2.99% 70.99%,
    curve to 32.97% 98.18% with 16.3% 85.97%/23.26% 94.51%,
    curve to 71.3% 77.49% with 48.82% 104.17%/65.98% 94.91%,
    close
  );
}

.clouds a span {
  block-size: 100%;
  display: grid;
  inline-size: 160px;
  place-items: center;
}

.colourOne {
  background-color: var(--cloudColorOne);
}

.colourTwo {
  background-color: var(--cloudColorTwo);
}

.colourThree {
  background-color: var(--cloudColorThree);
}