/*
Theme Name: B&B Studio 2026 Child Nuke v2026.1.13
Template: bb-2026-nuke-v2026.1.13
Author: Nukemedia
Author URI: https://www.nukemedia.uk
Version: 2026.1.13
Description: Child theme for B&B Studio 2026 Nuke v2026.1.13. Add customisations here without modifying the parent theme.
*/


/* ==========================================================
   v2026.1.9 – Contact Form 7 styling
   Simple: rounded fields, single 1px black border, pill submit.
   Scoped to .wpcf7-form so nothing else on the site is affected.
   ========================================================== */
.wpcf7-form {
  max-width: 640px;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #000;
}

.wpcf7-form p {
  margin: 0 0 22px;
}

.wpcf7-form label {
  display: block;
  font-size: inherit;
  line-height: 1.4;
}

/* Remove the <br> gap and space the label from its field */
.wpcf7-form label br {
  display: none;
}
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

/* Text, email and message fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: inherit;
  color: #000;
  background: transparent;
  border: 1px solid #000;
  border-radius: 12px;
  box-shadow: none;
  outline: none;
  transition: box-shadow 0.15s ease;
}

.wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Focus: thicken the line rather than change colour */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
  box-shadow: 0 0 0 1px #000;
}

/* GDPR / acceptance checkbox */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.wpcf7-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  position: relative;
  opacity: 1;
  visibility: visible;
}
.wpcf7-form input[type="checkbox"]:checked {
  background: #000;
}
.wpcf7-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #e9ff00;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wpcf7-form input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 2px #e9ff00, 0 0 0 3px #000;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 32px;
  font: inherit;
  font-size: inherit;
  color: #000;
  background: transparent;
  border: 1px solid #000;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible {
  background: #000;
  color: #e9ff00;
}
/* Disabled (e.g. until the required GDPR box is ticked): faded, no hover fill */
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form input[type="submit"]:disabled:hover {
  opacity: 0.3;
  background: transparent;
  color: #000;
  cursor: not-allowed;
}
.wpcf7-form .wpcf7-spinner {
  vertical-align: middle;
}

/* Validation + response messages */
/* Element + class beats the field rules above (CF7 adds .wpcf7-not-valid) */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #c00;
}
.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #c00;
}
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid #000;
  border-radius: 12px;
  font-size: 0.9rem;
}
/* Override CF7's coloured state borders (orange/green/red) with plain black */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #000;
}


/* ==========================================================
   v2026.1.11 – Footer "Cookie settings" button
   Complianz reopens its banner from button.cmplz-manage-consent
   (delegated click handler, so it survives Ajaxify page changes).
   Styled to match the other footer menu links (global a styles).
   ========================================================== */
.footer-menu .footer-menu-item button.footer-cookie-settings {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: #000;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.footer-menu .footer-menu-item button.footer-cookie-settings:hover {
  text-decoration: none;
}
.footer-menu .footer-menu-item button.footer-cookie-settings:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}
@media only screen and (max-width: 480px) {
  .footer-menu .footer-menu-item button.footer-cookie-settings {
    text-decoration-thickness: 0.5px;
  }
}


/* ==========================================================
   v2026.1.12 – Footer menu wrap (7 items since Cookie Policy +
   Cookie settings were added). Parent mobile CSS uses
   space-between on one row, which squashed labels together.
   Now wraps with even gaps; labels never break mid-word.
   ========================================================== */
.footer-wrap .footer-menu-row .footer-menu {
  flex-wrap: wrap;
}
.footer-wrap .footer-menu-row .footer-menu p.footer-menu-item {
  white-space: nowrap;
}
@media only screen and (max-width: 480px) {
  .footer-wrap .footer-menu-row .footer-menu {
    justify-content: flex-start;
    column-gap: 1.2em;
    row-gap: 0.35em;
  }
}