/* ==========================================================================
   Dr. Billy Arnold — Blog (home.php, single.php)
   Brand: navy #383e68 · blue #6ca1ef · sky #a6caff · mist #e2ecfc
   ========================================================================== */
.ba-blog{
  --navy:#383e68; --blue:#6ca1ef; --sky:#a6caff; --mist:#e2ecfc; --white:#fff;
  /* Space for the Elementor header when it sits transparent over the hero.
     Set to ~40px if the header is NOT overlaid. */
  --ba-header-offset:190px;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--navy); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.ba-blog *,.ba-blog *::before,.ba-blog *::after{box-sizing:border-box}
.ba-blog a{transition:color .2s ease, background-color .2s ease}
.ba-blog img{max-width:100%; height:auto; display:block}

.ba-wrap{max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px}
.ba-wrap--narrow{max-width:808px}

/* ---------- Shared bits ---------- */
.ba-pill{
  display:inline-block; background:var(--blue); color:var(--white);
  padding:0 .3em .06em; border-radius:20px;
}
.ba-blog .ba-chip{
  display:inline-block; font-size:14px; font-weight:700; line-height:1;
  padding:8px 14px; border-radius:500px; background:var(--sky); color:var(--navy);
  text-decoration:none;
}
.ba-blog .ba-chip:hover{background:var(--navy); color:var(--white)}
.ba-blog .ba-chip--light{background:rgba(166,202,255,.2); color:var(--sky)}
.ba-blog .ba-chip--light:hover{background:var(--sky); color:var(--navy)}

/* Buttons — !important beats Hello/kit #c36 hover/focus styles */
.ba-blog .ba-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:5000px !important; border:0 !important;
  background:var(--blue) !important; color:var(--white) !important;
  font:700 16px/1.1 "DM Sans",system-ui,sans-serif; text-decoration:none !important;
  box-shadow:none !important;
}
.ba-blog .ba-btn:hover,.ba-blog .ba-btn:focus,.ba-blog .ba-btn:active{background:var(--navy) !important; color:var(--white) !important}
.ba-blog .ba-btn--navy{background:var(--navy) !important}
.ba-blog .ba-btn--navy:hover,.ba-blog .ba-btn--navy:focus{background:var(--white) !important; color:var(--navy) !important}
.ba-blog a:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:8px}

/* ---------- Hero ---------- */
.ba-hero{
  background:var(--navy); color:var(--white);
  border-radius:0 0 38px 38px;
  padding:var(--ba-header-offset) 0 72px;
  position:relative; overflow:hidden;
}
/* soft arc echoing the site's curved shapes */
.ba-hero::after{
  content:""; position:absolute; right:-180px; top:-220px; width:640px; height:640px;
  border-radius:50%; border:70px solid rgba(108,161,239,.14); pointer-events:none;
}
.ba-hero > *{position:relative; z-index:1}
.ba-hero__title{
  font-family:"Fredoka",system-ui,sans-serif; font-weight:500;
  font-size:clamp(40px,6vw,68px); line-height:1.12; color:var(--white);
  margin:0; max-width:17ch;
}
.ba-hero__title--post{font-size:clamp(34px,4.6vw,54px); color:var(--sky); max-width:none; margin-top:18px}
.ba-hero__intro{font-size:21px; line-height:1.45; font-weight:400; max-width:620px; margin:20px 0 0; opacity:.92}
.ba-hero__meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; font-size:16px; font-weight:500; color:rgba(255,255,255,.85)}
.ba-hero__meta span{position:relative}
.ba-hero__meta span::before{content:""; position:absolute; left:-13px; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--blue)}
.ba-hero--single.has-image{padding-bottom:180px}

.ba-blog .ba-back{
  display:inline-flex; align-items:center; gap:8px; margin:0 16px 0 0;
  color:var(--white); text-decoration:none; font-weight:600; font-size:15px; opacity:.85;
}
.ba-blog .ba-back:hover{opacity:1; color:var(--sky)}
.ba-back svg{width:12px; height:12px}

/* Topic filter */
.ba-filter{display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 0}
.ba-blog .ba-filter__link{
  padding:9px 18px; border-radius:500px; font-size:15px; font-weight:600;
  color:var(--white); text-decoration:none; background:rgba(108,161,239,.18);
}
.ba-blog .ba-filter__link:hover{background:rgba(108,161,239,.4); color:var(--white)}
.ba-blog .ba-filter__link.is-active{background:var(--blue); color:var(--white)}

/* ---------- Listing ---------- */
.ba-listing{padding-top:64px; padding-bottom:96px}
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}

.ba-card{
  background:var(--mist); border-radius:28px; padding:12px;
  display:flex; flex-direction:column;
}
.ba-card__media{display:block; border-radius:20px; overflow:hidden; aspect-ratio:16/10; background:var(--sky)}
.ba-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.ba-card:hover .ba-card__media img{transform:scale(1.03)}
.ba-card__placeholder{display:block; width:100%; height:100%;
  background:radial-gradient(circle at 80% 20%, var(--blue) 0 22%, transparent 23%), var(--sky)}
.ba-card__body{padding:22px 14px 12px; display:flex; flex-direction:column; flex:1}
.ba-card__body .ba-chip{align-self:flex-start; margin-bottom:14px}
.ba-card__title{
  font-family:"Fredoka",system-ui,sans-serif; font-weight:500;
  font-size:24px; line-height:1.2; margin:0 0 10px;
}
.ba-blog .ba-card__title a{color:var(--navy); text-decoration:none}
.ba-blog .ba-card__title a:hover{color:var(--blue)}
.ba-card__excerpt{font-size:16px; line-height:1.55; font-weight:500; opacity:.85}
.ba-card__excerpt p{margin:0}
.ba-card__meta{display:flex; flex-wrap:wrap; gap:4px 18px; margin:auto 0 0; padding-top:18px; font-size:14px; font-weight:600; opacity:.7}

/* Featured (first post, page 1) */
.ba-card--featured{
  grid-column:1 / -1; flex-direction:row; align-items:stretch;
  background:var(--blue); color:var(--white); padding:14px; border-radius:36px;
}
.ba-card--featured .ba-card__media{flex:0 0 56%; aspect-ratio:auto; min-height:380px; border-radius:26px}
.ba-card--featured .ba-card__body{padding:36px 36px 28px; justify-content:center}
.ba-card--featured .ba-card__title{font-size:clamp(28px,3vw,40px); margin-bottom:16px}
.ba-blog .ba-card--featured .ba-card__title a{color:var(--white)}
.ba-blog .ba-card--featured .ba-card__title a:hover{color:var(--navy)}
.ba-card--featured .ba-card__excerpt{font-size:18px; opacity:.95}
.ba-card--featured .ba-card__meta{opacity:.9; margin-top:0; padding-top:24px}
.ba-blog .ba-card--featured .ba-chip{background:var(--white)}
.ba-blog .ba-card--featured .ba-chip:hover{background:var(--navy); color:var(--white)}

/* Pagination */
.ba-pagination{margin-top:56px}
.ba-pagination ul{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; margin:0; padding:0}
.ba-blog .ba-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:46px; padding:0 16px;
  border-radius:500px; background:var(--mist); color:var(--navy); font-weight:700; text-decoration:none;
}
.ba-blog .ba-pagination a.page-numbers:hover{background:var(--sky)}
.ba-blog .ba-pagination .page-numbers.current{background:var(--navy); color:var(--white)}
.ba-blog .ba-pagination .page-numbers.dots{background:none}

.ba-empty{background:var(--mist); border-radius:36px; padding:56px 32px; text-align:center}
.ba-empty h2{font-family:"Fredoka",system-ui,sans-serif; font-weight:500; font-size:34px; margin:0 0 10px}
.ba-empty p{font-size:18px; margin:0 auto 24px; max-width:48ch}

/* ---------- Single ---------- */
.ba-feature{margin-top:-130px; margin-bottom:0; position:relative; z-index:2}
.ba-feature img{width:100%; max-height:620px; object-fit:cover; border-radius:28px; box-shadow:0 24px 50px -24px rgba(56,62,104,.45)}

.ba-content{padding-top:56px; padding-bottom:40px; font-size:19px; line-height:1.7; font-weight:400}
.ba-content > *{margin-top:0; margin-bottom:1.15em}
.ba-content h2,.ba-content h3,.ba-content h4{
  font-family:"Fredoka",system-ui,sans-serif; font-weight:500; color:var(--navy);
  line-height:1.2; margin-top:1.8em; margin-bottom:.55em;
}
.ba-content h2{font-size:clamp(28px,3.2vw,36px)}
.ba-content h3{font-size:26px}
.ba-content h4{font-size:21px; font-family:"DM Sans",system-ui,sans-serif; font-weight:700}
.ba-content > h2:first-child,.ba-content > h3:first-child{margin-top:0}
.ba-content strong{font-weight:700}
.ba-blog .ba-content a{color:#3f73c4; text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:3px}
.ba-blog .ba-content a:hover{color:var(--navy); text-decoration-color:var(--blue)}
.ba-content ul,.ba-content ol{padding-left:0; list-style:none}
.ba-content li{position:relative; padding-left:28px; margin-bottom:.5em}
.ba-content ul > li::before{content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--blue)}
.ba-content ol{counter-reset:ba}
.ba-content ol > li{counter-increment:ba}
.ba-content ol > li::before{content:counter(ba); position:absolute; left:0; top:.1em; width:22px; height:22px; border-radius:50%;
  background:var(--mist); color:var(--navy); font-size:13px; font-weight:700; line-height:22px; text-align:center}
.ba-content blockquote,.ba-content .wp-block-quote{
  margin:2em 0; padding:28px 32px; border:0; border-radius:24px; background:var(--mist);
  font-family:"Fredoka",system-ui,sans-serif; font-size:24px; line-height:1.4; font-weight:500; color:var(--navy);
}
.ba-content blockquote p:last-child{margin-bottom:0}
.ba-content blockquote cite{display:block; margin-top:12px; font:600 15px/1.4 "DM Sans",system-ui,sans-serif; font-style:normal; opacity:.75}
.ba-content img,.ba-content .wp-block-image img{border-radius:20px}
.ba-content figure{margin:2em 0}
.ba-content figcaption{font-size:15px; text-align:center; margin-top:10px; opacity:.7}
.ba-content .alignwide{margin-left:-80px; margin-right:-80px; max-width:none}
.ba-content .alignfull{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw}
.ba-content hr{border:0; height:2px; background:var(--mist); margin:2.5em 0}
.ba-content table{width:100%; border-collapse:collapse; font-size:16px; display:block; overflow-x:auto}
.ba-content th,.ba-content td{padding:12px 14px; border-bottom:1px solid var(--mist); text-align:left}
.ba-content th{background:var(--mist); font-weight:700}
.ba-content iframe,.ba-content video{max-width:100%; border-radius:20px}
.ba-page-links{display:flex; gap:8px; font-weight:700}

/* CTA — mirrors the "What Comes Next" block */
.ba-cta{margin-top:24px; margin-bottom:80px}
.ba-cta__inner{
  background:rgba(108,161,239,.9); color:var(--white); border-radius:32px;
  padding:64px 32px; text-align:center; position:relative; overflow:hidden;
}
.ba-cta__inner::before{
  content:""; position:absolute; left:-120px; bottom:-160px; width:360px; height:360px;
  border-radius:50%; border:56px solid rgba(56,62,104,.12);
}
.ba-cta__inner > *{position:relative}
.ba-cta__title{font-family:"Fredoka",system-ui,sans-serif; font-weight:500; font-size:clamp(36px,5vw,56px); line-height:1.1; margin:0 0 16px; color:var(--white)}
.ba-cta__title span{color:var(--navy)}
.ba-cta__inner p{font-size:21px; line-height:1.5; font-weight:500; max-width:640px; margin:0 auto 28px}

/* Related */
.ba-related{padding-bottom:96px}
.ba-related__title{font-family:"Fredoka",system-ui,sans-serif; font-weight:500; font-size:clamp(32px,4vw,44px); margin:0 0 28px; color:var(--navy)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ba-grid{grid-template-columns:repeat(2,1fr)}
  .ba-card--featured .ba-card__media{flex-basis:50%; min-height:320px}
  .ba-content .alignwide{margin-left:0; margin-right:0}
}
@media (max-width:767px){
  .ba-blog{--ba-header-offset:130px}
  .ba-wrap{padding-left:16px; padding-right:16px}
  .ba-hero{padding-bottom:52px; border-radius:0 0 28px 28px}
  .ba-hero--single.has-image{padding-bottom:110px}
  .ba-hero::after{width:380px; height:380px; border-width:44px; right:-160px; top:-140px}
  .ba-hero__intro{font-size:18px}
  .ba-grid{grid-template-columns:1fr; gap:20px}
  .ba-card--featured{flex-direction:column; padding:12px; border-radius:28px}
  .ba-card--featured .ba-card__media{flex-basis:auto; min-height:0; aspect-ratio:16/10; border-radius:20px}
  .ba-card--featured .ba-card__body{padding:24px 14px 14px}
  .ba-feature{margin-top:-80px}
  .ba-content{font-size:18px; padding-top:40px}
  .ba-content blockquote{padding:22px; font-size:21px}
  .ba-cta__inner{padding:48px 22px}
  .ba-cta__inner p{font-size:18px}
  .ba-listing{padding-top:44px; padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  .ba-card__media img,.ba-blog a{transition:none}
  .ba-card:hover .ba-card__media img{transform:none}
}