/* ==========================================================================
   KS Top Header v1.4.0 - Frontend Styles
   Covers: Orchid Store .top-header AND standalone #ksth-standalone-wrapper
   v1.4.0: Added .ksth-contact block (phone + email) with flex order placement
   ========================================================================== */

/* --- Inner wrap - flex container - max-width set via inline CSS --- */
.top-header .ksth-inner-wrap,
.ksth-standalone-bar .ksth-inner-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

/* --- Spacer pushes content to sides --- */
.top-header .ksth-spacer,
.ksth-standalone-bar .ksth-spacer {
    flex: 1;
}

/* --- Nav links --- */
.top-header .ksth-nav-links,
.ksth-standalone-bar .ksth-nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.top-header .ksth-nav-links a,
.ksth-standalone-bar .ksth-nav-links a {
    text-decoration: none;
    white-space: nowrap;
    padding: 0 4px;
    transition: color 0.2s ease;
    font-weight: 400;
}

.top-header .ksth-nav-links a:hover,
.ksth-standalone-bar .ksth-nav-links a:hover {
    text-decoration: underline;
}

.top-header .ksth-nav-separator,
.ksth-standalone-bar .ksth-nav-separator {
    opacity: 0.4;
    padding: 0 6px;
    font-size: 0.85em;
    user-select: none;
}

/* --- Layout: left --- */
.top-header .ksth-inner-wrap.ksth-layout-left,
.ksth-standalone-bar .ksth-inner-wrap.ksth-layout-left { justify-content: flex-start; }
.ksth-layout-left .ksth-nav-links  { order: 1; }
.ksth-layout-left .ksth-spacer     { order: 2; }
.ksth-layout-left .ksth-contact    { order: 3; }
.ksth-layout-left .ksth-social-icons { order: 4; }

/* --- Layout: center --- */
.top-header .ksth-inner-wrap.ksth-layout-center,
.ksth-standalone-bar .ksth-inner-wrap.ksth-layout-center { justify-content: space-between; }
.ksth-layout-center .ksth-col-left  { flex: 1; }
.ksth-layout-center .ksth-nav-links { flex: 0; justify-content: center; }
.ksth-layout-center .ksth-col-right { flex: 1; display: flex; justify-content: flex-end; }

/* --- Layout: right --- */
.top-header .ksth-inner-wrap.ksth-layout-right,
.ksth-standalone-bar .ksth-inner-wrap.ksth-layout-right { justify-content: flex-start; }
.ksth-layout-right .ksth-spacer     { flex: 1; }
.ksth-layout-right .ksth-nav-links  { order: 2; margin-right: 16px; }
.ksth-layout-right .ksth-social-wrap { order: 3; }

/* --- Social icons wrapper --- */
.top-header .ksth-social-icons,
.ksth-standalone-bar .ksth-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Social icon link --- */
.top-header .ksth-social-icon,
.ksth-standalone-bar .ksth-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 0;
}

.top-header .ksth-social-icon:hover,
.ksth-standalone-bar .ksth-social-icon:hover {
    transform: translateY(-1px);
    opacity: 0.8;
}

/* --- SVG icon style --- */
.top-header .ksth-social-icon.ksth-icon-style-svg svg,
.ksth-standalone-bar .ksth-social-icon.ksth-icon-style-svg svg {
    display: block;
    fill: currentColor;
    flex-shrink: 0;
}

/* --- Boxicons style --- */
.top-header .ksth-social-icon i,
.ksth-standalone-bar .ksth-social-icon i {
    display: block;
    line-height: 1;
}

/* --- Contact block (v1.4.0) - phone + email --- */
.top-header .ksth-contact,
.ksth-standalone-bar .ksth-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}
.top-header .ksth-contact-item,
.ksth-standalone-bar .ksth-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.top-header .ksth-contact-item:hover,
.ksth-standalone-bar .ksth-contact-item:hover {
    text-decoration: underline;
    opacity: 0.85;
}
.top-header .ksth-contact-icon,
.ksth-standalone-bar .ksth-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.top-header .ksth-contact-icon svg,
.ksth-standalone-bar .ksth-contact-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}
.top-header .ksth-contact-text,
.ksth-standalone-bar .ksth-contact-text {
    display: inline-block;
}
.top-header .ksth-contact-separator,
.ksth-standalone-bar .ksth-contact-separator {
    opacity: 0.4;
    padding: 0 4px;
    font-size: 0.85em;
    user-select: none;
}

/* --- Standalone bar wrapper --- */
#ksth-standalone-wrapper {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.ksth-standalone-bar {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Override theme's default content inside .top-header when our hook fires */
.top-header .ksth-inner-wrap ~ .os-col {
    display: none !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #ksth-standalone-wrapper {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .top-header .ksth-nav-links,
    .ksth-standalone-bar .ksth-nav-links {
        display: none;
    }
    .top-header .ksth-inner-wrap,
    .ksth-standalone-bar .ksth-inner-wrap {
        justify-content: flex-end;
    }
    /* Contact: hide text labels on mobile, keep only icons */
    .top-header .ksth-contact-text,
    .ksth-standalone-bar .ksth-contact-text {
        display: none;
    }
    .top-header .ksth-contact-separator,
    .ksth-standalone-bar .ksth-contact-separator {
        display: none;
    }
    .top-header .ksth-contact,
    .ksth-standalone-bar .ksth-contact {
        gap: 12px;
        margin-right: 8px;
    }
}