/**
 * Phantom components.
 * Ported from src/scss/custom/phantom/components/*.
 * Breakpoints are Bootstrap Italia's $grid-breakpoints: sm 576, md 768, lg 992.
 */

/* ----------------------------------------------------------------- accordion */

/* TEXT COLOR */
.accordion-header .accordion-button,
.accordion.phantom-accordion .accordion-header .accordion-button {
  color: var(--pt-color-text-primary);
}

.accordion-header .accordion-button:hover,
.accordion.phantom-accordion .accordion-header .accordion-button:hover {
  color: var(--pt-color-text-primary-hover);
}

.accordion-header .accordion-button:not(.collapsed),
.accordion.phantom-accordion .accordion-header .accordion-button:not(.collapsed) {
  color: var(--pt-color-text-primary-active);
}

/* FONT STYLE */
.accordion.phantom-accordion .accordion-header .accordion-button {
  font-size: var(--pt-body-1-font-size);
  line-height: var(--pt-body-1-line-height);
  font-weight: var(--pt-font-weight-semibold);
  padding: calc(var(--pt-body-1-font-size) * 0.75) 0;
}

@media (min-width: 992px) {
  .accordion.phantom-accordion .accordion-header .accordion-button {
    font-size: var(--pt-body-1-font-size-lg);
    line-height: var(--pt-body-1-line-height-lg);
  }
}

/* ---------------------------------------------------------------- breadcrumb */

body .breadcrumb-container .breadcrumb .breadcrumb-item a:not(.active) {
  color: var(--pt-color-link-text-default);
}

body .breadcrumb-container .breadcrumb .breadcrumb-item a:not(.active):hover {
  color: var(--pt-color-link-text-hover);
}

/* ---------------------------------------------------------------------- card */

/* hover on title */
.card:hover a {
  color: var(--pt-color-text-primary) !important;
}

.card a.btn-link svg {
  transition: 0.2s ease;
}

.card a.btn-link:hover svg {
  fill: var(--pt-color-text-primary) !important;
}

/* --------------------------------------------------------- card: organization */

/*
 * The .h3 variant used to come for free: Bootstrap Italia's _type.scss does
 * `.h3 { @extend h3; }`, so while this rule was compiled inside the BI bundle
 * Sass propagated the class onto every h3 selector. Plain CSS has no @extend,
 * so it is spelled out here.
 */
.sponsor-e-organizers-card:hover h3,
.sponsor-e-organizers-card:hover .h3 {
  color: var(--pt-color-text-primary-hover);
}

/* -------------------------------------------------------- card: related page */

.card-related-page .card {
  border-top-color: var(--pt-color-border-primary);
}

/* HOVER ANIMATIONS */
.card-related-page .card:hover .h6 {
  color: var(--pt-color-text-primary-hover);
}

.card-related-page .card:hover .icon.icon-primary {
  fill: var(--pt-icon-primary-hover) !important;
}

/* ACTIVE ANIMATIONS */
.card-related-page .card:active .h6 {
  color: var(--pt-color-text-primary-active);
}

.card-related-page .card:active .icon.icon-primary {
  fill: var(--pt-icon-primary-active) !important;
}

/* --------------------------------------------------------- card: publication */

.card-publication .publication-type {
  color: var(--pt-color-text-primary);
}

/* -------------------------------------------------------------- card: person */

.card-person a.read-more {
  color: var(--pt-color-text-primary);
}

/* ------------------------------------------------------------------ carousel */

/*
 * .carousel.pointer-event should ideally be pan-y (to allow for users to scroll
 * vertically) even when their scroll action started on a carousel, but for
 * compatibility (with Firefox) we're preventing all actions instead.
 */
.carousel.pointer-event {
  touch-action: pan-y;
}

/* Pagination */
.splide--slide .splide__pagination__page {
  background: var(--pt-theme-color-primary-base);
  opacity: 0.8;
}

.splide--slide .splide__pagination__page.is-active {
  background-color: var(--pt-theme-color-primary-base);
  opacity: 1;
}

/* ---------------------------------------------------------------- cta banner */

/* xxx banner cta bg color / text color */
.cta-container .banner-title * {
  font-size: var(--pt-heading-3-font-size);
  line-height: var(--pt-heading-3-line-height);
}

@media (min-width: 768px) {
  .cta-container .banner-title * {
    font-size: var(--pt-heading-4-font-size-lg);
    line-height: var(--pt-heading-4-line-height-lg);
  }
}

/* -------------------------------------------------------------------- footer */

.phantom-footer .phantom-border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.514);
}

.phantom-footer .phantom-border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.514);
}

/* PRIMARY MENU SECTION */
.phantom-footer .it-footer-main .top-section-footer {
  background-color: var(--pt-color-background-footer-top);
}

.phantom-footer .it-footer-main .bottom-section-footer {
  background-color: var(--pt-color-background-footer-bottom);
}

/* TITLE ABOVE LIST MENU */
/* xxx da cambiare text-text (1/3) */
.phantom-footer .it-footer-main .phantom-footer-category {
  color: var(--pt-color-text-text-footer-default);
}

/* LIST MENU ITEMS */
.phantom-footer .it-footer-main .link-list-wrapper .link-list a {
  color: var(--pt-color-link-footer-default);
}

.phantom-footer .it-footer-main .link-list-wrapper .link-list a:hover {
  color: var(--pt-color-link-footer-hover);
}

/* LOGO AND ADDRESS SECTION — TITLE BLOCK (let's talk / find us..) */
.phantom-footer .it-footer-main .info-section-container .phantom-footer-category {
  color: var(--pt-color-text-text-footer-default);
}

.phantom-footer .it-footer-main .info-section-container .phantom-footer-label {
  color: var(--pt-color-text-text-footer-default);
}

.phantom-footer .it-footer-main .info-section-container .phantom-footer-social svg {
  fill: white;
}

.phantom-footer .it-footer-main .info-section-container .phantom-footer-social svg:hover {
  fill: white;
}

/* SECONDARY MENU SECTION */
.phantom-footer .it-footer-small-prints {
  background-color: var(--pt-color-background-footer-bottom);
}

.phantom-footer .it-footer-small-prints .phantom-footer-link {
  color: var(--pt-color-link-footer-default);
}

.phantom-footer .it-footer-small-prints .phantom-footer-link:hover {
  color: var(--pt-color-link-footer-hover);
}

/* ---------------------------------------------------------------- login page */

.page-user-login {
  background-color: var(--pt-theme-color-primary-darker);
}

/* ----------------------------------------------------------- modular content */

.modular-content .accordion-button {
  color: var(--pt-color-text-primary);
}

.modular-content .accordion-button:hover {
  color: var(--pt-color-link-text-hover);
}

/* -------------------------------------------------------------------- pager */

body .pagination .page-item .page-link[aria-current] {
  border: 1px solid var(--pt-color-text-primary);
  color: var(--pt-color-text-primary);
}

body .pagination .page-item .page-link:hover {
  color: var(--pt-color-text-primary);
}

/* -------------------------------------------------------------- social share */

.phantom-better-social-sharing .social-share-copy-btn {
  background: none;
  border: none;
  padding: 0;
  appearance: none;
}

/* -------------------------------------------------------------------- video */

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1.777;
}