/* ========================================
   Reset & Base Styles
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--primary-font, sans-serif);
  font-size: 16px;
  background-color: var(--bg1);
}

/* ========================================
   Root Variables (Dark Mode Default)
======================================== */
:root {
  /* Font Families */
  --primary-font: 'Overpass', sans-serif;
  --secondary-font: 'Crimson Pro', serif;
  --tertiary-font: 'Barlow Condensed', sans-serif;

  /* Colors */
  --acc1: #E21833;
  --acc2: #FFD200;
  --txt1: #000000;
  --txt2: #FFFFFF;
  --bg1: #242424;
  --bg2: #757575;
  --bg3: #E6E6E6;
  --bg4: #FAFAFA;
  --hero-gradient: linear-gradient(90deg, rgba(36, 36, 36, 1) 40%, rgba(36, 36, 36, 0) 100%);
  --info-gradient: linear-gradient(0deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);

}

/* ========================================
   Light mode overrides
======================================== */

.light-mode{
  --acc1: #E21833;
  --acc2: #FFD200;
  --txt2: #000000;
  --txt1: #FFFFFF;
  --bg4: #242424;
  --bg2: #757575;
  --bg3: #E6E6E6;
  --bg1: #FAFAFA;

  --hero-gradient: linear-gradient(90deg, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 100%);
  --info-gradient: linear-gradient(0deg, rgba(230, 230, 230, 1) 50%, rgba(230, 230, 230, 0) 65%);
  
}

.light-mode .insta-action{
  --acc2: #E21833;
}
.light-mode .insta-action .button:hover{background-color: #B51329;}

.light-mode .footer{
  background-color: var(--bg3);
  --acc2: #E21833;
}

.light-mode .recruiting-overlay{
  background-color: var(--bg3);
}

.light-mode .recruiting-overlay a{
  color: var(--txt2);
}

.light-mode .accordion-container{
  background-color: var(--bg3);
}

.light-mode .recruiting-overlay a.gift-form-link {
  color: var(--acc1);
}

/* ========================================
   Utility Classes
======================================== */


.rotate-90 {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.section-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: auto;
}

/* ========================================
   Typography
======================================== */
h1, h2, h3, h4, p, ul, li, a {
  font-family: var(--primary-font);
  color: var(--txt2);
}

h1 {
  font-family: var(--tertiary-font);
  font-size: 5.5rem;
  letter-spacing: -1.7%;
  line-height: 5.5rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
  font-weight: bold;
}

p, ul, li, a {
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
}

/* Font Utility Classes */
.barlow-condensed-extrabold-italic {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.crimson-pro {
  font-family: "Crimson Pro", serif;
  font-weight: 700;
}

.overpass {
  font-family: "Overpass", sans-serif;
  font-weight: 400;
}

/* ========================================
   Button
======================================== */
.button {
  background-color: var(--acc2);
  color: var(--txt1);
  border: none;
  padding: 1rem 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  width: fit-content;
  .arrow-tail-svg{margin: 0rem;}
}

.button:hover{
  transition: 0.2s ease-in;
  background-color: #CCA800;
}

.toggle-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.hidden {
  display: none;
}

.arrow-tail-svg{margin-right: 0.2rem;}

.arrow-icon {
  transition: transform 0.3s ease;
  margin-right: 0.5rem;
}

#yellow-button{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .review-svg{ margin: -0.4rem; }
}

#red-button{background-color: var(--acc1);}
#red-button a{color:white}

#red-button:hover{
  transition: 0.2s ease-in;
  background-color: #B51329;
}

/* ========================================
   Review SVG
======================================== */

.review-svg{
  margin: 0.5rem;
  margin-left: 0px;
}


.review-svg:hover .outline-path{
  transition: 0.2s ease-in;
  fill: #B51329;
}

/* ===========================================================================
-- -- -- -- -- -- -- -- -- -- -- BODY -- -- -- -- -- -- -- -- -- -- -- -- 
============================================================================== */

/* ========================================
   Navbar
======================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--acc1);
  padding: 1rem 2rem;
  color: white;
  position: relative;
  max-height: 3rem;
}

.logo {
  font-family: var(--secondary-font);
}

.header-right{display:flex;
flex-direction:row;
gap: 1.5rem;}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links li a h4{
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links li a h4:hover {
  text-decoration: underline;
}



.hamburger {
  display: none;
  cursor: pointer;
}

/* ========================================
   Hero Section
======================================== */
.hero .background-img {
  background-image: var(--hero-gradient), url('images/hero-img-desktop.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 5%;
  overflow: hidden;
}

.hero-txt {
  width: 50%;
}

.hero h1,
.hero p {
  color: var(--txt2);
}

/* ========================================
   Important Info Section
======================================== */
.info-sections {
  display: flex;
  flex-direction: column;
  margin: 0px; padding:0px;
}

/* Grouping block: one section + its overlays */
.info-block {
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
  padding-top: 5%;
  
}

.important-info {
  background-image: var(--info-gradient), url('images/rec-img2.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 10%; margin-top: 0px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#donate{background-image: var(--info-gradient), url('images/rec-img1.webp');}

.important-info a {
  color: var(--txt2);
  text-decoration: none;
  line-height: 1.5rem;
}

.important-info a:hover{
  text-decoration: underline;

}

.important-info .important-info-txt {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* ========================================
   Overlays
======================================== */
.recruiting-overlay {
  display: none;
  background-color: var(--txt1);
  position: relative;
  margin: 10%;
  margin-top: -10%;
  margin-bottom:0;
  padding: 1rem;
  color: var(--txt2);
  z-index: 5;
  a{color: var(--txt1)}
  ul{padding-left: 1rem; padding-bottom: 1rem}
}

.recruiting-overlay .gift-form-link{
  color: var(--acc2)}
.gift-form-link:hover{
  text-decoration: underline;}

.recruiting-overlay.show {
  display: block;
}

.recruiting-overlay .overlay-content {
  max-width: 600px;
  margin: auto;
}

.overlay-content a{color: var(--txt1)}

.other-options{
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin:0px;
  padding: 0px;
  padding-top: 1rem;
  gap: 3%;
}

/* ========================================
   Insta-action
======================================== */
.insta-action{display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
margin: 10% 5%}

/* ========================================
   Carousel
======================================== */

.carousel-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 100vw;
      margin: auto;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.4s ease;
    }

    .carousel-item {
      flex: 0 0 100%;
      padding: 0.5rem;
    }

    .carousel-item img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      border-radius: 8px;
    }

    

    /* carousel Arrows */
    .arrow {
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      color: white;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      padding: 0.5rem;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 10;
      border-radius: 100%;
    }

    .arrow.left {
      left: 1rem;
    }

    .arrow.right {
      right: 1rem;
    }

    .carousel-container:hover .arrow {
      opacity: 1;
    }

    /* Indicators */
    .indicators {
      text-align: center;
      margin-top: 0.5rem;
    }

    .indicator-dot {
      height: 10px;
      width: 10px;
      margin: 0 4px;
      background-color: var(--acc1);
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s ease;
    }

    .indicator-dot.active {
      background-color: #880E1F;
    }

/* ========================================
   Accordion
======================================== */

/* FAQ Section Wrapper */
.faq {
  margin: 10% 5%;
}

.faq .section-title {
  padding-bottom: 2.5%;
}

/* Accordion Container */
.accordion-container {
  display: flex;
  flex-direction: column;
  background-color: var(--txt1);
  padding: 2px 0;
  gap: 2px;
}

/* Accordion */
.accordion {
  background-color: var(--bg1);
  color: var(--txt2);
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  transition: color 0.3s;
}

/* Accordion Heading Inside the Button */
.accordion p {
  margin: 0;
  color: var(--txt2);
  transition: color 0.3s;
}

/* Active or Hover Styles */
.accordion.active,
.accordion:hover {
  color: var(--acc1);
}

.accordion.active p,
.accordion:hover p {
  color: var(--acc1);
}

/* Plus / Minus Icon */

.accordion-icon {
  font-size: 1.5rem;
  margin-left: 5px;
  transition: color 0.3s;
}

.accordion:hover .accordion-icon {
  color: var(--acc1);
}

.accordion.active .accordion-icon {
  color: var(--acc1);
}





/* Accordion Panel (Hidden by Default) */
.panel {
  padding: 1rem;
  background-color: var(--bg1);
  display: none;
  overflow: hidden;
  margin-top: -5px;
}

/* ========================================
   Footer
======================================== */
.footer {
  display:flex;
  flex-direction: column;
  margin-top: 2rem;
  padding: 2rem;
  color: var(--txt2);
  background-color: var(--txt1);
  
}

.footer .footer-chunk {
  padding-top: 2rem;
  padding: 1rem;
}

.footer a {
  color: var(--txt2);
  text-decoration: none;
}

.footer a:hover {
  color: var(--acc2);
  text-decoration: underline;
}



#footer-logo h3 {
  font-family: var(--secondary-font);
}

/* Footer bottom */
.footer-bottom{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0.5rem;
}