/* ==========================================================================
   Augusta Pediatric Associates — Education Overview as switch tabs

   tabswitch.css is the library's, untouched: the spring on the item height,
   the 190ms colour curve, the notches that weld the active row to the panel.
   This file only re-points its colours at the practice's and turns the panel
   from a picture frame into a place to set a line of type — each tab's panel
   is the school, the year, the certification, not a photograph.
   ========================================================================== */

.apa-edu {
  --ts-active-bg: #eff4fa;      /* the tint the other cards on the site use */
  --ts-radius: 14px;
  /* The reference's 300px rail assumes the component owns the width of the
     page. Here it sits in a half-width theme column, which left the panel at
     276px — narrower than the rail beside it. 228 gives the answer more room
     than the label, which is the right way round. */
  --ts-rail-w: 228px;
  --ts-pad: 15px 12px 18px 18px;
  margin-top: 6px;
}

/* Smaller than the reference's 26px — these are labels beside an answer, not
   headlines.

   The colour has to flip with the state, and it has to be `!important`. The
   rail sits on the theme's navy column (`rgb(34, 77, 123)`), whose own rule
   paints every heading white; left alone, the ACTIVE label stays white on the
   light tint its tab turns, which measured **1.11:1** — invisible. So: white
   while the item is on the navy, navy once the item has its own light ground. */
.apa-edu .tabswitch__title {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  color: #fff !important;
}

.apa-edu .tabswitch__item.is-active .tabswitch__title { color: #224d7b !important; }

.apa-edu .tabswitch__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b7a93 !important;
}

/* The panel holds type rather than a photograph, so the 16/10 frame the
   reference needs for an image would leave a lot of empty blue. It sizes to
   its content instead, with a floor so switching between a one-line and a
   three-line answer does not make the block jump. */
.apa-edu .tabswitch__stack {
  aspect-ratio: auto;
  min-height: 190px;
  display: flex;
  border-radius: calc(var(--ts-radius) - 2px);
}

.apa-edu .tabswitch__shot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px;
  object-fit: unset;
}

.apa-edu .tabswitch__shot p {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: #224d7b;
  font-weight: 500;
}

.apa-edu .tabswitch__shot p:last-child { margin-bottom: 0; }

/* the label above each answer, so the panel says what it is answering */
.apa-edu .apa-edu-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d5344b;
}

@media (max-width: 820px) {
  .apa-edu .tabswitch__stack { min-height: 0; }
}

/* --------------------------------------------------------------------------
   The section, once the photograph beside it is gone
   --------------------------------------------------------------------------
   The row was two half columns: the tabs on the left, a sleeping newborn on the
   right. With the picture removed the block takes the whole width, so it is
   centred on a measure of its own and given room — this is the page's one
   interactive thing and it should read that way.
   -------------------------------------------------------------------------- */

.apa-edu-col > .vc_column-inner {
  padding: clamp(48px, 6vw, 84px) 26px !important;
}

.apa-edu-col .wpb_wrapper {
  max-width: 1060px;
  margin: 0 auto;
}

/* the two headings centre with the block they introduce */
.apa-edu-col h1 { text-align: center; }

.apa-edu {
  /* the rail can afford the reference's own width again now */
  --ts-rail-w: 300px;
  --ts-pad: 18px 14px 22px 22px;
  margin-top: 26px;
}

/* the panel is the answer, and it is what the annotation asked to be bigger */
.apa-edu .tabswitch__stack { min-height: 300px; }

.apa-edu .tabswitch__shot { padding: 40px 48px; }

.apa-edu .tabswitch__shot p {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.55;
}

.apa-edu .apa-edu-label { margin-bottom: 16px; font-size: 12px; }

.apa-edu .tabswitch__title { font-size: clamp(18px, 1.6vw, 22px); }

@media (max-width: 820px) {
  .apa-edu-col .wpb_wrapper { max-width: none; }
  .apa-edu .tabswitch__stack { min-height: 0; }
  .apa-edu .tabswitch__shot { padding: 28px 30px; }
}

/* --------------------------------------------------------------------------
   Welding the active tab to the panel
   --------------------------------------------------------------------------
   The rail and the panel already abut exactly — measured, 0px between them —
   but the panel keeps a rounded top-left corner, and the panel starts higher
   up than the first rail item does (1728 against 1747 on Dr. Mote's page). So
   the panel's curve cuts a bite of navy out of the corner just where the
   active tab meets it, and the tab reads as floating next to the panel rather
   than joined to it.

   Squaring the panel's LEFT corners is the fix: the side facing the rail
   becomes a straight edge, and the item's own concave notches then bridge it
   cleanly at every position in the list. The right-hand corners keep their
   radius, so the block still reads as one rounded card.
   -------------------------------------------------------------------------- */

.apa-edu .tabswitch__panel {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* a half-pixel of overlap, so no seam shows at fractional zoom levels */
.apa-edu .tabswitch__item.is-active { margin-right: -0.5px; }