/* TESTOWANIE <div>'ÓW */
/* * {outline: 1px solid #f0f;} */

/* CZCIONKI */

/* Roboto */
@font-face {
    font-family: "Roboto";
    src: url("/assets/fonts/Roboto-VariableFont_wdth\,wght.ttf") format("truetype");
}
@font-face {
    font-family: "RobotoFlex";
    src: url("/assets/fonts/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf") format("truetype");
}

/* BN-67.9010-03 */
@font-face {
    font-family: "kolejowa";
    src: url("/assets/fonts/BN-67.9010-03.ttf") format("truetype");
}

/* Nimbus Sans */
@font-face {
    font-family: "NimbusSansRegular";
    src: url("/assets/fonts/NimbusSanL-Reg.otf");
}
@font-face {
    font-family: "NimbusSansBold";
    src: url("/assets/fonts/NimbusSanL-Bol.otf");
}

/* Open Sans, Noto Sans */
@font-face {
    font-family: "OpenSans";
    src: url("/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf");
}
@font-face {
    font-family: "NotoSans";
    src: url("/assets/fonts/NotoSans-VariableFont_wdth,wght.ttf");
}

/* WARTOŚCI */

:root {
    /* wymiary (SWS – Screen-Width-Sized) */
    --sws-border: 10px;

    /* czas włączania/wyłączania podświetlenia linków */
    --time045: 0.45s;
    --time03: 0.3s;
    --time015: 0.15s;

    /* czcionki */
    /* --pref-FrutigerBold: FrutigerBold, MyriadProSemibold, Helvetica, Arial, sans-serif; */
    /* --pref-MyriadProSemiBold: MyriadProSemibold, Helvetica, Arial, sans-serif; */
    /* --pref-MyriadProRegular: MyriadProRegular, Helvetica, Arial, sans-serif; */
    --pref-OpenSans: 'OpenSans', 'NotoSans', Helvetica, Arial, sans-serif;
    --pref-NotoSans: /*'NotoSans',*/ 'OpenSans', Helvetica, Arial, sans-serif;
    --pref-Helvetica: Helvetica, 'NimbusSans', Arial, sans-serif;
    --pref-NimbusSans: Helvetica, 'NimbusSans', Arial, sans-serif;
    --pref-Arial: Arial, 'NimbusSansRegular', Helvetica, sans-serif;

    /* podstawowe kolory: */
    --txt0:     #000;
    --txt1:     #333;
    --txt2:     #666;
    --txt3:     #999;
    --txt4:     #ccc;
    --txt5:     #fff;
    --pal-blue: #1251e3;

    /* barwy warszawskie*: */
    --waw-yellow:   #ffd600;
    --waw-red:      #ff1100;

    --bus-yellow:   #e9a800; /* RAL 1003 */
    --bus-red:      #c60605; /* RAL 3020 */

    --metro-m1:     #0057b8;
    --metro-m2:     #c8102e;

    --bus-purple:   #88007c;
    --bus-blue:     #00507d;

    --linia-zwykla:         #000;
    --linia-przyspieszona:  #d61c12;
    --linia-strefowa:       #008000;
    --linia-nocna:          #224099;

    /*  *Barwy zgodne z:
        - kolorystyką symboli Warszawy (https://um.warszawa.pl/waw/markawarszawa/symbole-m-st-warszawy),
        - Księgą identyfikacji wizualnej pojazdów ze stycznia 2018 r. (https://www.ztm.waw.pl/wp-content/uploads/2018/01/11245_zalacznik_nr_1.1_do_siwz_ksiega_identyfikacji_wizualnej_pojazdow.pdf),
        - kolorystyką stosowaną w Metrze Warszawskim (https://pl.wikipedia.org/wiki/Metro_w_Warszawie#Informacja_pasa%C5%BCerska),
        - kolorystyką stosowaną w Zmianach w komunikacji na stronie http://wtp.waw.pl. */

    /* morfizm szkła */
    --blur-header:  blur(2px);
    --blur-10:      blur(10px);
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= CAŁOŚĆ =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

html, body {
    height: 100%;
    font-size: 16px;
}

body {
    font-family: Roboto, MyriadProRegular, Helvetica, Arial, sans-serif;
    background-color: #252525;
    margin: 0px;
    display: flex;
    flex-direction: column;
    transition-duration: var(--time015);
}

body.dark-theme {
    background-color: #252525;
    color: #fff;
    --txtD: #fff;
    --txtO: #000;
}

body.light-theme {
    background-color: #fff;
    color: #000;
    --txtD: #000;
    --txtO: #fff;
}

body.sepia-theme {
    background-color: #f4ecd8;
    color: #5b4636;
    --txtD: #5b4636;
    --txtO: #000;
}

.container {
    height: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

summary {
    user-select: none;
}

summary:hover {
    cursor: pointer;
}

svg.svgClose {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--waw-red);
    height: 1rem;
    width: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition-duration: var(--time03);
    cursor: pointer;
}

svg.svgClose:hover {
    color: var(--waw-yellow);
    background-color: var(--waw-red);
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= HEADER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

header {
    display: flex;
    flex-direction: column;
    border-bottom: solid 10px var(--bus-red);
    width: 100%;
}

header #gradient {
    padding-top: 4px;
    background-image: linear-gradient(180deg, #000, #0008);
    backdrop-filter: var(--blur-header);
}

header .container {
    max-width: 1500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

/* logo AB */

#head-ablogo {
    font-family: var(--pref-OpenSans);
    font-size: 6rem;
    font-weight: 600;
    letter-spacing: -0.025rem;
    text-decoration: none;
    margin: 0px;
    display: inline-flex;
}

#head-ablogo span {
    transition-duration: var(--time045);
}

span#head-ablogo-a {
    color: var(--bus-yellow);
}

#head-ablogo:hover span#head-ablogo-a {
    text-shadow: 0 0 0.5rem var(--bus-yellow);
}

span#head-ablogo-b {
    color: var(--bus-red);
}

#head-ablogo:hover span#head-ablogo-b {
    text-shadow: 0 0 0.5rem var(--bus-red);
}

span#head-ablogo-beta {
    color: var(--metro-m1);
    font-size: 2.5rem;
    position: relative;
    display: inline;
    rotate: 20deg;
    top: 10px;
    right: 10%;
}

#head-ablogo:hover span#head-ablogo-beta {
    text-shadow: 0 0 0.5rem var(--metro-m1);
}

/* nawigacja */

#header-nav {
    margin-right: 120px;
    width: 420px;
    display: flex;
    justify-content: space-between;
}

#header-nav a {
    font-family: var(--pref-OpenSans);
    font-size: 3.5rem;
    font-weight: 600;
    margin-right: 40px;
    text-decoration: none;
    color: var(--bus-yellow);
    transition-duration: var(--time03);
}

#header-nav a:hover {
    color: var(--bus-red);
}

/* przycisk do zmiany motywu */

.themeToggle {
    position: fixed;
    right: 0;
    cursor: pointer;
    margin-left: 50px;
    width: 50px;
    height: 75px;
}

.themeToggle svg {
    color: var(--bus-yellow);
    transition-duration: var(--time03);
}

.themeToggle:hover svg {
    color: var(--bus-red);
}

/* przycisk dla mobilnych */

#header-menu {
    display: none;
}

#header-menu-label {
    display: none;
    background: none;
    border: none;
    height: 6rem;
    width: 6rem;
    margin-bottom: 5px;
    color: var(--bus-yellow);
    transition-duration: var(--time03);
    user-select: none;
}

#header-menu-label:hover {
    color: var(--bus-red);
    cursor: pointer;
}

body:has(#header-menu:checked) #header-menu-label {
    transform: rotate(-90deg);
}

/* menu rozwijane dla mobilnych */

#mobile-header {
    display: none;
    min-height: 100px;
    background-color: #0008;
    backdrop-filter: var(--blur-header);
    border-top: solid var(--sws-border) var(--bus-yellow);
}

body:has(#header-menu:checked) #mobile-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.mobile-header-section {
    min-width: 10%;
    padding: 10px 20px 20px 40px;
    border-radius: 15px;
    border: 3px solid var(--bus-red);
    backdrop-filter: var(--blur-10);
}

.mobile-header-section h2 {
    text-align: center;
    font-family: var(--pref-OpenSans);
    color: var(--bus-yellow);
    margin: 0;
    font-size: 2.5rem;
}

.mobile-header-section ul, .mobile-header-section a, .mobile-header-section summary {
    font-family: var(--pref-OpenSans);
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.75rem;
    color: var(--bus-yellow);
    transition-duration: var(--time015);
}

.mobile-header-section > ul {
    list-style-image: url("/assets/img/przyst_staly.svg");
    margin-top: 1rem;
    padding: 0;
    margin-bottom: 0;
}

.mobile-header-section details > ul {
    list-style-image: url("/assets/img/przyst_nz.svg");
    padding: 0 0 0 18px;
    margin-bottom: 0;
}

.mobile-header-section a:hover {
    color: var(--bus-red);
}

#mobile-header a.themeToggle {
    display: none;
}

.mobile-header-section details:hover summary, .mobile-header-section details:open summary, .mobile-header-section details:hover summary a, .mobile-header-section details:open summary a {
    color: var(--bus-red);
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= MAIN dla index.php =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

main {
    width: 100%;
    display: flex;
    justify-content: center;
    flex: 1;
}

main nav {
    display: block;
    align-items: start;
    margin: 0px 0px 50px 0px;
}

main > .container {
    display: flex;
    flex: 1;
}

main > .container > section {
    flex: 1;
}

main aside {
    width: 300px;
    margin-right: 30px;
}

main aside nav ul, main aside > ul {
    padding: 0;
    list-style-type: none;
}

main nav ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--bus-red);
    height: 50px;
    width: auto;
    padding: 10px 20px;
    text-decoration: none;

    font-size: 2rem;
    font-family: "MyriadProSemibold";
    color: var(--bus-yellow);
    transition-duration: var(--time03);
}

main nav ul a:hover {
    color: var(--bus-red);
}

#main-placeholder { /* zostaje ukryty podczas ładowania <main> */
    height: 100%;
    background-color: #fff;
    color: #f00;
    border: solid 1px #f0f;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

footer {
    display: block;
    margin-top: 50px;
}

footer > nav, footer > div {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer > nav {
    background-color: var(--bus-yellow);
}

footer > div {
    background-color: var(--bus-red);
}

footer nav p, footer nav a {
    font-family: var(--pref-NotoSans);
    font-size: 1.5rem;
    color: var(--bus-red);
    text-align: center;
}

footer nav a:hover {
    font-weight: bold;
}

footer div p {
    font-family: var(--pref-NotoSans);
    font-size: 1.5rem;
    color: var(--bus-yellow);
    text-align: center;
}

.font-mpb {
    font-family: var(--pref-NotoSans);
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= MINIEKRANY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

@media (max-width: 1079px) { /* TABLET I TELEFON */

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= CAŁOŚĆ =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

    .container {
        margin: 0;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= HEADER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

    header {
        position: fixed;
        top: 0;
    }

    nav#header-nav, .container .themeToggle {
        display: none;
    }

    #header-menu-label {
        display: inline-flex;
    }

    #mobile-header a.themeToggle {
        display: block;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= MAIN dla index.php =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

}

@media (min-width: 500px) and (max-width: 1079px) { /* TABLET */
    
    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= WARTOŚCI */

    :root {
        --sws-border: 8px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= CAŁOŚĆ */

    html {
        font-size: 12px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= HEADER */

    header {
        border-bottom-width: 8px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= MAIN */

    main {
        margin-top: 100px;
    }

}

@media (max-width: 499px) { /* TELEFON */
    
    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= WARTOŚCI */

    :root {
        --sws-border: 6px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= CAŁOŚĆ */

    html {
        font-size: 8px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= HEADER */

    header {
        border-bottom-width: 6px;
    }

    header .container {
        padding: 0 5px;
    }

    #head-ablogo {
        max-width: 260px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= MAIN */

    main {
        margin-top: 68px;
    }

    /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= FOOTER */

    footer nav {
        display: none;
    }

    footer div {
        background: linear-gradient(0deg, #000, #0008);
        border-top: solid 6px var(--bus-red);
    }

}