#body-child {
  --local-skip-placement: 1.5rem; /* fallback value */
  --local-skip-placement: min(calc(0.2 * var(--local-navbar-height)), 1.5rem); /* 7.5rem at its largest */
}

/* Skip to contact form accesibility link */
.skip-link {
  display: flex;
  flex-direction: row;
  position: absolute;
  min-height: 4.5rem;

  /* hide element just above the top of the screen */
  bottom: 100vh;
  top: auto;
  
  /* use left and translate to centre absolute positioned elements horizontally */
  left: 50%;
  transform: translate(-50%, calc(-1 * var(--local-skip-placement)));

  /* fallback values */
  max-width: 99%;
  width: 100%;

  max-width: calc(100% - 4px);
  width: min(calc(var(--book-width) - 2rem), calc(100% - 2 * var(--local-skip-placement)));

  line-height: 1.1;
  padding: 0.25rem 0.25rem;
  font-family: 'Cutive Mono', 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 1.25rem;
  align-items: center; /* Vertically centre text */
  justify-content: center; /* Horizontally centre text */
  text-align: center;
  border: 2px dashed #333;
  color: var(--vinyl-black);
  background-color: var(--off-white);
  z-index: 1000;
  text-decoration: none;
  white-space: pre-wrap;
  hyphens: auto;
  
  /* slide the pop-up into view */
  transition: transform 0.3s ease;
}

.skip-link:focus {

  transform: translate(-50%, calc(100% + var(--local-skip-placement)));
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.4);
  outline: none;
}

.skip-descriptor {
  display: contents; /* NB. This is CRUCIAL as this span gets used in a flex */
}

/* Base form layout */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}

/* Labels */
label {
  display: block;
  font-weight: bold;
  font-size: 1.25rem;
  font-family: 'Cutive Mono', 'Courier New', Courier, monospace;
  color: var(--vinyl-black);
  margin: 0;
}

/* Inputs and Textarea – retro style with dashed borders */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.9rem;
  border: 2px dashed #333;
  border-radius: 4px;
  font-size: 1.25rem;
  font-family: 'Cutive Mono', 'Courier New', Courier, monospace;
  background-color: var(--off-white);
  color: var(--vinyl-black);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  margin-bottom: 0.6rem;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* Accessible focus style */
input:focus,
textarea:focus {
  outline: none;
  border-color: #ff6600;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.4);
}

/* Consent box container as flex row */
.consent {
  display: flex;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 0.2rem;
  padding: 0.25rem 0 1.2rem 0;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Checkbox styling */
input[type="checkbox"] {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  flex-shrink: 0;
}

/* Consent label spacing */
.consent label {
  font-family: 'Libre Franklin', Roboto, Arial, 'Helvetica Neue', Helvetica, 'Nimbus Sans L', 'Liberation Sans', 'FreeSans', 'Nimbus Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  flex: 7.75rem; /* Wrap under the checkbox below this width */
  margin: 0;
  hyphens: auto;
  word-break: auto-phrase;
}

/* Input validation styling */
input:invalid,
textarea:invalid,
input:invalid:focus,
textarea:invalid:focus {
  border-color: #d11e1e;
  background-color: var(--off-white);
  outline: none;
}

/* Success + error messages */
.main-content p.success,
.main-content p.error {
  background-color: #d1fadf;
  color: #115b2c;
  padding: 1rem;
  border-radius: 4px;
  font-weight: bold;
  margin-bottom: 1rem;
  border: 1px solid #82c28f;
  font-family: 'Cutive Mono', 'Courier New', Courier, monospace;
  text-align: left;
}

.main-content p.error {
  background-color: #fddede;
  color: #b00020;
  border: 1px solid #d11e1e;
}

/* Submit button */
span.button-emoji {
  font-family: 'Noto Color Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', sans-serif;
  vertical-align: bottom;
}
button[type="submit"] {
  container-type: inline-size;
  container-name: button-container;
  background-color: var(--soul-gold);
  color: var(--vinyl-black);
  font-weight: bold;
  cursor: pointer;
  font-family: 'Cutive Mono', 'Courier New', Courier, monospace;
  font-size: 1.35rem;
  transition: background-color 0.3s ease;
  /* padding: 0.75rem 1.25rem; */
  padding: 0.75rem 0rem;
  border-radius: 4px;
  border: 2px solid #333;
}
button[type="submit"]:focus {
  outline: 2px solid #ff6600;
  outline-offset: 4px;
  background-color: #d4b07f; /* Slight lift on focus */
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.4);
}
button[type="submit"]:hover {
  background-color: #d4b07f;
}

@media (max-width: 11.3125rem) {
  button[type="submit"] {
    font-size: 1.25rem;
  }
}

@container body-container (max-width: 16.99rem) {
  .skip-descriptor {
    display: none;
  }
}

@container button-container (max-width: 16.99rem) {
  .booking-text {
    display: none;
  }
}
@container button-container (max-width: 9.99rem) {
  .enquiries-text {
    display: none;
  }
}