/* ==========================================================================
   KF Elements — Path Chooser
   --------------------------------------------------------------------------
   NEW at w2.homepack.1. Nothing here restates a released rule.

   THREE RULES SIT OUTSIDE `.kfe`, and they are the only reason this sheet
   exists beyond the cards. The containers they reach are Elementor's, not this
   pack's: the page's own sections, carrying `kfe-path kfe-path-<key>` in their
   CSS Classes field. Each rule is safe for the same two reasons — it matches
   only an element the pack's scripts have marked, and this sheet loads only on
   a page where the widget renders (KFE-003) — and each is written down in
   ADR-0005's dated section of 2026-09-24.

   1. `html.kfe-path-pending .kfe-path` — the FIRST FRAME. path-chooser-head.js
      adds the class to <html> in the <head>, before the body is parsed, so a
      path section is never painted and then collapsed. The mark only exists
      because a script ran, and it never outlives the page's load.
   2. `.kfe-path[hidden]` — the chooser's own hiding, once it has planned. The
      `hidden` attribute is not enough on its own: Elementor's
      `.e-con { display: var(--display) }` outranks the browser's `[hidden]`
      rule, so without this line a hidden container is still drawn. The fail
      direction is the safe one: if this sheet does not load, the attribute
      alone hides nothing and every section shows. `!important` because a
      container's display is also written by Elementor's per-element CSS.
   3. `.kfe-path.is-revealing` — the 0.6s fade-up a revealed path runs, once,
      and none under reduced motion.

   CHOSEN OVER an inline `style.display = 'none'` from the script, which would
   need no rule here: the attribute is the state the accessibility tree and
   `aria-controls` read, presentation stays in the stylesheet, and removing
   this sheet is a negative control that shows every section (the lane's
   `[hidden]`-rule-removed control, both ways).
   ========================================================================== */

html.kfe-path-pending .kfe-path { display: none !important; }
.kfe-path[hidden] { display: none !important; }
.kfe-path.is-revealing { animation: kfe-path-fade 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes kfe-path-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kfe-path.is-revealing { animation: none; }
}

/* ---------- the head ---------- */
/* Its own width token, not --kfe-title-measure: a site that releases the
   title measure everywhere (`none`) would otherwise run this head's intro
   across the whole container. */
.kfe .kfe-path-chooser .head {
  max-width: var(--kfe-path-head, 680px);
  margin: 0 auto 48px;
  text-align: var(--kfe-head-align, center);
}
.kfe .kfe-path-chooser .kfe-path-chooser-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.9rem, 4.6vw, 3.1rem)));
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
}
.kfe .kfe-path-chooser .kfe-path-chooser-intro {
  margin-top: 18px;
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 17px);
  line-height: 1.7;
}
.kfe .kfe-path-chooser .kfe-path-chooser-intro p + p { margin-top: 1em; }
.kfe .kfe-path-chooser.kfe-dark .kfe-path-chooser-title { color: var(--kfe-white); }
.kfe .kfe-path-chooser.kfe-dark .kfe-path-chooser-intro { color: var(--kfe-on-dark); }

/* ---------- the cards ----------
   Two side by side, and one column at 700px and below with each card at most
   340px wide — the reference's rendered layout. The DOM order is the visual
   order: nothing here reorders a card. */
.kfe .kfe-path-chooser-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kfe-path-gap, 24px);
  max-width: var(--kfe-path-cards-max, 980px);
  margin: 0 auto;
}
.kfe .kfe-path-chooser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  overflow: hidden;
  padding: var(--kfe-path-card-pad, 38px 34px 32px);
  background: var(--kfe-path-card-ground, var(--kfe-white));
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-path-card-radius, var(--kfe-radius-card, 6px));
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.45s, box-shadow 0.45s, border-color 0.45s;
}
/* The bar that grows across the top on hover or focus. An open card keeps
   no visual mark of its own — the reference draws none — only
   `aria-expanded="true"` and the `is-open` class a site may style. */
.kfe .kfe-path-chooser-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--kfe-accent);
  transition: width 0.45s;
}
.kfe .kfe-path-chooser-card:hover,
.kfe .kfe-path-chooser-card:focus-visible {
  transform: var(--kfe-card-lift, translateY(-6px));
  box-shadow: var(--kfe-shadow-card, 0 22px 50px rgba(10, 14, 28, 0.1));
  border-color: var(--kfe-path-card-hover-border, var(--kfe-line));
}
.kfe .kfe-path-chooser-card:hover::before,
.kfe .kfe-path-chooser-card:focus-visible::before { width: 100%; }
.kfe .kfe-path-chooser-card:focus-visible { outline: 2px solid var(--kfe-accent); outline-offset: 3px; }

/* The portrait: a circle with a double ring — the card's own ground, then a
   hairline — so it reads as a medallion on any card colour. */
.kfe .kfe-path-chooser-avatar {
  width: var(--kfe-path-portrait, 124px);
  height: var(--kfe-path-portrait, 124px);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0 0 22px;
  background: var(--kfe-primary-deep);
  box-shadow: 0 0 0 4px var(--kfe-path-card-ground, var(--kfe-white)), 0 0 0 5px var(--kfe-path-ring, var(--kfe-line));
}
.kfe .kfe-path-chooser-avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center var(--kfe-path-portrait-y, 30%);
}
.kfe .kfe-path-chooser-tag {
  font-size: var(--kfe-path-tag-size, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kfe-path-tag-color, var(--kfe-accent));
  margin: 0 0 12px;
}
.kfe .kfe-path-chooser-claim {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-path-claim-weight, var(--kfe-h3-weight));
  font-size: var(--kfe-path-claim-size, clamp(1.3rem, 2.7vw, 1.75rem));
  line-height: 1.2;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0 0 24px;
}
/* The pick label looks like a small button and is a span: the whole card is
   the control, and a button inside a link is not valid. */
.kfe .kfe-path-chooser-pick {
  margin-top: auto;
  display: inline-block;
  padding: 11px 18px;
  border-radius: var(--kfe-btn-radius);
  background: var(--kfe-btn-solid, var(--kfe-primary));
  color: var(--kfe-path-pick-ink, var(--kfe-white));
  font-size: var(--kfe-path-pick-size, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  transition: background 0.35s, color 0.35s;
}
.kfe .kfe-path-chooser-card:hover .kfe-path-chooser-pick,
.kfe .kfe-path-chooser-card:focus-visible .kfe-path-chooser-pick {
  background: var(--kfe-path-pick-hover, var(--kfe-primary-deep));
}

/* An editor-only line when no card can print (class-path-chooser.php). */
.kfe .kfe-path-chooser-notice {
  padding: 16px 20px;
  border: 1px dashed var(--kfe-line);
  color: var(--kfe-muted);
  font-size: var(--kfe-path-notice-size, 14px);
}

@media (max-width: 700px) {
  .kfe .kfe-path-chooser-cards { grid-template-columns: 1fr; justify-items: center; }
  .kfe .kfe-path-chooser-card { width: 100%; max-width: var(--kfe-path-card-max, 340px); }
}
@media (max-width: 360px) {
  .kfe .kfe-path-chooser-card { padding: 28px 18px 24px; }
  .kfe .kfe-path-chooser-avatar { width: var(--kfe-path-portrait-sm, 76px); height: var(--kfe-path-portrait-sm, 76px); }
  .kfe .kfe-path-chooser-claim { font-size: var(--kfe-path-claim-size-sm, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  .kfe .kfe-path-chooser-card,
  .kfe .kfe-path-chooser-card::before,
  .kfe .kfe-path-chooser-pick { transition: none; }
  .kfe .kfe-path-chooser-card:hover,
  .kfe .kfe-path-chooser-card:focus-visible { transform: none; }
}