/* The BundleZoneGH lockup: the bag mark cropped out of the logo artwork, with
   the wordmark set as live text beside it.
 *
 * Shared by the landing page, the auth pages and the dashboard so the brand is
 * identical everywhere. Include this before any page stylesheet that needs it.
 *
 * The mark is cropped rather than shown whole because the full artwork is a
 * stacked lockup — mark above wordmark above tagline — which is illegible at
 * the sizes a header uses.
 *
 * Set --mark-size on the PARENT to scale a lockup. It is deliberately not
 * declared on .logo-crop: a property set on the element would override
 * whatever a parent asks for.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

.bz-lockup {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    flex-shrink: 0;
}

/* The four values are the mark's position and size inside the 1080x964 source.
   Everything else derives from them, so re-exporting the artwork means editing
   only these. Measured by eye — nudge --mark-x / --mark-y if it sits oddly. */
.bz-mark {
    --mark-x: 330;
    --mark-y: 40;
    --mark-w: 470;
    --mark-h: 530;

    display: block;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: var(--mark-size, 40px);
    height: calc(var(--mark-size, 40px) * var(--mark-h) / var(--mark-w));
}

.bz-mark img {
    position: absolute;
    width: calc(var(--mark-size, 40px) * 1080 / var(--mark-w));
    height: auto;
    max-width: none;
    left: calc(var(--mark-size, 40px) * var(--mark-x) / var(--mark-w) * -1);
    top: calc(var(--mark-size, 40px) * var(--mark-y) / var(--mark-w) * -1);
}

/* Mirrors the logo's own wordmark: lowercase, geometric, tight, brand blue,
   with "gh" a weight lighter. line-height:1 matters — an inherited line-height
   makes the text box taller than the letters, leaving them sitting low. */
.bz-wordmark {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--wordmark-size, 1.25rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    color: #1a3ec8;
    white-space: nowrap;
    transform: translateY(1px); /* optical: rounds read high against the mark */
}

.bz-wordmark em { font-style: normal; font-weight: 600; opacity: .82; }