:root{
  --cream: #F3ECDB;
  --sage:  #BFD0B1;
  --peach: #F7D9C1;
  --grey:  #CBCFD1;
  --nest-blue:#1B2E74;
  --navy:  #2E3652;
  --brown: #B57C47;
  --blue:  #8498C1;
  --coral: #EA7D5C;
} 

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'ADayWithoutSun';
  src: url('/fonts/A-day-without-sun-trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Headings */
.myApp .nest-heading{
  font-family: 'ADayWithoutSun';
  font-weight: 600;
  font-size: 5rem;
  letter-spacing: 0.07em;
  color: var(--nest-blue);
}

/* Sub headings */
.myApp .nest-subheading{
  font-weight: 100;
  color: var(--nest-blue);
}

/* Body text */
.myApp .nest-body{
  color: var(--nest-blue);
}



body {
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 55%, var(--sage) 120%);
  xcolor: var(--navy);
  color: var(--nest-blue);
  color-scheme: dark;
  font-family: 'Poppins', sans-serif;
}

/* Main site info */
.site-logo {
  height: 3rem;
}

/* Headings */
h1{
  color: var(--navy);
  letter-spacing: -0.02em;
}

h2{
  color: var(--brown);
  letter-spacing: -0.01em;
}

h3{
  color: var(--blue);
}

/* Paragraph text */
p{
  color: rgba(46, 54, 82, 0.86); /* navy softened */
}

.nest-points {
  font-size: 0.9rem;
  color: var(--navy);
}

.nest-point {
  padding: 10px 22px;
  margin: 6px;
  background: rgba(247,217,193,0.6); /* peach wash */
  border-radius: 40px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  font-weight: 500;
  white-space: normal;
  text-align: center;
  max-width: 26rem;  
}

/* subtle alternates for visual interest */

.xnest-point:nth-child(2){
  background: rgba(216,221,195,.6); /* sage */
}

.xnest-point:nth-child(3){
  background: rgba(203,207,209,.6); /* soft grey */
}

.small-heading{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8498C1;
  font-weight: 600;
}

/* SECTION BASE (optional but handy) */
.hero, .container1, .container2, .container3, .container4{
  padding: clamp(2rem, 4vw, 4rem) 0;
}



/* HERO */
.hero-eyebrow{
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.hero-title{
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.editform {
  max-width: 680px;
}

.hero-desc{
  color: rgba(46, 54, 82, 0.86);
  font-size: 1.05rem;
  max-width: 38rem;
}

/* CTA buttons (theme-friendly) */
.hero-btn-primary{
  background: var(--coral);
  border: none;
  color: white;
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.hero-btn-primary:hover{
  opacity: .9;
  color: white;
}

.hero-btn-secondary{
  background: rgba(132,152,193,0.18);
  border: 1px solid rgba(46,54,82,0.18);
  color: var(--navy);
  border-radius: 999px;
  padding: 12px 22px;
}
.hero-btn-secondary:hover{
  background: rgba(132,152,193,0.26);
  color: var(--navy);
}

/* Hero image sizing */
.hero-image{
  max-width: 460px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.10));
}

.hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url("/Images/Backgrounds/Clouds.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
/*  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    #ffffff 55%,
    var(--sage) 120%
  ); */
  color: var(--navy);
}

.container1{
  background: var(--cream);
  color: var(--navy);
}

.container2{
  background: color-mix(in srgb, var(--sage) 40%, transparent);
  color: var(--navy);
}

.container3{
/*  background: color-mix(in srgb, var(--peach) 55%, transparent); */
  background-image: url("/Images/Backgrounds/Clouds2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: var(--navy);
}

.container4{
  background: color-mix(in srgb, var(--grey) 45%, transparent);
  color: var(--navy);
}

.donation-card{
  xbackground: color-mix(in srgb, var(--cream) 80%, white);
  background-color: #ffffff;
  color: var(--navy);
}

.donation-card:hover{
  transform: scale(1.025);
}

.donation-icon{
  color: var(--coral);
  font-size: 1.3rem;
}

.donation-category h2{
  margin: 0;
}


/* Mobile tweaks */
@media (max-width: 576px){
  .hero-desc{ font-size: 1rem; }
  .hero-image{ max-width: 320px; }
}

footer{
  color: var(--navy);
}

footer h5{
  color: var(--navy);
  font-weight: 700;
}

.footer-link{
  color: var(--navy);
  text-decoration: none;
  opacity: .8;
}

.footer-link:hover{
  opacity: 1;
  text-decoration: underline;
}

footer hr{
  border-color: color-mix(in srgb, var(--navy) 15%, transparent);
}


.faq-accordion .accordion-item{
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  margin-bottom: 14px;
}

.faq-accordion .accordion-button{
  background: color-mix(in srgb, var(--cream) 85%, white);
  color: var(--navy);
  font-weight: 700;
}

.faq-accordion .accordion-button:not(.collapsed){
  background: color-mix(in srgb, var(--sage) 45%, white);
}

.faq-accordion .accordion-body{
  background: color-mix(in srgb, var(--cream) 92%, white);
  color: rgba(46,54,82,.86);
}

.myApp .bg-topmenu {
  background-color: #eeeeee;
}

.underc {
  position : fixed;
  padding : 0.5rem 1rem;
  top : 2rem;
  left : 1rem;
  background-color: red;
  color : #eee;
  font-size : 1.5rem;
  transform: rotate(-45deg);
  z-index: 2000;
}

.needs-list{
  margin-top: 10px;
}

.needs-list div{
  margin: 4px 0;
}

.soft-list{
  list-style: none;
  padding-left: 0;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.soft-list li{
  margin-bottom: 14px;
  line-height: 1.6;
  color: var(--navy);
}

#founder-message p {
  line-height: 1.7;
}

#founder-message hr {
  border-color: color-mix(in srgb, var(--navy) 15%, transparent);
}