/**
 * BD Contact Centre v1.3.0
 *
 * MOBILE-FIRST approach:
 *   Panels live inline in the nav DOM (after their trigger button).
 *   - MOBILE:  panels show/hide inline = form appears under its question
 *   - DESKTOP: panels are hidden in-nav; JS mirrors content into .bdcc-panels-desktop
 */

/* ─── Custom properties ─── */
.bdcc-contact-centre {
    --bdcc-accent: #3d6b4f;
    --bdcc-accent-hover: #2e5340;
    --bdcc-accent-light: #eaf3ee;
    --bdcc-border: #e0e0e0;
    --bdcc-bg-nav: #f8f8f8;
    --bdcc-bg-panel: #ffffff;
    --bdcc-bg-cat-active: #3d6b4f;
    --bdcc-text: #333333;
    --bdcc-text-muted: #666666;
    --bdcc-text-on-accent: #ffffff;
    --bdcc-radius: 4px;

    font-family: inherit;
    color: var(--bdcc-text);
    max-width: 1200px;
    margin: 0 auto;
}

.bdcc-contact-centre *,
.bdcc-contact-centre *::before,
.bdcc-contact-centre *::after {
    box-sizing: border-box;
}

/* ─── Header ─── */
.bdcc-header {
    margin-bottom: 1.5rem;
}

.bdcc-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.bdcc-subheading {
    font-size: 0.95rem;
    color: var(--bdcc-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.bdcc-layout {
    border: 1px solid var(--bdcc-border);
    border-radius: var(--bdcc-radius);
    overflow: hidden;
}

/* ─── Nav column ─── */
.bdcc-nav {
    background: var(--bdcc-bg-nav);
}

/* ─── Desktop panel column ─── */
.bdcc-panels-desktop {
    display: none; /* hidden on mobile, shown via media query */
    background: var(--bdcc-bg-panel);
    overflow-y: auto;
}

.bdcc-panels-desktop__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--bdcc-text-muted);
    text-align: center;
    padding: 2rem;
}

/* ═══════════════════════════════════════════════
   CATEGORY ACCORDION
   ═══════════════════════════════════════════════ */
.bdcc-category {
    border-bottom: 1px solid var(--bdcc-border);
}

.bdcc-category:last-child {
    border-bottom: none;
}

.bdcc-category__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--bdcc-text);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.bdcc-category__header:hover {
    background: #efefef;
}

.bdcc-category__header:focus-visible {
    outline: 2px solid var(--bdcc-accent);
    outline-offset: -2px;
    z-index: 1;
}

.bdcc-category.is-open > .bdcc-category__header {
    background: var(--bdcc-bg-cat-active);
    color: var(--bdcc-text-on-accent);
}

.bdcc-category__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdcc-category__label {
    flex: 1;
}

.bdcc-category__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

/* +/− : hide vertical stroke when open */
.bdcc-category.is-open .bdcc-toggle-v {
    display: none;
}

.bdcc-category__body {
    overflow: hidden;
}

.bdcc-category__body[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════
   SUB-ITEM BUTTONS
   ═══════════════════════════════════════════════ */
.bdcc-item-wrapper {
    border-bottom: 1px solid var(--bdcc-border);
}

.bdcc-item-wrapper:last-child {
    border-bottom: none;
}

.bdcc-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1.25rem 0.75rem 2rem;
    border: none;
    background: var(--bdcc-bg-panel);
    color: var(--bdcc-text);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bdcc-item:hover {
    background: var(--bdcc-accent-light);
    color: var(--bdcc-accent);
}

.bdcc-item:focus-visible {
    outline: 2px solid var(--bdcc-accent);
    outline-offset: -2px;
    z-index: 1;
}

.bdcc-item.is-active {
    background: var(--bdcc-accent-light);
    color: var(--bdcc-accent);
    font-weight: 600;
    border-left: 3px solid var(--bdcc-accent);
}

.bdcc-item__marker {
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.bdcc-item.is-active .bdcc-item__marker {
    opacity: 1;
    color: var(--bdcc-accent);
}

.bdcc-item__label {
    flex: 1;
}

/* ═══════════════════════════════════════════════
   INLINE PANELS (shared styles)
   ═══════════════════════════════════════════════ */
.bdcc-panel {
    padding: 1.5rem 1.25rem;
    background: var(--bdcc-bg-panel);
    display: none;
    animation: bdcc-fadeIn 0.2s ease;
}

.bdcc-panel.is-active {
    display: block;
}

@keyframes bdcc-fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bdcc-panel__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.bdcc-panel__intro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bdcc-text-muted);
    margin-bottom: 1.5rem;
}

.bdcc-panel__intro p:last-child {
    margin-bottom: 0;
}

.bdcc-panel__form {
    margin-top: 1rem;
}

.bdcc-panel__error {
    color: #b00;
    font-style: italic;
}

.bdcc-no-panels {
    padding: 2rem;
    text-align: center;
    color: var(--bdcc-text-muted);
}

/* ═══════════════════════════════════════════════
   MOBILE (default): single column, inline panels
   ═══════════════════════════════════════════════
   Panels show directly under their trigger button.
   The desktop right column is hidden.
*/
/* (This is the default state — no media query needed.) */


/* ═══════════════════════════════════════════════
   DESKTOP (769px+): two-column layout
   ═══════════════════════════════════════════════
   - Grid: left nav + right panel column
   - Inline panels in nav are HIDDEN (display:none !important)
   - JS mirrors active panel content into .bdcc-panels-desktop
*/
@media ( min-width: 769px ) {
    .bdcc-layout {
        display: grid;
        grid-template-columns: 380px 1fr;
        min-height: 500px;
    }

    .bdcc-nav {
        border-right: 1px solid var(--bdcc-border);
        overflow-y: auto;
    }

    /* Hide inline panels on desktop — content is mirrored to the right column */
    .bdcc-nav .bdcc-panel {
        display: none !important;
    }

    /* Show the desktop panel column */
    .bdcc-panels-desktop {
        display: block;
    }

    /* Panels rendered inside desktop column */
    .bdcc-panels-desktop .bdcc-panel {
        display: none;
        padding: 2rem 2.5rem;
    }

    .bdcc-panels-desktop .bdcc-panel.is-active {
        display: block;
    }

    .bdcc-panels-desktop .bdcc-panel__title {
        font-size: 1.25rem;
    }
}

/* ─── Print ─── */
@media print {
    .bdcc-panels-desktop {
        display: none !important;
    }

    .bdcc-layout {
        display: block !important;
    }

    .bdcc-nav .bdcc-panel {
        display: block !important;
        page-break-inside: avoid;
        border-top: 1px solid #ccc;
        padding: 1rem 0;
    }
}