
/* =====================================================
   ROW 2 — Permanent Services category bar
   Same visual language as Row 1: plain links, animated
   underline on hover/active, single non-wrapping line.
   This <style> block is printed inside <body>, after the
   inline <head> styles AND after css/style.css, so it
   always wins the cascade with zero specificity fights.
   ===================================================== */

.sdes2-bar{
    width:100%;
    background:#f8fafc;
    border-top:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;
    position:relative;
    z-index:40;
}
.sdes2-bar-inner{
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 0 0;
}

/* Single-line row, same look as Row 1 links */
.sdes2-pillrow{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:1px;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
}
.sdes2-pillrow::-webkit-scrollbar{ display:none; }

.sdes2-pill{
    position:relative;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:10px 10px 0 0;
    border:0;
    background:transparent;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    color:#1e293b;
    white-space:nowrap;
    cursor:pointer;
    line-height:inherit;
    transition:color .16s ease,background .16s ease;
}
.sdes2-pill::after{
    content:"";
    position:absolute;left:12px;right:12px;bottom:0;height:2px;
    background:#ff8a00;border-radius:2px;
    transform:scaleX(0);transform-origin:center;
    transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.sdes2-pill:hover{ background:#fff7ed;color:#ff8a00; }
.sdes2-pill.sdes2-pill-active{ color:#ff8a00; }
.sdes2-pill:hover::after,
.sdes2-pill.sdes2-pill-active::after{ transform:scaleX(1); }

/* Flyout — positioned via JS (fixed, clamped to viewport),
   opens directly under the hovered item. Sized to show
   every link in full — no scrollbar, vertical or horizontal. */
.sdes2-flyout{
    display:none;
    position:fixed;
    background:#fff;
    border:1px solid #dbe4f0;
    border-radius:14px;
    box-shadow:0 20px 48px rgba(15,23,42,.18);
    padding:14px 18px 16px;
    z-index:9999;
    opacity:0;
    transform:translateY(6px) scale(.98);
    transition:opacity .18s ease,transform .18s ease;
}
.sdes2-flyout.sdes2-flyout-open{
    display:block;
    opacity:1;
    transform:translateY(0) scale(1);
}
.sdes2-flyout-1col{ width:280px; }
.sdes2-flyout-2col{ width:480px; }

.sdes2-flyout-head{
    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    color:#06254a;
    padding-bottom:10px;
    margin-bottom:8px;
    border-bottom:1px solid #eef2f7;
}
.sdes2-flyout-grid{
    display:grid;
    gap:3px 16px;
}
.sdes2-flyout-1col .sdes2-flyout-grid{ grid-template-columns:1fr; }
.sdes2-flyout-2col .sdes2-flyout-grid{ grid-template-columns:1fr 1fr; }

.sdes2-flyout-grid a{
    display:flex;
    align-items:flex-start;
    gap:6px;
    padding:6px 8px;
    border-radius:7px;
    font-size:12.5px;
    font-weight:600;
    line-height:1.35;
    color:#374151;
    white-space:normal;
    word-break:break-word;
    transition:background .14s ease,color .14s ease,padding-left .14s ease;
}
.sdes2-flyout-grid a::before{
    content:"";
    width:4px;height:4px;border-radius:50%;
    background:#cbd5e1;flex-shrink:0;
    margin-top:7px;
    transition:background .14s ease;
}
.sdes2-flyout-grid a:hover{ background:#fff7ed;color:#ea580c;padding-left:11px; }
.sdes2-flyout-grid a:hover::before{ background:#ff8a00; }

/* Dark mode — bar adapts, flyout stays white (matches existing
   convention used by the About Us / Industries dropdowns). */
html[data-theme="dark"] .sdes2-bar,
body[data-theme="dark"] .sdes2-bar{
    background:#0f1c33;
    border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .sdes2-pill,
body[data-theme="dark"] .sdes2-pill{ color:#dbeafe; }
html[data-theme="dark"] .sdes2-pill:hover,
html[data-theme="dark"] .sdes2-pill.sdes2-pill-active,
body[data-theme="dark"] .sdes2-pill:hover,
body[data-theme="dark"] .sdes2-pill.sdes2-pill-active{
    background:rgba(255,138,0,.14);
    color:#ff8a00;
}

/* Mobile-only "Browse Services" toggle — hidden on desktop,
   where the pill row already fits on one line. */
.sdes2-mobile-toggle{ display:none; }

/* MOBILE — collapsed by default (compact), no horizontal scroll.
   Tapping "Browse Services" reveals the categories as small
   wrapped chips instead of a one-line scroller. Flyouts expand
   inline below the pill row instead of floating via fixed
   positioning (which has no reliable top/left on touch, since
   positionFlyout() is skipped for touch devices). */
@media(max-width:1050px){
    .sdes2-bar{
        background:#f8fafc;
        border-top:1px solid rgba(15,23,42,.08);
        border-bottom:1px solid rgba(15,23,42,.08);
    }
    .sdes2-bar-inner{
        padding:0;
        flex-direction:column;
        align-items:stretch;
    }

    .sdes2-mobile-toggle{
        display:flex;align-items:center;justify-content:space-between;
        width:100%;padding:11px 2px;
        background:transparent;border:0;
        font-family:inherit;font-size:14px;font-weight:800;color:#1e293b;
        cursor:pointer;
        line-height:1.2;
        text-align:left;
    }
    .sdes2-mobile-toggle::after{
        content:"";width:9px;height:9px;flex-shrink:0;
        border-right:2px solid currentColor;border-bottom:2px solid currentColor;
        transform:rotate(45deg);transition:transform .18s ease;
    }
    .sdes2-bar.sdes2-bar-open .sdes2-mobile-toggle::after{ transform:rotate(-135deg); }

    .sdes2-pillrow{
        display:none !important;
        flex-wrap:wrap;
        overflow-x:visible;
        gap:6px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:12px;
        margin:2px 0 10px;
        padding:6px;
    }
    #sdes2Bar:not(.sdes2-bar-open) #sdes2PillRow,
    .sdes2-bar:not(.sdes2-bar-open) .sdes2-pillrow{ display:none !important; }
    #sdes2Bar.sdes2-bar-open #sdes2PillRow,
    .sdes2-bar.sdes2-bar-open .sdes2-pillrow{ display:flex !important; }
    #sdes2Bar:not(.sdes2-bar-open) .sdes2-flyout,
    .sdes2-bar:not(.sdes2-bar-open) .sdes2-flyout{ display:none !important; }

    .sdes2-pill{
        padding:7px 11px;font-size:12px;
        border-radius:8px;background:#eef2f7;
    }
    .sdes2-pill::after{ display:none; }
    .sdes2-pill:hover,
    .sdes2-pill.sdes2-pill-active{ background:#ffe9d2;color:#ea580c; }

    .sdes2-flyout{
        position:static !important;
        left:auto !important;right:auto !important;top:auto !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        border:0 !important;
        border-top:1px solid #eef2f7 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        max-height:60vh;
        overflow-y:auto;
    }
    .sdes2-flyout-2col .sdes2-flyout-grid{ grid-template-columns:1fr; }
}

/* Dark mode — mobile toggle + chips */
html[data-theme="dark"] .sdes2-mobile-toggle,
body[data-theme="dark"] .sdes2-mobile-toggle{ color:#dbeafe; }
html[data-theme="dark"] .sdes2-pill,
body[data-theme="dark"] .sdes2-pill{
    background:rgba(255,255,255,.07);
}
