/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* --- MOBILNÉ ZARIADENIA (Predvolený stav) --- */
.custom-nav {
  /* Zmeníme smer na stĺpec - logo bude hore, menu pod ním */
  flex-direction: column !important;
  align-items: center; /* Vycentruje logo aj menu na stred mobilu */
  gap: 1rem; /* Pridá medzeru medzi logom a menu */
}

.custom-nav ul {
  /* Zabezpečí, že položky menu na mobile nebudú natlačené na krajoch */
  justify-content: center;
  padding: 0;
}


/* --- WEBOVÉ ROZHRANIE (od šírky 992px a viac) --- */
@media (min-width: 992px) {
  .custom-nav {
    /* Na webe vrátime smer do jedného riadku */
    flex-direction: row !important;
    justify-content: space-between; /* Logo vľavo, menu vpravo */
  }
}


:root {
  --pico-form-element-spacing-vertical: 0.5rem;   /* Pôvodne 0.75rem alebo viac */
  --pico-form-element-spacing-horizontal: 0.75rem; /* Pôvodne 1rem */
}

/* 1. Pre prípad, že tému prepínaš automaticky cez systémové nastavenia */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body {
    --pico-background-color: #000000 !important;
    --pico-body-background-color: #000000 !important;
    --pico-root-background-color: #000000 !important;
    --pico-surface-color: #000000 !important;
    background-color: #000000 !important;
  }
}

/* 2. Pre prípad, že na <html> tag pridávaš natvrdo data-theme="dark" pomocou JS */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  --pico-background-color: #000000 !important;
  --pico-body-background-color: #000000 !important;
  --pico-root-background-color: #000000 !important;
  --pico-surface-color: #000000 !important;
  background-color: #000000 !important;
}

@media (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    height: auto; /* Umožní navbaru rásť do výšky podľa počtu riadkov */
    padding-bottom: 1rem;
  }

  /* Voliteľné: Roztiahne zoznamy odkazov (ul) na celú šírku nového riadku, 
     aby mali položky dosť miesta */
  nav ul {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center; /* Vycentruje položky v novom riadku */
    padding: 0.5rem 0;
  }
}