/* ==========================================================================
   Icons — inline SVG sizing and colour.
   Icons are decorative unless they are the only content of a control, in
   which case the control carries an accessible name in the markup.
   ========================================================================== */

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--arrow { width: 1.15em; height: 1.15em; }
.icon--sm    { width: .9em;  height: .9em;  }
.icon--lg    { width: 1.5em; height: 1.5em; }

/* Solid-shape icons (social marks) paint with fill, not stroke */
.icon--solid { fill: currentColor; stroke: none; }

/* --- Social links --------------------------------------------------------- */
.social {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin-top: 20px;
}
/* The anchors are inline-flex, so without this the list items align on the
   text baseline and the icons sit at slightly different heights. */
.social li { display: flex; align-items: center; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px keeps the target comfortably above the WCAG 2.2 minimum */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--c-white);
  font-size: 18px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.social a:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}

/* --- Contact line icons --------------------------------------------------- */
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-line .icon { margin-top: .45em; color: var(--c-sage); }

/* --- Accordion marker ----------------------------------------------------- */
.accordion__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
}
details[open] .accordion__icon { transform: rotate(45deg); }

/* --- Ticked feature lists ------------------------------------------------- */
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks .icon { margin-top: .4em; color: var(--c-accent-dark); }

/* --- Icons inside buttons ------------------------------------------------
   The original renders these as 16px Font Awesome glyphs after the label. */
.btn .icon { width: 16px; height: 16px; }
.icon--fa   { fill: currentColor; stroke: none; }
.icon--thin { width: 16px; height: 10px; fill: currentColor; stroke: none; }