/* 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 {
  --backgroundAdmin: #f7f6f1;
  --black: #1d1d1d;
  --brandGreen: #0b463d;
  --brandButton: #0b463d;
  --brandFocus: #e86c00;
  --buttonGreen: #8efe9a;
  --headerBackground: #413a92;
  --white: #fff;

  --bold: 700;

  --b-xs: 500px; /* "93.75%" */
  --b-sm: 768px; /*  "100%" */
  --b-md: 1024px; /*  "106.25%" */

  /* Font sizing */
  --step--1: clamp(0.8333rem, 0.786rem + 0.2367vi, 0.9375rem);
  --step-0: clamp(1rem, 0.9432rem + 0.2841vi, 1.125rem);
  --step-1: clamp(1.2rem, 1.1318rem + 0.3409vi, 1.35rem);
  --step-2: clamp(1.44rem, 1.3582rem + 0.4091vi, 1.62rem);
  --step-3: clamp(1.728rem, 1.6298rem + 0.4909vi, 1.944rem);
  --step-4: clamp(2.0736rem, 1.9558rem + 0.5891vi, 2.3328rem);
  --step-5: clamp(2.4883rem, 2.3469rem + 0.7069vi, 2.7994rem);
  --step-6: clamp(2.986rem, 2.8163rem + 0.8483vi, 3.3592rem);

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

@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;
}

html {
  /* box-sizing: border-box; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* using scroll behaviour smooth, there is a chrome bug that stops the error message appearing if it needs to scroll up, it still focus the field https://issues.chromium.org/issues/40783475 */
  -webkit-tap-highlight-color: transparent;
}

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

header {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
  max-inline-size: 87.5rem;
  padding: 1.5rem 2rem 2.5rem;

  @media screen and (min-width: 1024px) {
    justify-content: center;
    padding: 1.5rem;
  }
}

header a img {
  max-inline-size: 155px;

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

.headerBackground {
  background-color: var(--backgroundAdmin);

  @media screen and (min-width: 1024px) {
    border-inline-end: 24px var(--headerBackground) solid;
    display: grid;
    grid-column: 1 / 5;
    grid-row: 1 / 12;
  }
}

#hamburger {
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  margin-block-start: 0px;
  margin-inline-start: 1rem;
  min-inline-size: 0;
}

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

  #hamburger {
    display: flex;
  }
}

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

  /* the Rita rule: in case user was on narrow screen, opened the burger menu, then moved to wide screen (eg tablet rotated to landscape), keep showing the burger and don't confusingly switch to the widenav */

  :has(#hamburger[aria-expanded="true"]) #widenav {
    display: none;
  }

  #mainHeader.JS #hamburger[aria-expanded="false"] {
    display: none;
  }
}

nav {
  display: flex;
  flex-flow: row wrap;
  gap: 60px;
  margin: 0 auto;
  padding: 0 2rem 2rem;

  @media screen and (min-width: 1024px) {
    display: grid;
    grid-column: 1 / 5;
    grid-row: 2 / 12;
  }
}

ul {
  padding-inline-start: 0;
}

nav li {
  list-style: none;
  padding: 12.5px 8px;
}

nav li a {
  color: var(--black);
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 27px;
  margin-block-end: 24px;
  text-align: left;
}

nav li a:hover {
  text-decoration: none;
}

.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border: 1px solid #e3e2ef;
  font-family: var(--display);
}
.profile-section img {
  width: 100px;
}
.profile-section p {
  font-family: var(--display);
  font-size: var(--step-2);
  text-align: center;
  margin: 5px 0;
}
.profile-section p#service-name {
  font-size: var(--step-1);
}
.profile-section p a {
  font-size: var(--step-0);
  color: var(--brandGreen);
}

#choose-service-container {
  text-align: center;
}

body {
  background-color: var(--white);
  color: var(--black);
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  line-height: 1.2;
  margin: 0 auto;
  max-inline-size: 87.5rem;
  min-block-size: 100vh;
  overflow: hidden;
  padding: 0;
  position: relative;

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

.not-loggedin {
  background-color: var(--white);
  color: var(--black);
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  line-height: 1.2;
  margin: 0 auto;
  max-inline-size: 87.5rem;
  min-block-size: 100vh;
  overflow: hidden;
  padding: 0;
  position: relative;
}

main {
  flex: 1;

  @media screen and (min-width: 1024px) {
    border-inline-start: 8px var(--buttonGreen) solid;
    display: grid;
    grid-column: 5 / 13;
    grid-row: 1 / 12;
  }
}

img {
  display: block;
}

a {
  color: var(--black);
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 27px;
  text-align: left;
}

a:hover {
  text-decoration: none;
}

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

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

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

input[type="radio"]:focus + label::before {
  outline: 0.2rem solid var(--brandFocus);
}

input[type="checkbox"]:focus + label::before {
  outline: 0.2rem solid var(--brandFocus);
}

@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;
}

.layout-container {
  min-height: 100vh;
  position: relative;
  margin: 0 auto;
  max-inline-size: 87.5rem;
}

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

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

h2 {
  font-family: var(--display);
  font-size: var(--step-3);
  margin-block-end: 32px;
}

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

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

textarea {
  border: 1px solid #1d1d1d;
  font-family: var(--body);
  font-size: var(--step-0);
  height: 100px;
  inline-size: calc(100% - 40px);
  margin-block-start: 10px;
}

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

.twoButton-layout {
  display: block;
  padding-block-end: 50px;
  text-align: center;

  @media screen and (min-width: 1024px) {
    column-gap: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-self: center;
  }
}

.centre {
  display: block;
  padding-block-end: 50px;
  text-align: center;
}

/** I have updated the code below, the code above will need updating when I see the rest of the pages that need designing **/

.layout-container {
  inline-size: calc(100% - 40px);
  margin-inline: auto;
  max-inline-size: 87.5rem;
  min-height: 100%;
  padding: 45px 0;
  text-align: center;
  display: grid;
  flex: 1;
  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;
  height: fit-content;

  @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;
  }
}

#mainHeader {
  grid-row: 1;
  grid-column: 1 / 5;
}

.main-header {
  align-content: center;
  background-color: var(--headerBackground);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  color: var(--white);
  height: 168px;
  justify-items: center;
  margin-block-start: 0;
  padding: 0 24px;
}

button,
.styledButton {
  background-color: var(--buttonGreen);
  border: 0;
  box-shadow: 3px 3px var(--black);
  color: var(--black);
  display: inline-block;
  font-family: var(--display);
  font-size: var(--step-2);
  height: fit-content;
  inline-size: fit-content;
  justify-self: center;
  line-height: 1.2;
  margin-block-start: 40px;
  min-inline-size: 192px;
  padding: 0.65rem 0.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

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

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

.styledButton.errorButton {
  display: block;
}

.footer {
  background-color: var(--brandGreen);
  color: var(--white);
  padding: 16px 16px 50px 16px;
  place-content: center;

  @media screen and (min-width: 1024px) {
    display: grid;
    grid-column: 1 / 13;
    justify-content: left;
  }

  a {
    color: var(--white);
    font-family: var(--body);
    font-size: var(--step-0);
  }

  .footer__registered {
    margin: 0;
  }

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

.imageErrors {
  block-size: auto;
  justify-self: center;
  margin-block-end: 32px;
  max-inline-size: 100%;
}

.error {
  background: #fee;
  border: 2px solid red;
  padding: 0.5em;
}

.Fieldset {
  border: none;
  display: block;
  inline-size: calc(100% - 40px);
  margin-inline: auto;
  max-inline-size: 87.5rem;
  padding: 45px 0;
  text-align: left;
}

.radioStyling,
.switchStyling {
  margin-block-start: 40px;

  @media screen and (min-width: 1024px) {
    display: flex;
  }
}

.radioFieldset,
.switchFieldset {
  border: none;
  display: flex;
  flex-flow: wrap;
  padding: 0;

  @media screen and (min-width: 1024px) {
    display: contents;
  }
}

.Fieldset-children {
  clear: left;
  padding-top: 4px;

  @media screen and (min-width: 1024px) {
    padding-inline-start: 40px;
  }
}

.textField:not(:first-child) {
  margin-block-start: 40px;
}

@media screen and (min-width: 1024px) {
  .textField {
    display: flex;
    flex-wrap: wrap;
  }
}

label,
.Label {
  display: block;
  font-family: var(--display);
  font-size: var(--step-3);
  min-width: 31%;
  width: auto;

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

label span,
.Label-fieldRequirement {
  font-size: var(--step-1);

  @media screen and (min-width: 1024px) {
    display: block;
  }
}

.textInput,
.textDisplay {
  font-family: var(--body);
  font-size: var(--step-0);
  inline-size: calc(100% - 40px);

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

.dateInput,
.textInput {
  border: 1px solid #1d1d1d;
  font-family: var(--body);
  font-size: var(--step-0);
  margin-block-start: 10px;
  max-height: 36px;
  padding: 9.6px 12px;
}

.readOnlyText {
  font-family: var(--body);
  font-size: var(--step-0);
  margin-block-start: 10px;
}

.radio {
  display: flex;
  min-height: 32px;
  padding-inline-start: 34px;
  position: relative;
}

input[type="radio"],
input[type="checkbox"] {
  height: 32px;
  left: 0;
  margin-block-start: 16px;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 32px;
}

.radioLabel {
  display: block;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.2;
  padding: 12.8px 20px 9.6px 12px;
}

.radioLabel::before {
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1d1d1d;
  content: "";
  height: 32px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 32px;
  z-index: 1;
}

.radioLabel::after {
  background: #1d1d1d;
  border-radius: 50%;
  content: "";
  height: 20px;
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 14px;
  transform: none;
  width: 20px;
}

input:checked + .radioLabel::after {
  opacity: 1;
}

.Select {
  height: 51.2px;
  inline-size: calc(100% - 40px);
  padding: 9.6px 12px;
}

.dropDown {
  display: block;
  position: relative;

  @media screen and (min-width: 1024px) {
    width: 65%;
  }
}

.dropDown::after {
  background-color: #fff;
  background-image: url(/images/dropdown.svg);
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 32px;
  line-height: 0;
  padding: 8px 0 0 12px;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  transform-origin: center;
  width: 32px;
}

.centerButtons {
  display: flex;
  justify-content: center;
  margin-block-start: 40px;
}

.twoButtonStyling {
  margin-block-start: 0;
  margin-inline-end: 25px;
  min-inline-size: 0;
}

a[aria-current="page"] {
  text-decoration: underline var(--buttonGreen) 4px;
}

.switch {
  display: flex;
  min-height: 56px;
  padding-inline-start: 34px;
  position: relative;
}

.switchLabel {
  align-items: center;
  display: flex;
  font-family: var(--body);
  font-size: var(--step-0);
  margin: -9.6px 16px -9.6px -32px;
  padding: 9.6px 0 9.6px 48px;
  width: auto;

  @media screen and (min-width: 1024px) {
    display: block;
  }
}

.switchLabel::before {
  box-shadow: 0 0 0 1px #1d1d1d;
  content: "";
  height: 32px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 32px;
  z-index: 1;
}

.switchLabel::after {
  background: rgba(0, 0, 0, 0);
  border: solid #1d1d1d;
  border-top-color: rgba(0, 0, 0, 0);
  border-width: 0 0 4px 4px;
  content: "";
  height: 12px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 12px;
  transform: rotate(-45deg) scale(0.75);
  width: 24px;
}

input:checked + .switchLabel::after {
  opacity: 1;
}

.formHeading {
  margin-block-end: -20px;
}