/* Arreglos para móvil */
@media screen and (max-width: 479px) {
  .site {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .site-branding {
    display: flex;
    gap: 8px;
    margin-right: 8px;
    width: calc(100% - 56px);
  }

  .site-logo-link {
    display: flex;
    align-items: center;
    > img {
      max-height: 55px;
    }
  }
}

@media screen and (min-width: 480px) {
  .site-branding {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 1rem;
  }

  .site-logo-link {
    grid-row: 1;
    > img {
      max-height: 80px;
    }
  }

  .site-title {
    grid-column: 2;
  }

  .site-description {
    grid-column: 2;
  }
}

@media screen and (min-width: 864px) {
  .site-branding {
    justify-content: center;
  }
  .header-image {
    margin: 0 !important;
  }
  .site-logo-link {
    grid-row: 1 / span 2;
  }

  @supports (animation-timeline: scroll()) {
    #primary-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    #masthead {
			pointer-events: none;
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 470px;
    }

    #site-navigation {
			pointer-events: auto;
      position: relative;
      margin: 0;
      background: white;
      z-index: 105;
    }

    .header-image {
      animation: header-image-shrink-on-scroll linear both;
      animation-range: 0px 276px;
    }

    .site-branding {
      animation: site-branding-shrink-on-scroll linear both;
      animation-range: 276px 430px;
    }

    .site-branding,
    .header-image {
      animation-timeline: scroll(root);
      overflow: hidden;
    }

    @keyframes header-image-shrink-on-scroll {
      from {
        max-height: 276px; /* larger than the actual element height */
      }
      to {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
    }

    @keyframes site-branding-shrink-on-scroll {
      from {
        max-height: 128px; /* larger than the actual element height */
      }
      to {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
    }
  }
}

/* Ocultar el Me gusta de Jetpack */
.jetpack-likes-widget-wrapper {
  display: none;
}

/* =========================================
   ACORDEONS EN FORMAT TAULA
   ========================================= */

/* ---------- ITEM ---------- */

.accordion-item-grid {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   CAPÇALERA
   ========================================= */

.accordion-item-grid .wp-block-accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
}

.accordion-item-grid .wp-block-accordion-heading__toggle {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.25fr
        0.85fr
        45px;

    align-items: stretch;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border: 1px solid #999;
    border-bottom: 0;

    background: transparent;
    text-align: left;

    box-sizing: border-box;
}


/* =========================================
   COLUMNES
   ========================================= */

.accordion-item-grid .wp-block-accordion-heading__toggle-title {
    display: contents;
}

.accordion-item-grid .wp-block-accordion-heading__toggle-title > div {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    margin: 0;
    padding: 10px 14px;

    box-sizing: border-box;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;

    text-align: left;

    overflow-wrap: break-word;
    word-break: normal;
}


/* Primera columna en negreta */

.accordion-item-grid
.wp-block-accordion-heading__toggle-title > div:first-child {
    font-weight: 700;
}


/* Separadors verticals */

.accordion-item-grid
.wp-block-accordion-heading__toggle-title > div + div {
    border-left: 1px solid #999;
}


/* =========================================
   ICONA + / ×
   ========================================= */

.accordion-item-grid .wp-block-accordion-heading__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    margin: 0;
    padding: 0;

    border-left: 1px solid #999;

    font-size: 1.4rem;
    font-weight: 700;
}


/* =========================================
   BORDES ENTRE FILES
   ========================================= */

.accordion-item-grid + .accordion-item-grid
.wp-block-accordion-heading__toggle {
    border-top: 1px solid #999;
}


/* Última fila */

.accordion-item-grid:last-child
.wp-block-accordion-heading__toggle {
    border-bottom: 1px solid #999;
}


/* =========================================
   PANEL OBERT
   ========================================= */

.accordion-item-grid .wp-block-accordion-panel {
    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 24px 28px;

    box-sizing: border-box;

    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}


/* Elimina marges sobrants */

.accordion-item-grid
.wp-block-accordion-panel > *:first-child {
    margin-top: 0;
}

.accordion-item-grid
.wp-block-accordion-panel > *:last-child {
    margin-bottom: 0;
}


/* =========================================
   TABLET / PANTALLES MITJANES
   ========================================= */

/*
 * No depenem dels breakpoints de Gutenberg.
 * Aquesta regla entra quan el viewport ja és
 * prou estret perquè la taula necessiti més
 * espai per columna.
 */

@media (max-width: 1272px) {

    .accordion-item-grid .wp-block-accordion-heading__toggle {
        grid-template-columns:
            1.8fr
            0.9fr
            0.85fr
            1.15fr
            0.75fr
            40px;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-title > div {
        padding: 9px 10px;
        font-size: 0.95rem;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-icon {
        min-height: 56px;
        font-size: 1.25rem;
    }
}


/* =========================================
   MÒBIL / TABLETS PETITS
   ========================================= */

@media (max-width: 782px) {

    .accordion-item-grid .wp-block-accordion-heading__toggle {
        grid-template-columns:
            1.7fr
            0.85fr
            0.8fr
            1fr
            0.7fr
            32px;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-title > div {
        min-height: 56px;

        padding: 8px 7px;

        font-size: 0.9rem;
        line-height: 1.25;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-icon {
        min-height: 56px;
        font-size: 1.15rem;
    }

    .accordion-item-grid .wp-block-accordion-panel {
        padding: 18px;
    }
}


/* =========================================
   MÒBILS PETITS
   ========================================= */

@media (max-width: 480px) {

    .accordion-item-grid .wp-block-accordion-heading__toggle {
        grid-template-columns:
            1.55fr
            0.8fr
            0.75fr
            0.95fr
            0.65fr
            28px;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-title > div {
        min-height: 54px;

        padding: 7px 5px;

        font-size: 0.82rem;
        line-height: 1.2;
    }

    .accordion-item-grid
    .wp-block-accordion-heading__toggle-icon {
        min-height: 54px;
        font-size: 1.05rem;
    }

    .accordion-item-grid .wp-block-accordion-panel {
        padding: 16px;
    }
}