/* App-level overrides layered on top of theme.min.css. Keep this file small —
   it is linked last, so anything here wins over the vendor theme. */

/* Sidebar brand: the theme ships no size rule for .logo-lg, so a wide logo
   renders at its natural pixel width and is simply clipped by .m-header's
   overflow:hidden. Scale it to the rail instead, preserving aspect ratio.
   .m-header is 80px tall with 15px/30px padding => 50px tall x 220px wide. */
.nxl-navigation .m-header .b-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nxl-navigation .m-header .logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

/* .logo-sm keeps the theme's fixed 42px width in minimenu mode; this just
   makes sure it can never outgrow the collapsed rail either. */
html.minimenu .nxl-navigation .m-header .logo-sm {
    max-width: 100%;
    max-height: 42px;
}

/* Sidebar logout: /logout requires POST + CSRF, so the nav item is a submit
   button (wired to #nav-logout-form via form=) rather than an <a>. Strip the
   UA button chrome so it inherits the theme's .nxl-link look exactly. */
.nxl-navbar .nxl-item > button.nxl-link {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Public landing page (app/views/public/layout.php + landing.php).
   The vendor theme only dresses the signed-in admin shell, so the marketing
   shell brings its own type scale and section rhythm. Scoped under .marketing-*
   so none of it can leak into the app.
   --------------------------------------------------------------------------- */
.marketing-body {
    background: #fff;
    color: #0f172a;
}

.marketing-nav {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* logo-full.png is dark artwork on an opaque white background, so it only sits
   correctly on white surfaces — keep the nav and hero light. */
.marketing-brand img {
    width: auto;
    height: auto;
    max-height: 38px;
    max-width: 190px;
    object-fit: contain;
}

.marketing-navlink:hover {
    color: #0f172a !important;
}

.marketing-hero {
    padding: 72px 0 64px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #e5e7eb;
}

.marketing-section {
    padding: 72px 0;
}

.marketing-section-alt {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-cta {
    padding: 72px 0;
    background: #0f172a;
    color: #fff;
}

.marketing-cta .marketing-h2 {
    color: #fff;
}

.marketing-cta .marketing-sub {
    color: #cbd5e1;
}

.marketing-h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.marketing-h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.marketing-lead {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.6;
    color: #475569;
}

.marketing-sub {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #64748b;
}

.marketing-feature {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

/* Numbered steps: the counter replaces a list marker, so reset the UA list. */
.marketing-steps {
    counter-reset: marketing-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.marketing-steps > li {
    counter-increment: marketing-step;
    position: relative;
    padding: 0 0 24px 56px;
}

.marketing-steps > li:last-child {
    padding-bottom: 0;
}

.marketing-steps > li::before {
    content: counter(marketing-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Connector line between steps, stopping short of the last marker. */
.marketing-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 8px;
    width: 2px;
    background: #e5e7eb;
}

.marketing-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 575.98px) {
    .marketing-hero { padding: 48px 0 40px; }
    .marketing-section,
    .marketing-cta { padding: 48px 0; }
}