:root{
  --ai-bg: #eaf3ff;
  --ai-surface: #ffffff;
  --ai-text: #01071e;
  --ai-muted: rgba(1,7,30,.64);
  --ai-border: rgba(1,7,30,.10);
  --ai-primary: #1a4bff;
  --ai-pink: #ff00ab;
  --ai-radius: 22px;
}

body{ background: var(--ai-bg); color: var(--ai-text); }

.ai-page {
  padding: 96px 16px 64px;
}


/* inner “card” shell */
.ai-shell{
  background: var(--ai-surface);
  border-radius: 94px;
  padding: 64px;
  width: 100%;
  margin:  0 auto;
}

/* layout */
.ai-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}

.ai-grid--no-sidebar{
  grid-template-columns: 1fr;
}

@media (max-width: 980px){
  .ai-grid{ grid-template-columns: 1fr; }
}

/* sidebar */
.ai-sidebar{ position: relative; }

.ai-sidenav{
  position: sticky;
  top: 96px;
}



.ai-sidenav__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-sidenav__item{ margin: 0; }



.ai-sidenav__item a:hover{ color: rgb(1, 7, 30); 
text-decoration: none;}

.ai-sidenav__item.is-current > a {
    color: rgb(1, 7, 30);
}

/* Content typography */

.ai-page .ai-content{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.16px;
    color: rgb(1, 7, 30);
}

.ai-page .ai-content a{
  color: rgb(26, 75, 255);
  text-decoration: none;
}

.ai-page .ai-content a:hover{
  text-decoration: underline;
}

.ai-page .ai-content .wp-block-heading{
 margin-top: 0;
}

.ai-content {
    margin: 0 0 24px;
}
.ai-content h1{
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.ai-content h2{
  font-size: 24px;
  font-weight: 500;
  line-height: 31.92px;
  letter-spacing: -0.72px;
  margin-bottom: 24px;
  color: rgb(1, 7, 30);
  /* color: #ff00aa; */
}

.ai-content h3{
    font-size: 17.6px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.352px;
  margin-bottom: 24px;
  color: rgb(1, 7, 30);
}

.ai-content ul{
    padding: 0;
    margin: 0;
    padding-left: 16px;
    margin-bottom: 24px;
}

.ai-content ul strong{
    font-weight: 500;
    color: rgb(1, 7, 30);
}
.ai-content p{
    margin-bottom: 24px;
}
.ai-content strong {
    font-weight: 500;
}

.ai-content .wp-block-verse {
    overflow: auto;
    white-space: pre-wrap;
    margin: 0;
    margin-top: -16px;
    border-radius: 16px;
    background: rgb(243, 244, 247);
    font-family: inherit;
    line-height: inherit;
    padding: 24px;
    margin-bottom: 24px;
}
/* Divider block – якщо юзаєте Separator */
.ai-content .wp-block-separator {
    border: 0;

    margin: 56px 0;
    background-color:  rgba(1, 7, 30, 0.08);
  
}

/* Callout (як “info” блок на макеті) — найзручніше через Group з класом ai-callout */
.ai-content .ai-callout {
    background: rgba(26, 75, 255, .06);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 16px 0 24px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 2px solid #1495ff;
    color: rgb(1, 7, 30);

}
.ai-content .ai-callout p{
    margin: 0;
}

.ai-content .wp-block-accordion-heading {
    border-bottom: 1px solid rgba(1, 7, 30, 0.08);
    padding-bottom: 24px;

}
.ai-content .wp-block-accordion-heading:hover{
    text-decoration: none;
    opacity: 0.6;
}
.ai-content .wp-block-accordion-heading:hover button{
    text-decoration: none;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{
    text-decoration: none;
}
.ai-content .is-open .wp-block-accordion-heading {
    border-bottom: none;
}
.ai-content  .is-open .wp-block-accordion-panel{
 border-bottom: 1px solid rgba(1, 7, 30, 0.08);
}



.wp-block-image{
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 24px;
    overflow: hidden;
}

figure{
  width: 100% !important;
}
/* CTA box */
.ai-cta{
    background: rgba(26, 75, 255, .06);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 16px 0 24px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 2px solid #1495ff;
    color: rgb(1, 7, 30);
}
.ai-cta .ai-pink{ color: var(--ai-pink); font-weight: 600; }




/* Buttons */
.wp-block-button .wp-block-button__link {
    background: var(--ai-primary);
    color: #fff;
    border-radius: 999px;
    padding: 8px 17px;
    text-decoration: none;
    border: 0;
    font-size: 16px;
    font-weight: 400;
}
.wp-block-button .wp-block-button__link:hover{ filter: brightness(.86); }





/* Page header */
.ai-pagehead {
  padding: 0 0 56px;
  max-width: 1400px;
    margin: 0 auto;
}

.ai-pagehead__breadcrumbs .ai-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(1, 7, 30, 0.64);
}

.ai-breadcrumbs__link,
.ai-breadcrumbs__link:visited {
  color: rgba(1, 7, 30, 0.64);
  text-decoration: none;
  font-size: 12.8px;
  font-weight: 400;
  line-height: 19.2px;

}
.ai-breadcrumbs__link:hover { font-weight: 500; transform: translateY(-1px);}

.ai-breadcrumbs__sep { color: rgba(1, 7, 30, 0.16); }
.ai-breadcrumbs__current { color: rgba(1, 7, 30, 0.64); }

.ai-pagehead__title {
  margin: 10px 0 0;
  font-size: clamp(36px, 3vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgb(1, 7, 30);
}

.ai-pagehead__sidenav-title.ai-sidenav__title {
  font-size: 48px;
  line-height: 48px;
  font-weight: 500;
  color: rgb(1, 7, 30);
  letter-spacing: -2.4px;
    margin-top: 24px;   
}

.ai-pagehead__divider {
  margin-top: 32px;
  height: 1px;
  background: rgba(1, 7, 30, 0.08);
}

/* Grid */
.ai-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1400px;
    margin: 0 auto;
}

.ai-grid--no-sidebar { grid-template-columns: 1fr; }

/* Sidebar */
.ai-sidebar {
  position: sticky;
  top: 110px;
}

.ai-sidebar ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-top: 3px; 
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-sidebar a { 
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.16px;
    color: rgb(26, 75, 255); text-decoration: none; }

@media (max-width: 1200px){
.ai-shell{
    border-radius: 48px;
    padding: 23px;
  }
}

/* Responsive */
@media (max-width: 1023px) {
  .ai-shell{
    border-radius: 48px;
    padding: 23px;
  }
  .ai-grid { width: 100%;
        display: block; }
  .ai-sidebar { position: relative; top: auto; }
  .ai-pagehead__sidenav-title.ai-sidenav__title{
    font-size: 42px;
    line-height: 42px;
  }
  .ai-pagehead{
    padding: 0 0 24px;
  }
  .ai-pagehead__divider{
    margin-top: 24px;
  }
  .ai-sidebar ul{
    margin-bottom: 24px;
  }
  .ai-page .ai-content,
  .ai-sidebar a{
    font-size: 14px;
    line-height: 21px;
  }
  .ai-content h2{
    font-size: 21px;
    line-height: 28px;
  }
  .ai-content .wp-block-separator{
    margin: 24px 0;
  }
  .ai-content h3{
    font-size: 15.4px;
    line-height: 19.25px;
  }
  .ai-pagehead__breadcrumbs .ai-breadcrumbs{
    row-gap: 0;
  }
    body.ai-menu-lock .ai-page {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .ai-page {
    opacity: 1;
    transition: opacity 0.2s ease;
  }
}