/* Added by Varun Aggarwal */
/* Collapsible sections */

details {
    border: 1px solid #eee; /* Border for the entire collapsible section */
    overflow: hidden; /* Ensures no overflow when expanded */
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth transition for visual effects */
}

details summary {
    background-color: #eee; /* Background color for the summary */
    padding: 10px; /* Padding inside the summary */
    font-size: 20px; /* Font size for better visibility */
    cursor: pointer; /* Pointer cursor for interactivity */
    list-style: none; /* Remove default marker styling */
    margin: 0; /* Remove default margin */
    position: relative; /* To position the arrow */
    display: flex; /* Align text and arrow horizontally */
    align-items: center; /* Center arrow and text vertically */
    justify-content: space-between; /* Push arrow to the right */
}

details ul {
    margin: 0; /* Remove extra margins */
    padding: 0 20px 0 40px; /* Padding for bullets, initially collapsed */
    background-color: #ffffff; /* White background for consistency */
    list-style-type: disc; /* Adds bullet points */
    overflow: hidden; /* Hide content when collapsed */
    height: 0; /* Start collapsed */
    transition: height 0.3s ease, padding 0.3s ease; /* Smooth opening and closing animation */
}


@keyframes blink {
    50% {
        color: #8e6f3e; /* Black */
    }
    75% {
        color: #000000; /* Purdue Gold */
    }
    100% {
        color: #8e6f3e; /* Black */
    }
}

.blink {
    animation: blink 1s infinite;
}

/* Added by Varun Aggarwal */

/* START of Dynamic Nav Bar */
.dynamicNav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dynamicNav-div {
    flex: 1;
    min-width: calc(33.33% - 2px);
    box-sizing: border-box;
    margin: 1px;
    text-align: center;
    font: bold 0.9rem/1 "United Sans", Impact, "Arial Black", sans-serif;
    border: 2px solid #8e6f3e;
    background-color: #8e6f3e;
    color: #000;
    cursor: pointer;
    transition: all 0.1s ease-out;
    opacity: 0.9;
    overflow: hidden;
    white-space: normal;
    text-overflow: wrap;
}

.dynamicNav-div a {
    font-family: "United Sans", Impact, "Arial Black", sans-serif !important;
    display: flex; /* Add Flexbox */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-decoration: none;
    color: #000 !important;
    padding: 8px 3rem 6px 3rem;
    font-size: 1rem;
    width: 100%;
    height: 100%;
}

.dynamicNav-div:hover a {
  color: #8e6f3e !important;
  text-decoration: none !important;
}

.dynamicNav-div:hover {
/*    transform: scale(0.99);*/
    background-color: #fff;
    opacity: 0.8;
}
/* END of Dyanmic Nav Bar */

/* START of Back to Top Code */
html,
body {
  scroll-behavior: smooth;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  left:  20px;
  display: none;
  background-color: #000;
  color: #cfb991;
  z-index: 99999;
}
/* END of Back to Top Code */

/* START of FAQ dropdown styles */
.dropdown div{
display: none;
transition: all 0.3s ease;
}
.dropdown h5{
width: 100%;
background: #eee;
font-family: 'acumin-pro-semi-condensed';
color: black;
font-size: 18px;
padding: 23px;
font-weight: 400;
padding-left: 60px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 15px;
margin-top: 15px;
text-transform: inherit;
}
.dropdown h5:before{
content: "+";
position: absolute;
top: 50%;
left: 30px;
transform: translate(-50%,-50%);
background: #222;
width: 25px;
height: 25px;
border-radius: 50%;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-bottom: 6px;
}
.dropdown.open div{
display: block;
border: 1px solid #ddd;
border-top: none;
padding: 20px;
}
.dropdown.open h5{
margin-bottom: 0;
}
.dropdown.open div p:last-of-type{
margin-bottom: 0;
}
/* END of FAQ dropdown styles */

/* START of Announcement Banner style */
.announcement {
  display: table;
  background-color: #000;
  color: #cfb991;
  padding: 0.3rem;
  border-radius: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: bold;
  width: 100%;
}

.announcement p {
  text-align: center;
  display: table-cell;
  padding: 0.7rem;
}
/* END of Announcement Banner style */

/* START of two column important dates */
.row {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 20%;
}

.event-single {
  color: #555960;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.event-single:first-child {
  margin-top: 0;
}
.event-single:last-child {
  margin-bottom: 0;
}

.event {
  text-align:center;
  color: #555960;
  margin-top: 20px;
}

.date {
  font-size: smaller;
  text-align:center;
  color: #6f727b;
  margin-top: -10px;
}
/* END of two column important dates */

/* START of Aligned Dates */
.width1 {
  display: inline-block;
  width: 13em;
  text-align:center;
}
/* END of Aligned Dates */

/* START of SURF Landing Page Tiles */
.container {
  margin: 0 auto;
  /*padding: 20px;*/
  text-align: center;
}

.grid {
  display: grid;
  grid-gap: 0.1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;
}

.tile {
  display: table;
  border: 2px solid #000; /* Border width and color */ 
  font-weight: bold;
  font-size: 1rem;
  font-family: "United Sans",Impact,"Arial Black","sans serif" !important;
  cursor: pointer;
  background-color: #8e6f3e;
  transition: all .1s ease-out;
  opacity: 0.9;
  text-transform: uppercase;
}

.tile a {
  padding: 0.5rem 0.8rem 0.5rem 0.8rem;
  font-family: "United Sans",Impact,"Arial Black","sans serif" !important;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color: #000 !important;
  width: 100%;
  height: 100%;
}

.tile:hover {
  /* overlay purdue color with transparency */
  transform: scale(.97);
  /*color: #8e6f3e;*/
  /* Purdue Gold: c69c6e, dark-gold: 8e6f3e*/
  background-color: #000; 
  opacity: 0.8;
}


.tile:hover a {
  color: #8e6f3e !important;
  text-decoration: none !important;
}

.a-temp:hover {
  color: #8e6f3e !important;
  text-decoration: none !important;
}

/* END of SURF Landing Page Tiles */