/*
 * Finance Toolkit — archive.css
 * Category / country / catalog archive pages, styled per the design system.
 * Colours only via var(--ds-*) (rule 15); RTL-safe via logical properties.
 */

/* The directory sits inside the site theme, which may be light or dark. To avoid
   a dark/light clash, the cards & filter bar use one fixed, high-contrast LIGHT
   card scheme (readable on any background), while text that sits directly on the
   theme background (heading, description, count) inherits the theme's colour. */
.ftk-archive {
  --ds-surface: var(--theme-palette-color-8);
  --ds-on-surface: var(--theme-palette-color-3);
  --ds-card: var(--theme-palette-color-8);
  --ds-on-card: var(--theme-palette-color-3);
  --ds-muted: var(--theme-palette-color-13);
  --ds-on-muted: var(--theme-palette-color-11);
  --ds-accent: var(--theme-palette-color-13);
  --ds-border: var(--theme-palette-color-12);
  --ds-input-border: var(--theme-palette-color-12);
  --ds-primary: var(--theme-palette-color-1);
  --ds-primary-container: var(--theme-palette-color-6);
  --ds-on-primary-container: var(--theme-palette-color-3);
  --ds-link: var(--theme-palette-color-1);

  max-width: 1100px;
  margin: 0 auto;
  padding: var(--ds-space-8) var(--ds-space-4);
  font-family: var(--ds-font);
  color: inherit;
  line-height: var(--ds-lh-body);
}

.ftk-archive__header {
  margin-bottom: var(--ds-space-6);
}
.ftk-archive__header h1 {
  font-size: var(--ds-text-4xl);
  line-height: var(--ds-lh-heading);
  font-weight: 700;
  margin: 0 0 var(--ds-space-3);
  color: inherit;
}
.ftk-archive__desc {
  font-size: var(--ds-text-lg);
  opacity: 0.8;
  max-width: 65ch;
}

/* Filter bar — a muted panel card. */
.ftk-directory__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  align-items: flex-end;
  margin: var(--ds-space-6) 0;
  padding: var(--ds-space-5) var(--ds-space-6);
  background: var(--ds-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}
.ftk-directory__field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  flex: 1 1 12rem;
  min-width: 0;
}
.ftk-directory__field label {
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-on-surface);
}
.ftk-directory__field select {
  width: 100%;
  min-width: 0;
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-size: var(--ds-text-sm);
}
.ftk-directory__field select:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
  border-color: var(--ds-primary);
}
.ftk-directory__reset {
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ds-motion-micro) var(--ds-ease);
}
.ftk-directory__reset:hover {
  background: var(--ds-accent);
}

.ftk-directory__count {
  margin: var(--ds-space-2) 0 var(--ds-space-5);
  font-size: var(--ds-text-sm);
  color: inherit;
  opacity: 0.75;
}

/* Card grid. */
.ftk-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--ds-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Fixed column counts (Settings → Archive). Collapse to the auto grid on
   narrow screens so cards never get crushed. */
@media (min-width: 700px) {
  .ftk-directory__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftk-directory__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftk-directory__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ftk-directory__card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-6);
  background: var(--ds-card);
  color: var(--ds-on-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow var(--ds-motion-base) var(--ds-ease),
    transform var(--ds-motion-base) var(--ds-ease);
}
.ftk-directory__card:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
}
.ftk-directory__card.is-hidden {
  display: none !important;
}
.ftk-directory__card a,
.ftk-directory__card-title {
  text-decoration: none;
  color: var(--ds-link);
  font-weight: 600;
  font-size: var(--ds-text-lg);
  line-height: var(--ds-lh-heading);
}
.ftk-directory__card-title {
  color: var(--ds-on-surface);
}
.ftk-directory__card a:hover {
  text-decoration: underline;
}
.ftk-directory__soon {
  display: block;
  font-size: var(--ds-text-sm);
  color: var(--ds-on-muted);
}
/* Short summary (the post excerpt) under the card title. */
.ftk-directory__excerpt {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-body);
  color: var(--ds-on-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges — primary-container chips; Pro is emphasised. */
.ftk-directory__badges {
  margin-top: var(--ds-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.ftk-directory__badge {
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-primary-container);
  color: var(--ds-on-primary-container);
}

.ftk-directory__empty {
  margin: var(--ds-space-8) 0;
  color: var(--ds-on-muted);
  font-style: italic;
}

/* Faceted archive filter (country + category + year + access + AND/OR), shown at
   the top of the tool catalog and the country / category archives. It sits
   OUTSIDE .ftk-archive (in the theme's archive header), so it carries the same
   light-panel token scheme itself to stay readable on any theme background. */
.ftk-facets {
  --ds-surface: var(--theme-palette-color-8);
  --ds-on-surface: var(--theme-palette-color-3);
  --ds-muted: var(--theme-palette-color-13);
  --ds-border: var(--theme-palette-color-12);
  --ds-input-border: var(--theme-palette-color-12);
  --ds-primary: var(--theme-palette-color-1);

  margin: 0 0 var(--ds-space-6);
  padding: var(--ds-space-5) var(--ds-space-6);
  background: var(--ds-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-on-surface);
}
.ftk-facets__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  align-items: flex-end;
}
.ftk-facets__field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  flex: 1 1 140px;
  min-width: 0;
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-on-surface);
}
.ftk-facets__field select {
  width: 100%;
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 400;
}
.ftk-facets__field select:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
  border-color: var(--ds-primary);
}
/* The keyword field. Same box as a facet select, but wider: it is the field a
   visitor reaches for first, and a tool name is longer than a country name. */
.ftk-facets__field--q { flex: 2 1 220px; }
.ftk-facets__field input[type="search"] {
  width: 100%;
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}
.ftk-facets__field input[type="search"]:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
  border-color: var(--ds-primary);
}
.ftk-facets__btn {
  flex: 0 0 auto;
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-6);
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-radius-md);
  background: var(--ds-primary);
  color: var(--theme-palette-color-8);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ftk-facets__btn:hover { filter: brightness(1.05); }
.ftk-facets__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-hit);
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ftk-facets__reset:hover { background: color-mix(in srgb, var(--ds-on-surface) 6%, var(--ds-surface)); }

/* Country / Category controls. Without JS the native <select> shows (text only);
   archive-filter.js upgrades [data-ftk-cselect] into a custom listbox whose every
   option carries an icon — the country flag or the category glyph. */
.ftk-facets__control { position: relative; display: block; }
/* Native select stays for the value + no-JS fallback; hidden once enhanced. */
.ftk-cselect > select {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden;
}
.ftk-cselect__btn {
  width: 100%;
  min-height: var(--ds-hit);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 400;
  text-align: start;
  cursor: pointer;
}
.ftk-cselect__btn:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
  border-color: var(--ds-primary);
}
/* The icon slot: flags are full-colour (background-image); category glyphs are
   monochrome line icons (mask + currentColor, so they follow the theme). */
.ftk-cselect__ico {
  flex: 0 0 auto;
  width: 22px;
  height: 16px;
}
.ftk-facets__field--country .ftk-cselect__ico {
  border-radius: 2px;
  background-image: var(--ftk-ico);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-on-surface) 12%, transparent);
}
.ftk-facets__field--category .ftk-cselect__ico {
  background-color: currentColor;
  -webkit-mask: var(--ftk-ico) center / contain no-repeat;
  mask: var(--ftk-ico) center / contain no-repeat;
}
.ftk-cselect__ico[data-empty] { background: none; box-shadow: none; opacity: .35; }
.ftk-cselect__txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftk-cselect__caret {
  flex: 0 0 auto;
  width: 0; height: 0;
  margin-left: 2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .55;
  transition: transform .15s ease;
}
.ftk-cselect.is-open .ftk-cselect__caret { transform: rotate(180deg); }
.ftk-cselect__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  max-height: min(320px, 56vh);
  overflow: auto;
  background: var(--ds-surface);
  color: var(--ds-on-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ds-on-surface) 22%, transparent);
  display: none;
}
.ftk-cselect.is-open .ftk-cselect__list { display: block; }
/* Stacking: lift the whole facet bar above the tool grid below it, and lift the
   currently-open field above its sibling fields AND the Filter/Reset buttons.
   Without this the list (z-index:40) is trapped in its field's stacking context
   and the later buttons / the cards underneath paint over it — which read as the
   list being transparent and sitting behind the buttons. */
.ftk-facets { position: relative; z-index: 20; }
.ftk-facets__field:has(.ftk-cselect.is-open) { position: relative; z-index: 30; }
.ftk-cselect__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--ds-space-2);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 400;
}
.ftk-cselect__opt:hover,
.ftk-cselect__opt.is-active {
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-surface));
}
.ftk-cselect__opt[aria-selected="true"] { font-weight: 700; }

/* Desktop: keep every control on a single row. */
@media (min-width: 783px) {
  .ftk-facets__row { flex-wrap: nowrap; }
  .ftk-facets__field { flex: 1 1 0; }
}

/* Mobile: compact — a slim band, not a tall stack. Two fields per row, the two
   buttons share the last row, tighter padding, smaller labels/controls. */
@media (max-width: 782px) {
  .ftk-facets { padding: var(--ds-space-2) var(--ds-space-3); }
  .ftk-facets__row { gap: var(--ds-space-2); }
  .ftk-facets__field {
    flex: 1 1 calc(50% - var(--ds-space-2));
    font-size: var(--ds-text-xs);
    gap: 2px;
  }
  /* Only the label-text span is dimmed — NOT the control span, which wraps the
     button + dropdown list (dimming it made the whole field look transparent). */
  .ftk-facets__field > span:not(.ftk-facets__control) { font-size: 11px; opacity: .85; }
  .ftk-facets__field--q { flex: 1 0 100%; }
  .ftk-facets__field select,
  .ftk-cselect__btn { min-height: 36px; }
  .ftk-cselect__ico { width: 20px; height: 14px; }
  .ftk-facets__btn,
  .ftk-facets__reset {
    flex: 1 1 calc(50% - var(--ds-space-2));
    justify-content: center;
    min-height: 38px;
    margin-top: 0;
    padding-inline: var(--ds-space-3);
  }
}

/* Blocksy renders the archive description (where the filter is injected) in a
   narrow container that is also hidden on small screens. When it holds our
   filter, make it span the full content width — matching the post grid and the
   tool pages — and stay visible on every screen. */
.page-description:has(.ftk-facets) {
  max-width: none;
  width: 100%;
  display: block;
}

/* FAQ accordion in the archive/category article (native <details>/<summary>,
   no JS). Sits inside the archive description under a "Frequently asked
   questions" heading. */
.ftk-faq-accordion {
  margin: 0 0 1.5rem;
}
.ftk-faq-item {
  border-top: 1px solid var(--theme-palette-color-12);
}
.ftk-faq-item:last-of-type {
  border-bottom: 1px solid var(--theme-palette-color-12);
}
.ftk-faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  font-weight: 600;
  color: var(--theme-palette-color-3);
}
.ftk-faq-item > summary::-webkit-details-marker { display: none; }
.ftk-faq-item > summary::after {
  content: "+";
  color: var(--theme-palette-color-1);
  font-size: 1.3rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ftk-faq-item[open] > summary::after { content: "\2013"; }
.ftk-faq-item > summary:focus-visible { outline: 2px solid var(--theme-palette-color-1); outline-offset: -2px; }
.ftk-faq-a {
  padding: 0 2px 16px;
  color: var(--theme-palette-color-11);
  line-height: 1.7;
}
.ftk-faq-a p { margin: 0; }

/* Breadcrumb (ArchiveBreadcrumb) at the top of the archive header. Mirrors the
   .ftk-crumbs rules in core.css so it is styled on archive pages, which load
   archive.css (not core.css). It sits directly under the archive title. */
.ftk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.85;
}
.ftk-crumbs a {
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
}
.ftk-crumbs a:hover {
  opacity: 1;
  text-decoration: underline;
}
.ftk-crumbs__current {
  font-weight: 600;
}
.ftk-crumbs__sep {
  opacity: 0.5;
}

/* Unified category icon tile (CategoryIcon), shown at the top of a category
   archive the same way the country flag is shown on country archives. One
   consistent line-icon set; colour via design-system tokens (rule 15). */
.ftk-cat-image {
  margin: 0 0 1.25rem;
}
.ftk-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: var(--ds-radius-lg, 16px);
  background: var(--theme-palette-color-6);
  color: var(--theme-palette-color-1);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--theme-palette-color-3) 14%, transparent);
}
.ftk-cat-icon__svg {
  width: 56px;
  height: 56px;
  display: block;
}

/* Short lead paragraph under the breadcrumb (ArchiveExcerpt), distinct from the
   long SEO article at the foot of the page. */
.ftk-archive-intro {
  margin: 4px 0 20px;
}
.ftk-archive-intro p {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--theme-palette-color-3) 82%, transparent);
}

/* ============================================================================
   Archive header — desktop two-column:
     left  30%  = the archive image (country flag / category hero)
     right 70%  = breadcrumb + title + short description
   The country switcher and the facet filter span the full width below.
   Everything is one CSS grid: .page-description uses display:contents so its
   children become grid items of .entry-header (which also holds the theme H1).
   That display:contents also overrides Blocksy's ct-hidden-sm, so the header
   content stays visible on mobile. Stacks to a single column on tablet + phone.
   ==========================================================================*/
.tax-ftk_country .entry-header > .page-description,
.tax-ftk_category .entry-header > .page-description,
.post-type-archive-ftk_tool .entry-header > .page-description {
  display: contents !important; /* also defeats Blocksy's ct-hidden-sm on mobile */
}

.tax-ftk_country .entry-header:has(.ftk-term-image, .ftk-cc-hero),
.tax-ftk_category .entry-header:has(.ftk-term-image, .ftk-cc-hero) {
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 6px;
  align-items: start;
}
/* left column: image spans the breadcrumb/title/excerpt rows */
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-term-image,
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-cc-hero {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100%;
}
/* right column, stacked */
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-crumbs { grid-column: 2; grid-row: 1; }
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .page-title { grid-column: 2; grid-row: 2; margin: 2px 0 0; }
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-archive-intro { grid-column: 2; grid-row: 3; margin: 6px 0 0; }
/* full-width rows below the two columns */
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-cc-switch,
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-facets {
  grid-column: 1 / -1;
  margin-top: 18px;
}
.entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-cc-switch { margin-top: 22px; }

/* Tablet + phone: keep the two-column header — image left, breadcrumb + title
   right — but compact. The image shrinks to a small tile that spans the
   breadcrumb + title rows, and the short description drops to its own
   full-width row below the two columns. Saves vertical height on phones while
   staying visually consistent with the desktop header. */
@media (max-width: 991.98px) {
  .tax-ftk_country .entry-header:has(.ftk-term-image, .ftk-cc-hero),
  .tax-ftk_category .entry-header:has(.ftk-term-image, .ftk-cc-hero) {
    grid-template-columns: clamp(84px, 26vw, 120px) 1fr;
    column-gap: 15px;
    row-gap: 2px;
    align-items: start;
  }
  /* left column: small image tile, spanning the breadcrumb + title rows */
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-term-image,
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-cc-hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: start;
  }
  /* right column: breadcrumb over title */
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-crumbs {
    grid-column: 2; grid-row: 1; margin: 0 0 3px;
  }
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .page-title {
    grid-column: 2; grid-row: 2; margin: 0;
    font-size: clamp(1.15rem, 5vw, 1.55rem); line-height: 1.2;
  }
  /* full-width rows below the two columns */
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-archive-intro {
    grid-column: 1 / -1; grid-row: 3; margin: 10px 0 0;
  }
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-cc-switch {
    grid-column: 1 / -1; grid-row: 4; margin-top: 14px;
  }
  .entry-header:has(.ftk-term-image, .ftk-cc-hero) .ftk-facets {
    grid-column: 1 / -1; grid-row: 5; margin-top: 12px;
  }
  /* compact the flag + icon banner hero into a small tile that fits the narrow
     left column (the uploaded-image variant keeps its natural aspect ratio) */
  .entry-header:has(.ftk-cc-hero) .ftk-cc-hero:not(.ftk-cc-hero--img) {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    justify-content: center;
    padding: 6px;
  }
  .entry-header:has(.ftk-cc-hero) .ftk-cc-hero__icon {
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 46%; height: auto; aspect-ratio: 1 / 1;
    opacity: .22;
  }
  .entry-header:has(.ftk-cc-hero) .ftk-cc-hero__flag {
    position: relative;
    width: 62%;
  }
  /* Global category archives use a FIXED 120px .ftk-cat-icon tile, which is
     wider than the narrow mobile column and was overflowing onto the title.
     Make it fluid so it fills its column and never collides with the text. */
  .entry-header:has(.ftk-cat-icon) .ftk-cat-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .entry-header:has(.ftk-cat-icon) .ftk-cat-icon__svg {
    width: 46%;
    height: auto;
  }
}

/* --- Archive comments (mirrors the single-post/tool comment area) --- */
.ftk-archive-comments {
  width: 100%;
  margin-top: 8px;
  padding: 34px 0 10px;
}
.ftk-archive-comments__inner {
  padding-top: 30px;
  border-top: 1px solid var(--ftk-border, rgba(0,0,0,.1));
}
.ftk-archive-comments__title {
  font-size: 1.4rem;
  margin: 0 0 20px;
}
.ftk-archive-comments .comment-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.ftk-archive-comments .comment-list ol.children {
  list-style: none;
  margin: 0 0 0 34px;
  padding: 0;
}
.ftk-archive-comments .comment-body {
  padding: 16px 0;
  border-bottom: 1px solid var(--ftk-border, rgba(0,0,0,.08));
}
.ftk-archive-comments .comment-author img.avatar {
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.ftk-archive-comments .comment-author .fn { font-weight: 600; font-style: normal; }
.ftk-archive-comments .comment-metadata { font-size: .82rem; opacity: .65; }
.ftk-archive-comments .comment-form { display: grid; gap: 14px; }
.ftk-archive-comments .comment-form p { margin: 0; }
.ftk-archive-comments .comment-form textarea,
.ftk-archive-comments .comment-form input[type="text"],
.ftk-archive-comments .comment-form input[type="email"],
.ftk-archive-comments .comment-form input[type="url"] {
  width: 100%;
}