/* Modern, stylish design for Andras Kupcsik's website */

/* Reset and override any default theme styles */
.wrapper,
.wrapper *,
.wrapper *:before,
.wrapper *:after {
  position: static !important;
}

.wrapper .wrapper,
.wrapper .container,
.wrapper .inner {
  display: none !important;
}

/* Override common Jekyll theme layout patterns */
body .wrapper section,
.wrapper .main-content section,
.main-content section {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Force remove any fixed width constraints from the minimal theme */
@media screen {
  section {
    max-width: none !important;
    width: 100% !important;
  }
}

:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --accent-color: #e74c3c;
  --text-color: #2c3e50;
  --text-light: #7f8c8d;
  --background: #ffffff;
  --background-alt: #f8f9fa;
  --border-color: #e1e8ed;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.wrapper {
  max-width: 1400px; /* Increased from 1200px for wider desktop layout */
  margin: 0 auto;
  background: var(--background);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: min-content 1fr; /* Sidebar fits content width */
  min-height: calc(100vh - 40px);
}

/* Sidebar container for the left column */
.sidebar {
  background: linear-gradient(135deg, var(--primary-color) 0%, #34495e 100%); /* Match header background */
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
}

/* Main content container */
.main-content {
  display: block; /* Change from grid since we don't need footer space */
}

/* Header/Sidebar Styles */
header {
  background: transparent; /* Remove background since sidebar now has it */
  color: white;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--border-radius);
  /* Header only takes its natural content height */
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

header > * {
  position: relative;
  z-index: 1;
}

header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 20px 0;
  background: linear-gradient(45deg, #ffffff, #ecf0f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

header img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.2);
  margin: 0 0 25px 0;
  transition: var(--transition);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

header img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

header p {
  margin: 0 0 25px 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

header .view {
  margin: 10px 0;
}

header .view a {
  display: inline-flex;
  align-items: center;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--transition);
  font-weight: 500;
  backdrop-filter: blur(10px);
  margin-bottom: 8px;
  width: 100%;
  justify-content: center;
}

header .view a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

header .view a::before {
  content: '🔗';
  margin-right: 8px;
}

header .view a[href*="linkedin"]::before {
  content: '💼';
}

header .view a[href*="scholar"]::before {
  content: '🎓';
}

header .view a[href*="astrobin"]::before {
  content: '🔭';
}

/* Main Content Styles */
section {
  padding: 60px 50px !important; /* Force override of any theme padding */
  background: var(--background);
  overflow-y: auto;
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  min-height: 100%;
  margin: 0 !important; /* Remove any inherited margins */
  width: 100% !important; /* Force full width */
  box-sizing: border-box !important;
}

section h2 {
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--secondary-color);
  position: relative;
  width: 100%; /* Ensure headings use full width */
}

section h2::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

section p {
  margin: 0 0 20px 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-color);
  width: 100%; /* Ensure paragraphs use full width */
}

section a {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
}

section a:hover {
  color: var(--accent-color);
}

section a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: var(--transition);
}

section a:hover::after {
  width: 100%;
}

/* Publications List Styling */
section ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  width: 100%; /* Ensure lists use full width */
}

section li {
  background: var(--background-alt);
  margin: 15px 0;
  padding: 20px;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--secondary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
  width: 100%; /* Ensure list items use full width */
  box-sizing: border-box;
}

section li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-left-color: var(--accent-color);
}

/* Timeline for "Previously" section */
.timeline-item {
  position: relative;
  padding-left: 30px;
  margin: 25px 0;
  background: transparent !important; /* Ensure no background */
  width: 100%; /* Ensure timeline items use full width */
  box-sizing: border-box;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--secondary-color);
  border-radius: 50%;
  border: 2px solid var(--secondary-color); /* Changed to same color to avoid white border */
  box-shadow: none; /* Remove the white box shadow */
}

.timeline-item::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 20px;
  width: 2px;
  height: calc(100% + 10px);
  background: linear-gradient(to bottom, var(--secondary-color), transparent);
}

.timeline-item:last-child::after {
  display: none;
}

/* Footer */
footer {
  display: none !important; /* Completely hide the footer */
}

/* Large screen optimizations */
@media (min-width: 1600px) {
  .wrapper {
    max-width: 1600px; /* Even wider on very large screens */
    grid-template-columns: 340px 1fr; /* Slightly larger but proportional sidebar */
  }

  section {
    padding: 70px 60px; /* More generous padding on large screens */
  }

  header {
    padding: 50px 40px; /* More padding in header too */
  }

  section h2 {
    font-size: 2.2rem; /* Slightly larger headings */
  }

  section p {
    font-size: 1.15rem; /* Slightly larger text for better readability */
    /* Removed max-width to allow full use of available space */
  }
}/* Responsive Design */
@media (max-width: 1024px) {
  .wrapper {
    max-width: 1000px;
    grid-template-columns: 300px 1fr; /* Reduced from 320px for better proportion */
  }

  section {
    padding: 50px 40px !important; /* Force override on medium screens */
    margin: 0 !important;
    width: 100% !important;
  }
}@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .wrapper {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  .main-content {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }

  header {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  section {
    padding: 30px 20px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }

  header h1 {
    font-size: 1.8rem;
  }

  header img {
    width: 120px;
    height: 120px;
  }

  section h2 {
    font-size: 1.6rem;
  }
}@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }

  header img {
    width: 100px;
    height: 100px;
  }

  section {
    padding: 20px 15px;
  }

  section h2 {
    font-size: 1.4rem;
  }

  section p {
    font-size: 1rem;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Loading animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section > * {
  animation: fadeInUp 0.6s ease-out;
}

/* Focus styles for accessibility */
a:focus,
button:focus {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Override any default theme styles that might create white boxes */
.wrapper .sidebar,
.wrapper .main-content,
.wrapper section,
.wrapper header {
  box-shadow: none !important;
}

/* Ensure no unwanted positioned elements */
.wrapper * {
  box-sizing: border-box;
}

/* Make sure there are no floating or positioned white elements */
div:not(.wrapper):not(.sidebar):not(.main-content) {
  background: transparent !important;
}

/* Additional override for any theme-specific elements */
.view,
.downloads,
small {
  background: transparent !important;
}

/* Force override any Jekyll theme container styles that might cause gaps */
.wrapper section,
.main-content section,
section {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 60px !important;
  padding-right: 50px !important;
}

/* Override any default Jekyll theme content containers */
.wrapper .inner,
.wrapper .container,
section .inner,
section .container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Force all content elements to use full width */
section > *,
section h1,
section h2,
section h3,
section p,
section ul,
section ol,
section div,
.timeline-item {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* NUCLEAR OPTION: Override Jekyll minimal theme's fixed width completely */
html body .wrapper section,
html body .wrapper .main-content section,
html body section,
body section {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 60px 50px !important;
  box-sizing: border-box !important;
}

/* Override any .container or .inner elements that Jekyll might inject */
html body section .container,
html body section .inner,
html body .wrapper section .container,
html body .wrapper section .inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force content to start at the left edge */
html body section > h2,
html body section > p,
html body section > ul,
html body section > div {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Specific overrides for timeline and publication elements */
html body .timeline-item,
html body section .timeline-item,
html body section ul,
html body section li {
  margin-left: 0 !important;
  padding-left: 30px !important; /* Only for timeline items */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Reset timeline padding specifically */
html body section ul {
  padding-left: 0 !important;
}

html body section .timeline-item {
  padding-left: 30px !important; /* Restore timeline indentation */
}