:root{
  --rounded-2xl: 1.25rem; /* ~20px */
  --header-height: 56px; /* updated by JS */
}
/* Global */
body {
  min-width: 400px;
}
.rounded-2xl{border-radius:var(--rounded-2xl)!important}
.shadow-hover{transition:box-shadow .2s, transform .2s}
.shadow-hover:hover{box-shadow:0 .75rem 1.75rem rgba(0,0,0,.08); transform:translateY(-2px)}

/* Utility bar */
.utility-bar{background:#7a553b;color:#f2f2f2;font-size:.9rem}

/* Newsletter signup in utility bar */
.utility-bar .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.utility-bar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.utility-bar .form-control:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Social links */
.social-link {
  color: #e4d4c6;
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* border-radius: 50%; */
  /* background-color: rgba(255, 255, 255, 0.1); */
}

.social-link:hover {
  color: #f2f2f2;
  /* background-color: rgba(255, 255, 255, 0.2); */
  transform: translateY(-1px);
}

.social-link svg, .social-link img {
  transition: transform 0.2s ease;
}

.social-link:hover svg, .social-link:hover img {
  transform: scale(1.1);
}

/* Mobile responsive utility bar */
@media (max-width: 767.98px) {
  .utility-bar .container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .newsletter-signup {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  
  .newsletter-signup form {
    width: 100%;
  }
  
  .newsletter-signup input {
    min-width: auto !important;
    width: 100%;
  }
  
  .social-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Header */
.header-nddc{position:sticky;
             top:0;
             z-index:1030;
             background:#654321;
             color: #e4d4c6;
             border-bottom:1px solid rgba(0,0,0,.06)}
/* Spanish header variant support */
.header-blur{position:sticky;top:0;z-index:1030}

/* Engagement bar (below header) */
.engagement-bar{background:var(--brand-primary-light);
                border-top:1px solid rgba(0,0,0,.06);
                color:var(--brand-secondary);
                font-size:.9rem}
.engagement-bar.stuck{position:sticky;top:var(--header-height);z-index:1025}
@media (max-width: 767.98px){
  /* never sticky on mobile */
  .engagement-bar{position:static}
  /* stack into two rows */
  .engagement-bar .container{flex-direction:column;align-items:stretch;gap:.75rem}
  .engagement-bar .newsletter-signup{flex-direction:column;align-items:stretch;gap:.5rem}
  .engagement-bar [data-newsletter]{width:100%}
  .engagement-bar [data-newsletter] input{min-width:auto!important;width:100%}
  .engagement-bar .social-links{justify-content:center;flex-wrap:wrap}
}

/* Hero */
.hero{position:relative;color:#fff;background:#7a553b}
/* .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45))} */
.hero-media{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1523987355523-c7b5b74c0735?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;opacity:.9}
.hero .container{position:relative;z-index:1}
.hero .hero-side-image{width:100%;height:100%;min-height:320px;background:url('https://www.nodesertdatacenter.com/images/Casa%20Maria.webp') center/contain no-repeat;background-color:#fff;border-radius:0;margin:0}

/* Hero carousel images */
.hero #heroCarousel{height:100%}
.hero #heroCarousel .carousel-item{height:100%}
.hero #heroCarousel img{width:100%;height:100%;object-fit:cover;object-position:center center;background-color:#fff}

/* Instagram overlay on hero slides */
.hero #heroCarousel .carousel-item{position:relative}
.hero .hero-img-link{position:absolute;display:inline-flex;align-items:center;gap:.4rem;padding:.375rem .5rem;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;transition:background .15s ease, transform .15s ease;white-space:nowrap}
.hero .hero-img-link:hover{background:rgba(0,0,0,.7);transform:translateY(-1px)}
.hero .hero-img-link i{font-size:1.1rem;line-height:1}
.hero .hero-img-label{font-size:.9rem;line-height:1;font-weight:600;display:inline-block}

/* Mobile hero image full width */
@media (max-width: 991.98px) {
  .hero .col-12.col-lg-6:last-child {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
  }
}
/* Make Bootstrap carousel fade faster (0.4s) */
.carousel-fade .carousel-item {
  transition: opacity .7s ease-in-out;
}


/* Numbers band */
#impact{background:var(--brand-secondary)}
.stat-value{font-weight:800;font-size:clamp(1.75rem, 2.5vw + .75rem, 2.75rem);line-height:1.1}
.stat-label{color:#6c757d;font-size:.9rem}

#approach{background:var(--brand-secondary)}

#stories{background:var(--brand-secondary-light)}

#action{background:var(--brand-secondary)}

/* Updates / Latest Developments */
#updates {background: var(--brand-secondary); color: var(--brand-primary-dark)}
#updates .updates-list {padding-left: 1rem}
#updates .updates-list li::marker {color: var(--brand-primary-dark)}
/* Remove extra gap between intro line and list */
#updates p{margin-bottom:.25rem}
/* Links inside updates */
#updates a{color:var(--brand-primary-dark);text-decoration:underline;transition:color .15s ease}
#updates a:hover,#updates a:focus{color:var(--brand-primary)}

/* Emergency update styling */
#updates .emergency-update {
  background-color: #ffe6e6;
  border: 2px solid #ff6b6b;
  border-radius: 12px;
  padding: 1rem;
  margin: 0.5rem 0;
  position: relative;
}

#updates .emergency-update::before {
  content: "🚨 URGENT";
  position: absolute;
  top: -8px;
  left: 12px;
  background-color: #ff6b6b;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Radial background for CTA band */
/* .bg-radial{background:radial-gradient(ellipse at top, #f4f4f4, #fff)} */

/* About Section */
#about {
  background: var(--brand-secondary-light);
}

.about-content p {
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.about-content .lead {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* Image styling for about section - integrated within text */
#about .img-fluid {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;
  height: auto;
}

#about .img-fluid:hover {
  transform: scale(1.01);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Commitment list styling */
#about .list-unstyled li {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

#about .list-unstyled li i {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Position callout box */
#about .p-3 {
  border-left: 4px solid var(--brand-accent);
}

/* Footer */
.footer{background: var(--brand-primary-dark);color:var(--brand-secondary)}
.footer a{text-decoration:none;color:#d6d6d6}
.footer a:hover{text-decoration:underline}