/* Breakpoints (from Tailwind)
   Phone: 640px
   Tablet: 768px, 1024px
   Desktop/laptop (MacBook Air and larger): 1280px
   Ref: https://tailwindcss.com/docs/responsive-design 
  */

/**
 * =============================================
 * =            ROOT STYLES / SETTINGS       =
 * =============================================
 *
 */

:root {
  --color-primary: #e2007a;
  --color-dark: #080908;
  --color-light: #ffffff;
  --color-secondary: #d00073;

  --width-standard: 95%;

  --width-column: 323px;

  --width-column-narrow: 265px;

  --project-card-padding-y: 0.5rem;
  --project-card-padding-x: 1.25rem;

  --color-background: #f2eeee;
  --shadow: 0 0.25rem 0.25rem rgba(104, 104, 104, 0.8);

  --color-shadow-decimal: 0, 0, 0;

  --shadow-dark-50: 0.5rem 0.5rem 0.5rem rgba(var(--color-shadow-decimal), 0.5);
  --shadow-top-dark-50: 0rem 0.5rem 0.5rem
    rgba(var(--color-shadow-decimal), 0.5);
  --shadow-dark-25: 0.5rem 0.5rem 0.5rem rgba(var(--color-shadow-decimal), 0.25);

  --rounded-lg: 0.6rem;
}

* {
  box-sizing: border-box;
}

/**
 * =============================================
 * =                 FONTS                     =
 * =============================================
 *
 */

/* WOFF2 version downloaded from https://gwfh.mranftl.com/fonts/roboto?subsets=latin */
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  src: url("../fonts/roboto/roboto-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-v30-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto/roboto-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**
 * =============================================
 * =                 GENERAL                   =
 * =============================================
 *
 */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto";
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: var(--color-dark);
  background-color: var(--color-background);
}

/* unset the font-size so have to explicitly set */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
  padding: 0;
  font-size: unset;
}

ul {
  list-style: none;
}

/* reset for forms */
/* https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms */
form,
button,
label,
input,
select,
textarea,
figure {
  font-family: inherit;
  font-size: 100%;
  margin-bottom: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* loosely based on Bootstrap .btn https://github.com/twbs/bootstrap/blob/v5.2.3/dist/css/bootstrap.css */
.btn {
  color: var(--color-light);
  background-color: var(--color-primary);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 1.875rem;
  border-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  /* 
  ensure stays only width of content in case in a flex container...goes to full width otherwise
  https://stackoverflow.com/questions/27722872/make-button-width-fit-to-the-text/62069093
*/
  width: fit-content;
}

.btn:hover {
  background-color: var(--color-secondary);
  transform: scale(1.03);
  box-shadow: 0 3px 8px rgba(208, 0, 115, 0.3);
}

.container {
  width: var(--width-standard);
  margin: 0 auto;
}

/* combination of Bootstrap card and styles from previous versions of portfolio */
.main-section {
  margin-bottom: 2rem;
  scroll-margin: 9rem;
  display: flex;
  flex-direction: column;
  background-color: var(--color-light);
  box-shadow: var(--shadow);
  border-radius: var(--rounded-lg);
  padding: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* NOTE: there is a little space above and below text. please accept it...don't let perfect be enemy of the good */
.section-title {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 1.125rem;
}

/**
 * =============================================
 * =              NAV HEADER                   =
 * =============================================
 *
 */

/* Note: stuff not 100% wide on Galaxy Fold b/c of the fold margin */
.nav-header {
  width: 100%;
  /* height accomodates MacBook Air camera location - per Figma prototype */
  height: 6rem;
  background-color: var(--color-light);

  /* sticky per https://github.com/twbs/bootstrap/blob/v5.2.3/dist/css/bootstrap.css */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
  margin-bottom: 2rem;

  /* MAYBE make sharper?? */
  box-shadow: 0 5px 20px -10px var(--color-dark);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--width-standard);
  margin: 0 auto;
  height: inherit;
}

.brand-name {
  font-style: normal;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 42px;

  /* color-primary */
  color: var(--color-primary);
  text-decoration: none;
}

.brand-name:hover {
  cursor: pointer;
}

.logo-image {
  width: 60px;
  height: 60px;
  margin-right: 0.5rem;
}

.branding {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  text-transform: uppercase;
  font-size: 28px;
  margin-left: auto;
}

.nav-item {
  transition: border-bottom 0.2s ease, color 0.2s ease;
}

.nav-item:hover,
.nav-item:focus {
  color: var(--color-primary);
  cursor: pointer;
  border-bottom: 2px solid var(--color-primary);
}

.nav-item.active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.nav-menu-link {
  text-decoration: none;
  color: inherit;
}

.hamburger {
  display: none;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 99999;
}

.hamburger-bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--color-dark);
}

/**
 * =============================================
 * =                  ABOUT                    =
 * =============================================
 *
 */

.about-content {
  display: flex;
  gap: 1rem;
}

/* HERO */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 4.688rem;
  width: 65%;
}

.headline {
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 2rem;
}
.summary {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 121%;
  margin-left: 3.125rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.summary > p {
  margin-bottom: 1rem;
}

.btn-cta {
  margin-top: 3rem;
  align-self: center;
}

.spotlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  width: 33%;
  margin: 50px 0 0 0;
}

/* SPOTLIGHT / QUOTE */
.spotlight-img-holder {
  width: 161px;
  height: 174px;
}

.spotlight-img-holder > img {
  width: 100%;
  height: 100%;
}

.quote-container {
  color: var(--color-primary);
  width: 100%;
}

.quote-text {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 140%;
  text-align: center;
}

.quote-container figcaption {
  font-size: 1rem;
  line-height: 150%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quote-container figcaption > cite {
  margin-left: 20px;
}
.quote-container a {
  color: inherit;
}

.quote-container a:hover {
  color: var(--color-dark);
}

/**
 * =============================================
 * =                  PROJECTS                 =
 * =============================================
 *
 */

.project-list {
  display: grid;
  justify-content: space-evenly;
  align-items: center;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--width-column-narrow), var(--width-column))
  );
  grid-auto-rows: auto;
  gap: 1.5rem;
}

.project-card {
  background-color: var(--color-light);
  height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: solid 1px var(--color-primary);
  /* min-width: var(--width-column); */
}

.project-image-holder {
  width: 100%;
  max-width: 100%;
  min-height: 270px;
  height: 270px;
  border-bottom: solid 2px var(--color-primary);
  margin-bottom: 1rem;
}

.project-image-holder > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 117%;
  width: 100%;
  height: 1.25rem;
  text-align: center;
  margin-bottom: 2rem;
}

.project-card-text {
  flex-grow: 1;
  font-size: 18px;
  line-height: 167%;
}

.project-counts {
  color: var(--color-primary);
  font-weight: bold;
  font-size: 0.7rem;
  justify-content: center;
  display: flex;
  gap: 0.75rem;
}

.project-pill-badge {
  background-color: var(--color-primary);

  /* 
    based on Bootstrap badge styling
    https://github.com/twbs/bootstrap/blob/v5.2.3/dist/css/bootstrap.css
  */
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: var(--color-light);
  /* --bs-badge-border-radius: 0.375rem; */
  --bs-border-radius-pill: 50rem;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-border-radius-pill);
}
.project-card-footer {
  font-size: 20px;
  line-height: 150%;
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--project-card-padding-y) var(--project-card-padding-x);
  margin-top: auto;
}

.project-card-body {
  flex-grow: 1;
  display: flex;
  align-items: space-between;
  justify-content: center;
  flex-direction: column;
  /* padding: 0 40px; */
  padding: var(--project-card-padding-y) var(--project-card-padding-x);
}

.project-card-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.project-card-link:hover {
  color: var(--color-dark);
}

.project-card-link > span {
  text-decoration: underline;
}

.project-card-icon {
  font-size: 1.5rem;
}

/**
 * =============================================
 * =                 SKILLS                    =
 * =============================================
 *
 */

.skills-list {
  list-style: inside;
  padding-left: 1rem;
  font-size: 1.15rem;
}

.skill-item {
  padding-bottom: 0.75rem;
}

.skill-title {
  margin-right: 0.5rem;
  display: inline;
  text-transform: uppercase;
  font-weight: 700;
}

/**
 * =============================================
 * =                CONTACT                    =
 * =============================================
 *
 */

.contact-container {
  display: grid;
  grid-template-columns: calc(50% - 2.5%) calc(50% - 2.5%);
  gap: 5%;
}

.contact-content,
.contact-form-holder {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  line-height: 1.7;
}

.contact-title {
  font-weight: 700;
  font-size: 1.625rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.contact-CTA {
  font-size: 1.75rem;
}

.contact-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: space-between;
  padding-left: 1rem;
  margin-top: 5rem;
}

.contact-link {
  font-size: 1.75rem;
  line-height: 127%;
  color: inherit;
}

.contact-link > i {
  margin-right: 0.5rem;
  color: var(--color-primary);
}

.contact-item {
  display: flex;
  align-items: center;

  gap: 1.5rem;
}

/* contact form */

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.contact-input-group {
  display: flex;
  flex-direction: column;
  font-size: 1.25rem;
  width: 100%;
}

.contact-form-label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.contact-form-input,
.contact-form-textarea {
  background-color: var(--color-light);
  border: solid 1px var(--color-primary);
  border-radius: 3px;
  padding: 0.5rem;
}

.contact-form-input {
  width: 100%;
}

.contact-form-textarea {
  width: 100%;
  height: 8.75rem;
  resize: vertical;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border: solid 2px var(--color-primary);
}

.btn-contact-form {
  width: 50%;
  margin: auto;
}

/* spam protection via hidden honeypot field */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.honeypot-field {
  opacity: 0;
  pointer-events: none;
}

/**
 * =============================================
 * =            MEDIA QUERIES                  =
 * =============================================
 *
 */

/* takes into account Galaxy Fold 280px width */
@media only screen and (max-width: 300px) {
  .project-card {
    width: var(--width-column-narrow);
  }
}

@media only screen and (max-width: 450px) {
  .brand-name {
    font-size: 1.75rem;
  }
}

@media only screen and (max-width: 700px) {
  .about-content {
    width: 100%;
    gap: 0.5rem;
  }
  .hero-container {
    width: 100%;
    margin: 0;
    align-items: center;
    gap: 25px;
    text-align: center;
  }

  .summary {
    margin: 0;
    font-size: 1.25rem;
  }

  .cta {
    margin-left: 0;
  }

  .skills-list {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 972px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;

    background-color: var(--color-light);
    height: 100vh;
    width: 100%;

    transition: 0.3s;
  }

  .nav-menu.expanded {
    left: 0;
  }

  .hamburger {
    display: block;
  }

  .hamburger.expanded .hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.expanded .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.expanded .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media only screen and (max-width: 1024px) {
  .about-content {
    flex-direction: column-reverse;
  }

  .spotlight {
    width: 100%;
  }

  .spotlight-img-holder {
    width: 82px;
    height: 86px;
  }

  .contact-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media only screen and (max-width: 1280px) {
  .contact-CTA {
    font-size: 1.25rem;
  }

  .contact-item {
    gap: 1rem;
  }
  .contact-link {
    font-size: 1.2rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* this actually causes it to wrap */
    word-break: break-all;
  }
}

/* this keeps it max 3 cols on larger screens & stays w/i margins with rest of screen sizes */
@media only screen and (min-width: 1280px) {
  .project-list {
    grid-template-columns: repeat(3, var(--width-column));
  }
}