/* Landing page of www.hhitalia.it. Look and feel follow heinenhopman.com/it:
   same hero photo, white logo on a dark photo, rounded uppercase button.
   Their headings use Eurostile and Museo Sans (Adobe Fonts, licensed per
   domain), so everything here is set in Montserrat, which they also use and
   which is free (SIL OFL, licence in fonts/OFL.txt). */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/montserrat-latin-var.woff2") format("woff2");
}

:root {
  --hh-blue: #00a1ff;
  --hh-blue-dark: #1372a9;
  --hh-ink: #323232;
  --hh-navy: #0b2340;
  --on-photo: #ffffff;
  --footer-bg: #0b1726;
  --footer-text: rgba(255, 255, 255, 0.78);
  --gutter: clamp(16px, 5vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 300;
  color: var(--on-photo);
  background: var(--hh-navy);
}

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding: 24px var(--gutter);
}

.logo img {
  display: block;
  width: 158px;
  height: auto;
}

.hero {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 140px var(--gutter) clamp(48px, 9vh, 96px);
  background-color: var(--hh-navy);
  background-image:
    linear-gradient(180deg, rgba(5, 18, 36, 0.3) 0%, rgba(5, 18, 36, 0) 25%, rgba(5, 18, 36, 0) 65%, rgba(5, 18, 36, 0.55) 100%),
    url("hero-2000.webp");
  background-size: cover;
  background-position: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--on-photo);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button-blue {
  background: var(--hh-blue);
  border-color: var(--hh-blue);
}

.button-blue:hover,
.button-blue:focus-visible {
  background: var(--hh-blue-dark);
  border-color: var(--hh-blue-dark);
}

.button:focus-visible {
  outline: 2px solid var(--on-photo);
  outline-offset: 3px;
}

.legal {
  padding: 20px var(--gutter);
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.legal p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}

.legal strong {
  font-weight: 600;
  color: var(--on-photo);
}

.legal a {
  color: var(--footer-text);
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--on-photo);
}

@media (max-width: 900px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(5, 18, 36, 0.3) 0%, rgba(5, 18, 36, 0) 25%, rgba(5, 18, 36, 0) 65%, rgba(5, 18, 36, 0.55) 100%),
      url("hero-1200.webp");
    background-position: 60% center;
  }
}

@media (max-width: 480px) {
  .logo img {
    width: 125px;
  }

  .hero .button {
    flex: 1 1 100%;
  }
}