/**
 * Theme Name: Forbes ESG 2025
 * Template:   twentytwentyfive
 * Version:    1.0.12
 * Description: Forbes ESG 2025
 * Author:     Marco Cazzaro
 * Author URI: https://snappysnail.io
 * License:    GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: forbes-esg
 */

:root {
  --forbes-esg-colors-brand-1: #008ba7;
  --forbes-esg-colors-brand-2: #006f85;
  --forbes-esg-colors-brand-3: #f0f8fa;
  --forbes-esg-colors-brand-4: #ffa300;
  --forbes-esg-colors-brand-5: #cc8200;
}

html {
  scroll-behavior: smooth;
}

.btn,
.btn-wrapper a {
  --current-color: var(--forbes-esg-colors-brand-4);
  --current-color-hover: var(--forbes-esg-colors-brand-5);
  padding: 0.5rem 2rem;
  border-radius: 0.5rem;
  color: var(--wp--preset--color--white);
  background-color: var(--current-color);
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

  &:hover {
    color: var(--wp--preset--color--white);
    background-color: var(--current-color-hover);
  }

  &:has(i),
  &:has(span) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
}

.btn.btn-secondary,
.btn-wrapper.btn-secondary a {
  --current-color: var(--forbes-esg-colors-brand-1);
  --current-color-hover: var(--forbes-esg-colors-brand-2);
}

.forbes-home-menu {
  position: sticky;
  top: 0.5rem;
  z-index: 1000;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;

  ul {
    display: inline-flex;
    border: 2px solid var(--wp--preset--color--white);
    list-style: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background-color: var(--forbes-esg-colors-brand-3);
    border-radius: 3rem;
    padding: 0;
    margin: 0;

    li {
      border-radius: 999px;
      background-color: var(--forbes-esg-colors-brand-3);
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

      &:hover {
        background-color: var(--forbes-esg-colors-brand-2);
        color: #fefefe;
      }

      &.active {
        background-color: var(--forbes-esg-colors-brand-1);
        color: #fefefe;
      }

      a {
        padding: 0.25rem 0.5rem;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;

        &:focus {
          outline-width: 0;
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .forbes-home-menu {
    top: 2rem;

    ul {
      gap: 0.5rem 2rem;

      li {
        a {
          padding: 0.75rem 1.5rem;
        }
      }
    }
  }
}

.forbes-chi-siamo {
  margin-block-start: 2rem;
  scroll-margin-block-start: 8rem;
}

.forbes-title-image {
  margin-block-start: 0;
}

.forbes-block-bg {
  --current-gap: 2rem;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + (var(--current-gap) * 2));
    height: calc(100% + (var(--current-gap) * 2));
    background-color: var(--forbes-esg-colors-brand-3);
    z-index: -1;
    border-radius: 2rem;
  }
}

body.home .wp-block-post-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

header.wp-block-template-part,
footer.wp-block-template-part {
  display: none;
}

main {
  margin-top: 0 !important;
}

.forbes-loghi {
  --current-gap: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--current-gap) * 2);

  figure {
    position: relative;

    &:not(:first-child) {
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(calc(-1 * var(--current-gap)), -50%);
        width: 1px;
        height: 50px;
        background-color: #131313;
      }
    }

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

.forbes-chi-siamo-splash {
  p {
    max-width: 500px;
  }
}

.forbes-sezioni {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 5rem;

  .forbes-sezione {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-block-start: 0;
    order: 1;
    scroll-margin-block-start: 8rem;

    .forbes-compact {
      display: block;
    }

    .forbes-expanded {
      display: none;
    }

    &.forbes-active-section {
      order: 0;

      .forbes-compact {
        display: none;
      }

      .forbes-expanded {
        display: block;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .forbes-sezioni {
    grid-template-columns: repeat(2, 1fr);

    &:has(.forbes-active-section) {
      grid-template-columns: repeat(3, 1fr);
    }

    .forbes-sezione {
      padding-bottom: 4rem;

      &.forbes-active-section {
        grid-column-start: 1;
        grid-column-end: 4;
      }

      .wp-block-buttons {
        position: absolute;
        bottom: 0;
      }
    }
  }
}

footer.forbes-page-footer {
  background-color: var(--forbes-esg-colors-brand-3);
  padding: 3rem;

  p {
    max-width: 100%;
  }

  a {
    text-decoration: none;
    color: var(--forbes-esg-colors-brand-1);
    font-weight: bold;
  }
}

main.wp-block-group > .wp-block-group {
  padding-bottom: 0 !important;
}

.wp-block-heading {
  font-weight: bold;
}

.forbes-giurati-list {
  display: grid;
  gap: 2rem;

  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }

  .forbes-giurato-item {
    text-align: center;

    .forbes-giurato-image img {
      width: 200px;
      height: auto;
      aspect-ratio: 1/1;
      object-fit: cover;
      border-radius: 999px;
    }

    .forbes-giurato-content {
      font-size: 0.8rem;
    }
  }
}

body.page-template-default:not(.home) {
  --wp--style--global--content-size: 1024px;

  main {
    padding-bottom: 3rem;

    h1,
    h2,
    h3,
    h4,
    h5 {
      color: var(--forbes-esg-colors-brand-1);
    }
  }
}

.forbes-galleria-loghi {
  .wp-block-image {
    flex-basis: 100%;
  }

  @media screen and (min-width: 768px) {
    .wp-block-image {
      flex-basis: initial;
      margin-top: auto !important;
      max-width: calc(
        20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8
      ) !important;
    }
  }
}