/* Decision Trace brand overrides
 * Loaded after Source's screen.css via default.hbs.
 * Audience Loop palette + iCustomer typography.
 */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');

:root {
    /* Audience Loop primary (mark site --color-al-500) */
    --dt-primary: #2085FC;
    --dt-primary-hover: #1A71D9;
    --dt-primary-light: #E6F3FF;

    /* Lifted dark neutrals (mark site) - used for dark surfaces */
    --dt-bg-dark: #141414;
    --dt-card-dark: #1C1C1C;
    --dt-text-on-dark: #F5F5F5;
    --dt-muted-on-dark: #999999;
    --dt-border-on-dark: rgba(255, 255, 255, 0.08);

    /* Override Source's font stacks with iCustomer typography */
    --font-sans: 'Work Sans', 'Work Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Variable', 'Work Sans', sans-serif;
    --font-mono: 'Fira Code', 'Fira Code Variable', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* Use Plus Jakarta Sans for headings even when Source picks "Modern sans-serif" */
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6,
.gh-canvas h1,
.gh-canvas h2,
.gh-canvas h3,
.gh-article-title,
.gh-card-title,
.post-card-title,
.gh-feature-title,
.site-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Body and paragraph text use Work Sans */
body,
.gh-content p,
.gh-content li,
.post-card-excerpt,
.gh-card-excerpt {
    font-family: var(--font-sans);
}

/* Code uses Fira Code */
code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
}

/* Accent links and buttons - if Ghost admin accent is set to #2085FC,
 * Source already uses --ghost-accent-color throughout. This is a fallback
 * in case the admin accent isn't set yet. */
a {
    color: var(--ghost-accent-color, var(--dt-primary));
}

a:hover {
    color: var(--ghost-accent-color, var(--dt-primary-hover));
    filter: brightness(0.92);
}

/* ============================================================
 * Header: mirror icustomer.ai marketing site header
 * Light/translucent surface with backdrop-blur, fixed at top.
 * Targets Source's existing .gh-navigation classes.
 * ============================================================ */

.gh-navigation {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gh-navigation-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gh-navigation-logo {
    display: inline-flex;
    align-items: center;
}

.gh-navigation-logo img {
    height: 24px;
    width: auto;
    transition: opacity 150ms ease;
}

.gh-navigation-logo:hover img {
    opacity: 0.8;
}

.gh-navigation-logo.is-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: #1D212B;
    text-decoration: none;
}

/* Nav menu in the middle (admin-managed via Ghost Settings -> Navigation) */
.gh-navigation-menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gh-navigation-menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gh-navigation-menu a {
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: rgba(29, 33, 43, 0.7);
    text-decoration: none;
    border-radius: 6px;
    transition: color 150ms ease, background 150ms ease;
}

.gh-navigation-menu a:hover {
    color: #1D212B;
    background: rgba(0, 0, 0, 0.04);
    filter: none;
}

/* Right-side actions: search + members buttons */
.gh-navigation-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gh-navigation-members {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Sign in: ghost button look */
.gh-navigation-members a:not(.gh-button) {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: #1D212B;
    text-decoration: none;
    padding: 8px 12px;
    transition: opacity 150ms;
}

.gh-navigation-members a:not(.gh-button):hover {
    opacity: 0.7;
    filter: none;
}

/* Subscribe button: filled, primary blue, matches iCustomer "Get Started Free" */
.gh-navigation-members .gh-button,
.gh-navigation .gh-button {
    background: var(--ghost-accent-color, var(--dt-primary));
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    height: 36px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(32, 133, 252, 0.25);
    transition: filter 150ms ease;
}

.gh-navigation-members .gh-button:hover,
.gh-navigation .gh-button:hover {
    filter: brightness(0.92);
    color: #FFFFFF;
}

/* Search icon button: subtle */
.gh-search,
.gh-icon-btn {
    color: #1D212B;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 150ms;
}

.gh-search:hover,
.gh-icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    filter: none;
}

/* Mobile hamburger */
.gh-burger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

@media (max-width: 991px) {
    .gh-navigation-menu {
        display: none;
    }
    .gh-navigation-actions {
        gap: 8px;
    }
    .gh-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Add top padding to body so content isn't hidden under the sticky header */
.gh-viewport {
    padding-top: 0;
}

/* ============================================================
 * Footer: mirror icustomer.ai marketing site footer
 * 4 columns: Brand + Product + About + Company. Light surface.
 * ============================================================ */

.dt-footer {
    background: #FFFFFF;
    border-top: 1px solid #E7EAEF;
    padding: 0;
    color: #1D212B;
}

.dt-footer .gh-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 0;
}

.dt-footer-columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}

@media (max-width: 991px) {
    .dt-footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .dt-footer-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .dt-footer .gh-footer-inner {
        padding: 48px 24px 0;
    }
}

/* Brand column */
.dt-footer-brand {
    display: flex;
    flex-direction: column;
}

.dt-footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 150ms;
}

.dt-footer-logo:hover {
    opacity: 0.8;
    filter: none;
}

.dt-footer-logo img {
    height: 24px;
    width: auto;
}

.dt-footer-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: #1D212B;
}

.dt-footer-tagline {
    margin: 12px 0 0 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #657386;
}

.dt-footer-social {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dt-footer-social a {
    color: #657386;
    transition: color 150ms;
}

.dt-footer-social a:hover {
    color: var(--ghost-accent-color, var(--dt-primary));
    filter: none;
}

.dt-footer-email {
    margin: 16px 0 0 0;
    font-family: var(--font-sans);
    font-size: 10px;
    color: #657386;
}

/* Link columns */
.dt-footer-column h3 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: #1D212B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px 0;
}

.dt-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dt-footer-column li {
    margin-bottom: 10px;
}

.dt-footer-column a {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #657386;
    text-decoration: none;
    transition: color 150ms;
}

.dt-footer-column a:hover {
    color: #1D212B;
    filter: none;
}

/* Subscribe section - keep Source's defaults but tighten margins */
.dt-footer-signup {
    border-top: 1px solid #E7EAEF;
    padding: 48px 0;
    text-align: center;
}

/* Bottom bar */
.dt-footer-bottom {
    border-top: 1px solid #E7EAEF;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dt-footer-bottom p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #657386;
}

.dt-footer-powered {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #657386;
}

.dt-footer-powered a {
    color: #657386;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dt-footer-powered a:hover {
    color: #1D212B;
    filter: none;
}