/* ==========================================================
   Knowledge base: the library listing and the article pages.
   Loaded on any singular carrying a tp-kl- class in its
   content, or the tp-knowledge body class - see
   gotb_uses_knowledge_sections() in functions.php. The
   listing's grid, spacing and card colours are set in the
   Kadence builder; only what the builder cannot express
   lives here.
   ========================================================== */

/* ---------- Filter bar ----------
   The filters are Kadence columns inside the row's inner wrap, so the
   equal-width rule has to reach through .kt-inside-inner-col. flex:1 1 0
   with min-width:0 lets a long select label shrink instead of pushing the
   row wider; the search gets 1.6 of that share so the query has room. */
.tp-kl-filters{margin-left:auto;margin-right:auto;width:100%}
.tp-kl-filters > .kt-inside-inner-col > .tp-kl-filter{flex:1 1 0;min-width:0}
.tp-kl-filters > .kt-inside-inner-col > .wp-block-kadence-query-filter-search{flex-grow:1.6}
.tp-kl-filters select,
.tp-kl-filters .kb-filter-search{width:100%;min-height:48px;padding:12px 16px}
.tp-kl-filters input::placeholder{color:var(--global-palette5);opacity:1}
.tp-kl-filters select:focus,
.tp-kl-filters .kb-filter-search:focus{outline:none;border-color:var(--global-palette1);box-shadow:0 0 0 3px rgba(55,136,155,.15)}
.tp-kl-library .wp-block-kadence-query-result-count{margin:32px 0 20px;padding-top:24px;border-top:1px solid var(--global-palette7);font-size:14px}

/* ---------- Search field: match the mega menu search bar ----------
   The magnifier is a masked pseudo-element so it inherits a flat colour
   rather than shipping a second icon asset. position:relative on the wrap
   is what both the icon and Kadence's own submit button are measured
   from - restated here so the rules hold if Kadence drops it. */
.tp-kl-filters .kb-filter-search-wrap{position:relative}
.tp-kl-filters .kb-filter-search-wrap::before{
  content:"";position:absolute;left:20px;top:50%;width:17px;height:17px;
  transform:translateY(-50%);background:#ADADA8;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 17 17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 17 17'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tp-kl-filters .kb-filter-search{padding-left:46px !important;padding-right:56px !important}
.tp-kl-filters .kb-filter-search-btn{top:50% !important;right:8px !important;transform:translateY(-50%);width:36px !important;height:36px !important;border-radius:999px !important;background:var(--global-palette2) !important;color:#fff !important;display:flex;align-items:center;justify-content:center}
.tp-kl-filters .kb-filter-search-btn:hover{background:var(--global-palette1) !important}
/* The block ships a magnifier in the submit button, which would repeat the
   icon already sitting at the left of the field. Hidden, and replaced with
   the site's arrow - same masked-SVG approach, same shape as the mega menu
   search. */
.tp-kl-filters .kb-filter-search-btn svg{display:none}
.tp-kl-filters .kb-filter-search-btn::before{
  content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:767px){
  .tp-kl-filters > .kt-inside-inner-col > .tp-kl-filter{flex:none;width:100%}
}

/* ---------- Cards: equal height, image on top, link pinned to bottom ----------
   The card is the Kadence column; overflow:hidden clips the image to its
   rounded corners. The body column is the flex context the read-more
   pushes against, so flex-direction goes on its inner wrap, not the
   card's. */
.tp-kl-card,.tp-kl-card > .kt-inside-inner-col{height:100%}
/* Kadence puts the card's radius and background on .kt-inside-inner-col,
   not on the column, so that is the element that has to clip. */
.tp-kl-card{overflow:hidden}
.tp-kl-card > .kt-inside-inner-col{overflow:hidden}

/* The image corners. Two things have to be true for the hover zoom to keep
   them clean:

   - The figure clips, and holds the rounded corners itself. Top two only:
     inheriting the card's radius would round the bottom of the image as
     well, biting into it where the body sits flush underneath.
   - The image itself has none. The featured image block writes a radius
     inline per image, and a radius on the element being scaled scales with
     it - the corners grow and drift out from under the clip. Dropping it
     leaves the figure as the only thing shaping the corner.

   20px is the card radius from the column's block settings. A hard number
   because the figure's parent carries the radius on all four corners and
   inherit would take all four. */
.tp-kl-card__image{margin:0;overflow:hidden;border-radius:20px 20px 0 0}
.tp-kl-card__image a{display:block}
.tp-kl-card__image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0 !important;transition:transform .4s}
/* Gentle zoom on hover, the same move the homepage resource cards make. */
.tp-kl-card:hover .tp-kl-card__image img{transform:scale(1.03)}
.tp-kl-card__body{flex:1}
.tp-kl-card__body > .kt-inside-inner-col{height:100%;display:flex;flex-direction:column}
.tp-kl-card .wp-block-read-more{margin-top:auto}

/* ---------- Topic pills: cards and the article hero ----------
   One pill set, two backgrounds: palette9 on the cards, white in the
   hero, which sits on a tinted band. The core post-terms block prints a
   separator between links - hidden, with the gap doing the spacing. */
.tp-kl-hero__topics,.tp-kl-card__topics{display:flex;flex-wrap:wrap;gap:8px}
.tp-kl-hero__topics .wp-block-post-terms__separator,
.tp-kl-card__topics .wp-block-post-terms__separator{display:none}
.tp-kl-hero__topics a,
.tp-kl-card__topics a{
  display:inline-flex;align-items:center;padding:6px 14px;
  border:1px solid var(--tp-border);border-radius:999px;
  background:var(--global-palette9);color:var(--tp-dark-teal);
  font-size:13px;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.tp-kl-hero__topics a{background:#fff}
.tp-kl-hero__topics a:hover,
.tp-kl-card__topics a:hover{background:var(--tp-dark-teal);border-color:var(--tp-dark-teal);color:#fff}

/* ---------- Article body typography ----------
   Scoped to the post-content block inside the article column so these
   sizes only apply to the editor's own output, not to the surrounding
   builder markup. The heading-specific first-child rules come last on
   purpose: the plain > :first-child rule is a class short of the h2/h3
   rules, so on its own it would lose to their margin-top. */
.tp-kl-article__col .wp-block-post-content > :first-child{margin-top:0}
.tp-kl-article__col .wp-block-post-content p{margin-top:0;margin-bottom:16px}
.tp-kl-article__col .wp-block-post-content h2{font-size:30px;line-height:1.25;margin:44px 0 14px}
.tp-kl-article__col .wp-block-post-content h3{font-size:22px;line-height:1.3;margin:32px 0 10px}
.tp-kl-article__col .wp-block-post-content ul,
.tp-kl-article__col .wp-block-post-content ol{padding-left:1.25em;margin:0 0 20px}
.tp-kl-article__col .wp-block-post-content li{margin-bottom:8px}
.tp-kl-article__col .wp-block-post-content > h2:first-child,
.tp-kl-article__col .wp-block-post-content > h3:first-child{margin-top:0}
@media (max-width:1024px){
  .tp-kl-article__col .wp-block-post-content h2{font-size:27px}
  .tp-kl-article__col .wp-block-post-content h3{font-size:21px}
}
@media (max-width:767px){
  .tp-kl-article__col .wp-block-post-content h2{font-size:24px;margin-top:36px}
  .tp-kl-article__col .wp-block-post-content h3{font-size:19px}
}