.hfeed.site, .site{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    }
    .main-wrapper.wrapper {
      padding-top: 0px;
    }
    .site-main {
      padding-top: 48px;
    }
.entry-featured-image  img  {
    width:100%;
    height: 240px; 
    object-fit:cover;
    }
    .main-wrapper{
        flex:1;
        }
.section-supported-tech > .wp-block-group__inner-container {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 34px;
    }
        
.flex-container > .wp-block-group__inner-container{
  display:flex;
}
.justify-between > .wp-block-group__inner-container {
  justify-content: space-between;
}
.sidebar-widget.widget.widget_recent_entries ul{
    display:flex;
    flex-direction: column;
    gap: 12px;
    }
.footer-widgets-area p, .footer-widgets-area strong, #colophon a, footer#colophon, #colophon .copyright-info a{
    color: #fefefe;
    }

.learning-technologies {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.learning-technology {
    padding: 10px 15px;
    background: white;
    border-radius: 3px;
    border: 1px solid #eee;
    }

.card__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    }
.section-category {

    font-weight: bold;
    margin-bottom: 0;
    letter-spacing: .1rem;
}

    .section-group h3.section-title {
        font-size: 32px;
        }
    .wp-block-group__inner-container .technology {margin: 0;}


.section-supported-tech .technology figure {
    width: 54px;
    margin: 0;
}

.wp-block-button{
    margin-top: 1rem;
    }

.entry-col-boxed article {
    background-color: unset;
    border: 1px solid var(--color-boxes);
    }
    
    /*NEWSLETTER STYLES*/
.wp-block-group.newsletter-section img {
    max-width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.newsletter-header-image {
    margin-bottom:12px;
    }
.newsletter-image__header{
  margin-bottom:0px;
}

.newsletter__image:has(+ p.newsletter-image__description){
  margin-bottom:0px;
}

.newsletter-header-subtitle {
    margin-bottom:64px;
    }
.newsletter-image__description {
  margin-bottom: 3rem;
}

div hr.newsletter-section__separator:last-child{
      margin-top:4rem;
      margin-bottom:4rem;
    }
.newsletter-section h3:not(:last-child){
  margin-bottom: .75rem;
}
.newsletter-section, .newsletter-section--shaded {
    padding: 10px 18px;
    max-width: 72ch;
    margin: 0 auto;
    }
.newsletter-section--shaded{
    background: var(--header-main-bg-color);
    border-radius: 4px;
    padding: 32px 48px;
    }
    
#colophon.site-footer a {
    color: var(--footer-main-bg-color-accent);
}

/*Pages Styles*/
.color-grey-secondary{
  color: #6b7280;
}
.color-accent-primary{
  color: var(--color-bg-alt-accent);
}
.full-width figure{
  width: 100%;
}
.is-style-rounded-sm img{
  border-radius: 18px;
  object-fit:cover;
  width: 100% !important;
  height: 350px !important;
}

.page-title{
  position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.bg-rd-sm{
  border-radius: 5px;
}
.body-copy-constrain {
  max-width: 72ch;

}
.home.mt-lg{
  margin-top: 64px !important;
}
.mt-lg{
  margin-top: 64px;
}
.mt-xl{
  margin-top: 96px;
}
.mt-md{
  margin-top:32px;
}
.mt-sm{
  margin-top:12px;
}
.mt-xs{
  margin-top:4px;
}
.mt-none{
  margin-top:0px;
}
.mb-none{
  margin-bottom: 0px;
}
.bg-gray{
  background-color: #f6f6f4;
}
.p-comfortable{
  padding: 48px 32px;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.justify-center {
 justify-content: center; 
}
.align-center{
  align-items: center;
}
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.toc-wrapper{
  display:flex;
  flex-direction:column;
  position: sticky;
  top: 116px;
}
  #toc-container {
  position: sticky;
  top: 116px;
  z-index: 10; /* Adjust this value as needed */
  transition: opacity 0.3s ease;
  }
  .toc-hamburger {
  display: none;
  background:white;
  border:none;
  border-radius:5px;
}
#toc-container {
  display: block;
}

/* Mobile state */
@media only screen and (max-width: 782px) {
  .toc-hamburger {
    display: block;
    position: fixed;
    top: 145px;
    right: 20px;
    z-index: 20;
  }
  #toc-container {
    display: none;
    position: fixed;
    padding: 8px 12px;
    top: 135px;
    right: 20px;
    z-index: 10;
    background:#eeeeec;
    border-radius:5px;
    opacity:0;
    /* Additional styling for the fixed menu */
  }
}

/* Add a 'toggled' class when the menu is open */
.toc-hamburger.toggled{
  background: #eeeeec;
}
.toc-hamburger.toggled span:nth-child(1) {
  transform: rotate(45deg) translateY(-50%);
  translate: 2px calc(3px / -2);
}
.toc-hamburger.toggled span:nth-child(2) {
  opacity: 0;
}
.toc-hamburger.toggled span:nth-child(3) {
  transform: rotate(-45deg) translateY(50%);
  translate: 2px calc(3px / 2);
}
#toc-container.toggled {
  display:block;
  opacity:100;
}

/* Structure for the hamburger lines */
.toc-hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 3px auto;
  background-color: #b11010;
  transform-origin: left center;
  transition: all 0.3s ease;
}
  
  #toc-list{

    list-style:none;
    padding-left:0px;
    line-height:1.8;
  }
  #toc-list a{
    display:block;
  }
  .level-3{
    padding-left:10px;
  }
  .level-4{
    padding-left: 20px;
  }
  .level-5{
    padding-left:30px;
  }
  .callout {
    margin: 32px 0px;
    padding: 28px 18px 28px 18px;
  }
.callout p:last-child {
    margin: 0;
  }
  .callout.ai-prompt{
    background: #f7f7f5;
    border-left: 4px solid  #a6a491;
  }
   .callout.warn{
    background: #f2eeee;
    border-left: 4px solid  #9b1919;
  }
     .callout.caution{
    background: #fdfae9;
    border-left: 4px solid  #f8d44c;
  }
  .callout.info{
    display: flex;
    background: #f2f7fc;
    color: #16273b;
    border-left: solid 4px #619fcf;
    
  }
  .callout.info > div span {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
    line-height: 1em;
    white-space: nowrap;
    font-size:26px;
    margin-right: 12px;
  }
  
  details {
    margin-bottom: 20px;
  }
  
  .section-header-underline {
    border-bottom: 4px solid #b41111;
    display: inline-block;
    padding: 0px 24px 0px 0px;
    
}

.logo-mark__image, h2:not(:first-child).logo-mark__text {
  margin: 0px;
}

/* Documentation nav wrapper */
.documentation-nav {
    background-color: #f7f7f5; /* Light background from your callouts */
    border: 1px solid #eee;
    border-radius: 5px; /* Matches your .bg-rd-sm class */
    padding: 20px;
    margin-bottom: 32px; /* Matches your .mt-md spacing */
}

/* Documentation nav header */
.documentation-nav p:first-child {
    font-weight: bold;
    color: #16273b; /* Dark blue from your info callouts */
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #b11010; /* Your red accent color */
    font-size: 1.1em;
    letter-spacing: 0.05em;
}

/* Current page styling for navigation */
.wp-block-navigation .current-menu-item a,
.wp-block-navigation a[aria-current="page"] {
    font-weight: bold;
    color: #b11010; /* Your red accent color */
}

/* Add a subtle left border indicator for current page */
.wp-block-navigation .current-menu-item {
    border-left: 3px solid #b11010;
    padding-left: 8px;
    background-color: #f7f7f5; /* Light background from your callouts */
    border-radius: 0 3px 3px 0;
}

/* Optional: Add some padding to make the background more visible */
.wp-block-navigation .current-menu-item a {
    padding: 4px 8px;
    display: block;
}

/* Ensure other nav items have consistent spacing */
.wp-block-navigation .wp-block-navigation-item:not(.current-menu-item) a {
    padding: 4px 8px;
    display: block;
}

/*
* Sizing
*/

p {
  line-height: 1.6;
}

/* Font Size System - Tailwind-inspired */

/* Heading Sizes */
.text-h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem); /* ~32px to ~56px */
  line-height: 1.1;
  font-weight: 700;
}

.text-h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); /* ~28px to ~44px */
  line-height: 1.2;
  font-weight: 600;
}

.text-h3 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); /* ~24px to ~36px */
  line-height: 1.25;
  font-weight: 600;
}

.text-h4 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem); /* ~20px to ~28px */
  line-height: 1.3;
  font-weight: 600;
}

/* Body Text Sizes */
.text-body-sm {
  font-size: clamp(0.875rem, 1vw + 0.5rem, 0.9375rem); /* ~14px to ~15px */
  line-height: 1.5;
}

.text-body-base {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem); /* ~16px to ~18px */
  line-height: 1.6;
}

.text-body-md {
  font-size: clamp(1.125rem, 1.5vw + 0.75rem, 1.25rem); /* ~18px to ~20px */
  line-height: 1.6;
}

.text-body-lg {
  font-size: clamp(1.25rem, 2vw + 0.75rem, 1.5rem); /* ~20px to ~24px */
  line-height: 1.5;
}

.text-body-xl {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 1.875rem); /* ~24px to ~30px */
  line-height: 1.4;
}

.text-body-huge {
  font-size: clamp(1.875rem, 3vw + 1rem, 2.5rem); /* ~30px to ~40px */
  line-height: 1.3;
}

/* Optional: Font weight utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Optional: Line height utilities */
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }