/* =========================================
   Section: FAQ (Fixing the Clickable Area)
========================================= */
.faq .faq-title {
    font-size: calc(var(--huge-title) * 0.9);
    line-height: var(--huge-title-line-height);
}

/* 1. The Item Container: Put your borders here! */
.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden; /* Ensures nothing spills out */
}


/* 2. The Trigger: Make the hitbox THICK */
.faq-item .faq-trigger {
    padding: 24px 20px; /* 24px top/bottom makes a huge, easy-to-click area */
    background-color: #ffffff;
    transition: background-color 0.2s ease;
    /* This ensures the entire box area is clickable, not just the text */
    width: 100%; 
    box-sizing: border-box;
}

/* Optional: Subtle hover effect so users know the whole box is a button */
.faq-item .faq-trigger:hover {
    background-color: var(--border-color);
}

/* 3. The Heading: Kill the default margins! (This caused the "dead zones") */
.faq-item .faq-selector {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    flex: 1; /* Pushes the icon to the far right */
    padding-right: 24px; /* Prevents text from touching the icon on mobile */
}

/* 4. The Content: Style the inside */
.faq-item .faq-content {
    /* Notice we use 0 for the top padding, so it flows smoothly from the trigger */
    padding: 0px 24px 0px 24px; 
}

.faq-item .faq-answer {
    margin: 0;
    color: var(--primary-color-mid);
    padding-top: 15px;
    padding-bottom: 15px;
}

.faq-item[data-ui-state="open"] .faq-trigger{
    background-color: var(--border-color);
  }
  
/* 5. The Icon Animation */
.faq-item[data-ui-state="open"] .faq-icon {
    transform: rotate(180deg); /* Or 45deg if you want a + to turn into an x */
    transition: transform 0.3s ease;
}

.faq-item[data-ui-state="closed"] .faq-icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}


@media (min-width: 768px) {
    .faq .faq-title {
        font-size: var(--huge-title);
    }
}