/* =============================================================================
   Henson Architecture - Team Member Accordion
   Converted from Tailwind/shadcn spec to plain CSS
   Uses strong specificity to override Elementor defaults
   ============================================================================= */

/* =============================================================================
   STYLE GUIDE NOTE: Team Accordion Buttons (Triggers)

   The accordion panel triggers (About, Awards, Presentations, etc.) are
   <button> elements with class: henson-accordion-trigger
     - Used by JS for open/close behavior
     - Styled via theme style.css alongside Elementor Nested Accordion

   Typography (font-size, font-weight, font-family, letter-spacing,
   text-transform, color) is controlled in theme style.css using:

     .e-n-accordion-item-title-text,
     .henson-accordion-trigger { ... }

   Targeting both classes together keeps the custom accordion triggers
   in sync with any Elementor Nested Accordion widgets across the site.
   Update typography in style.css only -- NOT here.

   Only layout and reset rules are defined below.
   ============================================================================= */

/* Keyframe for accordion open animation (200ms ease-out) */
@keyframes accordion-down {
    from {
        opacity: 0;
        transform: translateY( -4px );
    }
    to {
        opacity: 1;
        transform: translateY( 0 );
    }
}

/* =============================================================================
   Accordion Root -- w-full
   ============================================================================= */

.henson-accordion {
    width: 100%;
}

/* =============================================================================
   Accordion Item -- border-none
   Override any Elementor border or box styling
   ============================================================================= */

.henson-accordion .henson-accordion-item {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   Accordion Trigger
   text-lg font-light uppercase tracking-wider py-1.5 hover:no-underline
   Reset all Elementor button/tab styles first
   ============================================================================= */

.henson-accordion .henson-accordion-trigger {
    /* Reset Elementor overrides */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    cursor: pointer !important;

    /* Spacing -- py-1.5 = 6px */
    padding: 6px 0 0 0 !important;

    /* Transition */
    transition: color 200ms ease !important;

    /* Typography is controlled via .elementor-accordion .elementor-tab-title in theme style.css */
}

.henson-accordion .henson-accordion-trigger:hover,
.henson-accordion .henson-accordion-trigger:focus {
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =============================================================================
   Chevron Icon -- ChevronDown 16px, rotates 180deg on open
   ============================================================================= */

.henson-accordion .henson-accordion-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 200ms ease !important;
}

.henson-accordion .henson-accordion-item.is-open .henson-accordion-icon {
    transform: rotate( 180deg ) !important;
}

/* =============================================================================
   Accordion Content
   pt-2 (8px) pb-6 (24px) space-y-1 (4px gap)
   Hidden by default, animates open
   ============================================================================= */

.henson-accordion .henson-accordion-content {
    display: none;
    overflow: hidden;
}

.henson-accordion .henson-accordion-item.is-open .henson-accordion-content {
    display: block;
    animation: accordion-down 200ms ease-out forwards;
}

.henson-accordion .henson-accordion-content-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* =============================================================================
   Group Label (h3)
   Font controlled via Elementor -- only spacing set here
   ============================================================================= */

.henson-accordion .henson-tm-group-label,
.henson-accordion .henson-accordion-content-inner h4,
.henson-accordion .henson-tm-project-name {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

/* =============================================================================
   Group Wrapper -- pb-3 = 12px gap before next group
   ============================================================================= */

.henson-accordion .henson-tm-group {
    padding-bottom: 12px;
}

.henson-accordion .henson-tm-group:last-child {
    padding-bottom: 0;
}

/* =============================================================================
   Value Lines (li)
   ============================================================================= */

.henson-accordion .henson-tm-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.henson-accordion .henson-tm-item {
    font-size: 13px !important;
    line-height: 1.375 !important;
}

/* =============================================================================
   Inline Links -- blanket rule removes any theme/Elementor text-decoration
   ============================================================================= */

.henson-accordion *,
.henson-accordion *:hover,
.henson-accordion *:focus {
    text-decoration: none !important;
}

.henson-accordion .henson-accordion-content-inner a {
    text-transform: none !important;
    text-decoration: none !important;
    transition: color 200ms ease !important;
}

/* =============================================================================
   Responsive -- Tablet (1024px and below)
   ============================================================================= */

@media ( max-width: 1024px ) {

    .henson-accordion .henson-accordion-trigger,
    .e-n-accordion-item-title-text {
        font-size: 18px !important;
        padding: 8px 0 !important;
    }

    .henson-accordion .henson-tm-item,
    .henson-accordion .henson-tm-group-label,
    .henson-accordion .henson-accordion-content-inner h4,
    .henson-accordion .henson-tm-project-name {
        font-size: 13px !important;
    }
}

/* =============================================================================
   Responsive -- Mobile (767px and below)
   ============================================================================= */

@media ( max-width: 767px ) {

    .henson-accordion .henson-accordion-trigger {
        font-size: 18px !important;
        padding: 6px 0 0 0 !important;
        letter-spacing: 0.04em !important;
        min-height: 44px !important;
    }

    .e-n-accordion-item-title-text {
        font-size: 14px !important;
        padding: 10px 0 !important;
        letter-spacing: 0.04em !important;
        min-height: 44px !important;
    }

    .henson-accordion .henson-accordion-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .henson-accordion .henson-accordion-content-inner {
        padding: 6px 0 16px !important;
    }

    .henson-accordion .henson-tm-item,
    .henson-accordion .henson-tm-group-label,
    .henson-accordion .henson-accordion-content-inner h4,
    .henson-accordion .henson-tm-project-name {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .henson-accordion .henson-tm-group {
        padding-bottom: 10px;
    }
}