/* -------------------- ZÁKLADNÉ NASTAVENIA A FARBY TÉMY -------------------- */
:root {
    --bg: #0f172a;        /* Hlavná tmavá farba pozadia celej stránky */
    --card: #0b1224;      /* Farba kariet (boxy, sekcie, mapy, hero bloky) */
    --text: #e5e7eb;      /* Základná farba textu pre dobrý kontrast na tmavom pozadí */
    --muted: #94a3b8;     /* Tlmený text (pätička, menej dôležité informácie) */
    --accent: #38bdf8;    /* Akcentová farba – tlačidlá, hover efekty, zvýraznenia */
    --link: #60a5fa;      /* Farba odkazov (menu, hypertextové odkazy v texte) */
}

/* Reset okrajov pre celé HTML telo, aby sa lepšie kontrolovalo rozloženie */
* { box-sizing: border-box; }
html,
body {
    margin: 0;
    padding: 0;
}

/* Vzhľad tela stránky – písmo, farba textu, gradient pozadia */
body {
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text); /* Použitie základnej farby textu */
    background: linear-gradient(
            180deg,
            #0b1022,
            #0f172a 40%,
            #0b1022
    ); /* Tmavý vertikálny gradient pozadia */
}

/* Základné štýly odkazov – modrá farba a podčiarknutie na hover */
a {
    color: var(--link); /* Farba odkazov z premennej */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Základné nastavenie obrázkov – responzívne, blokový prvok */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -------------------- HLAVIČKA STRÁNKY A MENU -------------------- */
.site-header {
    /* Flex rozloženie hlavičky – logo vľavo, menu vpravo */
    display: flex;              /* Logo a navigacia v jednom riadku */
    gap: 24px;                  /* medzera medzi logom a navigaciou */
    padding: 12px 20px;
    position: sticky;         /* Hlavička sa prilepí hore pri skrolovaní */
    top: 0;                   /* ked sa skroluje, hlavicka je prilepena na vrchu obrazovky */
    background: rgba(11, 18, 36, 0.9); /* Polopriesvitné tmavé pozadie hlavičky */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Jemná spodná línia */
}

/* Logo v hlavičke */
.logo img {
    height: 44px;
}

/* Navigácia v hlavičke – horizontálne menu */
.site-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Štýl jednotlivých položiek menu */
.site-nav a {
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--text); /* Text menu v rovnakej farbe ako základný text */
}

/* Zvýraznenie aktuálnej stránky v menu */
.site-nav a[aria-current="page"] {
    background: rgba(96, 165, 250, 0.12); /* Jemné modré podfarbenie aktívnej položky */
}

/* -------------------- HLAVNÝ OBSAH -------------------- */
main {
    max-width: 1100px; /* Šírka obsahu kvôli čitateľnosti na veľkých monitoroch */
    margin: 24px auto;
    padding: 0 16px;
}

/* Úvodný blok – horna sekcia na domovskej a postavových stránkach */
.hero {
    background:
            radial-gradient(
                    1200px 300px at 50% -50%,
                    rgba(56, 189, 248, 0.25),
                    transparent
            ) /* Svetelný akcent hore hero sekcie */
            ,
            linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.04),
                    rgba(255, 255, 255, 0.02)
            ); /* Jemný prechod vo vnútri hero boxu */
    border: 1px solid rgba(255, 255, 255, 0.06); /* Jemný rám hero boxu */
    border-radius: 16px;
    padding: 28px;
}

/* Nadpis v horna sekcia na domovskej a postavových stránkach sekcii bez horného okraja */
.hero h1 {
    margin-top: 0;

}

/* Obrázok postavy v hero sekcii – menšia šírka a obtekanie textom */
.hero audio,
.hero img {
    margin-top: -70px;
    max-width: 300px;
    border-radius: 12px; /* Zaoblené rohy postáv */
    margin-bottom: 12px;
    float: right;        /* Obtekanie obrázka textom – splnená požiadavka na obtekanie */
    margin-left: 16px;   /* Medzera medzi textom a obrázkom vľavo */
}

.hero audio {
    width: 250px;
}


/* -------------------- DVOJSTĹPCOVÁ SEKCIA (ČLÁNOK + ASIDE) -------------------- */
.columns {
    display: grid;
    grid-template-columns: 1fr 320px; /* Hlavný text + užšia bočná lišta, 320px zoberie jedno, zbytok druhe*/
    gap: 24px;
    margin-top: 24px;
}

.columns h2{
    grid-column: 1 / -1; /* roztiahne cez oba stĺpce */
    text-align: center;
    margin: 0 0 12px;
}

/* Obsah článku a bočný panel majú karty s rovnakým štýlom */
.columns article,
.columns aside {
    background: var(--card); /* Tmavší box pre oddelenie od pozadia */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
}

/* Nadpis začína bez extra horného odsadenia */
.columns article h3,
.columns aside h3 {
    margin-top: 0;
}

/* -------------------- OBRÁZKOVÁ MAPA POSÁDKY -------------------- */
.map-section {
    margin-top: 24px;
    background: var(--card); /* Rovnaký štýl boxu ako ostatné karty */
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Obrázok posádky v obrázkovej mape – zarovnanie a rámik */
.map-section img {
    display: block;
    margin: 0 auto; /* Vycentrovanie obrázka */
    border-radius: 12px; /* Zaoblené rohy obrázka */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Jemný rám okolo obrázka */
}

/* -------------------- ZOZNAMY" -------------------- */
.lists {
    margin-top: 24px;
    background: var(--card);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Neusporiadaný zoznam s ikonami (logo + text) */
.thumb-list {
    list-style: none;
    padding: 0;
}

/* Každá položka – ikonka + text v riadku */
.thumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

/* Ikonky v zozname – malé štvorce s logom */
.thumb-list img {
    width: 22px;
    height: 22px;
}

/* -------------------- TLAČIDLÁ A ODKAZY VO FORME TLAČIDIEL -------------------- */
.btn {
    display: inline-block;
    padding: 10px 14px;
    background: var(--accent); /* Akcentová farba tlačidiel */
    color: #02131e;            /* Tmavý text kvôli kontrastu na svetlom tlačidle */
    border-radius: 10px;
    font-weight: 600;
}

/* Mierne zosvetlenie tlačidla pri prejdení myšou */
.btn:hover {
    filter: brightness(1.05);
}

/* -------------------- PÄTIČKA STRÁNKY -------------------- */
.site-footer {
    margin-top: 40px;
    padding: 18px 16px;
    text-align: center;
    color: var(--muted); /* Tlmená farba textu v pätičke */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* -------------------- TLAČIDLO "SPÄŤ" NAD HERO SEKCIOU -------------------- */
.back-nav {
    margin: 0 0 20px 0; /* Medzera pod navigáciou Späť */
    text-align: left;   /* Zarovnanie tlačidla doľava */
}

.back-nav .btn {
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 10px;
}

/* -------------------- INTERAKTIVITA OBRÁZKOV (HOVER EFEKTY) -------------------- */
/* Pripravíme plynulý prechod pre vybrané obrázky */
.hero img,
.thumb-list img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Po prejdení kurzorom sa obrázok jemne zväčší a dostane svetelný efekt */
.hero img:hover,
.thumb-list img:hover {
    transform: scale(1.04); /* Mierne zväčšenie obrázka */
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.35); /* Svetlomodrý žiar okolo obrázka */
    cursor: pointer;
}


/* -------------------- ŠPECIÁLNY ID SELEKTOR PRE NADPIS POSÁDKY -------------------- */
/* Selektor podľa ID – zvýraznenie nadpisu Straw Hat Pirates (#strawhats v HTML) */
#strawhats {
    text-transform: uppercase;                /* Nadpis celým veľkým písmom */
    letter-spacing: 0.06em;                   /* Väčšie medzery medzi písmenami */
    border-bottom: 2px solid var(--accent);   /* Podčiarknutie akcentovou farbou */
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/*
#test {
    text-align: center !important;
}
*/