/**
 * Trillium Salon - site-wide layout.
 *
 * Cassiopeia lays the page out on a six-column grid whose four content columns
 * are 19.875rem (318px) wide. With the three 1em gaps between them that gives a
 * 1320px content width, and `.grid-child` is capped to match.
 *
 * The old Gantry build ran at 1440px throughout, so the columns become
 * (1440 - 48) / 4 = 348px = 21.75rem. Both values are derived from the one
 * custom property below - change it there, not in the individual sections.
 */

:root {
    /* brand palette - the one source of truth for the whole template */
    --trillium-dark: #312f38;
    --trillium-accent: #b2957a;
    --trillium-blue: #6e9fae;

    --trillium-content-width: 1440px;
    --trillium-grid-gap: 1rem;

    /**
     * Cassiopeia's colour scheme ships a blue link colour. Repointing the token
     * recolours links everywhere at once - body copy, sidebars, pagination,
     * alerts, form help - instead of region by region.
     */
    --link-color: var(--trillium-dark);
    --link-color-rgb: 49, 47, 56;
    --link-hover-color: var(--trillium-accent);
    --link-hover-color-rgb: 178, 149, 122;
}

.site-grid {
    column-gap: var(--trillium-grid-gap);
    grid-template-columns:
        [full-start] minmax(0, 1fr)
        [main-start] repeat(4, minmax(0, calc((var(--trillium-content-width) - (var(--trillium-grid-gap) * 3)) / 4)))
        [main-end] minmax(0, 1fr)
        [full-end];
}

.grid-child {
    max-width: var(--trillium-content-width);
}

/**
 * The fluid layout option sizes its columns as percentages rather than from a
 * fixed width, so it needs the gap kept in step but nothing else.
 */
body.wrapper-fluid .site-grid {
    column-gap: calc(var(--trillium-grid-gap) * 2);
}