<header class="border-b bg-white backdrop-blur-sm border-brand-pink/20 sticky top-0 z-50">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">

    <!-- Logo -->
    <a href="https://chcemmat.sk" class="flex items-center gap-3">
      <div class="logo-bg">
        <img 
          src="<?php echo get_template_directory_uri(); ?>/assets/images/chcemmat.png" 
          class="h-12 w-12" 
          alt="ChcemMať Logo"
        />
      </div>
      <h1 class="text-2xl font-bold text-brand-blue">ChcemMať</h1>
    </a>

    <!-- Navigation -->
    <nav class="hidden md:flex items-center gap-8 absolute left-1/2 transform -translate-x-1/2">
      <a href="https://chcemmat.sk/vyhody" class="text-brand-blue hover:text-brand-pink-accent font-medium transition-colors">Výhody wishlistov</a>
      <a href="<?php echo home_url('/'); ?>" class="text-brand-blue hover:text-brand-pink-accent font-medium transition-colors">Blog</a>
      <a href="https://chcemmat.sk/kontakt" class="text-brand-blue hover:text-brand-pink-accent font-medium transition-colors">Kontakt</a>
    </nav>

    <!-- Right side (Login/Register) -->
    <div class="hidden md:flex items-center gap-4">
      <!-- Login → appka -->
      <a href="https://chcemmat.sk/auth/login">
        <button class="text-brand-blue hover:bg-brand-pink-light rounded-xl px-3 py-1 transition-colors">Prihlásiť sa</button>
      </a>

      <!-- Register → appka -->
      <a href="https://chcemmat.sk/auth/register">
        <button class="bg-gradient-to-r from-brand-blue to-brand-blue-dark text-white font-semibold rounded-2xl px-4 py-2 transition-colors">
          Začať
        </button>
      </a>
    </div>

  </div>
</header>
/* --------------------------------- */
/* Farby pre menu a tlačidlá (override !important) */
/* --------------------------------- */
.text-brand-blue {
    color: #6D8CFF !important;
}

.text-brand-blue-dark {
    color: #556EDB !important;
}

.text-brand-pink {
    color: #FF91C1 !important;
}

.text-brand-pink-light {
    color: #FFD6E0 !important;
}

.text-brand-pink-accent {
    color: #E85A7E !important;
}

.hover\:text-brand-pink-accent:hover {
    color: #c24c69 !important;
}

/* odkazy menu */
.menu-link {
    color: #6D8CFF !important;
    transition: color 0.2s ease;
}

.menu-link:hover {
    color: #c24c69 !important;
}
/* --------------------------------- */
/* Presné override farieb menu v headeri */
/* --------------------------------- */
header a,
header nav a,
header .menu-link {
    color: #6D8CFF !important;       /* text modrý */
    transition: color 0.2s ease;
}

header a:hover,
header nav a:hover,
header .menu-link:hover {
    color: #c24c69 !important;       /* hover ružový */
}
/* --------------------------------------------- */
/* Full-width text pre články na mobilných zariadeniach */
/* --------------------------------------------- */
@media (max-width: 768px) {
    .post-content {
        width: 100% !important;        /* text zaberie celú šírku kontajnera */
        max-width: 100% !important;    /* žiadne obmedzenie šírky */
        margin-left: 0 !important;     /* odstráni ľavý margin */
        margin-right: 0 !important;    /* odstráni pravý margin */
        padding-left: 0 !important;    /* odstráni padding z boku */
        padding-right: 0 !important;   /* odstráni padding z boku */
    }
}
/* Oprava nadpisov rozbitých Tailwind preflight resetom */
.post-content h1 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1rem !important;
}

.post-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.post-content h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

.post-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}
