/*
Theme Name: Callaia
Description: Custom theme for the Callaia blog.
Author: Callaia
Version: 0.1.4
*/

/* ==========================================================================
   Callaia Blog — shared stylesheet
   Built to match the existing callaia.ai design system:
   - Font: native system sans-serif stack
   - Primary: #3E25B5 / #2C1C9E / #3D1493 (purple)
   - Accent gradient: #2C1C9E -> #3E25B5 -> #BCFFF3 (mint) / #62ECDC (teal)
   - Cards: 1.39px border rgba(218,218,255,1), 1.063rem radius, white bg
   - Buttons: pill radius 1.25rem (standard) / 5.25rem (rounded CTA)
   ========================================================================== */

:root{
  --purple: #3E25B5;
  --purple-dark: #2C1C9E;
  --purple-deep: #3D1493;
  --mint: #BCFFF3;
  --teal: #62ECDC;
  --bg-light: #F6F5F8;
  --border-light: rgba(218,218,255,1);
  --text-muted: #818181;
  --text-dark: #0E021F;
}

*{box-sizing:border-box;}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text-dark);
  background-color:#fff;
  background-image:url('assets/landing-background.webp');
  background-size:100% auto;
  margin:0;
}

a{color:var(--purple);text-decoration:none;font-weight:normal;}
a:hover{color:var(--purple-dark);}

.ui-icon{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1;}
.ui-icon-file::before{content:"\25A4";}
.ui-icon-menu::before{content:"\2630";}
.ui-icon-x::before{content:"X";font-weight:800;}
.ui-icon-linkedin::before{content:"in";font-size:.72em;font-weight:800;}
.ui-icon-link::before{content:"\2197";}

.container{max-width:1320px;margin:0 auto;padding:0 1.5rem;}

/* ---------- Nav ---------- */
/* Public Callaia header: apps/scriptanalyzer/templates/common/navigation.html.
   Reproduce its Bootstrap 5.3 defaults here without affecting blog content. */
#nav-wrapper{
  position:sticky;top:0;z-index:99;
  background-color:#fff;
  color:#212529;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans','Liberation Sans',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  font-size:1rem;font-weight:400;line-height:1.5;
}
#nav-wrapper .navbar{
  position:relative;display:flex;flex-wrap:nowrap;align-items:center;
  width:100%;max-width:1320px;margin:0 auto;padding:20px 0;
}
#nav-wrapper .navbar-brand-column,
#nav-wrapper .navbar-account-column{
  display:flex;align-items:center;flex:0 0 auto;min-width:0;padding:0 0.75rem;
}
#nav-wrapper .navbar-links-column{flex:1 1 0;min-width:0;padding:0 0.75rem;}
#nav-wrapper .navbar-account-column{justify-content:flex-end;}
#nav-wrapper .navbar-brand{
  padding:0.3125rem 1rem 0.5rem;margin-right:1rem;
  font-size:1.25rem;line-height:1.5;white-space:nowrap;
}
#nav-wrapper .navbar-brand img{max-width:10rem;height:auto;vertical-align:middle;}
#central-nav-items{display:flex;flex-wrap:nowrap;justify-content:center;}
#nav-wrapper .nav-link{
  display:block;color:#212529;font-size:1.125rem;font-weight:400;
  line-height:1.5;text-decoration:none;
}
#nav-wrapper .nav-link:hover{color:#212529;}
#nav-wrapper .nav-link.active{font-weight:700;}
/* Tighten link spacing near the mobile breakpoint without wrapping labels. */
#central-nav-items .nav-link{padding:0 clamp(0.4rem, calc(5vw - 3rem), 1.5rem);white-space:nowrap;}
#nav-right{display:flex;align-items:center;justify-content:flex-end;}
#nav-wrapper .desktop-nav-actions{display:flex;align-items:center;white-space:nowrap;}
#nav-wrapper .login-link{padding:0.2rem 1rem;}
#nav-wrapper .btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--purple);border:1px solid var(--purple);border-radius:1.25rem;
  color:#fff;font:inherit;font-size:1.125rem;line-height:1.5;
  padding:0.375rem 1.5rem;
}
#nav-wrapper .btn:hover,#nav-wrapper .btn:active{background:var(--purple);border-color:var(--purple);}
#nav-wrapper .desktop-nav-actions .btn{margin:0 1rem;}
#nav-wrapper .navbar-toggler{
  display:none;padding:0.25rem 0.75rem;font:inherit;font-size:1.25rem;line-height:1;
  color:rgba(33,37,41,0.65);background:transparent;
  border:1px solid rgba(0,0,0,0.15);border-radius:0.375rem;cursor:pointer;
}
#nav-wrapper .navbar-toggler-icon{
  display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center/100% no-repeat;
}
#nav-wrapper a:focus-visible,#nav-wrapper button:focus-visible{
  outline:2px solid var(--purple);outline-offset:3px;
}
#mobile-nav{display:none;}

@media (max-width:991.98px){
  #nav-wrapper .navbar-links-column,#nav-wrapper .desktop-nav-actions{display:none;}
  #nav-wrapper .navbar-account-column{margin-left:auto;}
  #nav-wrapper .navbar-toggler{display:block;}
  #mobile-nav:not([hidden]){
    display:block;position:absolute;top:calc(100% + 0.125rem);right:0;z-index:1000;
    min-width:10rem;width:max-content;max-width:calc(100vw - 1.5rem);
    max-height:calc(100dvh - 6rem);overflow-y:auto;
    padding:0.5rem 0;margin:0;background:#fff;
    border:1px solid rgba(0,0,0,0.175);border-radius:0.375rem;
  }
  #mobile-nav .nav-link{display:flex;justify-content:center;padding:0.2rem 1rem;}
  #mobile-nav .btn{width:fit-content;margin:0.5rem auto 0;padding:0.25rem 1.5rem;border:0;}
}
@media (max-width:576px){
  #nav-wrapper .navbar-brand img{max-width:6rem;}
  #mobile-nav .nav-link{font-size:1rem;}
}

/* ---------- Shared content buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--purple);
  border:1px solid var(--purple);
  border-radius:1.25rem;
  color:#fff!important;
  font-size:1.05rem;
  padding:0.55rem 1.4rem;
  cursor:pointer;
  font-weight:500;
  transition:background-color .15s ease;
}
.btn:hover{background-color:var(--purple-dark);border-color:var(--purple-dark);color:#fff;}
.btn-pill{border-radius:5.25rem;padding:0.7rem 2rem;}
.btn-outline{background:#fff;color:var(--purple)!important;border:1.5px solid var(--purple);}
.btn-outline:hover{background:var(--purple);color:#fff!important;}
.btn-white{background:#fff;color:var(--purple)!important;border:none;}
.btn-white:hover{background:#f0f0ff;}
/* ---------- Page title (matches h1.page_title on faq/pricing pages) ---------- */
.page_title{
  margin-top:3.5rem;
  font-size:3rem;
  font-weight:700;
  text-align:center;
  color:var(--purple);
}
.page-subtitle{
  text-align:center;
  max-width:640px;
  margin:0.75rem auto 0;
  font-size:1.2rem;
  color:var(--text-muted);
  font-weight:500;
}

/* ---------- Buttons / pills used as category filters ---------- */
.pill-filter{
  display:inline-flex;align-items:center;
  border-radius:5.25rem;
  border:1.39px solid var(--border-light);
  background:#fff;
  color:var(--text-dark);
  font-size:0.95rem;
  font-weight:600;
  padding:0.5rem 1.25rem;
  cursor:pointer;
  transition:all .15s ease;
}
.pill-filter.active,.pill-filter:hover{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}

/* ---------- Featured post ---------- */
.featured-card{
  border-radius:1.563rem;
  background:linear-gradient(26.27deg,#BCFFF3 -5.16%,#2C1C9E 13.42%,#3E25B5 63.01%,#BCFFF3 100%);
  color:#fff;
  overflow:hidden;
  display:flex;
  min-height:22rem;
}
.featured-card .text-container{
  padding:3rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:56%;
}
.featured-card .tag{
  display:inline-block;
  background:rgba(255,255,255,0.2);
  color:#fff;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:0.35rem 0.9rem;
  border-radius:5.25rem;
  margin-bottom:1.25rem;
  width:fit-content;
}
.featured-card h2{font-size:2.4rem;font-weight:700;margin:0 0 1rem;line-height:1.2;}
.featured-card p{font-size:1.15rem;color:#ffffffcc;margin-bottom:1.75rem;}
.featured-card .meta{font-size:0.95rem;color:#ffffffb0;margin-top:1.5rem;}
.featured-visual{
  flex:1;
  background:radial-gradient(120% 120% at 70% 30%,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 60%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.featured-visual .icon-circle{
  width:9rem;height:9rem;border-radius:50%;
  background:rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;
  overflow:hidden;
}
/* With a featured image, the photo fills the whole right side and fades into the card. */
.featured-visual.has-image{background:none;}
.featured-visual.has-image img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* A mask rather than a colour overlay, so the card's own gradient shows through without a seam. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 35%);
}

@media (max-width:900px){
  .featured-card{flex-direction:column;min-height:auto;}
  .featured-card .text-container{max-width:100%;padding:2.25rem;}
  .featured-visual{min-height:12rem;}
  .featured-visual.has-image{min-height:16rem;}
  .featured-visual.has-image img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
  }
}

/* ---------- Article grid cards ---------- */
.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
@media (max-width:992px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.article-grid{grid-template-columns:1fr;}}

.article-card{
  border:1.39px solid var(--border-light);
  background:#fff;
  border-radius:1.063rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.article-card:hover{
  box-shadow:0 12px 28px rgba(62,37,181,0.12);
  transform:translateY(-3px);
}
.thumb{
  height:11rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:#fff;
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-1{background:linear-gradient(135deg,#3E25B5,#2C1C9E);}
.thumb-2{background:linear-gradient(135deg,#2C1C9E,#62ECDC);}
.thumb-3{background:linear-gradient(135deg,#3D1493,#3E25B5);}
.thumb-4{background:linear-gradient(135deg,#62ECDC,#3E25B5);}
.thumb-5{background:linear-gradient(135deg,#BCFFF3,#2C1C9E);}
.thumb-6{background:linear-gradient(135deg,#3E25B5,#3D1493);}

.article-card .card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.article-card .category{
  font-size:0.8rem;font-weight:700;color:var(--purple);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:0.6rem;
}
.article-card h3{font-size:1.25rem;font-weight:700;margin:0 0 0.6rem;line-height:1.35;color:var(--text-dark);}
.article-card p{font-size:0.98rem;color:var(--text-muted);font-weight:500;margin-bottom:1rem;flex:1;}
.article-card .card-meta{
  font-size:0.85rem;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(214,210,210,0.6);
  padding-top:0.9rem;margin-top:auto;
}

/* ---------- Newsletter / CTA section ---------- */
.cta-section{
  border-radius:1.563rem;
  background:linear-gradient(7.73deg,#2C1C9E -10.45%,#3E25B5 59.04%,#BCFFF3 123.77%);
  padding:3.5rem 3rem;
  text-align:center;
  color:#fff;
}
.cta-section h2{font-size:2.2rem;font-weight:700;margin-bottom:0.75rem;}
.cta-section p{font-size:1.15rem;color:#ffffffcc;max-width:520px;margin:0 auto 1.75rem;}

/* ---------- Section spacing ---------- */
.section{margin-top:6rem;}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.section-title-row h2{font-size:2rem;font-weight:700;margin:0;color:var(--text-dark);}

/* ---------- Pagination ---------- */
.pagination-wrap{display:flex;justify-content:center;margin-top:3rem;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-size:0.95rem;color:var(--text-muted);margin-top:2.5rem;
}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--purple);}
.breadcrumb .sep{margin:0 0.4rem;}
.breadcrumb .current{color:var(--purple);font-weight:600;}

/* ---------- Article page ---------- */
.article-header{max-width:820px;margin:2rem auto 0;text-align:center;}
.article-header .category{
  display:inline-block;font-size:0.85rem;font-weight:700;color:var(--purple);
  text-transform:uppercase;letter-spacing:.03em;background:rgba(62,37,181,0.08);
  padding:0.4rem 1.1rem;border-radius:5.25rem;margin-bottom:1.25rem;
}
.article-header h1{font-size:2.75rem;font-weight:700;line-height:1.2;color:var(--text-dark);margin-bottom:1.25rem;}
.article-header .lede{font-size:1.25rem;color:var(--text-muted);font-weight:500;margin-bottom:1.75rem;}

.author-row{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:2.5rem;}
.author-avatar{
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:linear-gradient(135deg,#3E25B5,#62ECDC);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
}
.author-meta{text-align:left;font-size:0.9rem;}
.author-meta .name{font-weight:700;color:var(--text-dark);}
.author-meta .date{color:var(--text-muted);}

.hero-image{
  max-width:960px;margin:0 auto;
  height:24rem;border-radius:1.25rem;
  background:linear-gradient(135deg,#3E25B5,#2C1C9E 45%,#62ECDC);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:4rem;
  overflow:hidden;
}
.hero-image img{width:100%;height:100%;object-fit:cover;}

.article-body{max-width:760px;margin:3rem auto 0;font-size:1.15rem;line-height:1.85;color:var(--text-dark);}
.article-body h2{font-size:1.75rem;font-weight:700;margin:2.75rem 0 1rem;}
.article-body h3{font-size:1.35rem;font-weight:700;margin:2rem 0 0.85rem;}
.article-body p{margin-bottom:1.5rem;color:#332a44;}
.article-body ul{margin:0 0 1.5rem 0;padding-left:0;list-style:none;}
.article-body ul li{
  position:relative;padding-left:1.9rem;margin-bottom:0.75rem;color:#332a44;
}
.article-body ul li::before{
  content:"";position:absolute;left:0;top:0.4rem;width:1.1rem;height:1.1rem;
  border-radius:50%;background:var(--purple);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 10l4 4 8-8'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 10l4 4 8-8'/%3E%3C/svg%3E") center/70% no-repeat;
}
.pull-quote{
  border-left:4px solid var(--purple);
  background:var(--bg-light);
  border-radius:0 0.8rem 0.8rem 0;
  padding:1.5rem 2rem;
  margin:2.5rem 0;
  font-size:1.3rem;
  font-weight:600;
  color:var(--purple-deep);
  font-style:italic;
}
.callout-box{
  border:1.39px solid var(--border-light);
  border-radius:1.063rem;
  padding:1.75rem 2rem;
  margin:2.5rem 0;
  background:#fbfbff;
}
.callout-box .callout-title{font-weight:700;color:var(--purple);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;}

.share-row{display:flex;align-items:center;gap:0.75rem;margin:2.5rem auto 0;max-width:760px;justify-content:flex-start;}
.share-row span{font-size:0.9rem;font-weight:700;color:var(--text-muted);margin-right:0.25rem;}
.share-btn{
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--bg-light);
  display:flex;align-items:center;justify-content:center;color:var(--purple);
  font-size:0.95rem;cursor:pointer;
}
.share-btn:hover{background:var(--purple);color:#fff;}

.author-bio{
  max-width:760px;margin:3.5rem auto 0;
  border:1.39px solid var(--border-light);border-radius:1.063rem;
  padding:2rem;display:flex;gap:1.25rem;align-items:flex-start;
}
.author-bio .author-avatar{width:3.5rem;height:3.5rem;flex-shrink:0;font-size:1.2rem;}
.author-bio h4{margin:0 0 0.4rem;font-size:1.1rem;font-weight:700;}
.author-bio p{margin:0;color:var(--text-muted);font-size:0.98rem;}

/* ---------- Footer ---------- */
#sa-footer{margin-top:6rem;background-color:#fff;}
#sa-footer-inner{max-width:1320px;margin:0 auto;padding:0 1.5rem;}
.footer-top{display:flex;align-items:center;justify-content:space-between;padding:3rem 0 2rem;flex-wrap:wrap;gap:1.5rem;}
.footer-top .logo-img{max-width:8rem;}
#follow-us{font-size:1rem;font-weight:600;margin-right:0.75rem;}
#social-icons a{margin-left:1rem;display:inline-flex;}
#social-icons img{max-height:1.5rem;}
#social-icons a:hover{opacity:0.75;}
.division-line{height:1px;background:rgba(211,210,210,0.6);}
.footer-middle{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  padding:2.5rem 0;
}
@media (max-width:900px){.footer-middle{grid-template-columns:repeat(2,1fr);}}
.footer-col-title{font-size:1rem;font-weight:600;display:block;margin-bottom:0.6rem;color:var(--text-dark);}
.footer-col-title a{color:inherit;font-weight:inherit;}
.footer-col-item{display:block;font-size:0.9rem;margin-bottom:0.5rem;}
.footer-col-item a{color:#555;}
.footer-col-item a:hover{color:var(--purple);}
.footer-bottom{background-color:var(--purple);text-align:center;padding:1.5rem;}
.footer-bottom p{color:#F6F5F8;font-size:0.95rem;margin:0;}