/* ==========================================================================
   Leantegral site theme
   --------------------------------------------------------------------------
   Layered on top of Bootstrap 5.3.  Defines the brand palette, typography,
   and opinionated overrides for the "lt-*" components used in our FTL
   partials.  Anything page-specific should live in the page template, not
   here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand palette (extracted from the original leantegral.com WordPress build)
   -------------------------------------------------------------------------- */
:root {
    --lt-navy:          #1d2233;   /* primary dark surface: hero, dark sections */
    --lt-navy-900:      #0a1821;   /* deepest dark: footer */
    --lt-navy-700:      #2a3049;   /* raised dark surfaces */
    --lt-orange:        #ff6600;   /* brand accent, primary CTA */
    --lt-orange-600:    #e65a00;   /* CTA hover */
    --lt-orange-100:    #ffe5cc;
    --lt-blue:          #2c69ff;   /* secondary link color */
    --lt-gray-50:       #f6f6f6;
    --lt-gray-100:      #f5f7fa;
    --lt-gray-200:      #e9ecef;
    --lt-body:          #1d2233;
    --lt-muted:         #5a6077;

    /* --- Bootstrap variable overrides ------------------------------------- */
    --bs-primary:               var(--lt-orange);
    --bs-primary-rgb:           255, 102, 0;
    --bs-link-color:            var(--lt-orange);
    --bs-link-color-rgb:        255, 102, 0;
    --bs-link-hover-color:      var(--lt-orange-600);
    --bs-link-hover-color-rgb:  230, 90, 0;
    --bs-body-color:            var(--lt-body);
    --bs-body-color-rgb:        29, 34, 51;
    --bs-body-font-family:      "Inter", system-ui, -apple-system, "Segoe UI",
                                Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-weight:      400;
    --bs-heading-color:         var(--lt-navy);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--bs-body-font-family);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lt-navy);
}
h1, .h1 { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); line-height: 1.1; }
h2, .h2 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.15; }
h3, .h3 { font-size: clamp(1.35rem, 1.2rem + 0.9vw, 1.9rem);  line-height: 1.2; }

.lead { font-weight: 400; }

/* --------------------------------------------------------------------------
   Two-tone headline: "<lead text>  <accent text in orange>"
   Used on the homepage hero and other marketing pages.
   -------------------------------------------------------------------------- */
.lt-two-tone {
    display: block;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.lt-two-tone__lead,
.lt-two-tone__accent {
    display: inline;
}
.lt-two-tone__accent {
    color: var(--lt-orange);
}
/* Allow linebreak between the two halves on larger viewports. */
@media (min-width: 768px) {
    .lt-two-tone__lead   { display: block; }
    .lt-two-tone__accent { display: block; }
}

/* --------------------------------------------------------------------------
   Surfaces / sections
   -------------------------------------------------------------------------- */
.lt-surface-dark {
    background-color: var(--lt-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.lt-surface-dark h1,
.lt-surface-dark h2,
.lt-surface-dark h3,
.lt-surface-dark h4,
.lt-surface-dark h5,
.lt-surface-dark h6 {
    color: #fff;
}
.lt-surface-dark a:not(.btn) {
    color: #fff;
}
.lt-surface-dark a:not(.btn):hover { color: var(--lt-orange); }

.lt-surface-gray { background-color: var(--lt-gray-100); }

/* --------------------------------------------------------------------------
   Vertical rhythm — single source of truth
   --------------------------------------------------------------------------
   Every major block on every page is marked up as <section class="section">
   (optionally combined with .lt-surface-dark / .lt-surface-gray).  Every
   section owns a symmetric top/bottom padding; the single variable below
   controls spacing across the whole site.  No adjacent-sibling collapse:
   that approach glued content to color boundaries whenever two differently
   toned sections met (e.g. gray -> dark CTA), leaving no breathing room
   on the second side of the boundary.  Balanced padding on both sides
   keeps the rhythm consistent regardless of tone transitions.
   -------------------------------------------------------------------------- */
:root {
    --lt-section-y: 3rem;
}
@media (min-width: 992px) {
    :root {
        --lt-section-y: 4.5rem;
    }
}

.section {
    padding-top: var(--lt-section-y);
    padding-bottom: var(--lt-section-y);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.lt-navbar {
    background-color: #fff;
    border-bottom: 1px solid rgba(29, 34, 51, 0.08);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.lt-navbar .navbar-brand img { height: 34px; width: auto; display: block; }

.lt-navbar .nav-link {
    color: var(--lt-navy);
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: color 120ms ease;
}
.lt-navbar .nav-link:hover,
.lt-navbar .nav-link:focus,
.lt-navbar .nav-link.active {
    color: var(--lt-orange);
}
.lt-navbar .nav-link.active {
    position: relative;
}
@media (min-width: 1200px) {
    .lt-navbar .nav-link.active::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.2rem;
        height: 2px;
        background-color: var(--lt-orange);
        border-radius: 2px;
    }
}

.lt-navbar .dropdown-menu {
    border: 1px solid var(--lt-gray-200);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 12px 30px -12px rgba(29,34,51,0.18);
}
.lt-navbar .dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: var(--lt-navy);
}
.lt-navbar .dropdown-item:hover,
.lt-navbar .dropdown-item:focus {
    background-color: var(--lt-gray-100);
    color: var(--lt-orange);
}
.lt-navbar .dropdown-item.active,
.lt-navbar .dropdown-item:active {
    background-color: rgba(242, 101, 34, 0.10);
    color: var(--lt-orange);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-lt-primary {
    --bs-btn-bg:                 var(--lt-orange);
    --bs-btn-border-color:       var(--lt-orange);
    --bs-btn-hover-bg:           var(--lt-orange-600);
    --bs-btn-hover-border-color: var(--lt-orange-600);
    --bs-btn-active-bg:          var(--lt-orange-600);
    --bs-btn-active-border-color: var(--lt-orange-600);
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-lt-outline {
    border: 2px solid var(--lt-orange);
    color: var(--lt-orange);
    background: transparent;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    transition: background 140ms ease, color 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-lt-outline:hover,
.btn-lt-outline:focus {
    background: var(--lt-orange);
    color: #fff;
}

/* When used on dark surfaces, keep orange letters but add a bit more weight */
.lt-surface-dark .btn-lt-outline {
    color: #fff;
    border-color: var(--lt-orange);
}
.lt-surface-dark .btn-lt-outline:hover {
    background: var(--lt-orange);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Cards / feature tiles
   -------------------------------------------------------------------------- */
.lt-card {
    border: 1px solid var(--lt-gray-200);
    border-radius: 16px;
    padding: 1.75rem;
    background: #fff;
    height: 100%;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.lt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px rgba(29,34,51,0.18);
}
.lt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--lt-orange-100);
    color: var(--lt-orange);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.lt-footer {
    background: var(--lt-navy-900);
    color: rgba(255,255,255,0.78);
    padding: 3.5rem 0 1.25rem;
    font-size: 0.95rem;
}
.lt-footer h5 {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    font-weight: 700;
}
.lt-footer a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 120ms ease;
}
.lt-footer a:hover { color: var(--lt-orange); }

.lt-footer__brand img {
    height: 34px;
    width: auto;
    margin-bottom: 1rem;
    display: block;
}

.lt-footer__socials {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.lt-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.lt-footer__socials a:hover {
    background: var(--lt-orange);
    border-color: var(--lt-orange);
    color: #fff;
}

.lt-footer__legal {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}
.lt-footer__legal a { color: rgba(255,255,255,0.7); }

/* --------------------------------------------------------------------------
   Small utilities reused across pages
   -------------------------------------------------------------------------- */
.lt-eyebrow {
    color: var(--lt-orange);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
    display: inline-block;
}
.lt-divider {
    width: 48px;
    height: 3px;
    background: var(--lt-orange);
    border-radius: 2px;
    margin: 0.5rem 0 1.25rem;
}

/* Link color reset inside paragraphs on light surfaces */
main p a:not(.btn) {
    color: var(--lt-orange);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
main p a:not(.btn):hover { color: var(--lt-orange-600); }