/* Certificate pages: the public page of a credential, the participant's
   list and the 404. The look follows the Rustcamp site: Montserrat,
   orange #F78524 with dark text on it, #B45309 for orange text and the
   focus ring on white, plain text on white with framed side cards. */

/* Page and certificate fonts. The inline certificate uses them by name.
   The page loads WOFF2 cut to Latin and Cyrillic; the TTF next to them are
   for the PDF and the link preview, whose renderers do not read WOFF2.
   Russo One stays TTF: it is small, and its license reserves the name
   for the unchanged font. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/GreatVibes-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Russo One";
  src: url("../fonts/RussoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Light only, as the meta tag of base.html says, so a browser's own dark
     mode does not turn the page and the inline certificate dark. */
  color-scheme: only light;
  --text: #111111;
  --text-muted: #5c5c5c;
  --link: #b45309;
  --accent: #f78524;
  --accent-hover: #e8761a;
  --accent-soft: #fff4ec;
  --surface: #f5f5f5;
  --border: #dedede;
  --chip: #f2f2f2;
  --radius: 6px;
  --radius-card: 10px;
  --ua-blue: #0a5ab6;
  --ua-yellow: #fdcf17;
  --gutter: 16px;
}

* { box-sizing: border-box; }

/* Elements styled with display: flex or grid still hide when hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--text); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon { display: inline-flex; vertical-align: -0.125em; }
.icon svg { width: 1em; height: 1em; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand__logo { width: 32px; height: 32px; }

/* The certificate on a grey band, like a sheet of paper. It opens full
   size: on phones it is too small to read. */
.hero {
  background: var(--surface);
  padding: 32px 0;
}
.certificate {
  margin: 0 auto;
  max-width: 880px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}
.certificate svg {
  display: block;
  width: 100%;
  height: auto;
}
.certificate__open { display: block; cursor: zoom-in; }
.certificate__open:focus-visible { outline-offset: 4px; }

/* One column on phones: title, share card, details, issuer card.
   Two columns on wide screens: the title and the share card side by
   side, then the details with the issuer card next to them. The title
   block and the share card are about as tall, so neither row leaves a
   gap. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "share" "body" "issuer";
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 56px;
}
.details--head { grid-area: head; }
.details--body { grid-area: body; }
.layout__share { grid-area: share; }
.layout__issuer { grid-area: issuer; }
.details--head > :last-child { margin-bottom: 0; }
/* On phones the grade comes right after the description, not at the end. */
/* position: relative keeps the screen-reader-only labels inside, so a
   folded block clips them instead of stretching the page below. */
.details__content { position: relative; display: flex; flex-direction: column; }
.details__content > .description { order: -2; }
.details__content > .block--grade { order: -1; }
@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head share" "body issuer";
    gap: 32px 48px;
    align-items: start;
  }
  /* One column on smaller screens: the grade card takes the full width. */
  .grade { max-width: 280px; }
  .details__content { display: block; }
}

/* Details */
.title {
  margin: 0 0 10px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Valid or expired, right under the name: the first thing whoever
   checks the certificate looks for. */
.validity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 4px 14px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}
.validity--valid { background: #e7f5ea; color: #1b6b30; }
.validity--expired { background: #fdecec; color: #a31515; }
.record-note {
  margin: 4px 0 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.participant {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 16px;
}
.participant__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
}
.participant__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* At least 24px tall, the WCAG 2.2 minimum for a link on its own. */
.participant a { display: inline-block; padding: 2px 0; font-size: 0.9375rem; }

.description { margin: 0 0 32px; }

.block { margin-bottom: 32px; }
.block__title {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.label,
.dates dt {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tags,
.criteria,
.share,
.issuer-home__profiles {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 4px 12px;
  border-radius: var(--radius);
  background: var(--chip);
  font-size: 0.875rem;
}

.dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 32px;
}
.dates dd { margin: 0; }

.criteria { margin-bottom: 16px; }
.criterion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.criterion__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  padding: 2px 12px;
  border-radius: var(--radius);
  background: var(--chip);
  font-size: 0.875rem;
}
.criterion__kind .icon { color: var(--link); }

/* Criteria: links in the text colour, orange on hover; the PDF icon
   stays orange. */
.criterion a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.criterion a:hover { color: var(--link); }
.criterion a .icon { color: var(--link); }

/* The grade: the cohort's grades as bars five points wide, this grade's
   bar in orange with the grade over it. */
.grade {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.grade p { margin: 0 0 4px; }
.grade__chart { display: block; width: 100%; height: auto; margin: 8px 0 12px; }
.grade__axis { stroke: var(--border); }
.grade__bar { fill: #fde6d2; }
.grade__bar--mine { fill: var(--accent); }
.grade__label { fill: var(--text); font: 700 10px "Montserrat", sans-serif; }
.grade__tick { fill: var(--text-muted); font: 500 8px "Montserrat", sans-serif; }
.grade__value {
  color: var(--text);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Side cards */
.card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}
.card p { margin: 0 0 16px; }
.card__title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.issuer-card { display: flex; align-items: center; gap: 10px; }
.issuer__logo { width: 32px; height: 32px; }

/* Buttons come in two kinds.
   Plain: white, a grey frame, light orange on hover. Download PDF, the
   share icons, Visit Issuer Website, Share once it is open.
   Accent: orange with dark text (8:1), a darker orange on hover. Add to
   LinkedIn profile and Share on phones: the one main action. */
.action,
.share__link,
.button,
.show-more,
.share-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.action:hover,
.share__link:hover,
.button:hover,
.show-more:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.button--accent,
.share-card__toggle {
  border-color: var(--accent);
  background: var(--accent);
}
.button--accent:hover,
.share-card__toggle:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--text);
}
.action { padding: 0 16px; font-size: 0.875rem; }
.button { width: 100%; padding: 8px 16px; }

/* Share: a light card with an orange strip laid over its top edge, so
   the frame's corners stay square under it. The buttons share the card
   width equally, so the row lines up with the wide button under it. */
.share-card {
  position: relative;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.share-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 4px;
  background: var(--accent);
}
.share-card__lead { color: var(--text-muted); }
.share { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 8px; }
.share__link { display: flex; height: 44px; }
.share__link svg { width: 20px; height: 20px; }
.share-card .button--accent { margin-top: 16px; }

/* Phones with the script: the share card becomes a bar fixed to the
   bottom of the screen; Share opens the options above it. */
.share-card__toggle { padding: 8px 16px; }
/* An arrow says which way the bar goes: up to open, down to fold. Open,
   the toggle turns plain, so Add to LinkedIn profile is the one orange
   button on screen. */
.share-card__toggle::after {
  content: "";
  border: 5px solid transparent;
  border-bottom-color: currentColor;
  transform: translateY(-3px);
}
.share-card__toggle[aria-expanded="true"] { border-color: var(--border); background: #fff; }
.share-card__toggle[aria-expanded="true"]:hover { border-color: var(--accent); background: var(--accent-soft); }
.share-card__toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(180deg); }
.share-card__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.share-card--bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  grid-area: auto;
  margin: 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-radius: 0;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.15);
}
.share-card--bar::before { right: 0; left: 0; }
.share-card--bar .share-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-card--bar .card__title { flex: 1; margin: 0; font-size: 0.9375rem; }
.share-card--bar .share-card__lead { display: none; }
/* The options fold to zero height and open by animating the row from
   0fr to 1fr. The padding keeps focus rings inside the clipped box. */
.share-card--bar .share-card__options {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease, margin-top 0.25s ease;
}
.share-card--bar.is-open .share-card__options { grid-template-rows: 1fr; margin-top: 12px; }
.share-card--bar .share-card__options-inner {
  min-height: 0;
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  /* The padding would show a strip of the buttons while folded, so the
     options also go invisible, once the fold has finished. */
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.share-card--bar.is-open .share-card__options-inner {
  visibility: visible;
  transition-delay: 0s;
}
.share-card--bar {
  transition: transform 0.25s ease-in;
  animation: bar-in 0.3s ease-out;
}
.share-card--bar.is-leaving { transform: translateY(110%); }
.share-card.is-arriving { animation: card-in 0.35s ease-out; }
@keyframes bar-in { from { transform: translateY(100%); } }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
/* Room under the page for the bar, so it never covers the footer. */
.has-share-bar { padding-bottom: 76px; }
.has-share-bar .layout { grid-template-areas: "head" "body" "issuer"; }

/* Phones with the script: the details fold under Show more. */
.details__content { transition: max-height 0.35s ease; }
.details--body.is-collapsed .details__content {
  max-height: 7.5rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 25%, transparent);
}
.details--body.is-moving .details__content { overflow: hidden; }
/* Show more is text, not a button box: centred, no frame, no fill,
   orange on hover. Still 44px tall to tap. */
.show-more,
.show-more:hover {
  border: 0;
  background: none;
}
.show-more {
  display: flex;
  margin: 8px auto 0;
  padding: 8px 18px;
}
.show-more:hover { color: var(--link); }
.show-more::before {
  content: "";
  border: 5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(3px);
}
.show-more[aria-expanded="true"]::before { transform: translateY(-3px) rotate(180deg); }

/* No sliding or growing for readers who turned motion off. */
@media (prefers-reduced-motion: reduce) {
  .details__content,
  .share-card--bar,
  .share-card--bar .share-card__options,
  .share-card--bar .share-card__options-inner { transition: none; }
  .share-card--bar,
  .share-card.is-arriving { animation: none; }
}

/* Participant's certificates */
.profile {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.profile__inner { display: flex; align-items: center; gap: 16px; }
.participant__avatar--large { width: 56px; height: 56px; font-size: 1.125rem; }
.profile__name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.profile__count { margin: 0; color: var(--text-muted); }

.credentials { padding-top: 24px; padding-bottom: 48px; }
.credentials__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The whole card is clickable through the title link, so keyboards and
   screen readers meet one link per card. */
.credential-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}
.credential-card:hover { border-color: var(--accent); }
.credential-card:has(.credential-card__link:focus-visible) {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}
.credential-card__image { padding: 20px; background: var(--surface); }
.credential-card__image svg {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.15);
}
.credential-card__body { padding: 16px 20px 20px; }
.credential-card__title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.credential-card__link { color: var(--text); text-decoration: none; }
.credential-card__link::after { content: ""; position: absolute; inset: 0; }
/* Browsers with :has() ring the whole card instead of the link. */
@supports selector(:has(*)) {
  .credential-card__link:focus-visible { outline: none; }
}
.credential-card:hover .credential-card__link { color: var(--link); text-decoration: underline; }
.credential-card__subtitle { margin: 0 0 8px; color: var(--text-muted); }
.credential-card__date { margin: 0; font-size: 0.875rem; }
.credential-card .status { margin-left: 4px; }

/* 404 */
.not-found { padding-top: 64px; padding-bottom: 96px; max-width: 640px; }
.not-found .button { width: auto; }
.preview-links li { margin-bottom: 8px; }

/* Home: the issuer, as on its Accredible page. The logo stands beside the
   name and the text; on a phone the text goes under the two. */
.issuer-home { padding-top: 48px; padding-bottom: 72px; }
.issuer-home__inner {
  display: grid;
  grid-template-columns: 160px minmax(0, 720px);
  grid-template-areas: "logo name" "logo text";
  align-content: start;
  gap: 12px 40px;
}
.issuer-home__logo {
  grid-area: logo;
  width: 160px;
  height: 160px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
}
.issuer-home__text { grid-area: text; }
.issuer-home__name {
  grid-area: name;
  align-self: end;
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
}
.issuer-home__description { margin: 0 0 20px; }
.issuer-home__profiles { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.issuer-home__profiles a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
}
.issuer-home__profiles .icon svg { width: 20px; height: 20px; }
@media (max-width: 599px) {
  .issuer-home { padding-top: 32px; }
  .issuer-home__inner {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "logo name" "text text";
    gap: 20px 16px;
  }
  .issuer-home__logo { width: 72px; height: 72px; padding: 8px; }
  .issuer-home__name { align-self: center; font-size: 1.5rem; }
}

/* Footer: white, with the blue and yellow stripe of the site */
.site-footer {
  /* Tall enough for the stripe where the footer has no text. */
  min-height: 48px;
  border-top: 1px solid var(--border);
  background: #fff;
  box-shadow: inset 0 3px 0 var(--ua-blue), inset 0 6px 0 var(--ua-yellow);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.site-footer p { margin: 0; padding: 28px 0 24px; }

/* The focus ring is dark orange: 4.9:1 on white, where the light accent
   would be 2.2:1. */
a:focus-visible,
.button:focus-visible,
.action:focus-visible,
.share__link:focus-visible,
.show-more:focus-visible,
.share-card__toggle:focus-visible,
.share-card__close:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}
/* Headings get focus only so a reader is not lost when the share bar
   closes; they are not controls, so no ring. */
[tabindex="-1"]:focus { outline: none; }

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.status {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 600;
  vertical-align: 1px;
}
.status--expired { background: #fdecec; color: #a31515; }