/* ============================================================================
   Easy Red 2 - Wiki skin
   Va caricato DOPO styles.css: non lo sostituisce, gli si sovrappone. Serve a
   dare alle pagine del wiki la stessa tavolozza e la stessa tipografia della
   home (home.css), che styles.css da solo non ha, e a rendere leggibili le
   tabelle lunghe della documentazione.
   ============================================================================ */

:root{
    /* stessi token della home, cosi' i due siti non sembrano due siti */
    --wk-bg:#13100d;
    --wk-bg-2:#1b1612;
    --wk-panel:rgba(255,255,255,.025);
    --wk-panel-2:rgba(255,255,255,.05);
    --wk-ink:#f6f1e7;
    --wk-muted:#b6ab9b;
    --wk-dim:#857c6f;
    --wk-ember:#e2531c;
    --wk-ember-hot:#ff6a32;
    --wk-rust:#6b2c1a;
    --wk-brass:#c9a24b;
    --wk-brass-soft:#dcc07e;
    --wk-line:rgba(201,162,75,.18);
    --wk-line-2:rgba(246,241,231,.09);
    --wk-radius:10px;
    --wk-display:'Oswald','Roboto Condensed',Arial,sans-serif;
}

/* ---------- impianto ---------- */

body{
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(226,83,28,.10), transparent 60%),
        linear-gradient(180deg, var(--wk-bg-2), var(--wk-bg) 40%) fixed;
    color:var(--wk-ink);
}

main{
    max-width:1180px;
    margin:0 auto;
    padding:0 20px 40px;
}

/* Titoli col carattere della home. Il tratto sotto l'h1 fa da riga di reparto:
   dice dove comincia la pagina senza aggiungere un altro riquadro. */
main h1, main h2, main h3, main h4{
    font-family:var(--wk-display);
    font-weight:600;
    letter-spacing:.02em;
    color:var(--wk-ink);
}
main h1{
    font-size:2.4rem;
    text-align:center;
    margin:28px 0 6px;
}
main h1::after{
    content:"";
    display:block;
    width:96px;
    height:3px;
    margin:14px auto 0;
    background:linear-gradient(90deg,transparent,var(--wk-ember),transparent);
    border-radius:2px;
}
main h2{ font-size:1.7rem; margin:34px 0 10px; }
main h3{ font-size:1.25rem; margin:26px 0 8px; color:var(--wk-brass-soft); }

main p{ color:var(--wk-muted); }
main a{ color:var(--wk-brass-soft); }
main a:hover{ color:var(--wk-ember-hot); }

/* ---------- barra di navigazione ---------- */

header{
    background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.72));
    border-bottom:1px solid var(--wk-line);
    position:sticky;      /* la documentazione e' lunga: la barra deve restare a portata */
    top:0;
    z-index:50;
    backdrop-filter:blur(6px);
}
header nav ul li a{
    font-family:var(--wk-display);
    letter-spacing:.03em;
    text-transform:uppercase;
    font-size:.95rem;
    padding:8px 14px;
    border-radius:6px;
    border:1px solid transparent;
    transition:background .18s ease, border-color .18s ease, color .18s ease;
}
header nav ul li a:hover{
    background:rgba(226,83,28,.14);
    border-color:var(--wk-line);
    color:var(--wk-ink);
}

/* ---------- sezioni per classe ---------- */

.class-section{
    max-width:100%;
    margin:18px 0;
    border:1px solid var(--wk-line);
    border-radius:var(--wk-radius);
    background:var(--wk-panel);
    overflow:hidden;
}
.class-header{
    font-family:var(--wk-display);
    font-size:1.15rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    background:linear-gradient(180deg, rgba(107,44,26,.55), rgba(107,44,26,.28));
    border-bottom:1px solid var(--wk-line);
    padding:12px 16px;
}
.class-header:hover{ background:linear-gradient(180deg, rgba(107,44,26,.75), rgba(107,44,26,.4)); }
.class-content{ padding:0 4px; }
.class-content > p{ padding:12px 14px 0; margin:0; }

/* ---------- tabelle ---------- */

main table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:14px 0 18px;
    background:transparent;
    font-size:.97rem;
}
/* Niente position:sticky qui. Queste tabelle vivono dentro contenitori
   richiudibili (.class-content, .callback-body) che hanno overflow:hidden e
   max-height animata: li' l'intestazione si stacca e finisce sopra la prima
   riga invece di restare in cima alla pagina. */
main th{
    font-family:var(--wk-display);
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-size:.82rem;
    color:var(--wk-brass);
    background:rgba(0,0,0,.55);
    border-bottom:1px solid var(--wk-line);
    padding:10px 12px;
    text-align:left;
}
main td{
    padding:10px 12px;
    border-bottom:1px solid var(--wk-line-2);
    color:var(--wk-muted);
    vertical-align:top;
}
main tr:nth-child(even) td{ background:rgba(255,255,255,.018); }
main tr:hover td{ background:rgba(226,83,28,.07); }
main td a{ color:var(--wk-brass-soft); font-weight:500; }
main td a:hover{ color:var(--wk-ember-hot); }

/* la colonna del nome funzione e' quella che si cerca: va letta come codice */
main td .fn-name{
    font-family:'Consolas','Menlo',monospace;
    font-size:.95rem;
}

/* ---------- badge di versione ---------- */

/* Da che versione del gioco la chiamata esiste. Verde ottone e non rosso: e'
   un'informazione, non un avviso. */
.version-badge{
    display:inline-block;
    font-family:var(--wk-display);
    font-size:.78rem;
    letter-spacing:.04em;
    line-height:1;
    padding:5px 9px;
    border-radius:999px;
    white-space:nowrap;
    color:var(--wk-brass-soft);
    background:rgba(201,162,75,.10);
    border:1px solid rgba(201,162,75,.35);
}
.version-badge::before{ content:"v"; opacity:.6; }
.version-badge.version-inline{ margin-left:10px; vertical-align:middle; }

/* ---------- ricerca ---------- */

#function-search, #callback-search{
    max-width:520px !important;
    width:100% !important;
    display:block;
    margin:0 auto 26px auto !important;
    padding:12px 16px;
    font-size:1rem;
    color:var(--wk-ink);
    background:rgba(0,0,0,.5);
    border:1px solid var(--wk-line);
    border-radius:999px;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}
#function-search:focus, #callback-search:focus{
    border-color:var(--wk-ember);
    box-shadow:0 0 0 3px rgba(226,83,28,.15);
}

/* ---------- voti ---------- */

.upvote-button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--wk-line-2);
    background:rgba(0,0,0,.35);
    color:var(--wk-muted) !important;
    text-decoration:none;
    font-size:.85rem;
    transition:all .18s ease;
}
.upvote-button:hover{ border-color:var(--wk-ember); color:var(--wk-ember-hot) !important; }
.upvote-button.upvoted{
    background:rgba(226,83,28,.18);
    border-color:var(--wk-ember);
    color:var(--wk-ember-hot) !important;
}

/* ---------- blocchi di codice ed esempi ---------- */

main pre{
    border:1px solid var(--wk-line);
    border-radius:var(--wk-radius);
    overflow:auto;
    margin:10px 0 16px;
}
main pre code{
    display:block;
    padding:16px 18px !important;
    font-size:.92rem;
    line-height:1.55;
    background:rgba(0,0,0,.55) !important;
}
main code:not(pre code){
    font-family:'Consolas','Menlo',monospace;
    font-size:.92em;
    padding:2px 6px;
    border-radius:4px;
    background:rgba(201,162,75,.12);
    color:var(--wk-brass-soft);
}
.example{
    background:var(--wk-panel);
    border:1px solid var(--wk-line);
    border-left:3px solid var(--wk-ember);
    border-radius:var(--wk-radius);
    padding:14px 16px;
    margin:16px 0;
}
.example h4{ margin:0 0 8px; color:var(--wk-brass-soft); }

/* ---------- scheda di dettaglio ---------- */

.function-title{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-family:'Consolas','Menlo',monospace !important;
    font-size:1.9rem !important;
    color:var(--wk-ink);
    margin:26px 0 4px;
}
.function-details{
    background:var(--wk-panel);
    border:1px solid var(--wk-line);
    border-radius:var(--wk-radius);
    padding:16px 18px;
    margin:14px 0 8px;
}
.function-details p{ color:var(--wk-ink); }
.no-parameters{
    color:var(--wk-dim);
    font-style:italic;
    padding:12px 0;
}

/* riga con le informazioni di contorno (versione, classe...) sotto al titolo */
.function-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 14px;
    color:var(--wk-dim);
    font-size:.9rem;
}

/* ---------- moduli ---------- */

main label{
    display:block;
    margin:14px 0 6px;
    font-family:var(--wk-display);
    letter-spacing:.03em;
    text-transform:uppercase;
    font-size:.82rem;
    color:var(--wk-brass);
}
main input[type="text"],
main input[type="password"],
main textarea,
main select{
    width:100%;
    padding:10px 12px;
    color:var(--wk-ink);
    background:rgba(0,0,0,.45);
    border:1px solid var(--wk-line);
    border-radius:8px;
    font-family:var(--wk-font,'Roboto Condensed',Arial,sans-serif);
    font-size:1rem;
}
main input[type="text"]:focus,
main input[type="password"]:focus,
main textarea:focus,
main select:focus{
    outline:none;
    border-color:var(--wk-ember);
    box-shadow:0 0 0 3px rgba(226,83,28,.15);
}
main input[type="submit"], main button{
    font-family:var(--wk-display);
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:10px 18px;
    border:none;
    border-radius:8px;
    background:var(--wk-rust);
    color:var(--wk-ink);
    cursor:pointer;
    transition:background .18s ease, transform .1s ease;
}
main input[type="submit"]:hover, main button:hover{ background:var(--wk-ember); }
main input[type="submit"]:active, main button:active{ transform:translateY(1px); }
.parameter-row{
    display:grid;
    grid-template-columns:1fr 180px 2fr auto;
    gap:10px;
    align-items:center;
    margin:8px 0;
}
.parameter-row input, .parameter-row select{ margin:0; }

/* ---------- bottoni di richiamo (guide, generatore) ---------- */

.wiki-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    margin:22px 0 30px;
}
.wiki-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--wk-display);
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.95rem;
    text-decoration:none;
    padding:13px 22px;
    border-radius:10px;
    border:1px solid var(--wk-line);
    background:var(--wk-panel-2);
    color:var(--wk-ink) !important;
    transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.wiki-cta:hover{
    background:rgba(226,83,28,.16);
    border-color:var(--wk-ember);
    transform:translateY(-1px);
}
.wiki-cta.primary{
    background:linear-gradient(180deg, var(--wk-ember), var(--wk-rust));
    border-color:var(--wk-ember-hot);
}
.wiki-cta.primary:hover{ background:linear-gradient(180deg, var(--wk-ember-hot), var(--wk-ember)); }
.wiki-cta .cta-icon{ font-size:1.15rem; line-height:1; }

/* ---------- note ---------- */

.wiki-note{
    background:rgba(201,162,75,.07);
    border:1px solid var(--wk-line);
    border-left:3px solid var(--wk-brass);
    border-radius:var(--wk-radius);
    padding:12px 16px;
    margin:16px 0;
    color:var(--wk-muted);
}

/* ---------- pie' di pagina ---------- */

footer{
    border-top:1px solid var(--wk-line);
    background:rgba(0,0,0,.6);
}
footer p{ color:var(--wk-dim); }

/* ---------- schermi stretti ---------- */

@media (max-width:820px){
    main h1{ font-size:1.9rem; }
    .parameter-row{ grid-template-columns:1fr; }
    /* le tabelle larghe scorrono da sole invece di sfondare la pagina */
    main table{ display:block; overflow-x:auto; white-space:nowrap; }
    main td, main th{ white-space:normal; }
}