/*
Theme Name: Snuum New
Version: 1.07 (Semantic Classless - Strict Fidelity)
*/

:root {
    --accent: #a78bfa;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
    --text: #f8fafc;
    --bg: #020617;

    --h5-size: clamp(1.2rem, 1.5rem + 0.5vw, 1.5rem);     /* Drobne nagłówki, przyciski */	
    --h4-size: clamp(1.4rem, 1.5rem + 0.5vw, 2rem);     /* Drobne nagłówki, przyciski */
    --h3-size: clamp(1.6rem, 1.5rem + 1vw, 3rem);         /* Tytuły w kafelkach snów */
    --h2-size: clamp(1.8rem, 1.5rem + 2vw, 3rem);         /* Tytuł snu wewnątrz otwartego modalu */
    /* GIGANTYCZNE H1 (od ok. 40px na mobile do 96px na desktopie) */
    --h1-size: clamp(2.5rem, 1rem + 6vw, 6rem);
	
	
    --h1-color: #f0f1f3;
    --h2-color: #e0e3e7;
    --h3-color: #c2c7d0;
    --h4-color: #b3b9c5;
    --h5-color: #a4acba;
    --h6-color: #8891a4;


	--max-width: 720px;

--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");

}

/* Scrollbar Optimization - Webkit */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* Poprawia renderowanie fontów w Firefox (macOS) */
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
	height: 100%;
	khtml-user-select:none!important;
-moz-user-select:none!important;
-ms-user-select:none!important;
-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none!important;
-webkit-user-select:none!important;
user-select:none!important;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
	min-height: 100%;
    width: 100%;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    background-image: radial-gradient(at 0% 0%, rgba(67, 56, 202, 0.2) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    display: flex;
    flex-direction: column;
}

/* Aura (Oryginalna) */
body::before,
body::after {
    content: "";
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
    will-change: transform; /* Hint dla przeglądarki, optymalizuje renderowanie na słabszych GPU */
}

body::before { top: 10%; left: -100px; background: #4f46e5; }
body::after { bottom: 10%; right: -100px; background: #7c3aed; }






















/* Header */
header {
    display: flex;
    align-items: center;
    flex-direction: column;
	padding: 2rem;
}

body>header{
	height: 65vh;
}

header > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	margin-bottom: 12vh;
}

@supports not (backdrop-filter: blur(5px)) {
    header { background: rgba(0, 0, 0, 0.4); }
}

/* Przycisk (Login) */
header > nav > button {
    background: hsl(0deg 0% 100% / 8%);
    border: 2px solid white;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Dodano dla wsparcia Safari/iOS */
    transition: 0.3s;
}

header>nav>h1>a {
    font-size: 2.1rem;
    letter-spacing: -1px;
    font-weight: 900;
	margin: 0;
}

/* Form */
header > form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header > output{
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 550px;
    padding: 25px 15px 0px 15px;
}

header>output>a, #related a, button[name="likes"] {
    display: inline-block;
    padding: 10px 15px;
    background: var(--glass);
    border-radius: 15px;
    margin: 5px;
    text-align: center;
    border: solid 1px var(--border);
    box-shadow: 0 0 20px #00000014;
}















/* Globalne ustawienia nagłówków */
h1, h2, h3, h4, h5 {
	text-align: center;
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.1; /* Nagłówki muszą mieć ciaśniejszą interlinię */
    text-shadow: 0 0 20px #00000075;
    
    /* MAGIA DLA DŁUGICH SŁÓW NA MOBILE */
    overflow-wrap: break-word; /* Wymusza złamanie słowa, gdy nie mieści się w kontenerze */
    hyphens: auto;             /* Dodaje ładny myślnik (-) przy dzieleniu wyrazu */
    -webkit-hyphens: auto;
}

h1 {
	margin-bottom: 0;
	color: var(--h1-color);
}

h2 {
    font-size: clamp(2rem, 8vw, 4.5rem);
    margin-bottom: 3rem;
    letter-spacing: -0.03em;
    font-weight: 800;
	color: var(--h2-color);
}

h3 {
    font-size: var(--h3-size);
    text-align: center;
    margin: 20px 0 40px;
	color: var(--h3-color);
}

h4 { 
	font-size: var(--h4-size); 
	color: var(--h4-color);
}

h5 { 
	font-size: var(--h5-size); 
	color: var(--h5-color);
}











article>header {
    padding: 0 20px;
}

article>header>h3{
    font-size: var(--h1-size);
	font-weight: 800;
}

#result h4{
	text-align: left;
}

article#single h4{
    margin: 20px 0;
    display: block;
    margin-top: 10px;
    background: #1d1b60;
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 700;
}

article#single ul{
	padding: 20px;
}

article#single>dl{
	margin: 20px 0;
}

article#single dl>dt {
    display: block;
    margin-top: 10px;
    background: #1d1b60;
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 700;
}

article#single dl>dd {
	padding: 4px 8px;
}

article>section>nav>a{
    margin: 30px auto;
    display: block;
    padding: 10px;
    width: 120px;
    background: radial-gradient(at 0% 0%, rgba(67, 56, 202, 0.2) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
    text-align: center;
    border-radius: 8px;
    border: solid 1px var(--border);
}







/* Main */
main {
    margin-top: 50px;
    flex: 1;
    display: flex;
    flex-direction: column;
	width: 100%;
	max-width: var(--max-width);
	margin: auto;
}


/* Dostępność - Klasa pomocnicza dla Screen Readerów */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

form[role="search"] {
    width: calc(100% - 8px);
    max-width: 650px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    margin: 4px;
}

@supports not (backdrop-filter: blur(25px)) {
    form[role="search"] {
        background: rgba(0,0,0,0.5);
    }
}

@media (min-width: 768px) {
form[role="search"]:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    transform: scale(1.03) translateY(-5px);
    box-shadow:
        0 40px 80px rgba(0,0,0,0.5),
        0 0 0 5px rgba(167, 139, 250, 0.1);
    margin: 4px;
}
}

form[role="search"] input::placeholder {
    color: #64748b;
    opacity: 1; /* Firefox bywa kapryśny z przezroczystością placeholderów */
}

/* Reset "krzyżyka" wyszukiwarki dla przeglądarek opartych na webkit */
form[role="search"] input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"] {
    padding: 1.8rem 2.5rem 1.8rem 70px;
    background: none;
    border: none;
    width: calc(100% - 70px);
    text-align: center;
    outline: none;
}

form[role="search"]>button {
    width: 70px;
    background: none;
    border: none;
    height: 50px;
    background-image: var(--icon-search);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99;
	opacity: .6;
}

.sticky {
    position: fixed;
    top: 0;
    padding: 0;
    z-index: 999;
    margin: auto;
}

/* Footer */
footer {
    padding: 2rem;
	margin-top: 10vh;
    font-size: 0.7rem;
    color: #475569;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Mobile */
@media (max-width: 768px) {
    header > section > h2 { margin-bottom: 2rem; }
    input[type="search"] {
        padding: 1.2rem 1.8rem 1.2rem 70px;
        font-size: 1rem; 
    }

form[role="search"] {
	backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
}
}


























/* ===========================
   DIALOG (MODAL) - STABILNA ANIMACJA
   =========================== */

dialog {
    background: #0b081f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 40px;
    max-width: 600px;
	max-height: 85%;
    width: 90%;
    color: white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    /* Reset domyślnych stylów przeglądarki */
    position: fixed;
    margin: auto;
    inset: 0;
    
    /* Animacja wyjścia (zamykania) */
    opacity: 0;
    transition: 
        opacity 0.5s ease, 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    display: block; /* Wymuszamy block, by transition działało, ale ukrywamy opacity */
}

/* Stan OTWARTY */
dialog[open] {
    opacity: 1;
    pointer-events: auto;
}

/* --- KIERUNKI WEJŚCIA --- */

/* 1. Logowanie - domyślnie nad ekranem, wlatuje na środek */
#auth {
    transform: translateY(-150%);
}
#auth[open] {
    transform: translateY(0);
}

/* 2. Treść snu - domyślnie pod ekranem, wlatuje na środek */
#dream-dialog {
    transform: translateY(150%);
}
#dream-dialog[open] {
    transform: translateY(0);
}

/* 3. Tło (Backdrop) */
dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: all 0.5s ease;
}

dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

/* Przycisk zamknięcia */
dialog > button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
}








/* 4. FORMULARZ LOGOWANIA (Wewnątrz dialogu) */
article#page>section>h2{
	text-align: center;
}
article#page>section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
	max-width: 350px;
	margin: auto;
}

article#page>section>form:not([method="dialog"]) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Inputy w formularzu (nie te w main) */
article#page>section>form>input {
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
	text-align: center;
	font-size: 16px;
}

/* Przycisk akcji (Zatwierdź) w formularzu */
article#page>section>form>button[type="submit"] {
    background: hsl(213 32% 35% / 1);
	/*background: radial-gradient(circle at center, #131138 0%, #28152a 100%);*/
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* 5. STOPKA DIALOGU (Przełącznik Rejestracja/Logowanie) */
article#page>section>footer {
    margin-top: 1rem;
    font-size: 0.85rem;
    text-align: center;
    color: #888;
}

article#page>section>footer>button {
    background: none;
    border: none;
    color: #00d2ff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 5px;
}

article#page output#auth-status{
	display: inline-block;
    height: 2rem;
    text-align: center;
}








a:hover {
filter: brightness(1.5);
transition: 0.3s;
}

a, button, input, textarea{
font-size: 16px;
color: inherit;
outline: none;
cursor: pointer;
text-decoration: none;
}


main>article#single {
	width: 100%;
    max-width: var(--max-width);
    margin: auto;
    padding: 0 2rem;
    text-align: left;
    text-shadow: 0 0 20px #00000073;
}

main>article#single>header>img{
    display: block;
    border-radius: 50%;
    margin: auto;
}

main>article#result {
    text-align: left;
    background: var(--glass);
    border: solid 1px var(--border);
    margin: 0 15px 15px;
    border-radius: 20px;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    overflow: auto;
}

#result h4 {
    text-align: left;
    padding: 15px 15px 0 15px;
    margin: 0;
}

#result p {
    padding: 15px;
}

#result a {
    display: block;
    padding: 20px;
    background: #0000002b;
    font-size: 14px;
    text-align: center;
}






footer>menu{
    display: flex;
    margin: 20px auto 50px;
    flex-wrap: wrap;
    max-width: 900px;
    filter: brightness(1.5);
    font-size: 10px;
    justify-content: space-around;
    line-height: 2;
}

footer>menu>a{
	font-size: 14px;
}