/* Links & Resources page only. Loaded after site.css. */

/* --------------------------------------------------------------- layout */

/* The four anchor targets here used to carry scroll-margin-top:80px so they
   cleared the sticky header. All four are `main > section`, which site.css now
   gives 77px, so this said the same thing three pixels differently. It also won
   on ID specificity, which is what broke every section jump on this page: a
   jump tests its target against where a click will leave it, and this moved
   that place here and nowhere else. */

.lr-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}

.lr-two--prc {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
}

.lr-stack {
  display: grid;
  align-content: start;
  gap: 16px;
}

/* The copy column, widened for this hero only.
 *
 * The default --col is a reading measure, which is right for a hero holding a
 * paragraph. This one holds four jump chips instead, and at 590px the fourth
 * wrapped onto a line of its own. The chips need 688px together, so the column
 * is set wide enough to hold them and the minmax(0, ...) in site.css still
 * lets it shrink when the viewport cannot spare the room.
 *
 * This stylesheet loads after site.css, so the plain .page-hero selector is
 * enough; it does not need to out-specify anything. */
.page-hero {
  --col: 720px;
}

/* --------------------------------------------------------- hero jump list */

.lr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  list-style: none;
}

.lr-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;

  /* Was translucent white, for the navy hero these used to sit on. On the
     light ground that is invisible. */
  color: var(--text-link);
  background: #fff;
  transition:
    background var(--dur-micro) ease,
    border-color var(--dur-micro) ease,
    color var(--dur-micro) ease;
}

.lr-jump a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------- files */

/* File-type icons, shared by the accordion rows, the guide cards and the
 * criteria button.
 *
 * They were the file-type conventions, red for PDF and green for XLSX. Both
 * take the page accent now: the glyph already differs between the two and the
 * label beside it spells the format out, so the color was carrying no
 * information the reader did not already have, and two off-palette colors on a
 * themed page read as strays. The two classes stay separate because the
 * markup and the generators write them, and because the split is the place to
 * put the color back if it is ever wanted. */
.lr-file--pdf,
.lr-file--xlsx {
  color: var(--primary);
}

.lr-download {
  justify-self: start;
  padding: 14px 22px;
  gap: 12px;
}

/* ------------------------------------------------------ download accordion */

.dl {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.dl__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
}

/* Safari still paints the disclosure triangle without this. */
.dl__summary::-webkit-details-marker {
  display: none;
}

.dl__chev {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--primary);
  transition: transform var(--dur-micro) ease;
}

.dl[open] .dl__chev {
  transform: rotate(180deg);
}

.dl__list {
  list-style: none;
  display: grid;
  gap: 1px;
  padding: 0 22px 18px;
}

.dl__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-body);
  transition: background var(--dur-micro) ease;
}

a.dl__row:hover {
  background: var(--grey-100);
  text-decoration: none;
}

/*
 * The design hands over a real URL for the v5.3.1 English workbook only; every
 * other language and version is a "#" placeholder in the prototype. Those rows
 * carry the published file name but no href yet, so they render as plain text
 * rather than as links that go nowhere. Give them an href and drop the
 * modifier when the client supplies the URLs.
 */
.dl__row--pending,
.dl__row--pending .dl__icon {
  color: var(--text-muted);
}

.dl__icon {
  flex: 0 0 auto;
  font-size: 19px;
}

/* ---------------------------------------------------------- guide cards */

.lr-guides {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.lr-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--text-body);
  transition: box-shadow var(--dur-micro) ease;
}

.lr-guide:hover {
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.lr-guide__icon {
  font-size: 26px;
}

.lr-guide__text {
  display: grid;
  gap: 4px;
}

.lr-guide__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy-800);
}

.lr-guide__kind {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lr-previous {
  max-width: 620px;
}

/* --------------------------------------------------- translation sponsor */

.lr-sponsor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.lr-sponsor img {
  display: block;
  width: auto;
  height: 26px;
}

/* ------------------------------------------------- partner resource center */

/* A white button on the blue section. It was written for the navy band this
 * section used to be, where --primary had too little contrast; on TPN blue a
 * --primary button would be the band's own color and invisible, so the reason
 * changed and the answer did not. .btn--ghost reads as secondary, and this is
 * the section's only CTA. */
.lr-btn-light,
.lr-btn-light:hover {
  justify-self: start;
  padding: 14px 22px;
  background: #fff;
  border-color: #fff;
  color: var(--navy-800);
}

.lr-btn-light:hover {
  background: var(--grey-200);
  border-color: var(--grey-200);
}

.lr-prc__mark {
  display: grid;
  place-items: center;
}

.lr-prc__mark img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  opacity: 0.9;
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 900px) {
  .lr-two,
  .lr-two--prc {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  /* 44px hit targets on touch. */
  .lr-jump a {
    min-height: 44px;
  }
}