/* OVERWRITE BOOTSTRAP-ITALIA */
.phantom-footer .phantom-footer-link,
.phantom-footer .it-footer-main .link-list-wrapper ul li a:not(.disabled) {
  text-decoration: none;
}

.phantom-footer-category {
  font-weight: 600;
}

/* sotto footer */
@media (max-width: 768px) {
  .phantom-footer .it-footer-small-prints-list {
    flex-direction: column;
  }
}

/*------------------- SISSA -------------------*/

footer.phantom-footer .it-footer-small-prints > div,
footer.phantom-footer .it-footer-main section {
  padding-left: 24px;
  padding-right: 24px;
}

footer.phantom-footer {
  position: relative;
}

footer.phantom-footer .it-footer-main {
  nav:first-child {
    display: none;
  }

  section > div {
    display: flex;
    flex-direction: column-reverse;

    /* each logo block */
    > div a {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-direction: row;
      transition: 0.2s ease;
      &:hover {
        opacity: 0.8;
      }
      .corner-arrow {
        width: 22px;
        height: auto;
      }
    }
  }

  .section-title {
    color: #a3a3a3;
    border-top: 1px solid #666;
    text-transform: uppercase;
    padding: 10px 0px;
    font-size: 12px;
    margin: 2rem 0rem 1.1rem 0rem;
  }

  .sissa-block {
    order: 2;
    position: relative;
    margin: 3rem 0rem 2rem 0rem;

    /* &::after {
      content: "";
      width: 100vw;
      height: 1px;
      background-color: #666;
      left: 50%;
      transform: translateX(-50%);
      top: -2rem;
      position: absolute;
    } */

    > a {
      margin-bottom: 2rem;
    }

    address,
    a {
      font-size: 14px;
      line-height: 1.5rem;
      margin-bottom: 0.2rem;

      span {
        display: inline-block;
        margin-right: 0.2rem;
        color: #c4c4c4;
      }
    }

    a.main-logo {
      margin-bottom: 2rem;
      img {
        width: 170px;
        height: auto;
      }
    }
  }
}

@media (min-width: 992px) {
  footer.phantom-footer .it-footer-main .sissa-block:after {
    display: none;
  }

  footer.phantom-footer .it-footer-main nav:first-child {
    display: block;
  }
}

/* first section */
footer.phantom-footer {
  font-family: "Suisse Int\'l";

  .it-footer-main {
    background-color: #0d0e0f;
    section:first-child {
      background-color: #0d0e0f;
      display: none;
    }

    nav {
      /* menu title — <h2> when it heads a column of children, a plain <div>
         when the item is a link on its own (see menu--footer-menu.html.twig) */
      .phantom-footer-category {
        color: #8f8f8f;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.5rem;
        padding: 0;
        margin: 0 !important;
      }
      /* menu items */
      .link-list-wrapper ul.link-list li a {
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 9px;
      }

      .link-list-wrapper ul.link-list li a:hover {
        color: #fff;
        text-decoration: underline;
      }
    }
  }
}

@media (min-width: 992px) {
  footer.phantom-footer .it-footer-small-prints > div,
  footer.phantom-footer .it-footer-main section {
    padding: 3rem 0rem;
  }

  footer.phantom-footer .it-footer-main section:first-child {
    display: block;
  }

  /* divs menu items */
  footer.phantom-footer .it-footer-main section:first-child > div {
    flex-direction: row;
  }

  /* div con loghi */
  footer.phantom-footer .it-footer-main section:last-child > div {
    flex-direction: row;
    justify-content: start;
    gap: 130px;
  }

  footer.phantom-footer .it-footer-main {
    .section-title {
      margin: 0rem 0rem 1.1rem 0rem;
    }

    section > div {
      /* each logo block */
    }

    .sissa-block {
      margin-top: 0rem;
      order: 1;
    }
  }
}

@media (min-width: 1200px) {
  footer.phantom-footer .it-footer-main {
    section:last-child > div {
      gap: 160px;
    }
  }
}

/* second section */
footer.phantom-footer .info-section-container {
  background-color: #000;

  .phantom-footer-label {
    color: #c4c4c4;
  }
}

/* third section */
footer.phantom-footer nav.it-footer-small-prints {
  border-top: 1px solid #666666;

  ul li a.phantom-footer-link {
    font-size: 14px;
    line-height: 36px;
    color: #cbcbcb;
    font-weight: 500;
    margin-bottom: 0;
    display: inline-block;

    &:hover {
      color: #fff;
    }
  }
}

@media (min-width: 992px) {
  footer.phantom-footer nav.it-footer-small-prints {
    > div {
      padding: 1rem 0rem;
    }
    ul {
      padding: 0;
      margin: 0;
      justify-content: center;
    }
  }
}

/* social */

footer .phantom-footer-social {
  margin: 2rem 0rem;
  svg {
    fill: #fff;
  }
}

/* Facebook: swap the default artwork for the hover artwork (black square,
   white "f" + 2px inset border) on hover/focus. A CSS `fill` swap can't do it
   because the default artwork knocks the "f" out as a transparent hole, so we
   toggle between two <svg>s. The hover SVG carries its own black/white fills,
   so the `fill:#fff` above does not affect it. */
footer .phantom-footer-social-link .icon--hover {
  display: none;
}
footer .phantom-footer-social-link:hover .icon--default,
footer .phantom-footer-social-link:focus-visible .icon--default {
  display: none;
}
footer .phantom-footer-social-link:hover .icon--hover,
footer .phantom-footer-social-link:focus-visible .icon--hover {
  display: inline-block;
}

/* AREA MICROSITE OVERRIDES
   The brand colour is the CURRENT AREA's accent, never a hardcoded hue:
   `--site-accent` is set on <body> per site context from the area term's
   "Accent color" field (taxonomy `area` → f_shrd_accent_color), see
   interfase_site_context Hooks\Preprocess\Html. The #ffc300 fallback only
   applies outside Drupal (Storybook) or on an area term with no colour set. */

footer.phantom-footer[data-focus-mouse="true"]:not(.btn),
footer.phantom-footer {
  border-top: 5px solid var(--site-accent, #ffc300);
  border-color: var(--site-accent, #ffc300) !important;
}

/* AREA MICROSITE OVERRIDES */
footer nav:not(.it-footer-small-prints),
footer .info-area {
  display: none;
}

footer .info-area {
  .container {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 3rem 0rem;

    &:after {
      content: "";
      background-color: var(--accent);
      width: 100vw;
      height: 1px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Area identity lockup. The artwork is editor-uploaded (area term →
       "Logo with tagline"), so its aspect ratio is unknown: pin the height to
       keep the row's rhythm stable and let the width follow the intrinsic
       ratio, so no logo is ever squashed. */
    .footer__area-logo {
      height: 110px;
      width: auto;
      max-width: 100%;
    }

    /* Last-resort identity when an area has no logo media at all. */
    .footer__area-identity {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 110px;

      .footer__acronym-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: var(--site-accent, #ffc300);
        color: #0d0e0f;
        font-weight: 700;
      }

      .footer__area-name {
        color: #f1f0eb;
        text-transform: uppercase;
      }
    }

    .contact-container {
      display: flex;
      flex-direction: column;
      justify-content: end;
    }

    h6 {
      color: #8f8f8f;
      text-transform: uppercase;
      &:before {
        content: "";
        position: relative;
        width: 14px;
        height: 14px;
        margin-right: 12px;
        display: inline-block;
        top: 0px;
        box-shadow: 0px 0px 0px 3px var(--site-accent, #ffc300) inset;
      }
    }
    /* Accent as link colour is safe here: the footer sits on #0d0e0f, where
       every area accent clears 4.5:1 (WCAG 1.4.3). Do not reuse the accent for
       small text on light backgrounds. */
    a {
      color: var(--site-accent, #ffc300);
      text-decoration: none;
    }
    a:hover {
      color: var(--site-accent, #ffc300);
      text-decoration: underline;
    }
  }
}

/* go back to sissa btn */
footer .sissa-back-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0rem 0rem 3rem 0rem;
}

footer .sissa-back-link {
  padding-top: 0;
  order: 2;

  img {
    width: 60px;
    height: auto;
  }

  .icon-arrow {
    width: 16px;
    height: 16px;
    left: 15px;
  }
}
footer .sissa-back-link {
  display: flex;
}

@media (min-width: 576px) {
  footer .sissa-back-container {
    flex-direction: row;
    gap: 60px;
  }
}
@media (min-width: 992px) {
  footer .info-area {
    & .container {
      .footer__area-logo {
        height: 150px;
        width: auto;
        max-width: 100%;
      }
    }
  }
  footer .info-area {
    & .container {
      .contact-container {
        justify-content: start;
      }
    }
  }
  footer .it-footer-main nav,
  footer nav.it-footer-small-prints,
  footer nav,
  footer .info-area {
    display: block;
  }

  footer .sissa-back-link {
    margin: 0;
    padding: 0;
    display: block;
    border-top: 0px solid #666666;
    border-bottom: 0px solid #666666;
    margin-right: 30px;
  }

  footer.phantom-footer .it-footer-main section:last-child > div {
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: end;
    .sissa-back-container {
      display: flex;
      flex-direction: row;
      padding: 0rem;
      justify-content: space-between;
    }
  }
  footer .phantom-footer-social {
    margin-bottom: 0;
  }

  footer.phantom-footer .it-footer-main {
    .sissa-block {
      display: flex;
      margin: 0rem;
      gap: 50px;

      img {
        width: 140px;
      }
      a.main-logo {
        display: flex;
        margin: 0;
        align-items: start;
        margin-bottom: 0rem;
      }
    }

    .phantom-footer-link.sissanet {
      display: none !important;
    }
  }
}

@media (min-width: 1200px) {
  footer nav,
  footer .info-area {
    .footer__area-logo {
      height: 140px;
    }
  }
}

/* ILAS */
.context--ilas {
  footer .info-area {
    & .container {
      & h6 {
        &::before {
          box-shadow: 0px 0px 0px 3px #a8a8a8 inset;
        }
      }
      & a {
        color: #d2d2d2;
      }
    }
  }
}