/* Page Styles */

sup {
  vertical-align: super; /* Ensures proper vertical alignment */
  font-size: smaller;    /* Makes the superscript text smaller */
  line-height: normal;   /* Prevents line height issues */
  margin-left: .3rem;
}

.btn_cta, .btn_cta2, .spancta {
      display: inline-flex;
      justify-content: space-between; /* Text left, arrow right */
      align-items: center;
      width: 100%;                    /* Full width of container */
      max-width: 300px;               /* Optional: limit max width */
      padding: 16px 24px;             /* Bigger padding = taller & wider feel */
      color: #ffffff;
      background: var(--clr-primary);
      border: none;
      border-radius: 12px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px hsla(var(--primaryhsl), .3);
      margin: 20px auto;              /* Center if container is wider */
      box-sizing: border-box;
      
    }

    a.btn_cta, a.btn_cta2, .spancta {
      font-style: normal;
      
    }

    /* Hover: full color change + lift */
    .btn_cta:hover, .btn_cta2:hover, .spancta {
      background-color: hsla(var(--primaryhsl), .9);
      /* transform: translateY(-3px); */
      box-shadow: 0 10px 25px hsla(var(--primaryhsl), .6);
    }

    /* Arrow icon (CSS) */
    .btn_cta::after, .btn_cta2::after, .spancta::after {
      content: "→";
      font-size: 20px;
      font-weight: bold;
      transition: transform 0.3s ease;
      margin-right: .5rem;
    }

    /* Arrow slides right on hover */
    .btn_cta:hover::after, .btn_cta2::after, .spancta:hover::after {
      transform: translateX(6px);
    }

    /* Accessibility */
    .btn_cta:focus-visible, .btn_cta2:focus-visible, .spancta:focus-visible {
      outline: 3px solid #a5b4fc;
      outline-offset: 3px;
    }

a.btn_cta2 {
  font-size: 1rem;
  padding: 10px;
  max-width: 150px;
  /* margin-right: auto; */
  /* margin: 0 .5rem .5rem .5rem; */
  margin-left: 1rem;
  
  
  
}

.spancta {
  font-size: 1rem;
  padding: 10px;
  max-width: 50px;
  /* margin-right: auto; */
  /* margin: 0 .5rem .5rem .5rem; */
  margin-left: 1rem;
  
  
  
}


body {
    border-top: .75rem solid var(--clr-sec);

    p {
      margin-top: 1rem;
    };
}


/* HEADER NAV */
header {
  background:var(--white);
  box-shadow:var(--shadow);
  /* position:relative; */
  z-index:50;
  /* position: fixed; */
  position: relative;
  width: 100%;
  
}

nav.container {
  max-width:1900px;
  margin:0 auto;
  padding:.5rem 1rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

nav.container a {
  font-size: 1.1rem;
}
/* Topnav (desktop only) */
.topnav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:0.5rem;
  margin-top: 1.5rem;
  
}
.topnav a { padding:.5rem 0.75rem; white-space:nowrap; }

/* Main nav */
.mainnav{display:flex;align-items:center;gap:1rem;padding:.5rem 0;position:relative;}
.brand{font-weight:700;font-size:1.05rem}
.mainnav .brand {
    max-width: 250px;
}

/* Hamburger */
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.hamburger .bar{display:block;width:22px;height:3px;background:var(--clr-black);border-radius:2px;margin:4px 0;transition:transform .25s,opacity .25s}

/* Nav links container */
.nav-links{
  display:flex;
  gap:.25rem;
  align-items:center;
  max-width:100vw;
  flex-wrap:wrap;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.nav-links > li{position:relative}
.nav-links a{padding:.85rem 1rem; border-top:3px solid transparent; transition:background .25s,border-color .25s;}
.nav-links a:hover,.nav-links a:focus, .topnav a:hover, .topnav a:focus {background:var(--clr-light); border-top-color:var(--clr-sec);}
li.toplevel a {font-weight: 600;}
.topnav a:hover, .topnav a:focus {
  border-radius: var(--radius) ;
}

/* Dropdown arrow */
.drop-toggle::after{
  content: " ▼";
  font-size:0.7rem;
  margin-left:0.25rem;
  transition: transform 0.25s ease;
}
.dropdown.open > .drop-toggle::after{
  transform: rotate(180deg);
}

/* Dropdown menu */
.nav_dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:220px;
  background:var(--clr-primary);
  color:var(--clr-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  z-index:1000;
  flex-direction:column;
  overflow:hidden;
}
.nav_dropdown li a{padding:.75rem 1rem;color:var(--clr-white);transition:background .18s;}
.nav_dropdown li a:hover{background:rgba(255,255,255,0.12)}
.dropdown.open > .nav_dropdown{display:flex}

/* Overlay for mobile menu */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  margin-top: .75rem;
}
.overlay.show {
  opacity: 1;
  pointer-events: all;
}

main a {
  color: var(--clr-sec);
  text-decoration: underline;
  font-style: oblique;
  font-weight: var(--bold);
}

main a:hover {
  text-decoration: none;
}

.hero_accent {
  color: var(--clr-sec);
  /* font-style: oblique; */
}

.accent {
  font-weight: 700;
  font-style: oblique;
  color: #666;
}
.heroContainer {
  display:flex;
  flex-wrap:wrap;
  /* gap:1rem; */
  max-width:100%;
  /* padding: 1rem;   */
  /* margin-top: 9rem 0 0 0; */
  margin: 0;
  background-color: var(--clr-primary);
  position: relative;
}

.heroContent {
  position: relative;
  background-color: var(--clr-white);
  /* background-color: rgba(255, 255, 255, 1); */
  height: 100%;
  /* padding: clamp(2rem, 35px, 4rem); */
padding: 0 1.2rem;
width: 100%;
  border-right: 1.5rem solid var(--clr-sec);

  h1 {

    /* margin-top: 10rem; */
    display: block;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    max-width: 100%;
    margin: 0;
    
    
    
  }


  p:first-of-type {
    margin-top: 3rem;
  }
}

.util {
  width: 100%;
  max-width: 100%;
  padding: 0;

  a.btn_cta:first-of-type {
    margin-top: 3rem;
  }
}

.video-wrapper {
  /* position: relative; */
  /* padding-bottom: 56.25%; */
  /* height: 0; */
  /* overflow: hidden; */
  width: 100%;
  height: 100%;
  border-left: 1.5rem solid var(--clr-primary);
  
}

.video-wrapper video {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  height: 100%;
  object-fit: cover;

  position: relative;

}

.heroFlex_col:nth-child(1)::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: 0;
  z-index: 1;
  height: 100%;
  width: 200px;
background-image: url('https://pclions.com/i/brand/Paine-College_Primary-2-Color-Icon-Reverse.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.contentContainer {
  display:flex;
  flex-wrap:wrap;
  /* gap:1rem; */
  max-width:100%;
  /* padding: 1rem;   */
  position: relative;
}

.flexContainer {
display: flex;
justify-content: space-evenly;
/* gap: clamp(0px, .05rem, .1rem); */
flex-wrap: wrap;
position: relative;
/* margin-top: 1rem; */
}

.newsContainer, .sect_container, .fbContainer {
display: flex;
justify-content: space-evenly;
gap: clamp(0px, .09rem, .1rem);
flex-wrap: wrap;
position: relative;
/* background-color: var(--clr-black); */
/* margin-top: 1rem; */

}

.fbtemplate, .fbtemplate2 {
  display: flex;
/* justify-content:center; */
gap: clamp(0px, .09rem, .1rem);
flex-wrap: wrap;
position: relative;
box-shadow:var(--shadow-lg);
border-radius: var(--radius);
/* border: .1px solid #ccc; */
/* overflow: hidden; */
/* width: 100%;
margin: 0 auto; */
}

.fbtemplate2 {
  box-shadow: none;
}
.wrapper, .wrapper_full {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.wrapper_full {
max-width: 1920px;
}

.masonry {
  display: flex;
  height: 100%;
  gap: 1rem;
  margin-top: 3rem;
 
  a {
    
        text-decoration: none;
      }
  }




.card.card-connect {
    height: 100%;
    background-image: url(https://placehold.co/630x350/png);
    background-size: cover;
    aspect-ratio: 1.8;
    color: #fff;
    z-index: 0;
    width: 100%;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* flex: 1; */
  
    
  }

  .card.card-connect a {
      transition: opacity 0.3s ease;
      background-size: cover;
      text-decoration: none;

      h3 a {
        text-decoration: none;
      }

      span a {
        text-decoration: none;
      }

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

.card.card-connect.over:hover:after {
  background: var(--clr-primary);
  border-radius: var(--radius);
  opacity: 1;
  
}
         
.card.card-connect.over:after {   
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top,hsla(0, 0%, 0%, 1) 25%,transparent 80%);
    /* border-radius: 18px; */
    z-index: -1;
    border-radius: var(--radius);
    opacity: 1;
  }

  .card.card-connect {
  position: relative; /* required for :after overlay */
  overflow: hidden;
  height: 100%;
  background-size: cover;
  aspect-ratio: 1.8;
  color: #fff;
  border-radius: var(--radius);
}

/* BASE overlay — transparent at rest */
.card.card-connect.over::after {
  content: '';
  position: absolute;
  inset: 0;
  /* background: var(--clr-primary); */
  opacity: 0;                     /* start invisible */
  transition: opacity 0.3s ease;  /* fade animation */
  border-radius: inherit;
  z-index: 1;                     /* above bg, below text */
   /* background: linear-gradient(to bottom,hsla(0, 0%, 0%, .459) 25%,transparent 80%); */
    /* border-radius: 18px; */
    z-index: -1;
}

  .card.card-connect.over:hover::after {
  opacity: 1;   /* any strength you want */
}

  .card.card-connect * {
  position: relative;
  z-index: 2;
}

.card.card-connect.over::before {
  content: '';
  position: absolute;
  opacity: 1;                     /* start invisible */
   background: linear-gradient(to bottom,hsla(0, 4%, 11%, 0.7) 5%,transparent 100%);
    /* border-radius: 18px; */
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}



.col1_masonry {
  flex:1;
  /* background-color: dodgerblue; */
  border-radius: var(--radius);
  
}

.masonry_content {
  /* min-height: fit-content; */
  height: 100%;
  
  
}

.masonry_content a {

  display: flex;
  padding: 1rem 2rem;
}

h3.masonry_flex_content, span.masonry_flex_content {
  font-style: normal;
  padding: 0;
}

h3.masonry_flex_content {

  font-style: normal;
  padding-top: .5rem;
}

span.masonry_flex_content {

  font-size: 1.2rem;
  font-weight: 400;
}



.col2_masonry {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

.col1_masonry img, .col2_top img, .col2_bottom img {
  border-radius: var(--radius);
}

.col2_top, .col2_bottom {
  flex: 1;
  border-radius: var(--radius);
}



.fbtemplate_col, .fbtemplate_col2 {
  width: clamp(200px, 300px, 100%);
flex-grow: 1;
flex-shrink: 1;
/* overflow: hidden; */
position: relative;

 border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
 
}

.fbtemplate_col div > blockquote {
  padding-block: auto;
}

.flexContainer_col, .heroFlex_col, .newsContainer_col, .fbContainer_col {
width: clamp(200px, 300px, 100%);
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
position: relative;

}

.colimg4 {
  border-radius: var(--radius);
  
}

.colimg2 {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
height: 100%;
/* min-height: 400px; */
width: 100%;
object-fit: cover;
overflow: hidden;
  
}

.secpad3 {
  padding: 3rem;
  
}

.secpad4 {
  padding: 4rem;
}


.flexboxContainer, .fbContainer {
justify-content: center;
/* gap: clamp(0px, 2rem, 1.1rem); */
gap: 3rem;
max-width: 100%;
align-items: flex-start;
/* background-color: red; */

}



.fbContainer_col {
  border-top: .4rem solid var(--clr-primary);
  /* background-color: red; */
  color: var(--clr-white);
  padding-top: 1rem;
  margin-top: 1rem;


  h2 {
    text-shadow: 2px 2px 0 var(--clr-sec),5px 5px 0 var(--clr-primary);
    font-size:clamp(2.25rem, 60px, 3.815rem);
    margin-top: 1rem;
    padding-bottom: 0;
  }

  p {
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 0;
    padding-bottom: 0;
  }
}

.nogap {
  gap: 0;
  position: relative;
  z-index: 1;
  
}

.fbContainer .nogap {
 /* max-height: 400px;
 height: 400px; */
 overflow: hidden;
 position: relative;
 z-index: 1;
 
}


.fbtemplate_col:nth-child(2) {
  padding: 0 2rem;
  background-color: var(--clr-light);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  position: relative;
  

  display: flex;
    flex-direction: column;
    justify-content: center;

  
}

.colcontent, .fbtemplate_col, .fbtemplate_col2 {
    padding-top: 0;
    margin-top: 0;

  }

  .noborder {
    border:none;
  }

.sec {
  /* background-color:var(--clr-sec); */
  background-image: linear-gradient(
    to top,
    #D3AC86 3%, var(--clr-sec)
  );
}

.white {
  position: relative;
  /* background-color: var(--clr-white); */

  z-index: 1;
  
   h2 {
      color: var(--clr-black);
      text-shadow: none;
      margin-top: 0;
    }

    p {
      color: var(--clr-black);
    }
  
}

.white blockquote p{
  color: #555;
  font-weight: 500;
  font-size: clamp(1.3rem, 24px, 2.1rem);
  margin-top: 3.5rem;

}

.white cite {
  color: #555;
  font-weight: 700;
  font-size: clamp(1.3rem, 27px, 1.8rem);
  margin-left: 0px;
}

.white blockquote::after {
  position: absolute;
  z-index: 6;
  background-color: var(--clr-sec);
  height: 3px;
  width: 130px;
  content: '';
  display: block;
  
  
}

.fbtemplate_col:nth-child(2)::before {
position: absolute;
content: '"';
height:150px;
width: 150px;
/* background-color: red; */
font-size: 10rem;
font-weight: 700;

top: -80px;
left: 30px;
color: var(--clr-primary);
z-index:6;
}

.fbtemplate_col2, .fbtemplate_col2 .colimg2 {
  border-radius: var(--radius);
  
}

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

.fbContainer_col + .fbContainer_col {
/* margin-left: .5rem; */
}


.heroFlex_col img {
/* flex: 1 1 300px; */
height: 100%;
object-fit: cover;
  /* overflow: hidden; */
}

.heroFlex_col {
position: relative;
overflow: visible;

}

.heroFlex_col:nth-child(1) {
  flex: 3 1 0;
}

.heroContainer .flexContainer  {
  flex: 1 1 0;
}

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

.flexContainer_col + .flexContainer_col {
/* margin-left: .5rem; */
}

.newsContainer_col p, .flexContainer_col p {
position: relative;
 width: 100%; /* Adjust as needed */
 overflow: hidden;
/* white-space: nowrap;*/
 text-overflow: ellipsis;
max-height: 10em;

}

.newsContainer_col p::after, .flexContainer_col p::after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 100%; /* Width of the fade effect */
 height: 100%;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.imgWrap {
    width: 100%;
    height: 100%;                  
    overflow: hidden;
  }

.imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;              
    display: block;
  }

.sect_events, .sect_stats {
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: var(--clr-light);
}

.sect_events p {
  font-size: 1.2rem;
}

.sect_events {
  margin-top: -1.3rem;
}

.sect_stats {
  /* background-color: var(--clr-primary); */
  background-image: linear-gradient(
    to bottom,
    #420079 3%, var(--clr-primary)
  );
}

.sect_stats > .wrapper > .sect_container > h2 {
    color: var(--clr-white);
    margin-top:-1.3rem;
  }

.sect_container {
      width: 100%;
      max-width: 1200px;
      margin: 2rem auto;
      /* padding: 0 1rem; */

      h2 {font-weight: 400;margin-right: auto;}
    }

.sect_flex_container {
      display: flex;
      flex-wrap: wrap; 
      justify-content: space-evenly;
        
      gap: 1rem;                  
    }

.sect_flex_col {
      flex: 1 1 calc(50% - 1rem);
      min-width: 280px;
    background-color: var(--clr-light);
    border-radius: var(--radius);
    
}

.sect_flex_content {
      background: #fff;
      
      border-radius: 0.75rem;
      box-shadow: 0 2px 28px rgba(0,0,0,.01);
      height: 100%;                 /* equal height in a row */
      display: flex;

      flex-direction: column;
      
      /* flex-direction: row; */

      h2 {color: var(--clr-primary); font-weight: 700; font-size: 1.6rem;padding-bottom: 0;}
      h3 {color: #270047; font-size: 1rem; font-weight: 600;padding: 0;}
      h4 {font-size: 1rem;font-weight: 400;padding: 0;margin:0;display:inline;}
    }

.sect_flex_content > div {
  flex: 3 1 0;
  padding: 1rem;
}

    .sect_flex_content img {
      /* width: 100px; */
      /* height: 100%; */
      object-fit: cover;
      border-radius: 0.5rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 1rem;
    }

    /* .sect_flex_content h2 { margin:0 0 .4rem; font-size:1.25rem; }
    .sect_flex_content h3 { margin:0 0 .6rem; color:#555; font-weight:500; }
    .sect_flex_content h4 { display:inline; margin:0; font-weight:600; }
    .sect_flex_content h4 + h4::before { content:" • "; margin:0 .4rem; } */

    .sect_flex_content a {
      align-self: center;
      /* margin-right:auto; */
      padding: 1rem;
    }
    /* .sect_flex_content a {
      margin-top: auto;           
      align-self: flex-start;
      background:#0066cc;
      color:#fff;
      text-decoration:none;
      padding:.5rem 1rem;
      border-radius:.4rem;
      font-weight:600;
    }
    .sect_flex_content a:hover { background:#004999; } */

    .overlap_section {
      --overlap-size: 350px;
      /* background-color: red; */
      background-image: 
      linear-gradient(
        to bottom,
        var(--clr-light) var(--overlap-size),
        var(--clr-primary) var(--overlap-size)
      );
    }

    .top {
      /* position: relative;
      z-index: 1; */
    }
    .bottom {
      /* background-color: dodgerblue; */
      /* padding-block: 4rem; */
    }

    .sect_flex_content > div:first-of-type {
      align-content: center;
    }
   
footer {
width: 100%;
margin: 0 auto;
/* background-color: var(--clr-primary); */
background-image: linear-gradient(
    to bottom,
    #420079 3%, var(--clr-primary)
  );
/* padding: 4rem; */
display: flex;
flex-direction: column;
/* justify-content: center; */
/* align-content: flex-end; */
border-top: 3rem solid var(--clr-sec);


}

 .footer_nav {
    display: flex;
    /* padding: 4rem; */
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    /* width: 100%; */
    gap: 2rem;
    
    position: relative;
    z-index: 1;
    
    
  }

  
  .footer_col {
    /* background-color: dodgerblue; */
    /* flex-grow: 1;*/
    /* border: 2px solid peru; */
    flex-shrink: 1; 
    max-width: 100%;
    width: clamp(150px, 200px, 100%);
    padding-bottom: 2rem;


    h3 {
      font-size: 1.3rem;
      margin-bottom: -20px;
      color: var(--clr-white);
      margin-top: 3.3rem;
    }

    ul {
      margin-top: .5rem;
    }
    li a {
      font-size: 1.2rem;
      color: var(--clr-white);
      margin-bottom: .5rem;

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

    p {
      color: var(--clr-white)
    }
}

.footer_col + .footer_col {

  padding-right: 1rem;
}

.footer_col:last-of-type {
  /* background-color: #400074; */
  background-color: #390069;
  padding: 2rem;
  margin-top: -1.5rem;
  /* border-top: .5rem solid var(--clr-sec); */
  /* width: 450px; */
  min-width: 100px;
  flex-grow: 1;
  flex-shrink: 0;
  /* margin-right:-1rem; */
  margin-left: auto;
  position: relative;
  z-index: 6;
  box-shadow:var(--shadow);

  
}


.footer_col:last-of-type .brand {
    max-width: 250px;
    width: 90%;
    /* display: inline; */
    /* margin: 0 auto; */
    margin-top: -1rem;
    margin-bottom: 2rem;;
    margin-left: -1.5rem;
  }

.copyright {
  background-color: #400074;
  color: var(--clr-white);
  /* display: flex; */
  /* justify-content: center; */
  
  /* margin-block:auto; */
  /* width: 100%; */
  text-align: center;
  font-size: 1rem;
  padding-block: 1rem;

  h3 {
      font-size: 1.1rem;
      margin-bottom: -20px;
      color: var(--clr-white);
    }

  

    p {
      color: var(--clr-white);
    }
}

address {
  color: var(--clr-white);
  font-style: normal;
  
  a {
      /* font-size: 1rem; */
      color: var(--clr-white);
      font-style: normal;
    }
  }