/* ═══════════════════════════════════════════════════════════
   IL ROMITAGGIO - Stile Esoterico
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg-deep: #08101a;
    --bg-mid: #0c1825;
    --bg-light: #101c30;
    --text-primary: #d0d8e8;
    --text-secondary: #7088a0;
    --text-muted: #506070;
    --accent-silver: #a0b8d0;
    --accent-gold: #c9a227;
    --accent-moon: #f0f4ff;
    --glow-blue: rgba(160, 184, 208, 0.5);
    --glow-silver: rgba(200, 210, 230, 0.6);
    --border-mystic: rgba(160, 184, 208, 0.3);
    --card-bg: rgba(12, 24, 37, 0.85);
    --card-border: rgba(160, 184, 208, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   SFONDO STELLATO
   ═══════════════════════════════════════════════════════════ */

html, body {
    min-height: 100%;
    width: 100%;
}

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--text-primary);
    line-height: 1.85;
    font-size: 20px;
    background-color: var(--bg-deep);
    background-image: linear-gradient(180deg, 
        #08101a 0%, 
        #0c1825 15%,
        #101c30 30%,
        #0e1a2a 50%,
        #0a1420 70%,
        #060e15 85%,
        #030810 100%
    );
    background-attachment: fixed;
    position: relative;
}

/* Stelle */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        15vw 11vh 0px 0px var(--glow-silver),
        25vw 55vh 0px 0px var(--glow-silver),
        73vw 98vh 0px 0px var(--glow-silver),
        77vw 25vh 0px 0px var(--glow-silver),
        20vw 73vh 0px 0px var(--glow-silver),
        13vw 71vh 0px 0px var(--glow-silver),
        8vw 85vh 0px 0px var(--glow-silver),
        2vw 39vh 0px 0px var(--glow-silver),
        89vw 12vh 0px 0px var(--glow-silver),
        94vw 56vh 0px 0px var(--glow-silver),
        86vw 36vh 0px 0px var(--glow-silver),
        11vw 82vh 0px 0px var(--glow-silver),
        37vw 59vh 0px 0px var(--glow-silver),
        41vw 4vh 0px 0px var(--glow-silver),
        99vw 81vh 0px 0px var(--glow-silver),
        42vw 85vh 0px 0px var(--glow-silver),
        16vw 81vh 0px 0px var(--glow-silver),
        54vw 95vh 0px 0px var(--glow-silver),
        58vw 84vh 0px 0px var(--glow-silver),
        84vw 67vh 0px 0px var(--glow-silver),
        72vw 86vh 0px 0px var(--glow-silver),
        77vw 93vh 0px 0px var(--glow-silver),
        17vw 41vh 0px 0px var(--glow-silver),
        15vw 22vh 0px 0px var(--glow-silver),
        38vw 41vh 0px 0px var(--glow-silver),
        80vw 54vh 0px 0px var(--glow-silver),
        90vw 73vh 0px 0px var(--glow-silver),
        29vw 2vh 0px 0px var(--glow-silver),
        32vw 38vh 0px 0px var(--glow-silver),
        47vw 11vh 0px 0px var(--glow-silver),
        79vw 71vh 0px 0px var(--glow-silver),
        81vw 18vh 0px 0px var(--glow-silver),
        67vw 51vh 0px 0px var(--glow-silver),
        65vw 72vh 0px 0px var(--glow-silver),
        23vw 9vh 0px 0px var(--glow-silver),
        68vw 47vh 0px 0px var(--glow-silver),
        61vw 18vh 0px 0px var(--glow-silver),
        60vw 77vh 0px 0px var(--glow-silver),
        69vw 13vh 1px 0px rgba(200,210,230,0.5),
        67vw 30vh 1px 0px rgba(200,210,230,0.5),
        42vw 59vh 1px 0px rgba(200,210,230,0.5),
        55vw 68vh 1px 0px rgba(200,210,230,0.5),
        35vw 35vh 1px 0px rgba(200,210,230,0.5),
        50vw 42vh 2px 1px rgba(220,230,240,0.4),
        77vw 63vh 2px 1px rgba(220,230,240,0.4),
        28vw 19vh 2px 1px rgba(220,230,240,0.4);
    pointer-events: none;
    z-index: 0;
}

/* Nebulosa */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-image: 
        radial-gradient(ellipse at 50% 8%, rgba(200, 210, 230, 0.25) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 60%, rgba(100, 120, 150, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(100, 120, 150, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(60, 80, 100, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

.site-header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 80px 20px 60px;
    border-bottom: 1px solid var(--border-mystic);
    overflow: hidden;
    
    background-image: url("https://64.media.tumblr.com/fea98135a0d9e2966df43372a41118a9/dcac279dee2792b8-09/s2048x3072/1fcdc7e4df006ab7675e836b6acaba193cd2f716.jpg");
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8,16,26,0.65),
        rgba(8,16,26,0.75)
    );
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 2;
}



.site-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--accent-silver);
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    text-shadow: 0 0 30px var(--glow-blue), 0 0 60px rgba(160, 184, 208, 0.2);
    animation: glowPulse 4s ease-in-out infinite;
}

.site-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 25px var(--glow-blue), 0 0 50px rgba(160, 184, 208, 0.2); }
    50% { text-shadow: 0 0 35px var(--glow-blue), 0 0 70px rgba(160, 184, 208, 0.3); }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGAZIONE
   ═══════════════════════════════════════════════════════════ */

.main-nav {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    background: rgba(8, 16, 26, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-mystic);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.main-nav a {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.main-nav a:hover,
.main-nav a.current {
    color: var(--accent-moon);
    border-color: var(--border-mystic);
    background: rgba(160, 184, 208, 0.1);
    text-shadow: 0 0 10px var(--glow-blue);
}

.main-nav a.gold {
    color: var(--accent-gold);
    border-color: rgba(201, 162, 39, 0.3);
}

.main-nav a.gold:hover {
    background: rgba(201, 162, 39, 0.15);
    text-shadow: 0 0 15px rgba(201, 162, 39, 0.5);
    border-color: rgba(201, 162, 39, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   ARCANI MAGGIORI
   ═══════════════════════════════════════════════════════════ */

.arcani-section {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px 25px;
    max-width: 900px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border-mystic);
}

.arcani-section h2 {
    font-family: 'Cinzel', serif;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 0;
    opacity: 0.6;
}

.decoratore {
    display: block;
    margin: 15px auto 18px;
    font-size: 0.9rem;
    letter-spacing: 0.5em;
    color: var(--accent-silver);
    opacity: 0.4;
}

.arcani-line {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1;
    padding-top: 5px;
    border-top: 1px solid rgba(160, 184, 208, 0.1);
}

.arcano-item {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 8px 6px;
    transition: all 0.3s ease;
}

.arcano-item span {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.arcano-item:hover span {
    color: var(--accent-gold);
    text-shadow: 0 0 15px rgba(201, 162, 39, 0.6);
}

/* Tooltip */
.arcano-item::after {
    content: attr(data-nome);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--accent-silver);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    padding: 6px 12px;
    background: rgba(8, 16, 26, 0.95);
    border: 1px solid var(--border-mystic);
    text-shadow: 0 0 10px var(--glow-blue);
}

.arcano-item:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* Il Matto */
.arcano-item.matto {
    margin-left: 15px;
    padding-left: 20px;
    border-left: 1px solid var(--border-mystic);
}

.arcano-item.matto span {
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   CONTENUTO PRINCIPALE
   ═══════════════════════════════════════════════════════════ */

.main-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 25px;
}

.intro-text {
    margin-bottom: 30px;
}

.intro-text p {
    margin-bottom: 1.2em;
    text-align: justify;
}

.intro-text h3 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.35rem;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(160, 184, 208, 0.3);
}

.intro-text strong {
    color: var(--accent-silver);
    font-weight: 600;
}

.intro-text em {
    color: var(--text-secondary);
}

.simbolo {
    text-align: center;
    margin: 40px 0;
    font-size: 1.3rem;
    color: var(--border-mystic);
    letter-spacing: 0.8em;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.site-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px 20px;
    border-top: 1px solid var(--border-mystic);
    margin-top: 40px;
}

.site-footer p {
    font-family: 'Cinzel', serif;
    color: var(--text-secondary);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
}

.footer-email {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGINA CONSULTAZIONE
   ═══════════════════════════════════════════════════════════ */

.consultazione-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 25px;
}

.consultazione-content h1 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    text-shadow: 0 0 25px var(--glow-blue);
}

.consultazione-content .sottotitolo {
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--card-border);
}

.consultazione-content h2 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin: 35px 0 15px;
    text-shadow: 0 0 15px rgba(160, 184, 208, 0.3);
}

.consultazione-content p {
    margin-bottom: 1.2em;
    text-align: justify;
}

.consultazione-content em {
    color: var(--text-secondary);
}

.consultazione-content strong {
    color: var(--accent-silver);
    font-weight: 600;
}

.distinzione-box {
    background: var(--card-bg);
    border-left: 2px solid var(--accent-gold);
    padding: 20px 25px;
    margin: 30px 0;
}

.distinzione-box h3 {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.distinzione-box p {
    margin-bottom: 0.8em;
    font-size: 1rem;
}

.distinzione-box p:last-child {
    margin-bottom: 0;
}

.contatto-box {
    text-align: center;
    margin-top: 50px;
    padding: 35px;
    border: 1px solid var(--border-mystic);
    background: var(--card-bg);
}

.contatto-box h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.contatto-box p {
    text-align: center;
}

.email-link {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    color: var(--accent-gold);
    border: 1px solid rgba(201, 162, 39, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
}

.email-link:hover {
    background: rgba(201, 162, 39, 0.15);
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

.chiusura {
    text-align: center;
    margin-top: 40px;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════
   PAGINA ARTICOLI / BLOG
   ═══════════════════════════════════════════════════════════ */

.articoli-content {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 auto;
    padding: 50px 25px;
}

.articoli-content h1 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    text-shadow: 0 0 25px var(--glow-blue);
}

.articoli-content .sottotitolo {
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--card-border);
}

.articolo-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.articolo-card:hover {
    border-color: var(--border-mystic);
    box-shadow: 0 0 20px rgba(160, 184, 208, 0.1);
}

.articolo-card h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.articolo-card h2 a {
    color: var(--accent-silver);
    text-decoration: none;
    transition: all 0.3s ease;
}

.articolo-card h2 a:hover {
    color: var(--accent-moon);
    text-shadow: 0 0 15px var(--glow-blue);
}

.articolo-data {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-style: italic;
}

.articolo-estratto {
    color: var(--text-secondary);
    line-height: 1.7;
}

.articolo-leggi {
    display: inline-block;
    margin-top: 15px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--accent-silver);
    text-decoration: none;
    transition: all 0.3s ease;
}

.articolo-leggi:hover {
    color: var(--accent-gold);
}

.articolo-leggi::after {
    content: " →";
}

/* Pagina singolo articolo */
.articolo-singolo {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 25px;
}

.articolo-singolo h1 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px var(--glow-blue);
}

.articolo-singolo .articolo-meta {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.articolo-singolo p {
    margin-bottom: 1.3em;
    text-align: justify;
}

.articolo-singolo h2 {
    font-family: 'Cinzel', serif;
    color: var(--accent-silver);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    margin: 40px 0 20px;
}

.articolo-singolo blockquote {
    border-left: 2px solid var(--accent-gold);
    padding-left: 25px;
    margin: 30px 0;
    font-style: italic;
    color: var(--text-secondary);
}

.torna-articoli {
    display: inline-block;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
}

.torna-articoli:hover {
    color: var(--accent-silver);
}

.torna-articoli::before {
    content: "← ";
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--border-mystic);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-silver);
}

/* Selezione testo */
::selection {
    background: rgba(160, 184, 208, 0.3);
    color: var(--accent-moon);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
    .site-header {
        padding: 40px 15px 30px;
    }
    
    .site-title {
        font-size: 1.8rem;
    }
    
    .main-nav a {
        font-size: 0.75rem;
        padding: 8px 15px;
    }
    
    .arcani-line {
        gap: 4px;
    }
    
    .arcano-item {
        padding: 6px 4px;
    }
    
    .arcano-item span {
        font-size: 0.85rem;
    }
    
    .arcano-item.matto {
        margin-left: 10px;
        padding-left: 14px;
    }
    
    .main-content,
    .consultazione-content {
        padding: 30px 20px;
    }
}