/* ============================================
   GLOBAL VARIABLES & BASE STYLES
   ============================================ */
:root {
  --tsi-forest: #1a4381;
  --tsi-forest-dark: #0a1d3a;
  --tsi-cta: #f2711c;
}

::selection {
  background: var(--tsi-cta);
  color: var(--tsi-forest-dark);
}

/* ============================================
   NAVIGATION & BUTTONS
   ============================================ */
.social-pill {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #d8e6f7;
  font-size: .75rem;
  transition: .2s;
}

.social-pill:hover {
  background: var(--tsi-cta);
  color: var(--tsi-forest-dark);
  transform: translateY(-1px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border-radius: .6rem;
  font-weight: 600;
  font-size: .95rem;
  color: #334155;
  transition: .15s;
}

.nav-link:hover {
  color: var(--tsi-forest);
  background: #eef4fb;
}

.has-dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 17rem;
  padding-top: .8rem;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: .18s ease;
  z-index: 70;
}

.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: .5rem;
  box-shadow: 0 18px 40px -18px rgb(10 29 58 / .35);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: .65rem;
  font-size: .9rem;
  font-weight: 600;
  color: #475569;
}

.dropdown-item:hover {
  background: #eef4fb;
  color: var(--tsi-forest);
}

.dropdown-item i {
  width: 1.1rem;
  text-align: center;
  color: var(--tsi-cta);
  font-size: .8rem;
}

.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tsi-cta);
  color: var(--tsi-forest-dark);
  font-weight: 800;
  padding: .65rem 1.35rem;
  border-radius: .7rem;
  transition: .2s;
  box-shadow: 0 8px 20px -10px rgb(242 113 28 / .8);
}

.btn-donate:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.mobile-link {
  display: block;
  padding: .6rem .5rem;
  border-radius: .6rem;
}

.mobile-link:hover {
  background: #eef4fb;
  color: var(--tsi-forest);
}

.mobile-group summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .5rem;
  border-radius: .6rem;
  cursor: pointer;
}

.mobile-group summary::-webkit-details-marker {
  display: none;
}

.mobile-group[open] summary .chev {
  transform: rotate(180deg);
}

.chev {
  transition: transform .2s;
  font-size: .7rem;
  opacity: .6;
}

.mobile-sublink {
  display: block;
  padding: .45rem .75rem;
  border-radius: .5rem;
  color: #64748b;
  font-weight: 600;
  font-size: .92rem;
}

.mobile-sublink:hover {
  background: #eef4fb;
  color: var(--tsi-forest);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--tsi-cta);
  color: var(--tsi-forest-dark);
  font-weight: 800;
  padding: .8rem 1.6rem;
  border-radius: .75rem;
  transition: .2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgb(242 113 28 / .75);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 2px solid rgb(255 255 255 / .75);
  color: #fff;
  font-weight: 700;
  padding: .75rem 1.5rem;
  border-radius: .75rem;
  transition: .2s;
}

.btn-ghost:hover {
  background: rgb(255 255 255 / .12);
  border-color: #fff;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--tsi-forest-dark);
  color: #fff;
  font-weight: 800;
  padding: .7rem 1.3rem;
  border-radius: .7rem;
  transition: .2s;
}

.btn-dark:hover {
  background: var(--tsi-forest);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 2px solid var(--tsi-forest-dark);
  color: var(--tsi-forest-dark);
  font-weight: 800;
  padding: .7rem 1.4rem;
  border-radius: .75rem;
  transition: .2s;
}

.btn-outline-dark:hover {
  background: var(--tsi-forest-dark);
  color: #fff;
}

.nl-input {
  flex: 1 1 0%;
  min-width: 0;
  border-radius: .7rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: .7rem 1rem;
  font-size: .9rem;
  outline: none;
}

.nl-input:focus {
  border-color: var(--tsi-forest);
  box-shadow: 0 0 0 3px rgb(26 67 129 / .12);
}

.nl-input-light {
  flex: 1 1 0%;
  min-width: 0;
  border-radius: .7rem;
  border: 0;
  background: #fff;
  padding: .75rem 1rem;
  font-size: .9rem;
  outline: none;
}

.nl-input-light:focus {
  box-shadow: 0 0 0 3px rgb(10 29 58 / .2);
}

.footer-heading {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--tsi-cta);
  margin-bottom: 1rem;
}

.footer-links {
  display: grid;
  gap: .55rem;
  font-size: .9rem;
}

.footer-links a {
  color: #b0ccee;
  transition: .15s;
}

.footer-links a:hover {
  color: #fff;
  padding-left: .25rem;
}

/* ============================================
   HERO SECTION & SWIPER
   ============================================ */
.hero-swiper {
  height: 100%;
}

.swiper-slide .hero-img {
  transform: scale(1.02);
}

.swiper-slide-active .hero-img {
  animation: kenburns 7.5s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, -1.4%, 0); }
}

.hero-copy > * {
  opacity: 0;
  transform: translateY(22px);
}

.swiper-slide-active .hero-copy > * {
  animation: heroFadeUp .9s cubic-bezier(.22, .61, .36, 1) forwards;
}

.hero-copy > *:nth-child(1) { animation-delay: .15s; }
.hero-copy > *:nth-child(2) { animation-delay: .3s; }
.hero-copy > *:nth-child(3) { animation-delay: .45s; }
.hero-copy > *:nth-child(4) { animation-delay: .6s; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: none; }
}

.scroll-indicator {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  color: #fff;
  opacity: .8;
  animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

.hero-swiper .swiper-pagination {
  bottom: 1.6rem !important;
}

.hero-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: .45;
  transition: .25s;
}

.hero-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--tsi-cta);
  width: 26px;
  border-radius: 9999px;
}

/* ============================================
   ANIMATIONS & UTILITIES
   ============================================ */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 800;
  color: var(--tsi-cta);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.prose-custom ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: grid;
  gap: .35rem;
}

.prose-custom ol {
  list-style: decimal;
  padding-left: 1.25rem;
  display: grid;
  gap: .35rem;
}

.prose-custom p {
  margin-bottom: .75rem;
}

.prose-custom h1,
.prose-custom h2,
.prose-custom h3,
.prose-custom h4 {
  font-weight: 700;
  color: var(--tsi-forest);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  padding: .45rem 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  color: #475569;
  transition: .15s;
}

.filter-chip:hover {
  border-color: var(--tsi-forest);
  color: var(--tsi-forest);
}

.filter-chip-active {
  background: var(--tsi-forest);
  border-color: var(--tsi-forest);
  color: #fff;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #eef4fb;
  color: #1a4381;
  border-radius: 9999px;
  padding: .45rem 1rem;
  font-size: .85rem;
  font-weight: 700;
}

.chip i {
  color: #f2711c;
}

.form-legend {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  color: #102b54;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgb(242 113 28 / .25);
  width: 100%;
}

.shadow-soft {
  box-shadow: 0 10px 40px -12px rgb(16 43 84 / .15);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .swiper-slide-active .hero-img {
    animation: none !important;
  }
  .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .scroll-indicator {
    animation: none;
  }
}

/* ============================================
   HERO NAVIGATION ARROWS
   ============================================ */
.hero-arrow {
  color: #fff !important;
  background: rgba(10, 29, 58, 0.6);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin-top: -24px;
}

.hero-arrow::after {
  font-size: 18px !important;
  font-weight: bold;
}

.hero-arrow:hover {
  background: var(--tsi-cta);
  color: var(--tsi-forest-dark) !important;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .hero-arrow {
    display: none;
  }
}

/* ============================================
   TESTIMONIAL CAROUSEL ARROWS
   Smaller than hero arrows (32px vs 48px)
   ============================================ */

.testimonial-arrow {
  color: #fff !important;
  background: rgba(10, 29, 58, 0.6) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  margin-top: -14px !important; 
}

.testimonial-arrow::after {
  font-size: 12px !important;
  font-weight: bold !important;
}

.testimonial-arrow:hover {
  background: var(--tsi-cta) !important;
  color: var(--tsi-forest-dark) !important;
  transform: scale(1.1) !important;
}

@media (max-width: 768px) {
  .testimonial-arrow {
    width: 24px !important;
    height: 24px !important;
    margin-top: -12px !important;
  }
  
  .testimonial-arrow::after {
    font-size: 10px !important;
  }
}
/* ============================================
   BENEFICIARY QUOTES / BLOCKQUOTES
   ============================================ */
main blockquote,
article blockquote,
.prose-custom blockquote,
.ck-content blockquote,
blockquote {
  position: relative !important;
  display: block !important;
  margin: 30px 0 !important;
  padding: 24px 28px 24px 70px !important;
  background: linear-gradient(135deg, #eef4fb 0%, #fff5ec 100%) !important;
  border-left: 5px solid #f2711c !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 4px 15px rgba(16, 43, 84, 0.08) !important;
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  color: #102b54 !important;
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
}

main blockquote::before,
article blockquote::before,
blockquote::before {
  content: "\201C" !important;
  position: absolute !important;
  left: 16px !important;
  top: 8px !important;
  font-size: 3.5rem !important;
  color: #f2711c !important;
  line-height: 1 !important;
}

main blockquote p,
blockquote p {
  margin: 0 !important;
}

/* Quote attribution line (e.g., "— Grace, GHSD Graduate") */
.prose-custom blockquote + p,
article blockquote + p {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f2711c;
  margin-top: -20px;
}

/* Navbar separator lines between links */
.nav-link-separator {
  position: relative;
}

.nav-link-separator::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
  background-color: rgba(16, 43, 84, 0.2); /* forest-900 with 20% opacity */
}

/* Remove separator from last item */
.nav-link-separator:last-child::after {
  display: none;
}

/* Hide separators on mobile (when menu is stacked) */
@media (max-width: 768px) {
  .nav-link-separator::after {
    display: none;
  }
}

/* Dark navbar variant (for white separators) */
.nav-dark .nav-link-separator::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Author card styling */
.author-card {
  @apply flex items-center gap-4 mt-8 pt-6 border-t border-slate-200;
}

.author-card img {
  @apply w-14 h-14 rounded-full object-cover ring-2 ring-forest-100;
}

.author-card .author-initials {
  @apply w-14 h-14 rounded-full bg-forest-100 flex items-center justify-center ring-2 ring-forest-100;
}

/* Author badge in listings */
.author-badge {
  @apply flex items-center gap-2;
}

.author-badge img {
  @apply w-6 h-6 rounded-full object-cover;
}