@layer components {
    .logo--fluid {
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: hidden;
    }

    /* Overrides the inline --logo-part-size set per part (see logo-generator.php)
       — needs !important since that's an inline style attribute, same specificity
       tier as this custom property would otherwise lose to. */
    .logo--fluid .logo-generated,
    .logo--fluid .logo-generated__part {
        font-size: var(--logo-fluid-size, 18cqi) !important;
    }

    /* letter-spacing is em-relative, so a value tuned for the tiny header
       logo (e.g. -0.3em) keeps the exact same overlap ratio blown up to
       fluid size — letters end up stacked on each other. Reset tracking
       in fluid contexts; !important needed, both are set inline. */
    .logo--fluid .logo-generated {
        --logo-gen-letter-spacing: var(--letter-spacing-body, normal) !important;
        --logo-gen-padding-right: 0px !important;
    }

    .logo--fluid .logo-generated__part {
        margin-bottom: var(--logo-fluid-baseline-offset, var(--logo-baseline-offset, 0));
    }

    .logo-generated {
        display: inline-flex;
        align-items: baseline;
        user-select: none;
        gap: var(--logo-gen-gap, 0);
        font-family: var(--logo-gen-font, var(--font-heading));
        font-weight: var(--logo-gen-weight, var(--font-weight-heading));
        color: var(--logo-gen-color, inherit);
        letter-spacing: var(--logo-gen-letter-spacing, var(--logo-letter-spacing, normal));
        line-height: 1;
        white-space: nowrap;
        aspect-ratio: var(--logo-gen-aspect-ratio, auto);
        border: var(--logo-gen-border, none);
        background: var(--logo-gen-bg, none);
        box-sizing: border-box;
    }

    .logo-generated--column {
        flex-direction: column;
        align-items: var(--logo-gen-align, center);
    }

    .logo-generated--uppercase {
        text-transform: uppercase;
    }

    .logo-generated--italic {
        font-style: italic;
    }

    /* ── Part ── */
    .logo-generated__part {
        font-family: var(--logo-part-font, inherit);
        font-weight: var(--logo-part-weight, inherit);
        color: var(--logo-part-color, inherit);
        font-size: var(--logo-part-size, inherit);
        letter-spacing: var(--logo-part-letter-spacing, inherit);
        margin-inline-start: var(--logo-part-dx, 0px);
        /* Browsers add letter-spacing after the last character too — cancel
           it so it doesn't read as trailing padding. */
        margin-inline-end: calc(var(--logo-part-letter-spacing, var(--logo-gen-letter-spacing, var(--logo-letter-spacing, 0px))) * -1);
        transform-origin: center;
        transform: translateY(var(--logo-part-dy, 0)) rotate(var(--logo-part-rotate, 0deg)) scaleX(var(--logo-part-scale-x, 1));
        margin-bottom: var(--logo-baseline-offset, 0);
    }

    /* Inset from the container's own left edge (e.g. the aspect-ratio/
       border box) — margin, not padding, so negative values are allowed.
       In direction:row only the first part needs it (parts sit inline, one
       inset is enough). In direction:column each line is its own flex item
       starting at the container's left edge independently, so every line
       needs its own inset or the rest would misalign. */
    .logo-generated__part:first-child {
        margin-inline-start: calc(var(--logo-part-dx, 0px) + var(--logo-gen-padding-left, 0px));
    }

    .logo-generated--column > .logo-generated__part {
        margin-inline-start: calc(var(--logo-part-dx, 0px) + var(--logo-gen-padding-left, 0px));
    }

    .logo-generated__part:last-child {
        margin-inline-end: calc(var(--logo-part-letter-spacing, var(--logo-gen-letter-spacing, var(--logo-letter-spacing, 0px))) * -1 + var(--logo-gen-padding-right, 0px));
    }

    .logo-generated--column > .logo-generated__part[style*="--logo-part-letter-spacing"] {
        text-indent: var(--logo-part-letter-spacing);
    }

    .logo-generated__part--bg {
        background: var(--logo-part-bg);
        padding: var(--logo-part-bg-padding, 0.1em 0.3em);
        border-radius: var(--logo-part-bg-radius, 0);
    }

    .logo-generated__part--stroke {
        position: relative;
        -webkit-text-stroke: calc(var(--logo-part-stroke-width, 1px) * 2) var(--logo-part-stroke-color, currentColor);
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--stroke::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        -webkit-text-stroke: 0;
        -webkit-text-fill-color: var(--logo-part-color, var(--logo-gen-color, inherit));
    }

    .logo-generated__part--stroke.logo-generated__part--gradient::after {
        background: var(--logo-part-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--bordered {
        border: var(--logo-part-border);
        padding: var(--logo-part-border-padding, 0.1em 0.3em);
        border-radius: var(--logo-part-border-radius, 0);
    }

    .logo-generated__part--gradient {
        background: var(--logo-part-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--uppercase {
        text-transform: uppercase;
    }

    .logo-generated__part--italic {
        font-style: italic;
    }

    .logo-generated__part--no-uppercase {
        text-transform: none;
    }

    .logo-generated__part--no-italic {
        font-style: normal;
    }

    /* ── Separator ── */
    .logo-generated__separator {
        opacity: 0.3;
        margin-inline: var(--logo-gen-gap, 0.2em);
        font-weight: 300;
    }

    /* ── Icon ── */
    .logo-generated__icon {
        display: inline-flex;
        align-items: center;
        color: var(--logo-icon-color, currentColor);
        opacity: var(--logo-icon-opacity, 1);
        margin-inline-end: var(--logo-icon-gap, 0.3em);
    }

    .logo-generated__icon:last-child {
        margin-inline-end: 0;
        margin-inline-start: var(--logo-icon-gap, 0.3em);
    }

    .logo-generated__icon-svg {
        width: var(--logo-icon-size, 1em);
        height: var(--logo-icon-size, 1em);
    }
}