/*
  Ensany v2 redesign — styles specific to the homepage (website/v2/index.blade.php).
  Scoped under #v2Home so it never leaks onto the rest of the site. Shared
  nav/footer/focus/scrollbar rules live in v2-shared.css (load that too on
  this page); other v2 pages should NOT load this file, only v2-shared.css
  plus their own page-specific stylesheet.
*/

#v2Home {
  font-family: 'Inter', sans-serif;
}

/* Legacy theme CSS applies text-transform to headings site-wide, which was
   forcing our copy into Title Case / odd casing. Neutralize inside v2. */
#v2Home h1,
#v2Home h2,
#v2Home h3,
#v2Home h4,
#v2Home h5,
#v2Home h6 {
  text-transform: none !important;
}

/* CTA band heading sits on a dark green gradient — legacy theme CSS forces a
   dark heading color site-wide, which made this text unreadable. Force it
   white here specifically. */
#v2Home .cta-band-title {
  color: #fff !important;
}

#v2Home .no-scrollbar::-webkit-scrollbar {
  display: none;
}

#v2Home .no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#v2Home .skeleton-shimmer {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 400px 100%;
  background-repeat: no-repeat;
}

#v2Home [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

#v2Home [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero: active slide uses normal flow (display:block), not position:absolute
   + opacity — this is what keeps the hero's height correct at every
   breakpoint on mobile. */
#v2Home .hero-slide {
  display: none;
}

#v2Home .hero-slide.active {
  display: block;
  animation: heroFade .5s ease;
}

#v2Home .pbar-fill {
  transition: width 1.1s cubic-bezier(.16, 1, .3, 1);
}

/* "Where your money actually goes" sequential step animation */
#v2Home .flow-icon {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
  color: #578021;
}

#v2Home .flow-icon.flow-active {
  background-color: #7FB239 !important;
  border-color: #7FB239 !important;
  color: #fff !important;
  transform: scale(1.08);
}

#v2Home .flow-line {
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

#v2Home .flow-line.flow-line-active {
  transform: scaleX(1);
}

[dir='rtl'] #v2Home .flow-line {
  transform-origin: right;
}

/* Legacy theme CSS resets stroke/fill on svg icons inside buttons in a few
   places, making our hand-authored outline icons invisible. Force them back
   on everywhere in v2 (all our icons intentionally use stroke="currentColor"
   / fill="none"). */
#v2Home svg {
  stroke: currentColor;
}

#v2Home svg[fill="none"] {
  fill: none !important;
}

#v2Home button svg,
#v2Home a svg {
  stroke: currentColor !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Quick-donate FAB pulse */
@keyframes qdPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(127, 178, 57, .55);
  }

  100% {
    box-shadow: 0 0 0 16px rgba(127, 178, 57, 0);
  }
}

#v2Home .qd-fab-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  animation: qdPulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* Drag-to-scroll logo rows (partners / who-we-serve) */
#v2Home .drag-track {
  cursor: grab;
}

#v2Home .drag-track.dragging {
  cursor: grabbing;
}

#v2Home .drag-track a,
#v2Home .drag-track img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Buttons/links show the browser's default blue focus ring on click — same
   fix as v2-shared.css's #v2Nav rule, applied here for elements inside the
   homepage body. */
#v2Home a,
#v2Home button,
#v2Home input,
#v2Home [tabindex] {
  outline: none;
}

#v2Home a:focus-visible,
#v2Home button:focus-visible,
#v2Home input:focus-visible,
#v2Home [tabindex]:focus-visible {
  outline: 2px solid rgba(127, 178, 57, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

#v2Home .dd-menu {
  scrollbar-width: thin;
  scrollbar-color: #7FB239 #F1ECDF;
}

#v2Home .dd-menu::-webkit-scrollbar {
  width: 6px;
}

#v2Home .dd-menu::-webkit-scrollbar-track {
  background: #F1ECDF;
  border-radius: 9999px;
}

#v2Home .dd-menu::-webkit-scrollbar-thumb {
  background: #7FB239;
  border-radius: 9999px;
}

#v2Home .dd-menu::-webkit-scrollbar-thumb:hover {
  background: #578021;
}

/* Duplicate-donation confirm modal (quick-donate drawer, 409 response) */
#v2Home .v2-dup-modal .modal-dialog {
  max-width: 420px;
  margin: 1.75rem auto;
}

#v2Home .v2-dup-content {
  background: #fff;
  border: none;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(18, 51, 42, .18);
  padding: 32px 28px 24px;
  position: relative;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

#v2Home .v2-dup-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: #F7F4EC;
  color: #5B6660;
  border-radius: 9999px;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}

#v2Home .v2-dup-close:hover {
  background: #E7E1D0;
  color: #12332A;
}

#v2Home .v2-dup-close span {
  pointer-events: none;
}

#v2Home .v2-dup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 9999px;
  background: #FBE9E1;
  color: #C2542F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

#v2Home .v2-dup-title {
  color: #12332A;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
}

#v2Home .v2-dup-message {
  color: #5B6660;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 12px;
}

#v2Home .v2-dup-note {
  background: #FBE9E1;
  color: #A3401E;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 22px;
}

#v2Home .v2-dup-footer {
  display: flex;
  gap: 12px;
}

#v2Home .v2-dup-btn {
  flex: 1;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s, color .2s;
}

#v2Home .v2-dup-btn:active {
  transform: scale(.97);
}

#v2Home .v2-dup-btn-secondary {
  background: #F7F4EC;
  color: #12332A;
  border: 1px solid #E7E1D0;
}

#v2Home .v2-dup-btn-secondary:hover {
  background: #E7E1D0;
}

#v2Home .v2-dup-btn-primary {
  background: linear-gradient(135deg, #7FB239, #578021);
  color: #fff;
  box-shadow: 0 8px 20px rgba(87, 128, 33, .28);
}

#v2Home .v2-dup-btn-primary:hover {
  box-shadow: 0 10px 24px rgba(87, 128, 33, .36);
}

@media (max-width: 420px) {
  #v2Home .v2-dup-content {
    padding: 26px 20px 20px;
  }

  #v2Home .v2-dup-footer {
    flex-direction: column-reverse;
  }
}

/* Urgent-needs category filter pills */
#v2Home .urgent-pill {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid #E7E1D2;
  background: #fff;
  color: #12332A;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}

#v2Home .urgent-pill:hover {
  border-color: #7FB239;
}

#v2Home .urgent-pill.active {
  background: #12332A;
  border-color: #12332A;
  color: #fff;
}

/* Urgent hero/side re-render fade (data-driven rotation, not DOM swap) */
#v2Home #urgentHeroSlot,
#v2Home #urgentSideList {
  transition: opacity .35s ease;
}

#v2Home .urgent-swap-out {
  opacity: 0;
}

/* Urgent campaigns skeleton loading state */
#v2Home .urgent-skeleton-hero {
  min-height: 420px;
  border-radius: 24px;
  background: linear-gradient(90deg, #F1ECDF 0%, #E7E1D2 50%, #F1ECDF 100%);
  background-size: 400px 100%;
  animation: v2UrgentShimmer 1.4s linear infinite;
}

#v2Home .urgent-skeleton-side {
  height: 100px;
  border-radius: 16px;
  background: linear-gradient(90deg, #F1ECDF 0%, #E7E1D2 50%, #F1ECDF 100%);
  background-size: 400px 100%;
  animation: v2UrgentShimmer 1.4s linear infinite;
}

@keyframes v2UrgentShimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

#v2Home .urgent-hero-title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .55);
}

#v2Home .urgent-card-in {
  animation: urgentCardIn .5s cubic-bezier(.16, 1, .3, 1);
}

@keyframes urgentCardIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile "you can scroll this" hint on the urgent-campaigns pill row —
   nudges 3 times on load, then settles (not an infinite loop). */
@keyframes urgentPillHint {

  0%,
  100% {
    transform: translate(0, -50%);
    opacity: .9;
  }

  50% {
    transform: translate(4px, -50%);
    opacity: .5;
  }
}

#v2Home .urgent-pill-hint {
  animation: urgentPillHint 1.2s ease-in-out 3;
}

/* Subtle white logo watermark on the "Campaigns that can't wait" hero card.
   The source file (logo-light.png) is the colored logo, not a white one —
   brightness(0) invert(1) turns any opaque pixel pure white regardless of
   its original color, then opacity keeps it subtle over the photo. */
#v2Home .urgent-watermark {
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
  opacity: .35;
}