/* ==================================================== */
/* --- Duy N Tran - Portfolio Website - CSS Styling --- */
/* ==================================================== */

:root { /* Root Element */
  --background-color: #d8d8d8;

  --accent-color-1: #8c8a54;
  --accent-color-2: goldenrod;

  --text-color-light: #ffffff;
  --text-color-dark: #5f5f5f;

  --site-y-margin: 15vh;
  --site-y-margin-mobile: 10vh;
  --site-x-margin-mobile: 7vw;

  --transition-speed: 0.3s;
}

* { /* Apply to all elements */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 20rem; /* 320px - Min site width*/

  scroll-behavior: smooth;

  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-color-light);

  background-color: var(--background-color);
}

header, footer {
  height: var(--site-y-margin); /* Header/ Site top y-margin */
}
.page-container {
  width: 80%;
  max-width: 100rem;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

body {
  font-size: 1.125rem;
}


/* --------- Element Defaults --------- */

a { color: var(--text-color-light); text-decoration: none; }
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
img { pointer-events: none; -webkit-touch-callout: none;}
input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* --------- Background Image on Home Page --------- */

html:has(.page--home) {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/home_bg.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #000;
}

main {
  flex: 1;
}

/* --------- Footer --------- */

.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Center elements y-direction */
  width: 100%;
  height: 3rem;
}

.footer__left {
  display: flex;
}

.footer__right {
  display: flex;
  justify-content: flex-end;

  gap: 0.75rem;
}

.footer__right a {
  transition: var(--transition-speed);
}

.footer__right a:hover {
  color: var(--accent-color-1);
}

/* --------- Nav Bar --------- */

nav {
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3rem;

  font-size: 1.75rem;
  text-transform: lowercase;
}

nav svg {
  fill: var(--text-color-light);
  transition: var(--transition-speed);
}

.sidebar__hamburger-btn:hover svg,
.sidebar__close-btn:hover svg {
  fill: var(--accent-color-1);
}

.mainnav__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mainnav__left {
  display: flex;
  width: 100%;
  list-style: none;
}

.mainnav__left a {
  display: flex;
  white-space: nowrap;

  /* Nav Title Hover Effect */
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-color-2), var(--accent-color-1));
  -webkit-background-clip: text;
  background-clip: text;
  transition: color var(--transition-speed);
  color: var(--text-color-light);
}

.mainnav__left a:hover,
.mainnav__left a:focus-visible {
  color: transparent; /* Reveal gradient text on hover/focus */
  outline: none;
}

.mainnav__right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  list-style: none;
  gap: 0.75rem; /* Gap between nav labels */
}

.mainnav__right a {
  display: flex;
  align-items: center;
  align-self: stretch;
  transition: var(--transition-speed);
}

.mainnav__right a:hover {
  color: var(--accent-color-1);
}

.mainnav__right a:focus-visible {
  color: var(--accent-color-1);
  outline: none;
  text-decoration: underline;
}

.dropdown__btn {
  background-color: transparent;
  border: none;

  display: flex;
  align-items: center;

  color: var(--text-color-light);
  text-transform: lowercase;
  transition: var(--transition-speed);
}

.dropdown__btn:hover {
  color: var(--accent-color-1);
}

.dropdown__btn:focus {
  color: var(--accent-color-2);
}

.dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.dropdown__content {
  position: absolute;
  top: 100%;
  padding: 0.5rem 0;
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
  min-width: 6.25rem;

  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s linear;
}

.dropdown__btn[aria-expanded="true"] + .dropdown__content {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s, opacity 0.3s linear;
}

/* --------- Sidebar --------- */

.sidebar {
  position: fixed;
  z-index: 200;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;

  padding: calc(var(--site-y-margin-mobile) - 3rem) var(--site-x-margin-mobile);

  background-color: rgb(95, 95, 95, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  display: none;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;
}

.sidebar__top {
  display: flex;
  flex-direction: column;
}

.sidebar__bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  font-size: 1.25rem;
  padding-bottom: 2.5rem;
}

.sidebar hr {
  border: 1px solid var(--text-color-light);
  margin: 1rem 0 1rem auto;
  width: 7rem;
}

.sidebar a {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  width: 100%;
  height: 2.75rem; /* Sidebar elements spacing */
  column-gap: 0.5rem; /* Horizontal gap between dropdown label and icon */

  transition: var(--transition-speed);
}

.sidebar__bottom a {
  height: 2rem;
}

.sidebar__close-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 3rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-speed);
}

.sidebar a:hover {
  color: var(--accent-color-1);
}

.sidebar__hamburger-btn {
  display: none;
}

.sidebar__hamburger-btn button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sidebar ul {
  list-style: none;
}

/* Sidebar Submenu */

.sidebar__dropdown-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 2.75rem;
  column-gap: 0.5rem;

  background-color: transparent;
  text-transform: lowercase;
  border: none;
  cursor: pointer;
  transition: var(--transition-speed);
}

.sidebar__dropdown-btn:hover {
  color: var(--accent-color-1);
}

.sidebar__dropdown-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
  transition: 200ms ease;
}

.sidebar__dropdown-btn--open svg:first-child {
  rotate: -180deg;
}

.footer__right svg {
  width: 1em;
  height: 1em;
}

.sidebar__sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: var(--transition-speed) ease-in-out;
}

.sidebar__sub-menu > ul {
  overflow: hidden;
}

.sidebar__sub-menu--open {
  grid-template-rows: 1fr;
}

/* Hide "Home" link on the homepage */
.page--home .mainnav__right li:has(a[href="index.html"]),
.page--home .sidebar li:has(a[href="index.html"]) {
  display: none;
}


/* --------- All Pages --------- */

.main__container {
  padding: 3rem 0 4.5rem;
}

.page-title {
  font-size: 5rem;
  text-transform: lowercase;
  padding-bottom: 1.5rem;
  background: radial-gradient(circle closest-corner at var(--mouse-x, 0%) var(--mouse-y, 50%), var(--accent-color-2) 25%, var(--accent-color-1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent-color-1);
  transition: color var(--transition-speed);
}

.page-title:hover {
  color: transparent;
}

/* --------- Home Page --------- */

.page--home .main__container {
  width: 100%;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.page--home main {
  display: flex;
  align-items: stretch;
}

.page--portfolio .page-container {
  height: 100vh;
  height: 100dvh;
}

.page--portfolio main {
  display: flex;
}

.page--portfolio .main__container {
  display: flex;
  flex: 1;
  height: 100%;
  padding: 0;
}

body.simulated-fs header,
body.simulated-fs footer {
  display: none;
}

body.simulated-fs .fp-iframe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.fp-iframe {
  border: none;
  width: 100%;
  height: 100%;
}


.intro {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.intro__text {
  width: 100%;
}

.intro__text p {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 300;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}




/* --------- Photography Page --------- */

.gallery {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.gallery__item {
  position: relative;
  max-width: 75rem; /* 1200px - Max image width */
  cursor: pointer;
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.gallery__item .gallery__caption {
  visibility: hidden;
  opacity: 0;

  position: absolute; /* Position image name on top of image */
  padding: 0.5rem;
  font-size: 1rem;
  pointer-events: none;

  /* Gradient */
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 8%);
  transition: visibility 0.8s, opacity 0.8s linear;
}

.gallery__item:hover .gallery__caption {
  visibility: visible;
  opacity: 1;
}

/* --------- About Page --------- */

.about {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  gap: 3rem;

  color: var(--text-color-dark);
}

.about__portrait img {
  margin: 0 auto;
  border-radius: 50%;
  width: 100%;
  max-width: 29rem;
  min-width: 0;
}

.about__portrait {
  display: flex;
  flex: 1;
  position: relative;
  width: 100%;
  min-width: 29rem;
}

.about__right {
  display: flex;
  flex: 3;
  gap: 3rem;
  align-items: flex-start;
  align-self: center;
}

.about__text {
  flex: 2;
  min-width: 25rem;
  max-width: 65ch;
}

.about__cv {
  flex: 1;
  max-width: 29rem;
}

.about__text h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.about__cv h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: var(--accent-color-1);
}

.about__cv hr {
  margin: 1rem 0;
}

.about h3 {
  margin-bottom: 1rem;
}

.about p {
  margin-bottom: 1.25rem;
}

.about p:last-child {
  margin-bottom: 0;
}

/* --------- Animations --------- */
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-in-fast {
  animation: 1s fade-in backwards;
}

.fade-in-slow {
  animation: 3s fade-in backwards;
}

.fade-in-delayed {
  animation: fade-in 2s linear 1s backwards;
}


/* --------- Lightbox --------- */

.lightbox {
  z-index: 300;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  touch-action: manipulation;
}

.lightbox--active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox:focus {
  outline: none;
}

/* --- Lightbox Image --- */
.lightbox img {
  max-width: 85%;
  max-height: 85%;
  pointer-events: auto;
}

.lightbox__caption {
  position: absolute;
  bottom: 3%;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

/* Disable scrolling when lightbox is active or sidebar is open */
body.no-scroll, body:has(.lightbox--active) {
  overflow: hidden;
}

/* Hide main image caption when lightbox is active */
body:has(.lightbox--active) .gallery__item .gallery__caption {
  display: none;
}

/* --- Lightbox Buttons --- */
.lightbox__btn {
  position: absolute;

  background-color: transparent;
  border: none;
  padding: 1.25rem;

  color: var(--text-color-light);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--transition-speed);

  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox__btn:hover {
  color: var(--accent-color-1);
}

.lightbox__close-btn {
  top: 3%;
  right: 3%;
}

.lightbox__prev-btn {
  left: calc(3% + 0.25rem);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next-btn {
  right: calc(3% + 0.25rem);
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================= */
/* --------------- Media Queries --------------- */
/* ============================================= */

/* --------- Mobile Breakpoint (1080px) --------- */
@media(max-width: 67.5rem) {

header, footer {
    height: var(--site-y-margin-mobile); /* Site y-margin */
  }
  .page-container {
    width: calc(100% - 2 * var(--site-x-margin-mobile)); /* Main site x-margin - Mobile */
  }
  .page--photography .page-container, .page--portfolio .page-container {
    width: 100%; /* Photo and Portfolio pages x-margin */
  }
  .page--photography :is(nav, .page-title, footer), .page--portfolio :is(nav, .page-title, footer) {
    padding-left: var(--site-x-margin-mobile); /* Photo pages x-margin */
    padding-right: var(--site-x-margin-mobile); /* Photo pages x-margin */
  }

  /* --- Nav Bar --- */


  .hide-on-mobile {
    display: none; /* Hide navbar - Mobile */
  }
  .sidebar__hamburger-btn {
    display: block; /* Show sidebar menu button - Mobile */
  }

  /* --------- All Pages --------- */

  .page-title {
    font-size: 4rem;
  }

  /* --- Photography Page --- */

  .gallery {
    row-gap: 0;
  }

  /* --- About Page --- */

  .about {
    flex-direction: column;
    align-items: flex-start;
  }
  .about__right {
    flex-direction: column;
    align-self: flex-start;
  }
  .about__portrait {
    min-width: unset;
    width: 100%;
  }
  .about__portrait img {
    margin: 0;
  }
  .about__text {
    min-width: unset;
  }
  .about__text h2 {
    font-size: 2rem;
  }
  .about__cv h2 {
    font-size: 1.75rem;
  }
  .page--about hr {
    max-width: 29rem;
  }

  /* --- Footer --- */

  .footer__left {
    font-size: 1rem;
  }
  .footer__right {
    display: none; /* Hide contact links - mobile */
  }

  /* --- Lightbox --- */

  .lightbox img {
    max-width: 100%;
    max-height: 100%;
  }
  .lightbox__caption {
    font-size: 0.875rem;
    bottom: 3.25rem;
  }
  .lightbox__prev-btn, .lightbox__next-btn {
    top: auto;
    bottom: 1.5rem;

    transform: none;
    font-size: 0.875rem;
  }
}