/* Removes default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Setting up global variables*/
:root {
    /* color variables*/
    --navy: #1B2B3E; /* navy blue text and background color */
    --background-white: #F9F8F3; /*off-white cream for background */
    --text-white: #FEFAE8; /* "white text color for use on dark backgrounds */

    /* spacing variables */
    --page-horizontal-padding: 8.33%;
    --macro-gaps: 6rem;
    --group-gaps: 2.5rem;
    --content-gaps: 1.5rem;

    /* styling variables */
    --corner-radii: .5rem;
}


/* Sets the default text and background settings for the entire page */
body {
    background-color: var(--background-white); /* Cream background color */
    font-family: sans-serif;
    margin:0;
    display:flex;
    flex-direction: column;
    min-height:100vh;
}

main{
    display: flex;
    flex-direction: column;
    gap: var(--macro-gaps);
    padding: 0 var(--page-horizontal-padding);
    margin-top: var(--macro-gaps);
    margin-bottom: var(--macro-gaps);
    flex:1;
}

h1 {
    font-size: clamp(2.5rem, 3.5rem, 4.5rem); /* Responsive font size */
    color: var(--navy); /* Dark blue text color */
    font-weight: 800;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 2rem, 2.5rem); /* Responsive font size */
    color: var(--navy); /* Dark blue text color */
    font-weight: bold;
    line-height: 1.2;
}

h3 {
    font-size: clamp(.5rem, 1.5rem, 2.5rem); /* Responsive font size */
    color: var(--navy); /* Dark blue text color */
    font-weight: 600;
    line-height: 1.3;
}

p {
    font-size: clamp(.125rem, 1.125rem, 2.125rem); /* Responsive font size */
    color: var(--navy); /* Dark blue text color */
    line-height: 1.5;
    font-weight: normal;
    max-width: 75ch; 
}

li {
    font-size: clamp(.125rem, 1.125rem, 2.125rem); /* Responsive font size */
    color: var(--navy); /* Dark blue text color */
    line-height: 1.5;
    font-weight: normal;
}

a {
    text-decoration: none; /* Removes underline from links */
    font-weight: normal;
    font-size: clamp(.125rem, 1.125rem, 2.125rem);
    line-height: 1.5rem;
    color: inherit; /* Inherits the color from the parent element */
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--corner-radii);
}

.column{
    display:flex;
    flex-direction:column;
    gap:var(--content-gaps);
}

.row {
    display: flex;
    align-items: center;
    gap: var(--content-gaps)
}

/*! Navbar Styling */
.navbar {
    position: sticky; /* Sticks the navbar to the top of the viewport */
    top: 0; /* Sticks the navbar to the top of the viewport */
    z-index: 1000; /* Ensures the navbar is above other content */

    display: flex;
    justify-content: flex-end; /* Aligns the buttons to the right */
    align-items: center;
    padding: var(--content-gaps) var(--page-horizontal-padding);
    background-color: var(--navy); /* Dark blue background color */
}

.logo img {
    position: absolute;
    left: 8.33%; /* Aligns the logo to the left */
    top: 50%; /* Vertically centers the logo */
    transform: translateY(-50%); /* Adjusts for the logo's height */
    height: clamp(2rem, 5vw, 4.5rem); /* Adjust to match design */
    width: auto;
}

.nav-links {
    display: flex; /* aligns the buttons side-by-side */
    gap: var(--content-gaps); /* space between the buttons */
    align-items: center;
}

.nav-links > a {
    color: var(--text-white); /* Text White Color */
}

.dropdown {
    position: relative; /* Needed for the dropdown content positioning */
}

.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute; /* Positions the dropdown content relative to the dropdown button */
    top: 100%; /* Positions the dropdown content below the button */
    right: 0; /* Aligns the dropdown content to the right */
    margin-top: .5rem; /* Adds a small gap between the button and the dropdown content */
    width: fit-content;
    height: fit-content;

    background-color: var(--background-white); /* Cream background color */
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Adds a shadow for depth */
    z-index: 2000; /* Ensures the dropdown content is above other content */
    border-radius: var(--corner-radii); /* Rounds the corners of the dropdown */
    border: .125rem solid var(--navy); /* Dark blue border */

    flex-direction: column; /* Stacks the links vertically */
    overflow: hidden;
    gap: var(--content-gaps); /* Space between the links */
    padding: var(--content-gaps) 2.5rem; /* Adds padding inside the dropdown */

    transition: opacity .3s ease-in, display .3s allow-discrete;
    opacity: 0;
}

.dropdown.active .dropdown-content {
    display: flex; /* Shows the dropdown content when the button is clicked */
    opacity: 1;
    
}

@starting-style{
    .dropdown.active .dropdown-content {
        opacity: 0;
    }
}

.dropdown-content a {
    text-align: left; /* Aligns the text to the left */
    color: var(--navy); /* Dark blue text color */
    white-space: nowrap;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: .5rem; /* Space between the text and the arrow */
    background-color: var(--background-white); /* Cream background color */
    border: 1px solid var(--navy); /* Dark blue border */
    padding: .5rem 1rem;
    color: var(--navy); /* Text Navy Color */
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.5rem;
    cursor: pointer;
    border-radius: var(--corner-radii);
}

.dropdown-arrow{
    height: .75rem;
    width: auto;
    transition: transform .3s ease-in; /*if transition is changing, don't do it insta*/
}

.dropdown.active .dropdown-arrow{
    transform: rotate(180deg); /*rotates the arrow around when the state on the button is toggeled to active*/
}


/*!--Homepage Styling--*/
/* Hero Section Styling */
.hero {
    min-height: calc(100vh - 5.5rem); /* Ensures the hero section takes up at least the full viewport height minus the navbar height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--content-gaps);
    max-width: 100%;
}

.hero p {
    max-width: 40%; /* Limits the width of the paragraph */
}

/* Projects Section Styling */
.projects {
    display: flex;
    flex-wrap: wrap; /* Allows the project cards to wrap to the next line */
    gap: var(--group-gaps) var(--group-gaps); /* Space between project cards */
    justify-content: center; /* Centers the project cards */
}

.project-card {
    width: calc(50% - 2.5rem); /* Responsive width */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
}

.project-card img {
    width: 100%; /* Makes the image take the full width of the card */
    height: auto; /* Maintains the aspect ratio */
    border-radius: var(--corner-radii); /* adds rounded corners to the image */
}


.project-card h2 {
    margin-top: calc(var(--content-gaps) - .5rem); /* should always subtract the gap from .project-card */
}

/* Skills Section Styling */
.skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--group-gaps); /* Space between the title and the skills list */
}

.skills-list {
    display: grid; /* Grid keeps the labels and actual skills in line with each other when the skills wrap */
    gap: var(--content-gaps) var(--content-gaps);
    justify-content: center; /* Centers the content vertically */
    grid-template-columns: auto auto; /* Two columns: one for the category and one for the skills */
    max-width: 60%; /* Limits the width of the skills list */
    align-items:start;
}

.skills-list div.skill-type {
    text-align: right;
}

.skill-type p {
    font-weight: bold;
}

.skills-list div.skills-specific {
    text-align: left;
}

/*! Footer Styling */
.site-footer {
    display:flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--navy); /* Dark blue background color */
    padding: var(--group-gaps) 15% calc(var(--group-gaps)); /* Padding to give the banner veritcal thickness and center the footer content */
}

.site-footer .row{
    justify-content: space-between; /* Evenly distributes the footer content */
    align-items: center;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; /* Space between the items in each column */
}

.footer-column p, .footer-column a {
    color: var(--text-white); /* White text color */
}

.copywritten {
    margin-top: var(--macro-gaps);
    align-self: center;
    color: #86857c;
    font-weight: lighter;
}

/*!Resume Page Styling */
.resume-display {
    display: flex;
    flex-direction:column;
    gap: var(--content-gaps);
    align-items: center;
}

.download-button {
    display: relative;
    background-color: var(--navy); /* Dark blue background color */
    color: var(--text-white); /* White text color */
    padding: .75rem 1rem; /* Padding inside the button */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
    border: none; /* Removes default button border */
    cursor: pointer; /* Changes cursor to pointer on hover */
    width: fit-content; /* Button width adjusts to content */
    border-radius: var(--corner-radii); /* Rounds the corners of the button */
    transform: translateX(calc(-32.5rem + 50%)); /* 32.5rem is half the width of the image, keeps the button at the top-left corner of the resume */
}

.resume-image{
    display: block; /* Ensures the image is treated as a block element */
    width: 100%; /* Makes the image take the full width of the container - padding*/
    width: 65rem;
    height: auto; /* Maintains the aspect ratio */
    border: .25rem solid var(--navy); /*slaps a border around the image*/
    border-radius: var(--corner-radii); /* Rounds the corners of the image */
}

/*! Works main pages styling */
/* Works Hero styling*/
.works-main{
    margin-top: var(--content-gaps);
}

.sidekick-container {
    display:flex;
    flex-direction: row;
    align-content:flex-start;
    width: 100%;
    margin-bottom: -4.5rem;
}

.sidekick {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

p.tiny{
    font-size: .75rem; /* Responsive font size */
    font-style: italic; /* Italicizes the text */
    align-self: flex-end;
}

.showcase-project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #AFCBE6; /* Light backsplash color */
    min-height: 0;
    height: 65vh;

    /* breaking out of page padding to create "highlight" blue banner */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    
    padding: var(--group-gaps) var(--page-horizontal-padding); /*needed because the container is breaking out of this padding */
}

.card-link {
    display:flex;
    justify-content: center;
    min-height:0;
    height:100%;
    width:100%;
}

.showcase-content {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: var(--content-gaps);
    min-height:0;
    height:100%;
}

.showcase-image{
    flex: 1;
    max-height: 100%;
    object-fit: cover;
    min-height:0;
}

.showcase-name-info{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    width: 0;
    min-width: 100%;
}

.showcase-name-info h2, .showcase-name-info p {
    text-align: center;
    width: 0;
    min-width: 100%;
}



/* Rest of works styling */
.additional-projects{
    display: flex;
    flex-direction: column;
    gap: var(--group-gaps);
}

.horizontal-project-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--content-gaps); /* Space between the image and the text */
    width: 100%;
    min-width: 0;
}

.works-image{
    height: auto;
    border-radius: var(--corner-radii);
    max-width: 35vw;
}

.hcard-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.hcard-text p{
    max-width: 60%;
}

.link-container{
    display: flex;
    justify-content: flex-end; /*aligns the link to the right edge of the page*/
    width: 100%;
}

a.link-cta{
    text-decoration: none; /* Underlines the text */
    font-weight: 600;
    font-size: 1.5rem;
}

/*!about me page styling*/
.about-me-container{
    display: grid; /*using a grid instead of a horizontal flexbox purely to make it easier to control column sizes*/
    grid-template-columns: 3fr 1fr; /*left column:right column ratio, basically*/
    gap: var(--group-gaps); /*I used huge gaps in the design file, not sure why I did that, adjust if needed, goes (Xgap,Ygap)*/
    margin: var(--macro-gaps); /*top and bottom spacing*/
    padding: 0 var(--page-horizontal-padding); /*padding to center content, matches other pages*/
    align-items: start;
    max-width: 100%;
}

.about-me-main{
    display:flex; 
    flex-direction: column; 
    gap: var(--group-gaps); /*because all objects are inside big columns, cannot set vertical gap in the grid*/
    min-width: 0;
}

.about-me-sidebar{
    display:flex; 
    flex-direction: column; 
    gap: var(--group-gaps); /*because all objects are inside big columns, cannot set vertical gap in the grid*/
    min-width: 0;
}

p.design-quote{
    text-align: center;
    font-style: italic;
}

/* Case Study Styling */
ol {
    list-style-type: decimal;
    padding-left: 2.5rem;
    gap: var(--group-gaps);
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: .5rem;
}

li::marker {
    font-weight: bold;
}

li:last-child {
    margin-bottom:0;
}

.right-pic {
    flex-direction:row;
}

.left-pic {
    flex-direction:row-reverse;
}

.text-wrapper {
    flex:6;
    min-width:0;
    flex-basis:0;
}

.text-wrapper p {
    max-width: 100%;
}

.text-wrapper .column {
    gap: 1rem;
}

header.CSHead {
    display:flex;
    flex-direction:column;
    gap:var(--content-gaps);
}

.row.CSHead {
    max-width: 60%;
    justify-content: space-between;
    align-items: flex-start;
}

.CSHead a {
    text-decoration: underline;
}

.CSHead li{
    margin-bottom: 1rem;
}

.FinishedCS-image {
    width:100%;
    aspect-ratio:21/9;
    object-fit: cover;
}

.image-wrapper {
    min-width:0;
    flex-basis:0;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    display:block;
    min-width:0;
    flex-basis: 0;
}

.more {
    flex:9;
}

.half {
    flex:6;
}

.less {
    flex:3;
}


/* this is all for fun stuff I want to leave for much later
.whimsy-container{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.whimsy-butt{
    align-items: center;
    text-align: left;
    width: fit-content;
    padding: .5rem 1rem;
    border-radius: 2rem;
    color: var(--text-white);
    background-color: var(--navy);
    border: var(--background-white) none 5px; /*funky button*/ /*
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: normal;
    /*text-decoration-line: underline;
    text-decoration-style: wavy; could be fun to mess with later, maybe animate on hover*/
/*}