/* =============================================================================
   newsletters.css — the Newsletter Archive page. Semantic HTML on tokens + the
   shared kk-tabs component (7 schools, with a nested kk-tabs for the per-school
   Kanakia Kids programmes). Replaces the Elementor nested-tabs + icon-list
   widgets.

   Page-scoped design tokens (mirrors post-585.css) live at the .kk-nl root so
   no raw hex/size is repeated below — tweak the palette in one place.
   ============================================================================= */
.kk-nl {
    --kk-nl-teal: #1CA1A1;          /* page title + selected-tab border         */
    --kk-nl-teal-accent: #44ACAF;   /* selected tab fill (feeds kk-tabs)        */
    --kk-nl-tab-bg: #F1F2F3;        /* inactive tab pill background             */
    --kk-nl-tab-text: #54595F;      /* inactive tab pill text                   */
    --kk-nl-heading: #242424;       /* year / period headings                   */
    --kk-nl-link: #414141;          /* link label — near-black at rest          */
    --kk-nl-link-hover: #EA4E5C;    /* link label on hover — red                */
    --kk-nl-ico: #CC3366;           /* envelope icon — raspberry at rest        */
    --kk-nl-ico-hover: #333366;     /* envelope icon on hover — navy            */
    --kk-nl-text: #414141;          /* body text                               */
    --kk-nl-muted: #A0A0A0;         /* pending / empty                         */
    --kk-nl-rule: #E6E6E6;          /* year underline                          */
    color: var(--kk-nl-text);
    overflow-x: clip;
    padding: 8px 0 56px;
}
.kk-nl__inner { max-width: var(--kk-content-max); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.kk-nl__title {
    font-family: "Montserrat", var(--kk-font-heading);
    font-size: clamp(30px, 6vw, 65px); font-weight: 700; text-transform: uppercase;
    line-height: 1.1; color: var(--kk-nl-teal); text-align: center; margin: 24px 0 28px;
}

/* Tabs — page teal accent for the shared kk-tabs component */
.kk-nl .kk-tabs { --kk-tabs-accent: var(--kk-nl-teal-accent); }
.kk-nl .kk-tabs__nav { gap: 10px; flex-wrap: wrap; }
.kk-nl .kk-tabs__tab {
    font-family: "Montserrat", var(--kk-font-heading); font-size: 14px; line-height: 1.25;
    text-align: center; white-space: normal; padding: 10px 18px; min-width: 120px;
    background: var(--kk-nl-tab-bg); border-color: transparent; color: var(--kk-nl-tab-text);
}
/* Re-assert the selected/hover fill: the rule above ties specificity with the
   component's [aria-selected] rule and would otherwise win on source order. */
.kk-nl .kk-tabs__tab[aria-selected="true"], .kk-nl .kk-tabs__tab:hover {
    background: var(--kk-nl-teal-accent); border-color: var(--kk-nl-teal); color: var(--kk-on-brand);
}

/* Nested Kanakia-Kids tabs sit inside a main panel */
.kk-tabs--nested { margin-top: 4px; }
.kk-tabs--nested .kk-tabs__tab { font-size: 13px; padding: 8px 16px; min-width: 110px; }
.kk-tabs--nested .kk-tabs__panel { padding-top: 20px; }

/* Year / period sub-heading */
.kk-nl__year {
    font-family: "Ubuntu", var(--kk-font-heading);
    font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; color: var(--kk-nl-heading);
    margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--kk-nl-rule);
}
.kk-nl__year:first-child { margin-top: 0; }

/* Link lists — flow into columns when there is room */
.kk-nl__list {
    list-style: none; margin: 0 0 8px; padding: 0;
    columns: 3 260px; column-gap: 32px;
}
.kk-nl__item { break-inside: avoid; margin: 0 0 10px; }
.kk-nl__link, .kk-nl__pending {
    display: flex; align-items: flex-start; gap: 10px;
    font-family: "Ubuntu", var(--kk-font-body); font-size: 16px; font-weight: 600;
    line-height: 1.4; text-decoration: none;
}
/* Label and icon carry different colours, and swap independently on hover. */
.kk-nl__link { color: var(--kk-nl-link); transition: color .15s ease; }
.kk-nl__link:hover { color: var(--kk-nl-link-hover); }
.kk-nl__link:focus-visible { outline: 2px solid var(--kk-nl-teal-accent); outline-offset: 3px; border-radius: 3px; }
.kk-nl__pending { color: var(--kk-nl-muted); cursor: default; }
.kk-nl__ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; fill: var(--kk-nl-ico); transition: fill .15s ease; }
.kk-nl__link:hover .kk-nl__ico { fill: var(--kk-nl-ico-hover); }
.kk-nl__pending .kk-nl__ico { fill: currentColor; }

.kk-nl__empty { font-family: var(--kk-font-body); color: var(--kk-nl-muted); font-style: italic; }

@media (max-width: 600px) {
    .kk-nl__list { columns: 1; }
}