/* =========================================================
   NEWSLETTERS ARCHIVE
========================================================= */

.school-newsletters__heading,
.school-newsletters__empty {
    margin-top: 0;
}

.school-newsletters__heading {
    margin-bottom: 1.5rem;
}

.school-newsletters__empty {
    margin-bottom: 0;
}


.school-newsletters {
    --school-newsletter-tab-colour: var(--school-text);
    --school-newsletter-tab-hover-colour: var(--school-primary);
    --school-newsletter-tab-hover-indicator-colour: var(--school-primary);
    --school-newsletter-tab-active-colour: var(--school-primary);
    --school-newsletter-tab-indicator-colour: var(--school-primary);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* =========================================================
   ACADEMIC YEAR ACCORDION
========================================================= */

.school-newsletters__year {
    overflow: hidden;
    border:
        1px solid
        var(--school-border);
    border-radius:
        var(--school-newsletter-radius);
    background: transparent;
}

.school-newsletters__year-summary {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.35rem;
    color:
        var(--school-on-primary);
    background:
        var(--school-primary);
    cursor: pointer;
    list-style: none;
}

.school-newsletters__year-summary::-webkit-details-marker {
    display: none;
}

.school-newsletters__year-summary::marker {
    content: "";
}

.school-newsletters__year-summary:hover {
    filter: brightness(0.96);
}

.school-newsletters__year-summary:focus-visible {
    outline:
        3px solid
        var(--school-on-primary);
    outline-offset: -5px;
}

.school-newsletters__year-title {
    margin: 0;
    color: inherit;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
}


/* Accordion plus/minus icon */

.school-newsletters__year-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    color: inherit;
}

.school-newsletters__year-icon::before,
.school-newsletters__year-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.school-newsletters__year-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
    transition: transform var(--school-transition);
}

.school-newsletters__year[open]
.school-newsletters__year-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}

.school-newsletters__year-content {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--school-surface);
}
/* =========================================================
   TERM TABS
========================================================= */

.school-newsletters
.school-newsletters__tab-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--school-newsletter-tab-gap);
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--school-newsletter-border);
}


/*
 * Strong reset required because Elementor/global theme
 * button styles can otherwise override these tabs.
 */
.school-newsletters
button.school-newsletters__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    width: auto;
    min-width: 0;
    min-height: 44px;

    margin: 0;
    padding: 0.65rem 0 0.75rem;

    border: 0 !important;
    border-radius: 0 !important;

    color: var(--school-newsletter-tab-colour) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}


/* Underline indicator */

.school-newsletters
button.school-newsletters__tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 3px;
    background: transparent;
    transition: background-color var(--school-transition);
}


/* Hover */

.school-newsletters
button.school-newsletters__tab:hover {
    border: 0 !important;
    border-radius: 0 !important;

    color: var(--school-newsletter-tab-hover-colour) !important;
    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
    transform: none;
}

.school-newsletters
button.school-newsletters__tab:hover::after {
    background: var(--school-newsletter-tab-hover-indicator-colour);
}


/* Active tab */

.school-newsletters
button.school-newsletters__tab.is-active,
.school-newsletters
button.school-newsletters__tab[aria-selected="true"] {
    border: 0 !important;
    border-radius: 0 !important;

    color: var(--school-newsletter-tab-active-colour) !important;
    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
    font-weight: 700;
}

.school-newsletters
button.school-newsletters__tab.is-active::after,
.school-newsletters
button.school-newsletters__tab[aria-selected="true"]::after {
    background: var(--school-newsletter-tab-indicator-colour);
}


/* Keyboard focus */

.school-newsletters
button.school-newsletters__tab:focus:not(.is-active):not([aria-selected="true"]) {
    border: 0 !important;
    border-radius: 0 !important;

    color: var(--school-newsletter-tab-hover-colour) !important;
    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
}

.school-newsletters
button.school-newsletters__tab:focus-visible {
    outline: 2px solid var(--school-primary);
    outline-offset: 4px;
}


/* Newsletter count */

.school-newsletters
.school-newsletters__tab-count {
    display: inline;
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    color: inherit;
    background: transparent;

    font-size: 0.85em;
    font-weight: 400;
    line-height: inherit;

    opacity: 0.65;
}

.school-newsletters__tab-count::before {
    content: "(";
}

.school-newsletters__tab-count::after {
    content: ")";
}
/* =========================================================
   TERM PANELS
========================================================= */

.school-newsletters__tab-panel {
    margin: 0;
    padding: 0;
}

.school-newsletters__tab-panel[hidden] {
    display: none;
}

.school-newsletters__tab-panel
.school-documents__list {
    margin: 0;
    padding: 0;
}

.school-newsletters__tab-panel
.school-documents__item {
    margin-bottom: 0.75rem;
}

.school-newsletters__tab-panel
.school-documents__item:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .school-newsletters { gap: 0.75rem; }
    .school-newsletters__year-summary { min-height: 52px; padding: 0.85rem 1rem; }
    .school-newsletters__year-title { font-size: 1.2rem; }
    .school-newsletters__year-content { padding: 1rem; }
    .school-newsletters .school-newsletters__tab-list {
        flex-wrap: nowrap; gap: 1.25rem; overflow-x: auto; overflow-y: hidden;
        margin-bottom: 1rem; padding-bottom: 0; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .school-newsletters .school-newsletters__tab-list::-webkit-scrollbar { display: none; }
    .school-newsletters button.school-newsletters__tab {
        flex: 0 0 auto; min-height: 42px; padding: 0.6rem 0 0.7rem; white-space: nowrap;
    }
    .school-newsletters__tab-panel .school-documents__item { margin-bottom: 0.65rem; }
}

@media (max-width: 480px) {
    .school-newsletters__year-summary { padding: 0.8rem 0.9rem; }
    .school-newsletters__year-content { padding: 0.9rem; }
    .school-newsletters__tab { min-height: 40px; font-size: 0.95rem; }
}


/* =========================================================
   LATEST NEWSLETTERS
========================================================= */

.school-latest-newsletters__heading,
.school-latest-newsletters__empty {
    margin-top: 0;
}

.school-latest-newsletters__heading {
    margin-bottom: 1.5rem;
}

.school-latest-newsletters__empty {
    margin-bottom: 0;
}

.school-latest-newsletters__items .school-documents__item:last-child {
    margin-bottom: 0;
}