/* PRO POINT - blog: /blog/, the article template and topic archives (Elementor templates
   from build-blog.php). Only what Elementor has no control for. */

/* ---------- topic filter: gold-outlined pills ---------- */
.pp-topic-filter .e-filter{gap:10px;justify-content:flex-start}
.pp-topic-filter .e-filter-item{font-family:Discovery_Fs,sans-serif;font-size:16px;padding:10px 22px!important;border-radius:999px;
  border:1px solid rgba(200,167,90,.55)!important;background:transparent!important;color:#071B31!important;transition:background .3s,color .3s}
.pp-topic-filter .e-filter-item:hover{background:rgba(200,167,90,.14)!important}
.pp-topic-filter .e-filter-item[aria-pressed="true"]{background:#071B31!important;color:#F3EDE1!important;border-color:#071B31!important}

/* ---------- the card ---------- */
.pp-post-card{display:flex!important;flex-direction:column;overflow:hidden;text-decoration:none!important;color:inherit;
  box-shadow:0 1px 0 rgba(7,27,49,.06),0 18px 40px -28px rgba(7,27,49,.35);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.pp-post-card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(7,27,49,.06),0 28px 50px -26px rgba(7,27,49,.45)}
.pp-post-card:focus-visible{outline:2px solid #C8A75A;outline-offset:4px}
.pp-card-img{overflow:hidden}
.pp-card-img img{width:100%!important;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pp-post-card:hover .pp-card-img img{transform:scale(1.05)}
.pp-card-body{flex:1 1 auto}
.pp-card-cat .elementor-post-info__item{letter-spacing:.02em;font-weight:600}
.pp-card-title .elementor-heading-title{transition:color .3s}
.pp-post-card:hover .pp-card-title .elementor-heading-title{color:#0B2A4A!important}
.pp-card-meta .elementor-post-info__item:not(:last-child)::after,
.pp-post-meta .elementor-post-info__item:not(:last-child)::after{content:"·";margin:0 10px;opacity:.7}
.pp-card-more{margin-top:auto}
.pp-card-more .elementor-heading-title{transition:letter-spacing .3s}
.pp-post-card:hover .pp-card-more .elementor-heading-title{letter-spacing:.03em}
/* Elementor puts a separator line between post-info items - ours is the dot above */
.pp-card-meta .elementor-icon-list-item::after,.pp-post-meta .elementor-icon-list-item::after,
.pp-card-cat .elementor-icon-list-item::after,.pp-post-cat .elementor-icon-list-item::after{display:none!important}

/* the newest article leads the /blog/ grid: wider card, image beside the text */
@media (min-width:1025px){
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item){grid-column:span 3}
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-post-card{flex-direction:row}
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-img{flex:0 0 56%}
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-img img{aspect-ratio:auto;height:100%;min-height:360px}
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-body{justify-content:center;padding:44px 48px!important}
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-title .elementor-heading-title{font-size:34px!important}
}

/* related posts sit on navy */
.pp-related-grid .pp-post-card{box-shadow:none}

/* ---------- article header ---------- */
.pp-post-cat a{color:#E3C98B!important;border:1px solid rgba(227,201,139,.45);border-radius:999px;padding:5px 14px;display:inline-block;transition:background .3s}
.pp-post-cat a:hover{background:rgba(227,201,139,.14)}

/* ---------- article body ---------- */
.pp-post-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pp-article{max-width:760px}
.pp-article h2{font-size:32px;line-height:1.3;color:#071B31;margin:1.6em 0 .55em;font-weight:400;scroll-margin-top:120px}
.pp-article h3{font-size:24px;line-height:1.35;color:#0B2A4A;margin:1.4em 0 .5em;font-weight:400;scroll-margin-top:120px}
.pp-article p{margin:0 0 1.1em}
.pp-article strong{font-weight:600;color:#071B31}
.pp-article ul,.pp-article ol{margin:0 0 1.2em;padding-inline-start:1.3em}
.pp-article li{margin-bottom:.45em}
.pp-article li::marker{color:#C8A75A}
.pp-article a{color:#0B2A4A;text-decoration:underline;text-decoration-color:#C8A75A;text-underline-offset:4px;text-decoration-thickness:1.5px}
.pp-article a:hover{color:#A8863E}
.pp-article figure{margin:2em 0}
.pp-article img{border-radius:20px;height:auto;max-width:100%}
.pp-article blockquote{border-inline-start:3px solid #C8A75A;margin:1.6em 0;padding:.2em 1.2em;font-size:1.1em;color:#071B31}
@media (max-width:767px){.pp-article h2{font-size:26px}.pp-article h3{font-size:21px}}

/* share */
.pp-share-row{border-top:1px solid rgba(7,27,49,.12);padding-top:28px!important}
.pp-share .elementor-share-btn{width:44px!important;height:44px!important;border-width:1px!important;transition:background .3s,color .3s}
.pp-share .elementor-share-btn:hover{background:#C8A75A!important;color:#071B31!important}
.pp-share .elementor-share-btn:hover .elementor-share-btn__icon i,.pp-share .elementor-share-btn:hover svg{color:#071B31!important;fill:#071B31!important}

/* author card */
.pp-author .elementor-widget-text-editor p{margin:0}

/* previous / next */
.pp-post-nav a{color:#071B31!important}
.pp-post-nav .post-navigation__prev--label,.pp-post-nav .post-navigation__next--label{color:#A8863E;font-size:14px}
.pp-post-nav .post-navigation__prev--title,.pp-post-nav .post-navigation__next--title{font-family:Discovery_Fs,sans-serif;font-size:18px}

/* ---------- side column ---------- */
.pp-toc{background:#FFFFFF;border-radius:24px!important;border:1px solid rgba(200,167,90,.35)!important;overflow:hidden}
.pp-toc .elementor-toc__header{background:transparent!important;border-bottom:1px solid rgba(7,27,49,.08)!important;padding:18px 22px!important}
.pp-toc .elementor-toc__header-title{font-family:Discovery_Fs,sans-serif;font-size:18px;color:#071B31;font-weight:600}
.pp-toc .elementor-toc__body{padding:16px 22px 20px!important;max-height:60vh;overflow:auto}
.pp-toc .elementor-toc__list-item-text{font-family:Discovery_Fs,sans-serif;font-size:15px;line-height:1.5;color:#1B2A3A!important}
.pp-toc .elementor-toc__list-item-text:hover,.pp-toc .elementor-item-active{color:#A8863E!important}
.pp-toc .elementor-toc__list-item{margin-bottom:8px}
.pp-toc .elementor-toc__list-item::before,.pp-toc li::marker{color:#C8A75A}
/* on tablet/phone the table of contents comes before the article */
@media (max-width:1024px){.pp-post-aside{order:-1}.pp-aside-cta{display:none!important}}

/* excerpt: the full description, clamped with an ellipsis instead of a mid-sentence cut */
.pp-card-excerpt .elementor-widget-container,.pp-card-excerpt p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0}
@media (min-width:1025px){.pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-excerpt p,
  .pp-blog-grid--lead .e-loop-item:nth-child(1 of .e-loop-item) .pp-card-excerpt .elementor-widget-container{-webkit-line-clamp:5}}

/* previous / next titles: navy on ivory (Elementor's default gold-ish link colour was too light) */
.pp-post-nav .post-navigation__prev--title,.pp-post-nav .post-navigation__next--title{color:#071B31!important;transition:color .3s}
.pp-post-nav a:hover .post-navigation__prev--title,.pp-post-nav a:hover .post-navigation__next--title{color:#A8863E!important}
.pp-post-nav .post-navigation__arrow-wrapper{color:#C8A75A!important}

/* every card in a row the same height (Galit, 26.09) - the loop item stretches to the grid cell */
.pp-blog-grid .elementor-loop-container{align-items:stretch}
.pp-blog-grid .e-loop-item{height:100%;display:flex;flex-direction:column}
.pp-blog-grid .e-loop-item>.pp-post-card{flex:1 1 auto;height:auto!important}

/* table of contents on a white box (Elementor paints its own box background) */
.pp-toc .elementor-toc{--box-background-color:#FFFFFF;--header-background-color:#FFFFFF;background:#FFFFFF!important}
.pp-toc.elementor-widget-table-of-contents{--box-background-color:#FFFFFF!important;--header-background-color:#FFFFFF!important;background-color:#FFFFFF!important}

/* phone: the topic pills wrap instead of running off the screen */
@media (max-width:767px){
  .pp-topic-filter .e-filter{flex-wrap:wrap!important;overflow:visible!important;gap:8px}
  .pp-topic-filter .e-filter-item{font-size:15px;padding:8px 16px!important}
}
