/* ═════════════════════════════════════════════════════════════════
   Column collars — 3D chamfered-cube illusion

   Sits at the intersection of the navbar and truss columns.
   Layered faces create depth: corner triangles and side
   rectangles sit behind a chamfered front face.

   Each face and corner can be coloured independently via
   custom properties (--collar-top, --collar-tl, etc.).
   ═════════════════════════════════════════════════════════════════ */

/* Collar geometry vars — at :root so the interior nav can
   position itself a fixed distance from the collars.        */
:root {
    --collar-width:   146px;
    --collar-gap-left: 24px;
    --collar-gap-right: 24px;
}

.column-collar {
    --collar-chamfer: 12px;
    --collar-height:  146px;
    /* Horizontal position — defaults match the columns but can be
       overridden independently:                                    */
    position: fixed;
    width:  var(--collar-width);
    height: var(--collar-height);
    z-index: 110;
    pointer-events: none;
    background-color: var(--collar-front, #8D5F8C);
    clip-path: polygon(
        var(--collar-chamfer) 0,
        calc(100% - var(--collar-chamfer)) 0,
        100% var(--collar-chamfer),
        100% calc(100% - var(--collar-chamfer)),
        calc(100% - var(--collar-chamfer)) 100%,
        var(--collar-chamfer) 100%,
        0 calc(100% - var(--collar-chamfer)),
        0 var(--collar-chamfer)
    );
}

/* Collar centre = column centre.
   Column centre = gap + col-width / 2.
   Collar edge  = column centre - collar-width / 2.     */
.column-collar--left {
    left: calc(var(--collar-gap-left) + (var(--truss-col-width) / 2) - (var(--collar-width) / 2));
    top:  calc(var(--nav-top-gap) - (var(--collar-height) - var(--nav-height)) / 2);
}

.column-collar--right {
    right: calc(var(--collar-gap-right) + (var(--truss-col-width) / 2) - (var(--collar-width) / 2));
    top:   calc(var(--nav-top-gap) - (var(--collar-height) - var(--nav-height)) / 2);
}

/* ── Side faces ──────────────────────────────────────
   Narrow rectangles along each edge, flush with the
   parent.  Short sides match the corner triangle legs. */

.collar-face {
    position: absolute;
}

.collar-face--top {
    top: 0;
    left: var(--collar-chamfer);
    width: calc(100% - 2 * var(--collar-chamfer));
    height: var(--collar-chamfer);
    background-color: var(--collar-top, #9C6E9B);
}

.collar-face--right {
    top: var(--collar-chamfer);
    right: 0;
    width: var(--collar-chamfer);
    height: calc(100% - 2 * var(--collar-chamfer));
    background-color: var(--collar-right, #7E507D);
}

.collar-face--bottom {
    bottom: 0;
    left: var(--collar-chamfer);
    width: calc(100% - 2 * var(--collar-chamfer));
    height: var(--collar-chamfer);
    background-color: var(--collar-bottom, #7E507D);
}

.collar-face--left {
    top: var(--collar-chamfer);
    left: 0;
    width: var(--collar-chamfer);
    height: calc(100% - 2 * var(--collar-chamfer));
    background-color: var(--collar-left, #9C6E9B);
}

/* ── Corner triangles ────────────────────────────────
   Right triangles at each corner.  The right angle sits
   at the inner point where the chamfer meets; the legs
   run along the chamfer edges; the hypotenuse IS the
   chamfer line of the front face.                      */

.collar-corner {
    position: absolute;
    width:  var(--collar-chamfer);
    height: var(--collar-chamfer);
}

/* Top-left: right angle at the inner (bottom-right)
   of this square.  Legs go up to (c,0) and left to (0,c). */
.collar-corner--tl {
    top:  0;
    left: 0;
    background-color: var(--collar-tl, #AB7DAA);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* Top-right: right angle at the inner (bottom-left)
   of this square.  Legs go up to (0,0) and right to (c,c). */
.collar-corner--tr {
    top:   0;
    right: 0;
    background-color: var(--collar-tr, #8D5F8C);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Bottom-right: right angle at the inner (top-left)
   of this square.  Legs go down to (0,c) and left to (c,0). */
.collar-corner--br {
    bottom: 0;
    right:  0;
    background-color: var(--collar-br, #6F416E);
    clip-path: polygon(100% 0, 0 100%, 0 0);
}

/* Bottom-left: right angle at the inner (top-right)
   of this square.  Legs go down to (c,c) and right to (0,0). */
.collar-corner--bl {
    bottom: 0;
    left:   0;
    background-color: var(--collar-bl, #8D5F8C);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

/* ── Narrow screens (≤1000px) ───────────────────────
   Main breakpoint: collars disappear with the truss
   columns and the nav goes full width.                 */
@media (max-width: 1000px) {
    .column-collar {
        display: none;
    }
}