/* =========================================================================
   Quick Jump Start - site-wide design overrides (loaded last).

   1. Mobile drawer: the Call / WhatsApp pair is hidden below 1025px, the same
      breakpoint at which the burger replaces the navigation.
   2. Buttons: the radius of the homepage hero CTAs (.qjs-btn .elementor-button,
      999px in qjs-header.css) applied to every Elementor button and to the
      mobile burger. Radius only - colours, gradients, transitions, padding,
      size and type are not touched.
   ====================================================================== */

@media (max-width:1024px){
  .qjs-hd .qjs-drawer-ctas{display:none!important}
}

.elementor-button,
.elementor-button-link,
.elementor-menu-toggle{border-radius:999px!important}

/* -------------------------------------------------------------------------
   3. Blog Loop card - reproduces the approved reference design: a white /
   pale-blue card with yellow + green corner accents and a lightning badge on
   the image, a compact author row (avatar, name, designation), a divider,
   the post title, and a yellow pill "Read More" button with a navy arrow
   disc. All dynamic (image, author, title, URL) - only presentation here.

   Scoped to .qjs-archive-item, the class that exists only on the Blog Loop
   template's own root element, so this cannot reach any other card, page or
   template on the site. The handful of base-box rules on the root element
   are additionally keyed to the compound .qjs-archive-item.elementor-post
   selector: the loop-grid wrapper also carries a plain .qjs-archive class,
   and style.css section 17 already paints ".qjs-archive .elementor-post"
   with two classes' worth of specificity, so matching that exactly (rather
   than relying on source order alone) guarantees this design wins without
   editing style.css.
   ---------------------------------------------------------------------- */
.qjs-archive-item.elementor-post{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  /* Equal row height already comes from the Loop Grid's own "Equal Height"
     setting (grid-auto-rows:1fr + align-items:stretch, both confirmed in
     Elementor Pro's own generated/plugin CSS) plus its height:100% rule on
     .e-loop-item > .e-con - this element, confirmed via the live DOM to be
     a direct child of .e-loop-item with no wrapper in between. height:100%
     is restated explicitly here anyway so this card's own stretch-to-row
     behaviour does not depend on Elementor's generated CSS surviving future
     changes; it's redundant today, not a guess. */
  height:100%;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 60%,var(--azure-soft) 100%);
  border-radius:26px;
  box-shadow:0 20px 44px -18px rgba(2,41,91,.22),0 2px 10px -2px rgba(2,41,91,.07);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.qjs-archive-item.elementor-post:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 54px -16px rgba(2,41,91,.30),0 4px 14px -2px rgba(2,41,91,.10);
}

/* decorative pale-blue + soft-green curves low in the card, behind the
   content. Real SVG wave shapes (not a blurred glow) so the curve reads as
   a deliberate graphic element, as in the reference; preserveAspectRatio
   ="none" lets each wave stretch to any card width without distorting the
   curve's proportions. Each shape is sized a few percent wider/lower than
   the card itself so it bleeds slightly past the card's own silhouette at
   the bottom corners (matching the reference), which only works because the
   root has no overflow:hidden (that would also clip the hover lift's
   shadow); its own border-radius keeps the bleed looking like a soft round
   peek rather than a square corner. */
.qjs-archive-item.elementor-post::before,
.qjs-archive-item.elementor-post::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;bottom:0;border-radius:0 0 26px 26px;
}
.qjs-archive-item.elementor-post::before{
  left:-4%;right:-4%;bottom:-3%;height:120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C18 10 40 34 62 17 C78 6 90 20 100 11 L100 40 L0 40 Z' fill='%23BFE0FA'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.qjs-archive-item.elementor-post::after{
  left:42%;right:-4%;bottom:-3%;height:72px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C16 6 34 30 50 14 C62 3 80 18 100 9 L100 40 L0 40 Z' fill='%2325D366' fill-opacity='0.34'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.qjs-archive-item.elementor-post>.elementor-post__thumbnail,
.qjs-archive-item.elementor-post>.elementor-post__text{position:relative;z-index:1}

/* --- image: fixed height, no distortion. aspect-ratio:auto neutralises the
   browser's UA default (aspect-ratio inferred from the img's width/height
   attributes), which otherwise overrides the explicit height below. --- */
.qjs-archive-item .elementor-post__thumbnail{
  position:relative;
  overflow:hidden;
  border-radius:26px 26px 0 0;
  height:212px;
  /* Pinned to its own height regardless of how tall the card is stretched -
     all extra height from equal-height rows goes to .elementor-post__text
     below, never here, so the image never distorts or grows. */
  flex:0 0 auto;
}
.qjs-archive-item .elementor-post__thumbnail img{
  width:100%!important;
  height:212px!important;
  aspect-ratio:auto!important;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.qjs-archive-item.elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.06)}

/* yellow wedge, top-left of the image. The parent's overflow:hidden +
   border-radius clips the square into the same curve as the image corner. */
.qjs-archive-item .elementor-post__thumbnail::before{
  content:"";position:absolute;top:0;left:0;z-index:2;
  width:62px;height:62px;
  background:linear-gradient(135deg,#FFE066 0%,#FFC700 100%);
  border-radius:0 0 100% 0;
}
/* green wedge, bottom-right of the image, same clipping trick. */
.qjs-archive-item .elementor-post__thumbnail::after{
  content:"";position:absolute;bottom:0;right:0;z-index:2;
  width:84px;height:84px;
  background:var(--wa);
  border-radius:100% 0 0 0;
}
/* white circle + bolt badge, layered above the green wedge, inset from the
   image's own corner so it never crowds the photo subject. A self-contained
   SVG background avoids depending on a webfont icon set being loaded. */
.qjs-archive-item .elementor-widget-theme-post-featured-image{
  position:relative;display:block;line-height:0;
}
.qjs-archive-item .elementor-widget-theme-post-featured-image::after{
  content:"";position:absolute;z-index:3;right:12px;bottom:12px;
  width:38px;height:38px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M22 6 11 23 19 23 17 34 30 15 21 15Z' fill='%2325D366'/%3E%3C/svg%3E") center/50% no-repeat;
  box-shadow:0 6px 16px -4px rgba(2,41,91,.38);
}

/* --- body: the one flexible region. flex:1 1 auto absorbs 100% of whatever
   extra height the Loop Grid's equal-height stretch adds to this card over
   its natural content height - title area grows/shrinks freely with however
   many lines the post's actual title needs, and min-height:0 stops the
   browser's flex default (min-height:auto, which would otherwise refuse to
   shrink below this block's own content height) from capping that growth. --- */
.qjs-archive-item .elementor-post__text{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:14px 20px 20px!important;
  gap:0;
}

/* --- author row: real rendered DOM is
   .elementor-author-box (flex,gap) > avatar img + .elementor-author-box__text
   > name (h4) + bio. Name/avatar/bio already come from the post's real
   WordPress author (confirmed live - no hardcoded text involved); sized here
   to the final approved proportions. --- */
.qjs-archive-item .qjs-authorbox .elementor-author-box{
  display:flex;
  align-items:center;
  gap:11px;
}
.qjs-archive-item .qjs-authorbox .elementor-author-box__avatar img{
  width:48px!important;height:48px!important;
  border-radius:50%;object-fit:cover;background:var(--off);
}
.qjs-archive-item .qjs-authorbox .elementor-author-box__name{
  margin:0;font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.25;
}
.qjs-archive-item .qjs-authorbox .elementor-author-box__bio{
  margin:2px 0 0;font-size:12.5px;font-weight:500;color:var(--muted-dark);line-height:1.3;
}
.qjs-archive-item .qjs-authorbox .elementor-author-box__link{display:none}

/* --- divider: inset from both edges (not edge-to-edge) with clear air
   above (from the author row) and below (before the title), matching the
   reference rather than a tight full-bleed rule. The widget was never given
   an explicit colour in the editor, so it was rendering with Elementor's own
   unstyled default (a heavy solid-black 2px rule) - confirmed by eye on the
   live page, not assumed. !important is needed here because that default is
   painted by Elementor's own generated per-element CSS, which this scoped
   override has no other way to out-rank. --- */
.qjs-archive-item .qjs-divider{margin:12px 20px 20px!important}
.qjs-archive-item .qjs-divider .elementor-divider-separator{
  border-top-width:1px!important;
  border-top-style:solid!important;
  border-top-color:rgba(2,41,91,.16)!important;
}

/* --- title: targets both the widget wrapper (.elementor-post__title) and
   the rendered heading (.elementor-heading-title) directly, since Elementor
   and style.css section 17 both set font-size/color on one or the other and
   plain inheritance from the wrapper alone is not reliable against them. --- */
.qjs-archive-item .elementor-post__title,
.qjs-archive-item .elementor-post__title .elementor-heading-title{
  font-family:var(--font-h);
  font-weight:800!important;
  color:var(--navy)!important;
  font-size:22px!important;
  line-height:1.28!important;
  letter-spacing:-.02em;
  margin:0;
}

/* --- Read More button: yellow-gradient pill, navy text, with a separate
   navy circular disc carrying the arrow at the right-hand end - pinned to
   the bottom of the card regardless of title length, so every card in a row
   lands on the same baseline. Hover lift/arrow-shift already comes from the
   site-wide .elementor-button rules in style.css. Gradient uses a brighter,
   more saturated yellow than the site's own --gold tokens (which read as a
   duller antique-gold against the reference's punchier lemon-gold) - picked
   by comparing the two side by side, not the site's existing button colour. --- */
.qjs-archive-item .elementor-widget-button{flex:0 0 auto;margin-top:auto;padding-top:16px}
.qjs-archive-item .qjs-btn-primary .elementor-button,
.qjs-archive-item a.elementor-button.qjs-btn-primary{
  display:inline-flex;align-items:center;gap:14px;
  padding:5px 6px 5px 22px!important;
  background-color:transparent!important;
  background-image:linear-gradient(135deg,#FFE066 0%,#FFC700 55%,#F2A900 100%)!important;
  color:var(--navy)!important;
  font-size:14.5px;font-weight:800;
  box-shadow:0 12px 28px -6px rgba(242,169,0,.62);
}
.qjs-archive-item .elementor-button .elementor-button-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;margin:0;border-radius:50%;
  background:var(--navy);
}
.qjs-archive-item .elementor-button .elementor-button-icon svg{width:14px;height:14px;fill:#fff}

@media (max-width:1024px){
  .qjs-archive-item .elementor-post__thumbnail{height:230px}
  .qjs-archive-item .elementor-post__thumbnail img{height:230px!important}
}
@media (max-width:767px){
  .qjs-archive-item .elementor-post__thumbnail{height:200px}
  .qjs-archive-item .elementor-post__thumbnail img{height:200px!important}
}

@media (prefers-reduced-motion:reduce){
  .qjs-archive-item.elementor-post,
  .qjs-archive-item .elementor-post__thumbnail img,
  .qjs-archive-item .elementor-button .elementor-button-icon{
    transition:none!important;transform:none!important;
  }
}