/* ============================================
 * Ignis Lux Link - Main Stylesheet
 * Version: 1.2.1
 * Note: !important is used strategically to
 * prevent theme styles from overriding
 * the plugin's self-contained components.
 * ============================================ */

/* --- Root Variables --- */
:root {
    --color-background: #1a1a1a;
    --color-container-bg: #242424;
    --color-text-ivory: #f3f3f3;
    --color-accent-gold: #c5a47e;
    --color-border: #3a3a3a;
    --color-visited: #9e9e9e;
    --font-primary: 'Cormorant Garamond', serif;
    --font-secondary: 'Lato', sans-serif;
}


/* ============================================
 * Component 1: Dark Navigation Box
 * ============================================ */

.ignis-lux-link-container {
    width: 100% !important;
    max-width: 450px !important;
    background-color: var(--color-container-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    padding: 1.5rem 2rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    margin: 1.5em auto !important;
}

.ignis-lux-link-container h2 {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 1.75rem !important;
    text-align: center !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    color: var(--color-accent-gold) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    background: none !important;
}

.ignis-lux-link-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ignis-lux-link-container ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ignis-lux-link-container a {
    display: block !important;
    font-family: var(--font-primary) !important;
    color: var(--color-text-ivory) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.5rem !important;
    border: none !important;
    border-left: 3px solid var(--color-border) !important;
}

.ignis-lux-link-container a:hover,
.ignis-lux-link-container a:focus {
    background-color: rgba(197, 164, 126, 0.05) !important;
    color: var(--color-accent-gold) !important;
    outline: none !important;
    border-left: 3px solid var(--color-accent-gold) !important;
}

/* ============================================
 * Component 2: Related Articles Box
 * ============================================ */

.related-articles {
    background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%) !important;
    padding: 2.5rem 2rem !important;
    border: 1px solid #d4c5a9 !important;
    border-left: 4px solid #b8996f !important;
    border-radius: 2px !important;
    max-width: 720px !important;
    margin: 2rem auto !important;
}

.related-articles__title {
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', serif !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    color: #3d3228 !important;
    text-transform: uppercase !important;
    margin: 0 0 1.75rem 0 !important;
    padding: 0 0 0.875rem 0 !important;
    border: none !important;
    border-bottom: 1px solid #e8dcc8 !important;
    background: none !important;
}

.related-articles__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.related-articles__item {
    list-style: none !important;
    margin-bottom: 1rem !important;
    padding-left: 1.25rem !important;
    border: none !important;
    border-left: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
}

.related-articles__item:last-child {
    margin-bottom: 0 !important;
}

.related-articles__item:hover {
    border-left-color: #b8996f !important;
}

.related-articles__link {
    display: inline-block !important;
    font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #5a4632 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
}

.related-articles__link:hover {
    color: #8b6f47 !important;
}

.related-articles__link::before {
    content: '\25C6' !important; /* ← 文字をエスケープシーケンスに変更 */
    display: inline-block !important;
    margin-right: 0.75rem !important;
    color: #c9b896 !important;
    font-size: 0.625rem !important;
    vertical-align: middle !important;
}

/* --- Dark Variant --- */
.related-articles--dark {
    background: linear-gradient(135deg, #2a2520 0%, #1f1b17 100%) !important;
    border-color: #5a4632 !important;
    border-left-color: #b8996f !important;
}
.related-articles--dark .related-articles__title {
    color: #f5f2ed !important;
    border-bottom-color: #4a3d2f !important;
}
.related-articles--dark .related-articles__link {
    color: #e8dcc8 !important;
}
.related-articles--dark .related-articles__link:hover {
    color: #f5f2ed !important;
}
.related-articles--dark .related-articles__link::before {
    color: #8b6f47 !important;
}

/* --- Compact Variant --- */
.related-articles--compact {
    padding: 1.5rem 1.25rem !important;
    border-left-width: 3px !important;
}
.related-articles--compact .related-articles__title {
    font-size: 1.125rem !important;
    margin-bottom: 1.25rem !important;
}
.related-articles--compact .related-articles__link {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}
.related-articles--compact .related-articles__item {
    margin-bottom: 0.75rem !important;
    padding-left: 1rem !important;
}