/* src/components/basic/XWUILogo/XWUILogo.css */
/**
 * XWUILogo Component Styles
 * Clean logo + optional title/subtitle.
 */

.xwui-logo {
    display: inline-flex;
    min-height: 0;
    margin: 0;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: visible;
}

.xwui-logo .xwui-logo-container {
    overflow: visible;
    --xwui-logo-bound-w: 160px;
    --xwui-logo-bound-h: 100px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.xwui-logo .xwui-logo-container.layout-v {
    flex-direction: column;
}

.xwui-logo .xwui-logo-container.layout-h {
    flex-direction: row;
    align-items: center;
    /* start, not left: on a right-to-left page the text sits beside the mark on
       the reading side instead of staying flush to the physical left edge. */
    text-align: start;
    gap: var(--xwui-logo-gap, 12px);
}

/* One box per preset, mirrored by LOGO_SIZE_BOUNDS in XWUILogo.scale.ts (a test
   compares the two). Each step is about 1.4x the one before it. */
.xwui-logo .xwui-logo-container:is(.size-3xs,.size-xxxs) { --xwui-logo-bound-w:  32px; --xwui-logo-bound-h:  22px; }
.xwui-logo .xwui-logo-container:is(.size-4xs,.size-xxxxs) { --xwui-logo-bound-w:  20px; --xwui-logo-bound-h:  14px; }
.xwui-logo .xwui-logo-container:is(.size-2xs,.size-xxs)  { --xwui-logo-bound-w:  50px; --xwui-logo-bound-h:  34px; }
.xwui-logo .xwui-logo-container.size-xs   { --xwui-logo-bound-w:  72px; --xwui-logo-bound-h:  48px; }
.xwui-logo .xwui-logo-container:is(.size-s,.size-sm)   { --xwui-logo-bound-w: 110px; --xwui-logo-bound-h:  72px; }
.xwui-logo .xwui-logo-container:is(.size-m,.size-md)   { --xwui-logo-bound-w: 160px; --xwui-logo-bound-h: 100px; }
.xwui-logo .xwui-logo-container:is(.size-l,.size-lg)   { --xwui-logo-bound-w: 220px; --xwui-logo-bound-h: 140px; }
.xwui-logo .xwui-logo-container.size-xl   { --xwui-logo-bound-w: 320px; --xwui-logo-bound-h: 200px; }
.xwui-logo .xwui-logo-container:is(.size-2xl,.size-xxl)  { --xwui-logo-bound-w: 440px; --xwui-logo-bound-h: 280px; }
.xwui-logo .xwui-logo-container:is(.size-3xl,.size-xxxl) { --xwui-logo-bound-w: 600px; --xwui-logo-bound-h: 380px; }
.xwui-logo .xwui-logo-container:is(.size-4xl,.size-xxxxl) { --xwui-logo-bound-w: 840px; --xwui-logo-bound-h: 520px; }

.xwui-logo .xwui-logo-visual-wrapper {
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: visible;
}

.xwui-logo .xwui-logo-svg-host {
    overflow: visible;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-logo-render-width, var(--xwui-logo-bound-w));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.xwui-logo .xwui-logo-svg-host svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    shape-rendering: geometricPrecision;
    filter: var(--drop-shadow-logo);
    overflow: visible;
}

/* ── Image logo (<img> from `src` config) ──────────────── */
.xwui-logo .xwui-logo-img {
    display: block;
    width: var(--xwui-logo-render-width, var(--xwui-logo-bound-w));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-xs, 4px);
}

/* ── Text/Icon mark (from `text` or `icon` config) ─────── */
.xwui-logo .xwui-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: var(--xwui-logo-bound-w);
    max-height: var(--xwui-logo-bound-h);
    background: var(--accent-primary, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--xwui-logo-render-height, var(--xwui-logo-bound-h)) * 0.5);
    flex-shrink: 0;
    -webkit-user-select: none;
            user-select: none;
    line-height: 1;
}

.xwui-logo .xwui-logo-mark-circle { border-radius: 50%; }
.xwui-logo .xwui-logo-mark-rounded { border-radius: var(--radius-md, 8px); }
.xwui-logo .xwui-logo-mark-square { border-radius: 0; }

/* Icon inside mark inherits color */
.xwui-logo .xwui-logo-mark .xwui-icon,
.xwui-logo .xwui-logo-mark .xwui-icon svg {
    color: inherit !important;
    stroke: currentColor;
    fill: none;
}

/* A theme sets --logo-title-* to give its wordmark its own type; without them
   the title keeps the preset's per-size values written by the component. */
.xwui-logo .xwui-logo-brand-title {
    font-size: var(--logo-title-font-size, var(--xwui-logo-title-font-size, 2rem));
    font-weight: var(--logo-title-font-weight, var(--xwui-logo-title-font-weight, 700));
    letter-spacing: var(--logo-title-letter-spacing, var(--xwui-logo-title-letter-spacing, -1px));
    line-height: var(--xwui-logo-title-line-height, 1);
    font-family: var(--logo-title-font-family, var(--xwui-logo-title-font-family, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif));
    color: var(--text-primary);
    /* Inline text flow, not a flex row. A flex row follows the page direction, so
       on an RTL page the runs of a Latin wordmark ("XW", "UI") were laid out right
       to left and read "UIXW". Inline text lets the bidi algorithm order each
       script on its own: Latin reads left to right, Arabic right to left. */
    display: block;
}

.xwui-logo .xwui-logo-brand-title .xwui-logo-title-part {
    display: inline;
    /* A run such as "Acme " keeps its trailing space instead of collapsing it. */
    white-space: pre-wrap;
}

/* Title tones (config.titleParts[].tone). Theme tokens, so a title in two tones
   follows light and dark. The colour-scheme rules below carry one more class, so
   an explicit colorScheme still decides. */
.xwui-logo .xwui-logo-brand-title .xwui-logo-title-part--primary { color: var(--text-primary); }
.xwui-logo .xwui-logo-brand-title .xwui-logo-title-part--secondary { color: var(--text-secondary); }
.xwui-logo .xwui-logo-brand-title .xwui-logo-title-part--accent { color: var(--accent-primary); }

.xwui-logo .xwui-logo-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.xwui-logo .xwui-logo-container.layout-h .xwui-logo-text-block {
    align-items: flex-start;
}

.xwui-logo .xwui-logo-brand-subtitle {
    font-size: var(--xwui-logo-subtitle-font-size, 0.75rem);
    font-weight: var(--xwui-logo-subtitle-font-weight, 500);
    letter-spacing: var(--xwui-logo-subtitle-letter-spacing, 0.08em);
    line-height: var(--xwui-logo-subtitle-line-height, 1.2);
    text-transform: var(--xwui-logo-subtitle-text-transform, uppercase);
    font-family: var(--xwui-logo-subtitle-font-family, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    color: var(--text-secondary);
    /* A site media query can drop the eyebrow on narrow screens. */
    display: var(--xwui-logo-subtitle-display, block);
}

/* Arabic joins its letters: a negative or positive letter-spacing pulls the joined
   forms apart, and uppercasing has no meaning. The latin-tuned tracking above is
   dropped wherever the logo sits under lang="ar". */
.xwui-logo:lang(ar) .xwui-logo-brand-title {
    letter-spacing: normal;
}

.xwui-logo:lang(ar) .xwui-logo-brand-subtitle {
    letter-spacing: normal;
    text-transform: none;
}

/* Dark/light color scheme: logo text and graphic black or white */
.xwui-logo.xwui-logo-scheme-light {
    color: #111111;
}

.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-title,
.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-title .xwui-logo-title-part {
    color: #111111;
}

.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-subtitle {
    color: #333333;
}

.xwui-logo.xwui-logo-scheme-dark {
    color: #ffffff;
}

.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-title,
.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-title .xwui-logo-title-part {
    color: #ffffff;
}

.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Dark scheme: only title/subtitle text is white; logo graphic keeps original colors */


/* Logo-only mode with shape-only brand: hide wordmark so only the icon shows (from brand logo.json) */
.xwui-logo-svg-host.xwui-logo-shape-only .exonware-logo-text {
    display: none;
}

/* ── Item mode (logoConfig: 'item') ───────────────────────────────────────
   Render the logo as a clickable list/menu item row - a brand mark followed
   by its title, with hover + active affordances. Lets a logo act as an
   XWUIItem-style entry (e.g. a system launcher in an app shell). */
.xwui-logo-container.xwui-logo-item {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.xwui-logo-container.xwui-logo-item:hover {
    background-color: var(--bg-hover, color-mix(in srgb, currentColor 8%, transparent));
}
.xwui-logo-container.xwui-logo-item:focus-visible {
    outline: 2px solid var(--accent-color, #2962ff);
    outline-offset: 1px;
}
.xwui-logo-container.xwui-logo-item.is-active,
.xwui-logo-container.xwui-logo-item[aria-current='true'] {
    background-color: color-mix(in srgb, var(--accent-color, #2962ff) 14%, transparent);
}
/* Keep the title compact + truncating in the item row. */
.xwui-logo-container.xwui-logo-item .xwui-logo-text-block {
    min-inline-size: 0;
    flex: 1 1 auto;
}
.xwui-logo-container.xwui-logo-item .xwui-logo-brand-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* pre, not pre-wrap: a run must not break across lines inside the one-line row. */
.xwui-logo-container.xwui-logo-item .xwui-logo-brand-title .xwui-logo-title-part {
    white-space: pre;
}

/* ── Hover animations (conf_comp.hoverAnimation) ───────────────────────────
   Cue that a brand logo is interactive (typically wrapped in a home link).
   Trigger on the logo itself OR when an ancestor link/button is hovered. */

.xwui-logo[data-hover-animation]:not([data-hover-animation="none"]) {
    cursor: pointer;
}

.xwui-logo[data-hover-animation]:not([data-hover-animation="none"]) .xwui-logo-visual-wrapper {
    position: relative;
    isolation: isolate;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.xwui-logo[data-hover-animation="reflection"] .xwui-logo-visual-wrapper {
    overflow: hidden;
}

.xwui-logo[data-hover-animation="reflection"] .xwui-logo-visual-wrapper::after {
    content: "";
    position: absolute;
    inset: -10% -40%;
    background: linear-gradient(
        105deg,
        transparent 42%,
        color-mix(in srgb, #fff 55%, transparent) 50%,
        transparent 58%
    );
    transform: translateX(-130%) skewX(-12deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.xwui-logo[data-hover-animation="reflection"]:is(:hover, :focus-within) .xwui-logo-visual-wrapper::after,
:is(a, button, [role="link"]):is(:hover, :focus-visible) .xwui-logo[data-hover-animation="reflection"] .xwui-logo-visual-wrapper::after {
    animation: xwui-logo-reflection-sweep 0.75s ease;
}

@keyframes xwui-logo-reflection-sweep {
    0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-12deg);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(130%) skewX(-12deg);
    }
}

.xwui-logo[data-hover-animation="glow"]:is(:hover, :focus-within) .xwui-logo-visual-wrapper,
:is(a, button, [role="link"]):is(:hover, :focus-visible) .xwui-logo[data-hover-animation="glow"] .xwui-logo-visual-wrapper {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-primary, #22c55e) 55%, transparent));
}

.xwui-logo[data-hover-animation="lift"]:is(:hover, :focus-within) .xwui-logo-visual-wrapper,
:is(a, button, [role="link"]):is(:hover, :focus-visible) .xwui-logo[data-hover-animation="lift"] .xwui-logo-visual-wrapper {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .xwui-logo[data-hover-animation="reflection"] .xwui-logo-visual-wrapper::after {
        display: none;
    }
    .xwui-logo[data-hover-animation]:not([data-hover-animation="none"]) .xwui-logo-visual-wrapper {
        transition: none;
    }
    .xwui-logo[data-hover-animation="lift"]:is(:hover, :focus-within) .xwui-logo-visual-wrapper,
    :is(a, button, [role="link"]):is(:hover, :focus-visible) .xwui-logo[data-hover-animation="lift"] .xwui-logo-visual-wrapper {
        transform: none;
    }
}

/*
 * Logo 3D marks: layout box stays at --xwui-logo-bound-h, but the WebGL stage
 * paints optically larger and overflows. Keeps title/nav spacing stable while
 * the cross reads bigger from every edge.
 */
.xwui-logo {
    --xwui-logo-3d-optical-scale: 1.2;
}
.xwui-logo .xwui-logo-svg-host-3d {
    width: var(--xwui-logo-bound-h);
    height: var(--xwui-logo-bound-h);
    max-width: 100%;
    background: transparent !important;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.xwui-logo .xwui-logo-mark-3d {
    background: transparent !important;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1;
}
.xwui-logo .xwui-logo-svg-host-3d .xwui-3d-object,
.xwui-logo .xwui-logo-svg-host-3d .xwui-3d-scene,
.xwui-logo .xwui-logo-svg-host-3d .xwui-logo-3d-fill,
.xwui-logo .xwui-logo-mark-3d .xwui-3d-object,
.xwui-logo .xwui-logo-mark-3d .xwui-3d-scene {
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
    transform: scale(var(--xwui-logo-3d-optical-scale));
    transform-origin: center center;
}
/* Page-owned mark (data.markSlot): the box comes from the preset or from
   markWidth / markHeight; the artwork inside keeps its own lifecycle. */
.xwui-logo .xwui-logo-mark-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--xwui-logo-render-width, var(--xwui-logo-bound-w));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    padding: var(--xwui-logo-pad, 0);
    box-sizing: content-box;
}
.xwui-logo .xwui-logo-mark-slot.xwui-logo-mark-surface-tile {
    width: var(--xwui-logo-tile-size, 48px);
    height: var(--xwui-logo-tile-size, 48px);
    border-radius: var(--xwui-logo-tile-radius, 17px);
    background: var(--xwui-logo-tile-bg, var(--bg-secondary, rgba(255, 255, 255, 0.78)));
    border: var(--xwui-logo-tile-border, 1px solid var(--border-color, rgba(255, 255, 255, 0.9)));
    box-shadow: var(--xwui-logo-tile-shadow, none);
    box-sizing: border-box;
}