/* assets/css/legal.css
 * Spezifische Stile für die rechtlichen Seiten (AGB, Impressum, Datenschutz)
 * Abgestimmt auf den STYLEGUIDE.md von Mein Degu.
 */

/* 1. Mobile Accordions & Chevrons */
.legal-card header {
    transition: background-color 0.2s ease-in-out;
}

.legal-card header:hover {
    background-color: rgba(245, 245, 244, 0.5); /* stone-100/50 */
}

.dark .legal-card header:hover {
    background-color: rgba(41, 37, 36, 0.5); /* stone-800/50 */
}

@media (min-width: 769px) {
    .legal-card header:hover {
        background-color: transparent !important;
    }
}

/* Fluid transition for Chevron rotation */
.rotate-180 {
    transform: rotate(180deg);
}

/* 2. Typografie & Abstände (Kompakter Dashboard-Stil) */
.legal-content h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
}

.legal-content p {
    margin-bottom: 0.625rem;
    line-height: 1.5;
    font-size: 0.8125rem; /* 13px - extrem lesbar aber kompakt */
}

.legal-content ul, .legal-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.15rem;
}

.legal-content li {
    margin-bottom: 0.35rem;
    line-height: 1.45;
    font-size: 0.8125rem; /* 13px */
}

/* Karten-Innenabstände, Margins und permanente Trennlinien harmonisieren */
.legal-card.card {
    border-radius: 1rem !important;
}

.legal-card header {
    padding: 1.15rem 1.25rem !important; /* Großzügiges, elegantes Header-Padding */
    border-bottom: 1px solid rgba(229, 231, 235, 0.6) !important;
}
.dark .legal-card header {
    border-bottom-color: rgba(63, 63, 70, 0.6) !important;
}

.legal-card .p-6,
.legal-card .p-5,
.legal-card [x-show] > div.p-6,
.legal-card [x-show] > div.p-5,
.legal-card [x-show] > div.p-4 {
    padding: 1.25rem !important; /* Einheitliches Content-Padding auf Desktop */
}

@media (max-width: 640px) {
    .legal-card header {
        padding: 0.875rem 1rem !important; /* Kompakter auf Mobilgeräten */
    }
    .legal-card .p-6,
    .legal-card .p-5,
    .legal-card [x-show] > div.p-6,
    .legal-card [x-show] > div.p-5,
    .legal-card [x-show] > div.p-4 {
        padding: 1rem !important; /* Kompakter auf Mobilgeräten */
    }
}

/* 3. Rechtliche Alert-Boxen (gesetzliche Hinweise / Warnings - flach & kompakt) */
.legal-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

.legal-alert p {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.4;
    margin-bottom: 0 !important;
}

.legal-alert svg,
.legal-alert i {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

/* Warning alert (Gelb / Amber) */
.legal-alert-warning {
    background-color: #fef3c7; /* amber-100 */
    border-color: #f59e0b; /* amber-500 */
    color: #78350f; /* amber-900 */
}
.dark .legal-alert-warning {
    background-color: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fde68a;
}

/* Danger alert (Rot / Rose) */
.legal-alert-danger {
    background-color: #ffe4e6; /* rose-100 */
    border-color: #f43f5e; /* rose-500 */
    color: #4c0519; /* rose-950 */
}
.dark .legal-alert-danger {
    background-color: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.25);
    color: #fecdd3;
}

/* Info alert (Blau / Sky) */
.legal-alert-info {
    background-color: #e0f2fe; /* sky-100 */
    border-color: #0284c7; /* sky-600 */
    color: #0c4a6e; /* sky-900 */
}
.dark .legal-alert-info {
    background-color: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.25);
    color: #bae6fd;
}

/* Success alert (Grün / Emerald) */
.legal-alert-success {
    background-color: #d1fae5; /* emerald-100 */
    border-color: #10b981; /* emerald-500 */
    color: #064e3b; /* emerald-950 */
}
.dark .legal-alert-success {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #a7f3d0;
}

/* 3.1 Advanced Dashboard-style compacting overrides */
.legal-card h2 {
    font-size: 0.925rem !important; /* ~14.8px - Extrem kompakt und elegant */
    font-weight: 700 !important;
    margin: 0 !important;
}

.legal-card header svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
}

.legal-card header .text-xs {
    font-size: 0.725rem !important; /* Kleinerer Untertitel */
    margin-top: 0.075rem !important;
}

/* Reduktion von Abständen und Rändern in Unterboxen */
.legal-content .grid {
    gap: 0.75rem !important; /* Engerer Gitterabstand analog zum Dashboard */
}

.legal-content .rounded-xl,
.legal-content .rounded-2xl {
    border-radius: 0.625rem !important; /* Kompakte Ecken für Details */
}

/* 3.3 Feste, pixelgenaue Nummerierungs- und Icon-Boxen (Symmetriegarantie) */
.legal-number-box {
    width: 1.85rem !important; /* 29.6px - Absolut starr, wächst niemals dynamisch */
    height: 1.85rem !important; /* 29.6px */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    line-height: 1 !important;
    text-align: center !important;
}

.legal-icon-box {
    width: 2rem !important; /* 32px - Absolut starr */
    height: 2rem !important; /* 32px */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 0.5rem !important;
}

.legal-icon-box svg,
.legal-icon-box i {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

/* 3.2 Asymmetrisches horizontales Split-Layout für detaillierte Rechtsmodule */
.legal-split-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem !important;
}

@media (min-width: 768px) {
    .legal-split-card {
        flex-direction: row;
        gap: 1.5rem;
    }
    .legal-split-card-sidebar {
        width: 25%;
        flex-shrink: 0;
        border-right: 1px solid rgba(229, 231, 235, 0.5);
        padding-right: 1.25rem;
    }
    .dark .legal-split-card-sidebar {
        border-right-color: rgba(63, 63, 70, 0.4);
    }
    .legal-split-card-content {
        flex-grow: 1;
        width: 75%;
    }
}

/* 4. Druckoptimierung (Ausschließlich für den Druck relevante Stile) */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    header, footer, button, .md\:hidden, [role="button"] .text-stone-400 {
        display: none !important;
    }
    
    .legal-card {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin-bottom: 2rem !important;
        page-break-inside: avoid;
    }
    
    .legal-card div[x-show] {
        display: block !important;
    }
    
    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}