/**
 * Renato Giordanelli - Retro 1998 Theme
 * "Best viewed with Netscape Navigator 4.0"
 */

/* ============================================
   FONTS - Loaded dynamically by retro.js
   ============================================ */

/* ============================================
   CSS VARIABLES FOR RETRO THEME
   ============================================ */
:root {
    --win98-bg: #c0c0c0;
    --win98-light: #ffffff;
    --win98-dark: #808080;
    --win98-darker: #000000;
    --win98-blue: #000080;
    --win98-link: #0000ff;
    --win98-visited: #800080;
    --win98-highlight: #ffff00;
}

/* ============================================
   TOGGLE LINK IN SUBTITLE
   ============================================ */
.retro-toggle-link {
    font-size: 14px;
    font-weight: normal;
    color: #7e4fdc !important;
    text-decoration: none !important;
    margin-left: 10px;
}

.retro-toggle-link:hover {
    color: #ff7de9 !important;
    text-decoration: underline !important;
}

body.retro-mode .retro-toggle-link {
    color: var(--win98-link) !important;
}

body.retro-mode .retro-toggle-link:hover {
    color: #ff0000 !important;
}

/* ============================================
   RETRO MODE ACTIVE + CURSORI WIN98
   ============================================ */
body.retro-mode {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" fill="%23b8a090"/><rect width="200" height="200" filter="url(%23noise)" opacity="0.4"/></svg>') repeat;
    background-color: #b8a090;
    cursor: url('https://unpkg.com/98.css/cursors/Arrow.cur'), default;
}

body.retro-mode * {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif !important;
    cursor: inherit;
}

/* ============================================
   CURSORI WIN XP GOLD - PNG LOCALI 32x32
   ============================================ */
body.retro-mode,
body.retro-mode * {
    cursor: url('/assets/cursor/Normal.png') 0 0, auto !important;
}

body.retro-mode a,
body.retro-mode button,
body.retro-mode .retro-button,
body.retro-mode [onclick] {
    cursor: url('/assets/cursor/Link.png') 8 8, pointer !important;
}

body.retro-mode input[type="text"],
body.retro-mode input[type="email"],
body.retro-mode textarea {
    cursor: url('/assets/cursor/Select.png') 16 16, text !important;
}


/* ============================================
   WINDOWS 98 BORDERS
   ============================================ */
body.retro-mode .win98-border {
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    background: var(--win98-bg);
    padding: 4px;
}

body.retro-mode .win98-border-inset {
    border: 2px solid;
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
    background: var(--win98-bg);
}






/* ============================================
   HIDE MODERN ELEMENTS IN RETRO MODE
   ============================================ */
body.retro-mode #fixed_block,
body.retro-mode #fixed_menu {
    display: none !important;
}

body.retro-mode {
    border: none !important;
}

body.retro-mode:before,
body.retro-mode:after {
    display: none !important;
}

/* Hide green hover borders in retro mode */
body.retro-mode .container .rettangolo_sx,
body.retro-mode .container .rettangolo_sx:hover {
    border-left: 5px solid #ffff00;
    animation: none !important;
}

body.retro-mode .container .rettangolo_dx,
body.retro-mode .container .rettangolo_dx:hover {
    border-top: none !important;
    animation: none !important;
}

body.retro-mode .Sentiero_Container:hover,
body.retro-mode .Sentiero_Container_2:hover {
    border-right-color: var(--win98-dark) !important;
}

/* ============================================
   RETRO HEADER
   ============================================ */
body.retro-mode .retro-header {
    display: block !important;
    background: var(--win98-blue);
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

body.retro-mode header {
    background: var(--win98-bg);
    border: 3px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    margin: 10px;
    padding: 0;
}

body.retro-mode .intro {
    height: auto;
    min-height: 50vh;
}

/* ============================================
   RETRO LINKS
   ============================================ */
body.retro-mode a {
    color: var(--win98-link) !important;
    text-decoration: underline !important;
}

body.retro-mode a:visited {
    color: var(--win98-visited) !important;
}

body.retro-mode a:hover {
    color: #ff0000 !important;
}

/* ============================================
   RETRO IMAGES (Pixelated)
   ============================================ */
body.retro-mode .rettangolo_sx img,
body.retro-mode .container picture img {
    image-rendering: pixelated;
    filter: contrast(1.1) saturate(0.8) brightness(1.05);
    border: 3px solid;
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

/* ============================================
   RETRO SECTIONS
   ============================================ */
body.retro-mode .Sentiero_Container,
body.retro-mode .Sentiero_Container_2,
body.retro-mode .Sentiero_Container_3 {
    background: var(--win98-bg);
    border: 3px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    margin: 10px auto;
    padding: 20px;
    width: 60%;
}

/* ============================================
   RETRO TITLES
   ============================================ */
body.retro-mode h1,
body.retro-mode h2,
body.retro-mode h3 {
    color: var(--win98-blue);
    text-shadow: 1px 1px 0 var(--win98-light);
}

body.retro-mode .titolo {
    font-size: 24px;
}

/* ============================================
   RETRO HR (with fire!)
   ============================================ */
body.retro-mode hr,
body.retro-mode .retro-hr {
    border: none;
    height: 30px;
    background: url('https://web.archive.org/web/20091027065839im_/http://geocities.com/SiliconValley/Haven/1257/fire.gif') repeat-x center;
    margin: 20px 0;
}

/* ============================================
   MARQUEE
   ============================================ */
body.retro-mode .retro-marquee {
    display: block !important;
    background: var(--win98-blue);
    color: var(--win98-highlight);
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
}

.retro-marquee {
    display: none;
}

/* ============================================
   BLINK ANIMATION
   ============================================ */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

body.retro-mode .blink {
    animation: blink 1s infinite;
}

body.retro-mode .retro-new {
    color: #ff0000;
    font-weight: bold;
    animation: blink 0.8s infinite;
    font-size: 12px;
}

/* ============================================
   RETRO GIF DECORATIONS
   ============================================ */
body.retro-mode .retro-gifs {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
}

.retro-gifs {
    display: none;
}

body.retro-mode .retro-email-gif {
    display: inline-block !important;
}

.retro-email-gif {
    display: none;
}

/* ============================================
   UNDER CONSTRUCTION
   ============================================ */
body.retro-mode .retro-construction {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: var(--win98-highlight);
    padding: 10px;
    margin: 10px;
    border: 2px dashed #000;
}

.retro-construction {
    display: none;
}

/* ============================================
   RETRO FOOTER
   ============================================ */
body.retro-mode footer {
    background: var(--win98-bg);
    border: 3px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    margin: 10px;
    text-align: center;
    padding: 20px;
}

body.retro-mode .heart {
    padding: 10px;
}

/* ============================================
   RETRO BUTTON STYLE
   ============================================ */
body.retro-mode .retro-button {
    display: inline-block;
    background: var(--win98-bg);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    padding: 5px 15px;
    font-size: 14px;
    cursor: url('https://unpkg.com/98.css/cursors/Hand.cur'), pointer !important;
    text-decoration: none !important;
    color: #000 !important;
    margin: 5px;
}

body.retro-mode .retro-button:active {
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

/* ============================================
   RETRO MARK/HIGHLIGHT
   ============================================ */
body.retro-mode mark {
    background: var(--win98-highlight);
    color: #000;
    padding: 2px 5px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media screen and (max-width: 600px) {
    body.retro-mode .Sentiero_Container,
    body.retro-mode .Sentiero_Container_2,
    body.retro-mode .Sentiero_Container_3 {
        width: 95%;
        margin: 5px auto;
        padding: 15px;
    }

    body.retro-mode header {
        margin: 5px;
    }

    body.retro-mode .retro-gifs img {
        width: 40px;
        height: auto;
    }

    body.retro-mode .retro-marquee {
        font-size: 14px;
    }

    body.retro-mode .retro-construction img {
        width: 30px;
        height: auto;
    }

    .retro-toggle-link {
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }
}