/* Define the color palette */
:root {
  --brand-pink: #FF48B0;
  --brand-yellow: #FFB511;
  --brand-blue:  #009DA5;
  --text-black: #000000;
}

/* Styling for the active navbar link */
.navbar .navbar-nav .nav-link.active {
  font-weight: 800;
  color: #000000 !important;
  border-bottom: 3px solid #000000;
}

/* Slight hover effect for the other non-active links */
.navbar .navbar-nav .nav-link:hover {
  color: #555555;
  transition: color 0.2s ease-in-out;
}

/* 
  The base container for each section.
  Stretches 100% of the window width, with padding for the text. 
*/
.color-band {
  width: 100%;
  padding: 2em 20vw;
  margin: 0;
  box-sizing: border-box;
}

.color-card {
  padding: 2em 3em; 
  margin: 1.5em 0;  
  border-radius: 16px; 
  box-sizing: border-box;
}

/* Strip margins from first/last elements to maintain perfect padding */
.color-band > *:first-child,
.color-card > *:first-child {
  margin-top: 0 !important;
}

.color-band > *:last-child,
.color-card > *:last-child {
  margin-bottom: 0 !important;
}

/* --- THEME ENGINE (Using CSS Variables to fix nesting) --- */

.theme-pink {
  background-color: var(--brand-pink);
  color: var(--text-black);
  --theme-accent: var(--brand-yellow); /* Sets the accent for this scope */
}

.theme-white {
  background-color: #ffffff;
  color: var(--text-black);
  --theme-accent: var(--brand-blue); /* Sets the accent for this scope */
}

.theme-yellow {
  background-color: var(--brand-yellow);
  color: var(--text-black);
  --theme-accent: var(--brand-pink); /* Sets the accent for this scope */
}

/* Apply the scoped accent color to all headers inside any theme */
[class*="theme-"] h1, 
[class*="theme-"] h2, 
[class*="theme-"] h3, 
[class*="theme-"] h4, 
[class*="theme-"] h5, 
[class*="theme-"] h6 {
  color: var(--theme-accent);
}

/* Apply the scoped accent color to all links inside any theme */
[class*="theme-"] a {
  font-weight: bold;
  color: var(--theme-accent);
  text-decoration-color: var(--theme-accent);
}

/* --- Suppress default header underlines --- */
.color-band h1, 
.color-band h2, 
.color-band h3, 
.color-band h4, 
.color-band h5, 
.color-band h6 {
  border-bottom: none !important;
  padding-bottom: 0; 
}

/* --- Typography Control --- */
.text-huge {
  font-size: 4.75rem; 
  font-weight: 750; 
  line-height: 1.1; 
  margin-bottom: 0.5rem;
}

.text-subtitle {
  font-size: 2.25rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.9; 
}

/* --- Layout: Title & Button Row --- */
.title-button-row {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 2rem; 
}

/* --- Fix spacing in loose lists --- */
.color-band li > p {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}

.color-band li ul,
.color-band li ol {
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* --- The Black Button --- */
.btn-black {
  background-color: var(--text-black) !important;
  color: #ffffff !important; 
  padding: 1rem 2.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none !important;
  border-radius: 50px; 
  transition: transform 0.2s ease;
  white-space: nowrap; 
}

.btn-black:hover {
  transform: scale(1.05); 
}

/* --- Title Page Photo --- */
.title-photo {
  width: 40vw;
  /* Optional: max-width: 600px; prevents it from getting absurdly huge on massive monitors */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  
  /* Drastically reduce the side padding on small screens */
  .color-band {
    padding: 2em 5vw; /* Changes side padding from 20% to just 5% */
  }

  /* Shrink the inner padding of the nested cards */
  .color-card {
    padding: 1.5em 1.25em; 
  }

  /* Bonus: Shrink the huge typography so it doesn't break off the screen on phones */
  .text-huge {
    font-size: 3rem; 
  }
  
  .text-subtitle {
    font-size: 1.25rem;
  }

  .title-photo {
    width: 85vw; 
  }

  .title-button-row {
    flex-direction: column; /* Forces the block and button to stack */
    justify-content: center; 
    text-align: center; /* Centers the actual text inside the block */
  }  
}