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

/*First update will swap all font sizes for these dynamic equations*/
/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
          --fts-sm: clamp(0.8rem, 0.07vi + 0.78rem, 0.89rem);
          --fts-base: clamp(1rem, 0.14vi + 0.97rem, 1.19rem);
          --fts-md: clamp(1.25rem, 0.25vi + 1.19rem, 1.58rem);
          --fts-lg: clamp(1.56rem, 0.41vi + 1.46rem, 2.11rem);
          --fts-xl: clamp(1.95rem, 0.64vi + 1.79rem, 2.81rem);
          --fts-xxl: clamp(2.44rem, 0.97vi + 2.2rem, 3.75rem);
          --fts-xxxl: clamp(3.05rem, 1.45vi + 2.69rem, 5rem);
    }
  }
  /* For browsers that don't support clamp */
  @supports not (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
          --fts-sm: 0.8rem;
          --fts-base: 1rem;
          --fts-md: 1.25rem;
          --fts-lg: 1.56rem;
          --fts-xl: 1.95rem;
          --fts-xxl: 2.44rem;
          --fts-xxxl: 3.05rem;
    }
    @media screen and (min-width: 2550px) {
      :root {
              --fts-sm: 0.89rem;
              --fts-base: 1.19rem;
              --fts-md: 1.58rem;
              --fts-lg: 2.11rem;
              --fts-xl: 2.81rem;
              --fts-xxl: 3.75rem;
              --fts-xxxl: 5rem;
      }
    }
  }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    min-width: 297px; /*Smallest supported Screen width*/
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    /*padding: 0 20px;*/
}

/* Navigation */
.navbar {
    background-color: #7A49CA; /*purple*/
    /*padding: 1rem 2rem;*/
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /*0 3px 10px rgba(0, 0, 0, 1)*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*min-height: 78px;*/
    /*height: clamp(2.5rem, 8vh, 5rem); /*Just changed at 5pm to get more realstate*/
    min-width: 297px;
}

.logo h1 {
    /*color: #2c3e50;*/
    /*padding: 1rem 2rem; Previous padding*/
    padding: 1rem 0 1rem 0.5rem; /*Test padding, might keep, revert or change*/
    color: #ffffff;
    /*font-size: 1.8rem;*/
    font-size: clamp(1.6rem, 2vw, 2.5rem); /*New, dynamic font size*/
}

.nav-links {
    display: flex; /*Y*/
    list-style: none;  /*Y*/

    min-height: 100%; /*Check*/

    /*Used to fill containers to top and bottom of navbar*/
    align-self: stretch; /*Y*/

    /*margin-right: 1.5rem; To be removed*/

}

/*.nav-links span {
    
}*/

.nav-links li {
    /*Test*/

    display: flex; /*Y*/
    align-items: center; /*Y*/

    /*min-height: 100%; Might not be needed*/

    /*margin-left: 2rem; To be Removed*/
    
    /*Underline test*/
    list-style: none; /*Check*/

    /*display: inline-block; To be Removed*/
    /*flex: 1; To be Removed*/


    /*Testing it off */
   /* padding-bottom:2px; /*the space for the gradient*/
    background: linear-gradient(yellow,yellow) center 78%; /*OR bottom right OR bottom left*/
    background-size: 0% 2px; /*width:0% height:2px*/
    background-repeat:no-repeat; /* Don't repeat !!*/
    transition: all 0.3s;
    
    /*Dynamic Padding/Check if really necessary*/
    padding: 0 clamp(0.3rem, 1vw, 3rem);
    
    /*Dynamic Font/Check if really necessary*/
    font-size: clamp(1rem, 1.3vw, 2rem);
}

.nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    transition: all .3s ease;
    flex-shrink: 0; /*To keep text from wrapping. Appartently sometimes pairs nicely with "min-width: fit-content"*/
    /*Testing it off */
    /*padding-bottom:5px; /*the space for the gradient*/
    
    /*transition: color 0.3s ease;*/
}

/*Underline test*/
.nav-links li:hover {
background-size: 100% 2px; /*width:100% height:2px*/

    a {
        /*color: yellow;*/
        color: yellow;
        cursor: pointer;
        font-size: 1.2em;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        
        /*height: 37px;*/
        /*padding: 3px;*/
        /*border-radius: 8px;*/
        /*transition: background-color .8s ease;*/
    }
}


/* Hero Section */
.hero {
    overflow: hidden;
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));/*, url('https://via.placeholder.com/1920x1080');*/
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-top: 80px;
}

.hero-img{
    /*position:absolute;*//* top:0; left: 0;*/ width: 100%; height: 100%; object-fit: cover; z-index: 0;
}

.hero-content {
    position: absolute;
    /*background-image: url(images/pexels-william-fortunato-6393377.jpg);*/ 
    background-size: cover;
    background-color: rgba(22, 22, 22, 0.5);/*rgba(222,222,222,.5);*/
    /*border: 2px solid rgba(222,222,222,.5);*/
    color: white;
    /*opacity: 0.5;*/
    max-width: 800px;
    padding: 2rem;
}



.hero-content-img {
    /*position: absolute;
    background-color: rgba(22, 22, 22, 0.5);/*rgba(222,222,222,.5);*/
  
    /*color: white;

    max-width: 800px;
    padding: 2rem;*/
    position: relative;
    width: 100%; height: 100%; object-fit: cover; z-index: 0;
}


.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 1.5;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: bold;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #7A49CA;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.5s ease;
    font-size: 1.5rem;
    font-weight: 600;
}

.cta-button:hover {
    background-color: darkmagenta;
    color:yellow;
}





/*ABOUT SECTION*/
/* About Section */
.about {
    padding: 5rem 0;
    background-color: #f9f9f9;
}

.about .mission {
    display: flex;
    flex-direction: column;
    margin: 0 10%;
}

.about h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
    

    /*font-size: clamp(var(--fts-lg), (var(--fts-lg) * 0.85) + 0.5vw, var(--fts-lg) * 2); Test based on text from cards*/
    font-size: var(--fts-xl); /*Thinking about using base font scaling formula since space isn't an issue here*/
}

.about p {
    text-align: center;
   /*max-width: 90%;/*800px;*/ /*I think this gets overwritten*/
    /*margin: 0 auto 3rem; REmoved for now since it makes cards look worse*/
    font-size: clamp(var(--fts-md) * 0.85, (var(--fts-md) * 0.5) + 0.5vw, var(--fts-md) * 1.5);
}

/*.about p messes with the text within the dynamic cards. This is a temporary fix*/
.content p {
    max-width: 100%;
}

.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    text-align: center;
    padding: 2rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
}

/*.value-card i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1rem;
} */ /*blue icons, which got replaced for images*/

.value-card-img {
    width: 100%;
    height: 200px; /*Arbitrary height, change*/
    /*Maybe give a radius to the corners?*/
    object-fit: cover;
}

/* Programs Section --- Currently hidden*/
/*.programs {
    padding: 5rem 0;
}

.programs h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.program-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.program-card:hover {
    transform: translateY(-5px);
}

.program-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.program-card h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    color: #2c3e50;
}

.program-card p {
    padding: 0 1.5rem 1.5rem;
    color: #666;
}*/

/* Impact Section --- Currently hidden*/
/*.impact {
    padding: 5rem 0;
    background-color: purple;
    color: white;
}

.impact h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.impact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-card h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}*/

/* Get Involved Section */
.get-involved {
    padding: 5rem 0;
    /*background-color: #f9f9f9; Previous background*/
    background-color: purple;

}

.get-involved h2 {
    text-align: center;
    margin-bottom: 3rem;
    /*color: #2c3e50; Previous color*/
    color: white;
}

.involvement-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.option-card {
    text-align: center;
    padding: 2rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.option-card:hover {
    transform: translateY(-5px);
}

.option-card i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1rem;
}

.button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: purple;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkmagenta;
}

/* Contact Section */
.contact {
    padding: 5rem clamp(1rem, 2.5%, 5rem);
}

.contact h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
    font-size: var(--fts-xl);
}

.contact-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-item i {
    font-size: 1.5rem;
    color: #3498db;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 1rem;
    border: calc(var(--fts-base) * 0.075) solid #2c3e50;
    border-radius: 5px;
    font-size: 1rem;
}

.contact-form textarea {
    height: 150px;
    resize: vertical;
}

.submit-button {
    padding: 1rem;
    background-color: #7a49ca;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: purple;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    /*padding: 4rem 0 2rem;*/
    padding: 4rem clamp(1rem, 2.5%, 5rem);
    padding-bottom: clamp(0.5rem, 2%, 1rem)
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1.5rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #3498db;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    font-size: 1.5rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*START OF DYNAMIC CARDS*/

.outer-test-container{
    /*display: grid; /*Get rid of it, don't think it's in use*/
    /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /*Get rid of it, don't think it's in use*/
    /*gap: 2rem; /*Get rid of it too*/
    margin-top: 3rem; /*Might not need it*/


    display: flex; /*Get rid of it?*/
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    /*gap: 2rem;*/
    /* margin-top: 3rem; */
    background: #f9f9f9;
    justify-content: center;
}

.test-container{
    width: 100%; /*80%; Cards overflowed at 770px*/
    max-width: 3000px; /*Arbitrary limit*/
    position: relative;
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(3, 1fr);
    /*gap: 0 5%; /*Removed gap - Might change for dynamic padding?*/
    /*padding: 0 5%;*/
    padding: 0 10%; /*5pm, trying to limit size of PC cards*/
    align-items: center; /*This mostly fixed the cards title positioning*/
}

.test-container .test-card{
    position: relative;
    cursor: pointer;
    padding: 0 5%; /*5pm, trying to limit size of PC Cards*/
}

.test-container .test-card .face{
    /*width: 300px; /*Check if necessary*/
    /*height: 200px;*/ /*This seems to always be overwritten - Check if necessary*/
    transition: 0.5s;
    /*background: blue;Not og, just testing*/
}

.test-container .test-card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center; /*Check if necessary*/
    align-items: center; /*Check if necessary*/
    z-index: 1;
    transform: translateY(100px);
    /*min-width: 10vw; /*Not used in browser. Added to scale width with screen size*/
    /*max-height: 50%;Not OG. Added but might remove.*/
    /*height: 400px; /*not og, just testing. Height needed to limit height of image.*/
    height: 70%; /*So edges of cards don't touch ends of grid cells*/
    aspect-ratio: 3/3.5; /*Seems to be the perfect ration. Check if true*/
    width: 100%; /*Check if necessary*/
    font-size: clamp(var(--fts-md), (var(--fts-md) * 0.85) + 0.5vw, var(--fts-md) * 1.5);
}

.test-container .test-card:hover .face.face1{
    background: #ff0057; /*Change accent to fit organization better*/
    transform: translateY(0);
    min-width: 10vw; /*Added to scale width with screen size*/
}

.test-container .test-card .face.face1 .content{
    opacity: 0.5; /*Probably will raise value*/
    transition: 0.5s; /*Check adjustments. Maybe match nav bar transitions?*/
    /*max-width: 100%;Not OG, might remove.*/
    /*max-height: 100%;Not OG, might remove.*/
    overflow: hidden;
    min-height: 0; /*Check if Necessary?*/
    height: 100%;
    /*width: 400px; Check If Necessary*/
    display: grid; /*Check if necessary since test container align-items*/
    width: 100%; /*Check if necessary*/
}

.test-container .test-card:hover .face.face1 .content, .test-container .test-card:active .face.face1 .content{
    opacity: 1;
}

.test-container .test-card .face.face1 .content img{
    /*max-width: 100%;
    height: auto;
    object-fit: contain;*/
    object-fit: cover;
    width: 100%;
    /*display: block; Seems to be overwritten/unchecked/unecessary*/
    height: auto; /*100%; Check why.*/
    /*object-position: center;*/
    aspect-ratio: 1/1.02; /*Seems to just work*/
}

.test-container .test-card .face.face1 .content h3{
    /*margin: 10px 0 0;*/
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: var(--fts-md); /*clamp(1rem, calc(1vw + 0.5rem), 5rem);/* 1.5em;*/
}

.test-container .test-card .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: min(1rem, 2%);/*20px;*/
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-92%);/*translateY(-100px);*/
    aspect-ratio: 1 / 0.6; /*Not sure if it will stay*/
    overflow: auto; /*Might keep*/
    width: 100%;
}

.test-container .test-card:hover .face.face2{
    transform: translateY(0);
}

.test-container .test-card .face.face2 .content p{
    margin: 0;
    padding: 0;
    font-size: clamp(0.95rem, calc(0.9vw + 0.5rem), 2.7rem);
}

.test-container .test-card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.test-container .test-card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}




/*GENERAL MEDIA RULES -- MOST IF NOT ALL WILL BE ABSORBED INTO THE LAYOUT SPECIFIC MEDIA RULES BELOW*/

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        /*padding: 1rem; /*For Small Layout?*/
    }

    .logo h1 {
        padding: 1rem 1rem;
    }

    .nav-links {
        /*margin-top: 1rem; /*For Small layout?*/
        flex-wrap: wrap; /*Is this necessary?*/
        justify-content: center;
        margin-right: 0; /*Might not be necessary anymore*/
    }

    /*Check*/
    .nav-links li {
        margin: 0.5rem;
        background: linear-gradient(yellow,yellow) center 99%;
        background-size: 0% 2px;
        background-repeat: no-repeat;
        transition: all 0.3s;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    /*Check*/
    .contact-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .values,
    .program-grid,
    .impact-stats,
    .involvement-options {
        grid-template-columns: 1fr;
    }
} 

/*START OF LAYOUT SPECIFIC MEDIA RULES*/

/*About Section: Mobile -- Might turn mobile into the default layout (Thus this section might get scrapped?)*/
/*@media (max-width: 769px) {
    .container {
        display: grid !important; /*block !important; - Accidentally set to block instead of grid*/
    /*}
}*/

/*About Section: Fullsize*/
/*@media (min-width: 770px) {
    .outer-test-container {
        display: grid !important; /*block !important; - Accidentally set to block instead of grid*/
   /* }
}*/

/* Style for devices wihtout a touch input screen (desktops/laptops) */
@media (hover: hover) and (pointer: fine) {
    .outer-test-container {
        display: flex !important; /*block !important; - Outer container doesn't need to be grid*/ /*Using flex to center grid*/
    }

    @media (max-width: 1000px) {
        .test-container {
            grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
        }
    }

}

/* Style for devices with a touch input screen (mobile/tablets) */
@media (hover: none) and (pointer: coarse) {
    .container {
        display: grid !important; /*block !important; - Check if this container should be grid or block*/
    }
}

/*MEDIA RULES TO FORMAT TEXT IN "About section", PC only?*/
@media (max-width: 1400px) {
    .test-container .test-card .face.face1 .content h3 {
        font-size: calc(var(--fts-md) * 0.9);
    }
}
@media (max-width: 1130px) {
    .test-container .test-card .face.face1 .content h3 {
        font-size: calc(var(--fts-md) * 0.8);
    }
}





@media (max-width: 1131px) {
    .test-container .test-card .face.face2 .content p {
        font-size: calc(var(--fts-base) * 0.85);
    }
}

@media (max-width: 1070px) {
    .test-container .test-card .face.face2 .content p {
        font-size: calc(var(--fts-base) * 0.8);
    }
}



@media (min-width: 1131px) {
    .test-container .test-card .face.face2 .content p {
        font-size: calc(var(--fts-base) * 0.9);
    }
}

@media (min-width: 1265px) {
    .test-container .test-card .face.face2 .content p {
        font-size: calc(var(--fts-base));
    }
}

@media (min-width: 1450px) {
    .test-container .test-card .face.face2 .content p {
        /*font-size: calc(var(--fts-md) * 0.85);*/
        font-size: clamp(var(--fts-md) * 0.85, (var(--fts-md) * 0.5) + 0.5vw, var(--fts-md) * 1.5);
    }
}

/*TEST CARDS*/

/*.outer-test-container{
    margin: 0;
    padding: 0;
    /*min-height: 100vh; OG, removed*/
   /* background: pink;/*Keeping for later:#f9f9f9;This is the same background as the about section*/
    /*display: flex;
    justify-content: center;
    align-items: center;
    font-family: consolas;
}*/