/* Additional styles for prose, scrolled header states, reveals */

/* Header scrolled state */
.tb-header.is-scrolled {
    box-shadow: var(--tb-shadow);
    background: rgba(255, 255, 255, 0.95);
}

/* Mobile menu open */
.tb-nav.is-open,
.tb-header-ctas.is-open {
    display: flex !important;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: var(--tb-s-6);
    border-bottom: 1px solid var(--tb-border);
    z-index: 99;
}
.tb-nav.is-open .tb-nav-list {
    flex-direction: column;
    gap: var(--tb-s-3);
}

/* Reveal animation */
.tb-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s, transform 0.6s;
}
.tb-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Prose styles for WP-editor content */
.tb-prose {
    font-size: var(--tb-text-base);
    line-height: 1.7;
    color: var(--tb-text);
}
.tb-prose > * + * { margin-top: var(--tb-s-4); }
.tb-prose h2 {
    font-size: var(--tb-text-2xl);
    margin-top: var(--tb-s-10);
    margin-bottom: var(--tb-s-4);
}
.tb-prose h3 {
    font-size: var(--tb-text-xl);
    margin-top: var(--tb-s-6);
    margin-bottom: var(--tb-s-3);
}
.tb-prose p { color: var(--tb-text-muted); }
.tb-prose a { color: var(--tb-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tb-prose ul, .tb-prose ol { padding-left: var(--tb-s-6); color: var(--tb-text-muted); }
.tb-prose li { margin-bottom: var(--tb-s-2); }
.tb-prose blockquote {
    border-left: 3px solid var(--tb-primary);
    padding-left: var(--tb-s-5);
    margin-left: 0;
    font-style: italic;
    color: var(--tb-text);
    font-size: var(--tb-text-lg);
}
.tb-prose code {
    background: var(--tb-bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--tb-font-mono);
    font-size: 0.9em;
    color: var(--tb-text);
}
.tb-prose pre {
    background: var(--tb-dark);
    color: var(--tb-dark-text);
    padding: var(--tb-s-5);
    border-radius: var(--tb-r);
    overflow-x: auto;
    font-size: var(--tb-text-sm);
}
.tb-prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}
.tb-prose img {
    border-radius: var(--tb-r);
    box-shadow: var(--tb-shadow);
    margin: var(--tb-s-6) 0;
}
.tb-prose hr {
    border: none;
    border-top: 1px solid var(--tb-border);
    margin: var(--tb-s-8) 0;
}