/* PUBLIC SITE SHELL — floating glass bar + pill nav. Tokens only. Page styles: css/pages/public-home.css */
.pub {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.pub__header {
    position: sticky;
    inset-block-start: var(--sp-3);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    max-width: calc(var(--content-max) + var(--sp-8));
    margin: var(--sp-3) auto 0;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
    width: calc(100% - var(--sp-8));
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--elev-3);
}

.pub__spacer {
    flex: 1;
}

.pub__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Nav pill: links are direct children of .pub__nav (no wrapper div, no inline styles). */
.pub__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-inline: auto;
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
}

    .pub__nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-5);
        border-radius: var(--r-pill);
        color: var(--text-2);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        line-height: 1.4;
        white-space: nowrap;
        transition: color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
    }

        .pub__nav a .icon {
            flex: none;
            margin: 0;
            transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
        }

        .pub__nav a span {
            display: inline-block;
        }

        .pub__nav a:hover {
            color: var(--text-1);
            background: var(--surface-3);
            text-decoration: none;
        }

            .pub__nav a:hover .icon {
                transform: translateY(-1px);
                color: var(--accent);
            }

        .pub__nav a[aria-current="true"] {
            color: var(--accent-on);
            background: var(--accent);
            box-shadow: var(--shadow-1), 0 6px 20px -8px var(--accent-glow);
        }

            .pub__nav a[aria-current="true"] .icon {
                color: inherit;
            }

.pub__burger {
    display: none;
}

.pub__main {
    flex: 1;
    width: 100%;
    outline: none;
    margin-block-start: calc(var(--sp-12) * -1);
}

.pub__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-8) var(--sp-6);
    border-block-start: 1px solid var(--border);
    color: var(--text-3);
    font-size: var(--fs-sm);
    text-align: center;
}

.pub__admin {
    color: var(--text-3);
}

    .pub__admin:hover {
        color: var(--text-1);
    }

/* Tablet: icons only (the active one keeps its label) */
@media (max-width: 1023px) {
    .pub__nav a {
        padding-inline: var(--sp-3);
    }

        .pub__nav a span {
            display: none;
        }

        .pub__nav a[aria-current="true"] span {
            display: inline-block;
        }
}

/* Phone: burger opens a full-width card under the bar; links are a vertical list with icon + label */
@media (max-width: 767px) {
    .pub__header {
        gap: var(--sp-2);
        padding-inline: var(--sp-3);
        width: calc(100% - var(--sp-6));
    }

    .pub__cta {
        display: none;
    }

    .pub__burger {
        display: inline-flex;
    }

    .pub__nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(100% + var(--sp-2));
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--sp-1);
        padding: var(--sp-2);
        max-height: calc(100dvh - var(--topbar-h) - var(--sp-8));
        overflow-y: auto;
        border-radius: var(--r-xl);
        border-color: var(--glass-border);
        background: var(--surface-1);
        box-shadow: var(--elev-4);
    }

    .pub__header[data-open] .pub__nav {
        display: flex;
    }

    .pub__nav a {
        justify-content: flex-start;
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--r-lg);
        font-size: var(--fs-base);
    }

        .pub__nav a span, .pub__nav a[aria-current="true"] span {
            display: inline-block;
        }
}

/* ---------- Mobile fixes ---------- */
/* .brand rules live in layout-admin.css (not loaded on the public site): keep the brand on one line and let it shrink. */
.pub__header .brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pub__header .brand__text { min-width: 0; }
.pub__header .brand__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
    .pub__tools { margin-inline-start: auto; flex: none; }          /* nav is hidden here: push theme + burger to the far side */
    .pub__header .brand { flex: 1 1 auto; }
    .pub__nav { z-index: 1; }
    .pub__nav a { width: 100%; }
    .pub__nav a[aria-current="true"] { box-shadow: none; }
}
@media (max-width: 1023px) {
    .dropdown__menu--wide { min-width: min(18rem, calc(100vw - var(--sp-8))); }
}