/* FaseQ — Concept A: puur woordmerk (typografie als logo) */

.fq-wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

a.fq-wordmark:hover {
    opacity: 0.88;
    text-decoration: none;
}

.fq-wordmark__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.fq-wordmark--xs .fq-wordmark__img { width: 88px; height: auto; }
.fq-wordmark--sm .fq-wordmark__img { width: 108px; height: auto; }
.fq-wordmark--md .fq-wordmark__img { width: 128px; height: auto; }
.fq-wordmark--lg .fq-wordmark__img { width: 156px; height: auto; }
.fq-wordmark--xl .fq-wordmark__img { width: 196px; height: auto; }
.fq-wordmark--hero .fq-wordmark__img { width: 240px; height: auto; }

/* CSS-woordmerk (fallback / submap-paden) */
.fq-wordmark--text {
    font-family: var(--fq-font, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-weight: 700;
    letter-spacing: -0.03em;
    align-items: baseline;
    gap: 0;
}

.fq-wordmark--text.fq-wordmark--xs { font-size: 1rem; }
.fq-wordmark--text.fq-wordmark--sm { font-size: 1.125rem; }
.fq-wordmark--text.fq-wordmark--md { font-size: 1.25rem; }
.fq-wordmark--text.fq-wordmark--lg { font-size: 1.625rem; }
.fq-wordmark--text.fq-wordmark--xl { font-size: 2rem; }
.fq-wordmark--text.fq-wordmark--hero { font-size: 2.75rem; }

.fq-wordmark__fase {
    color: var(--fq-navy-dark, #0a1f38);
}

/* Visuele Q — groene bowl, drie faselijnen, schuine staart */
.fq-wordmark__q {
    display: inline-flex;
    align-items: flex-end;
    margin-left: 0.04em;
    vertical-align: baseline;
    line-height: 1;
}

.fq-wordmark__q-bowl {
    position: relative;
    width: 1.08em;
    height: 1.08em;
    border-radius: 0.24em;
    background: var(--fq-accent, #059669);
    flex-shrink: 0;
}

.fq-wordmark__q-bowl::before {
    content: "";
    position: absolute;
    inset: 0.17em;
    border-radius: 0.14em;
    background: #ffffff;
}

.fq-wordmark__q-lines {
    position: absolute;
    inset: 0.28em 0.24em 0.28em 0.24em;
    z-index: 1;
    background:
        linear-gradient(var(--fq-accent, #059669), var(--fq-accent, #059669)) 0 0 / 100% 16% no-repeat,
        linear-gradient(var(--fq-accent, #059669), var(--fq-accent, #059669)) 0 50% / 100% 16% no-repeat,
        linear-gradient(var(--fq-accent, #059669), var(--fq-accent, #059669)) 0 100% / 100% 16% no-repeat;
}

.fq-wordmark__q-tail {
    width: 0.26em;
    height: 0.52em;
    margin-left: -0.1em;
    margin-bottom: -0.04em;
    border-radius: 0.08em;
    background: var(--fq-accent, #059669);
    transform: rotate(-40deg);
    flex-shrink: 0;
}

.fq-wordmark--light .fq-wordmark__q-bowl {
    background: var(--fq-accent-light, #10b981);
}

.fq-wordmark--light .fq-wordmark__q-bowl::before {
    background: var(--fq-navy-dark, #0a1f38);
}

.fq-wordmark--light .fq-wordmark__q-lines {
    background:
        linear-gradient(var(--fq-accent-light, #10b981), var(--fq-accent-light, #10b981)) 0 0 / 100% 16% no-repeat,
        linear-gradient(var(--fq-accent-light, #10b981), var(--fq-accent-light, #10b981)) 0 50% / 100% 16% no-repeat,
        linear-gradient(var(--fq-accent-light, #10b981), var(--fq-accent-light, #10b981)) 0 100% / 100% 16% no-repeat;
}

.fq-wordmark--light .fq-wordmark__q-tail {
    background: var(--fq-accent-light, #10b981);
}

/* Legacy fq-logo */
.fq-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.fq-logo:hover {
    opacity: 0.88;
}

.fq-header-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .fq-header-logo {
        height: 28px;
        max-width: 150px;
    }
}

/* App-shell sidebar */
.eq-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.25rem;
}

.eq-sidebar-brand .fq-wordmark {
    margin-bottom: 0;
}

.eq-sidebar-brand .fq-wordmark--text.fq-wordmark--sm {
    font-size: 1.0625rem;
}

.eq-sidebar-brand-sub {
    display: block;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--eq-muted, #64748b);
    font-weight: 500;
    max-width: 100%;
}

/* Login */
.login-wordmark {
    margin: 0 auto 1.25rem;
}

.login-wordmark .fq-wordmark__img {
    width: 140px;
}

.login-kaart .login-wordmark + .login-intro {
    margin-top: 0;
}

/* Module-topbars */
.fq-module-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fq-gray-500, #64748b);
    white-space: nowrap;
}

.fq-module-back:hover {
    color: var(--fq-navy, #0f2d52);
}

.fq-module-back .fq-wordmark__img {
    width: 80px;
}

.fq-wordmark--print {
    display: inline-flex;
    vertical-align: middle;
}

.blad-logo.fq-wordmark--text,
.project-logo.fq-wordmark--text,
.calc-logo.fq-wordmark--text,
.lb-logo.fq-wordmark--text,
.br-kop-logo.fq-wordmark--text {
    height: auto;
    max-height: 44px;
}

.fq-header-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.home-logo-link .fq-header-logo {
    height: 34px;
    width: auto;
    max-width: 190px;
}

.home-held-wordmark .fq-wordmark__img {
    width: 240px;
    max-width: 100%;
    height: auto;
}

.blad-logo.fq-wordmark__img,
.project-logo.fq-wordmark__img,
.calc-logo.fq-wordmark__img,
.lb-logo.fq-wordmark__img,
.br-kop-logo.fq-wordmark__img {
    width: 108px;
    height: auto;
    max-height: 44px;
}