/* Site footer, ported from brown (alpine footer.css + contact-form.css) with CMA colours and fonts. */
footer.site-footer {
  --footer-bg: #111;
  --footer-accent: var(--cma-hot-pink);
  --footer-text: rgba(255, 255, 255, 0.65);
  --footer-text-size: 0.8rem;

  padding-left: var(--sc-edgepad);
  padding-right: var(--sc-edgepad);
  padding-top: var(--sc-sec-pad);
  padding-bottom: var(--sc-sec-pad);
  background-color: var(--footer-bg);
  color: var(--footer-text);

  *,
  a,
  p {
    font-family: var(--cma-font-body);
    font-size: var(--footer-text-size);
    font-weight: 300;
    letter-spacing: 0.125rem;
    color: var(--footer-text);
  }

  /* Icon paths take their colour from the svg, not the text colour above. */
  svg * {
    color: inherit;
  }

  .block,
  .block .content {
    margin: 0;
    padding: 0;
  }

  .site-footer__bottom {
    border: 0;
  }

  section.row {
    gap: 3rem;
    margin: 0;
  }

  section.row > * {
    flex: 1 1 calc(50% - 1.5rem);
    padding: 0;
  }

  /* Logo, copyright and logged-in tools span the full width. */
  section.row > :first-child,
  #block-cma-copyrightblock,
  #block-cma-event-groups-link,
  #block-cma-masquerade {
    flex: 1 1 100%;
  }

  .paragraph--type--contact-person div a {
    color: var(--footer-text);
    transition: all 0.5s ease;
  }

  .paragraph--type--contact-person div a:hover {
    color: #fff;
  }

  #block-cma-footercontact,
  .webform-submission-cma-contact-form {
    .content > * {
      margin-bottom: 1rem;
    }

    .field--name-field-social-media {
      margin-top: 2rem;
    }

    h3,
    .field--name-field-contact-title {
      margin-bottom: 2rem;
      font-family: var(--cma-font-title);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.2rem;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
    }

    .paragraph--type--contact-person {
      margin-bottom: 0.75rem;
    }

    .paragraph--type--contact-person > * {
      margin-bottom: 0.175rem;
    }

    a {
      text-decoration: none;
    }

    svg {
      width: 26px;
      height: auto;
      color: #fff;
      transition: color 0.25s ease, transform 0.25s ease;
      transform-origin: center;
    }

    a:hover svg {
      color: var(--footer-accent);
      transform: translateY(-1px) scale(1.01);
    }
  }

  .field--name-field-social-media {
    display: flex;
    gap: 1rem;
  }

  /* Small, lighter links under the social icons (e.g. Privacy Policy). */
  .field--name-field-contact-links {
    margin-top: 1.25rem;
  }

  .field--name-field-contact-links a {
    font-size: 0.7rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
  }

  .field--name-field-contact-links a:hover,
  .field--name-field-contact-links a:focus-visible {
    color: var(--footer-accent);
  }

  #block-cma-footerlogoblock img {
    width: 60px;
    height: auto;
    opacity: 0.5;
  }

  /* Contact form: underlined fields on the dark background. */
  #block-cma-webform {
    label {
      color: var(--footer-text);
    }

    input,
    textarea {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #fff;
      border-radius: 0;
      background-color: transparent;
      color: #fff;
    }

    input:focus,
    textarea:focus {
      outline: none;
      border-bottom-color: var(--footer-accent);
      box-shadow: none;
    }

    .webform-submission-cma-contact-form button.webform-button--submit {
      margin-top: 1.25rem;
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--footer-accent);
      border-radius: 0;
      background-color: var(--footer-accent);
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #fff;
    }

    .webform-submission-cma-contact-form button.webform-button--submit:hover {
      background-color: transparent;
      color: var(--footer-accent);
      transition: all 0.2s ease;
    }
  }

  #block-cma-copyrightblock {
    p a {
      text-decoration: none;
      color: #f5f5f5;
      transition: all 0.3s ease;
    }

    a:hover {
      opacity: 0.8;
    }

    svg {
      width: 15px;
      height: auto;
      margin-right: 3px;
      color: var(--footer-accent);
    }

    .field--name-body {
      display: flex;
      flex-direction: column;
    }

    .field--name-body p:last-child,
    .field--name-body p:last-child a {
      font-size: 0.6rem;
      text-transform: uppercase;
      color: #666;
    }
  }
}

/* ---- Responsive ---- */
@media (max-width: 1400px) {}

@media (max-width: 1200px) {}

@media (max-width: 992px) {}

@media (max-width: 768px) {
  footer.site-footer section.row > * {
    flex: 1 1 100%;
  }
}

@media (max-width: 576px) {}