/* styles/article-styles.css */

/*
  ASSUMPTIONS:
  - HTML: <main class="container page-container">
            <nav class="breadcrumbs-container">
              <ol class="breadcrumbs">...</ol>
            </nav>
            <article class="article-content">...</article>
          </main>
  - main.css provides global styles and CSS variables.
*/

/* --- BREADCRUMBS --- */
/* This outer container will span the width allowed by its parent (e.g., .page-container).
   It serves mainly as a block for vertical spacing. */
.breadcrumbs-container {
    margin-bottom: var(--space-lg);
    /* Add padding to match the article content */
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Ensure the ol.breadcrumbs has proper alignment */
ol.breadcrumbs {
    list-style: none;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-xxl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.breadcrumbs li:not(:last-child)::after {
    content: '>';
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs li[aria-current="page"] {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- MAIN ARTICLE CONTENT AREA --- */
.article-content {
    background-color: var(--color-card-bg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin: 0 0 var(--space-xl) 0; /* Takes width of parent .container, has bottom margin */
}

/* Inner sections that constrain text width */
.article-header,
.article-body,
.article-footer {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-xxl); /* This is the key padding the breadcrumbs should match */
    padding-right: var(--space-xxl);
}

/* --- ARTICLE HEADER (Inside .article-content) --- */
.article-header {
    margin-bottom: var(--space-xxl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xl);
}

.article-header h1 {
    font-size: 2.2rem;
    color: var(--color-accent-hover);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.article-meta-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.article-meta-info a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.article-meta-info a:hover {
    color: var(--color-accent);
}

.article-banner-image {
    width: 100%;
    max-height: 580px;
    object-fit: cover;
    object-position: center; /* Tries to keep the left side of the image visible */
    /* or object-position: 25% 50%; to be more specific */
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
    display: block;
    box-shadow: var(--shadow-sm);
}

/* --- ARTICLE BODY (Inside .article-content) --- */
.article-body {
    line-height: var(--line-height, 1.7);
}

.article-body .lead {
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: var(--space-xl);
    font-weight: 400;
    line-height: 1.75;
}

.article-body h2 {
    font-size: 1.8rem;
    color: var(--color-text);
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-accent);
}

.article-body h3 {
    font-size: 1.4rem;
    color: var(--color-text);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.article-body p {
    margin-bottom: var(--space-lg);
    color: var(--color-text);
}

.article-body ul,
.article-body ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-lg);
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body li {
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.article-body a {
    color: var(--color-accent);
    text-decoration: underline;
}
.article-body a:hover { color: var(--color-accent-hover); }
.article-body strong { font-weight: 600; }
.article-body em { font-style: italic; }

/* Accent Box */
.accent-box {
    background: var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    padding: var(--space-xl);
    margin: var(--space-xxl) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.accent-box h3 {
    font-size: 1.15rem;
    color: var(--color-accent-hover);
    margin-top: 0;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
}
.accent-box h3 .icon {
    margin-right: var(--space-sm);
    font-size: 1.3em;
    line-height: 1;
}
.accent-box p { margin-bottom: var(--space-sm); color: var(--color-text); }
.accent-box p:last-child { margin-bottom: 0; }

/* Article Images/Figures within body */
.article-image {
    margin: var(--space-xxl) auto;
    text-align: center;
}
.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.article-image figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-md);
    font-style: italic;
}

/* Tables */
.table-container {
    margin: var(--space-xxl) 0;
    overflow-x: auto;
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.article-body th,
.article-body td {
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    text-align: left;
    vertical-align: top;
}
.article-body th {
    background: var(--color-bg-light);
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border-focus);
}
.article-body td { color: var(--color-text-muted); }

/* Takeaways List */
.takeaways-list {
    list-style: none;
    padding-left: 0;
    margin-top: var(--space-md);
}
.takeaways-list li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}
.takeaways-list li::before {
    content: '✔';
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- ARTICLE FOOTER (Inside .article-content) --- */
.article-footer {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}
.related-articles h3 {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    font-weight: 600;
}
.related-articles ul { list-style: none; padding: 0; }
.related-articles li { margin-bottom: var(--space-xs); }
.related-articles li a {
    text-decoration: none;
    color: var(--color-accent);
    font-weight: 500;
}
.related-articles li a:hover {
    text-decoration: underline;
    color: var(--color-accent-hover);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: var(--bp-tablet)) { /* e.g., 900px */
    .breadcrumbs-container {
        /* No specific change needed here, ol.breadcrumbs will adjust */
    }
    ol.breadcrumbs {
        padding-left: var(--space-xl); /* Adjust padding for tablet if needed */
        padding-right: var(--space-xl);
        max-width: none; /* Allow breadcrumbs list to use more width on tablet */
    }

    .article-content {
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--radius-md);
    }
    .article-header,
    .article-body,
    .article-footer {
        max-width: none; /* Allow text to use more width on tablet */
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
    .article-header h1 { font-size: 2rem; }
    .article-body h2 { font-size: 1.7rem; }
}

@media (max-width: var(--bp-mobile)) { /* e.g., 600px */
    .breadcrumbs-container {
        /* No specific changes needed if ol.breadcrumbs handles its own centering and padding */
    }
    ol.breadcrumbs {
        padding-left: var(--space-lg); /* Match text column padding on mobile */
        padding-right: var(--space-lg);
    }
    .article-content {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
        margin: var(--space-md) var(--space-sm);
        border-radius: var(--radius-sm);
    }
    .article-header,
    .article-body,
    .article-footer {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
    .article-header h1 { font-size: 1.8rem; }
    .article-body .lead { font-size: 1.1rem; }
    .article-body h2 { font-size: 1.5rem; }
    .article-body h3 { font-size: 1.25rem; }
    .accent-box { padding: var(--space-lg); }
    .article-body th,
    .article-body td { padding: var(--space-md); }
}

.legal-disclaimer {
  background-color: #FFF9E6;
  border: 2px solid #FFA500;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}

.legal-disclaimer h3 {
  color: #D97706;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.legal-disclaimer .warning-icon {
  font-size: 1.2em;
}

.legal-disclaimer p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}