/* ═══════════════════════════════════════════════════════════
   CATEGORIES INDEX — /categories/
   Version: v1.0 (theme v3.12.1)

   SYSTEM-LEVEL ONLY. No per-category rule; the list is data-driven.
   Shares the hero's container axis so the page lines up with the
   breadcrumb above it.
   ═══════════════════════════════════════════════════════════ */

.fp-categories-index {
    background-color: var(--fp-color-white);
    padding-top: 12px;                       /* v3.56.8 hero offset (was 32): H1
                                                glyphs ~20px below the breadcrumb */
    padding-bottom: var(--fp-space-xxl);     /* 64px */
}

.fp-categories-index__container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);      /* 20px — matches the breadcrumb */
    box-sizing: border-box;
}

.fp-categories-index__headline {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fp-font-h2);            /* 36px */
    font-weight: var(--fp-weight-heading);   /* 700 */
    line-height: var(--fp-line-display);
    color: var(--fp-color-navy);
    text-wrap: balance;
}

.fp-categories-index__intro,
.fp-categories-index__empty {
    margin: var(--fp-space-s) 0 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fp-font-body-m);        /* 16px */
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
    max-width: 65ch;
}

.fp-categories-index__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fp-gutter-mobile);            /* 16px */
    margin: var(--fp-space-l) 0 0;
    padding: 0;
    list-style: none;
}

.fp-categories-index__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fp-space-s);
    padding: var(--fp-space-m);              /* 24px */
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    box-shadow: var(--fp-shadow-1);
    text-decoration: none;
    transition: var(--fp-button-transition);
}

/* Colour re-asserted on every state — the GeneratePress cascade trap.
   v3.57.139 (owner-approved border standard, 2026-10-26): the card border stays 1px #E5E7EB on hover and focus (was Core Blue).
   The shadow lift and the separate 2px focus-visible outline below are unchanged. */
.fp-categories-index__link:hover,
.fp-categories-index__link:focus,
.fp-categories-index__link:active {
    border-color: var(--fp-color-gray-200);
    box-shadow: var(--fp-shadow-2);
}

.fp-categories-index__link:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
}

.fp-categories-index__label {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fp-font-label);         /* 16px */
    font-weight: var(--fp-weight-label);     /* 600 */
    color: var(--fp-color-navy);
}

.fp-categories-index__arrow {
    color: var(--fp-color-blue);
    flex: 0 0 auto;
}

/* v3.56.0 drawn arrow (base.css). Here the arrow is a FLEX ITEM, and the
   fallback glyph it replaces was a 1.5em line box (25.5px) that set the
   card's height - 1.5px taller than the 16px label. Keeping a 1.5em box,
   with the 0.71em arrow centred in it, keeps every card exactly as tall
   and the arrow exactly where it was. */
.fp-categories-index__arrow {
    height: 1.5em;
    -webkit-mask-size: 100% 0.71em;
            mask-size: 100% 0.71em;
    -webkit-mask-position: 0 50%;
            mask-position: 0 50%;
}

@media (min-width: 640px) {
    .fp-categories-index__container { padding: 0 var(--fp-margin-tablet); }
    .fp-categories-index__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--fp-gutter-desktop);       /* 24px */
    }
}

@media (min-width: 1280px) {
    .fp-categories-index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .fp-categories-index__container { padding: 0 var(--fp-margin-desktop); }
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB -> FIRST TEXT (v3.56.8, text-first hero family)
   Measured from the bottom of the breadcrumb's visible letters to the top
   of the first hero text line's visible letters - not line boxes. Every
   text-first hero (Categories, Resources, the three collections, All
   Providers) matches the family's shortest existing gap: 15.8px below
   480px, 17.1px from 480. A breadcrumb with no descending letters (g p y)
   reads 2.7px further away, so those pages take a larger reduction.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 479.98px) {
    .fp-categories-index { padding-top: 10.6px; }   /* 12px -> gap 15.8 */
}