/* ==================================================================
 * Shared footer — column grid.
 *
 * Deliberately NOT Tailwind utilities. assets/css/tailwind.css is a purged
 * build, and the home page loads only that bundle (no Tailwind CDN), so an
 * arbitrary-value class like `xl:grid-cols-[220px_1fr_1fr_1fr_215px]` that
 * was added after the last purge simply does not exist there — the grid then
 * silently falls back to whatever earlier breakpoint did survive. Plain CSS
 * renders the same on every page whether the CDN is present or not.
 * ================================================================== */

.rgu-foot-grid {
    display: grid;
    gap: 48px;
    padding-bottom: 48px;
    grid-template-columns: minmax(0, 1fr);
}

/* Brand | Explore | Portals | Highlights | Contact */
@media (min-width: 640px) {
    .rgu-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .rgu-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .rgu-foot-grid {
        gap: 34px;
        grid-template-columns: 232px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 226px;
    }
}

/* Column heading */
.rgu-foot-h {
    margin: 0 0 20px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
.rgu-foot-h--sub { margin-top: 26px; font-size: 10.5px; letter-spacing: .16em; }

/* Link lists.
   The site already gives `footer li > a` a 44px min-height for touch targets,
   which supplies the separation on its own — so the row gap here stays small,
   otherwise the columns read twice as tall as they should. */
.rgu-foot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rgu-foot-list a,
.rgu-foot-list span {
    font-size: 14px; line-height: 1.5; text-decoration: none;
    color: rgba(255, 255, 255, .7);
    transition: color .2s ease;
}
.rgu-foot-list a:hover { color: #fff; }

/* A destination we do not have a page or URL for yet. Shown so the structure
   is complete, but never rendered as a link that goes nowhere. */
.rgu-foot-list span.rgu-foot-tbd { color: rgba(255, 255, 255, .34); cursor: default; }

/* Learning resources — a compact inline set inside the Highlights column */
.rgu-foot-lr { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.rgu-foot-lr a {
    font-size: 13px; text-decoration: none;
    color: rgba(255, 255, 255, .62);
    transition: color .2s ease;
}
.rgu-foot-lr a:hover { color: #a3e635; }

/* Contact column */
.rgu-foot-contact { display: grid; gap: 18px; }
.rgu-foot-row { display: flex; align-items: flex-start; gap: 12px; }
.rgu-foot-row > span:first-child { flex: 0 0 auto; color: rgba(255, 255, 255, .7); line-height: 1.5; }
.rgu-foot-row p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.rgu-foot-row a { color: inherit; text-decoration: none; transition: color .2s ease; }
.rgu-foot-row a:hover { color: #fff; }

.rgu-foot-dir {
    display: inline-block; margin-top: 4px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: #a3e635; transition: color .2s ease;
}
.rgu-foot-dir:hover { color: #bef264; }