:root {
    --neonet-blue: #1b3663;
    --neonet-yellow: #b88b2d;
}

/*
 * --header-bg and --footer-bg are set per tenant by head.blade.php; the fallback
 * is what production renders.
 *
 * Both assume a dark background -- the header is .navbar-dark and the footer
 * .text-light -- so a light tenant color renders unreadable text.
 */
footer {
    background-color: var(--footer-bg, var(--neonet-blue));
}

header {
    background-color: var(--header-bg, var(--neonet-blue));
}

.navbar-brand__net {
    color: var(--neonet-yellow);
}

/*
 * Bootstrap renders .dropdown-header muted (--bs-dropdown-header-color), at
 * .875rem and inheriting weight 400 -- lighter, smaller and greyer than the
 * items it labels, so it reads as disabled rather than as a heading. Match the
 * items on color and size and outweigh them instead.
 *
 * 600 is deliberate: the system-font stack has no real weight above 700, and
 * the heavier the label the more it competes with the items for attention.
 *
 * Scoped to the navbar so any future dropdown header elsewhere keeps the
 * Bootstrap default.
 */
.navbar .dropdown-header {
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 600;
}

/*
 * Only sticky from md up, where the sidebar sits beside the content; below that it
 * is stacked above and pinning it would cover what is being read. The offset reads
 * the row's --bs-gutter-x so it stays equal to the gap between the columns.
 */
@media (min-width: 768px) {
    .documentation-sidebar {
        --documentation-sidebar-top: var(--bs-gutter-x, 1.5rem);

        position: sticky;
        top: var(--documentation-sidebar-top);
        max-height: calc(100vh - (2 * var(--documentation-sidebar-top)));
        overflow-y: auto;
    }
}

/*
 * The edit pencil on a link card is hidden until the card is hovered, so the
 * grid reads as the plain list of links it is.
 *
 * :focus-visible on the pencil itself keeps it reachable by keyboard -- hover
 * alone would hide it from anyone tabbing through. Not :focus-within on the
 * card: clicking the card to open its link leaves that anchor focused, so the
 * pencil would stay visible after the pointer left. Not plain :focus either,
 * which a mouse click on the pencil would latch the same way.
 *
 * The coarse-pointer query shows it unconditionally on touch, where there is no
 * hover at all.
 */
.link-card__edit {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.link-card:hover .link-card__edit,
.link-card__edit:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .link-card__edit {
        opacity: 1;
    }
}

/*
 * A link tile is icon plus ONE line of label, centred in the square. A second
 * line renders below without joining the centring, so the icon lands at the
 * same height whether a label wraps or not -- that alignment across tiles is
 * the point of every fixed height here.
 */
.link-tile__icon {
    height: 4rem;
}

.link-tile__label {
    /* Ignored on an inline box, which a bare <span> is. */
    display: block;
    width: 100%;
    height: calc(1em * var(--bs-body-line-height));
}

/*
 * The clamp lives on the inner box because -webkit-line-clamp only engages
 * with overflow:hidden, and hiding overflow on the outer box would clip to its
 * one-line height -- cutting off the second line this exists to render. Bound
 * here is two lines, so a third ellipsizes rather than pushing the icon out of
 * line.
 *
 * em, not rem: the media query below changes the font size and both heights
 * follow it unaided.
 */
.link-tile__label > span {
    display: -webkit-box;
    max-height: calc(2em * var(--bs-body-line-height));
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/*
 * !important because .fs-5 on the element carries one; equal specificity, and
 * layout.css loads after Bootstrap, so source order settles it.
 *
 * Without the padding a wrapped second line clears the bottom edge by ~2px,
 * which fits but is not worth trusting across platform font metrics.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .link-tile__label {
        font-size: 1rem !important;
    }

    .link-tile__body {
        padding-bottom: 1rem;
    }
}