/* Praktisk Info Page Specific Styles */
/* Scoped overrides to avoid conflicts when embedded */
.pi-scope .accordion-button { 
    background-color: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 1rem 0 !important; 
    font-weight: 600 !important; 
    color: #000 !important; 
    border-radius: 0 !important; 
    position: relative !important; 
    letter-spacing: 1px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
}

/* Desktop padding 8px per accordion */
@media (min-width: 992px) {
    .pi-scope .accordion-button {
        padding: 8px 0 !important;
    }
    .pi-scope .accordion-body {
        padding: 8px 0 !important;
    }
}
.pi-scope .accordion-button:not(.collapsed) { background-color: transparent !important; color: #bf6d4b !important; box-shadow: none !important; }
.pi-scope .accordion-button:focus { border-color: transparent !important; box-shadow: none !important; outline: none !important; }
.pi-scope .accordion-button::after { 
    transform: rotate(-90deg) !important; 
    margin-left: auto !important; 
    width: 1rem !important; 
    height: 1rem !important; 
    transition: transform 0.3s ease !important; 
    flex-shrink: 0 !important; 
    align-self: center !important; 
}
.pi-scope .accordion-button:not(.collapsed)::after { transform: rotate(0deg) !important; }
.pi-scope .accordion-item { border: none !important; border-bottom: 1px solid #bf6d4b !important; background-color: #fdf4ee !important; }
.pi-scope .accordion-body { padding: 1rem 0 !important; color: #333 !important; background-color: #fdf4ee !important; }
.pi-scope .praktisk-info-title { color: #fff !important; }
.pi-scope .praktisk-info-content { background-color:#fdf4ee !important; }

/* Page background */
body.praktisk-info-page {
    background-color: #fdf4ee !important;
}

/* Hide info icon on mobile in Praktisk Info sections */
@media (max-width: 991.98px) {
    .info-icon {
        display: none !important;
    }
}

/* Container background */
.praktisk-info-container {
    background-color: #fdf4ee;
    min-height: auto;
}

/* Ensure consistent row min-height across pages (home, meny, arrangementer) */
.praktiskinfo-home .row.g-0.align-items-stretch {
    min-height: 35vh !important; /* restored per request */
}

/* Desktop: remove top/left padding/margins for icon and title */
@media (min-width: 992px) {
  .info-icon,
  .info-icon-fallback {
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
  .praktisk-info-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* Accordion button styles - specific to praktisk info */
.accordion-button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.3rem 0 !important;
    font-weight: 600 !important;
    color: #000 !important;
    border-radius: 0 !important;
    position: relative !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Desktop: Reduce spacing between accordion items - VERY COMPACT */
@media (min-width: 992px) {
    .accordion-button {
        padding: 0.2rem 0 !important;
    }
    
    .accordion-item {
        margin-bottom: 2px !important;
    }
    
    .accordion-body {
        padding: 0.3rem 0 !important;
    }
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: #bf6d4b !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.accordion-button::after {
    transform: rotate(-90deg) !important;
    margin-left: auto !important;
    width: 1rem !important;
    height: 1rem !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg) !important;
}

.accordion-button:hover {
    background-color: transparent !important;
    color: #bf6d4b !important;
}

.accordion-button:hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bf6d4b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-item {
    border: none !important;
    border-bottom: 1px solid #bf6d4b !important;
    background-color: #fdf4ee !important;
    margin-bottom: 2px !important;
}

.accordion-item:last-child {
    border-bottom: none !important;
}

.pi-scope .accordion-header {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.pi-scope .accordion-button { 
    background-color: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 1rem 0 !important;
    font-weight: 600 !important; 
    color: #000 !important; 
    border-radius: 0 !important; 
    display: flex !important;
    align-items: center !important;
    letter-spacing: 1px !important; 
}

.accordion-body {
    padding: 1rem 0 !important;
    color: #333 !important;
    background-color: #fdf4ee !important;
}

/* Title section styling */
.praktisk-info-title {
    color: #fff;
    text-align: left;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0;  
    letter-spacing: 1px !important;
    margin-left: 15vh;
    margin-bottom: 15vh;

}

/* Mobile padding for title block */
@media (max-width: 991.98px){
  .pi-title-block{ padding-left: 20px !important; }
}

/* Info icon styling */
.info-icon {
    width: auto !important;
    height: auto !important;
    margin-bottom: 1.5rem;
    margin-left: 15vh;
    margin-top: 7vh;
    filter: brightness(0) invert(1); /* Makes the icon white */
    display: block;
    background-color: transparent;
    border: none;
}

/* Fallback icon styling */
.info-icon-fallback {
    width: auto !important;
    height: auto !important;
    margin-bottom: 1.5rem;
    margin-left: 15vh;
    margin-top: 7vh;
    font-size: 120px;
    line-height: 120px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: transparent;
    border: none;
}

/* Content section styling */
.praktisk-info-content {
    background-color: #fdf4ee;
    padding: 0;
}

/* Accordion container styling */
.accordion {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* List styling - restore bullets */
.accordion-body ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin-left: 0 !important;
}

.accordion-body li {
    margin-bottom: 8px !important;
    color: #333 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Stack and center title area */
    .pi-title-block{ padding-left: 20px !important; padding-right: 20px !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .praktisk-info-title { text-align: center; margin: 16px 0 !important; }
    .info-icon, .info-icon-fallback { margin-left: auto !important; margin-right: auto !important; margin-top: 16px !important; }
    /* Content small horizontal padding on mobile */
    .praktisk-info-content { padding: 0 16px !important; }
    /* Ensure accordion fits viewport width */
    .praktisk-info-title {
        font-size: 2rem;
        margin-left: 5vh;
        margin-bottom: 5vh;
    }
    
    .praktisk-info-content { padding: 0; }
    
    .info-icon {
        width: auto !important;
        height: auto !important;
        margin-left: 5vh;
        margin-top: 3vh;
    }
    
    .info-icon-fallback {
        width: auto !important;
        height: auto !important;
        margin-left: 5vh;
        margin-top: 3vh;
        font-size: 120px;
    }
    
    .accordion {
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    /* Relax row min-height set inline in templates */
    .praktisk-info-container .row { min-height: auto !important; }
    .praktisk-info-title {
        font-size: 1.5rem;
        margin-left: 3vh;
        margin-bottom: 3vh;
    }
    
    .praktisk-info-content { padding: 0; }
    
    .info-icon {
        width: auto !important;
        height: auto !important;
        margin-left: 3vh;
        margin-top: 2vh;
    }
    
    .info-icon-fallback {
        width: auto !important;
        height: auto !important;
        margin-left: 3vh;
        margin-top: 2vh;
        font-size: 100px;
    }
    
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.8rem 0 !important;
    }
    
    .accordion {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .praktisk-info-title {
        font-size: 1.25rem;
        margin-left: 2vh;
        margin-bottom: 2vh;
    }
    
    .praktisk-info-content { padding: 0; }
    
    .info-icon {
        width: auto !important;
        height: auto !important;
        margin-left: 2vh;
        margin-top: 1vh;
    }
    
    .info-icon-fallback {
        width: auto !important;
        height: auto !important;
        margin-left: 2vh;
        margin-top: 1vh;
        font-size: 80px;
    }
    
    .accordion-button {
        font-size: 0.8rem;
        padding: 0.6rem 0 !important;
    }
    
    .accordion-body {
        padding: 0.8rem 0 !important;
    }
}

/* Assicura che l'accordion-collapse si espanda correttamente */
.pi-scope .accordion-collapse {
    transition: height 0.35s ease !important;
}

/* Lista con bullets visibili */
.pi-scope .accordion-body ul {
    list-style-type: disc !important;
    padding-left: 24px !important;
    margin: 0 !important;
}

.pi-scope .accordion-body ul li {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

/* Rimuovi margini extra dall'ultimo elemento */
.pi-scope .accordion-body ul:last-child {
    margin-bottom: 0 !important;
}