/* The site header, in plain CSS.
 *
 * It used to be Tailwind utilities, which meant it only worked on pages that
 * load site.css. The create flow loads gift-flow.css and nothing else, so
 * sharing the header there would have meant pulling in a Tailwind preflight
 * (`*,:after,:before { margin:0; padding:0; border:0 }`) across seventeen
 * hand-built pages on the money path. Porting the header down to plain CSS is
 * the other way round, and the safe one.
 *
 * Colours resolve through whichever token set the page has: site.css uses
 * --plum / --cream / --orange, gift-flow.css uses --gp-purple / --gp-cream /
 * --gp-orange. Declared once here with literal fallbacks so the sheet is
 * self-sufficient if it is ever loaded on its own.
 */
.gp-sitehdr {
    --hdr-plum:        var(--plum,        var(--gp-purple, #3D1E4A));
    --hdr-plum-deep:   var(--plum-deep,   #2A1434);
    --hdr-cream:       var(--cream,       var(--gp-cream, #FBF4E4));
    --hdr-orange:      var(--orange,      var(--gp-orange, #E85D3A));
    --hdr-orange-deep: var(--orange-deep, #A8351A);
    --hdr-lip:         #16081C;
}

/* The bar. max-width matches Tailwind's max-w-7xl (80rem) and the padding its
   py-3 / px-5 / sm:px-8, because the marketing header shipped on those and the
   port has to be invisible. */
.gp-sitehdr__inner {
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 80rem;
    padding: 12px 20px;
    box-sizing: border-box;
}
/* The bar should agree with the column under it, or the wordmark floats out
   past the content and the account pill hangs off the other side. Marketing
   and static pages run to 80rem; the profile column is 56rem; the create flow
   is a fixed 720px. */
.gp-sitehdr__inner--content { max-width: 56rem; }
/* Aligned to the PANEL's edges, not to the text inside it.

   Aligning to the heading was tried first and measured perfectly symmetric
   (header content 40px inside the panel on both sides, matching the heading to
   the pixel). It still read as wrong, because the panel is a visible white
   card: the eye takes its edge as the container, so controls stopping 40px
   short of it look short, however neatly they line up with the prose.

   On a phone the panel goes transparent and full-bleed with a 16px inset, so
   there is no card edge to align to and the content inset is the right
   reference. */
/* Doubled class so these beat the generic .gp-sitehdr__inner padding, which
   is declared later in the file and would otherwise win on source order. */
/* The gutters step with .gp-main's in gift-flow.css (20px to 640, 32px to
   760, 0 above), so the bar's contents sit on the column's edges at every
   width rather than only on a wide screen. */
.gp-sitehdr__inner.gp-sitehdr__inner--flow { max-width: 720px; padding-inline: 32px; }
@media (max-width: 640px) {
    .gp-sitehdr__inner.gp-sitehdr__inner--flow { padding-inline: 20px; }
}
@media (min-width: 760px) {
    .gp-sitehdr__inner.gp-sitehdr__inner--flow { padding-inline: 0; }
}

@media (min-width: 640px) {
    .gp-sitehdr__inner { padding-inline: 32px; }
}

/* Band mode paints the bar and sticks it. Static pages only: the auth and
   error pages draw this header transparently over their own plum <main>, and
   the create flow is deliberately not sticky so a long form never fights a
   pinned bar for vertical space on a phone. */
.gp-sitehdr--band {
    background: var(--hdr-plum);
    color: var(--hdr-cream);
}
.gp-sitehdr--sticky {
    position: sticky;
    top: 0;
    z-index: 40;
}

.gp-sitehdr__logo {
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--hdr-cream);
    text-decoration: none;
}
@media (min-width: 640px) {
    .gp-sitehdr__logo { font-size: 1.875rem; }
}

.gp-sitehdr__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (min-width: 640px) {
    .gp-sitehdr__actions { gap: 16px; }
}

/* Text link, hidden on the narrowest screens where the buttons need the room. */
.gp-sitehdr__signin {
    display: none;
    font-size: 14px;
    font-weight: 500;
    color: color-mix(in oklab, var(--hdr-cream) 85%, transparent);
    text-decoration: none;
}
.gp-sitehdr__signin:hover { color: var(--hdr-cream); }
@media (min-width: 640px) {
    .gp-sitehdr__signin { display: inline; }
}

/* Shared button shape. 44px tall on mobile, 52px from sm up, matching the
   account pill at both. The lip paints below the box, so the painted heights
   are 50 and 58; changing the padding here without changing the pill breaks
   the pairing. */
.gp-sitehdr__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 16px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s, background .18s, box-shadow .18s;
}
@media (min-width: 640px) {
    .gp-sitehdr__btn { padding: 16px 20px; }
}

.gp-sitehdr__btn--primary {
    color: #fff;
    background: var(--hdr-orange);
    box-shadow: 0 6px 0 var(--hdr-orange-deep),
                0 18px 40px -12px color-mix(in oklab, var(--hdr-orange-deep) 45%, transparent);
}
.gp-sitehdr__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--hdr-orange-deep),
                0 22px 42px -12px color-mix(in oklab, var(--hdr-orange-deep) 55%, transparent);
}
.gp-sitehdr__btn--primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--hdr-orange-deep);
}

/* Sits on the text baseline the way the old character did, so swapping the
   glyph for a path did not move the label. */
.gp-sitehdr__btn-arrow {
    flex: none;
    margin-left: 0.15em;
}

/* The way out of the create flow. Same shape as the primary so the header
   reads as one set of controls, in the secondary treatment the account pill
   already uses: translucent face, plum rim, darker lip. It must never
   out-shout the thing it sits next to. */
.gp-sitehdr__btn--escape {
    color: var(--hdr-cream);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 0 var(--hdr-lip),
                inset 0 0 0 1.5px var(--hdr-plum-deep),
                0 14px 30px -12px rgba(25, 11, 32, 0.5);
}
.gp-sitehdr__btn--escape:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--hdr-lip),
                inset 0 0 0 1.5px var(--hdr-plum-deep),
                0 18px 34px -12px rgba(25, 11, 32, 0.6);
}
.gp-sitehdr__btn--escape:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--hdr-lip),
                inset 0 0 0 1.5px var(--hdr-plum-deep);
}

/* The half of the CTA label that only appears once there is room: "Create" on
   a phone, "Create a GiftPraise" from sm up. Inline inside a single flex item,
   so the 0.5rem gap separates label from arrow and NOT the two halves of the
   label, which is what turned it into "Create  a GiftPraise". */
.gp-sitehdr__btn-more { display: none; }
@media (min-width: 640px) {
    .gp-sitehdr__btn-more { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-sitehdr__btn { transition: none; }
    .gp-sitehdr__btn:hover,
    .gp-sitehdr__btn:active { transform: none; }
}

/* Centre navigation. Only the marketing home page passes any; hidden below md
   exactly as it was, because four links plus two buttons do not fit a tablet.

   Note it is not truly centred, and was not before: the bar is
   space-between with three children, so the nav sits half the difference
   between the logo and the actions off centre, about 49px left at every
   width. Reproduced rather than fixed, so this port changes nothing visible.
   Giving the logo and actions `flex: 1` would centre it properly. */
.gp-sitehdr__nav {
    display: none;
    align-items: center;
    gap: 32px;
    font-size: 14px;
    font-weight: 500;
}
.gp-sitehdr__nav a {
    color: color-mix(in oklab, var(--hdr-cream) 85%, transparent);
    text-decoration: none;
}
.gp-sitehdr__nav a:hover { color: var(--hdr-cream); }
@media (min-width: 768px) {
    .gp-sitehdr__nav { display: flex; }
}

/* ===================== Mobile tightening =====================
   The three elements are each individually reasonable and collectively too
   heavy: at 320px the wordmark was touching the Create button with zero gap.
   The wordmark keeps its size; everything around it gives ground.

   The Create button here is a navigation action, not the primary CTA. That
   job belongs to the big "Create a GiftPraise" in the hero, which is
   untouched. So this one keeps the orange, the pill and the depth, but takes
   a shallower lip and less padding so it stops competing. */
@media (max-width: 639px) {
    .gp-sitehdr__inner { padding-block: 10px; }
    .gp-sitehdr__actions { gap: 8px; }

    .gp-sitehdr__btn { padding: 12px 13px; }

    /* 4px rather than 6px. The lip is what makes it read as a primary
       control; halving it keeps the depth cue and drops the shout. */
    .gp-sitehdr__btn--primary {
        box-shadow: 0 4px 0 var(--hdr-orange-deep),
                    0 10px 24px -14px color-mix(in oklab, var(--hdr-orange-deep) 40%, transparent);
    }
    .gp-sitehdr__btn--primary:hover {
        box-shadow: 0 5px 0 var(--hdr-orange-deep),
                    0 12px 26px -14px color-mix(in oklab, var(--hdr-orange-deep) 50%, transparent);
    }
    .gp-sitehdr__btn--primary:active { box-shadow: 0 2px 0 var(--hdr-orange-deep); }

    .gp-sitehdr__btn--escape {
        box-shadow: 0 4px 0 var(--hdr-lip),
                    inset 0 0 0 1.5px var(--hdr-plum-deep),
                    0 10px 24px -14px rgba(25, 11, 32, 0.45);
    }
    .gp-sitehdr__btn--escape:hover {
        box-shadow: 0 5px 0 var(--hdr-lip),
                    inset 0 0 0 1.5px var(--hdr-plum-deep),
                    0 12px 26px -14px rgba(25, 11, 32, 0.55);
    }
    .gp-sitehdr__btn--escape:active {
        box-shadow: 0 2px 0 var(--hdr-lip), inset 0 0 0 1.5px var(--hdr-plum-deep);
    }
}