/* Content Styles untuk Deskripsi Produk, Jasa, dan Toko */
/* Mengatasi reset CSS dari Tailwind */

.content-description {
    /* Reset untuk memastikan styling yang konsisten */
    line-height: 1.6;
    color: #374151;
}

/* Typography */
.content-description h1,
.content-description h2,
.content-description h3,
.content-description h4,
.content-description h5,
.content-description h6 {
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    color: #111827;
}

.content-description h1 {
    font-size: 1.875rem; /* 30px */
    margin-top: 0;
}

.content-description h2 {
    font-size: 1.5rem; /* 24px */
}

.content-description h3 {
    font-size: 1.25rem; /* 20px */
}

.content-description h4 {
    font-size: 1.125rem; /* 18px */
}

.content-description h5 {
    font-size: 1rem; /* 16px */
}

.content-description h6 {
    font-size: 0.875rem; /* 14px */
}

/* Paragraphs */
.content-description p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #374151;
}

.content-description p:last-child {
    margin-bottom: 0;
}

/* Lists */
.content-description ul,
.content-description ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: #374151;
}

.content-description ul {
    list-style-type: disc;
}

.content-description ol {
    list-style-type: decimal;
}

.content-description li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.content-description ul ul,
.content-description ol ol,
.content-description ul ol,
.content-description ol ul {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.content-description ul ul {
    list-style-type: circle;
}

.content-description ul ul ul {
    list-style-type: square;
}

/* Links */
.content-description a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.content-description a:hover {
    color: #1d4ed8;
}

/* Emphasis */
.content-description strong,
.content-description b {
    font-weight: 600;
    color: #111827;
}

.content-description em,
.content-description i {
    font-style: italic;
}

/* Code */
.content-description code {
    background-color: #f3f4f6;
    color: #dc2626;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.875em;
}

.content-description pre {
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
}

.content-description pre code {
    background-color: transparent;
    padding: 0;
    color: #374151;
}

/* Blockquotes */
.content-description blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #6b7280;
    font-style: italic;
}

/* Horizontal Rules */
.content-description hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

/* Tables */
.content-description table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.content-description th,
.content-description td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.content-description th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #111827;
}

.content-description tr:last-child td {
    border-bottom: none;
}

.content-description tr:nth-child(even) {
    background-color: #f9fafb;
}

/* Images */
.content-description img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Small text */
.content-description small {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Mark/highlight */
.content-description mark {
    background-color: #fef3c7;
    color: #92400e;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* Del/strike */
.content-description del {
    text-decoration: line-through;
    color: #9ca3af;
}

/* Subscript and Superscript */
.content-description sub,
.content-description sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.content-description sup {
    top: -0.5em;
}

.content-description sub {
    bottom: -0.25em;
}

/* Definition Lists */
.content-description dl {
    margin-bottom: 1rem;
}

.content-description dt {
    font-weight: 600;
    color: #111827;
    margin-top: 1rem;
}

.content-description dd {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: #374151;
}

/* Address */
.content-description address {
    font-style: italic;
    color: #6b7280;
}

/* Keyboard */
.content-description kbd {
    background-color: #f3f4f6;
    border: 1px solid #404040;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.875em;
    color: #374151;
}

/* Sample */
.content-description samp {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    color: #dc2626;
}

/* Variable */
.content-description var {
    font-style: italic;
    color: #7c3aed;
}

/* Time */
.content-description time {
    color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-description {
        font-size: 0.875rem;
    }

    .content-description h1 {
        font-size: 1.5rem;
    }

    .content-description h2 {
        font-size: 1.25rem;
    }

    .content-description h3 {
        font-size: 1.125rem;
    }

    .content-description table {
        font-size: 0.875rem;
    }

    .content-description th,
    .content-description td {
        padding: 0.5rem;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .content-description {
        color: #404040;
    }

    .content-description h1,
    .content-description h2,
    .content-description h3,
    .content-description h4,
    .content-description h5,
    .content-description h6 {
        color: #f9fafb;
    }

    .content-description p,
    .content-description li,
    .content-description ul,
    .content-description ol {
        color: #404040;
    }

    .content-description code {
        background-color: #374151;
        color: #fbbf24;
    }

    .content-description pre {
        background-color: #374151;
        border-color: #4b5563;
    }

    .content-description pre code {
        color: #404040;
    }

    .content-description blockquote {
        color: #9ca3af;
        border-left-color: #60a5fa;
    }

    .content-description hr {
        border-top-color: #4b5563;
    }

    .content-description table {
        border-color: #4b5563;
    }

    .content-description th,
    .content-description td {
        border-bottom-color: #4b5563;
    }

    .content-description th {
        background-color: #374151;
        color: #f9fafb;
    }

    .content-description tr:nth-child(even) {
        background-color: #374151;
    }
}