/* Company lockup — shared by Fenix header, checkout, portals, admin, Studio, WhatsApp.
   Header-design CSS (serif-editorial) still wins on public pages; these are the defaults
   so toolbars that never load the full header still typeset the same recipe. */

.fenix-header__logo {
    display: inline-flex;
    align-items: var(--fenix-logo-align, center);
    gap: var(--fenix-logo-gap, 13px);
    text-decoration: none;
    color: var(--fenix-header-brand-text, var(--fenix-color-text, #2c3b45));
    min-width: 0;
}

.fenix-header__logo-img,
.fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 46px);
    width: var(--fenix-logo-mark-size, 46px);
    flex-shrink: 0;
    object-fit: contain;
}
/* A currentColor SVG mark tints from the anchor's colour; the mark-colour knob overrides it. */
.fenix-header__logo-svg { color: var(--fenix-logo-mark-color, inherit); }

.fenix-header__logo-artwork {
    display: block;
    height: 46px;
    width: auto;
    max-width: min(280px, 50vw);
    object-fit: contain;
}

/* Artwork mode may ship a second, icon-only file. The square one sizes like a composed mark so a
   toolbar row keeps the same height whichever mode the company uses. */
.fenix-header__logo-artwork--square {
    height: var(--fenix-logo-mark-size, 46px);
    width: var(--fenix-logo-mark-size, 46px);
    max-width: none;
    flex-shrink: 0;
}

/* The mobile companion. Hidden until the media query below swaps it in — the server emits both
   because only a media query can tell whether the ~3.75:1 lockup still fits. */
.fenix-header__logo-artwork--alt { display: none; }

.fenix-header__logo-block {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, var(--fenix-font-heading, inherit));
    font-size: var(--fenix-logo-l1-size, 1.125rem);
    font-weight: var(--fenix-logo-l1-weight, 700);
    letter-spacing: var(--fenix-logo-l1-tracking, -0.02em);
    color: var(--fenix-logo-l1-color, var(--fenix-header-brand-text, var(--fenix-color-text, #1e293b)));
    line-height: 1.1;
}

.fenix-header__logo-text em {
    font-style: italic;
    color: var(--fenix-header-menu-link-hover, var(--fenix-color-primary, #c9437f));
    font-weight: 400;
}

.fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, var(--fenix-font-body, inherit));
    font-size: var(--fenix-logo-l2-size, 0.6875rem);
    font-weight: var(--fenix-logo-l2-weight, 400);
    letter-spacing: var(--fenix-logo-l2-tracking, 0.04em);
    text-transform: var(--fenix-logo-l2-transform, none);
    color: var(--fenix-logo-l2-color, var(--fenix-header-brand-text, var(--fenix-color-text, #1e293b)));
    opacity: 0.7;
}
/* An explicit Line 2 colour is the whole colour — don't wash it out with the default opacity. */
.fenix-header__logo[style*="--fenix-logo-l2-color"] .fenix-header__logo-tagline { opacity: 1; }

.fenix-header__logo-since {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid var(--fenix-color-border, #c5c2b8);
    font-family: var(--fenix-font-body, inherit);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fenix-color-text-muted, #8b97a0);
    white-space: nowrap;
}

/* Compact — toolbars */
.fenix-header__logo--compact {
    gap: calc(var(--fenix-logo-gap, 13px) * var(--fenix-logo-scale));
}
.fenix-header__logo--compact .fenix-header__logo-img,
.fenix-header__logo--compact .fenix-header__logo-svg {
    height: calc(var(--fenix-logo-mark-size, 46px) * var(--fenix-logo-scale));
    width: calc(var(--fenix-logo-mark-size, 46px) * var(--fenix-logo-scale));
}
.fenix-header__logo--compact .fenix-header__logo-artwork {
    height: 36px;
    max-width: 200px;
}
.fenix-header__logo--compact .fenix-header__logo-artwork--square {
    height: calc(var(--fenix-logo-mark-size, 46px) * var(--fenix-logo-scale));
    width: calc(var(--fenix-logo-mark-size, 46px) * var(--fenix-logo-scale));
    max-width: none;
}
.fenix-header__logo--compact .fenix-header__logo-text {
    font-size: calc(var(--fenix-logo-l1-size, 1.4rem) * var(--fenix-logo-scale));
    letter-spacing: calc(var(--fenix-logo-l1-tracking, -0.02em) * var(--fenix-logo-scale));
}
.fenix-header__logo--compact .fenix-header__logo-tagline {
    font-size: calc(var(--fenix-logo-l2-size, 0.859rem) * var(--fenix-logo-scale));
    letter-spacing: calc(var(--fenix-logo-l2-tracking, 0.04em) * var(--fenix-logo-scale));
}
.fenix-header__logo--compact .fenix-header__logo-since {
    font-size: 0.5625rem;
    padding-left: 10px;
}

@media (max-width: 640px) {
    .fenix-header__logo--compact .fenix-header__logo-since {
        display: none;
    }
}

/* Dark chrome (admin sidebar / collapsed navy bars).

   !important, and not by preference. A header design's own colour rule —
   .fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-text — is (0,3,0)
   and outranks this selector's (0,2,0). Every design rule resolves the colour through
   var(--fenix-logo-l1-color, var(--fenix-header-brand-text, …)), and FenixBrandLockupContext scopes
   --fenix-header-brand-text to .fenix-header__logo as the BRAND's own ink. So on dark chrome the
   wordmark came out in Indigo's #1a2420 on charcoal: the token-shadowing trap, one level up from
   where it was first found.

   This is safe to force precisely because FenixBrandLockupStyle.ToCssVariables drops the three
   colour knobs when onDark — so the [data-logo-styled][style*="--fenix-logo-l1-color"] override
   layer, which is (0,5,0) AND !important, emits nothing here to fight with. The two changes only
   work as a pair: suppress the knobs, then let these literals through.

   Chasing this with specificity instead would mean re-stating the rule per header design, and the
   next design added would silently reintroduce the bug. */
.fenix-header__logo--on-dark {
    color: #f1efe9 !important;
}
.fenix-header__logo--on-dark .fenix-header__logo-text {
    color: #f1efe9 !important;
}
.fenix-header__logo--on-dark .fenix-header__logo-tagline {
    color: rgba(241, 239, 233, 0.78) !important;
    opacity: 1;
}
.fenix-header__logo--on-dark .fenix-header__logo-since {
    color: rgba(241, 239, 233, 0.62) !important;
    border-left-color: rgba(241, 239, 233, 0.28);
}
.fenix-header__logo--on-dark .fenix-header__logo-svg {
    color: #f1efe9 !important;
}

/* Same type as the Indigo public header, without needing the header wrapper. */
.fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-img,
.fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 46px);
    width: var(--fenix-logo-mark-size, 46px);
}
.fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-block {
    line-height: 1;
}
.fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, var(--fenix-font-heading, "Cormorant Garamond", serif));
    font-weight: var(--fenix-logo-l1-weight, 500);
    font-size: var(--fenix-logo-l1-size, 25px);
    letter-spacing: var(--fenix-logo-l1-tracking, .2px);
    color: var(--fenix-logo-l1-color, var(--fenix-header-brand-text, var(--fenix-color-text, #2c3b45)));
}
.fenix-header__logo[data-header-design="serif-editorial"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, var(--fenix-font-body, "Mulish", sans-serif));
    font-size: var(--fenix-logo-l2-size, 9.5px);
    font-weight: var(--fenix-logo-l2-weight, 700);
    letter-spacing: var(--fenix-logo-l2-tracking, 3.5px);
    color: var(--fenix-logo-l2-color, var(--fenix-color-primary, #4f6a7d));
    text-transform: var(--fenix-logo-l2-transform, uppercase);
    margin-top: 4px;
    opacity: 1;
}
.fenix-header__logo--compact[data-header-design="serif-editorial"] .fenix-header__logo-img,
.fenix-header__logo--compact[data-header-design="serif-editorial"] .fenix-header__logo-svg {
    height: 32px;
    width: 32px;
}
.fenix-header__logo--compact[data-header-design="serif-editorial"] .fenix-header__logo-text {
    font-size: calc(var(--fenix-logo-l1-size, 25px) * var(--fenix-logo-scale));
}
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-header__logo-block,
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-header__logo-since,
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-header__logo-text,
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-admin-portal-sep,
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-admin-portal-label {
    display: none;
}
body.sidebar-mini.sidebar-collapse .main-sidebar .fenix-header__logo {
    gap: 0;
    justify-content: center;
}

/* Collapsed rail: only the logo mark survives (the text, divider and label are display:none
   above), so the now-flex brand-link must centre it horizontally too — flex-start would park
   it against the left padding. */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link {
    justify-content: center;
}

/* Admin sidebar lockup: logo block + divider + "Admin", on ONE optical axis.
   The container is a plain <a class="brand-link">, so by default its three children are
   inline and align on the BASELINE. The logo is a two-line stack (name over tagline), so its
   baseline is the SECOND line — which dragged the divider and the label ~10px below the logo's
   optical centre. Flex + center aligns all three on their middles instead.
   Deliberately no height/min-height: the logo's l1-size is a per-company setting, so the bar
   must grow with it. (The 67px this box used to measure was not a designed height — it was
   descender slack from the very baseline alignment being fixed here.)
   Scoped to .main-sidebar so the hidden mobile .brand-link, which carries no "Admin" label
   and is driven by Bootstrap's d-block/d-md-none display utilities, is left alone. */
.main-sidebar .brand-link {
    display: flex;
    align-items: center;
}

.fenix-admin-portal-sep {
    color: rgba(241, 239, 233, 0.45);
    font-weight: 300;
    margin: 0 8px;
}
.fenix-admin-portal-label {
    color: #f1efe9;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.portal-nav .fenix-header__logo {
    flex-shrink: 1;
    min-width: 0;
}
.cm-cohead .fenix-header__logo {
    flex-shrink: 1;
    min-width: 0;
}


/* ── Mark position ──────────────────────────────────────────────────────────
   Set in Studio → Companies → Logo lockup. Default (mark beside the words)
   needs no attribute, so nothing here fires unless the knob was changed. */
.fenix-header__logo[data-logo-mark="above"] {
    flex-direction: column;
    align-items: var(--fenix-logo-align, center);
    gap: calc(var(--fenix-logo-gap, 13px) * 0.55);
    text-align: center;
}
.fenix-header__logo[data-logo-mark="above"] .fenix-header__logo-block { align-items: center; }
.fenix-header__logo[data-logo-mark="above"] .fenix-header__logo-since {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}
/* "hidden" never renders a mark server-side; this only guards a design that injects one in CSS. */
.fenix-header__logo[data-logo-mark="hidden"] .fenix-header__logo-img,
.fenix-header__logo[data-logo-mark="hidden"] .fenix-header__logo-svg { display: none; }


/* ── Explicit knobs outrank a profile's ExtraCss ───────────────────────────────
   A header profile can carry hand-written ExtraCss in the database, and the ported
   brands routinely pin the whole logo lockup there with !important — indigo-vplus
   sets font-family/size/weight/tracking/colour on both rows that way. Those rules
   are more specific than anything above, so a value typed in Studio would be set,
   emitted, inherited by the custom property, and then silently discarded.

   These rules exist only to win that fight. Each one is gated on the presence of its
   OWN custom property, because `var(--x)` with no fallback is invalid-at-computed-value
   rather than "fall through to the cascade" — a blanket rule would blank every knob
   the user did not set. [data-logo-styled] is repeated purely for specificity: it takes
   these to (0,4,0), one above the [data-profile] ExtraCss rules, so !important resolves
   our way. The attribute is only emitted when at least one knob is set, so an untouched
   company never reaches this block at all. */
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-gap"] {
    gap: var(--fenix-logo-gap) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-align"] {
    align-items: var(--fenix-logo-align) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-mark-size"] .fenix-header__logo-img,
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-mark-size"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size) !important;
    width: auto !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-mark-color"] .fenix-header__logo-svg {
    color: var(--fenix-logo-mark-color) !important;
}

.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-family"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-size"] .fenix-header__logo-text {
    font-size: var(--fenix-logo-l1-size) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-weight"] .fenix-header__logo-text {
    font-weight: var(--fenix-logo-l1-weight) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-tracking"] .fenix-header__logo-text {
    letter-spacing: var(--fenix-logo-l1-tracking) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-color"] .fenix-header__logo-text {
    color: var(--fenix-logo-l1-color) !important;
}

.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-family"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-size"] .fenix-header__logo-tagline {
    font-size: var(--fenix-logo-l2-size) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-weight"] .fenix-header__logo-tagline {
    font-weight: var(--fenix-logo-l2-weight) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-tracking"] .fenix-header__logo-tagline {
    letter-spacing: var(--fenix-logo-l2-tracking) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-color"] .fenix-header__logo-tagline {
    color: var(--fenix-logo-l2-color) !important;
    opacity: 1 !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-transform"] .fenix-header__logo-tagline {
    text-transform: var(--fenix-logo-l2-transform) !important;
}

/* ── ONE scale for the whole lockup ────────────────────────────────────────────
   Earlier this scaled each property with its own ratio (mark .7, line 1 .8,
   line 2 .82) and did not scale LETTER-SPACING at all. Tracking is an absolute
   px value, so leaving it fixed while the type shrank stretched the lower row:
   on the home header both rows measured 65.0px wide (ratio 1.000), but in the
   portal / Studio toolbar "Indigo" came out 52.0px against "Lifestyle" at
   56.5px — the lower row 8.7% too wide, which is exactly the "Indigo is
   shorter than Lifestyle" mismatch.

   Now every dimension multiplies by ONE factor, tracking included, so a
   toolbar lockup is the header lockup at a smaller size — same proportion. */
.fenix-header__logo { --fenix-logo-scale: 1; }
.fenix-header__logo--compact { --fenix-logo-scale: 0.8; }
@media (max-width: 768px) {
    .fenix-header__logo { --fenix-logo-scale: 0.84; }
    .fenix-header__logo--compact { --fenix-logo-scale: 0.72; }
}

.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-mark-size"] .fenix-header__logo-img,
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-mark-size"] .fenix-header__logo-svg {
    height: calc(var(--fenix-logo-mark-size) * var(--fenix-logo-scale)) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-gap"] {
    gap: calc(var(--fenix-logo-gap) * var(--fenix-logo-scale)) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-size"] .fenix-header__logo-text {
    font-size: calc(var(--fenix-logo-l1-size) * var(--fenix-logo-scale)) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l1-tracking"] .fenix-header__logo-text {
    letter-spacing: calc(var(--fenix-logo-l1-tracking) * var(--fenix-logo-scale)) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-size"] .fenix-header__logo-tagline {
    font-size: calc(var(--fenix-logo-l2-size) * var(--fenix-logo-scale)) !important;
}
.fenix-header__logo[data-logo-styled][data-logo-styled][style*="--fenix-logo-l2-tracking"] .fenix-header__logo-tagline {
    letter-spacing: calc(var(--fenix-logo-l2-tracking) * var(--fenix-logo-scale)) !important;
}

/* Mobile: a complete lockup shrinks to unreadable in a 390px header, so the square mark takes over.
   Scoped to --has-mark, which the renderer stamps only when it emitted both images. */
@media (max-width: 640px) {
    .fenix-header__logo--has-mark .fenix-header__logo-artwork { display: none; }
    .fenix-header__logo--has-mark .fenix-header__logo-artwork--alt { display: block; }
}