/* IQAS accreditation mark component (see js/iqas-mark.js).
   Symbol with the certificate number directly beneath, on a plain white
   ground. No outline, shadow, filter or recolouring may be added here. */
.iqas-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #ffffff;
}
.iqas-mark img {
  display: block;
  width: auto;
  max-width: none;
  border: 0;
  box-shadow: none;
  filter: none;
}
.iqas-mark__cert {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #111827;
}

/* ---- Placements (design brief, section 3) --------------------------------
   Every placement of the symbol is styled here, so the whole set can be
   found and removed in one place. Clear space around the symbol: at least
   its own height from any other logo or certification mark. */

/* P1 - homepage accreditation strip: symbol (48px) left, one line of text
   right. Single row, no card. The row leaves room for the ILAC MRA mark to
   the left of the symbol later.
   It is the last row INSIDE the hero (user's request, 7 Oct 2026), after the
   stats cards, so it has no band of its own: it sits on the hero's backdrop.
   The symbol keeps a white ground of its own, as IQAS-007 requires, on a
   small plate that holds the certificate number too (as in the footer). */
.iqas-strip {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 28px;
  margin-top: clamp(26px, 3vw, 40px);
}
/* The hero copy is a grid above 1024px and a flex column below it; in both,
   this row comes last and spans the full width, like the stats row. It is
   inside .hero-wrap so the car artwork, which is sized to .hero-wrap, runs
   behind it to the bottom of the hero (user, 7 Oct 2026). */
@media (min-width: 1025px) {
  .iqas-strip { grid-column: 1 / -1; grid-row: 6; margin-top: clamp(10px, 1.8vh, 22px); }
  /* Shrinks a little on short screens so the whole hero fits one view. */
  .iqas-strip .iqas-mark img { height: clamp(26px, 3.7vh, 34px); width: auto; }
}
@media (min-width: 1025px) and (max-height: 720px) {
  .iqas-strip { margin-top: 8px; }
  .iqas-strip .iqas-mark img { height: 26px; }
}
@media (max-width: 1024px) { .iqas-strip { order: 7; } }
.iqas-strip .iqas-mark { flex: none; padding: 4px 10px 6px; border-radius: 6px; }
.iqas-strip .iqas-mark__cert { font-size: 11px; }
/* Symbol 34px tall in the hero strip (was 48px): the user found the wide
   combined mark too large there (7 Oct 2026). */
.iqas-strip__text { margin: 0; color: #c7cbe0; font-size: .98rem; line-height: 1.6; }
.iqas-strip__text a { color: #86a8f0; font-weight: 700; text-decoration: none; white-space: nowrap; }
.iqas-strip__text a:hover { color: #ffffff; }
@media (max-width: 720px) {
  .iqas-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* P4 - "Accredited" callout on the accredited service pages: two lines,
   symbol 40px at left.
   It sits on the lavender intro band, so it takes the site's own card for
   that band (.reality-note in css/interior.css): white, faint purple border,
   12px radius, soft shadow, purple link. The brief's #F4F8FA panel and teal
   left rule clashed with the lavender and are off-palette (the user asked for
   it to match the backdrop, 7 Oct 2026); white is the brief's other allowed
   ground for the symbol. */
.iqas-callout {
  display: flex; align-items: center; gap: 22px;
  margin-top: 2.2rem; padding: 1.2rem 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(73, 41, 154, 0.14);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 59, 0.06);
}
.iqas-callout .iqas-mark { flex: none; }
.iqas-callout .iqas-mark__cert { font-size: 12px; }
.iqas-callout__text { color: rgba(0, 0, 59, 0.8); font-size: 1.02rem; line-height: 1.65; }
.iqas-callout__text span { display: block; }
.iqas-callout__text a { color: #49299A; font-weight: 600; text-decoration: none; white-space: nowrap; }
.iqas-callout__text a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .iqas-callout { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* P5 - news post header image, centred directly under the post title and
   stacked like the P7 share image (user's layout, 7 Oct 2026): dark
   wordmark, IQAS symbol, certificate number, one line of text, on white.
   Built from the component, not a baked-in image. The wordmark sits close
   above the symbol (user's request, 7 Oct 2026: the symbol-height gap read
   as too much); the symbol stays clear of every other organisation's mark. */
.iqas-post-header {
  display: flex; flex-direction: column; align-items: center;
  width: fit-content; max-width: 100%;
  margin: .4rem auto .2rem; padding: 30px 44px 28px;
  background: #ffffff; border-radius: 14px;
}
.iqas-post-header__wordmark { display: block; width: 240px; max-width: 100%; height: auto; margin-bottom: 20px; }
.iqas-post-header .iqas-mark { gap: 5px; }
.iqas-post-header .iqas-mark__cert { font-size: 14px; }
.iqas-post-header__line {
  margin: 18px 0 0; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.35;
  color: #00003B;
}
@media (max-width: 560px) {
  .iqas-post-header { padding: 24px 22px; }
  .iqas-post-header__wordmark { width: 190px; }
  .iqas-post-header__line { font-size: .95rem; }
}

/* P6 - footer, in the row with the ISO 9001 and ISO 27001 marks, linking to
   /accreditation. The combined mark is wide, so at the badges' full 62px it
   looked far bigger than the round ISO marks (user, 7 Oct 2026): the symbol
   is 30px (brief minimum 24px) on a plate about 50px tall, centred against
   the 62px badges. The gap to the badges is 16px, close to the 12px between
   the two ISO badges (the user found the 40px clear-space gap too big).
   The caption is wider than the plate, so it is absolutely positioned,
   centred under the plate, and does not widen the row; margin-bottom keeps
   room for its two lines above the legal links. */
.site-footer .footer-certs { align-items: flex-start; }
.footer-iqas {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-right: 4px; /* + the row's 12px gap = 16px */
  margin-bottom: 44px;
  text-decoration: none;
}
.footer-iqas .iqas-mark {
  box-sizing: border-box; justify-content: center; gap: 2px;
  margin-top: 6px; padding: 4px 8px; border-radius: 5px;
}
.footer-iqas .iqas-mark__cert { font-size: 9.5px; line-height: 1.15; }
.footer-iqas .footer-iqas__caption {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 180px; margin-top: 6px; text-align: center;
  color: rgba(234, 238, 252, .7); font-size: 10.5px; line-height: 1.4;
}
.footer-iqas:hover .footer-iqas__caption { color: #ffffff; }

/* Blog listing card for the accreditation news post: the banner is a white
   panel with the combined ILAC MRA + IQAS mark and its certificate number,
   centred (the black-and-white mark is too wide to share the banner with the
   title, so the title sits in the card body instead). */
.page-blog .post-thumb.post-thumb--iqas { background: #ffffff; justify-content: center; }
.page-blog .post-thumb.post-thumb--iqas::before { display: none; }
.page-blog .post-thumb--iqas .iqas-mark .iqas-mark__cert { font-size: 13px; }