/* =============================================================================
   KMVLN — Site-wide overflow & spillage guards (2026-04-28 hotfix2)
   Loaded LAST so it overrides earlier rules. Defensive only — no visual change
   unless something was overflowing.
   ============================================================================= */

/* ----- Base: kill any horizontal scrollbar caused by descendant overflow ----- */
html { overflow-x: hidden; }
body {
    overflow-x: clip;
    max-width: 100vw;
}

/* Make every container fluid and never wider than the viewport */
.container {
    max-width: 1240px;
    width: 100%;
    padding-left: clamp(16px, 2.5vw, 32px);
    padding-right: clamp(16px, 2.5vw, 32px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ----- Images & media never overflow ----- */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
img { vertical-align: middle; }

/* ----- Long words / URLs in copy break gracefully ----- */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, td, th, label, span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ----- Flex children: fix the classic "flex item won't shrink below its content" bug ----- */
header *, .nav *, .nav-menu *, .hero *, .services-grid > *, .stats-grid > *,
.value-card, .service-card, .stat-item, .glass-card, .bento-card,
.cta-content, .footer-col, .about-list > li {
    min-width: 0;
}

/* =============================================================================
   1. NAVBAR — the immediate user-reported bug
   The desktop menu has 8-9 items + CTA. At 1024-1280px viewports they don't
   all fit. Bump the mobile breakpoint up so the hamburger appears earlier.
   ============================================================================= */

@media (max-width: 1180px) {
    /* Hide desktop nav, show toggle */
    .nav-menu { display: none !important; }
    .nav-toggle { display: flex !important; }

    /* Mobile nav menu (existing slide-in) — let existing rules in style.css
       drive the open state, but make sure the closed state hides cleanly */
    .nav-menu.active {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        width: min(85vw, 360px);
        height: 100vh;
        flex-direction: column;
        background: var(--bg-card, #fff);
        padding: 80px 24px 24px;
        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
        z-index: 1000;
        overflow-y: auto;
        gap: 4px;
    }
    .nav-menu.active .nav-link {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
    }
}

/* Even in the desktop range, if menu items try to overflow, clip cleanly */
.nav {
    flex-wrap: nowrap;
    min-width: 0;
}
.nav-menu {
    flex-wrap: nowrap;
    min-width: 0;
}
.nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
/* Belt-and-braces: explicit margin between icon and text so spacing works
   even if a parent style overrides the flex `gap` property. */
.nav-link > i,
.nav-link > .fa,
.nav-link > .fas,
.nav-link > .far,
.nav-link > .fab {
    margin-right: 6px;
    line-height: 1;
    flex-shrink: 0;
}
.nav-link > .nav-link-text {
    flex-shrink: 0;
}
.nav-link > .nav-link-chev {
    margin-left: 6px;
    margin-right: 0;
    font-size: 0.7em;
    opacity: 0.7;
}

/* CTA button: never clip, never wrap, always full-text */
.nav-cta,
.btn-cta,
header .nav-cta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: max-content;
    overflow: visible;
}
/* Tighter padding on smaller laptops so we have margin */
@media (min-width: 1181px) and (max-width: 1320px) {
    .nav { gap: 24px; }
    .nav-menu { gap: 4px; }
    .nav-link { padding: 10px 14px; font-size: 0.9rem; }
    .nav-cta { padding: 10px 18px; font-size: 0.9rem; }
}

/* =============================================================================
   2. BUTTONS — never clip, never break in two
   ============================================================================= */
.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-cta,
button.btn {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex-shrink: 0;
    box-sizing: border-box;
}
.btn-lg { white-space: nowrap; }

/* Button rows: allow wrap to next row instead of clipping */
.hero-buttons,
.cta-buttons,
.form-actions,
.action-buttons {
    flex-wrap: wrap;
}

/* =============================================================================
   3. CARDS — content stays inside
   ============================================================================= */
.service-card,
.value-card,
.stat-item,
.glass-card,
.bento-card,
.notif-card,
.notif-home-card,
.client-item {
    box-sizing: border-box;
    overflow: hidden;
    /* Allow content to wrap; don't clip text */
}
.service-card *,
.value-card *,
.glass-card *,
.bento-card * {
    max-width: 100%;
}

.service-title,
.value-title,
.bento-card__title,
.notif-card h4,
.notif-home-card h4 {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Long category/source pills: ellipsis instead of overflow */
.pill, .pill-tag, .source-pill, .status-badge, .nav-link i + span,
.notif-card__source, .blog-category {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* =============================================================================
   4. GRIDS / SECTIONS
   ============================================================================= */
.services-grid,
.stats-grid,
.values-grid,
.bento-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    /* prevent grid items overflowing their column */
    grid-auto-rows: auto;
}
.services-grid > *,
.stats-grid > *,
.values-grid > *,
.bento-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* =============================================================================
   5. TABLES (admin lists may overflow on mobile)
   ============================================================================= */
.data-table,
table {
    max-width: 100%;
}
.table-card,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   6. FORMS
   ============================================================================= */
input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
}
.form-group, .form-row {
    min-width: 0;
}

/* =============================================================================
   7. HERO — keep title/subtitle inside container at narrow widths
   ============================================================================= */
.hero-title,
.hero-subtitle {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.hero-buttons {
    flex-wrap: wrap;
    gap: 12px;
}

/* =============================================================================
   8. CLIENT MARQUEE
   ============================================================================= */
.clients-track {
    overflow: hidden;
}
.client-item img {
    max-width: 150px;
    max-height: 50px;
    object-fit: contain;
}

/* =============================================================================
   9. PRELOADER cleanup (was visible during load on slow connections)
   ============================================================================= */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #f7f9fc);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =============================================================================
   10. FOOTER
   ============================================================================= */
footer .footer-grid,
footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}
footer * {
    overflow-wrap: anywhere;
}

/* =============================================================================
   11. BUTTON POLISH (2026-05-08 revamp)
   - Kill the white shine-sweep on every .btn (.btn::before slide effect in
     style.css was causing a flicker that the user found irritating).
   - Force solid brand colors on .btn-primary / -outline / -success so the
     legacy gradient in style.css doesn't override our 2026 theme tokens.
   ============================================================================= */
.btn::before { display: none !important; }

.btn,
button.btn {
    overflow: visible;          /* style.css set overflow:hidden for the shine; not needed now */
}

/* Primary — solid navy */
.btn-primary {
    background: var(--accent, #1a2b5f) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent, #1a2b5f);
    box-shadow: 0 6px 18px rgba(26, 43, 95, 0.18);
    transition: background var(--t-base, 0.2s ease),
                transform var(--t-base, 0.2s ease),
                box-shadow var(--t-base, 0.2s ease);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: #0f1d3f !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(26, 43, 95, 0.30);
}

/* Success / proposal-style green */
.btn-success {
    background: var(--accent-2, #2e7d32) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-2, #2e7d32);
}
.btn-success:hover,
.btn-success:focus-visible {
    background: #1b5e20 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(46, 125, 50, 0.30);
}

/* Outline — clean navy outline that fills on hover */
.btn-outline {
    background: transparent !important;
    color: var(--accent, #1a2b5f) !important;
    border: 2px solid var(--accent, #1a2b5f) !important;
}
.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--accent, #1a2b5f) !important;
    color: #ffffff !important;
}

/* Header/nav CTA — solid navy in nav, gold variant elsewhere if used */
.btn-cta,
.nav-cta {
    background: var(--accent, #1a2b5f) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent, #1a2b5f) !important;
}
.btn-cta:hover,
.nav-cta:hover {
    background: #0f1d3f !important;
    color: #ffffff !important;
}

/* On dark backgrounds (like the .bg-navy CTA strip) the primary button
   should invert to white-on-navy → solid white with navy text. */
.bg-navy .btn-primary,
.bg-dark .btn-primary,
section.cta.bg-navy .btn-primary {
    background: #ffffff !important;
    color: var(--accent, #1a2b5f) !important;
    border: 1px solid #ffffff !important;
}
.bg-navy .btn-primary:hover,
.bg-dark .btn-primary:hover,
section.cta.bg-navy .btn-primary:hover {
    background: #f1f5f9 !important;
    color: var(--accent, #1a2b5f) !important;
}

/* =============================================================================
   12. WIDER-SCREEN LAYOUT (1440+ / 1800+)
   - The legacy .container caps at 1240px which leaves ~340px empty margin on
     each side of a 1920px display. Open it up progressively without breaking
     normal laptops (1024–1399 keep the existing 1240 cap).
   ============================================================================= */
@media (min-width: 1440px) {
    .container,
    .kmv-container {
        max-width: 1360px;
    }
}
@media (min-width: 1700px) {
    .container,
    .kmv-container {
        max-width: 1480px;
    }
    /* Section vertical rhythm at higher widths */
    .kmv-hero { padding-top: clamp(80px, 8vw, 140px); padding-bottom: clamp(60px, 6vw, 110px); }
    .kmv-section { padding: clamp(72px, 7vw, 120px) 0; }
}
@media (min-width: 1900px) {
    .container,
    .kmv-container {
        max-width: 1560px;
    }
}