:root{
      --brand-teal: #0b8998;         /* title accent */
      --brand-dark-aqua: rgb(0,140,182);
      --brand-aqua: rgb(0,184,197);
      --brand-orange: rgb(222,77,51);
      --brand-yellow: rgb(255,219,90);
      --brand-green: rgb(167,199,122);
      --brand-red: #c83737;          /* section headings & divider */
      --brand-sky: #90d4f0;          /* header ribbon bg */
      --brand-purple: rgb(139,71,149);
      --brand-dark-purple: rgb(111,57,119);
      --brand-white: rgb(246,246,246);
      --brand-dark-gray: #333333;
      --brand-off-white: #f9f9f9;
      --text-muted: #6c757d;
      --hero-photo: url("/_media/images/donut_study_hero_bg.jpg");
    }
    a{
      color:var(--brand-purple);
    }
    a:hover{
      color:var(--brand-dark-purple);
    }
    /* Friendly display treatment for main title */
    .display-study {
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--brand-teal);
    }

    /* Decorative dashed divider under the title */
    .dash-divider {
      border: 0;
      border-top: 4px dashed var(--brand-red);
      width: 90%;
      margin: .5rem auto .5rem;
      opacity: 1;
    }

    /* Section headers */
    .section-title {
      font-weight: 800;
      color: var(--brand-red);
      margin-bottom: .75rem;
    }

    /* Top header / ribbon */
    .study-header {
      background: var(--brand-sky);
      border-radius: .5rem;
      padding: .75rem 1rem;
    }

    /* Hero image wrapper to keep aspect ratio and rounded corners */
    .hero {
      position: relative;
      overflow: hidden;
      border-radius: .5rem;
      height:475px;
      
      background-image: var(--hero-photo);          /* hero background image */
      background-size: cover;                       /* fill the hero area */
      background-repeat: no-repeat;
      background-position: center calc(100% + 70px)

    }
    .hero.hero-sm {
      height: 375px;
      background-position:  center calc(100% + 250px);
    }

    .hero img.hero-photo {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Logo overlay positioned top-left above the image */
    .hero .hero-logo {
      position: absolute;
      top: 1.05rem;
      left: 1.75rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: 0px; /* readable on any photo */
      border-radius: .5rem;
    }

    .hero .hero-logo img {
      height: 75px;            /* adjust as needed */
      width: auto;
      display: block;
    }

    .hero .hero-logo .brand-text {
      font-weight: 800;
      color: var(--brand-teal);
      line-height: 1;
    }
    .nihLogo{
      max-width: 300px;
    }
    @media (min-width: 768px){
      .hero .hero-logo img { height: 145px; }
    }

    .hero .hero-title img{
      width:800px;
      position:absolute;
      right:30px;
      bottom:70px;
    }
/* --- NAVBAR INSIDE HERO, ALIGNED TO THE BOTTOM --- */
    .hero-nav-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;              
      z-index: 2;
      padding: .75rem;
    }
    .hero-nav {
      background: rgba(255, 255, 255, 0.9);  /* readable on photo */
      border-radius: .5rem;
      box-shadow: 0 6px 16px rgba(0,0,0,.12);
      backdrop-filter: blur(2px);
      padding:0px;
    }
    /* Make links stand out on top of imagery */
    .hero-nav .nav-link {
      font-weight: bold;
      padding:1rem 0;
      color: var(--brand-purple);
      text-transform:uppercase;
      transition: all 0.3s ease;
    }
    .hero-nav .nav-link:hover {
      color: var(--brand-white);
      background-color: var(--brand-dark-purple);
    }
    .hero-nav .nav-link.active {
      color: var(--brand-orange);
    }
    .hero-nav .nav-link.active:hover {
      color: var(--brand-white);
    }
    /* Intro paragraph */
    .lead-intro {
      color: var(--brand-purple);
      line-height: 1.65;
      font-weight: bold;
    }

    /* Lists: subtle spacing */
    .bullet-list {
      margin: 0;
      padding-left: 1.25rem;
    }
    .bullet-list li + li {
      margin-top: .25rem;
    }

    /* Compensation badge look */
    .compensation-box {
      background: #fff7e6;
      border: 1px solid #ffe2ac;
      border-radius: .5rem;
      padding: .75rem 1rem;
    }

    /* Small helpers for spacing */
    .mt-6 { margin-top: 4rem; }
    .mb-6 { margin-bottom: 4rem; }

    /* Accessibility: larger hit areas for links */
    .link-large {
      text-decoration: none;
      font-weight: 600;
    }

    /* Optional: make headings slightly larger on md+ */
    @media (min-width: 768px){
      .section-title { font-size: 1.35rem; }
    }

    .study-title img{
      max-width:800px;
    }




/* Bootstrap 5 accordion theming via CSS vars */
.accordion {
  /* Base panel/background + borders */
  --bs-accordion-bg: var(--brand-off-white);
  --bs-accordion-color: #fff;
  --bs-accordion-border-color: var(--brand-dark-aqua);

  /* Button (header) colors */
  --bs-accordion-btn-bg: var(--brand-white);
  --bs-accordion-btn-color: var(--brand-teal);

  /* Active (expanded) state colors */
  --bs-accordion-active-bg: var(--brand-dark-aqua);
  --bs-accordion-active-color: #fff;


  /* Focus ring */
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(11, 137, 152, 0.35);
}

/* Nice hover treatment */
.accordion .accordion-button:hover {
  background-color: var(--brand-dark-aqua);
  color: var(--brand-white); /* optional: darker text on bright aqua; use #fff if you prefer */
}

/* Ensure collapsed header matches base color */
.accordion .accordion-button.collapsed {
  background-color: var(--brand-off-white);
  color: var(--brand-dark-aqua);
}

/* Optional: keep icon visible on all states */
.accordion .accordion-button::after {
  color:var(--brand-dark-aqua);
  /* filter: brightness(0) invert(1); makes default chevron appear white */
}
/* When active, the icon will still be visible on dark aqua */
.accordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
  color:var(--brand-aqua);
}
.accordion .accordion-body {
  color: var(--brand-dark-gray);
}