/* -----------------------------------------------------------------------------
   EFR enabler AND embedder profiles

   Shared by custom-post-enabler-profile.hbs and, since 13 November 2026,
   custom-post-embedder-profile.hbs, so a provider profile and a brand profile
   are styled by one file and cannot drift apart. Nothing here is specific to
   either; both articles carry the same .efr-profile class.

   Deliberately plain CSS, not Tailwind, for the same reason as assets/hub.css:
   it is loaded straight from assets/ by tag.hbs, so it needs no Vite build and
   no Node toolchain. Edit this file, re-zip the theme, upload. Nothing here is
   processed by anything.

   Everything is scoped under .efr-profile, the class on the <article> in
   custom-post-enabler-profile.hbs, so none of it reaches the story feed below
   it, the sidebar, or any other article layout. The "Latest stories" heading
   sits outside that article on purpose and keeps the site's own styling.

   Loaded ONLY by custom-post-enabler-profile.hbs. tag.hbs loaded it too until
   12 November 2026, when the profile text moved off the tag page and the tag
   page kept only a link up to it.

   Ink, border and accent read the theme's own tokens, the way hub.css does, so
   a profile follows the site rather than drifting from it. Nothing new is
   sampled here: --efr-wash and --efr-rule come from the EFR block at the end of
   assets/built/app.css, which loads on every page.

   The article also carries Tailwind's prose classes. Those are defined with
   :where(), which gives them zero specificity on purpose, so every rule below
   wins without !important.

   WHY THE PROFILE HAS NO SECTION NAV, unlike a hub page: the headings are full
   questions ("Which financing products does Banxware offer platforms?"), which
   is what earns the FAQ snippet, and no chip row can carry a heading that long.
   The hub pages can have one because their section names are two words.
----------------------------------------------------------------------------- */

.efr-profile {
  /* From the theme, with the same fallbacks hub.css uses */
  --p-ink: var(--color-typ, #101a2e);
  --p-ink-soft: var(--color-typ-tone, #4e5871);
  --p-rule: var(--color-brd-soft, #e6e6e6);
  --p-accent: var(--ghost-accent-color, #0c67df);
}

/* --- Sections -------------------------------------------------------------
   A rule above each heading does the work the hub does with full-bleed bands.
   The profile column has a sidebar beside it, so bands cannot run to the edge
   here and a band that stops short reads as a mistake. */

.efr-profile h2 {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--p-rule);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}

.efr-profile > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.efr-profile p {
  margin-top: 0.875rem;
  color: var(--p-ink-soft);
  line-height: 1.6;
}

/* The line that introduces a list ("Brands and platforms in EFR's coverage:")
   is a label for the cards under it, not a paragraph of prose. */
.efr-profile p:has(+ ul) {
  margin-bottom: 0.875rem;
  font-weight: 600;
  color: var(--p-ink);
}

/* --- The company lists as rows ------------------------------------------
   Every profile ends in one or more link lists: who uses this enabler, and the
   podcast episodes. They carry most of a profile's value and render as a wall
   of bullets by default, which is the main reason a profile reads thinner than
   a guide page.

   ROWS, NOT CARDS. Cards were tried first (12 Nov 2026) and were wrong: a CSS
   grid makes every cell in a row as tall as the tallest, and these items vary
   enormously. Airwallex's list runs from 23 to 298 characters, a 13x spread,
   so a four-word entry got a box sized for a sixty-word one and the section
   filled with empty boxes. The hub's example cards work because their copy is
   hand-written to a similar length; this copy is not, and never will be,
   because it is a list of facts of whatever size the facts are.

   A rule between rows gives the same separation that a border gave, absorbs
   any length, and keeps the full column width for the long entries.

   All lists are styled, not just "Who uses": the podcast list is the same
   shape and CSS cannot select a list by the wording of the heading above it. */

.efr-profile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.efr-profile li {
  margin: 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--p-rule);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--p-ink-soft);
}

/* No rule above the first row: the heading or its label already separates it,
   and a one-item list -- often a single bank, or a single episode -- then
   carries no furniture at all. */
.efr-profile li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* The company name leads the row, bold but INLINE, not as a block title.
   The source reads "[Amazon](url): financing inside Seller Central", and a
   block title leaves the colon stranded on the line below it -- worse for
   "[Lieferando](url) (Just Eat Takeaway.com in Germany): restaurant
   financing", where the parenthetical is outside the link too. */
.efr-profile li > a:first-child {
  font-weight: 600;
  color: var(--p-ink);
  text-decoration: none;
}

.efr-profile li > a:first-child:hover {
  color: var(--p-accent);
}

/* Links inside the detail text stay ordinary links. */
.efr-profile li a:not(:first-child),
.efr-profile p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.efr-profile li a:not(:first-child):hover,
.efr-profile p a:hover {
  color: var(--p-accent);
}

@media (max-width: 640px) {
  .efr-profile h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
  }
}


/* --- The story list under a profile ---------------------------------------
   Not scoped under .efr-profile: the list sits outside the profile article,
   below it. Same hairline rows as the company lists inside the profile, so
   the whole page reads as one thing rather than a reference page with a feed
   stapled underneath.

   Rows, not the grid of picture cards the feeds use: an enabler can have
   twenty stories, and twenty picture cards would bury the profile above
   them. */

.efr-stories > * {
  padding: 1rem 0;
  border-top: 1px solid var(--color-brd-soft, #e6e6e6);
}

.efr-stories > *:first-child {
  padding-top: 0;
  border-top: 0;
}