/* ============================================================
   LYKA LABS FAQ ACCORDION - FIGMA EXACT DESIGN SPECIFICATIONS
   ============================================================ */

.lyka-faq-wrapper {
    width: 100%;
    max-width: 1780px;
    margin: 0 auto !important; /* Set margins to 0 auto to flush with layout */
    padding: 0 !important;     /* Remove padding from the main wrapper */
    font-family: 'Sora', sans-serif;
    box-sizing: border-box;
}

.lyka-faq-wrapper * {
    box-sizing: border-box;
}

/* Accordion Container */
.lyka-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
}

/* FAQ Item Base (Normal / Collapsed) */
.lyka-accordion-item {
    background: transparent;
    border-bottom: 1px solid #1E1D19 !important;
    border-bottom-color: rgba(30, 29, 25, 0.1) !important; /* opacity: 0.1; background: #1E1D19 */
    transition: background 0.4s ease, border-radius 0.4s ease;
    position: relative;
}

/* Remove bottom border on the last FAQ item */
.lyka-accordion-item:last-child {
    border-bottom: none !important;
}

/* Collapsed Header Padding (Normal) */
.lyka-accordion-header {
    display: grid !important;
    grid-template-columns: 1fr 60px !important; /* Title on left, toggle circle (60px) on right */
    grid-template-areas: 
        "title toggle"
        "shortdesc shortdesc" !important;
    gap: 16px 0 !important; /* 16px vertical gap, 0 horizontal gap */
    padding: 40px 0 !important; /* Exactly 40px top and bottom padding, 0 left/right */
    cursor: pointer;
    outline: none !important;
    user-select: none;
    box-shadow: none !important;
    width: 100%;
}

/* Disable all focus outlines across all interactive elements inside the accordion wrapper */
.lyka-faq-wrapper *:focus,
.lyka-faq-wrapper *:focus-visible,
.lyka-faq-wrapper *:active {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

/* Title Column */
.lyka-header-title {
    grid-area: title;
    width: 85% !important; /* Title takes 85% width of the header row */
    flex-shrink: 0;
}

/* Title Typography (STIX Two Text) */
.lyka-header-title h3 {
    font-family: "STIX Two Text", Georgia, serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 34px */
    color: #072970 !important;
    margin: 0;
}

/* Short Description Column (stacked below title, spanning 100%) */
.lyka-header-short-desc {
    grid-area: shortdesc;
    width: 100% !important; /* Short description spans 100% full width */
    flex-shrink: 0;
    margin-right: 0 !important;
}

/* Short Description Typography (Sora) */
.lyka-header-short-desc p {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    color: #1E1D19;
    opacity: 0.8;
    margin: 0;
    width: 100%;
}

/* Toggle Circle Button */
.lyka-header-toggle {
    grid-area: toggle;
    width: 60px !important;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.lyka-toggle-circle {
    display: flex;
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid rgba(30, 29, 25, 0.10) !important;
    background: #FFF !important;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

/* Toggle Image Icons */
.lyka-toggle-circle img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Force standard white background and grey border on hover to eliminate highlights */
.lyka-toggle-circle:hover,
.lyka-accordion-header:hover .lyka-toggle-circle,
.lyka-accordion-item.active .lyka-toggle-circle:hover,
.lyka-accordion-item.active .lyka-accordion-header:hover .lyka-toggle-circle {
    border: 1px solid rgba(30, 29, 25, 0.10) !important;
    background: #FFF !important;
    box-shadow: none !important;
}

/* Show/Hide Icons depending on state */
.lyka-icon-active {
    display: none !important;
}

.lyka-icon-closed {
    display: block !important;
}

.lyka-accordion-item.active .lyka-icon-active {
    display: block !important;
}

.lyka-accordion-item.active .lyka-icon-closed {
    display: none !important;
}

/* Active FAQ Item Card Styling */
.lyka-accordion-item.active {
    display: flex;
    padding: 32px !important; /* Exactly 32px padding inside the active card */
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important; /* Gap set to 0, spacing explicitly controlled by margins */
    align-self: stretch;
    border-radius: 14px;
    background: #F7F7F7;
    border-bottom: none !important; /* Hide native border-bottom when active */
    
    /* 40px transparent margin above/below active card */
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* First active card doesn't need top margins, last active card doesn't need bottom margins */
.lyka-accordion-item:first-child.active {
    margin-top: 0px !important;
}

.lyka-accordion-item:last-child.active {
    margin-bottom: 0px !important;
}

/* Draw a border-top on the item immediately following the active item */
.lyka-accordion-item.active + .lyka-accordion-item {
    border-top: 1px solid rgba(30, 29, 25, 0.1) !important;
}

/* Header inside Active Card */
.lyka-accordion-item.active .lyka-accordion-header {
    padding: 0 !important; /* Spacing controlled by parent and active divider */
    width: 100%;
}

.lyka-accordion-item.active .lyka-header-title {
    width: 85% !important; /* Matches closed title column width of 85% */
}

/* Active Divider Line between Header and Body */
.lyka-active-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: #1E1D19;
    opacity: 0.1;
    margin-top: 32px !important; /* Exactly 32px margin above the divider */
    margin-bottom: 32px !important; /* Exactly 32px margin below the divider */
}

/* Accordion Body Transition Panel */
.lyka-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
}

/* Body Content Columns Alignment (aligns perfectly with active header columns) */
.lyka-body-content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0;
}

.lyka-body-left {
    width: 693px !important; /* Matches active title width */
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Image Element Style */
.lyka-division-image {
    width: 366px;
    height: 292px;
    object-fit: contain;
    display: block;
}

.lyka-body-right {
    width: 746px !important; /* Matches short description width */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Description Content Styling */
.lyka-full-description {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    color: #1E1D19;
    width: 100%;
}

/* Heading / Title Line before bullets (Our portfolio spans) */
.lyka-full-description p {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #1E1D19;
    margin: 0 0 16px 0 !important; /* Exactly 16px margin bottom before bullets */
}

/* Custom SVG Bullet Points List */
.lyka-full-description ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 16px 0 20px 0 !important; /* Exactly 16px margin top above points, 20px margin bottom after bullet points */
    display: flex;
    flex-direction: column;
    gap: 12px !important; /* Exactly 12px vertical gap between list items */
}

.lyka-full-description li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    padding-left: 13px !important; /* 5px icon + 8px gap = 13px */
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #1E1D19;
}

/* Custom SVG Bullet Loader (forces custom home SVG icon without circular clips) */
.lyka-full-description li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important; /* Vertically centered to 18px font (1.2 line height) */
    width: 5px !important;
    height: 5px !important;
    background-image: url('/wp-content/uploads/2026/06/icon-home.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Last description paragraph (With specialized capabilities) */
.lyka-full-description p:last-child {
    margin: 0 !important;
    opacity: 0.8 !important; /* Opacity 0.8 as requested */
}

/* ============================================================
   RESPONSIVE DESIGN (Safe limits fallback)
   ============================================================ */

/* Screens below 1780px - Convert fixed widths to percentage columns for body content */
@media (max-width: 1780px) {
    .lyka-faq-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;  /* Remove horizontal padding */
        padding-right: 0 !important;
    }
    
    .lyka-body-content {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
    }
    
    .lyka-body-left {
        width: 42% !important;
        flex-shrink: 1 !important;
    }
    
    .lyka-body-right {
        width: 52% !important;
        flex-shrink: 1 !important;
    }
    
    .lyka-division-image {
        max-width: 100%;
        height: auto;
    }
}

/* Large Laptop Screens (max-width: 1440px) */
@media (max-width: 1440px) {
    /* Adjust grid column for 50px toggle circle */
    .lyka-accordion-header,
    .lyka-accordion-item.active .lyka-accordion-header {
        grid-template-columns: 1fr 50px !important;
    }

    /* Shrink toggle circle size from 60px to 50px */
    .lyka-header-toggle {
        width: 50px !important;
        height: 50px !important;
    }
    .lyka-toggle-circle {
        width: 50px !important;
        height: 50px !important;
    }
    .lyka-toggle-circle img {
        width: 32px !important;
        height: 32px !important;
    }

    /* Font Size: 17px for descriptions/short description (1440px to 1025px) */
    .lyka-header-short-desc p,
    .lyka-full-description,
    .lyka-full-description p,
    .lyka-full-description li {
        font-size: 17px !important;
    }
}

/* Laptop Screens (max-width: 1280px) */
@media (max-width: 1280px) {
    /* Font Size: 30px for title (1280px to 1025px) */
    .lyka-header-title h3 {
        font-size: 30px !important;
    }

    /* Font Size: 16px for descriptions/short description (from 1280px down) */
    .lyka-header-short-desc p,
    .lyka-full-description,
    .lyka-full-description p,
    .lyka-full-description li {
        font-size: 16px !important;
    }
}

/* Tablet Screens (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Font Size: 28px for title (1024px to 992px) */
    .lyka-header-title h3 {
        font-size: 28px !important;
    }
}

/* Tablet Screens (max-width: 990px) */
@media (max-width: 990px) {
    /* Font Size: 14px for descriptions/short description (below 991px) */
    .lyka-header-short-desc p,
    .lyka-full-description,
    .lyka-full-description p,
    .lyka-full-description li {
        font-size: 14px !important;
    }
}

/* Tablet Screens (max-width: 991px) */
@media (max-width: 991px) {
    /* Font Size: 26px for title (991px to 768px) */
    .lyka-header-title h3 {
        font-size: 26px !important;
    }
}

/* Tablet/Mobile View (max-width: 820px) */
@media (max-width: 820px) {
    .lyka-body-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .lyka-body-left {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .lyka-body-right {
        width: 100% !important;
    }
    
    .lyka-division-image {
        max-width: 260px;
        height: auto;
    }
}

/* Mobile Screens (max-width: 768px) */
@media (max-width: 768px) {
    /* Font Size: 22px for title (below 768px) */
    .lyka-header-title h3 {
        font-size: 22px !important;
    }

    /* Shrink toggle circle size to 40px and icon to 24px (below 768px) */
    .lyka-header-toggle {
        width: 40px !important;
        height: 40px !important;
    }
    .lyka-toggle-circle {
        width: 40px !important;
        height: 40px !important;
    }
    .lyka-toggle-circle img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Adjust grid column for 40px toggle circle */
    .lyka-accordion-header,
    .lyka-accordion-item.active .lyka-accordion-header {
        grid-template-columns: 1fr 40px !important;
    }
}

/* Small Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
    .lyka-faq-wrapper {
        padding-left: 0 !important;  /* Remove horizontal padding */
        padding-right: 0 !important;
    }
    
    .lyka-accordion-item.active {
        padding: 20px !important;
    }
    
    .lyka-division-image {
        max-width: 200px;
    }
}