/*-- About Page Styling (matching silviacanelon.com) --*/

/* title and subtitle */
#title-block-header {
  margin-bottom: 0px;
}

.about-entity .about-heading {
  font-family: "Petrona", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--spc-primary, #002642);
  margin-bottom: 0.25rem;
}

.about-entity .subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--spc-primary-light, #2E4963);
  margin-bottom: 1rem;
}

[data-bs-theme="dark"] .about-entity .about-heading {
  color: var(--spc-primary, #e8e8e8);
}

[data-bs-theme="dark"] .about-entity .subtitle {
  color: var(--spc-primary-light, #b0b0b0);
}

/* social links: block of links */
.about-entity .about-links {
  justify-content: center !important;
  column-gap: 0em !important;
  font-size: 1.2em !important;
}

/* social links: individual links - icon only, no border */
.about-entity .about-link {
  padding: 0.25em 0.25em !important;
  border: none !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* hide the text, show only icons */
.about-entity .about-link .about-link-text {
  display: none;
}

/* icon colors */
.about-entity .about-link i,
.about-entity .about-link .bi {
  color: #A23E02 !important;
  transition: color 0.2s ease;
}

.about-entity .about-link:hover i,
.about-entity .about-link:hover .bi {
  color: #D96E34 !important;
}

/* about area with cream background */
.about-entity {
  background-color: var(--spc-bg-1, #FAF0E3);
  padding: 3em 0em 3em 0em !important;
  margin: 0em 2em 0em 2em;
  border-radius: 5px;
}

/* profile image - circular */
.about-entity .about-image {
  border-radius: 50% !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .about-entity {
  background-color: var(--spc-bg-1, #16213e);
}

[data-bs-theme="dark"] .about-entity .about-link i,
[data-bs-theme="dark"] .about-entity .about-link .bi {
  color: #D96E34 !important;
}

[data-bs-theme="dark"] .about-entity .about-link:hover i,
[data-bs-theme="dark"] .about-entity .about-link:hover .bi {
  color: #f0a070 !important;
}

/* mobile query for screens up to ~992px wide */
@media screen and (max-width: 991.98px) {
  /* social links: block of links */
  .about-entity .about-links {
    font-size: 1.2em !important;
  }
}

/* mobile query for screens up to ~576px wide */
@media screen and (max-width: 576px) {
  /* social links: block of links */
  .about-entity .about-links {
    font-size: 1em !important;
  }

  /* about area */
  .about-entity {
    margin: 0em 0em 0em 0em;
  }
}