/* loistalagrand.com public pages, in the WordFarm look: red and white, approachable, uncluttered.
   Loaded after each page's own styles: it changes colours, type and shared parts, never the layout. */
:root {
    --lt-red: #d62311;
    --lt-red-deep: #a91b0d;
    --lt-red-tint: #fff4f2;
    --lt-neutral: #f6f5f3;
    --lt-charcoal: #292929;
    --lt-gray: #616161;
    --lt-border: #d9d9d9;
    --lt-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* The pages' own names for the same things. */
    --bg: #ffffff;
    --bg-alt: var(--lt-neutral);
    --ink: var(--lt-charcoal);
    --ink-soft: var(--lt-gray);
    --line: var(--lt-border);
    --brand: var(--lt-red);
}

body {
    font-family: var(--lt-font);
    color: var(--lt-charcoal);
}

a { color: var(--lt-red-deep); }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Header: white, a red line underneath, the logo on the left. */
.lt-nav {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 3px solid var(--lt-red);
}
.lt-nav-inner { height: 68px; }
.lt-brand { display: inline-flex; align-items: center; flex: none; }
.lt-brand img { display: block; width: auto; height: 30px; }

/* Buttons: red pills; quiet ones are links in the header and outlined in the page. */
.lt-btn, .btn {
    min-height: 40px;
    padding: 9px 20px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease;
}
.lt-btn-primary, .btn-primary { background: var(--lt-red); border-color: var(--lt-red); color: #ffffff; }
.lt-btn-primary:hover, .btn-primary:hover { background: var(--lt-red-deep); border-color: var(--lt-red-deep); color: #ffffff; }
.lt-btn-ghost, .btn-ghost { background: #ffffff; border-color: var(--lt-red); color: var(--lt-red-deep); }
.lt-btn-ghost:hover, .btn-ghost:hover { background: var(--lt-red-tint); color: var(--lt-red-deep); }
/* In the header: plain links, and compact buttons that never break over two lines. */
.lt-nav .lt-btn, .lt-nav .btn { min-height: 36px; padding: 6px 14px; white-space: nowrap; }
.lt-nav .lt-btn:not(.lt-btn-ghost):not(.lt-btn-primary) { background: var(--lt-red); border-color: var(--lt-red); color: #ffffff; }
.lt-nav .lt-btn:not(.lt-btn-ghost):not(.lt-btn-primary):hover { background: var(--lt-red-deep); border-color: var(--lt-red-deep); }
.lt-nav .lt-btn-ghost, .lt-nav .btn-ghost { min-height: 0; padding: 6px 12px; border-color: transparent; background: transparent; color: var(--lt-charcoal); font-weight: 600; }
.lt-nav .lt-btn-ghost:hover, .lt-nav .btn-ghost:hover { background: var(--lt-neutral); color: var(--lt-red-deep); }
.lt-nav-actions { display: flex; align-items: center; gap: 6px; }
.lt-hamburger span { background: var(--lt-charcoal); }
.lt-tools-dropdown { border-radius: 14px; }
.lt-tools-dropdown a:hover { background: var(--lt-neutral); }
.lt-tools-dropdown a:hover strong { color: var(--lt-red-deep); }

/* Red panels where the pages used black ones. */
.lt-feature-panel, .cta-wrap, .lt-start-card, .final-cta {
    background: var(--lt-red);
    border-color: var(--lt-red);
    color: #ffffff;
}
/* On red every text is white: lighter reds were too faint for small text. */
.lt-feature-panel p, .cta-wrap p, .lt-start-card p, .final-cta p,
.lt-feature-panel h2, .cta-wrap h2, .lt-start-card h2, .final-cta h2 { color: #ffffff; }
.lt-tool-kicker, .eyebrow, .lt-start-eyebrow { color: var(--lt-red-deep); }
.lt-feature-kicker, .lt-feature-panel .lt-feature-kicker, .lt-start-card .lt-start-eyebrow { color: #ffffff; }
.lt-mini-card { border-color: rgba(255, 255, 255, 0.35); background: rgba(169, 27, 13, 0.55); }
.lt-mini-card span { color: #ffffff; }
/* On red, the main button is white and the quiet one is outlined in white. */
.lt-feature-actions .lt-btn-primary, .cta-wrap .lt-btn-primary, .cta-actions .lt-btn-primary, .lt-start-card .btn-primary,
.final-cta .btn-primary {
    background: #ffffff; border-color: #ffffff; color: var(--lt-red-deep);
}
.lt-feature-actions .lt-btn-primary:hover, .cta-wrap .lt-btn-primary:hover, .cta-actions .lt-btn-primary:hover,
.lt-start-card .btn-primary:hover, .final-cta .btn-primary:hover {
    background: var(--lt-red-tint); border-color: var(--lt-red-tint); color: var(--lt-red-deep);
}
.lt-feature-actions .lt-btn-ghost, .cta-wrap .lt-btn-ghost, .final-cta .btn-ghost, .lt-start-card .btn-ghost {
    background: transparent; border-color: #ffffff; color: #ffffff;
}
.lt-feature-actions .lt-btn-ghost:hover, .cta-wrap .lt-btn-ghost:hover, .final-cta .btn-ghost:hover,
.lt-start-card .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14); color: #ffffff;
}

/* Cards, tiles and tags. */
.lt-card, .card, .tile, .lt-tool-panel, .lt-proof-panel, .lt-challenge-side, .lt-cred-logo-wrap, .hero-card, .note-box,
.faq-item, .stat, .timeline-item, .process-item {
    border-color: var(--lt-border);
}
.lt-cred-wrap, .lt-challenge-wrap { background: var(--lt-neutral); }
.lt-tool-tile { transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.15s ease, background-color 0.15s ease; }
.lt-tool-tile:hover { border-color: var(--lt-red); background: #ffffff; }
.lt-tool-tile:hover strong { color: var(--lt-red-deep); }
.lt-cred-link { color: var(--lt-red-deep); }
.lt-tag, .tag { background: #ffffff; border-color: var(--lt-border); color: var(--lt-gray); }
.lt-news-bar { background: var(--lt-red-tint); border-color: #f1b8b0; }
.lt-news-bar:hover { background: #ffe9e5; }
.lt-news-pill { background: var(--lt-red); color: #ffffff; }
.lt-news-text { color: var(--lt-red-deep); }
.lt-news-arrow { color: var(--lt-red); }
.process-num, .lt-fc-index-num { background: var(--lt-red); color: #ffffff; }
/* The lesson in view (course page): a red tint, on every screen size. */
.tab-btn.active { background: var(--lt-red-tint); border-color: #f1b8b0; }
.tab-btn.active .tab-btn-number, .tab-btn.active .tab-btn-title { color: var(--lt-red-deep); }

/* Footer */
.lt-footer { border-top: 1px solid var(--lt-border); background: #ffffff; }
.lt-footer-inner a, .lt-footer-links a { color: var(--lt-charcoal); }
.lt-footer-inner a:hover, .lt-footer-links a:hover { color: var(--lt-red-deep); }

/* Hovering: what can be pressed lifts a little. Mouse pointers only, and never for reduced motion. */
@media (hover: hover) {
    .lt-btn-primary:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(214, 35, 17, 0.24); }
    .lt-tool-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(41, 41, 41, 0.08); }
    .lt-nav .lt-btn:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lt-btn, .btn, .lt-tool-tile { transition: none; }
    .lt-btn:hover, .btn:hover, .lt-tool-tile:hover { transform: none; }
}

@media (max-width: 768px) {
    /* The header grows to a second row when its links don't fit beside the logo. */
    .lt-nav-inner { height: auto; min-height: 60px; flex-wrap: wrap; gap: 6px 12px; padding: 8px 16px; }
    .lt-brand img { height: 26px; }
    /* The open menu hangs below the red line. */
    .lt-actions { top: calc(100% + 3px); }
    .lt-nav-actions { flex-wrap: wrap; }
    .lt-nav .lt-btn, .lt-nav .btn { padding: 6px 12px; font-size: 13px; }
}