/*
Theme Name: ICC
Theme URI: https://ptiozzo.net/icc
Author: Paolo ptiozzo
Author URI: https://ptiozzo.net
Description: Tema per il sito italiachecambia.org
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icc
Tags:
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url(assets/css/utility.css);
@import url(assets/css/color.css);
@import url(assets/css/spacing.css);
@import url(assets/css/typography.css);
@import url(assets/css/fonts.css);
@import url(assets/css/shadow.css);
@import url(assets/css/button.css);
@import url(assets/css/form.css);
@import url(assets/css/card.css);
@import url(assets/css/alert.css);
@import url(assets/css/components.css);

:root {
  --icc-max-width: 1440px;
  --icc-maxwidth-single: 80ch;
  --icc-mobile-padding: 1rem;
}
/*
*,
*:before,
*:after {
  outline: 1px solid red;
}*/

/* body :is(.tax-guida-home) {
  container-type: inline-size;
} */

:is(p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
svg {
  vertical-align: baseline;
  height: 0.8em;
  width: 0.8em;
}
.editor :is(p, h1, h2, h3, h4, h5, h6) {
  margin-block-end: 1rem;
}
.wrapper {
  --icc-wrapper-max-width: var(--icc-max-width);
  --icc-wrapper-padding: var(--icc-mobile-padding);

  width: min(
    var(--icc-wrapper-max-width),
    100% - (var(--icc-wrapper-padding) * 2)
  );
  margin-inline: auto;
}
@media screen and (width > 900px) {
  .wrapper {
    width: min(var(--icc-wrapper-max-width), 100%);
  }
}
.row {
  --bs-gutter-x: 2rem;
}
.icc_debug {
  border: 3px dashed gray !important;
  grid-column: 1 / -1;
}
.icc_debug::before {
  content: "Debug, l'area tratteggiata non sarà visibile in produzione";
  display: block;
  font-weight: 700;
}

.icc-titolo-sottolineato {
  display: inline-flex;
  gap: var(--icc-spacing-2);
  align-items: center;
  /*position: relative;
  line-height: var(--icc-leading-12);
  color: var(--icc-tertiary-950);
  margin-bottom: var(--icc-spacing-7);
  z-index: 1;*/
  text-decoration-color: #d5eb93;
  text-decoration-thickness: 0.5em;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: -0.25em;

  svg {
    height: 1em;
    width: 1em;
  }
}

/* .icc-titolo-sottolineato:after {
  content: " ";
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  height: clamp(0.625rem, -0.313rem + 2.5vw, 1.25rem);
  width: 100%;
  background-color: #d5eb93;
  z-index: -1;
} */

.terthiary-title {
  grid-column: 1/-1;
  position: relative;
  overflow: hidden;
  margin-block-start: var(--icc-spacing-7);

  h3 {
    background-color: var(--icc-neutral-white);
    color: var(--icc-gray-950);
    display: inline-block;
    font-size: var(--icc-text-xl);
    font-weight: var(--icc-font-bold);
    text-transform: var(--icc-uppercase);
    line-height: var(--icc-leading-7);
    z-index: 1;
    margin: 0;
    padding-inline-end: var(--icc-spacing-3);
  }
  &:after {
    content: " ";
    position: absolute;
    height: 1px;
    background-color: var(--icc-secondary-300);
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -1;
  }
}

@media screen and (width > 900px) {
  .terthiary-title {
    padding-inline: var(--icc-spacing-9);

    &:after {
      left: var(--icc-spacing-9);
      width: calc(100% - (var(--icc-spacing-9) * 2));
    }
  }
}

.icc-mobile-fullwidth {
  position: relative;
  margin-inline: calc(var(--icc-mobile-padding) * -1);
}
@media screen and (width > 900px) {
  .icc-mobile-fullwidth {
    margin-inline: unset;
  }
}

nav.icc-pagination {
  grid-column: 1 / -1;
  margin-inline: auto;

  .pagination {
    --bs-pagination-color: var(--icc-tertiary-700);
    --bs-pagination-active-bg: var(--icc-tertiary-700);
    --bs-pagination-border-color: var(--icc-gray-300);
    --bs-pagination-active-border-color: var(--icc-tertiary-700);
    --bs-pagination-hover-color: var(--icc-tertiary-700);
    --bs-pagination-focus-color: var(--icc-tertiary-700);
    --bs-pagination-hover-border-color: var(--icc-tertiary-700);
  }
  .page-item:first-child .page-link,
  .page-item:last-child .page-link {
    height: 2.375rem;
  }
}

.section-cta {
  grid-column: 1 / -1;
  margin-top: var(--icc-spacing-8);
  text-align: center;
}
.section-cta a {
  width: 100%;
}
@media screen and (width > 500px) {
  .section-cta a {
    width: auto;
  }
}

.icc-backgroud-fullwidth {
  --icc-backgroud-fullwidth: trasparent;
  box-shadow: 0 0 0 100vmax var(--icc-backgroud-fullwidth);
  clip-path: inset(0 -100vmax);
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 1rem;
}
.video-container:has(.wp-embedded-content) {
  padding-bottom: 36%;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*! accordion */

.accordion:not(:first-of-type) .accordion-item {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.accordion:not(:last-of-type) .accordion-item {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: 0;
}

.accordion-button {
  --bs-accordion-btn-color: var(--icc-tertiary-950);
  font-family: Roboto-Sans;
  font-size: var(--icc-text-lg);
  font-weight: var(--icc-font-bold);
}
.accordion-button:not(.collapsed) {
  --bs-accordion-active-bg: var(--icc-secondary-050);
  --bs-accordion-active-color: var(--icc-tertiary-950);
}
.accordion-flush > .accordion-item h2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/*! Altro */
hr {
  border-top: 1px solid var(--icc-secondary-300);
  opacity: 1;
}

.grid-2-pulsanti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--icc-spacing-4);
}

.icc-img {
  position: relative;

  .icc-img-overlay {
    position: absolute;
    background-color: var(--icc-secondary-100);
    border-radius: var(--icc-spacing-1);
    color: var(--icc-tertiary-700);
    font-size: var(--icc-text-sm);
    line-height: var(--icc-leading-5);
    font-weight: 500;
    text-transform: var(--icc-uppercase);
    padding: var(--icc-spacing-1);
    top: var(--icc-spacing-1);
    left: var(--icc-spacing-1);

    svg {
      height: 16px;
      width: 16px;
    }
  }
}

/*
VISIONE2040
*/
main.visione > section.content > .list > ul > li .box {
  position: relative;
}
main.visione > section.head {
  padding: 20px 30px 0 30px;
}

@media (max-width: 991px) {
  main.visione > section.head {
    padding: 30px 20px 0 20px;
  }
}

main.visione > section.head > h1 {
  margin: 0;
  padding: 0;
  font-size: 33px;
  line-height: 33px;
  color: #000000;
  font-weight: 900;
}

@media (max-width: 991px) {
  main.visione > section.head > h1 {
    font-size: 18px;
    line-height: 18px;
  }
}

main.visione > section.content {
  margin-top: 20px;
  padding: 0 30px 0 30px;
}

@media (max-width: 991px) {
  main.visione > section.content {
    padding: 0;
  }
}

main.visione > section.content > .text {
  border-top: solid 1px #d0d0d0;
  font-size: 19px;
  line-height: 22px;
  padding: 40px 30px 60px 30px;
}

@media (max-width: 991px) {
  main.visione > section.content > .text {
    padding: 15px;
  }
}

@media (max-width: 991px) {
  main.visione > section.content > .list {
    padding: 0 15px;
  }
}

main.visione > section.content > .list > ul {
  margin: 0;
  padding: 0 30px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 1200px) {
  main.visione > section.content > .list > ul {
    justify-content: space-between;
  }
}

@media (max-width: 991px) {
  main.visione > section.content > .list > ul {
    padding: 0;
  }
}

main.visione > section.content > .list > ul > li {
  width: 25%;
  display: flex;
  margin-bottom: 60px;
  padding: 0 8px;
}

@media (min-width: 992px) and(max-width: 1199px) {
  main.visione > section.content > .list > ul > li {
    width: 33.3333333333%;
  }
}

@media (min-width: 768px) and(max-width: 991px) {
  main.visione > section.content > .list > ul > li {
    width: 50%;
    padding: 0;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  main.visione > section.content > .list > ul > li {
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
  }
}

main.visione > section.content > .list > ul > li .box {
  display: flex;
  flex-direction: column;
}

main.visione > section.content > .list > ul > li .box .box-head {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

main.visione > section.content > .list > ul > li .box .box-head figure {
  margin-right: 15px;
}

main.visione > section.content > .list > ul > li .box .box-head span {
  color: #ffffff;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
}

main.visione > section.content > .list > ul > li .box .box-body {
  padding: 20px 10px 0 10px;
  border: solid 1px #d0d0d0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main.visione > section.content > .list > ul > li .box .box-body article {
  font-size: 16px;
  line-height: 20px;
  padding: 0 15px;
}

main.visione > section.content > .list > ul > li .box .box-body ul.actions {
  margin: 60px 0 0 0;
  padding: 0;
  list-style: none;
}

main.visione
  > section.content
  > .list
  > ul
  > li
  .box
  .box-body
  ul.actions
  > li {
  margin-bottom: 10px;
}

main.visione
  > section.content
  > .list
  > ul
  > li
  .box
  .box-body
  ul.actions
  > li
  > a {
  display: block;
  background: #a72627;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  padding: 20px 10px;
  text-align: center;
}

main.visione
  > section.content
  > .list
  > ul
  > li
  .box
  .box-body
  ul.actions
  > li
  > a:hover,
main.visione
  > section.content
  > .list
  > ul
  > li
  .box
  .box-body
  ul.actions
  > li
  > a:active,
main.visione
  > section.content
  > .list
  > ul
  > li
  .box
  .box-body
  ul.actions
  > li
  > a:focus {
  text-decoration: none;
}

@media (min-width: 1200px) {
  main.visione > section.content > .list > ul > li:nth-child(4n) {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    -ms-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
  }

  main.visione > section.content > .list > ul > li:nth-child(4n + 1) {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
  }

  main.visione > section.content > .list > ul > li:nth-child(4n + 2) {
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }

  main.visione > section.content > .list > ul > li:nth-child(4n + 3) {
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}

@media (min-width: 992px) and(max-width: 1199px) {
  main.visione > section.content > .list > ul > li:nth-child(3n) {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    -ms-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
  }

  main.visione > section.content > .list > ul > li:nth-child(3n + 1) {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

@media (min-width: 768px) and(max-width: 991px) {
  main.visione > section.content > .list > ul > li:nth-child(2n) {
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }

  main.visione > section.content > .list > ul > li:nth-child(2n + 1) {
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}

main.visione > section.content > .list > ul > li:nth-child(1) .box .box-head {
  background: #24a1de;
}

main.visione > section.content > .list > ul > li:nth-child(2) .box .box-head {
  background: #ffa050;
}

main.visione > section.content > .list > ul > li:nth-child(3) .box .box-head {
  background: #8e7b6a;
}

main.visione > section.content > .list > ul > li:nth-child(4) .box .box-head {
  background: #31726f;
}

main.visione > section.content > .list > ul > li:nth-child(5) .box .box-head {
  background: #96c150;
}

main.visione > section.content > .list > ul > li:nth-child(6) .box .box-head {
  background: #dcd0a1;
}

main.visione > section.content > .list > ul > li:nth-child(7) .box .box-head {
  background: #3589ab;
}

main.visione > section.content > .list > ul > li:nth-child(8) .box .box-head {
  background: #3589ab;
}

main.visione > section.content > .list > ul > li:nth-child(9) .box .box-head {
  background: #32ac41;
}

main.visione > section.content > .list > ul > li:nth-child(10) .box .box-head {
  background: #5b2886;
}

main.visione > section.content > .list > ul > li:nth-child(11) .box .box-head {
  background: #c0a98e;
}

main.visione > section.content > .list > ul > li:nth-child(12) .box .box-head {
  background: #23b08f;
}

main.visione > section.content > .list > ul > li:nth-child(13) .box .box-head {
  background: #188b71;
}

main.visione > section.content > .list > ul > li:nth-child(14) .box .box-head {
  background: #b64c6e;
}

main.visione > section.content > .list > ul > li:nth-child(15) .box .box-head {
  background: #ef4f21;
}

main.visione > section.content > .list > ul > li:nth-child(16) .box .box-head {
  background: #188b71;
}

main.visione > section.content > .list > ul > li:nth-child(17) .box .box-head {
  background: #837cb5;
}

.publiredazionale > .alert {
  background-color: var(--icc-yellow-100);
  padding: var(--icc-spacing-2);
  border: 1px solid var(--icc-gray-200);
  border-radius: var(--icc-spacing-3);
  color: var(--icc-gray-800);
  font-family: var(--icc-font-sans);
  line-height: var(--icc-leading-6);
  font-size: var(--icc-text-md);

  a {
    font-weight: var(--icc-font-medium);
    color: inherit;
  }
}