/* assets/css/article.css */

/* 1. CLEAN SLATE - NO MENU/HERO OVERRIDES */
/* We rely on index.css and leader.php for the header */

/* 2. PAGE LAYOUT */
.container.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  /* REMOVED 'align-items: start' - This allows the sidebar track to stretch */
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: white;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .container.grid {
    grid-template-columns: 2fr 1fr; 
  }
}

/* 3. SIDEBAR MECHANICS */
/* Ensure the sidebar column fills the height */
sidebar.sidebar {
  height: 100%; 
}

/* Force sticky behavior here just in case the theme's class is weak */
aside.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 120px; /* Stick below the menu */
  z-index: 10;
  display: block;
}

/* 4. SIDEBAR BOX STYLING (Our Custom Cards) */
.sidebar-box {
  background: var(--color-wimper-light);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* Audit CTA Box */
.sidebar-box.cta {
  background: var(--color-brand);
  color: var(--color-white);
  text-align: center;
  border: none;
}

.btn-sidebar {
  display: block;
  background: var(--color-white);
  color: var(--color-brand);
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 1rem;
  transition: transform 0.1s;
}
.btn-sidebar:hover { transform: translateY(-2px); }

/* Author Card */
.sidebar-box.author-card {
  background: var(--color-white);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar-circle {
  width: 40px; height: 40px; 
  background: var(--color-brand); 
  color: var(--color-white); 
  border-radius: 50%; 
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
}

.author-info strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.author-info .label { font-size: var(--text-xs); text-transform: uppercase; color: var(--color-text-dimmed); display: block; }
.author-info .role { font-size: var(--text-xs); color: var(--color-text-dimmed); }

/* 5. CONTENT TYPOGRAPHY */
.prose { font-family: var(--font-sans); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text); }
.prose h2 { font-size: var(--text-3xl); font-weight: 700; color: var(--color-text); margin-top: 3rem; margin-bottom: 1rem; }
.prose p { margin-bottom: 1.5rem; }
.prose ul { margin-bottom: 1.5rem; padding-left: 1.5rem; list-style-type: disc; }
.prose li { margin-bottom: 0.5rem; }

/* 6. COMPLIANCE FOOTER */
.compliance-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-dimmed);
}