/* ════════════════════════════════════════════════════════════════════════
   MOTLogs public marketing site theme.

   Uses the SAME design tokens as the member area (defined in member.css at
   :root / html[data-theme="light"]), so the pre-login pages support the exact
   same light + dark options and palette. Everything is scoped under
   `.public-shell` (PublicNavBar layout root). No hardcoded beige/navy/white —
   the marketing section/card classes are re-mapped onto the tokens.
   ════════════════════════════════════════════════════════════════════════ */

/* Inter is self-hosted: @font-face for "InterVariable"/"Inter" is declared in
   App.razor and served from /fonts/InterVariable.woff2 (no Google Fonts). */

.public-shell {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font-family: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.public-shell .main-content { background-color: var(--bg-primary); }

/* ── Typography ── */
.public-shell h1, .public-shell h2, .public-shell h3,
.public-shell h4, .public-shell h5, .public-shell h6 {
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}
.public-shell a { color: var(--accent); text-decoration: none; }
.public-shell a:hover { color: var(--accent-hover); }

/* Marketing type scale — matched to the Agent (h1/h2/h3 clamps, lead size). */
.public-shell { font-size: 16px; }
.public-shell .main-content h1 { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1.1; }
.public-shell .main-content h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important; line-height: 1.2; }
.public-shell .main-content h3 { font-size: 1.25rem !important; line-height: 1.3; }
.public-shell .main-content p { font-size: 1rem; line-height: 1.6; }

/* Navbar links + Sign In button — force visible colours (deterministic, beats
   the layout's own conflicting rules). Nav size matched to the Agent (0.95rem). */
.public-shell .custom-appbar-button { color: var(--text-secondary) !important; font-size: 0.95rem !important; }
.public-shell .custom-appbar-button:hover { color: var(--text-primary) !important; }
/* Log in = ghost button (bold text-primary on transparent, strong border) — matches
   Agent's marketing .btn-ghost. */
.public-shell .login,
.public-shell .custom-appbar-button.login {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
}
.public-shell .login:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }

/* No focus ring on mouse click (Bootstrap-3 legacy a:focus ring showed white);
   keyboard users keep an accent :focus-visible ring. */
.public-shell .custom-appbar-button:focus,
.public-shell .nav-dropdown-toggle:focus,
.public-shell .pb-theme-toggle:focus { outline: none !important; }
.public-shell .custom-appbar-button:focus-visible,
.public-shell .nav-dropdown-toggle:focus-visible,
.public-shell .pb-theme-toggle:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* ── Buttons → accent ── */
.public-shell .btn-primary, .public-shell .btn.btn-primary,
.public-shell .custom-button, .public-shell .e-btn.e-primary,
.public-shell button.e-primary, .public-shell .pricing-button, .public-shell .cta-button {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.public-shell .btn-primary:hover, .public-shell .custom-button:hover,
.public-shell .e-btn.e-primary:hover, .public-shell .cta-button:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}

/* ── Full-width band / page wrappers: beige & navy → blend into the canvas ── */
.public-shell .about-page,
.public-shell .faq-page,
.public-shell .page-wrapper,
.public-shell .section-box,
.public-shell .contact-section,
.public-shell .rounded-section,
.public-shell .services-band-section,
.public-shell .reporting-band-section,
.public-shell .partners-section,
.public-shell .pricing-section,
.public-shell .privacy-section,
.public-shell .terms-section,
.public-shell .blog-section,
.public-shell .demo-section,
.public-shell .faq-header,
.public-shell .faq-section,
.public-shell .stats {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* ── Cards / boxes: white → elevated surface ── */
.public-shell .contact-inner-container,
.public-shell .demo-column,
.public-shell .faq-header-content,
.public-shell .white-box,
.public-shell .blog-card,
.public-shell .module,
.public-shell .services-box,
.public-shell .kb-carousel,
.public-shell .carousel-sample,
.public-shell .card, .public-shell .panel {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-1);
}

/* ── Text inside marketing sections → theme-aware (kills hardcoded navy/black/#555) ── */
.public-shell .about-page :is(p, li, span, td, th, label, dd, dt, small, strong, em, blockquote),
.public-shell .faq-page :is(p, li, span, td, th, label),
.public-shell .section-box :is(p, li, span, td, th, label),
.public-shell .blog-card :is(p, li, span),
.public-shell .contact-inner-container :is(p, li, span, address) {
    color: var(--text-secondary) !important;
}

/* ── Re-assert accents on top of the broad text override ── */
/* Exclude filled brand buttons — they carry white text on an accent fill and
   must NOT be recoloured to accent-on-accent (invisible label). */
.public-shell .main-content a:not(.pl-cta):not(.product-open):not(.login):not(.custom-appbar-button):not(.custom-appbar-wordmark):not(.chrome-link),
.public-shell .accent, .public-shell [class*="accent"],
.public-shell .price, .public-shell [class*="price-amount"] { color: var(--accent) !important; }

/* Nav links stay standard grey (like Agent), not accent. */
.public-shell .custom-appbar-button { color: var(--text-secondary) !important; text-decoration: none !important; }
.public-shell .custom-appbar-button:hover { color: var(--text-primary) !important; }

/* Filled brand buttons: accent fill, white label (beats the broad anchor rule). */
.public-shell .product-open,
.public-shell .pl-cta {
    background-color: var(--accent) !important;
    color: #fff !important;
}

/* Small navy badges/tags → accent chip. */
.public-shell .blog-card-category,
.public-shell .badge, .public-shell .tag {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
}
.public-shell .blog-card-category :is(span, p) { color: #fff !important; }

/* ── Inputs ── */
.public-shell input:not([type=checkbox]):not([type=radio]),
.public-shell select, .public-shell textarea {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
}
.public-shell input::placeholder, .public-shell textarea::placeholder { color: var(--text-muted); }

/* ════════════════════ Per-page hardcoded colours (full site sweep) ════════════════════
   Selectors gathered by walking every marketing page's <style> block. These
   carried hardcoded navy #050A30 / grey / black / white that broke in dark
   mode; re-mapped onto the tokens. White-on-image and white-on-accent text
   (hero slides, CTA buttons, badges) is intentionally left untouched. */

/* Navy/dark titles → primary text. */
.public-shell .reporting-heading, .public-shell .reporting-report-title,
.public-shell .reporting-section-header h2, .public-shell .services-section-header h2,
.public-shell .section-header h2, .public-shell .section-header h5,
.public-shell .partners-header h2, .public-shell .module-text h3,
.public-shell .faq-column h2, .public-shell .contact-text h2,
.public-shell .contact-info i, .public-shell .blog-card-content h2,
.public-shell .code-display, .public-shell .price,
.public-shell .country-detail-container .heading {
    color: var(--text-primary) !important;
}

/* Grey/black body copy → secondary text. */
.public-shell .blog-card-content p, .public-shell .blog-card-date,
.public-shell .description, .public-shell .faq-header-content p,
.public-shell .features-list li, .public-shell .module-text,
.public-shell .module-text li, .public-shell .module-text ul,
.public-shell .partners-header, .public-shell .partners-header p,
.public-shell .partners-section, .public-shell .price span,
.public-shell .reporting-description, .public-shell .reporting-report-description,
.public-shell .reporting-section-header p, .public-shell .section-header p,
.public-shell .services-box p, .public-shell .services-box ul,
.public-shell .services-section-header p, .public-shell .contact-text,
.public-shell .about-page, .public-shell .switch-form,
.public-shell .country-detail-container .description {
    color: var(--text-secondary) !important;
}

/* White boxes → elevated surface. */
.public-shell .pricing-card, .public-shell .logo-carousel,
.public-shell .kb-carousel, .public-shell .services-box, .public-shell .module {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 12px !important;
}

/* Stats band → elevated surface (was navy with white text). */
.public-shell .stats { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; }
.public-shell .stats, .public-shell .stats * { color: var(--text-primary) !important; }

/* Beige/blue link + carousel accents → brand accent. */
.public-shell .swiper-button-prev, .public-shell .swiper-button-next,
.public-shell .switch-form a,
.public-shell .kb-carousel .e-carousel-navigators .e-btn-icon,
.public-shell .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
    color: var(--accent) !important;
}

/* CTA buttons that keep white text → accent background. */
.public-shell .get-started-btn,
.public-shell .login-button, .public-shell .register-button,
.public-shell .action-button, .public-shell .copy-button {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    border-radius: 8px !important;
}
.public-shell .get-started-btn:hover,
.public-shell .login-button:hover, .public-shell .register-button:hover { background: var(--accent-hover) !important; }

/* ── Dark line-art icons: invert in dark theme so they don't vanish on dark
   cards. Only the sketch/icon images — customer logos, thumbnails and full
   screenshots (photos) are left untouched. ── */
html[data-theme="dark"] .public-shell .pricing-icon,
html[data-theme="dark"] .public-shell .services-icon,
html[data-theme="dark"] .public-shell .doodle-image {
    filter: invert(1) brightness(1.7);
}

/* ════════════════════ Sign-in / register page ════════════════════
   Match the Agent back-office: dark canvas, a framed form card, dark inputs,
   and the promo graphic inverted so it reads on dark instead of a white slab. */
.public-shell .page-wrapper { background: var(--bg-primary) !important; }
.public-shell .side-container { background: transparent !important; }
.public-shell .auth-frame { background: transparent !important; box-shadow: none !important; }
.public-shell .white-box.form-container,
.public-shell .white-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-2) !important;
}
html[data-theme="dark"] .public-shell .left-side .doodle-image { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

/* Syncfusion textboxes on the public site → dark, 8px, accent focus. */
.public-shell .e-input-group,
.public-shell .e-input-group .e-input,
.public-shell .e-float-input,
.public-shell .e-textbox {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    border-radius: 8px !important;
}
.public-shell .e-input-group.e-input-focus,
.public-shell .e-input-group:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.public-shell .e-input-group input::placeholder { color: var(--text-muted) !important; }

/* ════════════════════ Broad text normalisation ════════════════════
   The marketing pages hardcode navy/black/grey text on hundreds of selectors.
   Rather than chase each class, normalise all body text under .main-content to
   the tokens, then re-assert the intentional exceptions (accent links, white
   text on accent buttons and on hero images). */
.public-shell .main-content :is(h1, h2, h3, h4, h5, h6),
.public-shell .main-content .price,
.public-shell .main-content .heading {
    color: var(--text-primary) !important;
}
.public-shell .main-content :is(p, li, span, td, th, label, small, em, dd, dt, address, figcaption, blockquote, strong) {
    color: var(--text-secondary) !important;
}

/* Re-assert: accent links. */
.public-shell .main-content a:not(.btn):not([class*="button"]):not(.login):not(.product-open):not(.pl-cta):not(.chrome-link) { color: var(--accent) !important; }
.public-shell .main-content a:not(.btn):not([class*="button"]):not(.login):not(.product-open):not(.pl-cta):not(.chrome-link):hover { color: var(--accent-hover) !important; }

/* Re-assert: white text on hero images stays white. */
.public-shell .background-image-slide, .public-shell .background-image-slide :is(h1,h2,h3,p,span),
.public-shell .text-container, .public-shell .text-container :is(h1,h2,h3,p,span),
.public-shell .hero-text, .public-shell .hero-text :is(h1,h2,h3,p,span) { color: #fff !important; }

/* Re-assert: white text on accent buttons / badges. */
.public-shell :is(.btn, .login, .badge, .tag, .blog-card-category, .get-started-btn,
.login-button, .register-button, .action-button, .copy-button, .cta-button),
.public-shell :is(.btn, .login, .login-button, .register-button, .e-btn.e-primary,
.badge, .tag, .blog-card-category) :is(span, i, b) { color: #fff !important; }
.public-shell .e-btn.e-primary { color: #fff !important; }

/* ════════════════════ FAQ accordion (Agent style) ════════════════════
   Syncfusion's light theme paints the expanded item blue — override to keep it
   a dark surface card, and swap the chevron for an orange +/- toggle. */
.public-shell .custom-accordion .e-acrdn-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
}
.public-shell .custom-accordion .e-acrdn-item.e-selected,
.public-shell .custom-accordion .e-acrdn-item.e-select.e-expand-state,
.public-shell .custom-accordion .e-acrdn-item.e-expand-state {
    border-color: var(--border-strong) !important;
}
/* Header stays dark on hover / focus / expanded (never blue). */
.public-shell .custom-accordion .e-acrdn-header,
.public-shell .custom-accordion .e-acrdn-header:hover,
.public-shell .custom-accordion .e-acrdn-header:focus,
.public-shell .custom-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
.public-shell .custom-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header,
.public-shell .custom-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.public-shell .custom-accordion .e-acrdn-header .e-acrdn-header-content,
.public-shell .custom-accordion .e-acrdn-item.e-expand-state .e-acrdn-header-content {
    color: var(--text-primary) !important;
}
.public-shell .custom-accordion .e-acrdn-panel .e-acrdn-content,
.public-shell .custom-accordion .e-acrdn-content { color: var(--text-secondary) !important; }

/* Orange + / − toggle (replaces the chevron). */
.public-shell .custom-accordion .e-toggle-icon .e-icons { display: none !important; }
.public-shell .custom-accordion .e-acrdn-header .e-toggle-icon::before {
    content: "+";
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
}
.public-shell .custom-accordion .e-acrdn-item.e-expand-state .e-acrdn-header .e-toggle-icon::before {
    content: "\2212";
    color: var(--accent);
}

/* Robust dark override keyed on the Syncfusion accordion root itself (the
   .custom-accordion class does not always land where its descendant selectors
   expect, and the .e-accordion ROOT paints white in the light theme). */
.public-shell .e-accordion {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.public-shell .e-accordion .e-acrdn-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
}
.public-shell .e-accordion .e-acrdn-item.e-selected,
.public-shell .e-accordion .e-acrdn-item.e-expand-state { border-color: var(--border-strong) !important; }
.public-shell .e-accordion .e-acrdn-header,
.public-shell .e-accordion .e-acrdn-header:hover,
.public-shell .e-accordion .e-acrdn-header:focus,
.public-shell .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background: transparent !important;
    box-shadow: none !important;
}
.public-shell .e-accordion .e-acrdn-header .e-acrdn-header-content { color: var(--text-primary) !important; }
.public-shell .e-accordion .e-acrdn-panel .e-acrdn-content,
.public-shell .e-accordion .e-acrdn-content { color: var(--text-secondary) !important; }
.public-shell .e-accordion .e-toggle-icon .e-icons { display: none !important; }
.public-shell .e-accordion .e-acrdn-header .e-toggle-icon::before {
    content: "+"; font-family: 'Inter', -apple-system, sans-serif; font-size: 1.6rem;
    font-weight: 400; line-height: 1; color: var(--accent);
}
.public-shell .e-accordion .e-acrdn-item.e-expand-state .e-acrdn-header .e-toggle-icon::before { content: "\2212"; color: var(--accent); }

/* ── Themed scrollbar (matches member area) ── */
.public-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
.public-shell ::-webkit-scrollbar-track { background: var(--bg-primary); }
.public-shell ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.public-shell ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Product landing pages (/agent/, /scout/, /wiki/) — hub-and-spoke ── */
.public-shell .product-landing {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px 100px;
}

.public-shell .pl-eyebrow {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.public-shell .product-landing h1 { margin-bottom: 12px; }

.public-shell .pl-tagline {
    font-size: 1.25rem !important;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.public-shell .pl-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.public-shell .pl-benefits li {
    position: relative;
    padding-left: 28px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.5;
}

.public-shell .pl-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}

.public-shell .pl-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.public-shell .pl-cta {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.public-shell .pl-cta:hover {
    background-color: var(--accent-hover) !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.public-shell .pl-back {
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
}

.public-shell .pl-back:hover { color: var(--text-primary); }

/* ── 404 (router NotFound) ── */
.public-shell .nf-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 100px 24px 120px;
    text-align: center;
}

.public-shell .nf-code {
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
}

.public-shell .nf-wrap p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 16px 0 28px;
}