/* STYLE CONFIGRUATIONS FOR THREE.JS GRAPHICS */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* fill the container width */
  height: 100%; /* fill the container height */
  z-index: -1; /* Ensures that Three.js graphics on the canvas is behind all other content! */
  /* when the canvas is at this layer, orbit controls don't work! */
}

/* Ensure the header section provides space for the canvas */
#home-graphics {
  position: relative;   /* make canvas positioning relative to this section */
  min-height: 55vh;     /* consistent initial height on first load */
  margin-bottom: clamp(16px, 3vh, 48px); /* add gap below graphics section */
  overflow: hidden;     /* keep graphics clipped to the section */
  z-index: 1;           /* overlay section above canvas */
  background-color: rgba(112, 163, 225, 0.9); /* mobile overlay should cover full graphics area */
}

#aboutme, #indexmain, #indexfooter, header {
  position: relative;
  z-index: 1; /* Ensures that the 'navigation bar' and header sections are in front of the canvas */
  background-color: rgba(112, 163, 225, 0.9); /* Cool 'faded' effect for Three.js graphics by making background in front of the canvas transparent! */
}

main, footer {
  position: relative;
  z-index: 1; /* Ensures that the 'about me', main, and footer sections are in front of the canvas */
  background-color: #81b7f8; /* testing w a new blue coo */
}


/* STYLE SECTIONING TAGS */

*{
  margin: 0px;
  padding: 0px;
  font-family: 'Source Sans 3', sans-serif;
}

/* Prevent slight horizontal shift when content toggles (scrollbar width) */
html {
  scrollbar-gutter: stable;      /* modern browsers */
  overflow-y: scroll;            /* fallback: always reserve gutter */
}

h5 {
  padding: 3%;
}

h2 {
  animation: fadeIn 2s;
}

body {
 background-color: #81b7f8; 
  text-align: center;
  cursor: url("/?originalUrl=https%3A%2F%2Faneall.github.io%2Fassets%2Fflowercursor.png"), auto;
}

#indexbody {
  background-color: #70A3E1; 
}

button {
 font-size: 120%;
}

/* GENERAL links (a) */
a {
  color: inherit;
  font-weight: bold;
  text-decoration: none; /* get rid of hyperlink underline */
  font-family: inherit;
  text-decoration: none; /* hyperlink underline while hovering */
}

#UNClink:hover {
  color: #ffffff;
}

#ICXRlink:hover {
  color: #681aed;
}

#misclink:hover {
  color: #ffc6f0;
}

.welcome {
  color: #151C31;
  animation: fadeIn 2s;
  padding-top: 2%;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes highlightImage {
  0% {
    border-color: white;
  }
100% {
    border-color: #f85fe6;
  }
}

@keyframes highlightAshley {
  0% {
    border-color: white;
  }
100% {
    border-color: #000000;
  }
}

@keyframes changeFontColor {
  0% {
    color: white;
  }
100% {
    color: #f85fe6;
  }
}

.othertext {
  animation: fadeIn 2s;
}

.explore {
  padding-bottom: 1px;
  animation: fadeIn 2s;
}

/* STYLE TEXT */
h1 {
  color: #472543;
  padding-top: 1em;
  padding-bottom: 1em;
}

p {
  color: #000000;
  text-align: center;
  font-size: 20px;
}

main {
  margin-top: .5%;
  margin-bottom: .5%;
}

/* STYLE IMAGES */
img {
  max-width: 50%;
  border-radius: 15%;
  border: 3px solid white;
  margin-bottom: 1em;
  margin-left: 1%;
  margin-right: 1%;
}



/* INDEX.HTML 'Enter' button */

#enterbutton {
  background-color: black;
  color: #f85fe6;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  text-align: center; /* TEST REMOVE */
  text-decoration: none; /* TEST REMOVE */
  display: inline-block; /* TEST REMOVE */
  font-size: 20px; /* TEST REMOVE */
  cursor: url("/?originalUrl=https%3A%2F%2Faneall.github.io%2Fassets%2Fvrcursor.png"), auto;
  position: absolute;
  top: 50%;
  left: -12rem;              /* place to the left of the photo */
  transform: translateY(-50%);
  z-index: 2;
  white-space: nowrap;
  transition: background-color 0.35s; /* hover color transition */
}

#enterbutton:hover {
  background-color: #f85fe6; /* color changes when hovering */
  color: white;
}

/* Index.HTML Images */
#mylinkedin:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#myartshop:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#carvr:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#icxr:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#mygithub:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#myscholar:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

#myemail:hover {
  transform: scale(1.2);
  animation-name: logo-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

.ashley {
  margin-top: 1%;
  margin-bottom: 5%;
  width: 27%;
  height: auto;
}
.ashley:hover {
  animation: highlightAshley 500ms forwards;
}

/* Index.HTML Buttons */


/* Index.HTML "About Me" */
#aboutme {
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom: 3%;
}

#aboutme p {
  padding-top: 1%;
  font-weight: 400;
}

/* Ensure bold textuses Source Sans */
#aboutme b {
  font-family: inherit; /* inherit Source Sans 3 from paragraph (p) */
  font-weight: 700;     /* bold */
}

/* New homepage hero layout (indexnew.html) */
.home-hero {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  padding: clamp(16px, 4vw, 48px) 10%;
  position: relative;
  z-index: 2; /* above canvas */
}

.home-hero .hero-text {
  text-align: left;
}

.home-hero .hero-text h2 {
  margin-bottom: 0.5rem;
}

.home-hero .hero-photo {
  justify-self: end;
  grid-column: 2; /* keep photo in right column even if text hides */
  position: relative; /* allow absolute positioning inside (VR button) */
}

.home-hero .hero-photo .ashley {
  width: 100%;
  max-width: 360px;
  border-radius: 50%;
}

/* Subtle white overlay card behind hero text */
.hero-card {
  position: relative;               /* enable z-index */
  z-index: 2;                       /* above canvas */
  display: inline-block;            /* wrap to content width */
  background: rgba(255, 255, 255, .45);
  border-radius: 16px;
  padding: clamp(12px, 2vw, 20px) clamp(10px, 2vw, 20px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);       /* softens 3D behind on supported browsers */
}

/* Contact icons row below the photo (indexnew.html only) */
.home-hero .contact-icons {
  display: flex;
  gap: clamp(12px, 3vw, 20px);
  justify-content: center;
  align-items: center;
  margin-top: clamp(12px, 3vw, 20px);
  --icon-size: clamp(28px, 6vw, 42px); /* base size matching current Scholar icon */
}

.home-hero .contact-icons img {
  width: var(--icon-size);
  height: auto;
  border: 0;           /* override global img border */
  margin: 0;           /* tighter spacing for small icons */
}

/* Make GitHub, LinkedIn, and Email visually match Scholar size */
.home-hero .contact-icons #mygithub {
  width: calc(var(--icon-size) * 1.20);
}

.home-hero .contact-icons #myemail  {
  width: calc(var(--icon-size) * 1.30);
}

.home-hero .contact-icons #mylinkedin {
  width: calc(var(--icon-size) * 1.50);
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 24px 6%;
  }
  .home-hero .hero-photo {
    justify-self: center;
    grid-column: auto; /* reset explicit column on small screens */
  }
  .home-hero .hero-photo .ashley {
    max-width: 70vw;
  }
}


/* PORTFOLIO.HTML */

/* Portfolio.HTML Images */
.artwork {
  border-radius: 25px;
  position: relative;
  z-index: 2;
  width: 30%;
  margin-top: 3%;
  margin-bottom: 3%;
  margin-right: 5%;
  margin-left: 5%;
}

.artwork:hover {
    transform: scale(1.05);
    animation: highlightImage 500ms forwards;
}

/* Research.HTML experimenting */
.researchtitle {
  text-align: center;
  width: 70%;
  margin-top: 2%;
  margin-left: 14%;
}

/* Portfolio.HTML Text */
.description {
  flex: 1;
  text-align: center;
  margin-bottom: 5%; /* space between description and buttons */
  width: 100%;
}


/* Portfolio.HTML Buttons */
.info-button {
  background-color: #151C31;
  color: white;
  padding: 10px 20px; /* text padding for top/bottom, left/right */
  border: none; /* no button border */
  border-radius: 5px; /* rounded button corners */
  cursor: pointer; /* "click mouse" style cursor on hover */
  transition: background-color 0.35s; /* hover color transition */
  margin-right: 3%; /* button padding */
  margin-left: 5%;
  margin-bottom: 5%;
}

.info-button:hover {
  background-color: #f85fe6; /* color changes when hovering */
}

.checkoutmore {
  text-align: center;
  margin-top: 1em; /* space between description and buttons */
  width: 100%;
}

#moreart a {
  color: inherit;
  font-weight: bold;
  text-decoration: none; /* get rid of hyperlink underline */
  font-family: inherit;
}

#moreart a:hover {
  text-decoration: underline; /* hyperlink underline while hovering */
}



/* PROJECTS.HTML (uses same .imagecontainer, but alternative to .description and .artwork) */

/* Projects.HTML Images */
.projects {
  border-radius: 25px;
  position: relative;
  z-index: 2;
  width: 70%;
  margin-top: 3%;
  margin-bottom: 2%;
}

.projects:hover {
  transform: scale(1.05);
  animation: highlightImage 500ms forwards;
}


/* Projects.HTML text*/
/* Projects page typography and spacing */
p.description,
h4.description {
  font-family: 'Source Sans 3', sans-serif;
}

h3.description {
  margin-bottom: 0.6rem;   /* tighten space before the h4 */
  font-weight: 700;        /* make project title stand out */
}

h2.description {
  margin-bottom: 0.4rem;   /* tighten space before the h4 */
}

h4.description {
  margin-top: 0.25rem;     /* reduce default heading top margin */
  font-weight: 500;
}

/* Limit line length for readability and ensure wrapping */
.textcontainer {
  max-width: 100ch;         /* wrap lines sooner; centered by parent flex */
}

.description {
  width: auto;             /* allow content to shrink under max-width */
  overflow-wrap: break-word;
}



/* STYLE NAV BAR */
ul {
  list-style-type: none;
  background-color: #151C31;
  overflow: hidden;
  padding: 1em;
}

li {
  display: inline;
}

li a {
  text-decoration: none;
  color: white;
  font-size: 1.3em;
  padding: 1em;
}

li a:hover {
  animation: changeFontColor 500ms forwards;
}

.portfoliosection {
  margin-top: 15%;
  margin-bottom: 5%;
  margin-right: 10%;
  margin-left: 10%;
}


/* DESIGN CONSIDERATIONS */ 

/* Vector graphic (pink curves) for Portfolio.html and Projects.html */
.pinkcurve {
  position: absolute;
  top: 1;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.pinkcurve svg {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(110% + 1.3px);
  height: 89px;
} 

.pinkcurve .shape-fill {
  fill: #b3d0fc; /* changing to a blue for now */
}


/* Alternating (left and right) containers */
.overallcontainer {
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: center; /* horizontal alignment */
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.overallcontainer:nth-child(odd) {
  flex-direction: row;
}

.overallcontainer:nth-child(even) {
  flex-direction: row-reverse;
}

.textcontainer { /* for the button AND description */
  display: flex-start; /* enables buttons to align in a row */
  flex-direction: column; /* stack verticall */
  align-items: start; /* alignment starts at left side */
  margin-bottom: 3%;
  padding-left: 5%;
  padding-right: 5%;
}

.buttoncontainer {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%; /* enables button row to take up more space than length of description */
}

.buttoncontainer a {
  text-decoration: none; /* Removes the underline from the link */
  font-size: 120%;
}

/* Specifications for smaller displays */
@media screen and (max-width: 800px) { /* design for smaller screens */
  .contentcontainer {
      flex-direction: column;
      text-align: center;
  }

  .artwork {
      width: 100%;
      margin-bottom: 10px;
  }

  .projects {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* TESTING FOR MOBILE NAV BAR */
.hamburger,
.navcheck {
  display: none;
}

.site-nav {
  position: relative;
  z-index: 3;
  background-color: #151C31;
}

/* MOBILE ONLY */
@media (max-width: 900px) {
  /* show hamburger button */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    cursor: pointer;
  }
  .hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
  }

  /* collapse navigation bar by default */
  #ulnavbar {
    display: none;              /* hidden until toggled */
    flex-direction: column;     /* vertical list */
    gap: 0.75rem;               /* spaced out items */
    padding: 0.75rem 0;         /* tighter padding for dropdown */
  }

  /* display navigation bar when toggled in mobile interfaces */
  .navcheck:checked ~ #ulnavbar {
    display: flex;
  }

  /* full-width items: */
  #ulnavbar li {
    display: block;
  }
  #ulnavbar li a {
    display: block;
    padding: 14px 18px;
    font-size: 1.4rem;
  }

  /* designate navigation bar as fixed*/
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;              /* ensure nav sits above all */
    min-height: 56px;         /* consistent tap target height */
  }

  /* offset content so it doesn't hide under fixed nav */
  #home-graphics {
    margin-top: 56px;
  }
}