/*
 * Imagictalk wordmark — handoff Logo System (frame 80:4959).
 *
 * Responsive scale (handoff):
 *   .logo-xl  240×60   ≥1920   Hero / Landings
 *   .logo-lg  180×45   1280-1919  Navbar desktop
 *   .logo-md  140×35   768-1279   Tablet · Footer
 *   .logo-sm  100×25   375-767    Mobile header
 *   .logo-xs  48×48              Favicon · PWA · Touch icon
 *
 * Variants: .it-logo--primary | .it-logo--inverse | .it-logo--mono-dark | .it-logo--mono-light
 *
 * Markup is generated by templates/components/_logo.html.
 */

.it-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
}

.it-logo__word { color: inherit; }

.it-logo__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-400);
    color: var(--brand-800);
    border-radius: var(--radius-full);
    margin-left: 0.18em;
    padding: 0.18em 0.55em 0.22em;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px rgba(0,229,160,0.35);
}

/* ===== Sizes (handoff width × height — font-size derived to hit the height target) ===== */
.it-logo--xl { font-size: 36px; height: 60px; min-width: 240px; }    /* Hero / Landings */
.it-logo--lg { font-size: 28px; height: 45px; min-width: 180px; }    /* Navbar desktop */
.it-logo--md { font-size: 22px; height: 35px; min-width: 140px; }    /* Tablet · Footer */
.it-logo--sm { font-size: 16px; height: 25px; min-width: 100px; }    /* Mobile header */
.it-logo--xs { font-size: 14px; height: 48px; min-width: 48px; }     /* Favicon · isotype */

/* Backward-compat: align inline sizes to the old API */
.it-logo--xl, .it-logo--lg, .it-logo--md, .it-logo--sm, .it-logo--xs, .it-logo--responsive { line-height: 1; }

/* ===== Responsive variant — picks the correct tier for the viewport ===== */
.it-logo--responsive { font-size: 16px; height: 25px; min-width: 100px; }   /* SM mobile */
@media (min-width: 768px) {
    .it-logo--responsive { font-size: 22px; height: 35px; min-width: 140px; }  /* MD tablet */
}
@media (min-width: 1280px) {
    .it-logo--responsive { font-size: 28px; height: 45px; min-width: 180px; }  /* LG desktop */
}
@media (min-width: 1920px) {
    .it-logo--responsive { font-size: 36px; height: 60px; min-width: 240px; }  /* XL hero */
}

/* ===== Variants ===== */
.it-logo--primary { color: var(--neutral-700); }
.it-logo--primary .it-logo__chip { background-color: var(--brand-400); color: var(--brand-800); }

.it-logo--inverse { color: var(--neutral-0); }
.it-logo--inverse .it-logo__chip { background-color: var(--brand-400); color: var(--brand-800); }

.it-logo--mono-dark { color: var(--neutral-700); }
.it-logo--mono-dark .it-logo__chip {
    background-color: var(--neutral-700);
    color: var(--neutral-0);
    box-shadow: none;
}

.it-logo--mono-light { color: var(--neutral-0); }
.it-logo--mono-light .it-logo__chip {
    background-color: var(--neutral-0);
    color: var(--neutral-700);
    box-shadow: none;
}

/* ===== Favicon-ready isotype (just the chip) ===== */
.it-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background-color: var(--brand-400);
    color: var(--brand-800);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75em;
    letter-spacing: -0.04em;
}