/* MOBILE RESPONSIVE */
@media (max-width:768px){
  

   .hamburger-container {
                display: flex;
            }

            .hamburger {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(6px, 6px);
            }

            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(6px, -6px);
            }

            .secondary-nav {
                display: none;
            }

            .main-nav {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 0;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.7s ease;
                border-top:3px solid var(--clr-sec);
                padding-top: 1rem;
            }

            nav.main-nav {
              /* padding-bottom: 2rem; */
            }

            .main-nav.active {
               max-height: calc(100vh - 70px);    /* <-- Changed from 2000px */
                overflow-y: auto;                /* <-- Changed from auto */
                -webkit-overflow-scrolling: touch; /* <-- Added this */
                
    padding-bottom: 200px; /* <-- add this */
                
            }

            .mobile-secondary {
                display: flex;
                flex-direction: column;
                padding-top: 10px;
                margin-top: 10px;
                background-color: var(--clr-light);
                border-radius: var(--radius);

                .nav-item {
                    padding-block: 0rem;
                }
            }

            .mobile-secondary .nav-item:last-child {
                
                padding-bottom: .5rem;
            }

            .nav-item {
                width: 100%;
                padding-block: .5rem;
            }

           

            .dropdown {
                position: static;
                /* display: none; */
                background: var(--clr-primary);
                max-height: 0;
                overflow-y: auto;
                transition: max-height 0.6s ease;
                opacity: 1;
                transform: none;
            }

            .nav-item.active .dropdown {
                display: block;
                max-height: 300px;
                overflow: visible;
            }

            .nav-item > a {
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                user-select: none;
                -webkit-user-select: none;
            }

            .nav-item.has-dropdown > a::after {
                content: ' ▼';
                font-size: 10px;
                transition: transform 0.6s ease;
                display: inline-block;
            }

            .nav-item.active.has-dropdown > a::after {
                transform: rotate(180deg);
            }

            .mobile-secondary .nav-item > a::after {
                content: none !important;
            }

            .mobile-secondary .nav-item a {
              font-weight: 400;
              border: none;

              &:hover {
                border:none;
                text-decoration: underline;
              }
            }

            .parent {
              margin-top: 2.1rem;
              border-top: 1px solid var(--clr-light);
              padding-top: .7rem;
            }

            .dropdown a:hover {
                padding-left: 20px;
            }

  .heroContent {
    border-right:none;
  }

  .heroContainer .flexContainer > * {
    flex-basis: 100%;
  }

.flexContainer_col + .flexContainer_col {
  margin-left: 0;
}

.flexContainer_col {
  /* width: 50%; */
  flex: 1 1 50%;
  
}

.masonry {
  flex-direction: column;
  height: auto;   
}

.col1_masonry {
  
  
    /* min-height: 50vh; */
}

h3.masonry_flex_content {

  padding-top: .3rem;
}

.col1_masonry .card.card-connect {
    min-height: 500px; /* adjust as needed */
    height: auto;
    background-size: cover;
    background-position: center;
}

 .btns-image-cards-container {
        flex-direction: column;
        align-items: center;
      }
      
      .btn-image-link {
        flex: 1 1 auto;
        width: 100%;               /* ← only apply width:100% when stacked */
        max-width: none;
      }

      .btns-image-cards-container {
  border-right: .5rem solid var(--clr-primary);
  border-left: .5rem solid var(--clr-primary);

}

.breadcrumbs {
  padding: .5rem;
}

.breadcrumbs ul {
  

  &:nth-child(1) {
    margin-left: 1rem;
  }
}

.flexContainer_col:first-child::before, .flexContainer_col:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: .5rem;
  background: var(--clr-primary);
  z-index: 1;                   /* Ensures it's on top of image */
  pointer-events: none;
  
  /* box-shadow: -10px 0 0 red; */
  
}

.heroFlex_col:nth-child(2):after, .contentContainer::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: .5rem;
  background: var(--clr-primary);
  z-index: 1;                   /* Ensures it's on top of image */
  pointer-events: none;
  
  /* box-shadow: -10px 0 0 red; */
  
}

.inside .heroFlex_col:nth-child(2):after {
  background: none;
}

.inside .heroFlex_col:nth-child(2) {
  padding: 1rem;
}

.inside .heroFlex_col:nth-child(2) img {

}

.inside img {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);

  border-radius: var(--radius);
}

.inside .heroFlex_col:nth-child(2) {
position: relative;
z-index: 2;
}

.inside .spacer {
  background-color: var(--white);
  display: block;
  width: 100%;
  position: absolute;
  height: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border: none;
}

.insideheroContent {

 inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  padding: 0;
  padding-inline:1rem;
  /* inset: 300px auto 0 0; */

  h1 {
     border-bottom: .3rem solid var(--clr-primary);
  }
  
}

.insideheroContainer {
background-position-y: 0px;
/* background-size: 110%; */
/* background-position-x: -100px; */
}

.heropostposition {
  justify-content: center;align-items:center; gap: 3rem;margin: 0 auto;
  flex-direction: row;
}

.heroFlex_col:nth-child(1) {
/* margin-top: 9rem; */
}

.heroFlex_col:nth-child(2) {
  /* padding: 0 1.5rem; */
  
  
}

.flexContainer_col:nth-child(3) {
/* width: 100%; */
height: 220px;
flex: 1 1 100%;

}

.flexContainer_col img {
  object-fit: cover;
}

.imgWrap img {
  object-position: center 55%;
}

  .bottom-item { min-width:0; }

  .sect_flex_content {
    flex-direction: column;
    
    h2 {margin-top: -1rem;}

    img {
      width: 100%;
      border-top-left-radius: .5rem;
      border-top-right-radius: .5rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      
    }

    

    h4 {display:block;}
  }

  .btn_cta {
    max-width: 97%;
  }

.secpad3 {
  padding: 2.3rem 1rem;
}

.colimg2 {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius);
}

.colimg2posts {

}



.fbtemplate_col:nth-child(2) {
 border-top-right-radius: 0;
 border-bottom-left-radius: var(--radius);
}

.fbtemplate_col2:nth-child(1) {
margin-right: 0;
margin-bottom: 1rem;
}

.footerctaImg {
  background-position: -280px 0px;
}

footer {
  
}

.footer_nav {
  justify-content: flex-start;
  padding: 1rem;
}

.footer_col {
  padding-bottom: 0rem;

  h3 {
    margin-top: .5rem;
  }
}
.footer_col:last-of-type {
  width: 100%;
  order: -1;
  margin-top: -2.5rem;
}
    

.insider {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		/* gap: 1.5rem; */
margin-inline: 1rem;


    ul, li, h2 {
      /* display: block; */
      margin:0;padding:0;}

      .childpages ul li a {
	display:block;
}

	}

  
	aside {
		position: static; /* Remove sticky behavior */
		top: auto;
		order: -1; /* Not strictly needed for grid but harmless */
    border-radius: 0;
    border-radius: 30px;

    
	}

  .inside_article_section {
grid-column: 1 / -1;
  }

   .articlecol {
    flex: 1 1 100%;
    /* margin: 0 1rem; */
  }

  .inside_article > p {
padding-inline: 1rem;
  }

  .widget {
    min-height: 0;
  }

  .widget.top {
display: flex;
justify-content: space-evenly;




  }

  .childpages {
    width: 100%;
    padding: 1rem;
    margin: 0 auto;
    text-align: center;

flex-direction: row;

    li  {
      /* display: inline-block; */
      padding: 0;
      margin: 0;

      a {
        /* padding-inline:1px; */
        /* margin-block: 5px; */
        margin-block:10px;
      }
    }

    h2 {
      /* display: inline-block; */
      margin-left: -10px;
    }

   
  a {
 border:none;
  margin:0;padding:0;
  /* margin-right: 5px; */
  

  
  }
  }

  .childpages a:hover, .current_page_item:hover, .current_page_item a {
      border-left: none;
      font-weight: 700;
      color: var(--clr-primary);
    }

    .childpages a:active {
      color: var(--clr-primary);
      border-left: none;
      font-weight: 700;
    }
    
    .childpages a:focus {
      color: var(--clr-primary);
      border-left: none;
      font-weight: 700;
    }

    li.current_page_item > a {
      /* border-left: 2px solid transparent; */
      border-left: none;
    }


  .childpages h2 {
    margin-left: 0;
   }

  .childpages h2 a {
    /* display: inline; */
    margin-left: 0;
    margin-block: 2rem;
    font-size: 1.3rem;
  }

  
    .childpages h2:first-of-type, ul.aside-desktop-menu {
  display:none;
}
  

  .widget.bottom {
border-radius: 30px;
margin: 1rem;

flex-direction: column;
align-items: center;
/* line-height: 1rem; */
padding-inline:10px;
a {
  width: 80%;
  margin-block: 0;
  margin-bottom: 1rem;
  text-align: center;
}




}

.hero {
        
        text-align: center;
        max-height: 400px;
        min-height: 300px;
        background-position-y: 0px;
        /* height: 70vh;               Slightly smaller on mobile if needed */
      }
     
      .herobackground {
        padding: 2rem 1rem;
        background-position-y: 0px;
      }

      .hero-container {
        width: auto;
      }
      .hero-content {
        max-width: 100%;
        margin: 0 auto;
      }

      .hero h1,
      .hero p {
        text-align: center;
      }

      .hero h1 {
        font-size: clamp(.5rem, 5vw, 2rem);
      }

      /* === Leadership Section === */

       .hero_h1img_lr {
                box-sizing: border-box;
               width: 100%;
            }

            .hero_h1img_lr_container {
               
                grid-template-columns: 1fr;
                text-align: center;
                padding: 0; /* Remove any padding from the hero container */
            }
            
            
            .hero_h1img_lr_content {
                width: 100%;
                margin: 0 auto;
                /* padding-left: 2rem; */
                /* padding: 4rem 2rem 2rem; */
                order: 1;

                h1 {
                  padding-top: 1.3rem;
                }
            }
            
            .hero_h1img_lr_image-wrapper {
                order: 2;
                /* margin: 1rem 1rem 0 1rem; */
                /* min-height: 60vh; */
                position: relative;
                /* margin: 0 auto; */
                width: 100%;
                padding: 0 2rem;
                box-sizing: border-box;
                margin: auto;
                margin-top: 2rem;
                
            }
            
            .hero_h1img_lr_image {
                /* min-height: 60vh; */
                z-index: 2;
                position: relative;
                width: 100%;
                background-position-y: top;
                border-radius: 30px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }
            
            .hero_h1img_lr h1 {
                /* font-size: 3rem;
             */
             padding-left: 2rem;
            }
            
            /* Full-width white strip below the image - no side gaps */
            .hero_h1img_lr_container2::after {
                content: '';
                position: absolute;
                /* left: -2rem; */
                /* right: -2rem; */
                left: 0;
                right: 0;
                /* bottom:-350px;  */
                height: 100px;
                
                background: #fff;
                z-index:1;
            }
            

       .event-details {
        margin-left: 0;
        margin-top: 0rem;
      }

      .apply-button1 {
        display:block;
      }


      .givecontainer {

      }
      .giveimg {
 background-image:
      /* linear-gradient(
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.7)
      ),
      url('https://lesmcc14.dream.press/wp-content/uploads/sitecores/graduation_service.jpg'); */
      }
      .givecontent {
        width: 100%;
        padding: 2rem;
        min-height:400px;

        P {
           font-size: clamp(1rem, 5vw, 1.3rem);
        }
      }
    }

 /* MOBILE: First column becomes full-width header */
@media (max-width: 768px) {
  .table-container {
    /* margin-right: 1rem;  */
    box-shadow: none;}
  table, thead, tbody, th, td, tr { display: block; margin-right: 0rem;}
  thead { display: none; }                      /* you already hide headers */

  tbody tr {
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
  }

  /* First column = full-width "title" row */
  tbody td:nth-child(1) {
    display: block;
    width: 100% !important;
    padding: 1rem 1.2rem;
    background: #eee;               /* same as your desktop header */
    font-weight: 600;
    font-size: 1.1rem;
    text-align: left;
    border-bottom: 1px solid #ccc;
    border-right: none !important;
  }

  /* The other three columns = normal stacked fields */
  tbody td:nth-child(2),
  tbody td:nth-child(3),
  tbody td:nth-child(4),
  tbody td:nth-child(5) {
    display: block;
    width: 100%;
    padding: 0.75rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  tbody td:last-child { border-bottom: none; }

  /* Optional: add labels back just for the three data columns */
  .table-container tbody td:nth-child(2)::before { content: "Living On Campus: "; font-weight: bold; }
  .table-container tbody td:nth-child(3)::before { content: "Living Off Campus: "; font-weight: bold; }
  .table-container tbody td:nth-child(4)::before { content: "Living With Parents: "; font-weight: bold; }
.table-container tbody td:nth-child(5)::before { content: "CAPs: "; font-weight: bold; }
 
.table-container tbody td:nth-child(2)::before,
  .table-container tbody td:nth-child(3)::before,
  .table-container tbody td:nth-child(4)::before,
  .table-container tbody td:nth-child(5)::before {
    /* color: #444; */
    display: inline-block;
    width: auto;
    text-align: left;
    margin-right: 0.5rem;
  }

  /* Make the actual value stand out */
  .table-container tbody td:nth-child(2),
  .table-container tbody td:nth-child(3),
  .table-container tbody td:nth-child(4),
  .table-container tbody td:nth-child(5) {
    font-weight: 500;
    font-size: 1.1rem;
  }
}

tbody td::before:hover {
  color: var(--white);
}
 /* ← CENTER all the other columns */
  th:nth-child(2), th:nth-child(3), th:nth-child(4), th:nth-child(5),
  td:nth-child(2), td:nth-child(3), td:nth-child(4), td:nth-child(5) {
    text-align: left;
  }
}

@media(max-width:847px){
  

.footer_col:last-of-type {
  width: 100%;
  order: -1;
  margin-top: -2.5rem;
}
}

/* DESKTOP */
@media(min-width:769px){
  
  .accentlink a {
    padding: 10px 15px;
    border-radius: 0;

    &:hover {
      color: var(--black)
    }
  }

  .heroContainer {
    /* margin-top: 8rem; */
  }

  .util {
    padding: 1.3rem;
  }
  
  .footerctaContainer {
margin-bottom: -3rem;
  }
  
a.btn_cta2 {
  margin-right: 1.1rem;
}

  .bottom-row   { flex-wrap:nowrap; }
  .bottom-item  { flex:1 1 0; min-width:0; }

  
 .aside-mobile-menu {
    display: contents;
  }

  .aside-mobile-menu summary {
    display: none;
  }

  .aside-menu-wrapper {
    max-height: none;
    overflow: visible;
  }

  .aside-menu {
    display: flex;
    border: none;

   
  }

  .aside-menu li {
    border: none;
    padding: 0 16px;
  }

  .event-details {
    margin-left: -1.5rem;
    margin-top: -7rem;
  }
 
 
   /* .events-grid {
        padding-inline: 1rem;
      } */
}

  @media screen and (max-width: 959px) and (min-width: 769px) {
    
    .event-details {
        margin-left: 0rem;
        margin-top: 0;
      }

       .hero-image-wrapper_samerow {
      
      margin-right: 0;
    }  
  }

@media (min-width: 960px) {
      .hero_samerow {
        padding: 3rem 2rem 2rem 1rem;
      }

      .hero-grid_samerow {
        grid-template-columns: 1fr 1fr;     /* equal width columns */
        gap: 1rem;
        text-align: left;
      }

      .hero-content_samerow {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        height: 100%;        

        h1 {
          margin-bottom: 1rem;
          text-align: left;
          
        }
      }

      .hero-image-wrapper_samerow {
        justify-self: end;
        margin-bottom: calc(-1 * var(--overlap));
        width: 100%;
        margin-right: 0rem;
      }

      .hero-image_samerow {
        max-width: none;
        border-radius: 2rem;
      }

     
 

    }


   @media screen and (max-width: 1310px) and (min-width: 960px) {
  .event-details {
        margin-left: 0rem;
      }

       .hero-image-wrapper_samerow {
      
      margin-right: -1rem;
    }  

   }
    
   @media (max-width: 789px) {

            .hero_h1img_lr_image {
                /* background-position-y: top; */
            }

            .hero_h1img_lr_content {
                padding-left: 3rem;
            }
        }


        @media (min-width: 420px) and (max-width: 600px) {

            .hero_h1img_lr_container::after {
              
                /* bottom:-80px;  */
               
            }
         }

        @media (max-width: 320px) {

            .hero_h1img_lr_container::after {
              
                /* bottom:-350px;  */
               
            }
         }


         /* Add this in Additional CSS */


/* Extra safety for very narrow screens */
@media (max-width: 856px) {
  .hero h1 {
    font-size: clamp(1.75rem, 5.5vw, 2rem);
    line-height: 5rem;
    
  }

  .hero .hero-content {
    margin-bottom: 3rem;
  }
}