/* 
  Unlock Lucide icons from their default inline values:
  - Override the fixed 24x24 size so icons can scale with font-size (1em)
  - Override the default stroke-width injected inline
  - Use currentColor so icons inherit color from CSS normally
  - Allows full styling through: width, height, font-size, color, and stroke-width
*/
svg[data-lucide] {
    width: 1em !important;
    height: 1em !important;
    stroke-width: 2 !important;
    stroke: currentColor;
}

/* Container */
.container {

  width: 100%;
  height: 100%;
  max-width: 1320px;   
     
  margin-left: auto;
  margin-right: auto;

  padding: var(--container-padding-vertical) var(--container-padding-horizontal);

}

.c-section-container {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);

}

.c-button {

  padding: var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
    
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-lg);

  cursor: pointer;

  transition: var(--transition-hover);

}

.c-section-heading {

  width: var(--width);

  text-align: center;

  line-height: 1.2;

  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-xl);

}

.c-section-description {

  width: var(--width);

  text-align: center;

  line-height: 1.5;

  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-lg);

}



/*=====[MEDIA QUERY + EFFECTS]=====*/
@media (min-width: 1024px) {

  .c-button {

    padding: var(--space-sm) var(--space-md);

  }

}

@media (hover: hover) and (pointer: fine) {

  .c-button:hover {

    background-color: var(--color-secondary-hover);

  }

}

.c-button:active {

  filter: brightness(0.95);

}