/* =========================================================
   TERMINUS.ro - CSS curat + responsive
   Obiectiv:
   - Pe mobil: totul mai mare (font + padding + spațieri)
   - Imaginea barrels: 100% lățime, FĂRĂ crop (height:auto)
   - Pe desktop: imaginea rămâne 50%
   ========================================================= */

/* 1) Reset minim: eliminăm "surprizele" din browser */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #6B020F;
  color: #fff;
  line-height: 1.4;
}

/* 2) Header: titlu + meniu */
.header {
  text-align: center;
  background: rgba(0, 0, 0, 0.90);
  padding: 14px 14px; /* puțin mai generos (se simte mai “mare” pe mobil) */
}

.logo {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 10px 12px;
  margin-bottom: 8px; /* separă logo de meniu */
}

/* Meniu: păstrăm simplu și “tap-friendly” pe mobil */
.nav__link {
  display: inline-block;
  padding: 10px 10px;      /* butoane mai ușor de apăsat */
  margin: 0 6px;
  color: #fff;
  text-decoration: none;
}

.nav__link:hover { text-decoration: underline; }
.nav__link.active { color: #ffd24a; }

/* 3) Conținut: mai mult spațiu => site-ul “respiră” și pare mai mare */
main {
  padding: 18px 16px;
  text-align: center; /* vrei totul centrat pe pagină */
}

/* Textul "Pana la constructia..." */
h5 {
  margin: 12px 0 10px;
  color: yellowgreen;
  font-size: 18px; /* explicit -> mai mare pe mobil */
  font-weight: 700;
}

/* Link primuspub */
.primus-wrapper { margin-top: 10px; }

#Primus {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;              /* îl face mai “mare” + tap-friendly */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

#Primus:hover { text-decoration: underline; }

/* 4) Imagine + overlay:
   - container relativ => overlay absolut se poziționează peste imagine
   - pe mobil: 100% lățime
   - pe desktop: 50% lățime
*/
.hero {
  position: relative;
  width: 100%;          /* mobil: umple ecranul stânga-dreapta */
  margin: 16px auto 0;  /* centrat */
}

/* Imaginea: FĂRĂ crop => width:100% + height:auto */
#barrels {
  display: block;
  width: 100%;
  height: auto;
}

/* Textul "UNDER CONSTRUCTION" deasupra imaginii */
.construction {
  position: absolute;
  inset: 0; /* acoperă exact imaginea (cât are ea) */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  text-align: center;

  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  background: rgba(0, 0, 0, 0.35); /* strat transparent pentru lizibilitate */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* 5) Desktop enhancements:
   - păstrăm poza la 50% ca înainte
   - mărim puțin max-width-ul pentru look mai “așezat” */
@media (min-width: 900px) {
  main {
    padding: 22px 24px;
  }

  h5 {
    font-size: 20px;
  }

  .hero {
    width: 50%;         /* desktop: revine la 50% */
    max-width: 1100px;  /* opțional: nu devine uriașă pe ecrane foarte mari */
  }
}