/* =====================================================================
   index.css
   Styles for the homepage (index.html) only.
   This file controls the hero section: name, title, divider, nav buttons.
   ===================================================================== */


/* --- HERO SECTION ---
   The full-page centered area containing name, title, and nav. */
.hero {
  min-height: calc(100vh - 57px);
  /* Takes up at least the full viewport height minus the contact header (~45px).
     This keeps the content centered on screen without overflowing.
     If header is taller/shorter, adjust 45px to match. */

  display: flex;
  /* Enables flexbox so we can center the content vertically and horizontally. */

  align-items: center;
  /* Vertically centers .hero-content inside .hero. */

  justify-content: center;
  /* Horizontally centers .hero-content inside .hero. */

  padding: 40px 24px;
  /* Adds breathing room around the content on smaller screens.
     First value (40px) = top/bottom, second (24px) = left/right.
     Reduce if content feels too padded on mobile. */
}

.hero-content {
  text-align: center;
  /* Centers all text and inline elements inside. */

  max-width: 820px;
  /* Limits how wide the content gets on large screens.
     Increase (e.g. 1000px) to allow wider layout, decrease to keep it narrower. */

  width: 100%;
  /* Allows the content to shrink on smaller screens. Keep this. */
}


/* --- YOUR NAME (above the main title) --- */
.hero-name {
  font-family: var(--font-display);
  /* Uses Obra Letra. */

  font-size: clamp(1.75rem, 5vw, 4.1rem);
  /* Responsive font size:
     - Minimum: 1.75rem (small screens)
     - Preferred: 5% of viewport width
     - Maximum: 4.1rem (large screens)
     Adjust these three values to change the size range. */

  font-weight: 400;
  /* Normal weight. Change to 600 for semi-bold. */

  letter-spacing: 0.0em;
  /* Change this if you want to space out letters */

  margin: 0 0 -10px 0;
  /* Bottom margin (third number) creates space between name and title.
     Increase to push the title further down. */

  color: var(--color-text);
  /* Uses the near-black text color. */

}


/* --- MAIN TITLE (Medical Illustration Portfolio) --- */
.hero-title {
  font-family: var(--font-display);
  /* Uses Obra Letra. */

  font-size: clamp(2.8rem, 9vw, 6.25rem);
  /* Large responsive size. Adjust the max (6.5rem) to make it bigger or smaller. */

  font-weight: 400;
  /* Normal weight. Change to 600 for semi-bold. */

  line-height: 1.1;
  /* Tight line height for big display text. Increase slightly if letters feel cramped. */

  margin: 0 0 24px 0;
  /* Space below the title before the divider line. Increase to push line down */

  color: var(--color-text);
  /* Uses the near-black text color. */
}


/* --- DIVIDER LINE (horizontal rule below title) --- */
.hero-divider {
  border: none;
  /* Removes the default browser border style from <hr>. */

  border-top: 3px solid var(--color-text);
  /* A single solid line. Increase to thicken, decrease to make thinner.
     Change var(--color-text) to any color if desired */

  width: 100%;
  /* How wide the line is relative to its container.
     100% = full width, 50% = half width. Adjust to taste. */

  margin: 0 auto 75px auto;
  /* auto left/right centers the line. The given number affects the space between line and buttons. Increase or decrease to move them up or down */
}


/* --- NAVIGATION BUTTONS CONTAINER --- */
.hero-nav {
  display: flex;
  /* Lays the buttons in a horizontal row. */

  justify-content: center;
  /* Centers the row of buttons. */

  align-items: stretch;
  /* Makes all buttons the same height as the tallest one. */

  gap: 150px;
  /* Space between the buttons. Increase for more breathing room between them. */

  flex-wrap: wrap;
  /* Buttons wrap to a new row on small screens. */
}


/* --- INDIVIDUAL NAV BUTTON --- */
.nav-btn {
  display: flex;
  /* Flexbox inside the button to center its text both ways. */

  align-items: center;
  /* Vertically centers text inside the button. */

  justify-content: center;
  /* Horizontally centers text inside the button. */

  background-color: var(--color-btn);
  /* Button background color. Edit --color-btn in shared.css to change all at once. */

  color: var(--color-text);
  /* Text color inside the button. */

  font-family: var(--font-display);
  /* Uses the body serif font for button labels. */

  font-size: clamp(1rem, 2.2vw, 1.25rem);
  /* Responsive button label size. Adjust the max (1.25rem) to make text larger. */

  font-weight: 400;
  /* Change to 600 for semi-bold */

  text-align: center;
  /* Centers multi-line text (e.g. "Medical\nIllustration"). */

  text-decoration: unset;
  /* Underline matches the design. Remove this line to remove the underline. */

  text-underline-offset: 4px;
  /* Moves the underline slightly below the text baseline. 0 = default position. */

  border-radius: 12px;
  /* Rounded corners. 0 = sharp corners, 50px = pill shape. */

  padding: 14px 28px;
  /* Inside spacing: 14px top/bottom, 28px left/right.
     Increase to make buttons taller or wider. */

  min-width: 160px;
  /* Minimum button width. Prevents buttons from being too narrow on large screens. */

  line-height: 1.4;
  /* Line height for multi-line button labels. */

  text-decoration-color: var(--color-text);
  /* Color of the underline. Matches text color by default. */

  transition: background-color 0.2s, transform 0.15s;
  /* Smooth hover animation. 0.2s = speed of color change, 0.15s = speed of lift. */

  cursor: pointer;
  /* Changes the mouse cursor to a hand pointer when hovering. Keep this. */
}

.nav-btn:hover {
  background-color: var(--color-btn-hover);
  /* Slightly darker background on hover. Edit --color-btn-hover in shared.css. */

  transform: translateY(-3px);
  /* Lifts the button up 3px on hover for a subtle interactive feel.
     Change to 0 to disable the lift effect. */
}

.nav-btn:active {
  transform: translateY(0);
  /* Pushes the button back down when clicked, simulating a press.
     Remove this rule to disable the press effect. */
}


/* --- RESPONSIVE: MOBILE ADJUSTMENTS --- */
@media (max-width: 842px) {
  /* These styles apply only when the screen is 842px wide or narrower */

  .hero-nav {
    gap: 20px;
    /* Reduces spacing between buttons on small screens. */
  }

  .nav-btn {
    min-width: 130px;
    /* Slightly smaller minimum width on mobile. */

    padding: 22px 24px;
    /* Less padding on mobile to keep buttons from overflowing. */
  }
}