background-attachment: scroll;

.hero, section { background-attachment: scroll !important; background-size: cover !important; }

/*
 * FORGE1.CA MOBILE FIXES
 * Fixes for the hero section and mobile layout
 */

/* Make sure viewport meta tag is in your HTML */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

/* Fix hero section background on mobile */
.hero,
[class*="hero"],
.banner,
section:first-of-type {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: scroll !important; /* Fixed backgrounds break on mobile */
  min-height: 50vh !important; /* Reduce height on mobile */
}

/* Fix the ForgeConnect logo/title section */
.hero-content,
.hero h1,
.hero-title {
  font-size: clamp(2rem, 8vw, 4rem) !important; /* Responsive sizing */
  padding: 1rem !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {

  /* Fix hero section */
  .hero,
  section:first-of-type {
    min-height: 60vh !important;
    padding: 2rem 1rem !important;
    background-attachment: scroll !important;
  }

  /* Fix the "FORGECONNECT" title */
  .hero h1,
  h1:first-of-type {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Fix subtitle "Connect Card" */
  .hero h2,
  .subtitle {
    font-size: 1.5rem !important;
    text-align: center !important;
  }

  /* Fix the description text */
  .hero p,
  .description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 0 1rem !important;
  }

  /* Fix buttons in hero */
  .hero button,
  .hero a[class*="button"] {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0.5rem auto !important;
    display: block !important;
  }

  /* Fix the yellow button container */
  .button-container,
  .cta-buttons {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  /* Fix navigation when closed */
  nav {
    background: rgba(0, 0, 0, 0.95) !important;
  }

  /* Make menu items larger */
  nav a,
  nav button {
    padding: 1rem !important;
    font-size: 1.1rem !important;
  }

  /* Fix feature cards */
  .feature-card,
  .card {
    margin: 1rem 0 !important;
    padding: 1.5rem !important;
  }

  /* Fix icons */
  .icon,
  svg {
    max-width: 60px !important;
    height: auto !important;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem !important;
  }

  .hero h2 {
    font-size: 1.25rem !important;
  }

  .hero p {
    font-size: 0.9rem !important;
  }
}

/* Landscape mobile fixes */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100vh !important;
  }
}