/* ===========================
   DARK THEME — pitsilis.space
   =========================== */

body {
  font-family: 'Poppins', sans-serif;
  background-color: #0d1117 !important; /* FORCE dark background */
  color: #e6edf3 !important;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* Remove Bootstrap's white container background */
.container {
  background-color: transparent !important;
}

/* Headings */
h1, h2, h3, h6 {
  color: #f0f6fc !important;
}

h2 {
  border-bottom: 2px solid #58a6ff;
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

/* Profile image */
.profile-img {
  box-shadow: 0 4px 20px rgba(56, 139, 253, 0.3);
  border: 3px solid #58a6ff;
}

/* Card-style sections */
.card-section {
  background-color: #161b22 !important;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  padding: 25px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  color: #e6edf3 !important;
}

.card-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(56, 139, 253, 0.25);
}

/* Skills list */
.skills-list li {
  background-color: #21262d !important;
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.95rem;
  color: #e6edf3 !important;
  border: 1px solid #30363d;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.skills-list li:hover {
  background-color: #2d333b;
  transform: translateY(-2px);
}

/* Links */
a {
  color: #58a6ff !important;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
  color: #79c0ff !important;
  text-shadow: 0 0 5px #58a6ff;
}

/* =========================
   ACCORDION / EXPERIENCE
   ========================= */

/* Accordion header full width */
.accordion-header {
  width: 100%;
  padding: 0; /* remove default padding */
  margin: 0;
}

/* Accordion card styling */
.accordion-item {
  background-color: #161b22 !important;
  border: 1px solid #30363d4f !important;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden; /* ensures header respects rounding */
  padding: 0;
}

/* Accordion header fills entire card */
.accordion-button {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0; /* will adjust rounding later */
  box-shadow: none !important;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between; /* keep arrow on right */
  font-weight: 500;
  background-color: #161b22 !important;
  color: #e6edf3 !important;
  transition: background-color 0.2s ease;

}

/* Hover effect for accordion header */
.accordion-button:hover {
  background-color: #21262d !important;
}

/* Expanded state: top corners rounded, color change */
.accordion-button:not(.collapsed) {
  background-color: #21262d !important;
  color: #58a6ff !important;
  border-radius: 8px 8px 0 0; /* only top corners */
}

/* Accordion content */
.accordion-body {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
  padding: 18px 22px !important;
  border-top: 1px solid #30363d;
  transition: all 0.3s ease;
}

/* Better alignment inside accordion */
.accordion-body p,
.accordion-body ul {
  margin-bottom: 0;
  line-height: 1.6;
}

.accordion-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

/* Make the accordion arrow visible on dark background */
.accordion-button::after {
  filter: invert(1) brightness(1.2);
}

/* =========================
   OTHER STYLES
   ========================= */

/* Bootstrap overrides for light elements */
.bg-light {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

.text-muted {
  color: #8b949e !important;
}

/* Scrollbar (dark theme aesthetic) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}
