/*
  home.css - Final Update
*/

/* Hero block */
.hero-cover {
  position: relative;
  top: calc(-1 * (var(--hero-header-h, 64px) + 3.25rem));
  margin-bottom: calc(-1 * (var(--hero-header-h, 64px) + 3.25rem*2));

  /* This is the final change: extend the hero's height to cover the gap */
  height: calc(var(--hero-height, 100vh) + var(--hero-header-h, 64px) + 3.25rem);

  min-height: 60vh;

  /* Fixed cover image with overlay */
  background-image: var(--hero-overlay), var(--hero-image);
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-position: var(--hero-position), var(--hero-position);
  background-attachment: fixed; /* Static image effect */

  display: grid;
  align-items: end;
  isolation: isolate;
}

/* Fallback for iOS Safari where background-attachment: fixed is buggy */
@supports (-webkit-touch-callout: none) {
  .hero-cover {
    background-attachment: scroll;
  }
}

.hero-cover__inner {
  position: relative;
  color: #ffffff;
  padding: 3rem 1rem;

  /* Constrain to content width */
  max-width: 60rem;
  margin-left: max(
    1rem,
    calc((100vw - var(--md-content-width, 64rem)) / 2)
  );
}

/* Bottom-left placement on wide screens */
@media (min-width: 76.25rem) {
  .hero-cover__inner {
    padding: 4rem 2rem;
  }
}

.hero-title {
  margin: 0 0 0.25rem 0;
  line-height: 1.1;
  font-weight: 800;
  font-size: clamp(2rem, 2.8vw + 1.4rem, 3.5rem);
}

.hero-subtitle {
  margin: 0.2rem 0 1.2rem 0;
  font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.25rem);
  opacity: 0.95;
}

/* Header transparency while over hero */
.md-header--transparent {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Make header content readable on top of the cover */
.md-header--transparent .md-header__title,
.md-header--transparent .md-header__button,
.md-header--transparent .md-search__input,
.md-header--transparent .md-search__icon,
.md-header--transparent .md-tabs__link,
.md-header--transparent .md-logo {
  color: #fff !important;
  fill: #fff !important;
}

/* Search field outline tint on hero */
.md-header--transparent .md-search__form {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.08);
}
.md-header--transparent .md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

/* Ensure tabs don't add a background while over hero */
.md-header--transparent + .md-tabs {
  background: transparent !important;
  box-shadow: none !important;
}

/* Respect your dark scheme */
[data-md-color-scheme="slate"] .hero-cover__inner {
  color: #fff;
}

/* Optional: adjust your existing header gradient to only apply when not over hero */
.md-header {
  transition: background-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

/* 0) Prevent grey flash before JS runs (Material starts with html.no-js) */
html.no-js body:has(.hero-cover) .md-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* 1) Transparent header + white controls only on hero pages */
body.hero-page .md-header--transparent,
body.hero-page .md-header--transparent .md-header__inner {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.hero-page .md-header--transparent .md-header__title,
body.hero-page .md-header--transparent .md-header__button,
body.hero-page .md-header--transparent .md-search__input,
body.hero-page .md-header--transparent .md-search__icon,
body.hero-page .md-header--transparent .md-tabs__link,
body.hero-page .md-header--transparent .md-logo {
  color: #fff !important;
  fill: #fff !important;
}

body.hero-page .md-header--transparent .md-search__form {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.08);
}
body.hero-page .md-header--transparent .md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

/* 2) Put navigation tabs at the top under header on the homepage */
body.hero-page .md-tabs {
  position: fixed;
  top: var(--hero-header-h, 64px);
  left: 0;
  right: 0;
  z-index: 2; /* header is above, content is below */
  background: transparent !important;
  box-shadow: none !important;
}

/* Make tab text readable while over the cover */
body.hero-page.over-hero .md-tabs .md-tabs__link {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* When scrolled past the cover, revert tab appearance */
body.hero-page:not(.over-hero) .md-tabs .md-tabs__link {
  color: inherit !important;
  text-shadow: none;
}

/* Neutralize possible theme overlays/pseudo-elements */
body.hero-page .md-header--transparent::before,
body.hero-page .md-header--transparent::after,
body.hero-page .md-header--transparent .md-header__inner::before,
body.hero-page .md-header--transparent .md-header__inner::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* Fix for white bar at bottom in light mode */
body.hero-page {
  background-color: #1e2129; /* Match .about-section background */
}

/* =================================================================== */
/* Homepage Content Sections                                           */
/* =================================================================== */

/* The outer wrapper for a full-width content band. */
.content-section {
  /* This combination creates the full-width background effect */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  /* Prevents horizontal scrollbars from appearing */
  overflow-x: clip; 

  /* Vertical spacing for the section */
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* The inner container that realigns content to the site's standard width. */
.content-section__inner {
  max-width: var(--md-content-width, 64rem);
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* --- Welcome Section (Always White) --- */
.welcome-section {
  background-color: #FFFFFF; /* White background */
}

.welcome-section, .welcome-section h1 {
  color: #212529; /* A dark, soft black for text */
}

.welcome-section a {
  color: var(--md-primary-fg-color, #00A6FF);
}

/* --- About Me Section (Always Dark) --- */
.about-section {
  background-color: #1E2129; /* Custom dark background */
}

/* Ensure text and other elements are light and readable */
.about-section,
.about-section h1,
.about-section p,
.about-section li {
  color: #eceff1; /* A light, soft white */
}

/* Override inline styles from the markdown file for better contrast */
.about-section p[style*="color: #666"] {
  color: #b0bec5 !important; /* A lighter gray for your subtitle */
}

.about-section section[style*="border: 1px solid #e0e0e0"] {
  border-color: #455a64 !important; /* A darker, subtle border for your photo */
}

.about-section a:not(.social-links a) {
  color: #82b1ff; /* A readable light blue for inline links */
}

/* --- Integrated Social Links --- */
.social-links {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* Space between icons */
}

.social-links a {
  color: #b0bec5 !important; /* Sets the default icon color */
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  transform: scale(1.15);
  color: #ffffff !important; /* Makes the icon brighter on hover */
}

/* Adjust the size of the embedded SVG icons */
.social-links a svg {
  width: 2rem;
  height: 2rem;
  display: block; /* Ensures proper alignment */
}