/**
 * KU Tabs — Front-end tab navigation styles.
 *
 * Profile tab row: static colours.
 * World tab colours are applied via per-World group meta (Stage 6).
 *
 * @package KU_Tabs
 * @since   1.0.7
 */

/* ── Main tab card wrapper ────────────────────────────────────────────────── */

/* NOTE: the background-color below (#FAFAFA) is only the default. A Host can
 * override it per World with the "Also use this color for the World menu bar
 * background" checkbox on their Design Settings panel. When that's checked,
 * the real color comes from a small inline <style> block printed in PHP -
 * see output_group_style_inline() in knownuni/classes/design/
 * class-ku-design-card.php - not from this file. Added 2026-08-14. */
.ku-tabs-nav-card {
    background-color: #FAFAFA;
    border: 1px solid #122B46;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 10px 0;
}

/* ── Tab row container ────────────────────────────────────────────────────── */

.ku-tabs-nav {
    position: relative;
    margin: 0;
    padding: 0;
}

/* ── Tab list — single row, no wrap ──────────────────────────────────────── */

.ku-tabs-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* ── Hidden tabs (overflow — managed by ku-tabs-front.js) ────────────────── */

.ku-tab--hidden {
    display: none !important;
}

/* ── Individual tab link ──────────────────────────────────────────────────── */
/* !important on color and text-decoration prevents theme/BB link styles
   from overriding the tab colours. */

.ku-tab a,
.ku-tab a:visited {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 7px;
    border: 1px solid #122B46;
    background-color: #f3f4f6;
    color: #122B46 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ── Profile tab — active / default ──────────────────────────────────────── */

.ku-profile-tabs .ku-tab--active a,
.ku-profile-tabs .ku-tab--active a:visited {
    background-color: #122B46;
    color: #ffffff !important;
    border-color: #122B46;
    font-weight: 600;
}

/* ── Profile tab — hover (inactive tabs only) ─────────────────────────────── */

.ku-profile-tabs .ku-tab:not(.ku-tab--active) a:hover {
    background-color: #ffffff;
    color: #DD9933 !important;
    border-color: #DD9933;
    text-decoration: none !important;
}

/* ── Overflow "..." wrapper ───────────────────────────────────────────────── */

.ku-tabs-overflow-wrap {
    position: relative;
    flex-shrink: 0;
}

/* ── Overflow "..." button — matches inactive tab colours ─────────────────── */

.ku-tabs-overflow-btn {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid #122B46 !important;
    background-color: #d1d5db !important;
    color: #122B46 !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none !important;
}

.ku-tabs-overflow-btn:hover {
    background-color: #ffffff !important;
    color: #DD9933 !important;
    border-color: #DD9933 !important;
}

/* ── Overflow dropdown ────────────────────────────────────────────────────── */

.ku-tabs-overflow-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 160px;
    z-index: 200;
}

.ku-tabs-overflow-dropdown.is-open {
    display: block;
}

.ku-tabs-overflow-dropdown li a,
.ku-tabs-overflow-dropdown li a:visited {
    display: block;
    padding: 7px 12px;
    color: #122B46 !important;
    font-size: 12px;
    text-decoration: none !important;
    white-space: nowrap;
}

.ku-tabs-overflow-dropdown li a:hover {
    background-color: #f3f4f6;
    color: #DD9933 !important;
}

.ku-tabs-overflow-dropdown li a.ku-tab--active {
    font-weight: 600;
    color: #122B46 !important;
}

/* ── Content area heading ─────────────────────────────────────────────────── */

.ku-tab-heading {
    margin: 0 0 16px 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #122B46;
}

/* ── World tab — active ───────────────────────────────────────────────────── */

.ku-world-tabs .ku-tab--active a,
.ku-world-tabs .ku-tab--active a:visited {
    background-color: #122B46;
    color: #ffffff !important;
    border-color: #122B46;
    font-weight: 600;
}

/* ── World tab — hover (inactive tabs only) ───────────────────────────────── */

.ku-world-tabs .ku-tab:not(.ku-tab--active) a:hover {
    background-color: #ffffff;
    color: #DD9933 !important;
    border-color: #DD9933;
    text-decoration: none !important;
}

/* ── Sub-tab card wrapper ─────────────────────────────────────────────────── */

.ku-subtabs-container {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Sub-tab row — card header strip ─────────────────────────────────────── */

.ku-subtabs-nav {
    margin: 0;
    padding: 10px 14px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Sub-tab list — single row, no wrap ──────────────────────────────────── */

.ku-subtabs-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Individual sub-tab link ──────────────────────────────────────────────── */

.ku-subtab a,
.ku-subtab a:visited {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 7px;
    border: 1px solid #6b7280;
    background-color: #f3f4f6;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ── Sub-tab — active ─────────────────────────────────────────────────────── */

.ku-subtab--active a,
.ku-subtab--active a:visited {
    background-color: #374151;
    color: #ffffff !important;
    border-color: #374151;
    font-weight: 600;
}

/* ── Sub-tab — hover (inactive only) ─────────────────────────────────────── */

.ku-subtab:not(.ku-subtab--active) a:hover {
    background-color: #ffffff;
    color: #DD9933 !important;
    border-color: #DD9933;
    text-decoration: none !important;
}

/* ── Tab banner — help content strip ─────────────────────────────────────── */

.ku-tab-banner {
    padding: 12px 14px 5px 14px;
    background-color: #DFC3A438;
    color: #122B46;
    font-size: 15px;
    line-height: 1.5;
}

.ku-tab-banner a {
    font-size: inherit !important;
}

.ku-tab-banner:empty {
    display: none;
}

/* ── Sub-tab hidden (overflow) ────────────────────────────────────────────── */

.ku-subtab--hidden {
    display: none !important;
}

/* ── Sub-tab overflow "..." wrapper ──────────────────────────────────────── */

.ku-subtabs-overflow-wrap {
    position: relative;
    flex-shrink: 0;
}

/* ── Sub-tab overflow "..." button ───────────────────────────────────────── */

.ku-subtabs-overflow-btn {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 7px;
    border: 1px solid #6b7280;
    background-color: #f3f4f6;
    color: #374151;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none !important;
}

.ku-subtabs-overflow-btn:hover {
    background-color: #ffffff;
    color: #DD9933;
    border-color: #DD9933;
}

/* ── Sub-tab overflow dropdown ────────────────────────────────────────────── */

.ku-subtabs-overflow-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 160px;
    z-index: 200;
}

.ku-subtabs-overflow-dropdown.is-open {
    display: block;
}

.ku-subtabs-overflow-dropdown li a,
.ku-subtabs-overflow-dropdown li a:visited {
    display: block;
    padding: 7px 12px;
    color: #374151 !important;
    font-size: 12px;
    text-decoration: none !important;
    white-space: nowrap;
}

.ku-subtabs-overflow-dropdown li a:hover {
    background-color: #f3f4f6;
    color: #DD9933 !important;
}

.ku-subtabs-overflow-dropdown li a.ku-subtab--active {
    font-weight: 600;
    color: #374151 !important;
}

/* ── Follow avatar grid ───────────────────────────────────────────────────── */

.ku-follow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}

.ku-follow-grid a {
    display: block;
    line-height: 0;
    text-decoration: none !important;
}

.ku-follow-grid img {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    object-fit: cover;
    transition: opacity 0.15s ease;
}

.ku-follow-grid a:hover img {
    opacity: 0.8;
}

/* ── Follow empty state ───────────────────────────────────────────────────── */

.ku-follow-empty {
    padding: 24px 16px;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/* ── Follow pagination ────────────────────────────────────────────────────── */

.ku-follow-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
}

.ku-follow-pagination a,
.ku-follow-pagination a:visited {
    color: #122B46 !important;
    font-weight: 500;
    text-decoration: none !important;
}

.ku-follow-pagination a:hover {
    color: #DD9933 !important;
}




/* ── Settings page member header (ku-settings-header)
   ─────────────────────────────────────────────────────────────────────────────
   On settings pages BB hard-codes a condition that suppresses the cover banner
   and member header. The ku-tabs plugin outputs its own simplified header block
   (div#cover-image-container.ku-settings-header) inside #item-body to replace
   it. These rules align that block visually with the normal profile header.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hide the empty #item-header wrapper BB still renders on settings pages —
   it contains only the hidden remove-connection popup, so nothing visible
   is lost. This cleanly removes the gap above our header block. */
body.settings #item-header {
    display: none !important;
}

/* Remove any top padding BB applies to the profile grid on settings pages. */
body.settings .bb-profile-grid {
    padding-top: 0 !important;
}

/* Add 20px below our header block to match the breathing room between the
   cover header and content that exists on other profile tabs. */
.ku-settings-header {
    margin-bottom: 20px;
}

/* Online status dot — size and position matched to BB's .single-headers
   .member-status computed values (inspected from the Profile page).
   top: 14px  = distance from the top edge of the avatar container.
   right: 25px = distance from the right edge of the avatar container.
   bottom/left are cleared so BB's own defaults don't interfere.
   width/height: 15px matches BB's rendered dot size on Profile pages. */
.ku-settings-header .member-status {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    top: 14px !important;
    left: auto !important;
    bottom: auto !important;
    right: 25px !important;
}

/* Meta row — mention name, join date, and active status in brand gold. */
.ku-settings-header .item-meta,
.ku-settings-header .item-meta .mention-name,
.ku-settings-header .item-meta .separator,
.ku-settings-header .item-meta .activity {
    color: #DD9933;
}

/* Gap between the member name / role-pill row and the @mention line.
   Increase this value to add more breathing room below the name. */
.ku-settings-header .member-title-wrap {
    margin-bottom: 4px;
}

/* Gap between the @mention / join-date / active line and the Followers row.
   Increase this value to push the Followers row further down. */
.ku-settings-header .item-meta {
    margin-bottom: 12px;
    margin-top: 2px;
}

/* Keep the Followers and Following rows flush — no extra gap below them. */
.ku-settings-header .followers-wrap,
.ku-settings-header .following-wrap {
    margin-bottom: 0;
}

/* Member type badge (e.g. "Administrator") — BB's CSS for this class is
   scoped to #item-header, which doesn't exist on Account pages. We must
   re-declare the styles here using BB's own CSS variables so the pill matches
   the Profile page exactly.
   Values sourced from DevTools computed styles on the Profile page:
     padding        5px top/bottom, 15px left/right
     background     var(--bb-label-background-color)
     color          var(--bb-label-text-color)
     border-radius  var(--bb-label-type-radius)
     font-size      11px  |  font-weight 700  |  letter-spacing 0.25px */
.ku-settings-header .bp-member-type {
    display: inline-block;
    padding: 5px 15px;
    background-color: var(--bb-label-background-color);
    color: var(--bb-label-text-color);
    border-radius: var(--bb-label-type-radius);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.25px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Menu label — sits above the tab row card ────────────────────────────────
   A dark chip that labels the nav section. Output in PHP as a <span> immediately
   before the <nav>. JS wraps the nav into .ku-tabs-nav-card after page load,
   making this label a DOM sibling directly preceding the card. The + selector
   removes the card's top-left radius so the two elements sit flush with no gap.
   ─────────────────────────────────────────────────────────────────────────── */
/* NOTE: background-color and color below (#122B46 / #ffffff) are only the
 * defaults. A Host can override them per World with the "Also use this
 * color for the World Home tab" checkbox on their Design Settings panel.
 * When that's checked, the real colors come from a small inline <style>
 * block printed in PHP - see output_group_style_inline() in
 * knownuni/classes/design/class-ku-design-card.php - not from this file.
 * Added 2026-08-14. */
.ku-menu-label {
    display: inline-block;
    background-color: #122B46;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9px 9px 0 0;
    line-height: 1.4;
}

.ku-menu-label + .ku-tabs-nav-card {
    border-top-left-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — TAB ROW AND SUB-TAB ROW
   ───────────────────────────────────────────────────────────────────────────
   Added 07-06-2026. Neither the main tab row (Profile / World tabs) nor the
   sub-tab row (e.g. the Account sub-tab under Profile) had any phone-specific
   rules before this - both rely on the "..." overflow button (ku-tabs-front.js)
   to hide tabs that don't fit, but with no room saved on a narrow screen,
   fewer tabs fit before overflow kicks in than necessary. Padding is trimmed
   here; the overflow "..." mechanism itself is unchanged. Left/right padding
   is never taken below 2px per side.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

	/* Main tab row (Profile tabs, World tabs) */
	.ku-tab a,
	.ku-tab a:visited {
		padding: 4px 8px;
	}

	.ku-tabs-overflow-btn {
		padding: 4px 6px;
	}

	/* Sub-tab row (e.g. Account, and any other tab's configured sub-tabs) */
	.ku-subtab a,
	.ku-subtab a:visited {
		padding: 3px 7px;
	}

	.ku-subtabs-overflow-btn {
		padding: 3px 6px;
	}
}

/* ── World tab hover tooltip — desktop only ───────────────────────────────
   Pure CSS, no JS. Text comes from the data-ku-tooltip attribute (set in
   PHP from the Tab Settings "Tooltip Text" field on the World Tab CPT).
   Gated to (hover: hover) and (pointer: fine) — true for mouse/trackpad,
   false on touch — so phones/tablets render exactly as they do today.
   ─────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {

    .ku-tab--has-tooltip {
        position: relative;
    }

    .ku-tab--has-tooltip::after {
        content: attr(data-ku-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 100%;
        box-sizing: border-box;
        max-width: 320px;
        white-space: normal;
        text-align: center;
        background-color: #f3f4f6;
        color: #122B46;
        border: 1px solid #122B46;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
        padding: 6px 10px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 210;
    }

    .ku-tab--has-tooltip::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 3px);
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #f3f4f6;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 210;
    }

    .ku-tab--has-tooltip:hover::after,
    .ku-tab--has-tooltip:hover::before {
        opacity: 1;
        visibility: visible;
    }
}