/* =========================================
   NAGŁÓWEK GŁÓWNY - WSPÓLNE
   ========================================= */
.custom-header-wrapper {
    background-image: url('../../images/headers/www/backg_nag.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* =========================================
   WERSJA MOBILNA (Smartfony)
   ========================================= */
.mobile-custom-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mch-info {
    text-align: center;
}

.mch-title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #0066b3; /* Kolor dopasowany do logo */
    text-decoration: none;
    line-height: 1.2;
}

.mch-title:hover {
    text-decoration: none;
    color: #004d88;
}

.mch-address {
    display: block;
    font-size: 13px;
    color: #555;
    margin-top: 3px;
}

.mch-actions {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}

/* Wyraźny przycisk Rejestracji */
.mch-rej-btn {
    flex-grow: 1;
    background-color: #0066b3;
    color: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
    padding: 10px;
}

.mch-rej-btn:hover,
.mch-rej-btn:focus,
.mch-rej-btn:active {
    background-color: #004d88;
    color: #ffffff;
    text-decoration: none;
}

/* Ikona Facebooka na mobile */
.mch-fb-btn {
    flex-shrink: 0;
    display: flex;
}

.mch-fb-btn img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* =========================================
   WERSJA DESKTOPOWA (Komputery)
   ========================================= */
.desktop-custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dch-title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #0066b3;
    text-decoration: none;
    margin-bottom: 2px;
}

.dch-title:hover {
    text-decoration: none;
    color: #004d88;
}

.dch-address {
    font-size: 13px;
    color: #555;
}

.dch-right {
    text-align: right;
}

.dch-top-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.dch-rej-link {
    font-size: 14px;
    font-weight: bold;
    color: #0066b3;
    text-decoration: none;
    padding-right: 10px;
    border-right: 1px solid #ccc; /* Subtelny separator oddzielający link od ikon */
}

.dch-rej-link:hover {
    text-decoration: underline;
    color: #004d88;
}

.dch-icon-link img {
    height: 35px;
    width: auto;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.dch-icon-link:hover img {
    opacity: 0.8;
}

.dch-contact {
    font-size: 13px;
    color: #333;
}
/* --- KONTENER I STRZAŁKI --- */
.mobile-nav-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.nav-arrow {
  flex-shrink: 0; /* KLUCZOWE: Zapobiega znikaniu i zgniataniu strzałki */
  background: transparent;
  border: none;
  font-size: 24px; /* Nieco większe, łatwiejsze do kliknięcia */
  color: #333; /* Możesz zmienić np. na #0056b3, by pasowało do nagłówków */
  cursor: pointer;
  padding: 10px 5px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s; /* Płynne znikanie */
}

/* Wymuszenie, by strzałki, które są "hidden", nadal trzymały przestrzeń */
.nav-arrow.hidden {
  visibility: hidden;
  opacity: 0;
}

.nav-arrow:hover {
  color: #000;
}

/* --- NAWIGACJA MOBILNA --- */
.mobile-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 15px;
  padding: 15px 0; /* Wyzerowany padding boczny, bo miejsce zajmują strzałki */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth; /* Płynna animacja po kliknięciu strzałki */
  flex-grow: 1; /* Sprawia, że menu zajmuje całą wolną przestrzeń między strzałkami */
}

/* Ukrywa pasek przewijania w Chrome/Safari/Edge */
.mobile-nav::-webkit-scrollbar {
  display: none;
}

/* --- POJEDYNCZE ELEMENTY --- */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: #333;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  flex: 0 0 85px; /* Stała szerokość elementu */
}

.nav-item img {
  width: 45px;
  height: auto;
  margin-bottom: 8px;
  display: block;
}

.nav-item:hover,
.nav-item:focus {
  text-decoration: none;
  opacity: 0.8;
}