/* ==========================================================================
   Augusta Pediatric Associates — Patient Resources

   The page was seven rows that had grown one at a time: four "quick links"
   above ten form PDFs, a prescriptions policy, a symptom checker on its own,
   then "Additional Websites We Recommend" followed a row later by a second
   section also called "Additional Websites". Three different links read
   "CLICK HERE".

   Rebuilt around what a parent actually came to do, in one order:

     1  three things you can do right now   — portal, bill, symptom checker
     2  forms to print and bring
     3  prescriptions and refills            — the policy, in prose
     4  links worth keeping                  — every outside site, grouped once
     5  how to reach us

   Every link, PDF and paragraph from the old page is on this one, and the
   prescriptions policy is carried word for word. The section headings and a
   handful of one-line descriptions ARE new, because the old page had none: the
   three "CLICK HERE" links said nothing about where they went, and two of the
   task cards described themselves as "click here to access our patient portal".
   Those lines are ours and are the only copy on the page that is.

   Same system as the About and Physicians pages: red eyebrow, navy uppercase
   heading, one reading measure, `rem` for every shared width.
   ========================================================================== */

:root {
  --apa-res-red:    #d5344b;
  --apa-res-navy:   #224d7b;
  --apa-res-sky:    #4987c6;
  --apa-res-body:   #45536d;
  --apa-res-rule:   #e4eaf1;
  --apa-res-ground: #f6f8fb;
  /* the brand red #d5344b laid over white at about 13% — a soft, muted rose
     that reads as the brand rather than as a generic highlight, and light
     enough to leave the row's navy type at 7.6:1 */
  --apa-res-wash:   #f8e8ea;
  --apa-res-glide:  cubic-bezier(.16, 1, .3, 1);
}

.apa-res {
  background: #fff;
  padding-bottom: 10px;
}

/* --------------------------------------------------------------------------
   0 · The hero
   --------------------------------------------------------------------------
   The same band as the Physicians page, to the same numbers: photograph on the
   section itself, heading written across the bottom, and a bottom-weighted
   scrim that only has to carry the lower third so the picture above it stays
   as photographed. `background-position` is written in the markup, next to the
   photograph it belongs to.
   -------------------------------------------------------------------------- */

.apa-res-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 54vw, 700px);
  background-color: #16283f;      /* what shows while the photograph loads */
  background-image: var(--apa-hero-img);
  background-size: cover;
  background-position: var(--apa-hero-pos, center);
  overflow: hidden;
}

.apa-res-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(9, 24, 41, .86) 0%,
              rgba(9, 24, 41, .70) 18%,
              rgba(9, 24, 41, .34) 38%,
              rgba(9, 24, 41, .06) 55%,
              rgba(9, 24, 41, 0)   70%);
}

/* z-index, not source order: `::after` paints after the element's in-flow
   children, so without this the scrim would sit on top of the heading. */
.apa-res-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px 44px;
}

.apa-res-hero h1 {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-size: clamp(30px, 5.2vw, 68px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 0 26px rgba(0, 0, 0, .32);
}

/* the page title under it, set exactly as "OUR PHYSICIANS" is set */
.apa-res-head {
  max-width: 1460px;
  margin: 0 auto;
  padding: 74px 30px 10px;
  text-align: center;
}

.apa-res-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--apa-res-navy);
}

.apa-res-head h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 22px auto 0;
  background: var(--apa-res-red);
}

/* the practice's opening sentence sits under the title and is centred with it,
   rather than starting the first section — it introduces the page, not the
   three task cards */
.apa-res-head .apa-res-lede {
  max-width: 46rem;
  margin: 24px auto 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   1 · The frame every section shares
   -------------------------------------------------------------------------- */

.apa-res-sec {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 26px;
}

/* the first section follows the page title, which brings its own space */
.apa-res-head + .apa-res .apa-res-sec:first-child,
.apa-res > .apa-res-sec:first-child {
  padding-top: 34px;
  border-bottom: 1px solid var(--apa-res-rule);
}

.apa-res-sec:last-child { border-bottom: 0; }

.apa-res-sec > h2 {
  margin: 0 0 14px;
  font-size: clamp(25px, 2.8vw, 34px);
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--apa-res-navy);
}

.apa-res-lede {
  max-width: 44rem;
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--apa-res-body);
}

/* --------------------------------------------------------------------------
   2 · The three things you can do right now
   --------------------------------------------------------------------------
   These were three separate link boxes scattered between the forms and the
   reading material. They are the reason most people open this page, so they
   are first and they are the only things on it that look like buttons.
   -------------------------------------------------------------------------- */

.apa-res-tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

.apa-res-task {
  display: block;
  padding: 26px 26px 24px;
  border-radius: 16px;
  background: var(--apa-res-navy);
  color: #fff;
  text-decoration: none;
  transition: transform .45s var(--apa-res-glide),
              box-shadow .45s var(--apa-res-glide);
}

.apa-res-task:hover,
.apa-res-task:focus {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(9, 24, 41, .22);
}

.apa-res-task b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
}

.apa-res-task b::after {
  content: "\203A";
  font-size: 21px;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform .35s var(--apa-res-glide);
}

.apa-res-task:hover b::after,
.apa-res-task:focus b::after { transform: translate(4px, -2px); }

.apa-res-task span {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   3 · Forms
   --------------------------------------------------------------------------
   Ten of them. A plain list, two columns when there is room, each one saying
   what it is and what it will hand you.
   -------------------------------------------------------------------------- */

.apa-res-forms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 26px;
  background: var(--apa-res-rule);
  border: 1px solid var(--apa-res-rule);
  border-radius: 12px;
  overflow: hidden;
}

.apa-res-form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: #fff;
  color: var(--apa-res-navy);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  overflow: hidden;
  transition: color .25s ease;
}

/* The fill fades up under the row rather than wiping across it — the row is
   being pointed at, not activated, and a directional wipe implied more than
   that.

   It is a `::before` whose opacity is transitioned, not the row's own
   `background-color`. Opacity is a compositor property and colour is not, so
   this is one cheap layer per row instead of a repaint of all ten every frame
   while the pointer travels down the list. */
.apa-res-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apa-res-wash);
  opacity: 0;
  transition: opacity .35s ease;
}

.apa-res-form:hover::before,
.apa-res-form:focus::before { opacity: 1; }

/* the row's own content has to ride above the wash — `::before` is painted
   after the element's background but the text is an in-flow child, so without
   a stacking position of its own the wash would cover it */
.apa-res-form > * { position: relative; z-index: 1; }

/* The label does NOT change colour. The wash is the whole signal, and a second
   one competing with it made the row busier without making it clearer.

   It has to be said explicitly, though: the theme has its own `a:hover` rule
   that turns every link #d24641, so leaving this out does not mean "no change"
   — it means the theme's red, which lands at about 4.3:1 on this fill. Holding
   the navy keeps the row at 7.3:1. */
.apa-res-form:hover,
.apa-res-form:focus { color: var(--apa-res-navy); }

/* the file type, so nobody has to guess what a click will do */
.apa-res-form em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--apa-res-ground);
  color: #7d8a9e;
}

.apa-res-form:hover em,
.apa-res-form:focus em {
  background: #fff;
  color: var(--apa-res-navy);
}

/* --------------------------------------------------------------------------
   4 · Prose — the prescriptions policy
   -------------------------------------------------------------------------- */

/* The cards run the full width of the section, so their edges line up with the
   forms grid above them and the link groups below — the page reads as one
   column of blocks rather than a wide one, a narrow one and a wide one. */
.apa-res-prose { margin-top: 22px; }

/* Each of the two policies gets a panel of its own — refills, then ADD/ADHD —
   so that a long stretch of rules reads as two things rather than one wall.

   The tint is the brand's blue, not the muted red the rows use on hover. That
   is deliberate: on this page red now means "you can touch this", and these
   panels are something to read. Keeping them apart stops a static block from
   looking like a row that is permanently lit. */
.apa-res-card {
  position: relative;
  padding: 32px 40px;
  border-radius: 16px;
  background: #eff4fa;
  box-shadow: 0 1px 2px rgba(9, 24, 41, .05);
  transition: transform .5s var(--apa-res-glide),
              box-shadow .5s var(--apa-res-glide);
}

/* The depth answers the cursor: the card tips a couple of degrees toward the
   pointer and a soft highlight follows it across the surface. The angles and
   the highlight's position come from resources.js as four custom properties;
   with no script the card is simply a flat panel that lifts on hover, which is
   the same design with one layer missing rather than a broken one. */
.apa-res-card:hover {
  transform: perspective(1100px)
             rotateX(var(--apa-rx, 0deg))
             rotateY(var(--apa-ry, 0deg))
             translateY(-3px);
  box-shadow: 0 22px 46px rgba(9, 24, 41, .16),
              0 2px 6px rgba(9, 24, 41, .06);
}

/* `::before`, so it sits under the type. A white radial painted over the
   paragraphs would wash them out wherever the pointer went. */
.apa-res-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--apa-mx, 50%) var(--apa-my, 50%),
              rgba(255, 255, 255, .92),
              rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity .45s ease;
}

.apa-res-card:hover::before { opacity: 1; }

.apa-res-card > * { position: relative; z-index: 1; }

.apa-res-card + .apa-res-card { margin-top: 18px; }

/* The card is full width; the sentences inside it are not. Left to itself the
   policy would set at about 105 characters a line, which is roughly twice a
   comfortable measure — so the text keeps its own and the card keeps the
   width. */
.apa-res-card p { max-width: 58rem; }

.apa-res-card h3:first-child { margin-top: 0; }

.apa-res-prose h3 {
  margin: 34px 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apa-res-navy);
}

.apa-res-prose h3:first-child { margin-top: 0; }

.apa-res-prose p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--apa-res-body);
}

.apa-res-prose p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5 · Links worth keeping
   --------------------------------------------------------------------------
   Every outside site the old page pointed at, in one place, under the headings
   it used — and each one named. "CLICK HERE" appeared three times and told you
   nothing about where you were going.
   -------------------------------------------------------------------------- */

.apa-res-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-top: 30px;
}

.apa-res-group h3 {
  align-self: start;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--apa-res-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apa-res-navy);
}

/* The negative margin is what keeps the fill honest: the row is padded so the
   wash has room to breathe, then pulled back by the same amount so the type
   still starts on the group heading's left edge rather than stepping in. */
.apa-res-link {
  position: relative;
  display: block;
  padding: 16px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--apa-res-rule);
  text-decoration: none;
  overflow: hidden;
}

/* the same wash as the form rows, faded in the same way and for the same
   reason — opacity is a compositor property, background-color is not */
.apa-res-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apa-res-wash);
  opacity: 0;
  transition: opacity .35s ease;
}

.apa-res-link:hover::before,
.apa-res-link:focus::before { opacity: 1; }

.apa-res-link > * { position: relative; z-index: 1; }

.apa-res-link b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--apa-res-navy);
}

.apa-res-link span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--apa-res-body);
}

/* Held, not left alone: the theme's own `a:hover` would otherwise repaint the
   title #d24641, which is both a second signal competing with the wash and a
   weaker contrast on it. */
.apa-res-link:hover b,
.apa-res-link:focus b { color: var(--apa-res-navy); }

/* --------------------------------------------------------------------------
   6 · Reaching us
   -------------------------------------------------------------------------- */

.apa-res-contact {
  max-width: 1180px;
  margin: 0 auto 8px;
  padding: 34px 26px;
}

.apa-res-contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 30px 30px;
  border-radius: 16px;
  background: var(--apa-res-ground);
}

.apa-res-contact a,
.apa-res-contact p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--apa-res-navy);
  text-decoration: none;
}

.apa-res-contact a:hover,
.apa-res-contact a:focus { color: var(--apa-res-red); }

.apa-res-contact small {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apa-res-red);
}

/* --------------------------------------------------------------------------
   7 · Wider
   -------------------------------------------------------------------------- */

@media screen and (min-width: 48em) {
  .apa-res-sec     { padding: 78px 34px; }
  .apa-res-contact { padding: 40px 34px; }

  .apa-res-tasks   { grid-template-columns: repeat(3, 1fr); }
  .apa-res-forms   { grid-template-columns: 1fr 1fr; }

  /* The two groups share one set of rows rather than stacking independently,
     so the first link in each column sits on the same line as the other's,
     and so on down — a two-line description on the left no longer pushes its
     whole column out of step with the right.

     `subgrid` does it without touching the markup: the parent owns the rows,
     each group spans all of them and inherits them. The row count has to match
     the longest group — five: one heading and four links. Add a fifth link to
     either group and this number has to go with it.

     Where subgrid is not supported the groups simply fall back to stacking,
     which is what they did before. */
  .apa-res-groups {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    column-gap: 40px;
    row-gap: 0;
  }

  .apa-res-group {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }

  .apa-res-contact-inner { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* --------------------------------------------------------------------------
   8 · Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .apa-res-card,
  .apa-res-card::before { transition: none; }

  .apa-res-card:hover { transform: none; }
  .apa-res-card:hover::before { opacity: 0; }

  .apa-res-task,
  .apa-res-task b::after,
  .apa-res-form::before { transition: none; }

  .apa-res-task:hover,
  .apa-res-task:focus { transform: none; }

  .apa-res-task:hover b::after,
  .apa-res-task:focus b::after { transform: translateY(-2px); }
}