/* =====> Styl mobilnego menu <===== */
@media (max-width: 768px) {
  /* Ukryj desktopowe menu */
  .desktop-nav {
    display: none !important;
  }

  /* Pokaż hamburger */
  .mobile-nav-toggle {
    display: block !important;
  }

  /* Podstawowe ukrycie menu mobilnego */
  .mobile-nav {
    display: none !important;
    flex-direction: column;
    gap: 12px;
    background-color: #0b1a2d;
    padding: 15px 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }

  /* Gdy aktywne – pokaż */
  .mobile-nav.active {
    display: flex !important;
    opacity: 1 !important;
    max-height: 500px !important;
  }

  /* I najważniejsza część — wygląd linków */
  .mobile-nav a {
    text-decoration: none !important;
    color: white !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    display: block !important;
    border-radius: 4px !important;
    transition: background 0.3s !important;
  }
  .mobile-nav a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }
}


/* === Style przeniesione z header.php === */
body { margin: 0; font-family: 'Roboto Mono', monospace; }
    header { background: #0b1a2d; color: white; }
    .site-container { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .logo { display: flex; align-items: center; gap: 20px; }
    .static-logo { width: 120px; height: auto; animation: logoPop 1.2s ease-out forwards; opacity: 0; }
    @keyframes logoPop {
      0% { transform: scale(1); opacity: 0; }
      50% { transform: scale(1.3); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .desktop-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
    .desktop-nav a { color: white; text-decoration: none; font-weight: 500; padding: 5px 10px; border-radius: 4px; transition: background 0.3s; }
    .desktop-nav a:hover { background: rgba(255,255,255,0.1); }

    /* hamburger */
    .mobile-nav-toggle { display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer; }
    /* mobile menu */
    .mobile-nav { display: none; flex-direction: column; gap: 12px; background: #0b1a2d; padding: 15px 0; }
    .mobile-nav a { color: white; text-decoration: none; font-size: 16px; padding: 8px 20px; border-radius: 4px; transition: background 0.3s; }
    .mobile-nav a:hover { background: rgba(255,255,255,0.1); }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .desktop-nav { display: none; }
      .mobile-nav-toggle { display: block; }
      .mobile-nav.active { display: flex; }
    }

/* === Style przeniesione z header.php === */
body { margin: 0; font-family: 'Roboto Mono', monospace; }
    header { background: #0b1a2d; color: white; }
    .site-container { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .logo { display: flex; align-items: center; gap: 20px; }
    .static-logo { width: 120px; height: auto; animation: logoPop 1.2s ease-out forwards; opacity: 0; }
    @keyframes logoPop {
      0% { transform: scale(1); opacity: 0; }
      50% { transform: scale(1.3); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .desktop-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
    .desktop-nav a { color: white; text-decoration: none; font-weight: 500; padding: 5px 10px; border-radius: 4px; transition: background 0.3s; }
    .desktop-nav a:hover { background: rgba(255,255,255,0.1); }

    /* hamburger */
    .mobile-nav-toggle { display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer; }
    /* mobile menu */
    .mobile-nav { display: none; flex-direction: column; gap: 12px; background: #0b1a2d; padding: 15px 0; }
    .mobile-nav a { color: white; text-decoration: none; font-size: 16px; padding: 8px 20px; border-radius: 4px; transition: background 0.3s; }
    .mobile-nav a:hover { background: rgba(255,255,255,0.1); }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .desktop-nav { display: none; }
      .mobile-nav-toggle { display: block; }
      .mobile-nav.active { display: flex; }
    }

/* Smooth scroll */

html {
  scroll-behavior: smooth;
}