/* Index-only color overrides */
/* Applies only when body has .index-page class (index.html) */
body.index-page {
  --background-color: #FFFFFF;
  --default-color: #977934; /* main text color (swapped) */
  --heading-color: #977934; /* headings (swapped) */
  --accent-color: #47511C; /* accent/buttons/links (swapped) */
  --surface-color: #ffffff; /* lighter surface for cards and panels */
  --contrast-color: #FFFFFF; /* text on accent backgrounds */
  --nav-color: #777442;
  --nav-hover-color: var(--accent-color);
  --nav-dropdown-background-color: #f7f6f0;
}

/* Ensure header/sidebar on index uses same background and readable contrast */
body.index-page .header {
  --background-color: #FFFFFF;
  --contrast-color: #977934;
}

/* Some specific small overrides to make sure buttons/links are visible */
body.index-page a,
body.index-page .btn,
body.index-page .navmenu a {
  color: var(--accent-color);
}

body.index-page .btn.btn-primary {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

body.index-page .btn.btn-outline {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Make sure hero accent-text uses accent color */
body.index-page .hero .accent-text {
  color: var(--accent-color);
}

/* Use surface color for common panels and cards on index for better contrast */
body.index-page .profile-card,
body.index-page .filters-wrapper,
body.index-page .stats .stats-item,
body.index-page .testimonial-content,
body.index-page .service-card,
body.index-page .skills .skills-category {
  background-color: var(--surface-color) !important;
  color: var(--default-color) !important;
  border-color: color-mix(in srgb, var(--default-color), transparent 92%) !important;
}

/* Make sure small text and muted elements remain readable */
body.index-page .section-title p,
body.index-page .description p,
body.index-page .about .about-content .description p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* Resume list visuals (index-only) */
body.index-page .resume-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.index-page .resume-list ul li {
  position: relative;
  /* leave room at the logical start (RTL-aware) for the icon */
  padding-inline-start: 2.6rem;
  padding-inline-end: 0;
  padding-block: .6rem 0.6rem;
  color: var(--default-color);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* subtle separator between items */
body.index-page .resume-list ul li + li {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
}

/* circular accent 'icon' at the logical start of each list item */
body.index-page .resume-list ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: .6rem; /* logical inline start (right in RTL) */
  top: .9rem;
  width: .9rem;
  height: .9rem;
  background-color: var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color), transparent 92%);
}

/* Slightly larger text and spacing on bigger screens */
@media (min-width: 992px) {
  body.index-page .resume-list ul li {
    font-size: 1.1rem;
    padding-block: .8rem;
  }

  body.index-page .resume-list ul li::before {
    top: 1rem;
    width: 1rem;
    height: 1rem;
  }
}

/* Service heading — make text smaller and tidy for index page */
body.index-page .service-heading {
  font-family: var(--heading-font, "Tajawal", sans-serif);
  font-size: 1rem; /* slightly smaller than default h5 */
  font-weight: 600;
  color: var(--default-color);
  line-height: 1.25;
  margin: 0 0 0.6rem 0; /* keep bottom spacing */
  letter-spacing: 0.0em;
}

/* Ensure long text wraps nicely and keeps readable spacing */
body.index-page .service-heading div,
body.index-page .service-heading span {
  display: inline-block;
  vertical-align: middle;
}

@media (min-width: 992px) {
  body.index-page .service-heading { font-size: 1.02rem; }
}