@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* VARIABLES */
:root {

  /* Fonts */
  --font-family: "Roboto", sans-serif;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;

/* Primary background color of page */
  --bg-color: #fcfcfc;
  
  /* Primary color used for links, text, borders (WCAG AA PASS) */
  --color-primary-accent: hsl(190, 70%, 30%); 
  
  /* Color used for link hover states (WCAG AA PASS) */
  --color-link-hover: #a10171;
  
  /* Card shadows */
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;

  /* Other */
  --line-height: 1.5rem;   /* 1.7 rem is equivalent to 27.2 pixels */
  --transition: 0.3s;
}

html {
  scroll-behavior: smooth;
}

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

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--color-primary-accent); 
}

a:hover {
  color: var(--color-link-hover);
}

body {
  font-family: var(--font-family);
  overflow-x: hidden;
  background-color: var(--bg-color); /* This ensures the body background matches each of the sections background color */
}

/* GLOBALS */
p {
  line-height: var(--line-height);
}

.center {
  text-align: center;
}
.mimic-h4-size {
  font-size: 95%;
}

.nav-link.external-link {
  display: inline-flex;       /* treat text + icon as a flex row */
  align-items: center;        /* vertically center the icon with text */
  white-space: nowrap;        /* prevent wrapping */
  flex-shrink: 0;             /* prevents icon from separating from text */
}

.nav-link.external-link i {
  margin-left: 0.25rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
  font-size: .85em;  /* to match icon with text sizing  */
  display: inline-block;  
  color: inherit; /* ensures it matches link text color */
}

/* Responsive tweak for narrower widths */
@media screen and (max-width: 1024px) {
  .nav-link.external-link {
    max-width: 6.5rem; /* adjust based on your nav spacing */
    overflow: hidden;
    text-overflow: ellipsis; /* optional, will truncate text instead of wrapping */
  }
}

/* Ensures long words break and wrap correctly. Includes fix for margin collapse. */
.title-base {
  overflow-wrap: break-word;
  margin-bottom: 2rem;
  display: inline-block; /* Prevents the margin from collapsing/disappearing */
  width: 100%; /* Ensures the title still spans the full width */
  text-align: center;
}

.card {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--primary-shadow);
  padding: 20px;
}

.section-padding {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* NAVIGATION MENU */
nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem; /* 1.5 rem is equivalent to 24 pixels & 3.5 rem is equivalent to 56 pixels */
    background-color: var(--bg-color);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Hides the off-screen mobile menu */
  }

  .nav-link {
    display: inline-block; /* Allows the border to attach to the link width */
    padding: 0.2rem 0;     /* Gives the border space so it doesn't touch the text */
    transition: var(--transition);
    border-bottom: 2px solid transparent; /* Works like a shim the 2px is there just invisible */
  }

  nav h1 {
      color: var(--color-primary-accent);
  }
  
  nav a {
    transition: var(--transition);
      color: var(--color-primary-accent);
  }

  nav a:hover,
  .nav-link:hover {
      color: var(--color-link-hover);
      border-bottom: 2px solid var(--color-link-hover);
      border-color: var(--color-link-hover); /* changes color of the shim */
  }
  
  /* Desktop Nav Menu  */
  .main-nav {
      display: flex; /* Makes the menu horizontal on desktop */
      gap: 1.9rem;
      flex-wrap: nowrap;
      /* justify-content: flex-end; */
      justify-content: space-between;
      /* overflow-x: auto; */
      overflow: hidden;
  }

  .main-nav li {
      font-weight: var(--bold-font);
      flex-shrink: 1;
      min-width: max-content;
  }

  .main-nav li:last-child {
    min-width: max-content; /* prevents the far-right Resume link from wrapping */
  }

  @media screen and (max-width: 1150px) {
    .main-nav li:not(:last-child) {
      font-size: 0.95rem; /* shrink all except the far-right Resume */
    }
  }

  .burger-menu {
    color: var(--color-primary-accent);
    font-size: 2rem; /* 2 rem is equivalent to 32 pixels */
    border: 0;
    background-color: transparent;
    cursor: pointer;
    display: none;
  }
/* End Nav Section */

/* CONTENT WRAPPER  */
.content-wrapper {
  max-width: 68.75rem; /* This sets the maximum width page content and aligns width to match content cards large max-width (1100px) for all sections */
  margin: 0 auto; /* This centers the content on the page */
  padding: 0 1.5rem; /* This creates the "gutters" as I like to call them on the left and right */
}
  
/* HERO SECTION */
.hero {
  display: flex;
  flex-direction: column; /* Force a single column layout on all screens */
  align-items: center; /* Center the items horizontally */
  justify-content: center;
  gap: 2.5rem;
}

.hero-img-mask {
  height: 500px;
  width: 100%;
  overflow: hidden;
  padding: 0.625rem;
  border-radius: 11px;
  box-shadow: 0px 2px 15px 2px var(--primary-shadow);
}

.hero-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* object-fit: contain; */
  object-position: center;
  border-radius: 8px;
}

.bio {
    max-width: 100%; /* Match the width of the hero image */
}
  
.bio p {
  line-height: var(--line-height);
  padding: 0.3rem 0; /* 0.3 rem is equivalent to 4.8 pixels */
}

/* End Hero Section */

/* RECENT EXPERIENCE / MORE ABOUT */
.more-about {
  background-color: var(--bg-color);
}

.more-about p {
  line-height: var(--line-height);
  padding: 0.4rem;
  align-items: center;
  justify-content: center;
}


/* TECHNICAL SKILLS SECTION */  
.skills {
  text-align: center;
}

.skills-wrapper img {
  padding: 1.25rem;
}

.icon {
  width: 11.875rem;
  height: 11.25rem;
}

.icon-card {
  margin: 10px;
}

/* End Skills Section */ 

/* PROJECT SECTIONS - Website Development & Client Consultation AND Independent Projects */
.projects {
  background-color: var(--bg-color);
}
  
.project-pic {
  width: 65%;
  /* height: 60%; */
  height: auto;


  display: block;
  margin: 0 auto;
}

.projects-container {
  display: flex;
  align-items: stretch; /* Using this makes the container boxes all the same height to align top and bottom */
  flex-wrap: wrap;
  /* justify-content: center; */
  justify-content: space-between;
  gap: 1.25rem; /* Handles both horizontal and vertical spacing */
}

.projects-title {
  text-align: center;
}

.project-container {
  text-align: center;
  /* width: 20rem; used flex-basis and grow below instead to make more responsive and match width of sections */
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0; /* Allows the item to shrink below its content's minimum size */
  padding: 1rem;
}

/* ---------- Individual Cards -------- */
.project-container p {
  padding: 0;
  margin-top: .5rem;
  line-height: var(--line-height);
}

.project-title {
  margin-top: 1rem;
}

.project-details {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.project-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 1; /* Ensure project cards don't compete */
}

.project-card:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); */
}

/* Project Cards Accessibility Focus state – Keyboard Focus (Web Projects cards) */
.project-card:focus-within {
  transform: translateY(-2px);
}

.project-link {
  position: relative; /* REQUIRED: Gives the z-index context */
  z-index: 2; /* Must be higher than the main card link's z-index (1) */
  margin-top: 1rem;
}

.project-card a.project-link {
    display: flex; 
    flex-direction: column;
    box-sizing: border-box; 
    height: 100%;
    width: 100%;
    text-decoration: none; 
    color: inherit; 
}

.main-card-link {
  position: absolute; /* Takes the link out of the normal flow */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1; /* Places the link above the card content */
  /* Optional: Make it visually invisible but still clickable */
  opacity: 0;
}

/* Stretched Link (Covers the whole card invisibly) */
.main-card-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1; /* Sits above content */
  opacity: 0; /* Makes it invisible */
}

/* Stretched Link Hover State */
.main-card-link:hover {
  background-color:black;
  opacity: 4%;
  border-radius: 11px;
  transition: opacity 0.3s ease;
}

/* Stretched Link – Keyboard Focus (Web Projects) */
.main-card-link:focus,
.main-card-link:focus-visible {
  background-color: black;
  opacity: 4%;
  border-radius: 11px;

  outline: 3px solid var(--color-link-hover);
  outline-offset: -3px;
}

/* Independent Projects Card Hover */

#independent-projects .project-card {
  position: relative; /* creates overlay context */
  overflow: hidden;   /* clips overlay to rounded corners */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#independent-projects .project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.04); /* matches 4% black */
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 11px;
  pointer-events: none; /* does NOT block clicks */
}

#independent-projects .project-card:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); */
}

/* Independent Projects – Keyboard Focus */
#independent-projects .project-card:focus-within {
  transform: translateY(-2px);
}

#independent-projects .project-card:hover::after {
  opacity: 1;
}

#independent-projects .project-card:focus-within::after {
  opacity: 1;
}


/* End - Independent Projects Card Hover */

/* Inner, Functional Links (Must have higher z-index to be clickable) */
.project-inner-link {
  position: relative; 
  z-index: 2; /* Must be higher than main-card-link (1) */
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  display: inline-block;    /* Allows the link to respect width constraints */
  max-width: 100%;          /* Prevents it from being wider than its card */
  overflow-wrap: break-word; /* Forces the URL to break onto a new line */
  /* word-break: break-all;    extra insurance for very long URLs but also breaks regular words not just URLs so commented out */
  word-wrap: break-word;
}

.project-card .project-inner-link:last-child {
    margin-bottom: 1.5rem; /* To visually match the independent project cards space on bottom of card */
}

/* End Project Section */

/* CONTACT SECTION */
.contact h2 {
  text-align: center;
}

.contact-form-container {
  padding: 0.938rem;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
}

.contact-form-container label {
  line-height: 2.7em;
  font-weight: var(--bold-font);
  color: var(--color-primary-accent);
}

.contact-form-container textarea {
  min-height: 6.25rem;
  font-size: 14px;
}

.contact-form-container .input-field {
  width: 100%;
  max-width: 100%; /* Force it to stay inside the container */
  box-sizing: border-box; /* Ensures padding doesn't add to the width */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: .8em;
  padding-right: .6em;
  border-radius: 8px;
  border: none;
  border: 2px solid var(--color-primary-accent);
  font-size: 0.875rem;
  outline: none;
}
  
.input-field::placeholder {
  padding: 0.5rem;
  color: var(--color-primary-accent);
}

  /* ----- Submit Button Styling ----- */ 
  .submit-btn {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
  border: 2px solid var(--color-primary-accent);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--bold-font);
  transition: var(--transition);
}

.submit-btn:hover {
  background-color: var(--color-primary-accent);
  border: 2px solid var(--color-primary-accent);
  cursor: pointer;
  color: white;
}

/* End Contact Section */

/* SOCIALS */
.linkedinup {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* right: 0.7%; */
    right: 8px; /* switching from % to fixed px ensures regardless of device screen height changes no overlap occurs with neighbors */
    /* bottom: 10%; */
    bottom: 85px; /* switching from % to fixed px ensures regardless of device screen height changes no overlap occurs with neighbors */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--secondary-shadow);
    padding: 3px;
    z-index: 1000; /* Higher than nav so it's always accessible */
}

.socicon {
  width: 2rem;
  height: 2rem;
}

/* END Socials */

/* SCROLL TO TOP ICON */
.scroll-up {
  position: fixed;
  /* right: 0.5%; */
  right: 5px; /* switching from % to fixed px ensures regardless of device screen height changes no overlap occurs with neighbors */
  /* bottom: 3%; */
  bottom: 20px; /* switching from % to fixed px ensures regardless of device screen height changes no overlap occurs with neighbors */
  cursor: pointer;
}

.up-arrow {
  width: 2.5rem;
  height: 2.5rem;
}
/* End Scroll to top icon */

/* FOOTER */
  footer {
    background-color: var(--bg-color);
    padding: 1.25rem;
    text-align: center;
    margin: 1rem 0 0;
  }

/* ------------ Media Queries for responsiveness on tablet and mobile -------------------------------------------------- */ 

/* MOBILE */
@media screen and (max-width: 820px) {
  
  nav {
    padding: 1.5rem 1rem;
  }

/* STEP 1: HIDE the desktop layout properties when screen is small (prevents flash) */
  .main-nav {
    display: flex;
    visibility: hidden;
    flex-direction: column; /* Overrides the desktop flex */
    gap: 0rem;
    position: fixed; /* Allows mobile positioning */
    top: 6rem;
    left: 50%;
    transform: translateX(200%); /* Off-screen hide to the right */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease-in-out, opacity 0.3 ease-in-out;
    width: 80%;
    max-width: 300px;
    text-align: center;
    border-radius: 8px;
    padding: 1.5rem 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    z-index: 1010; /* kept higher z index than .linkedinup which is 1000 */
  }

/* STEP 2: SHOW the mobile menu when the burger is clicked (by re-applying display:flex via .show) */
  .main-nav.show {
    visibility: visible;
    display: flex; /* Make it visible for the slide-in effect */
    transform: translateX(-50%); /* Slide menu to center when .show is added */
    opacity: 1;
    visibility: visible;
  }

  .main-nav li {
    margin: 0; /* mobile nav items vertical spacing */
    padding: 1rem 0; /* Add padding for a larger touch target */
    transition: background-color 0.3s;
  }

  .main-nav li a {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--bold-font);
    text-transform: uppercase; /* Make the links uppercase */
    border-bottom: none; /* Removes the 2px border space entirely for mobile (the shim) */
    padding: 0; /* Resets the padding if the 0.2rem from desktop looks odd */
  }

  .main-nav li:hover,
  .main-nav li:focus-within {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .main-nav li a:hover {
    border-bottom: none; /* Removes the underline-like border from mobile links */
    border-bottom-color: transparent; /* Ensures no border color is applied on mobile hover */
  }

  .burger-menu {
    display: block;
  }

  /* nav ul.show is no longer needed, replaced by .main-nav.show */
  /* .content-wrapper and sections below remain the same */
  .content-wrapper {
    padding: 0 1.5rem;
  }

  .card {
    padding: 1rem;
  }

  .hero,
  .bio,
  .more-about,
  .contact-form-container,
  .skills,
  .projects {
    width: 100%;
    margin: 0 auto;
  }

  /* ------ MOBILE HERO SECTION ------ */
  .hero {
    flex-direction: column;
    gap: 0;
  }

  .hero-img-mask {
    width: 90%;
    margin: 0 auto;
  }

  .bio {
   margin-top: 3rem;
   width: 90%;
  }

  /* ------ MOBILE RECENT EXPERIENCE / MORE ABOUT ------ */
  .more-about {
    margin-top: 2rem;
    width: 90%;
  }

  .more-about h2 {
    text-align: center;
  }

  .more-about p {
    text-align: left;
  }

  /* ------ MOBILE TECHNICAL SKILLS ------ */
  .icon {
    width: 10rem;
    height: 10rem;
  }

  /* ------ MOBILE PROJECT SECTIONS - Website Development & Client Consultation AND Independent Projects ------ */
  .projects-container {
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
  }

  .project-container {
    width: 90%; /* overrided the 20rem desktop rule for mobile */
    height: auto; /* Force it to expand with content */
    flex-basis: auto; /* Prevents flex-basis: 0 from squishing the card */
  }

  .project-card a.project-link {
    height: auto; /* Let the content dictate the height */
    display: block; /* Simpler than flex for stacked mobile content */
  }

  /* ------ MOBILE CONTACT FORM SECTION ------ */
  .contact-form-container {
    width: 90%;
  }
} 
/* ------ End Mobile Media Query for 820px -------------------------------------------------------- */