/**
 * CIPIT Custom Tabs: styles.
 *
 * Built on the CipitNexus design tokens (--c-*, --radius*, --fs-*). Flat: no shadows,
 * with fallbacks so the tabs still render sensibly under another theme.
 * Written panels also carry the theme's `.prose` class for article typography.
 *
 * Strict child scoping (>) keeps each instance's rules out of nested instances.
 */

.custom-tabs-container {
    --ct-brand: var(--c-brand, #C4161C);
    --ct-brand-tint: var(--c-brand-tint, #fbeeee);
    --ct-ink: var(--c-ink, #1b1d22);
    --ct-body: var(--c-body, #373a41);
    --ct-muted: var(--c-muted, #62666e);
    --ct-line: var(--c-line, #e6e4e0);
    --ct-soft: var(--c-soft, #f6f4f1);
    --ct-paper: var(--c-paper, #fff);
    --ct-radius: var(--radius, 12px);
    --ct-radius-sm: var(--radius-sm, 8px);
    --ct-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));

    width: 100%;
    margin: 0 auto;
}

.hidden {
    display: none !important;
}

/* ---------- Notices ---------- */

.custom-tabs-recursion-warning,
.custom-tabs-empty-notice {
    max-width: 640px;
    margin: 2rem auto;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-sm, .875rem);
    font-weight: 500;
    text-align: center;
}

.custom-tabs-recursion-warning {
    background: var(--c-warning-bg, #fdf3e2);
    color: var(--c-warning, #8a5300);
}

.custom-tabs-empty-notice {
    border: 1px dashed var(--c-line, #e6e4e0);
    color: var(--c-muted, #62666e);
}

/* ---------- Section header: intro + search ---------- */

.custom-tabs-header-wrap {
    display: grid;
    /* Search gets a fixed-width column sitting on the intro's last line, so a
       long intro doesn't leave it floating mid-block or stretched across the gap. */
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    align-items: end;
    gap: var(--space-3, 1rem) var(--space-5, 2.618rem);
    margin: 0 0 var(--space-5, 2.618rem);
    padding-bottom: var(--space-4, 1.618rem);
    border-bottom: 1px solid var(--c-line, #e6e4e0);
}

.custom-tabs-heading {
    min-width: 0;
}

.custom-tabs-title {
    margin: 0 0 .5rem;
    color: var(--c-ink, #1b1d22);
    font-family: Arial, sans-serif;
    font-size: var(--fs-2xl, 1.618rem);
    line-height: var(--lh-heading, 1.236);
}

.custom-tabs-intro {
    max-width: 64ch;
    margin: 0;
    color: var(--c-muted, #62666e);
    font-size: var(--fs-lead, 1.0625rem);
    line-height: var(--lh-body, 1.618);
}

.custom-tabs-search-bar-wrap {
    width: 100%;
}

/* Same look as the theme's .search-bar (and the events search): icon, field, Search button */
.search-inner-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .35rem .35rem .35rem 2.75rem;
    background: var(--c-paper, #fff);
    border: 1px solid var(--c-line, #e6e4e0);
    border-radius: var(--radius-pill, 999px);
    cursor: text;
    transition: border-color .2s;
}

.search-inner-bar:focus-within {
    border-color: var(--c-ink, #1b1d22);
}

.search-inner-bar__icon {
    position: absolute;
    left: 1.1rem;
    width: 18px;
    height: 18px;
    color: var(--c-muted, #62666e);
    pointer-events: none;
}

.custom-tabs-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--c-ink, #1b1d22);
    font: inherit;
    font-size: var(--fs-base, 1rem);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.custom-tabs-search-input::placeholder {
    color: var(--c-muted, #62666e);
}

.custom-tabs-search-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding-inline: 1.1rem;
}

/* ---------- Tab list: shared resets ---------- */

.custom-tabs-container > .tab-headers-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-tabs-container > .tab-headers-list > .tab-header-item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-tabs-container > .tab-headers-list .custom-tabs-header {
    text-decoration: none;
    cursor: pointer;
}

.custom-tabs-container .custom-tabs-header:focus-visible {
    outline: 3px solid var(--ct-brand);
    outline-offset: 2px;
}

/* Chevron on parent items */
.custom-tabs-container > .tab-headers-list > .tab-header-item.has-submenu > .parent-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.custom-tabs-container > .tab-headers-list > .tab-header-item.has-submenu > .parent-toggle .submenu-arrow {
    flex: none;
    width: .45rem;
    height: .45rem;
    margin-top: -.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .6;
    transform: rotate(45deg);
    transition: transform .25s var(--ct-ease);
}

.custom-tabs-container > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .parent-toggle .submenu-arrow {
    margin-top: .2rem;
    transform: rotate(-135deg);
}

.custom-tabs-container > .tab-headers-list .tab-submenu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-tabs-container > .tab-headers-list .tab-submenu-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Line bars (layout-top / layout-bottom, and every layout on phones) ----------
   Left-aligned on a hairline, the current tab marked in brand red: the same
   language as the sidebar rail. */

.custom-tabs-container.layout-top > .tab-headers-list,
.custom-tabs-container.layout-bottom > .tab-headers-list {
    flex-wrap: wrap;
    gap: 0 .25rem;
    margin-bottom: var(--space-4, 1.618rem);
    border-bottom: 1px solid var(--ct-line);
}

.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item > .custom-tabs-header,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item > .custom-tabs-header {
    display: inline-flex;
    align-items: center;
    margin-bottom: -1px;
    padding: .6rem .9rem;
    border-bottom: 2px solid transparent;
    color: var(--ct-body);
    font-size: var(--fs-md, .9375rem);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    transition: border-color .2s, color .2s;
}

.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item > .custom-tabs-header:hover,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item > .custom-tabs-header:hover,
.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .custom-tabs-header,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .custom-tabs-header {
    border-color: var(--ct-line);
    color: var(--ct-ink);
}

.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item > .custom-tabs-header.tab-active,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item > .custom-tabs-header.tab-active,
.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item.is-active > .custom-tabs-header,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.is-active > .custom-tabs-header {
    border-color: var(--ct-brand);
    color: var(--ct-brand);
    font-weight: 600;
}

/* The first tab starts flush at the content edge, so its label lines up with the text below. */
.custom-tabs-container.tabs-flush.layout-top > .tab-headers-list > .tab-header-item:first-child > .custom-tabs-header,
.custom-tabs-container.tabs-flush.layout-bottom > .tab-headers-list > .tab-header-item:first-child > .custom-tabs-header {
    padding-left: 0;
}

.custom-tabs-container.layout-bottom {
    display: flex;
    flex-direction: column;
}

.custom-tabs-container.layout-bottom > .tab-contents-wrap {
    order: 1;
}

/* Below the content the line sits on top. */
.custom-tabs-container.layout-bottom > .tab-headers-list {
    order: 2;
    margin: var(--space-4, 1.618rem) 0 0;
    border-top: 1px solid var(--ct-line);
    border-bottom: 0;
}

.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item > .custom-tabs-header {
    margin: -1px 0 0;
    border-top: 2px solid transparent;
    border-bottom: 0;
}

/* Dropdown submenus (line bars) */
.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 50;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, 85vw);
    max-height: none !important; /* the script sets max-height for the sidebar accordion */
    padding: .4rem;
    background: var(--ct-paper);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s var(--ct-ease), visibility .2s;
}

.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list {
    top: auto;
    bottom: calc(100% + .35rem);
}

.custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .tab-submenu-list,
.custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .tab-submenu-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.custom-tabs-container.layout-top > .tab-headers-list .tab-submenu-item > .custom-tabs-header,
.custom-tabs-container.layout-bottom > .tab-headers-list .tab-submenu-item > .custom-tabs-header {
    display: block;
    padding: .55rem .8rem;
    border-radius: var(--ct-radius-sm);
    color: var(--ct-ink);
    font-size: var(--fs-sm, .875rem);
    line-height: 1.35;
}

.custom-tabs-container.layout-top > .tab-headers-list .tab-submenu-item > .custom-tabs-header:hover,
.custom-tabs-container.layout-bottom > .tab-headers-list .tab-submenu-item > .custom-tabs-header:hover {
    background: var(--ct-soft);
}

.custom-tabs-container.layout-top > .tab-headers-list .tab-submenu-item > .custom-tabs-header.tab-active,
.custom-tabs-container.layout-bottom > .tab-headers-list .tab-submenu-item > .custom-tabs-header.tab-active {
    background: var(--ct-brand-tint);
    color: var(--ct-brand);
    font-weight: 600;
}

/* ---------- Sidebar layouts (layout-left / layout-right) ----------
   A quiet section nav on a hairline rail; the current item is marked in brand red. */

/* Without JS: the theme header sits below the WP admin bar when logged in. */
.admin-bar {
    --ct-sticky-top: calc(var(--header-h, 76px) + var(--wp-admin--admin-bar--height, 32px));
}

@media (min-width: 769px) {
    .custom-tabs-container.layout-left,
    .custom-tabs-container.layout-right {
        display: grid;
        /* φ² : 1, the same main-to-sidebar split as the event pages */
        grid-template-columns: var(--split-sidebar-rev, minmax(0, 1fr) minmax(0, 2.618fr));
        gap: clamp(var(--space-4, 1.618rem), 1rem + 3vw, var(--space-5, 2.618rem));
        align-items: start;
    }

    .custom-tabs-container.layout-right {
        grid-template-columns: var(--split-sidebar, minmax(0, 2.618fr) minmax(0, 1fr));
    }

    .custom-tabs-container.layout-right > .tab-headers-list {
        order: 2;
    }

    .custom-tabs-container.layout-left > .tab-headers-list,
    .custom-tabs-container.layout-right > .tab-headers-list {
        /* --ct-sticky-top is the sticky header's real bottom edge, measured
           by custom-tabs.js; the fallback covers the theme header height. */
        position: sticky;
        top: calc(var(--ct-sticky-top, var(--header-h, 76px)) + 1.5rem);
        flex-direction: column;
        gap: .15rem;
        max-height: calc(100vh - var(--ct-sticky-top, var(--header-h, 76px)) - 3rem);
        overflow-y: auto;
        border-left: 1px solid var(--ct-line);
        scrollbar-width: thin;
    }

    .custom-tabs-container.layout-right > .tab-headers-list {
        border-right: 1px solid var(--ct-line);
        border-left: 0;
        text-align: right;
    }

    .custom-tabs-container.layout-left > .tab-headers-list .custom-tabs-header,
    .custom-tabs-container.layout-right > .tab-headers-list .custom-tabs-header {
        display: block;
        margin-left: -1px;
        padding: .55rem 1rem .55rem 1.1rem;
        border-left: 2px solid transparent;
        border-radius: 0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
        color: var(--ct-body);
        font-size: var(--fs-md, .9375rem);
        line-height: 1.4;
        transition: color .2s, background-color .2s, border-color .2s;
    }

    .custom-tabs-container.layout-right > .tab-headers-list .custom-tabs-header {
        margin-right: -1px;
        margin-left: 0;
        padding: .55rem 1.1rem .55rem 1rem;
        border-right: 2px solid transparent;
        border-left: 0;
        border-radius: var(--ct-radius-sm) 0 0 var(--ct-radius-sm);
    }

    .custom-tabs-container.layout-left > .tab-headers-list .custom-tabs-header:hover,
    .custom-tabs-container.layout-right > .tab-headers-list .custom-tabs-header:hover {
        background: var(--ct-soft);
        color: var(--ct-ink);
    }

    .custom-tabs-container.layout-left > .tab-headers-list .custom-tabs-header.tab-active,
    .custom-tabs-container.layout-right > .tab-headers-list .custom-tabs-header.tab-active {
        border-color: var(--ct-brand);
        background: var(--ct-brand-tint);
        color: var(--ct-brand);
        font-weight: 600;
    }

    /* Parent of the open section */
    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .parent-toggle,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .parent-toggle {
        color: var(--ct-ink);
        font-weight: 600;
    }

    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.has-submenu > .parent-toggle {
        flex-direction: row-reverse;
    }

    /* Accordion children: same rail, deeper indent, smaller type */
    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s var(--ct-ease);
    }

    .custom-tabs-container.layout-left > .tab-headers-list .tab-submenu-item > .custom-tabs-header {
        padding-left: 2rem;
        font-size: var(--fs-sm, .875rem);
    }

    .custom-tabs-container.layout-right > .tab-headers-list .tab-submenu-item > .custom-tabs-header {
        padding-right: 2rem;
        font-size: var(--fs-sm, .875rem);
    }
}

/* ---------- Panels ---------- */

.tab-contents-wrap {
    min-width: 0;
}

.tab-content-panel {
    min-width: 0;
    animation: ctdlFadeIn .35s var(--ease, ease-out);
}

.tab-content-panel:focus-visible {
    outline: 3px solid var(--c-brand, #C4161C);
    outline-offset: 6px;
    border-radius: 4px;
}

.tab-contents-wrap a {
    overflow-wrap: break-word;
}

/* Keep the theme's filled buttons legible inside panels. */
.tab-contents-wrap a.read-more-btn,
.tab-contents-wrap a.register-btn,
.tab-contents-wrap a.btn--primary {
    color: var(--c-on-dark, #fff);
}

.tab-content-panel img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 8px);
}

/* The first heading of a written panel reads as the panel's title. */
.tab-content-panel.prose > :first-child:where(h1, h2, h3, h4, h5, h6),
.tab-content-panel.prose > :first-child:where(h1, h2, h3, h4, h5, h6) * {
    color: var(--c-ink, #1b1d22) !important;
    font-family: Arial, sans-serif !important;
    font-size: var(--fs-xl, 1.272rem) !important;
    line-height: var(--lh-heading, 1.236);
}

.tab-content-panel.prose > :first-child:where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--space-4, 1.618rem);
    padding-bottom: var(--space-2, .618rem);
    border-bottom: 1px solid var(--c-line, #e6e4e0);
}

.tab-content-panel.prose p:empty {
    display: none;
}

/* Article list styling, but never on nested tab bars (they reset their own list). */
.tab-content-panel.prose :where(ul, ol):not(.tab-headers-list, .tab-submenu-list) {
    padding-left: 1.4rem;
}

.tab-content-panel.prose li:not(.tab-header-item, .tab-submenu-item) + li:not(.tab-header-item, .tab-submenu-item) {
    margin-top: .4em;
}

.tab-content-panel.prose li:not(.tab-header-item, .tab-submenu-item)::marker {
    color: var(--c-brand, #C4161C);
}

/* Content mode: the panel lays itself out (nested tabs, card grids). */
.content-mode-active > .tab-contents-wrap > .tab-content-panel,
.tab-content-panel.tab-content-mode-active {
    padding: 0;
    border: 0;
    background: none;
}

/* Per-tab "Disable content mode" override: a bordered card. */
.tab-content-panel.tab-content-mode-inactive {
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--c-line, #e6e4e0);
    border-radius: var(--radius, 12px);
    background: var(--c-paper, #fff);
}

.no-results-message {
    margin: 0;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--c-line, #e6e4e0);
    border-radius: var(--radius, 12px);
    color: var(--c-muted, #62666e);
    text-align: center;
}

@keyframes ctdlFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Phones: every layout becomes a line bar ---------- */

@media (max-width: 768px) {
    .custom-tabs-header-wrap {
        grid-template-columns: 1fr;
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .custom-tabs-container.layout-left,
    .custom-tabs-container.layout-right {
        display: block;
    }

    .custom-tabs-container.layout-left > .tab-headers-list,
    .custom-tabs-container.layout-right > .tab-headers-list {
        flex-wrap: wrap;
        gap: 0 .25rem;
        margin-bottom: 1.75rem;
        border-bottom: 1px solid var(--ct-line);
    }

    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item > .custom-tabs-header,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item > .custom-tabs-header {
        display: inline-flex;
        align-items: center;
        margin-bottom: -1px;
        padding: .6rem .8rem;
        border-bottom: 2px solid transparent;
        color: var(--ct-body);
        font-size: var(--fs-md, .9375rem);
        font-weight: 500;
        line-height: 1.3;
    }

    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item > .custom-tabs-header.tab-active,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item > .custom-tabs-header.tab-active,
    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item.is-active > .custom-tabs-header,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.is-active > .custom-tabs-header {
        border-color: var(--ct-brand);
        color: var(--ct-brand);
        font-weight: 600;
    }

    .custom-tabs-container.tabs-flush.layout-left > .tab-headers-list > .tab-header-item:first-child > .custom-tabs-header,
    .custom-tabs-container.tabs-flush.layout-right > .tab-headers-list > .tab-header-item:first-child > .custom-tabs-header {
        padding-left: 0;
    }

    /* Without dropdowns to clip, a bar scrolls sideways instead of wrapping. */
    .custom-tabs-container > .tab-headers-list:not(:has(.has-submenu)) {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .custom-tabs-container > .tab-headers-list:not(:has(.has-submenu))::-webkit-scrollbar {
        display: none;
    }

    .custom-tabs-container > .tab-headers-list:not(:has(.has-submenu)) > .tab-header-item {
        flex-shrink: 0;
    }

    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list {
        position: absolute;
        top: calc(100% + .5rem);
        left: 0;
        z-index: 50;
        width: max-content;
        min-width: 220px;
        max-width: 85vw;
        max-height: none !important;
        padding: .4rem;
        background: var(--ct-paper);
        border: 1px solid var(--ct-line);
        border-radius: var(--ct-radius);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s, visibility .2s;
    }

    .custom-tabs-container.layout-left > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .tab-submenu-list,
    .custom-tabs-container.layout-right > .tab-headers-list > .tab-header-item.has-submenu.is-expanded > .tab-submenu-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .custom-tabs-container.layout-left > .tab-headers-list .tab-submenu-item > .custom-tabs-header,
    .custom-tabs-container.layout-right > .tab-headers-list .tab-submenu-item > .custom-tabs-header {
        display: block;
        padding: .55rem .8rem;
        border-radius: var(--ct-radius-sm);
        color: var(--ct-ink);
        font-size: var(--fs-sm, .875rem);
        line-height: 1.35;
        white-space: normal;
    }

    .custom-tabs-container.layout-left > .tab-headers-list .tab-submenu-item > .custom-tabs-header.tab-active,
    .custom-tabs-container.layout-right > .tab-headers-list .tab-submenu-item > .custom-tabs-header.tab-active {
        background: var(--ct-brand-tint);
        color: var(--ct-brand);
        font-weight: 600;
    }

    /* Keep the top-bar dropdowns inside the screen on phones. */
    .custom-tabs-container.layout-top > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list,
    .custom-tabs-container.layout-bottom > .tab-headers-list > .tab-header-item.has-submenu > .tab-submenu-list {
        max-width: 85vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content-panel {
        animation: none;
    }

    .custom-tabs-container * {
        transition-duration: .01ms !important;
    }
}

/* tab-line="false": drop the hairline under the bar; the active tab keeps its brand underline. */
.custom-tabs-container.tabs-no-line > .tab-headers-list {
    border-bottom-color: transparent;
}