/**
 * Green Resource Information — Category Hub
 *
 * File:
 * /css/category-hub.css
 *
 * Development: Nuts and Bolts Coaching
 * Created: September 24, 2026
 */


/* =========================================================
   CATEGORY HUB
   ========================================================= */

.gri-category-hub {
    width: 100%;
}


/* Three-column directory */

.gri-category-columns {
    column-count: 3;
    column-gap: 60px;
}


/* Keep an entire major category together where possible */

.gri-category-group {
    display: inline-block;
    width: 100%;
    margin: 0 0 42px;
    break-inside: avoid;
    page-break-inside: avoid;
}


/* Major category */

.gri-parent-heading {
    margin: 0 0 12px;
}

.gri-parent-link {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}


/* All nested lists */

.gri-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gri-child {
    margin: 0 0 10px;
}


/* First level beneath major category */

.gri-level-1 {
    padding-left: 10px;
}


/* Second level */

.gri-level-2 {
    padding-left: 14px;
    margin-top: 8px;
}


/* Third and deeper levels */

.gri-level-3,
.gri-level-4,
.gri-level-5 {
    padding-left: 14px;
    margin-top: 8px;
}


/* Category links */

.gri-child-link {
    display: inline-block;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}


/* Make first child level visually stronger */

.gri-level-1 > .gri-child > .gri-child-link {
    font-weight: 600;
}


/* Deeper topics */

.gri-level-2 .gri-child-link,
.gri-level-3 .gri-child-link,
.gri-level-4 .gri-child-link,
.gri-level-5 .gri-child-link {
    font-weight: 400;
}


/* Counts */

.gri-count {
    font-size: 0.8em;
    font-weight: 400;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .gri-category-columns {
        column-count: 2;
        column-gap: 40px;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 767px) {

    .gri-category-columns {
        column-count: 1;
    }

    .gri-category-group {
        margin-bottom: 32px;
    }
}