/* #region Fonts */  
/* General text - Noto Sans */
.noto-sans-regular-400 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 
    "wdth" 100;
}
 
/* Subheadings - Noto Sans Medium */
.noto-sans-regular-500 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
 
/* Headings - Noto Sans SemiBold */
.noto-sans-semiBold-600 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: 
    "wdth" 100;
}

/* Name - Noto Sans Black */
.noto-sans-black-900 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* #endregion Fonts */

:root {--nav-width: 20%; --nav-gutter: 0rem;}
body {
  min-height: 100vh;
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  overflow-x: hidden;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  all: unset;             
  display: inline-block; 
  cursor: pointer;  
  text-align: center;    
}

/* #region Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
  background-color: white;
  padding: 1.5rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  border-right: 1px solid lightgrey;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: var(--nav-width);
}

.navbar-main-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.navbar a,
.navbar a:link,
.navbar a:visited,
.navbar a:active {
  color: black;          
  text-decoration: none;
}

.navbar a:hover {
  color: grey;
}

.navbar-logo {
  font-size: 1.5rem;
}

.navbar-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  border-top: 1px solid lightgrey;

  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.navbar-theme-button { 
  margin-top: auto; 
}

.navbar-theme-button button {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-style: bold;
  background-color: white;
  padding: 0.5rem 1rem;
  border: 1px solid lightgrey;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Sidebar dropdowns (Projects/Contact) */
.dropdown {
  position: relative; /* keep static flow in sidebar */
}

.dropdown-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: space-between;
  padding-top:1rem;
}

.caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: grey;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px; /* tiny left spacing from text */
  margin: 0;
}
.caret-btn:hover { color: #666; }
.caret-btn:focus { outline: 1px solid #bbb; outline-offset: 2px; }

/* Optional: ensure the <h3> itself has no extra bottom margin */
.dropdown-label h3 { margin: 0; line-height: 1; }

/* remove pseudo-caret; we use a real button now */
.dropdown-label h3::after { content: none; }

/* In the sidebar, just reveal items below; no absolute positioning */
.dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0 0.25rem 0;
}

.dropdown:hover .dropdown-menu,
.dropdown-label:hover + .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: flex; /* show on hover/focus */
}

/* Optional: make nested links feel like part of the list */
.dropdown-menu a {
  padding-left: 0.25rem;
}
/* #endregion Navbar */

/* #region Main Area */
.main-area {
  margin-left: calc(var(--nav-width) + var(--nav-gutter));
  padding: 2rem;
  background-color: #f9f9f9;
  min-height: 100svh;
}
/* #region Introduction Section */
#introduction {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-top: 5rem;
}
#introduction h1 {
  font-size: 2.5rem;
  margin-bottom: 0rem;
}

#introduction p {
  font-size: 0.8rem;
  color: grey;
  margin-top:0%;
  margin-bottom: 0rem;
}

#introduction-div {
  padding: 0rem 20rem 0rem 1rem;

}

#introduction img {
  width: 350px;
  height: auto;
  border-radius: 50%;
  margin-top: 1rem;
  align-self:flex-end;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
/* #endregion Introduction Section */

#section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 1.75rem;
  padding-top: 3rem;
  width: 100%;
  text-align: center;
}

#section-header::after {
  content: "";
  display: block;
  width: min(560px, 85%);
  height: 2px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

#section-header h2 {
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.experience-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border: 1px solid lightgrey;
  width: 100%;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 2rem;
}

.experience-items img {
  width: 10rem;
  height: auto; 
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.experience-items .experience-items-desc {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.5rem;
  padding: 0.3rem;
}
.experience-items .experience-items-desc p {
  margin: 0;
  font-size: 1.2rem;
  color: grey;
  font-size:small;

}

/* #region Qualifications page */
.qualifications-section {
  max-width: 960px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

#resume.qualifications-section {
  max-width: 1120px;
}

.qualifications-section .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 1.75rem;
  padding-top: 0;
  width: 100%;
  text-align: center;
}

.qualifications-section .section-header h2 {
  margin: 0;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f1f1f;
}

.qualifications-section .section-header::after {
  content: "";
  display: block;
  width: min(560px, 85%);
  height: 2px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

.qualifications-section .section-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.qualifications-section .qualifications-list {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: 1rem;
}

.qualifications-section .role-list li {
  list-style: disc;
}

.qualifications-section .role-list h3 {
  margin: 0 0 0.5rem;
}

.qualifications-section .role-list p {
  margin: 0;
  line-height: 1.7;
}

.qualifications-section .coursework-list {
  list-style: disc outside;
}

.qualifications-section .skills-list strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.qualifications-section .skills-list a {
  color: #1f4fb8;
}

.qualifications-section .skills-list a:hover {
  color: #0f2f7c;
}

.qualifications-section .resume-embed object {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8.5 / 11;
  min-height: 960px;
}

.qualifications-section .resume-embed p {
  color: #444444;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .qualifications-section {
    padding: 0 1rem;
  }

  .qualifications-section .section-header::after {
    width: 90%;
  }

  .qualifications-section .resume-embed object {
    min-height: 640px;
    aspect-ratio: 8.5 / 13;
  }

  #section-header::after {
    width: 90%;
  }
}
/* #endregion Qualifications page */

.project-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border: 1px solid lightgrey;
  width: 100%;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 2rem;
}
.project-items img {
  width: 50%;
  height: auto;
  border-radius: 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  align-content: flex-end;
} 

.project-items .project-items-desc {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.5rem;
  padding: 3rem;
  flex: 1;
}

.project-items .project-items-desc p {
  margin: 0;
  font-size: 1.2rem;
  color: grey;
  font-size:small;
}

.portfolio-items {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start; /* or center if you want them aligned vertically */
  margin-top: 2rem;
}

.portfolio-items-desc {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: white;
  padding: 1rem; /* 16px */
  border-radius: 0.5rem; /* 8px */
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  gap: 2rem;
  width: 33.3333%;
}

.portfolio-button {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  background-color: white;
  padding: 0.5rem 1rem;
  border: 1px solid lightgrey;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  color: black;
}

/* Hover/focus visuals for both <a> and <button> variants */
.portfolio-button:hover,
.portfolio-button:focus {
  color: gray;
  background-color: #f5f5f5;
  border-color: #cfcfcf;
}

/* Ensure nested link text also changes color and never underlines */
.portfolio-button:hover a,
.portfolio-button:focus a {
  color: inherit;
  text-decoration: none;
}

/* In case a link is nested inside an element styled as a button, ensure it inherits */
.portfolio-button a {
  text-decoration: none;
  color: inherit;
}

.portfolio-items-desc p {
  margin: 0;
  font-size: 1rem;
  color: grey;
  font-size: small;
}

.portfolio-items-images {
  display: flex;
  flex: 2;
  gap: 1rem; 
  padding-top: 1rem; /* 16px */
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.5rem; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  justify-content: center;
  overflow:hidden;
  width: 66.6667%;

}

.bg-aggieseek {
  background-color: rgb(207, 207, 207);
}

.aggieseek-img-left {
  margin-left: -2rem; 
}

.aggieseek-img-right {
  margin-right: -2rem; 
}

.aggieseek-img {
  height: auto;
  border-top-left-radius: 5%;
  border-top-right-radius: 5%;
}

a,
a:link,
a:visited,
a:active {
  color: black;          
  text-decoration: none;
}

a:hover {
  color: lightgray;
}
/* #endregion Main Area */


/* =======================
   GenAI Color Generator
   ======================= */

#color-generator {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 2rem;
}

.cg-header h1 {
  margin: 0 0 0.25rem 0;
}

.cg-sub {
  color: grey;
  margin: 0 0 1.25rem 0;
  font-size: 0.95rem;
}

.cg-controls {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}

.cg-picker { grid-column: span 3; min-width: 180px; }
.cg-hex    { grid-column: span 5; }
.cg-label  { font-size: 0.85rem; color: #666; display: block; margin-bottom: 0.35rem; }

.cg-color-input {
  width: 100%;
  height: 2.5rem;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
}

.cg-hex-input {
  width: 100%;
  height: 2.5rem;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 0 0.75rem;
  background: #fff;
}

.cg-generate {
  grid-column: span 4;
  height: 2.6rem;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
  font-weight: 600;
}
.cg-generate:hover { background: #f5f5f5; }

.cg-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.cg-swatch {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

.cg-swatch-top {
  min-height: 128px;
  display: grid;
  place-items: center;
}

.cg-swatch-hex {
  padding: 0.6rem 0.8rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.cg-copy-btn {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  background: #fafafa;
}
.cg-copy-btn:hover { background: #f0f0f0; }

.cg-hint {
  color: #7a7a7a;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.cg-divider {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 1.25rem 0;
}

.user-prompt {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  color: #222;
  line-height: 1.5;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .cg-controls { grid-template-columns: 1fr 1fr; }
  .cg-picker { grid-column: span 1; }
  .cg-hex    { grid-column: span 1; }
  .cg-generate { grid-column: span 2; }
  .cg-palette { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .cg-palette { grid-template-columns: 1fr; }
}