/* RESET */


/* 

My name is Linda Estep and this is the css for my portfolio, which will become part of my business plan for my bigger project. This is what I will use to showcase myself, my work, and my art. 

I have had experience with web development, and computer programming, but I have not designed an HTML/CSS website 
in a very long time. 

It has been amazing getting back into the code, learning all of the different properties that HTML5 is using and 
getting accustomed to those and also diving in a learning so much more of what css can do. 

I have also never used vscode before and it makes coding so much easier to do. 

I appreciate all of the things that the Advanced Web Dev class has introduce me to and motivated me to explore more and learn more. 

I had to go back a few times to get rid of the horizontal scroll on mobile, for some reason one for my grids was blowing out the side.

Also had some issues doing the 2 columns with one side being a photo and the other being a photo, things just were not lining up the
way that I wanted them to. 

Also, the banner at the bottom that has the rainbow effect. When I first started playing with that, the image of the banner stayed in 
place but the entire rainbow box spun around like a clock! 

I used the infinite property to make it move continuously.

I also swapped images out for mobile because a leaderboard can never look good on mobile.

*/


/* Formatting page margins and padding */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* setting formats for body and container */
body {
    font-family: "Roboto", sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Prevent horizontal overflow on all screens */
body, html {
    overflow-x: hidden;
}

/* formatting the container that some of the web content sits in */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}


/* List formatting with proper indent and spacing */
ul.space {
    list-style: disc;       /* show bullets */
    padding-left: 40px;     /* indent from left */
    margin-bottom: 24px;    /* space after the list */
}

ul.space li {
    margin-bottom: 12px;    /* space between list items */
}

/* Keep paragraph spacing consistent */
p.space {
    margin-bottom: 24px;
}

h3.space {
    margin-bottom: 24px;
}

/* hero section background formatting */
.hero-image {
    width: 100%;
    height: 300px;
    background: url('./images/header-image.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
}

.hero-image::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
}

/* hero content positioning */
.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* logo and text layout on hero image*/
.hero-logo-text {
    display: flex;
    align-items: center;
    gap: 20px; /* space between logo and text */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
}

/* logo sizing on hero image */
.hero-logo {
    width: 125px;
    height: auto;
}

/* text styling */
.hero-text h2 {
    font-size: 2.5rem;
    margin: 0;
}
.hero-text p {
    font-size: 1.2rem;
    margin: 0.3rem 0 0 0;
}

/* responsive adjustments */
@media (max-width: 768px) {
    .hero-logo-text {
        flex-direction: column;
        text-align: center;
    }
    .hero-logo {
        width: 60px;
    }
    .hero-text h2 {
        font-size: 2rem;
    }
    .hero-text p {
        font-size: 1rem;
    }
}



/* formatting the navigation*/
.main-nav {
    background-color: #222;
    position: relative;
    
}
.nav-links {
    list-style: none;
    display: flex; /* desktop horizontal */
    justify-content: center;
    padding: 10px 0;
}
.nav-links li { margin: 0 15px; }
.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.nav-links a:hover { text-decoration: underline; }

/* formatting the hamburger menu for mobile */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    padding: 10px 0;
    cursor: pointer;
    z-index: 1000;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 4px 0;
    background-color: #fff;
    border-radius: 2px;
}

/* formatting the main content */
.main-content section {
    margin: 40px 0;
}
.left-align-image {
    float: left;
    margin-right: 20px;
    max-width: 300px;
}
.services {
    font-weight: bold;
    margin-top: 20px;
}

/* formatting banner sizes based on device usage */
.leaderboard-banner {
    text-align: center;
    margin: 20px auto;
}
.desktop-banner {
    width: 798px;
    height: 90px;
    border: 4px solid yellow;
    display: block;
    margin: 0 auto;
}
.mobile-banner {
    display: none;
    width: 300px;
    height: 300px;
    border: 4px solid yellow;
    margin: 0 auto;
}



/* formatting nav to be responsive */
@media (max-width: 768px) {
    /* Hamburger visible */
    .hamburger { display: flex; }

    /* Mobile nav menu hidden by default */
    .nav-links {
        display: none !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: #222;
        position: absolute;
        top: 50px;
        left: 0;
        z-index: 999;
    }

    /* Show mobile menu when .show class */
    .nav-links.show {
        display: flex !important;
    }

    /* hero adjustments */
    .hero-content h2 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }

    /* image adjustments */
    .left-align-image {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
    }



    /* banner adjustments for devices */
    .desktop-banner { display: none; }
    .mobile-banner { display: block; }

    /* footer adjustments */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-column { margin-bottom: 20px; }
    .social-media a { margin-right: 15px; }
}




/* formatting the media grid */
.media-grid {
    margin: 40px 0;
    text-align: center;
}

.grid-wrapper {
    display: flex;        /* center the grid */
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 1000px;     /* limits width */
    width: 100%;            /* ensures it uses full available space */
    padding: 0 20px;        /* side padding */
}

/* formatting the image item in the grid */
.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* transforming a small zoom to the image on hover */
.grid-item img:hover {
    transform: scale(1.05);
}

/* formatting the captions for the media gallery */
.media-grid figure {
    margin: 0;
    text-align: center;
}

/* media grid image formatting */
.media-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}

/* formatting the caption */
.media-grid figcaption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 6px;
}

/* more responsive formatting - grid */
@media (max-width: 992px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
        max-width: 90%;
    }
}

/* formatting the portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.grid-item {
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grid-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.grid-item p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* responsive breakpoints for portfolio grid */
@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}


/* formatting portfolio intro section to layout photo and text correctly */
.portfolio-intro {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.portfolio-intro p {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.6;
}

.intro-photo {
  width: 300px;
  height: auto;
  border-radius: 10px;
}

.grid-photo {
  width: 500px;
  height: auto;
  border-radius: 10px;
}

/* responsive adjustments for portfolio intro */
@media (max-width: 768px) {
  .portfolio-intro {
    flex-direction: column;
    text-align: center;
  }

  .intro-photo {
    width: 100%;
    max-width: 300px;
  }

  .grid-photo {
    width: 100%;
    max-width: 300px;
  }
}



/* formatting the text grid*/
.text-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.text-item {
  border: 2px solid #000; /* black outline */
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
  background-color: #fff; /* keeps it clean */
}

/* responsive adjustments for the text grid */
@media (max-width: 800px) {
  .text-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
}

@media (max-width: 500px) {
  .text-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}


/* formatting the page properties for the animated rainbow banner */

/* this makes the flexbox container and centers it */
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* formatting the rainbow border on the banner - uses the gradient as a order, rounded corners, cycles through
the rainbow colors */
.rainbow-border {
  position: relative;
  display: inline-block;
  padding: 6px; /* thickness of border */
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    red, orange, yellow, lime, cyan, blue, magenta, red
  );
  background-size: 400% 400%; /* stretches it to give it animation */
  animation: moveBorder 6s linear infinite; /* makes it animate continuously */
}

/* formatting the leaderboard image and size*/
.leaderboard-img {
  display: block;
  width: 798px;
  height: 90px;
  border-radius: 6px;
  background: #fff;
}

/* formatting the square banner image to display on mobile instead of the leaderboard */
.square-banner {
  display: none; /* hidden by default */
  width: 300px;
  height: 300px;
  border-radius: 6px;
  background: #fff;
}

/* animate border gradient flow for border */
@keyframes moveBorder {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* MEDIA QUERY: on screens <= 768px (typical mobile) */
@media (max-width: 768px) {
  .leaderboard-img {
    display: none; /* hide leaderboard on mobile */
  }
  .square-banner {
    display: block; /* show 300x300 on mobile */
  }
}


/* Container for image and text side-by-side */
.photo-container {
    display: flex;
    align-items: stretch;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    flex-wrap: wrap; /* allow wrapping on smaller screens */
    box-sizing: border-box; /* include padding/border in width */
}

/* Image container */
.image-side {
    flex: 1;
    min-width: 280px;
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box; /* padding and border won't break layout */
}

/* Make image fully responsive */
.image-side img {
    max-width: 100%; /* image never exceeds container */
    height: auto;    /* maintain aspect ratio */
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Text container */
.text-side {
    flex: 1;
    min-width: 280px;
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px; /* space between paragraphs and button */
}

/* Responsive stack on smaller screens */
@media (max-width: 768px) {
    .photo-container {
        flex-direction: column; /* stack image and text */
    }

    .image-side, 
    .text-side {
        flex: none;  /* reset flex behavior */
        width: 100%; /* full width */
    }
}




/* formatting the button */
.black-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: black;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin: 15px ;
}

.black-button:hover {
    background-color: #333; /* Dark gray on hover */
}


/* formatting another text grid */

.text-grid-2 {
    display: flex; /* enables flexbox */
    justify-content: center;    
    gap: 40px;                  
    max-width: 1200px;           
    margin: 0 auto;         
    padding: 20px;        
    flex-wrap: wrap;  
}

.text-item {
    flex: 0 1 300px;  /* allows item to shrink/grow, sets base width */
    text-align: center;         
    background: #f9f9f9;      
    padding: 20px;   
    border-radius: 8px;   
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* shadow */
}


/* section titles */
.section-title {
    font-size: 2rem;
    color: #000000; 
    text-align: center;
    margin-bottom: 2rem;
}

/* portfolio intro */
.services-intro {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #f9f9f9;
    max-width: 1200px;
}

.services-intro .services-photo {
    max-width: 200px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

/* Sformatting sections */
.services-section {
    padding: 3rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.service-card h3 {
    margin-top: 0;
    color: #333;
}

/* hightlight formatting */
.highlight-section {
    padding: 3rem 1rem;
    background-color: #f4f4f4;
    max-width: 1200px;
    margin: 0 auto;
}

.highlight-item {
    background-color: #fff;
    border-left: 4px solid #4b0082;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.highlight-item h3 {
    margin-top: 0;
}

/* responsive formatting */
@media (max-width: 600px) {
    .service-card, .highlight-item {
        padding: 1rem 1.5rem;
    }

    .portfolio-intro .intro-photo {
        max-width: 150px;
    }
}



/* contact info formatting  */
.contact-info a {
    color: #0a0186;
    text-decoration: underline;
}

.contact-info a:hover {
    color: #810505;
}





/* formatting the contact form*/
.contact-form {
    max-width: 100%;
    margin: 2rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.contact-form:hover {
    transform: translateY(-3px);
}

/* formatting labels on the contact form*/
.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 1rem;
}

/* formatting input areas on the contact form*/
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #f9f9f9;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #6c63ff;
    background: #fff;
    box-shadow: 0 0 8px rgba(108, 99, 255, 0.3);
}

/* formatting the buttons on the contact form */
.contact-form input[type="submit"],
.contact-form input[type="reset"] {
    background: #6c63ff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    margin-right: 10px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3);
}
/* making reset button red */
.contact-form input[type="reset"] {
    background: #ff6b6b;
}
/* creating hover affect */
.contact-form input[type="submit"]:hover {
    background: #574bff;
    transform: scale(1.05);
}

.contact-form input[type="reset"]:hover {
    background: #e25555;
    transform: scale(1.05);
}

/* formatting responsive form */
@media (max-width: 600px) {
    .contact-form {
        padding: 1.5rem;
    }
}


/* creating space on the thankyou.html page */
.thankyou {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 55px;
}


/* formatting resume.html */

/* container */
.resume-container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Header */
.resume-header h1 {
  font-size: 2.2em;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.contact {
  font-size: 0.95em;
  color: #555;
}

.contact a {
  color: #1e90ff;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

/* section titles formatting */
section h2 {
  font-size: 1.4em;
  color: #1a1a1a;
  border-bottom: 2px solid #001b8f;
  padding-bottom: 5px;
  margin-bottom: 15px;
  margin-top: 25px;
}

/* jobs formatting */
.job {
  margin-bottom: 25px;
  padding-left: 15px;
  border-left: 3px solid #1e90ff;
}

.job h3 {
  font-size: 1.1em;
  color: #222;
  margin-bottom: 3px;
}

.job .company {
  font-size: 0.95em;
  color: #666;
  display: block;
  margin-bottom: 2px;
}

.job .date {
  font-size: 0.85em;
  color: #999;
  display: block;
  margin-bottom: 8px;
}

.job ul {
  padding-left: 20px;
  margin-top: 5px;
}

.job ul li {
  margin-bottom: 5px;
}

/* skills formatting */
.skills-section .skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.skills li {
  background: #eef6fb;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.95em;
  text-align: center;
  transition: all 0.3s;
}

.skills li:hover {
  background: #d0ebff;
  transform: translateY(-2px);
}



/* styling section for digital art page */

.indigenous-section {
    width: 100%;
    background-color: #000; /* full black background */
    color: #fff;
    padding: 50px 0;
    box-sizing: border-box; /* just in case */
}

/* container keeps content centered */
.indigenous-section .indigenous-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* horizontal padding */
}

.indigenous-section h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.indigenous-section .subtitle {
    color: #ccc; /* lighter for contrast */
    font-size: 1rem;
    margin-bottom: 50px;
}


.tech-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.tech-card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.tech-card h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #222;
}

.tech-card p {
    font-size: 1rem;
    color: #555;
}


/* Responsive */
@media (max-width: 900px) {
    .cards {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 80%;
    }
}

/* icon styling for fa icons - stylesheet is connected in head section */
.indigenous-section .icon {
    font-size: 48px;  
    color: #000000; 
    margin-bottom: 15px; 
}

/* optional: hover effect */
.indigenous-section .card:hover .icon {
    color: #2500c9;  
    transform: scale(1.1);
    transition: all 0.3s ease;
}


/* formatting the footer into 4 columns that will stretch across the page, but keep columns centered to content */
footer {
    background-color: #222;
    color: #fff;
    padding: 40px 0;
    margin-top: 30px;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.footer-column {
    flex: 1;
    min-width: 200px;
}
.footer-column h4 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column li {
    margin-bottom: 8px;
}
.footer-column a {
    color: #fff;
    text-decoration: none;
}
.footer-column a:hover { text-decoration: underline; }
.social-media a {
    display: inline-block;
    margin-right: 10px;
}

/* formatting social icons in footer */

.social-media img {
    width: 24px;
    height: 24px;
    margin-top: 10px;
}