/* ============================================
   MODERN THEME OVERRIDE FOR ICARUS
   Aligns old Icarus theme with new design
   ============================================ */

:root {
  --header-bg: #000000;
  --header-text: #ffffff;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #999999;
  --link-color: #0066cc;
  --link-hover: #1f6e8c;
  --border-color: #e0e0e0;
  --card-bg: #ffffff;
  --bg-main: #ffffff;
  --page-bg: #fafafa;
  --accent-color: #1f6e8c;
}

/* ============================================
   TYPOGRAPHY & GLOBAL STYLES
   ============================================ */

html, body {
  background-color: var(--page-bg);
  color: var(--text-primary);
  font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}

a {
  color: var(--link-color);
  transition: color 0.2s, opacity 0.2s;
}

a:hover {
  color: var(--link-hover);
}

/* ============================================
   NAVBAR MODERNIZATION
   ============================================ */

.navbar {
  background-color: var(--header-bg) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  border-bottom: 1px solid #2a2a2a !important;
}

.navbar-main {
  background-color: var(--header-bg) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 1rem 2rem !important;
}

.navbar-brand {
  margin-right: auto !important;
}

.navbar-item {
  color: #f0f0f0 !important;
  font-weight: 500 !important;
  transition: color 0.2s, border-color 0.2s !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.25rem 0 !important;
}

.navbar-item:hover {
  color: var(--header-text) !important;
  border-bottom-color: var(--header-text) !important;
}

.navbar-item.is-active {
  color: var(--header-text) !important;
  border-bottom-color: var(--header-text) !important;
}

.navbar-logo img {
  max-height: 28px !important;
}

.navbar-item.navbar-logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card {
  background: var(--card-bg) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.03) !important;
  border: 1px solid #edeff2 !important;
  padding: 2rem !important;
}

.card-content {
  padding: 0 !important;
}

/* ============================================
   PROFILE WIDGET STYLING
   ============================================ */

.card.widget {
  background: var(--card-bg) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.03) !important;
  border: 1px solid #edeff2 !important;
  padding: 1.8rem !important;
}

.widget[data-type="profile"] .avatar {
  width: 160px !important;
  height: 160px !important;
  border: 3px solid var(--accent-color) !important;
  border-radius: 50% !important;
}

.widget[data-type="profile"] .title {
  font-family: 'Fira Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1f3b4a !important;
}

.widget[data-type="profile"] .level-item {
  padding: 0 !important;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

.button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.button.is-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.button.is-primary:hover {
  background-color: #175a7a !important;
  border-color: #175a7a !important;
}

.button.is-transparent {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
}

.button.is-transparent:hover {
  color: var(--accent-color) !important;
}

/* ============================================
   ARTICLE STYLING
   ============================================ */

article.card-content {
  padding: 0 !important;
}

.article-meta {
  color: var(--text-light) !important;
  font-size: 0.85rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  margin-bottom: 1.5rem !important;
}

.article h1,
.article h2,
.article h3 {
  font-family: 'Fira Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1c1e21 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.8rem !important;
}

.article h1 {
  font-size: 1.8rem !important;
}

.article h2 {
  font-size: 1.4rem !important;
  border-left: 4px solid var(--accent-color) !important;
  padding-left: 1rem !important;
}

.article h3 {
  font-size: 1.1rem !important;
}

.article-content {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--text-primary) !important;
}

.article-content p {
  margin-bottom: 1rem !important;
}

.article-content blockquote {
  border-left: 4px solid var(--accent-color) !important;
  padding-left: 1rem !important;
  margin: 1.5rem 0 !important;
  color: var(--text-secondary) !important;
  font-style: italic !important;
}

.article-content code {
  background-color: #f5f3f0 !important;
  border-radius: 4px !important;
  padding: 0.2rem 0.6rem !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.9em !important;
  color: #c7254e !important;
}

.article-content pre {
  background-color: #f5f3f0 !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
}

.article-content pre code {
  background-color: transparent !important;
  padding: 0 !important;
  color: inherit !important;
}

/* ============================================
   TAGS & CATEGORIES
   ============================================ */

.tag {
  background-color: #eef3f6 !important;
  color: var(--accent-color) !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}

.tag.is-primary {
  background-color: var(--accent-color) !important;
  color: white !important;
}

.article-tags a {
  color: var(--accent-color) !important;
  text-decoration: none !important;
  padding: 0.3rem 0.8rem !important;
  background-color: #eef3f6 !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  margin-right: 0.5rem !important;
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
}

.article-tags a:hover {
  background-color: #e0eef4 !important;
}

/* ============================================
   PAGE HERO
   ============================================ */

.page-hero {
  padding: 2.25rem 2rem;
  margin-bottom: 1.75rem;
  background: linear-gradient(135deg, rgba(48, 63, 87, 0.96) 0%, rgba(70, 97, 127, 0.94) 100%);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(28, 30, 33, 0.08);
}

.page-hero-copy {
  max-width: 680px;
  color: white !important;
}

.page-hero-copy .subheading {
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: 0.75rem !important;
}

.page-hero-copy h1 {
  font-size: clamp(2.25rem, 3vw, 3.3rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.03em !important;
}

.page-hero-copy p {
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 38rem !important;
}

/* ============================================
   TIMELINE & ARCHIVE STYLING
   ============================================ */

.timeline {
  border-left: 3px solid var(--accent-color) !important;
  padding-left: 1.5rem !important;
}

.media {
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px dashed var(--border-color) !important;
}

.media:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.media-content .title {
  font-family: 'Fira Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1c1e21 !important;
}

.media-content .date {
  color: var(--text-light) !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.85rem !important;
}

.media-content .categories {
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

.media-content .categories a {
  color: var(--accent-color) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background-color: #f5f5f5 !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 2rem !important;
  font-size: 0.85rem !important;
}

.footer a {
  color: var(--accent-color) !important;
}

/* ============================================
   MENU & SIDEBAR
   ============================================ */

.menu-label {
  font-family: 'Fira Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1c1e21 !important;
  font-size: 1.05rem !important;
  text-transform: none !important;
}

.menu-list a {
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

.menu-list a:hover {
  background-color: #f5f3f0 !important;
  color: var(--accent-color) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination-link {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

.pagination-link:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: white !important;
}

.pagination-link.is-current {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: white !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media screen and (max-width: 768px) {
  .navbar-container {
    flex-wrap: wrap !important;
  }

  .card {
    padding: 1.5rem !important;
  }

  .article h1 {
    font-size: 1.4rem !important;
  }

  .article h2 {
    font-size: 1.1rem !important;
  }
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */

* {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

a:hover {
  opacity: 0.85 !important;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */

.content blockquote {
  border-left: 4px solid var(--accent-color) !important;
  padding-left: 1rem !important;
  margin-left: 0 !important;
}

.media-left .image {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.level-item .image img {
  border-radius: 12px !important;
}

/* Hide old styling that conflicts */
body > .footer,
body > .navbar,
body > .section {
  opacity: 1 !important;
}

.columns {
  gap: 2rem !important;
}

.column {
  border-radius: 0 !important;
}

/* ============================================
   LINK STYLING FOR CONSISTENCY
   ============================================ */

.title a,
.content a,
p a {
  color: var(--link-color) !important;
  text-decoration: none !important;
}

.title a:hover,
.content a:hover,
p a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}