/* Angel Schoeneman */
/* 2025 Portfolio */
/* ==================================================
    Imports
================================================== */
    @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* ==================================================
    Base / Reset Overrides
================================================== */
html { scroll-behavior: smooth; }
body {
    font-family: 'Lexend','Helvetica Neue', sans-serif;
    line-height: 1.6;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color:#111111;
    }

.fade-on-scroll {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
.fade-on-scroll.visible {
    opacity: 1; 
    transform: translateY(0);
    }
/* ==================================================
Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend','Helvetica Neue', sans-serif;
    }
    
h1, h2, h3 {
    font-weight: 700;
    margin-bottom: 1rem !important;
    }
    
p {
    font-family: 'Lexend','Helvetica Neue', sans-serif;
    color: #111111;
    /* margin-bottom: 1rem !important; */
    font-weight: 300;
    }
ol,ul,li {
    font-family: 'Lexend','Helvetica Neue', sans-serif;
}
.text-overview {
    text-align:left;
    }
.font-sans,.type-sans {
    font-family: 'Lexend','Helvetica Neue', sans-serif !important;
    font-weight:300;
    }
.symbol-sans {
    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Lexend','Helvetica Neue', sans-serif;
    font-weight: bold;
    }
.truncate-multi-line {
    overflow: hidden;        /* Hides overflowing content */
    display: -webkit-box;    /* Enables the use of -webkit-line-clamp */
    -webkit-line-clamp: 3;   /* Truncates text after 3 lines */
    -webkit-box-orient: vertical; /* Specifies the layout orientation */
    }
.font-bold {
    font-weight: 500 !important;
}
.font-xbold {
    font-weight: 700;
}

/* ==================================================
Colors
================================================== */
.color-dark {
    color: #111111;
    }
.color-darkblue {
    color: #586173;
    }
.color-blue {
    color: #8A9DA6;
    }
.color-lightblue {
    color: #BBD9D9;
    }
    
.color-darkcoral {
    color: #F25D50;
    }
.color-coral {
    color: #F28372;
    }
.color-gray {
    color:#404041;
    }
.text-link-color {
    color:#166BB5;
}

/* ==================================================
Projects Side Nav
================================================== */
.sticky-nav {
    position: sticky;
    top: 1rem;
  }
.nav-link {
    transition: color 0.3s, transform 0.2s;
    color:#166BB5;;
    }

.nav-link:hover {
    transform: translateX(4px);
    color: #115998; 
    }
.nav-link.active {
    font-weight: 700;
    color: #115998; 
    }
/* ==================================================
Utility Overrides
================================================== */
.custom-button {
    background: linear-gradient(90deg, #166BB5, #166BB5);
    color: white;
    font-weight:500;
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
    transition: transform 0.3s, box-shadow 0.3s;
    }
  
.custom-button:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #115998, #115998);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
.custom-button-light {
    background: white;
    color:#115998;
    font-weight:500;
    transition: transform 0.3s, box-shadow 0.3s;
    }
.custom-button-light:hover {
    transform: scale(1.05);
    color:#166BB5;
    background: #fafafa;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
.custom-button-highlight {
    background: #F25D50;
    color:#fff;
    font-weight:500;
    transition: transform 0.3s, box-shadow 0.3s;
    }
.custom-button-highlight:hover {
    transform: scale(1.05);
    color:#fff;
    background: #c84539;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
.filter-btn {
    padding: .25rem 1rem;
    border-radius: 0.25rem;
    height: 40px;
    background-color: rgb(229 231 235) !important;
}
.filter-btn-selected {
    background-color: rgb(88 97 115) !important;
    color:#ffffff;
}
/* Bounce Animation */
@keyframes bounce-twice {
    0% {
    transform: translateY(0);
    }
    25% {
    transform: translateY(-8px);   /* smaller, smoother lift */
    }
    45% {
    transform: translateY(0);
    }
    65% {
    transform: translateY(-4px);   /* softer second bounce */
    }
    82% {
    transform: translateY(0);
    }
    100% {
    transform: translateY(0);
    }
    }
    .bounce-twice {
    animation: bounce-twice 2s ease-out 1;
    animation-delay: 0.25s; /* slight delay */
    }
/* Fade In Animation  */
.fade-in {
    opacity: 0;
    /* transform: translateY(5px); */
    animation: fadeIn 1s ease-out forwards;
    }
    @keyframes fadeIn {
    to {
    opacity: 1;
    /* transform: translateY(0); */
    }
    }
.fade-in-up {
    opacity: 0;
    transform: translateY(5px);
    animation: fadeInUp 1s ease-out forwards;
    }
    @keyframes fadeInUp {
    to {
    opacity: 1;
    transform: translateY(0);
    }
    }
/* ==================================================
    Navigation
    ================================================== */
#navigation {
    color:rgb(17, 24, 39);
}
#navigation a{
    color:rgb(55 65 81);
}
#navigation a:hover{
    color:#166BB5;
}
.font-brand-AS strong {
    color: #586173;
    font-weight: 500;
    }
.font-brand-AS{
    color:rgb(17, 24, 39) !important;
}
.nav-border {
    background: linear-gradient(-60deg, #98B7DA, #ABD0E6, #BBD9D9);
    height:4px;
}
/* ==================================================
    Sections / Layouts
    ================================================== */
/* Hero */
.hero-image {
    background-size: cover;
    background-position: top center;
    min-height: 50vh;
    width: 100%;
    height: 100%;
    }
.hero-text {
    color:#202020;
    }
.hero-cta {
    font-weight:500;
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
    transition: transform 0.3s, box-shadow 0.3s;
    color:#F28372;
    background-color:white;
    font-weight:500;
    font-family: 'Lexend','Helvetica Neue', sans-serif;
    }
.hero-cta:hover {
    color:#F25D50;
    background-color:#fafafa;
    -tw-bg-opacity: 1;
    background-color: #fcfcfc / var(--tw-bg-opacity, 1));
    }
/* Header */
.header-image {
    background-size: cover;
    background-position: center;
    background: linear-gradient(-60deg, #98B7DA, #ABD0E6, #BBD9D9);
    height: 20vh;
    width: 100%;
    }
/* Animated Hero */
.hero-animated-bg {
    /* background: linear-gradient(-60deg, #586173, #BBD9D9); */
    background: linear-gradient(-60deg, #98B7DA, #ABD0E6, #BBD9D9);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	height: 60vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/* Alternate section backgrounds */
.section-alt {
    background-color: #f0f4ff;
    }

/* Key insights */
.key-highlight {
    color:#111111;
    padding: 1.5rem;
    background-color:  rgb(249 250 251);
    border-radius: 0.75rem;
}
.key-highlight strong {
    color:#586173;
}
.key-highlight p {
    margin-top:1rem;
}
/* Other Sections*/
#contact {
    background-color: #BBD9D9;
    }
#cta {
    background: linear-gradient(-60deg, #98B7DA, #ABD0E6, #BBD9D9);
    }
#experience h3{
    margin-bottom: 0rem !important;
    margin-top: .5rem;
    }

/* ==================================================
    Project Page
    ================================================== */
#project-hero {
    min-height: 60vh;
    background: rgb(249 250 251);
    background-image: url('assets/design/bg_grid.png');
    background-repeat: repeat;
    width: 100%;
    border-bottom: #8A9DA6;
    border-bottom: red;
    border-bottom-width: 1px;
}  
#project-hero p, #project-content p{
    margin-bottom:1rem !important;
}
#project-hero li, #project-content li {
    margin-bottom: .5rem;
}
/* ==================================================
    Project Cards
    ================================================== */
.project-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 0.75rem;
    overflow: hidden;
    }
  
.project-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    @media (min-width: 768px) {
        .project-item .block .project-copy {
            min-height:170px;
            }}
.project-item .project-copy p{
    overflow: hidden;        /* Hides overflowing content */
    display: -webkit-box;    /* Enables the use of -webkit-line-clamp */
    -webkit-line-clamp: 3;   /* Truncates text after 3 lines */
    -webkit-box-orient: vertical; /* Specifies the layout orientation */
}
.project-image {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-size: cover;
    background-position: top center;
}
 /* ==================================================
    Backgrounds and Patterns
 ================================================== */
.bg-default {
    background-color: rgb(249 250 251);
    }
.pattern-grid-bg {
    background: rgb(249 250 251);
    background-image: url('assets/design/bg_grid.png');
    background-repeat: repeat;
    }
.pattern-topo-bg {
    background: rgb(249 250 251);
    background-image: url('assets/design/bg_topography.png');
    background-repeat: repeat;
    }
/* ==================================================
    Back to Top Button
================================================== */
#backToTop {
    transition: opacity 0.3s, transform 0.3s;
    }
/* ==================================================
    Footer
================================================== */
footer {
    color: rgb(55 65 81);
    background-color: rgb(243 244 246);
    }
footer a {
    transition: color 0.3s;
    }

footer a:hover {
    color: #166BB5;
    }
  
/* ==================================================
    Media Queries / Responsive Overrides
    ================================================== */
  @media (max-width: 768px) {
        .project-card {
        margin-bottom: 1.5rem;
        }
    }
  
/* ==================================================
     Optional Utilities
     ================================================== */
/* Smooth scroll */
html {
scroll-behavior: smooth;
  }
/* Margins  */
p.mb-z0 {
    margin-bottom: 0px !important;
    }