/* ==========================================================================
   Waddell Family Law – extra rules for the "About" inner pages
   (about-the-firm, lauren-waddell, jennifer). Everything else comes from
   site.css; this file only adds the Avada elements those pages use that the
   home page does not: attorney/person cards, the biography accordion, the
   double separator and the small social-icon row under the portrait.

     .page-head / .page-title     page heading block under the header
                                  (Avada #main top padding 55px, title margin 0 0 20px)
     .team / .team__media / .team__text / .team__name
                                  attorney row: 40% portrait column (image 200px),
                                  60% text column with a 28px name
     .section-title               "Support Staff" heading (margin 50px 0 30px)
     .staff / .staff__col         two 50% columns of .person cards
     .person / .person__img / .person__desc / .person__name / .person__role / .person__bio
                                  Avada "person" element: centred 200px portrait,
                                  left-aligned Raleway name + role, bio 25px below
     .profile__media / .profile__social
                                  full-column portrait and the centred icon row below it
     .acc / .acc__item / .acc__title / .acc__icon / .acc__body
                                  Avada toggle accordion rebuilt with <details>/<summary>:
                                  Raleway 24px/700 #004c87 titles, 24px dark circle with
                                  +/− icon, #e0dede dividers, 14px body text
     .sep-double                  two 1px #e0dede lines 20px apart, 100px below
     .badges                      static badge grid (replaces the Avada image carousel);
                                  pairs with site.css .awards__list
   ========================================================================== */

/* Page heading ------------------------------------------------------------ */
.page-head { padding-top: 55px; }
.page-title { margin: 0 0 20px; }

/* Attorney rows (about-the-firm) ------------------------------------------ */
.team { align-items: flex-start; }
.team__media { flex: 0 0 38%; max-width: 38%; margin: 0 4% 20px 0; line-height: 1; }
.team__media img { display: block; width: 200px; max-width: 100%; height: auto; }
.team__text { flex: 0 0 58%; max-width: 58%; margin-bottom: 20px; }
.team__name {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.41;
  color: var(--c-purple);
}
.team__text > p:first-of-type { margin-top: 0; }
.team__text .btn { margin-top: 4px; }

.section-title {
  margin: 50px 0 30px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.41;
  color: var(--c-purple);
}

/* Support-staff person cards ---------------------------------------------- */
.staff { align-items: flex-start; }
.staff__col { flex: 0 0 48%; max-width: 48%; margin-right: 4%; margin-bottom: 20px; }
.staff__col:last-child { margin-right: 0; }

.person { margin: 20px; text-align: center; }
.person__img { display: inline-block; width: 200px; max-width: 100%; height: auto; vertical-align: bottom; }
.person__desc { margin-top: 25px; text-align: left; }
.person__name,
.person__role {
  display: block;
  margin: 0;
  font-family: var(--font-h4);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  color: var(--c-purple);
}
.person__bio { margin-top: 25px; }
.person__bio p { margin: 0 0 1em; }
.person__bio p:last-child { margin-bottom: 0; }

/* Attorney profile (lauren-waddell, jennifer) ----------------------------- */
.profile__media img { display: block; width: 100%; height: auto; }
.profile__text > p:first-child { margin-top: 0; }
.profile__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  padding: 19px 0 100px;
  line-height: 1;
}

/* Biography accordion ----------------------------------------------------- */
.acc { margin: 0 0 56px; padding: 0; }
.acc__item { border-bottom: 1px solid var(--c-sep); }
.acc__title {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 10px 0;
  font-family: var(--font-h4);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-link);
  cursor: pointer;
  list-style: none;
}
.acc__title::-webkit-details-marker { display: none; }
.acc__title::marker { content: ""; }
.acc__title:hover { color: var(--c-link-hover); }
.acc__icon {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 18px;
  border-radius: 50%;
  background: #333333;
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(3px);
}
.acc__icon::before { content: "+"; }
.acc__item[open] .acc__icon::before { content: "\2212"; }
.acc__body {
  padding: 10px 0 15px;
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
}
.acc__body > :first-child { margin-top: 0; }
.acc__body > :last-child { margin-bottom: 0; }
.acc__body p { margin: 0 0 1em; }
.acc__body ul { margin: 0 0 1em; padding-left: 40px; }
.acc__body li { margin: 0; }

@media (min-width: 1025px) {
  .acc { padding: 0 180px; }
}

/* Separator + badge grid (lauren-waddell) --------------------------------- */
.sep-double {
  height: 20px;
  margin: 0 0 100px;
  border-top: 1px solid var(--c-sep);
  border-bottom: 1px solid var(--c-sep);
}
.badges { margin-bottom: 20px; }

/* Small screens ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .team__media, .team__text { flex: 0 0 100%; max-width: 100%; margin-right: 0; }
}
@media (max-width: 850px) {
  .staff__col { flex: 0 0 100%; max-width: 100%; margin-right: 0; }
}
@media (max-width: 640px) {
  .acc__title { font-size: 20px; }
  .person { margin: 20px 0; }
  .profile__social { padding-bottom: 40px; }
}