/* 1. TYPOGRAPHY & SPACING */

body {
  /* This looks for Helvetica Light first, then Inter as the web-safe backup */
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif !important;
  font-weight: 300 !important; /* This is the "Light" setting */
  font-size: 18px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important; /* Adds that airy, modern feel */
  color: #333 !important;
}


/* 2. OVERRIDING THE THEME PRIMARY COLOR (The "Anti-Pink" Rules) */
/* This changes the active item in your TOC and any primary buttons */
.list-group-item.active, 
.list-group-item.active:focus, 
.list-group-item.active:hover {
  background-color: #2c3e50 !important; /* Professional Navy */
  border-color: #2c3e50 !important;
}

/* Minimalist Border Links */
a {
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 1px;
  transition: all 0.3s ease;
}

a:hover {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #333;
  background-color: #f9f9f9; /* Extremely subtle highlight */
}

/* 3. TOC SIDEBAR POLISHING */
.tocify {
  border: none !important;
  margin-top: 20px;
}

.title {
  display: none;
}

/* Smooth scrolling for the internal links */
html {
  scroll-behavior: smooth;
}

/* 4. IMAGE & CONTENT STYLING */
img {
    border-radius: 50%; /* This is the key line */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds a soft shadow for depth */
}

/* Add a subtle line between sections to keep the single page organized */
section {
  padding-top: 60px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}

/* Ensure the first section (About) doesn't have a top border */
#about {
  border-top: none;
  padding-top: 0;
}

.main-container {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* If you are using a class for your icon container */
.icon-links a {
  text-decoration: none !important;
  border-bottom: none !important;
  margin-right: 15px; /* Adds nice spacing between icons */
  font-size: 1.2em;   /* Makes icons slightly larger and clearer */
  color: #2c3e50;     /* Matches your professional navy */
}

.icon-links a:hover {
  color: #3498db;     /* Subtle color shift on hover */
}


/* FOR MOBILE */
@media (max-width: 767px) {
  /* 1. Make the TOC a "Sticky" Header */
  #TOC {
    position: fixed !important; /* This makes it follow the scroll */
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.98); 
    border-bottom: 1px solid #ddd;
    border-radius: 0; /* Flat against the top looks cleaner for a sticky bar */
    max-height: 50px; 
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  /* 2. Expand on tap */
  #TOC:active, #TOC:focus, #TOC:hover {
    max-height: 80vh; /* Allow it to grow to 80% of screen height */
    overflow-y: auto;
  }

  /* 3. The Menu Label */
  #TOC::before {
    content: "≡ Sections";
    display: block;
    padding: 15px;
    text-align: center;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #2c3e50;
  }

  /* 4. Shift the main content down so it's not hidden behind the fixed TOC */
  .main-container {
    padding-top: 60px !important; 
  }
}