/* Glossary page styles (no Tailwind) */

.glossary {
  padding-top: 5rem; /* pt-20 */
}

.glossary__wrap-width {
  width: 100%;
  max-width: 1500px; /* width-container */
  margin: 0 auto;
  padding: 0 24px;
}

.glossary__row {
  display: flex;
  gap: 20px; /* gap-5 */
}

.glossary__col {
  display: block;
}

.glossary__col--sidebar {
  width: 20%; /* w-1/5 */
}

.glossary__col--main {
  width: 80%; /* w-4/5 */
}

.glossary__card {
  height: 490px;
  background: #009bc9; /* blue-500 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* justify-end */
  padding: 40px; /* p-10 */
  border-radius: 16px; /* rounded-2xl */
}

.glossary__icon {
  width: 100px; /* h-[100px] w-[100px] */
  height: 100px;
  padding-top: 10px; /* pt-10 approx */
}

.glossary__card-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin: 0.5rem 0 0;
}

.glossary__hero-image {
  width: 100%; /* w-full */
  height: 420px; /* h-[420px] */
  object-fit: cover; /* object-cover */
  border-radius: 16px; /* rounded-2xl */
  display: block;
}

.glossary__alphabet {
  display: flex; /* flex-row */
  gap: 12px; /* gap-[12px] */
  padding-top: 20px; /* pt-5 */
}

.glossary__alphabet a {
  font-size: 47px;
  color: #2d0c59;
  font-weight: 800;
  font-style: italic;
  text-decoration: none;
}

/* Active state: highlight A link when #A section is targeted */
.glossary:has(#A:target) .glossary__alphabet a[href="#A"] {
  color: #009BC9;
}
/* Active state for B–Z */
.glossary:has(#B:target) .glossary__alphabet a[href="#B"] { color: #009BC9; }
.glossary:has(#C:target) .glossary__alphabet a[href="#C"] { color: #009BC9; }
.glossary:has(#D:target) .glossary__alphabet a[href="#D"] { color: #009BC9; }
.glossary:has(#E:target) .glossary__alphabet a[href="#E"] { color: #009BC9; }
.glossary:has(#F:target) .glossary__alphabet a[href="#F"] { color: #009BC9; }
.glossary:has(#G:target) .glossary__alphabet a[href="#G"] { color: #009BC9; }
.glossary:has(#H:target) .glossary__alphabet a[href="#H"] { color: #009BC9; }
.glossary:has(#I:target) .glossary__alphabet a[href="#I"] { color: #009BC9; }
.glossary:has(#J:target) .glossary__alphabet a[href="#J"] { color: #009BC9; }
.glossary:has(#K:target) .glossary__alphabet a[href="#K"] { color: #009BC9; }
.glossary:has(#L:target) .glossary__alphabet a[href="#L"] { color: #009BC9; }
.glossary:has(#M:target) .glossary__alphabet a[href="#M"] { color: #009BC9; }
.glossary:has(#N:target) .glossary__alphabet a[href="#N"] { color: #009BC9; }
.glossary:has(#O:target) .glossary__alphabet a[href="#O"] { color: #009BC9; }
.glossary:has(#P:target) .glossary__alphabet a[href="#P"] { color: #009BC9; }
.glossary:has(#Q:target) .glossary__alphabet a[href="#Q"] { color: #009BC9; }
.glossary:has(#R:target) .glossary__alphabet a[href="#R"] { color: #009BC9; }
.glossary:has(#S:target) .glossary__alphabet a[href="#S"] { color: #009BC9; }
.glossary:has(#T:target) .glossary__alphabet a[href="#T"] { color: #009BC9; }
.glossary:has(#U:target) .glossary__alphabet a[href="#U"] { color: #009BC9; }
.glossary:has(#V:target) .glossary__alphabet a[href="#V"] { color: #009BC9; }
.glossary:has(#W:target) .glossary__alphabet a[href="#W"] { color: #009BC9; }
.glossary:has(#X:target) .glossary__alphabet a[href="#X"] { color: #009BC9; }
.glossary:has(#Y:target) .glossary__alphabet a[href="#Y"] { color: #009BC9; }
.glossary:has(#Z:target) .glossary__alphabet a[href="#Z"] { color: #009BC9; }

.glossary__letter-row {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}

.glossary__letter {
  font-size: 47px;
  font-weight: 700;
}

.glossary__headers {
  display: flex;
  gap: 20px;  
}

.glossary__header-term,
.glossary__header-definition {
  color: #009BC9;
  font-size: 30px; /* text-3xl */
  font-weight: 700; /* font-bold */
  margin: 0;
}

.glossary__item {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}

/* Full-width background sections for alternating colors */
.glossary__section {
  width: 100%;
}

.glossary__section--blue {
  background-color: #e6f7f9;
}

.glossary__section--white {
  background-color: #FFFFFF;
}

.glossary__section--blue .glossary__item:last-child,
.glossary__section--white .glossary__item:last-child {
  padding-bottom: 20px;
}


.glossary__term-title {
  font-size: 20px; /* text-xl */
  font-weight: 700; /* font-bold */
  margin: 0;
}

.glossary__definition {
  font-size: 20px; /* text-xl */
  margin: 0;
  color: #111827; /* neutral readable body color */
}
.glossary__definition p{
	margin:0px
}


/* Basic focus styles */
.glossary a:focus {
  outline: 2px solid #009bc9;
  outline-offset: 2px;
}

/* Glossary page styles - aiming for pixel-perfect to provided design */
.glossary { padding: 28px 16px 44px; }
.glossary__inner { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 28px; }

/* Left card */
.glossary-card { background: #e9edff; border-radius: 18px; padding: 24px 18px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: sticky; top: 24px; }
.glossary-card__icon img { width: 68px; height: 68px; display: block; }
.glossary-card__title { margin-top: 12px; font-size: 28px; font-weight: 700; color: #2D0C59; }

/* Hero image */
.glossary-hero { border-radius: 18px; overflow: hidden; }
.glossary-hero__image { width: 100%; height: 180px; object-fit: cover; display: block; }

/* A–Z bar */
.glossary-nav { margin-top: 16px; border-radius: 10px; background: #f1f3ff; padding: 14px 18px; color: #0B1640; }
.glossary-nav__inner { display: flex; gap: 18px; font-weight: 700; letter-spacing: 0.02em; align-items: center; flex-wrap: wrap; }
.glossary-nav a { color: #0B1640; text-decoration: none; }
.glossary-nav a:hover, .glossary-nav a:focus { text-decoration: underline; }

/* Sections */
.glossary-section { margin-top: 28px; }
.glossary-section__header { display: grid; grid-template-columns: 80px 1fr; align-items: center; margin-bottom: 8px; }
.glossary-section__letter { background: #4C5AFA; color: #fff; font-weight: 700; font-size: 38px; width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.glossary-section__title { color: #0B1640; font-weight: 700; font-size: 20px; }

.glossary-list { border-top: 1px solid #e6e6ff; }
.glossary-item { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid #e6e6ff; }
.glossary-item__term { font-weight: 700; color: #0B1640; }
.glossary-item__def { color: #0B1640; opacity: 0.9; }
.glossary__letter-title { color : #009BC9}

/* Responsive breakpoints for laptops */
@media (max-width: 1600px) {
  .glossary__wrap-width {
    padding: 0 20px;
  }
}

@media (max-width: 1400px) {
  .glossary__wrap-width {
    padding: 0 16px;
  }
}

@media (max-width: 1024px) {
  .glossary__inner { grid-template-columns: 1fr; }
  .glossary-card { position: static; height: auto; }
  .glossary-item { grid-template-columns: 1fr; }
}

/* Mobile-only refinements without changing desktop */
@media (max-width: 900px) {
  .glossary__wrap-width { width: 100%; padding: 0 16px; }
  .glossary__row { flex-direction: column; gap: 16px; }
  .glossary__col--sidebar, .glossary__col--main { width: 100%; }
  .glossary__card { height: auto; padding: 24px; }
  .glossary__icon { width: 72px; height: 72px; }
  .glossary__hero-image { height: 220px; }
  .glossary__alphabet { flex-wrap: wrap; gap: 10px; }
  .glossary__alphabet a { font-size: 28px; }
  .glossary__headers { flex-direction: row; }
  .glossary__header-term, .glossary__header-definition { font-size: 22px; }
  .glossary__letter { font-size: 34px; }
  .glossary__item { padding-top: 12px; }
  .glossary__term-title, .glossary__definition { font-size: 18px; }
  .glossary-section__header { grid-template-columns: 60px 1fr; }
  .glossary-section__letter { width: 50px; height: 50px; font-size: 28px; }
  .glossary-item { grid-template-columns: 1fr; gap: 14px; }
}