/* ==========================================================================
   Public header — the floating pill of nizu.io
   --------------------------------------------------------------------------
   Markup: app/Views/includes/public/topbar.php   Behaviour: assets/js/public-header.js

   One centred capsule floating over the page: brand, navigation, call to
   action. Transparent while the page is at the top (the way the marketing
   site opens), glass + shadow once .is-scrolled is on. Below 992px the links
   move into a right-hand drawer.

   Everything is scoped to .nz-ph26 so nothing here can reach the authenticated
   topbar. Colours are declared as tokens on .nz-ph26 and redefined once for
   dark mode (body.color-1E202D) — see .claude/rules/frontend-ui.md.
   ========================================================================== */

/* ------------------------------------------------------------- geometry --

   The three numbers that decide where the capsule sits and where the page
   below it starts. They live on :root, not on .nz-ph26, because
   .public-page-container is NOT a descendant of the header and has to read
   them to keep clear of it.

   The height is written down rather than left to the content. It is not
   decoration: the tallest child changes with the breakpoint (the 44px round
   hamburger appears, the desktop links go), so a content-driven bar silently
   grows past the margin that is supposed to clear it.                        */

:root {
    --nz-ph-top: 20px;
    /* the gap above the capsule */
    --nz-ph-h: 68px;
    /* the capsule itself, border-box */
    --nz-ph-gap: 16px;
    /* breathing room between it and the page */
}

@media (max-width: 575.98px) {
    :root {
        --nz-ph-top: 12px;
        --nz-ph-h: 56px;
        --nz-ph-gap: 14px;
    }
}

.nz-ph26 {
    /* light — the values of the marketing site's design tokens */
    --nz-ph-ink: #1a1a1c;
    /* secondary */
    /* the marketing site uses secondary/60; measured on a light page that is
       4.49:1, so the resting links are a notch darker here — still clearly the
       quiet state next to the black active link, but readable */
    --nz-ph-ink-soft: rgba(26, 26, 28, .68);
    --nz-ph-glass: rgba(252, 252, 253, .72);
    /* background-1 */
    --nz-ph-glass-solid: #fcfcfd;
    --nz-ph-stroke: #e3e7ed;
    /* stroke-2 */
    --nz-ph-hairline: rgba(26, 26, 28, .08);
    --nz-ph-shadow: 0 8px 30px rgba(16, 24, 40, .08);
    --nz-ph-chip: #f0f2f6;
    /* background-4 */
    --nz-ph-bar: #070b10;
    /* the hamburger bars */
    --nz-ph-cta-bg: #0f1217;
    /* background-6 — a dark pill on a light page */
    --nz-ph-cta-ink: #fcfcfc;
    --nz-ph-cta-stroke: #2a333e;
    --nz-ph-drawer-bg: #ffffff;

    --nz-ph-max: 1290px;

    position: relative;
    z-index: 1030;
}

body.color-1E202D .nz-ph26 {
    --nz-ph-ink: #fcfcfc;
    /* accent */
    --nz-ph-ink-soft: rgba(252, 252, 252, .6);
    --nz-ph-glass: rgba(24, 29, 38, .72);
    /* background-7 */
    --nz-ph-glass-solid: #181d26;
    --nz-ph-stroke: #2a333e;
    /* stroke-7 */
    --nz-ph-hairline: rgba(255, 255, 255, .1);
    --nz-ph-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    --nz-ph-chip: #181d26;
    --nz-ph-bar: #dfe4eb;
    --nz-ph-cta-bg: #fcfcfd;
    /* inverted: a light pill on a dark page */
    --nz-ph-cta-ink: #1a1a1c;
    --nz-ph-cta-stroke: #d7dde5;
    --nz-ph-drawer-bg: #0f1217;
}

/* --------------------------------------------------------------- the pill */

.nz-ph26-bar {
    position: fixed;
    top: var(--nz-ph-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: calc(100% - 32px);
    max-width: var(--nz-ph-max);
    height: var(--nz-ph-h);
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 999px;

    background-color: transparent;
    box-shadow: none;
    transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, top .4s ease, padding .4s ease;
}

/* once the page moves, the capsule appears under the content */
.nz-ph26-bar.is-scrolled {
    background-color: var(--nz-ph-glass);
    border-color: var(--nz-ph-hairline);
    box-shadow: var(--nz-ph-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}

/* browsers without backdrop-filter get the opaque capsule instead of a
   washed-out translucent one over the content */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nz-ph26-bar.is-scrolled {
        background-color: var(--nz-ph-glass-solid);
    }
}

/* ------------------------------------------------------------------ brand */

.nz-ph26-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 6px;
    line-height: 0;
}

.nz-ph26-logo {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 36px;
}

/* ------------------------------------------------------------ the links */

.nz-ph26-nav {
    /* .navbar comes along for the ride so the scrollbar height math in
       general_helper.js keeps counting a topbar here — undo what it paints */
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: none;
}

.nz-ph26-nav ul {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nz-ph26-nav ul::-webkit-scrollbar {
    display: none;
}

.nz-ph26-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
    white-space: nowrap;
    color: var(--nz-ph-ink-soft);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nz-ph26-link:hover,
.nz-ph26-link:focus-visible {
    color: var(--nz-ph-ink);
    border-color: var(--nz-ph-stroke);
    text-decoration: none;
}

.nz-ph26-link.is-here {
    color: var(--nz-ph-ink);
    border-color: var(--nz-ph-stroke);
    background-color: var(--nz-ph-chip);
}

/* ---------------------------------------------------------- the two buttons */

.nz-ph26-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.nz-ph26-ghost,
.nz-ph26-cta {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 90px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 150%;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.nz-ph26-ghost {
    color: var(--nz-ph-ink-soft);
    background: none;
}

.nz-ph26-ghost:hover,
.nz-ph26-ghost:focus-visible {
    color: var(--nz-ph-ink);
    border-color: var(--nz-ph-stroke);
    text-decoration: none;
}

.nz-ph26-cta {
    color: var(--nz-ph-cta-ink);
    background-color: var(--nz-ph-cta-bg);
    border-color: var(--nz-ph-cta-stroke);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.nz-ph26-cta:hover,
.nz-ph26-cta:focus-visible {
    color: var(--nz-ph-cta-ink);
    text-decoration: none;
}

/* the label slides left and a chevron slides in behind it — the marketing
   site's button. Drawn with a mask so it takes the button's own colour in
   both themes instead of shipping two SVGs. */
.nz-ph26-ghost span,
.nz-ph26-cta span {
    display: inline-block;
    transition: translate .3s ease-in-out;
}

.nz-ph26-ghost::before,
.nz-ph26-cta::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    translate: 0 -50%;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: all .3s ease-in-out;
}

@media (hover: hover) {

    .nz-ph26-ghost:hover,
    .nz-ph26-cta:hover {
        scale: 1.02;
    }

    .nz-ph26-ghost:hover::before,
    .nz-ph26-cta:hover::before {
        width: 10px;
        height: 10px;
        opacity: 1;
        translate: -14px -50%;
    }

    .nz-ph26-ghost:hover span,
    .nz-ph26-cta:hover span {
        translate: -8px 0;
    }
}

/* --------------------------------------------------------- the hamburger */

.nz-ph26-burger,
.nz-ph26-close {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--nz-ph-chip);
    cursor: pointer;
}

/* 44px inside a 68px bar: 68 - 2x10 padding - 2x1 border leaves 46 */
.nz-ph26-burger {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.nz-ph26-burger span[aria-hidden] {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--nz-ph-bar);
    transition: translate .3s ease, rotate .3s ease, opacity .2s ease;
}

.nz-ph26-close {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

/* the two bars are centred on top of each other and then crossed — without
   the offsets they keep their static flex position and read as a slash */
.nz-ph26-close span[aria-hidden] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--nz-ph-bar);
    translate: -50% -50%;
}

/* counted from the end: the .nz-ph26-sr label is a <span> too, so
   :first-of-type would pick it and leave one bar lying flat */
.nz-ph26-close span[aria-hidden]:nth-last-child(2) {
    rotate: 45deg;
}

.nz-ph26-close span[aria-hidden]:last-child {
    rotate: -45deg;
}

.nz-ph26-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------ the drawer */

.nz-ph26-scrim {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background-color: rgba(7, 11, 16, .45);
    opacity: 0;
    transition: opacity .3s ease;
}

.nz-ph26-scrim.is-open {
    opacity: 1;
}

.nz-ph26-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--nz-ph-drawer-bg);
    border-radius: 24px 0 0 24px;
    translate: 100% 0;
    transition: translate .3s ease-in-out;
}

.nz-ph26-drawer.is-open {
    translate: 0 0;
}

.nz-ph26-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nz-ph26-drawer-body {
    margin-top: 24px;
}

/* the section label with a rule running out to the edge of the drawer */
.nz-ph26-drawer-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--nz-ph-ink);
}

.nz-ph26-drawer-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--nz-ph-stroke);
}

.nz-ph26-drawer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nz-ph26-drawer-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--nz-ph-ink-soft);
    text-decoration: none;
    transition: color .2s ease;
}

.nz-ph26-drawer-link:hover,
.nz-ph26-drawer-link:focus-visible,
.nz-ph26-drawer-link.is-here {
    color: var(--nz-ph-ink);
    text-decoration: none;
}

.nz-ph26-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.nz-ph26-drawer-actions .nz-ph26-ghost,
.nz-ph26-drawer-actions .nz-ph26-cta {
    width: 100%;
}

.nz-ph26-drawer-actions .nz-ph26-ghost {
    border-color: var(--nz-ph-stroke);
    color: var(--nz-ph-ink);
}

/* the page cannot scroll behind an open drawer */
body.nz-ph26-locked {
    overflow: hidden !important;
}

/* --------------------------------------------- the page starts below it */

/* Only the pages that carry this header — the class is set by the layout for
   every public page, and the header is its sibling.

   !important is load-bearing, not habit: app.all.css carries
   `@media (max-width: 500px) { .page-container { margin-top: 10px !important } }`
   for the authenticated app, where the mobile bar is in flow. The capsule is
   fixed at every width, so without this the page would start 10px down and
   the logo would sit on top of the content. */
.nz-ph26~div .public-page-container {
    margin-top: calc(var(--nz-ph-top) + var(--nz-ph-h) + var(--nz-ph-gap)) !important;
}

/* ------------------------------------------------------------------- RTL */

[dir="rtl"] .nz-ph26-drawer {
    right: auto;
    left: 0;
    border-radius: 0 24px 24px 0;
    translate: -100% 0;
}

[dir="rtl"] .nz-ph26-drawer.is-open {
    translate: 0 0;
}

[dir="rtl"] .nz-ph26-ghost::before,
[dir="rtl"] .nz-ph26-cta::before {
    right: auto;
    left: 0;
    rotate: 180deg;
}

@media (hover: hover) {

    [dir="rtl"] .nz-ph26-ghost:hover::before,
    [dir="rtl"] .nz-ph26-cta:hover::before {
        translate: 14px -50%;
    }

    [dir="rtl"] .nz-ph26-ghost:hover span,
    [dir="rtl"] .nz-ph26-cta:hover span {
        translate: 8px 0;
    }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {

    .nz-ph26-nav,
    .nz-ph26-actions .nz-ph26-ghost {
        display: none;
    }

    .nz-ph26-burger {
        display: flex;
    }

    .nz-ph26-bar {
        justify-content: space-between;
    }

    .nz-ph26-drawer {
        max-width: 420px;
    }
}

@media (max-width: 575.98px) {
    .nz-ph26 {
        --nz-ph-top: 12px;
    }

    .nz-ph26-bar {
        width: calc(100% - 20px);
        padding: 8px;
        gap: 8px;
    }

    .nz-ph26-logo {
        max-height: 28px;
        max-width: 150px;
    }

    /* the CTA gives way to the hamburger on a narrow phone; it is the first
       row of the drawer anyway */
    .nz-ph26-actions .nz-ph26-cta {
        display: none;
    }

    /* 36px inside a 56px bar: 56 - 2x8 padding - 2x1 border leaves 38 */
    .nz-ph26-burger {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        gap: 5px;
    }

    .nz-ph26-burger span[aria-hidden] {
        width: 20px;
    }

    .nz-ph26-drawer {
        max-width: none;
        border-radius: 0;
    }
}

/* someone who asked for less motion gets the states, not the travel */
@media (prefers-reduced-motion: reduce) {

    .nz-ph26-bar,
    .nz-ph26-drawer,
    .nz-ph26-scrim,
    .nz-ph26-link,
    .nz-ph26-ghost,
    .nz-ph26-cta,
    .nz-ph26-ghost span,
    .nz-ph26-cta span,
    .nz-ph26-ghost::before,
    .nz-ph26-cta::before {
        transition-duration: .01ms !important;
    }

    .nz-ph26-ghost:hover,
    .nz-ph26-cta:hover {
        scale: 1;
    }
}