/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* End of Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

/* COLOR SCHEME */

html {
  /* brand foundation */
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;

  /* light */
  --brand-light: hsl(
    var(--brand-hue) var(--brand-saturation) var(--brand-lightness)
  );
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 98%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: 0.02;

  --surface-light-inverted: hsl(var(--brand-hue) 10% 10%);
  --text-light-inverted: hsl(var(--brand-hue) 15% 91%);

  /* dark */
  --brand-dark: hsl(
    var(--brand-hue) calc(var(--brand-saturation) / 2)
      calc(var(--brand-lightness) / 1.5)
  );
  --text1-dark: hsl(var(--brand-hue) 15% 91%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5% 20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: 0.8;

  /* dim */
  --brand-dim: hsl(
    var(--brand-hue) calc(var(--brand-saturation) / 1.25)
      calc(var(--brand-lightness) / 1.25)
  );
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5% 30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: 0.2;

  /*  .nav-link.active, .nav-link:hover  */
  --nav-link-accent-colour: hsl(20, var(--brand-saturation), 70%);
}

:root {
  color-scheme: light;

  /* set defaults */
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
  --surface-inverted: var(--surface-light-inverted);
  --text-inverted: var(--text-light-inverted);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

[color-scheme='light'] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

[color-scheme='dark'] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

[color-scheme='dim'] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

:root {
  /* FONT SIZES */

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

  /* Step -2: 11.1111px → 12.8px */
  --step--2: clamp(0.6944rem, 0.662rem + 0.1624vi, 0.8rem);
  /* Step -1: 13.3333px → 16px */
  --step--1: clamp(0.8333rem, 0.7821rem + 0.2564vi, 1rem);
  /* Step 0: 16px → 20px */
  --step-0: clamp(1rem, 0.9231rem + 0.3846vi, 1.25rem);
  /* Step 1: 19.2px → 25px */
  --step-1: clamp(1.2rem, 1.0885rem + 0.5577vi, 1.5625rem);
  /* Step 2: 23.04px → 31.25px */
  --step-2: clamp(1.44rem, 1.2821rem + 0.7894vi, 1.9531rem);
  /* Step 3: 27.648px → 39.0625px */
  --step-3: clamp(1.728rem, 1.5085rem + 1.0975vi, 2.4414rem);
  /* Step 4: 33.1776px → 48.8281px */
  --step-4: clamp(2.0736rem, 1.7726rem + 1.5049vi, 3.0518rem);
  /* Step 5: 39.8131px → 61.0352px */
  --step-5: clamp(2.4883rem, 2.0802rem + 2.0406vi, 3.8147rem);
  /* Step 6: 47.7757px → 76.2939px */
  --step-6: clamp(2.986rem, 2.4376rem + 2.7421vi, 4.7684rem);

  /* FONT WEIGHTS */

  .fw200 {
    font-weight: 200;
  }
  .fw300 {
    font-weight: 300;
  }
  .fw400 {
    font-weight: 400;
  }
  .fw500 {
    font-weight: 500;
  }
  .fw600 {
    font-weight: 600;
  }
  .fw700 {
    font-weight: 700;
  }

  /* SPACING */

  /* Space 3xs: 4px → 5px */
  --space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vi, 0.3125rem);
  /* Space 2xs: 8px → 9px */
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.1042vi, 0.5625rem);
  /* Space xs: 12px → 14px */
  --space-xs: clamp(0.75rem, 0.7083rem + 0.2083vi, 0.875rem);
  /* Space s: 16px → 18px */
  --space-s: clamp(1rem, 0.9583rem + 0.2083vi, 1.125rem);
  /* Space m: 24px → 27px */
  --space-m: clamp(1.5rem, 1.4375rem + 0.3125vi, 1.6875rem);
  /* Space l: 32px → 36px */
  --space-l: clamp(2rem, 1.9167rem + 0.4167vi, 2.25rem);
  /* Space xl: 48px → 54px */
  --space-xl: clamp(3rem, 2.875rem + 0.625vi, 3.375rem);
  /* Space 2xl: 64px → 72px */
  --space-2xl: clamp(4rem, 3.8333rem + 0.8333vi, 4.5rem);
  /* Space 3xl: 96px → 108px */
  --space-3xl: clamp(6rem, 5.75rem + 1.25vi, 6.75rem);

  /* Custom pairs */
  --space-3xs-xs: clamp(0.25rem, 0.0417rem + 1.0417vi, 0.875rem);
  --space-2xs-s: clamp(0.5rem, 0.2917rem + 1.0417vi, 1.125rem);
  --space-s-m: clamp(1rem, 0.7708rem + 1.1458vi, 1.6875rem);
  --space-s-l: clamp(1rem, 0.5833rem + 2.0833vi, 2.25rem);
  --space-l-xl: clamp(2rem, 1.4167rem + 2.9167vi, 3.75rem);
  --space-l-2xl: clamp(2rem, 1.1667rem + 4.1667vi, 4.5rem);
  --space-xl-2xl: clamp(3rem, 2.5rem + 2.5vi, 4.5rem);
  --space-3xl-3xl: clamp(6rem, 5.75rem + 1.25vi, 6.75rem);
  --space-m-xl: clamp(1.5rem, 0.9915rem + 2.5424vw, 3.375rem);

  /* OTHER */

  --border-radius: var(--size-step-1);

  --ff-body: 'Montserrat', sans-serif;
  --ff-display: 'Montserrat', sans-serif;

  --gutter: var(--space-s-m);

  --heading-max-width: 30ch;

  --lh: 1.7;

  --li-p-default-width: 55ch;

  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
}

/*  SITE CSS
 ------------------------------------------------------*/

.accent-colour {
  color: var(--brand);
}

article {
  padding-block-start: 0.75rem;
}

.asterisk {
  color: var(--brand);
  font-size: var(--step--1);
}

body {
  background-color: var(--surface2);
  color: var(--text1);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  letter-spacing: var(--tracking);
  line-height: var(--lh);
  margin-block-start: 0;
}

button,
button:hover,
button:active,
button:focus {
  outline: 0;
}

.curve {
  fill: var(--spot-color, var(--surface3));
  display: block;
  height: 3.5em;
  width: 100%;
}

[data-type='inverted'] {
  background-color: var(--surface-inverted);
  color: var(--text-inverted);
}

.features {
  --grid-gap: var(--space-l-xl);
  --flow-space: var(--space-s);
}

.features svg {
  display: block;
  height: 4em;
  margin-inline: auto;
}

.features a {
  text-decoration: none;
}

.features a:hover {
  text-decoration-thickness: 0.08ex;
  text-underline-offset: 0.2ex;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  letter-spacing: var(--tracking-s);
  line-height: 1.1;
}

@media (min-width: 62em) {
  h1,
  h2,
  h3,
  h4 {
    margin-inline: 0;
  }
}

h1,
h2,
h3,
h4 + * {
  --flow-space: 0.5em;
}

h1,
h2,
h3,
h4 {
  text-align: center;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

header {
  position: -webkit-sticky;
  position: sticky;
  z-index: 11000;
  top: 0;
  background-color: var(--surface2);

  border-bottom: 1px solid #eaeaff;
}

.hfh-myFormModal-btn {
  border: 0.0625rem solid var(--brand);
  height: 1.5rem;
  margin-inline: auto;
  background-color: transparent;
  color: var(--text1);
  display: none;
  align-items: center;
  max-width: fit-content;
  border-radius: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--step--2);
  letter-spacing: 0.05rem;
  padding: 0.2em 0.6em;
  width: 100%;

  display: inline;
}

.hfh-myFormModal-btn:hover,
.hfh-myFormModal-btn:focus {
  background-color: hsla(
    var(--brand-hue),
    var(--brand-saturation),
    var(--brand-lightness),
    0.2
  );
}

#hfh-closedFor-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hfh-closedFor-btn {
  border: 0.0625rem solid var(--brand);
  height: 1.5rem;
  margin-inline: auto;
  background-color: transparent;
  color: var(--text1);
  align-items: center;
  max-width: fit-content;
  border-radius: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--step--2);
  letter-spacing: 0.05rem;
  padding: 0.2em 0.6em;
  display: flex;
  text-transform: uppercase;
}

.hfh-closedFor-btn:hover,
.hfh-closedFor-btn:focus {
  background-color: hsla(
    var(--brand-hue),
    var(--brand-saturation),
    var(--brand-lightness),
    0.2
  );
}

.hidden {
  display: none;
}

.hfh-location-map {
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 20rem;
  width: 95%;
  margin: auto;
}

@media (min-width: 48em) {
  .hfh-closedFor-btn {
    margin-top: -1rem;
  }
}

.hfh-map-btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block-start: 1rem;
}

/* The Modal (background) */
.hfh-modal {
  position: fixed; /* Stay in place */
  z-index: 50000; /* Sit on top */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
  padding-top: 2%;
}

/* Modal Content */
.hfh-modal-content {
  width: 95vw;
  max-width: 35rem;
  height: 90vh;
  max-height: 55rem;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  margin: 0 auto;
  background-color: var(--surface1-light);
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.hfh-modal-header {
  min-height: 3rem;
  height: 3rem;
  display: grid;
  padding-left: var(--gutter);
  align-items: center;
  grid-template-columns: auto 3.75rem;
  justify-content: space-between;
}

.hfh-modal-header > * {
  color: rgb(0, 0, 0); /* Fallback color */
  color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
  background-color: var(--modal-color);
}

/* Modal Header h2 */
.hfh-modal-header h2 {
  margin: 0;
  font-size: var(--step-0);
  font-weight: normal;
  text-transform: uppercase;
}

/* Modal Header span */
.hfh-modal-header span {
  font-size: var(--step-2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 1.5rem;
  opacity: 0.8;
  cursor: pointer;
}

.hfh-modal-header span:hover {
  opacity: 1;
  background-color: #000;
  color: var(--surface2);
}

/* Modal Body */
.hfh-modal-body {
  width: 100%;
  background: var(--surface2);
  overflow-y: auto;
  border-radius: 0.25rem;
  max-width: 40rem;
  position: relative;
  margin: 0 auto;
  padding-top: 1rem;
  letter-spacing: 0.0025rem;
  height: 85vh;
}

.hfh-modal-body > * {
  padding: 0 1rem;
  margin-inline: auto;
}

.hfh-modal-body.closedFor,
.hfh-modal-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Modal Footer */
.hfh-modal-footer {
  height: 3rem;
  text-align: right;
  border-top: solid 1px #cccccc;
  padding: var(--gutter);
  background-color: #ffffff;
  background-color: var(--soft-color);
}

.hfh-modal-footer p {
  text-align: center;
  font-size: var(--step--1);
  padding: var(--gap);
  font-size: var(--step--1);
}

.img-full-height {
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.italic {
  font-style: italic;
}

li,
p {
  max-width: var(--li-p-max-width, var(--li-p-default-width));
}

.map-link-btn-container {
  border: none;
  outline: none;
  background: transparent;
}

.map-link-btn,
.map-link-reset-btn,
.modal-footer,
.fp-map-link-reset-btn {
  font-size: var(--step--2);
  background-color: transparent;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
  max-width: fit-content;
  color: var(--text1);
  border: 0.0625rem solid var(--text1);
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.map-link-btn:hover,
.map-link-reset-btn:hover,
.fp-map-link-reset-btn:hover {
  background-color: var(--surface3);
}

.m0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mt-l-xl {
  margin-top: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

.mx-0 {
  margin-inline: 0;
}

.mx-auto {
  margin-inline: auto;
}

.Montserrat-hfh {
  font-family: 'Montserrat', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
}

.opening-times {
  color: var(--text1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#opening-times .isToday {
  background-color: var(--brand);
  padding-inline: 0.25rem;
}

#opening-times .openingTimesHeader {
  color: var(--brand);
}

#opening-times .openingTimesWeekdays {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  padding-block: 1rem;
}

.partner-list {
  list-style: none;
}

.partner-logo {
  width: var(--partner-logo-width, 50%);
  object-fit: contain;
  margin-inline: auto;
}

.pb1 {
  padding-block: 1rem;
}

.primary-button {
  border: 0.0625rem solid var(--text1);
  font-family: var(--ff-body);
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 300;
  cursor: pointer;
  color: var(--text1);
  background-color: transparent;
}

.primary-button:hover,
.primary-button:focus {
  background-color: var(--surface3);
}

.primary-button-dark {
  border: 0.0625rem solid var(--text1-dark);
  font-family: var(--ff-body);
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 300;
  cursor: pointer;
  color: var(--text1-dark);
  background-color: transparent;
}

.primary-button-dark:hover,
.primary-button-dark:focus {
  background-color: hsl(var(--brand-hue) 5% 22%);
}

.prose {
  --flow-space: var(--flow-space), var(--space-l-xl);
  --wrapper-max-width: 55rem;
}

.section > .curve {
  transform: translateY(-0.0625rem);
}

.section > .curve:first-child {
  transform: rotate(180deg) translateY(-0.0625rem);
}

.section__inner {
  background: var(--spot-color, var(--surface3));
  color: var(--spot-color-text, var(--text1));
}

.section__inner .primary-button {
  border-color: var(--text1-dark);
  color: var(--text1-dark);
  margin-inline: auto;
}

.section__inner .primary-button:hover,
.section__inner .primary-button:focus {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), 32%);
}

.site-footer {
  background: var(--surface-inverted);
  color: var(--text-inverted);
  padding: var(--space-s-m);
}

.site-footer__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var(--step--1);
}

.spot-color-primary {
  --spot-color: hsl(var(--brand-hue), var(--brand-saturation), 25%);
}

.spot-color-secondary {
  --spot-color: hsl(20, var(--brand-saturation), var(--brand-lightness));
}

.spot-color-primary,
.spot-color-secondary {
  --spot-color-text: var(--text1-dark);
}

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

.text-align-centre {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.wdc {
  --partner-logo-width: 85%;
}

/*  COMPOSITION CLASSES
    -------------------------------------------------------*/

/* 
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

.multiple-column-grid {
  /* user setting */
  --min-column-size: 20rem;
  --column-count: 2;
  --gap: var(--grid-gap, var(--space-s-l));

  /* calculations */
  --breakpoint: calc(
    var(--min-column-size) * var(--column-count) +
      (var(--gap) * (var(--column-count) - 1))
  );
  --column-size: calc((100% / var(--column-count)) - var(--gap));

  /* implementation */
  display: grid;
  gap: var(--gap);

  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(max(var(--column-size), (100% - var(--breakpoint)) * -999), 100%),
      1fr
    )
  );
}

.multiple-column-grid[data-layout='50-50'] {
  --min-column-size: clamp(16rem, 1rem + 5vw, 26rem);
}

/**
   * REGION 
   * Add consistent vertical padding to create regions of content 
   * Can either be configured by setting --region-space or use a default from the space scale
   */
.region {
  padding-top: var(--region-space, var(--space-l-2xl));
  padding-bottom: var(--region-space, var(--space-l-2xl));
}

.region-space-small {
  --region-space: var(--space-s-m);
}

/**
   * WRAPPER
   * Sets a max width, adds a consistent gutter and horizontally
   * centers the contents
   * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
   */
.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wrapper-max-width, 85rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* NAVIGATION  */

.btn {
  color: var(--text1);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.btn--accent {
  background-color: var(--surface1);
  padding: 0.3rem 2rem;
}

.btn--menu {
  color: var(--text1);
  background-color: transparent;
  border: none;
  display: grid;
  place-items: center;
  padding-inline: 1rem;
  transition: transform 0.3s cubic-bezier(0.64, 0.04, 0.26, 0.87);
}

.btn--menu[aria-expanded='true'] {
  transform: rotate(-180deg);
}

.btn--menu[aria-expanded='true'] + .nav-links {
  transform: translate3d(0, 4rem, 0);
}

li[role='none'],
.nav-link {
  width: 100%;
  display: block;
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
}

.logo {
  margin-inline: 0.5rem;
  width: clamp(3rem, 10vw, 4.5rem);
  display: grid;
  place-items: center;
}

.logo-link:focus-visible,
.nav-link:focus-visible {
  outline: 0.25rem solid var(--accent);
  outline-offset: 0.2em;
  border-radius: 0.5rem;
}

nav {
  position: fixed;
  z-index: 1000;
  width: 100%;
  padding-block: 0.5rem;
  transition: background-color 800ms cubic-bezier(0.64, 0.04, 0.26, 0.87);
  background-color: var(--surface2);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate3d(0, -200%, 0);
  position: absolute;
  z-index: 9999;
  top: 0rem;
  left: 0;
  right: 0;
  background-color: var(--surface1);
  padding: 1.5rem;
  border-bottom: 0.25rem solid var(--accent);
  text-align: center;
}

.nav-links.activated {
  transition: transform 0.4s cubic-bezier(0.64, 0.04, 0.26, 0.87);
}

.nav-link {
  font-size: var(--step--1);
}

.nav-link.active {
  background-color: var(--nav-link-accent-colour);
}

.nav-link:hover {
  background-color: var(--nav-link-accent-colour);
}

@media (min-width: 48em) {
  .btn--menu {
    display: none;
  }

  .nav-link {
    /* @link https://utopia.fyi/type/calculator?c=768,13,1.2,1349,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
*/

    /* Step 0: 13px → 18px */
    font-size: clamp(0.8125rem, 0.3994rem + 0.8606vi, 1.125rem);
  }

  .nav-links {
    position: static;
    transform: translate3d(0, 0, 0);
    flex-direction: row;
    border: 0;
    z-index: 0;
    padding: 0;
    inset: 0;
    background-color: transparent;
  }

  li[role='none'],
  .nav-link {
    width: initial;
  }
}

/* HFH HOME SECTION
    ------------------------------------------------------- */

#hfh-home ul li {
  padding-block-start: 0.5rem;
}

.hfh-home p {
  --li-p-max-width: 30ch;
}

@media (max-width: 47.99em) {
  #hfh-home .multiple-column-grid {
    --grid-gap: var(--space-l-xl);
  }
}

/* HFH WHAT WE DO 
    ------------------------------------------------------- */

@media (min-width: 48em) {
  .hfh-whatwedo.multiple-column-grid {
    --min-column-size: 30rem;
  }
}

@media (min-width: 62em) {
  .hfh-whatwedo a {
    margin-top: auto;
  }

  .hfh-whatwedo.multiple-column-grid {
    --min-column-size: 20rem;
    --column-count: 3;
  }

  .hfh-whatwedo p:nth-last-child(2) {
    padding-bottom: 2rem;
  }
}

/* SHOP
    -------------------------------------------------------*/

.hfh-shop li > *:not(.img-full-height) {
  --li-p-max-width: 30ch;
}

.hfh-shop #hfh-get-in-touch h2 {
  margin-inline: 0;
}

@media (min-width: 48em) {
  .get-in-touch .column-separator {
    border-inline-end: 0.0625rem solid var(--brand);
  }

  .get-in-touch .multiple-column-grid {
    --grid-gap: 0.25rem;
  }

  .hfh-shop {
    row-gap: 4rem;
  }
}

@media (min-width: 62em) {
  .get-in-touch .multiple-column-grid {
    --grid-gap: 2rem;
  }
}

/* FURNITURE REQUEST
    -------------------------------------------------------*/

.hfh-furnreq ul {
  list-style: none;
  padding: 0;
}

.hfh-furnreq ul li {
  margin-inline: auto;
}

/* DONATE
    -------------------------------------------------------*/

.hfh-donate [data-type='inverted'] {
  width: var(--li-p-default-width);
}

/* DONATION GUIDES
    -------------------------------------------------------*/

@media (min-width: 48em) {
  .hfh-donate-guide.multiple-column-grid {
    --min-column-size: 30rem;
  }
}

@media (min-width: 62em) {
  .hfh-donate-guide button {
    margin-top: auto;
  }

  .hfh-donate-guide.multiple-column-grid {
    --min-column-size: 20rem;
    --column-count: 3;
  }

  .hfh-donate-guide p {
    padding-bottom: 2rem;
  }
}

/* ABOUT US
    ------------------------------------------------------- */

.hfh-aboutus li > *:not(.img-full-height) {
  --li-p-max-width: 30ch;
}

/* CONTACT US
    ------------------------------------------------------- */

#hfh-contact {
  margin-top: 0;
}

#hfh-contact h1 {
  margin-block-start: 0;
}

#hfh-contact .accent-colour,
#hfh-contact #opening-times .openingTimesHeader,
#hfh-contact #opening-times .openingTimesWeekdays {
  color: #fefefe;
}

#hfh-contact .map-link-btn,
#hfh-contact .map-link-reset-btn {
  color: var(--text1-dark);
  border: 0.0625rem solid var(--text1-dark);
  cursor: pointer;
}

#hfh-contact .map-link-btn:hover,
#hfh-contact .map-link-reset-btn:hover {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), 30%);
}

.hfh-contact > p {
  max-width: unset;
  text-align: center;
  margin-top: 0;
}

@media (min-width: 48em) {
  .get-in-touch .column-separator {
    border-inline-end: 0.0625rem solid #fefefe;
  }

  .get-in-touch .multiple-column-grid {
    --grid-gap: 0.25rem;
  }
}

@media (min-width: 62em) {
  .get-in-touch .multiple-column-grid {
    --grid-gap: 2rem;
  }
}

/* FOOTER
    ------------------------------------------------------- */

.site-footer__inner p:nth-child(2) {
  margin-block-start: 0;
}

/* TO DO */

/* ADD BELOW TO CLASS LIST?? */

:focus {
  outline: 0.125rem solid;
  outline-offset: 0.3ch;
}

::selection {
  background: var(--color-dark);
  color: var(--color-light);
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

.align-centre {
  align-items: center;
}

.align-start {
  align-items: start;
}

.center {
  justify-content: center;
}

.contact-email {
  /* --fluid-14-16: clamp(0.875rem, 0.7857rem + 0.4464vi, 1rem); */
  /* 320px to 768px */
  font-size: clamp(0.875rem, 0.7857rem + 0.4464vi, 1rem);
  color: hsl(var(--accent));
}

.emphasisred {
  color: red;
  font-size: calc(var(--step-0) * 0.95);
  font-weight: 500;
}

.fa-square-facebook {
  font-size: 2rem;
}

.fb > a {
  font-size: 2rem;
}

.flex-end {
  justify-content: flex-end;
}

.flex-row {
  flex-direction: row;
}

.flex-start {
  justify-content: flex-start;
}

.image-not-mobile {
  display: none;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.space-evenly {
  justify-content: space-evenly;
}

.uppercase {
  text-transform: uppercase;
}

.input-control {
  display: flex;
  flex-direction: column;
}

.input-control input {
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  display: block;
  font-size: 1rem;
  width: 100%;
  background: whitesmoke;
  color: #000;

  min-height: 2rem;
}

.input-control input:focus {
  outline: 0;
}

.input-control.reset input {
  border-color: #f0f0f0;
}

.input-control.success input {
  border-color: #09c372;
  min-height: 2rem;
}

.input-control .success {
  border-color: #09c372;
  font-size: 0.7rem;
}

.input-control.error input {
  border-color: #ff3860;
}

.input-control .error {
  color: #ff3860;
  font-size: 0.7rem;
  height: 1rem;
}

.input-control h3,
label {
  text-transform: uppercase;
  margin: 0.3rem 0 0.5rem 1rem;
}

.input-control input:hover {
  background: #000;
  color: whitesmoke;
}

.row-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.8rem;
}

.col {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

#is_visible_span {
  line-height: 1.1;
}

#submitButton,
#hfh-modalCancel {
  background-color: #0066a2;
  border: none;
  color: white;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin: 1rem 0.125rem;
  cursor: pointer;
}

#graphic-select {
  outline: transparent;
  margin: 0 1rem;
  cursor: pointer;
}

#submitResult {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  display: block;
  border-width: 0.0625rem;
  border-style: solid;
  font-size: var(--step--1);
}

#fpMap {
  height: 100vh;
  width: 100vw;
  display: none;
}

#input-control-id {
  min-height: 1rem;
}

.line {
  min-height: 2rem;
}

.rbClosed {
  cursor: pointer;
}

#reload,
.modal-header-h2 {
  text-transform: uppercase;
}