/* ==========================================================================
   home.css — home page only (loaded via $extra_styles on index.php)
   Reuses the tokens from site.css (--sans, --serif). Everything here is
   scoped under #home so it can't leak onto About or Portfolio.
   ========================================================================== */

#home { --signup-h: 40px; min-height: 100vh; }

/* ---- Hero ---------------------------------------------------------------- */
#home .hero {
  position: relative;
  min-height: calc(100vh - var(--signup-h));
  display: grid;
  place-items: center;
  padding: 20px;
  background: #111 url("/assets/img/capri.webp") center / cover no-repeat;
  /*background: #111 url(../../img/home/capri.webp) center / cover no-repeat;*/
}

#home .hero__frame {
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(10, 12, 20, .70);
  padding: 42px clamp(28px, 6vw, 70px);
  text-align: center;
  max-width: 92vw;
}

#home .hero__name {
  margin: 0 0 .55em;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(24px, 4.4vw, 40px);
  letter-spacing: .28em;
  color: #fff;
  white-space: nowrap;
}

#home .hero__tag {
    margin: 0;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(16px, 2.6vw, 20px);
    letter-spacing: .35em;
    color: #fff;
    text-transform: uppercase;
}

/* ---- Nav + footer floated over the image --------------------------------- */
#home .site-header {
  position: absolute;
  top: var(--signup-h);
  left: 0; right: 0;
  z-index: 20;
  background: rgba(10, 12, 20, .42);
  border-bottom: 0;
}
#home .nav__logo,
#home .nav__links a,
#home .nav__links a.is-active,
#home .nav__contact { color: #fff; }
#home .nav__links a:hover,
#home .nav__contact:hover { color: #d6d6d6; }
#home .nav__toggle span { background: #fff; }

/* Dropdown restyled for the dark bar */
#home .nav__dropdown {
  background: rgba(18, 20, 28, .96);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
#home .nav__dropdown-heading { color: #fff; }
#home .nav__dropdown a { color: #e8e8e8; }
#home .nav__dropdown li.is-empty { color: #9a9a9a; }

#home .site-footer {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  margin: 0;
  z-index: 20;
  padding: 12px 28px;
  background: rgba(10, 12, 20, .42);
  border-top: 0;
  color: #fff;
}
#home .site-footer__copy { color: #fff; }

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 720px) {
  #home .hero__name { white-space: normal; letter-spacing: .16em; }
  /* nav collapses to the hamburger (site.css); keep it readable on the image */
  #home .nav__links {
    background: rgba(18, 20, 28, .96);
    border-bottom: 0;
  }
}