.material-icons,.material-icons-outlined {
  font-weight:normal; font-style:normal; font-size:24px; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
}
.material-icons { font-family:'Material Icons'; }
.material-icons-outlined { font-family:'Material Icons Outlined'; }
[hidden] { display:none !important; }
.blog-mobile-header__inner,.blog-header__nav--mobile { display:none; }
.blog-page > .blog-breadcrumb,
.blog-page > .blog-page-head { margin-bottom: 0; }
nav.blog-breadcrumb,
.blog-breadcrumb {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 0.85rem;
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--caui-brand-green, #2f6f57) 16%, var(--caui-border, #ddd));
  border-radius: var(--blog-radius, 16px);
  background: color-mix(in srgb, var(--caui-brand-green-soft, #eef7f1) 55%, var(--caui-surface, #fff));
  box-shadow: none;
}
.blog-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2px;
  row-gap: 4px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.blog-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--caui-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  background: none;
  border: 0;
}
.blog-breadcrumb__item::before,
.blog-breadcrumb__item::after {
  content: none;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.blog-breadcrumb__sep {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: color-mix(in srgb, var(--caui-brand-green, #2f6f57) 55%, var(--caui-text-muted, #9aa3a0));
}
.blog-breadcrumb__sep .material-icons-outlined {
  font-size: 16px;
  line-height: 1;
}
.blog-breadcrumb__link,
.blog-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 2px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.blog-breadcrumb__link:hover,
.blog-breadcrumb__link:focus-visible {
  color: var(--caui-brand-green-deep, var(--blog-color-primary-deep, #1f4f3d));
  background: color-mix(in srgb, var(--caui-brand-green-soft, #eef7f1) 70%, transparent);
}
.blog-breadcrumb__link:focus-visible {
  outline: 2px solid var(--blog-focus-ring, var(--caui-brand-green, #2f6f57));
  outline-offset: 2px;
}
.blog-breadcrumb__home-icon {
  font-size: 16px;
  line-height: 1;
}
.blog-breadcrumb__text,
.blog-breadcrumb__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-breadcrumb__item.is-current {
  min-width: 0;
  max-width: min(100%, 28rem);
  color: var(--caui-text, #1a1a1a);
  font-weight: 700;
}
.blog-article-header > .blog-breadcrumb { margin-bottom: 1rem; }
.static-page__breadcrumb > .blog-breadcrumb { margin-bottom: 0; }
.blog-page > .blog-pagination { margin-top: 0; }
.blog-post-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; align-content:start; }
.blog-post-card__media { display:block; min-height:150px; overflow:hidden; border-radius:var(--blog-radius,16px); background:var(--caui-brand-green-soft,#eef7f1); }
.blog-post-card__media img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.blog-post-card__fallback { display:grid; place-items:center; min-height:150px; font-size:3rem; }
.blog-layout-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
[class*="blog-col-span-"] { grid-column:span 12; }
.blog-col-span-1{grid-column:span 1}.blog-col-span-2{grid-column:span 2}.blog-col-span-3{grid-column:span 3}.blog-col-span-4{grid-column:span 4}.blog-col-span-5{grid-column:span 5}.blog-col-span-6{grid-column:span 6}.blog-col-span-7{grid-column:span 7}.blog-col-span-8{grid-column:span 8}.blog-col-span-9{grid-column:span 9}.blog-col-span-10{grid-column:span 10}.blog-col-span-11{grid-column:span 11}
.field-validation-error,.validation-summary-errors { color:#a42121; }
.blog-comment { padding:1rem 0; border-bottom:1px solid var(--caui-border,#ddd); }
.blog-comment header { display:flex; gap:1rem; align-items:center; }
.blog-faq-list summary{cursor:pointer;user-select:none}
.blog-category-hero__visual>.material-icons-outlined{
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  font-size:52px;
  line-height:1;
}
@media(min-width:861px){
  .blog-header__desktop{width:100%;max-width:calc(var(--blog-container) + (2 * var(--blog-gutter)));margin-inline:auto;padding-inline:var(--blog-gutter)}
  .blog-header__desktop>.blog-header__nav{min-width:0}
}
@media(max-width:860px){
  .blog-header__desktop{display:none}
  .blog-mobile-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:8px max(var(--blog-gutter),calc((100% - var(--blog-container))/2))}
  .blog-mobile-header__inner .blog-header__menuBtn{display:grid}
  .blog-header__nav--mobile.is-open{display:flex}
  .blog-category-hero__visual>.material-icons-outlined{font-size:46px}
  .blog-breadcrumb { margin-bottom: 0.65rem; padding: 8px 12px; }
  .blog-breadcrumb__list { flex-wrap: nowrap; }
  .blog-breadcrumb__item:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
  .blog-breadcrumb__item.is-home .blog-breadcrumb__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .blog-breadcrumb__item.is-current {
    flex: 1 1 auto;
    max-width: none;
  }
  .blog-breadcrumb__link,
  .blog-breadcrumb__current { padding-block: 6px; }
}
.blog-pagination{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:36px}
.blog-pagination__status{margin:0;color:var(--blog-text-muted);font-size:12.5px;font-weight:700}
.blog-pagination__list{display:flex;align-items:center;gap:4px;max-width:100%;margin:0;padding:6px;overflow-x:auto;border:1px solid color-mix(in srgb,var(--blog-color-primary) 14%,var(--blog-border));border-radius:var(--blog-radius-pill);background:color-mix(in srgb,var(--blog-color-primary-soft) 38%,var(--blog-surface));box-shadow:0 12px 30px color-mix(in srgb,var(--blog-color-primary-deep) 8%,transparent);list-style:none;scrollbar-width:none}
.blog-pagination__list::-webkit-scrollbar{display:none}
.blog-pagination__list>li{display:flex;flex:0 0 auto}
.blog-pagination__page,.blog-pagination__nav,.blog-pagination__ellipsis{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;gap:4px;padding:0 10px;border-radius:var(--blog-radius-pill);color:var(--blog-color-primary-deep);font-size:13px;font-weight:800;line-height:1;text-decoration:none;transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
.blog-pagination__nav .material-icons-outlined{font-size:18px}
.blog-pagination__page:hover:not(.is-current),.blog-pagination__nav:hover:not(.is-disabled),.blog-pagination__page:focus-visible:not(.is-current),.blog-pagination__nav:focus-visible:not(.is-disabled){background:var(--blog-color-primary-soft);color:var(--blog-color-primary-deep)}
.blog-pagination__page:focus-visible,.blog-pagination__nav:focus-visible{outline:2px solid var(--blog-focus-ring);outline-offset:2px}
.blog-pagination__page.is-current{background:var(--blog-color-primary);color:var(--blog-text-inverse);box-shadow:0 8px 18px color-mix(in srgb,var(--blog-color-primary) 28%,transparent)}
.blog-pagination__nav.is-disabled{opacity:.34}
.blog-pagination__ellipsis{min-width:28px;padding:0;color:var(--blog-text-muted);letter-spacing:.12em}
@media(max-width:520px){.blog-pagination{margin-top:28px}.blog-pagination__nav-label{display:none}.blog-pagination__page,.blog-pagination__nav,.blog-pagination__ellipsis{min-width:36px;height:36px;padding:0 8px}}
@media(max-width:700px){[class*="blog-col-span-"]{grid-column:span 12}}

/* Directory card groups stay a wrapping grid on desktop and become a carousel on tablet/phone. */
.blog-icon-directory-section .blog-carousel__rail.blog-card-grid,
.blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid,
.blog-topic-directory-section .blog-carousel__rail.blog-card-grid{
  display:grid;
  overflow:visible;
  padding-block:0;
  cursor:default;
  scroll-snap-type:none;
}
.blog-icon-directory-section .blog-carousel__rail.blog-card-grid>*,
.blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid>*,
.blog-topic-directory-section .blog-carousel__rail.blog-card-grid>*{flex:none}
@media(max-width:1100px){
  .blog-icon-directory-section .blog-carousel__rail.blog-card-grid,
  .blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid,
  .blog-topic-directory-section .blog-carousel__rail.blog-card-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    padding-block:5px 12px;
    cursor:grab;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .blog-icon-directory-section .blog-carousel__rail.blog-card-grid::-webkit-scrollbar,
  .blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid::-webkit-scrollbar,
  .blog-topic-directory-section .blog-carousel__rail.blog-card-grid::-webkit-scrollbar{display:none}
  .blog-icon-directory-section .blog-carousel__rail.blog-card-grid>*,
  .blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid>*{
    flex:0 0 42%;
    min-height:154px;
    scroll-snap-align:start;
  }
  .blog-topic-directory-section .blog-carousel__rail.blog-card-grid>*{
    flex:0 0 calc(50% - 8px);
    scroll-snap-align:start;
  }
}
@media(max-width:860px){
  .blog-icon-directory-section .blog-carousel__rail.blog-card-grid>*,
  .blog-seven-up-directory-section .blog-carousel__rail.blog-card-grid>*{flex:0 0 76%;min-height:176px}
  .blog-topic-directory-section .blog-carousel__rail.blog-card-grid>*{flex:0 0 76%;min-height:210px}
}
