/**
 * FAQ Manager - Frontend Styles
 * Version: 1.1.0
 * 
 * Använder CSS Custom Properties för full anpassning
 */

/* ==========================================================================
   CSS Custom Properties (defaults)
   ========================================================================== */
.advisory-faq-wrapper {
    /* Typography */
    --advisory-faq-question-size: 17px;
    --advisory-faq-question-weight: 600;
    --advisory-faq-answer-size: 16px;
    --advisory-faq-answer-line-height: 1.7;
    
    /* Spacing */
    --advisory-faq-border-radius: 8px;
    --advisory-faq-question-border-radius: 8px;
    --advisory-faq-item-spacing: 12px;
    
    /* Padding */
    --advisory-faq-question-padding-y: 20px;
    --advisory-faq-question-padding-x: 24px;
    --advisory-faq-answer-padding-top: 0px;
    --advisory-faq-answer-padding-bottom: 20px;
    --advisory-faq-answer-padding-x: 24px;
    
    /* Colors - Light theme defaults */
    --advisory-faq-bg: #ffffff;
    --advisory-faq-question-bg: #f9fafb;
    --advisory-faq-question-color: #1f2937;
    --advisory-faq-question-hover-bg: #f3f4f6;
    --advisory-faq-answer-bg: #ffffff;
    --advisory-faq-answer-color: #4b5563;
    --advisory-faq-border-color: #e5e7eb;
    
    /* Animation */
    --advisory-faq-transition: 0.3s ease;
}

/* ==========================================================================
   Main Container
   ========================================================================== */
.advisory-faq-wrapper {
    max-width: 100%;
    margin: 0 auto;
    font-family: inherit;
}

.advisory-faq-wrapper *,
.advisory-faq-wrapper *::before,
.advisory-faq-wrapper *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   FAQ Items Container
   ========================================================================== */
.advisory-faq-items {
    display: flex;
    flex-direction: column;
    gap: var(--advisory-faq-item-spacing);
    background: var(--advisory-faq-bg);
    border-radius: var(--advisory-faq-border-radius);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Transparent bakgrund */
.advisory-faq-wrapper.advisory-faq-transparent-bg .advisory-faq-items {
    background: transparent;
}

/* ==========================================================================
   FAQ Item
   ========================================================================== */
.advisory-faq-item {
    border: 1px solid var(--advisory-faq-border-color);
    border-radius: var(--advisory-faq-question-border-radius);
    overflow: hidden;
    background: var(--advisory-faq-answer-bg);
    transition: box-shadow var(--advisory-faq-transition);
}

/* Transparent item bakgrund */
.advisory-faq-wrapper.advisory-faq-transparent-item .advisory-faq-item {
    background: transparent;
}

/* Ingen border */
.advisory-faq-wrapper.advisory-faq-no-border-top .advisory-faq-item {
    border-top: none;
}

.advisory-faq-wrapper.advisory-faq-no-border-right .advisory-faq-item {
    border-right: none;
}

.advisory-faq-wrapper.advisory-faq-no-border-bottom .advisory-faq-item {
    border-bottom: none;
}

.advisory-faq-wrapper.advisory-faq-no-border-left .advisory-faq-item {
    border-left: none;
}

/* Bara border-bottom (separator-stil) - tar bort hörnradie */
.advisory-faq-wrapper.advisory-faq-no-border-top.advisory-faq-no-border-right.advisory-faq-no-border-left .advisory-faq-item {
    border-radius: 0;
}

.advisory-faq-wrapper.advisory-faq-no-border-top.advisory-faq-no-border-right.advisory-faq-no-border-left .advisory-faq-question {
    border-radius: 0;
}

/* Ta bort hover-skugga för separator-stil */
.advisory-faq-wrapper.advisory-faq-no-border-top.advisory-faq-no-border-right.advisory-faq-no-border-left .advisory-faq-item:hover {
    box-shadow: none;
}

/* Ta bort border-bottom på sista frågan (för renare separator-stil) */
.advisory-faq-wrapper.advisory-faq-no-last-border .advisory-faq-item:last-child {
    border-bottom: none;
}

.advisory-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Question Button
   ========================================================================== */
.advisory-faq-question {
    width: 100%;
    padding: var(--advisory-faq-question-padding-y) var(--advisory-faq-question-padding-x);
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: var(--advisory-faq-question-size);
    font-weight: var(--advisory-faq-question-weight);
    line-height: 1.4;
    background: var(--advisory-faq-question-bg);
    color: var(--advisory-faq-question-color);
    transition: all var(--advisory-faq-transition);
    font-family: inherit;
    border-radius: 0;
}

/* Transparent frågebakgrund */
.advisory-faq-wrapper.advisory-faq-transparent-question .advisory-faq-question {
    background: transparent;
}

/* Hover state */
.advisory-faq-question:hover {
    background: var(--advisory-faq-question-hover-bg);
}

/* Transparent hover */
.advisory-faq-wrapper.advisory-faq-transparent-hover .advisory-faq-question:hover {
    background: transparent;
}

/* Focus state - WCAG 2.1 AA */
.advisory-faq-question:focus {
    outline: 2px solid var(--advisory-faq-question-color);
    outline-offset: -2px;
}

.advisory-faq-question:focus:not(:focus-visible) {
    outline: none;
}

.advisory-faq-question:focus-visible {
    outline: 2px solid var(--advisory-faq-question-color);
    outline-offset: -2px;
}

/* Active/expanded state */
.advisory-faq-item.is-open .advisory-faq-question {
    background: var(--advisory-faq-question-hover-bg);
}

.advisory-faq-wrapper.advisory-faq-transparent-hover .advisory-faq-item.is-open .advisory-faq-question {
    background: transparent;
}

/* ==========================================================================
   Question Text
   ========================================================================== */
.advisory-faq-question-text {
    flex: 1;
}

/* ==========================================================================
   Icon
   ========================================================================== */
.advisory-faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform var(--advisory-faq-transition);
}

/* Chevron icon (default) */
.advisory-faq-icon-chevron .advisory-faq-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform var(--advisory-faq-transition);
}

.advisory-faq-icon-chevron .advisory-faq-item.is-open .advisory-faq-icon::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

/* Plus/Minus icon */
.advisory-faq-icon-plus .advisory-faq-icon::before,
.advisory-faq-icon-plus .advisory-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transition: transform var(--advisory-faq-transition), opacity var(--advisory-faq-transition);
}

.advisory-faq-icon-plus .advisory-faq-icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.advisory-faq-icon-plus .advisory-faq-icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.advisory-faq-icon-plus .advisory-faq-item.is-open .advisory-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* ==========================================================================
   Answer
   ========================================================================== */
.advisory-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--advisory-faq-transition);
}

.advisory-faq-answer-content {
    padding: var(--advisory-faq-answer-padding-top) var(--advisory-faq-answer-padding-x) var(--advisory-faq-answer-padding-bottom);
    font-size: var(--advisory-faq-answer-size);
    line-height: var(--advisory-faq-answer-line-height);
    color: var(--advisory-faq-answer-color);
    background: var(--advisory-faq-answer-bg);
}

/* Transparent svarsbakgrund */
.advisory-faq-wrapper.advisory-faq-transparent-answer .advisory-faq-answer-content {
    background: transparent;
}

.advisory-faq-answer-content p:first-child {
    margin-top: 0;
}

.advisory-faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Links in answers */
.advisory-faq-answer-content a {
    color: inherit;
    text-decoration: underline;
}

.advisory-faq-answer-content a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Theme: Dark
   ========================================================================== */
.advisory-faq-theme-dark {
    --advisory-faq-bg: #1f2937;
    --advisory-faq-question-bg: #374151;
    --advisory-faq-question-color: #f9fafb;
    --advisory-faq-question-hover-bg: #4b5563;
    --advisory-faq-answer-bg: #1f2937;
    --advisory-faq-answer-color: #d1d5db;
    --advisory-faq-border-color: #4b5563;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .advisory-faq-wrapper {
        --advisory-faq-transition: 0s;
    }
    
    .advisory-faq-answer {
        transition: none;
    }
    
    .advisory-faq-icon,
    .advisory-faq-icon::before,
    .advisory-faq-icon::after {
        transition: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .advisory-faq-wrapper {
        --advisory-faq-question-size: 15px;
        --advisory-faq-answer-size: 14px;
        --advisory-faq-question-padding-y: 16px;
        --advisory-faq-question-padding-x: 20px;
        --advisory-faq-answer-padding-bottom: 16px;
        --advisory-faq-answer-padding-x: 20px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .advisory-faq-answer {
        max-height: none !important;
        display: block !important;
    }
    
    .advisory-faq-answer[hidden] {
        display: block !important;
    }
    
    .advisory-faq-icon {
        display: none;
    }
    
    .advisory-faq-item {
        break-inside: avoid;
    }
}