/*
  Minimalist, responsive styles for the energy trading website.
  The palette uses deep blues and subtle reds to convey professionalism and
  trust, while clean typography (Inter) improves readability. Cards
  animate slightly on hover to give the page a "living" feel without
  overwhelming the user.
*/

:root {
  --primary: #0a1223;
  --secondary: #112240;
  --accent: #ff4c4c;
  --text-light: #e5e5e5;
  --text-muted: #a6b2d0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--primary);
  color: var(--text-light);
  line-height: 1.6;
  padding-top: 70px; /* space for fixed header */
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--primary);
  border-bottom: 1px solid #16203a;
  z-index: 1000;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-light);
}

.nav {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav a:hover {
  color: #ffffff;
}

.language a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.language a:hover {
  color: #ffffff;
}

/* Hero section */
.hero {
  min-height: 80vh;
  background-image: url('hero-bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero p {
  font-size: 1.25rem;
  color: var(--text-muted);
}

section {
  padding: 5rem 0;
}

h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  padding-bottom: 0.5rem;
}

.card-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.card-grid.vertical {
  flex-direction: column;
}

.card {
  background: var(--secondary);
  padding: 2rem;
  border-radius: 8px;
  flex: 1 1 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.card .avatar {
  width: 100%;
  height: 200px;
  background: #1e2a47;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.card h3 {
  margin-bottom: 0.75rem;
  color: var(--text-light);
  font-weight: 600;
}

.card p {
  color: var(--text-muted);
}

.apply {
  margin-top: 2rem;
  color: var(--text-muted);
}

.rodo {
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 0.6rem
}

a {
  color: #76b3fa;
  text-decoration: underline;
}

footer {
  background: var(--primary);
  border-top: 1px solid #16203a;
  padding: 2rem 0;
}

footer p {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.avatar {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- GLOBAL SMALL-SCREEN TWEAKS ---------- */
.hidden           { display: none; }

.hamburger {
  display: none;            /* domyślnie ukryty – pokażemy go tylko na telefonie */
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--text-light);
  cursor: pointer;
}

/* spraw, by zdjęcia w kartach były zawsze okrągłe i nie wychodziły poza ramkę */
.card .avatar       { width: 100%; height: 200px; border-radius: 50%; overflow: hidden; }
.card .avatar img   { width: 100%; height: 100%; object-fit: cover; }

/* ---------- MEDIA QUERIES: ≤ 768 PX ---------- */
@media (max-width: 768px) {

  /* header */
  header .container      { padding: 0.75rem 1rem; }
  .hamburger             { display: block; }       /* pokaż ikonę ☰ */
  nav ul.nav             { flex-direction: column; gap: 1rem; padding: 1rem; }
  nav.ul,                 /* dla starej struktury */
  nav                     { width: 100%; }
  #mobile-menu            { position: absolute; top: 100%; left: 0; width: 100%; background: var(--secondary); }
  #mobile-menu.show       { display: block; }

  /* ukryj sztywną nawigację, jeśli nie korzysta z hamburgera */
  nav:not(#mobile-menu)   { display: none; }

  /* karty w kolumnie */
  .card-grid              { flex-direction: column; }

  /* hero – mniejszy, bez przyklejenia tła, dostosuj typografię */
  .hero                   { min-height: 60vh; background-attachment: scroll; }
  .hero h1                { font-size: 1.9rem; }
  .hero p                 { font-size: 1rem; }

  /* --- hamburger + language po PRAWEJ stronie --- */
header .container { position: relative; }          /* nadaj kontekst absolute */

.hamburger {
  position: absolute;
  right: 1rem;               /* całkiem w prawo */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;            /* kasujemy ewentualne auto-marginesy */
}

.language {
  position: absolute;
  right: 3.5rem;             /* ~2rem odstępu od hamburgera */
  top: 50%;
  transform: translateY(-50%);
}
}

/* ---------- DESKTOP (≥ 769 px) ---------- */
@media (min-width: 769px) {

  /* pokaż pasek nawigacji nawet jeśli ma klasę .hidden */
  #mobile-menu {
    display: flex !important;          /* kluczowe */
    position: static;
    width: auto;
    background: transparent;
  }

  /* układ poziomy jak dawniej */
  #mobile-menu .nav          { flex-direction: row; gap: 2rem; padding: 0; }
  #mobile-menu .nav li a     { padding: 0.25rem 0; }

  /* chowamy hamburgera, bo nie jest potrzebny */
  .hamburger                 { display: none; }
}