/* =============================================
   theme.css — Dark / Light mode overrides
   Default: data-theme="dark" (FOUC script lo imposta da localStorage)
   ============================================= */

/* ---- Toggle pill ---- */

.theme-toggle-item {
    display: flex;
    align-items: center;
}

#theme-toggle {
    width: 52px;
    height: 28px;
    background: #3a3a3a;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.theme-pill-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffc800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease;
    pointer-events: none;
}

@media only screen and (min-width: 900px) {
    .theme-toggle-item { height: 66px; padding: 0 10px; }
}

@media only screen and (max-width: 899px) {
    .theme-toggle-item { padding: 10px 0; }
}

/* =============================================
   DARK MODE OVERRIDES — sezioni chiare
   Strategia: color ereditabile sul tag section +
   override specifici per heading e link neri.
   ============================================= */

/* Link neri (#000) nei moduli chiari → diventano illeggibili su dark bg */
[data-theme="dark"] #about a,
[data-theme="dark"] #about a:visited,
[data-theme="dark"] #initialize a,
[data-theme="dark"] #initialize a:visited,
[data-theme="dark"] #resume a,
[data-theme="dark"] #resume a:visited,
[data-theme="dark"] #portfolio a,
[data-theme="dark"] #portfolio a:visited { color: #b0b0b0; }

[data-theme="dark"] #about a:hover,
[data-theme="dark"] #initialize a:hover,
[data-theme="dark"] #resume a:hover,
[data-theme="dark"] #portfolio a:hover  { color: #ffc800; }

/* ---- About (#about) ---- */
/* !important batte l'inline style="background-color: #ebebeb" */
/* color: #b0b0b0 eredita su tutti i figli senza override esplicito */
[data-theme="dark"] #about {
    background: #111111 !important;
    color: #b0b0b0;
}

[data-theme="dark"] #about h1,
[data-theme="dark"] #about h2           { color: #ffffff; }
[data-theme="dark"] #about h3,
[data-theme="dark"] #about h4           { color: #e0e0e0; }
[data-theme="dark"] #about p            { color: #999999; }

[data-theme="dark"] .info-list li strong { color: #cccccc; }
[data-theme="dark"] .info-list li span   { color: #888888; }

/* Skill bars */
[data-theme="dark"] .skill-bars .progress          { background: #333333; }
[data-theme="dark"] .skill-bars .progress > div    { background: #ffc800; }
[data-theme="dark"] .skill-bars .progress > div em { background: #ffc800; color: #111111; }
[data-theme="dark"] .skill-bars h3                 { color: #cccccc; }
[data-theme="dark"] .skill-bars li strong          { color: #cccccc; }

/* Stroke buttons (CV download, ecc.) */
[data-theme="dark"] .button.stroke {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
[data-theme="dark"] .button.stroke:hover {
    border-color: #ffc800;
    color: #ffc800;
    background: transparent;
}

/* ---- Initialize (#initialize) ---- */
[data-theme="dark"] #initialize {
    background: #202020 !important;
    color: #b0b0b0;
}

[data-theme="dark"] #initialize h1,
[data-theme="dark"] #initialize h2      { color: #ffffff; }
[data-theme="dark"] #initialize h3,
[data-theme="dark"] #initialize h4      { color: #e0e0e0; }
[data-theme="dark"] #initialize p       { color: #999999; }
[data-theme="dark"] #initialize .output {
    background: #111111;
    border-color: #333333;
    color: #e0e0e0;
}
[data-theme="dark"] #initialize pre {
    background: #2d2d2d;
}
[data-theme="dark"] #initialize code {
    background: transparent;
    border-color: #444444;
    color: #cccccc;
}

/* IDE window dark overrides */
[data-theme="dark"] .ide-window {
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
}
[data-theme="dark"] .ide-titlebar {
    background: #3a3a3a;
    border-bottom: 1px solid #2a2a2a;
}
[data-theme="dark"] .ide-filename  { color: #aaaaaa; }
[data-theme="dark"] .ide-badge     { color: #888; background: rgba(255,255,255,.07); }
[data-theme="dark"] .ide-run-btn   { color: #28c840; background: rgba(40,200,64,.10); border-color: rgba(40,200,64,.30); }
[data-theme="dark"] .ide-run-btn:hover { background: rgba(40,200,64,.22); border-color: #28c840; color: #3de050; }
[data-theme="dark"] .ide-run-btn.ran   { color: #555; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .ide-output-header { background: #151515; color: #555; border-top-color: #333; }

/* ---- Resume (#resume) ---- */
/* !important batte .grey-section { background: #ebebeb } */
[data-theme="dark"] #resume {
    background: #111111 !important;
    color: #b0b0b0;
}

[data-theme="dark"] #resume h1,
[data-theme="dark"] #resume h2          { color: #ffffff; }
[data-theme="dark"] #resume h3,
[data-theme="dark"] #resume h4          { color: #e0e0e0; }
[data-theme="dark"] #resume p           { color: #999999; }
[data-theme="dark"] #resume .resume-header h2 { color: #ffc800; }

[data-theme="dark"] #resume .timeline-wrap::before {
    background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] #resume .timeline-ico        { background: #444444; }
[data-theme="dark"] #resume .timeline-header p   { color: #888888; }
[data-theme="dark"] #resume .timeline-content h4::after {
    background: rgba(255, 255, 255, 0.15);
}

/* ---- Portfolio (#portfolio) ---- */
[data-theme="dark"] #portfolio {
    background: #202020;
    color: #b0b0b0;
}

[data-theme="dark"] #portfolio h1,
[data-theme="dark"] #portfolio h2       { color: #ffffff; }
[data-theme="dark"] #portfolio h3,
[data-theme="dark"] #portfolio h4       { color: #e0e0e0; }
[data-theme="dark"] #portfolio p        { color: #999999; }
/* folio-item hanno già overlay scuro on hover — funziona in dark mode */
/* popup-modal rimane bianca (overlay separato) */

/* =============================================
   LIGHT MODE OVERRIDES
   (sovrascrivono i bg scuri di header, services, contact, footer)
   ============================================= */

/* ---- Global ---- */
[data-theme="light"] body {
    background: #f5f5f5;
    color: #6e6e6e;
}

[data-theme="light"] a,
[data-theme="light"] a:visited { color: #313131; }
[data-theme="light"] a:hover,
[data-theme="light"] a:focus   { color: #ffc800; }

/* ---- Header & Nav ---- */
[data-theme="light"] header .top-bar {
    background: rgba(232, 232, 232, 0.72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

@media only screen and (min-width: 900px) {
    [data-theme="light"] header {
        background: rgba(232, 232, 232, 0.72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
    }
}

/* Logo: versione scura in light mode */
[data-theme="light"] header .logo a {
    background-image: url("../images/logo_light_mode.png");
}

[data-theme="light"] .main-navigation {
    background: rgba(232, 232, 232, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .main-navigation li a       { color: #313131; }
[data-theme="light"] .main-navigation li a:hover { color: #ffc800; }
[data-theme="light"] .main-navigation li.current > a { color: #ffc800; }

[data-theme="light"] .menu-toggle span { background-color: #313131; }
[data-theme="light"] .menu-toggle.is-clicked span::before,
[data-theme="light"] .menu-toggle.is-clicked span::after { background-color: #313131; }

/* Toggle pill in light mode */
[data-theme="light"] #theme-toggle      { background: #cccccc; }
[data-theme="light"] .theme-pill-thumb  { transform: translateX(24px); }

/* ---- Services (#services) ---- */
[data-theme="light"] #services {
    background: #f0f0f0;
    background-image: none;
}

[data-theme="light"] #services .overlay { display: none; }

[data-theme="light"] #services .section-intro h1,
[data-theme="light"] .services-list h3  { color: #313131; }

[data-theme="light"] #services .section-intro p,
[data-theme="light"] .services-list .desc { color: #6e6e6e; }

/* service cards in light mode */
[data-theme="light"] .service-card {
    background: #ffffff;
    border-color: rgba(49, 49, 49, 0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .service-card:hover {
    border-color: #ffc800;
    box-shadow: 0 8px 24px rgba(255, 200, 0, 0.15);
}
[data-theme="light"] .service-card h3          { color: #313131; }
[data-theme="light"] .service-tagline          { color: #888888; }
[data-theme="light"] .service-features li      { color: #6e6e6e; }
[data-theme="light"] .service-expand-btn       { color: #ffc800; border-color: rgba(255,200,0,0.5); }
[data-theme="light"] .service-expand-btn .btn-label { color: #ffc800; }
[data-theme="light"] .benefit-item {
    background: rgba(255, 200, 0, 0.06);
    border-color: rgba(255, 200, 0, 0.3);
    color: #6e6e6e;
}
[data-theme="light"] .benefit-item:hover {
    background: rgba(255, 200, 0, 0.15);
    border-color: #ffc800;
}
[data-theme="light"] #services .section-intro h5 { color: #ffc800; }

/* ---- Contact form messages light mode ---- */
[data-theme="light"] #message-warning {
    background: rgba(220, 50, 50, 0.06);
    color: #c0392b;
}
[data-theme="light"] #message-success {
    background: rgba(255, 200, 0, 0.1);
    color: #b8860b;
}

/* ---- LinkedIn logo button light mode ---- */
[data-theme="light"] .linkedin-logo-btn    { border-color: rgba(49, 49, 49, 0.3); }
[data-theme="light"] .linkedin-logo-btn:hover,
[data-theme="light"] .linkedin-logo-btn:focus { border-color: #ffc800; }
[data-theme="light"] .linkedin-logo--dark  { display: none; }
[data-theme="light"] .linkedin-logo--light { display: block; }

/* ---- Contact (#contact) ---- */
[data-theme="light"] #contact { background: #f5f5f5; }

[data-theme="light"] #contact .section-intro h1 { color: #313131; }
[data-theme="light"] #contact .section-intro p  { color: #6e6e6e; }
[data-theme="light"] .contact-info p            { color: #313131; }
[data-theme="light"] .contact-info .icon i     { color: #313131; }

[data-theme="light"] #contact input[type="text"],
[data-theme="light"] #contact input[type="email"],
[data-theme="light"] #contact textarea {
    color: #313131;
    border: 1px solid rgba(49, 49, 49, 0.2);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] #contact input[type="text"]:focus,
[data-theme="light"] #contact input[type="email"]:focus,
[data-theme="light"] #contact textarea:focus {
    border-color: #ffc800;
    box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    color: #313131;
}

[data-theme="light"] .contact-form ::-webkit-input-placeholder { color: rgba(49, 49, 49, 0.4); }
[data-theme="light"] .contact-form :-moz-placeholder            { color: rgba(49, 49, 49, 0.4); }
[data-theme="light"] .contact-form ::-moz-placeholder           { color: rgba(49, 49, 49, 0.4); }
[data-theme="light"] .contact-form :-ms-input-placeholder       { color: rgba(49, 49, 49, 0.4); }

/* ---- Footer ---- */
[data-theme="light"] footer { background: #f0f0f0; }

[data-theme="light"] footer a,
[data-theme="light"] footer a:visited           { color: #313131; }
[data-theme="light"] .footer-links,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-links a:visited    { color: #aaaaaa; }
[data-theme="light"] .footer-sep                { color: #cccccc; }
[data-theme="light"] footer a:hover,
[data-theme="light"] footer a:focus             { color: #ffc800; }
[data-theme="light"] footer .footer-social li a { color: #313131; }
[data-theme="light"] footer p                   { color: #6e6e6e; }

/* =============================================
   COOKIE BANNER
   ============================================= */

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a1a1a;
    border-top: 2px solid #ffc800;
    padding: 16px 24px;
}

.cookie-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    color: #b0b0b0;
    font-size: 1.35rem;
    margin: 0;
    line-height: 1.5;
}

.cookie-banner-text a           { color: #ffc800; text-decoration: underline; }
.cookie-banner-text a:hover     { color: #ffd440; }
.cookie-banner-actions          { display: flex; gap: 10px; flex-shrink: 0; }

.cookie-btn {
    padding: 8px 22px;
    border: none;
    border-radius: 25px;
    font-size: 1.35rem;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cookie-btn:hover               { opacity: 0.85; }
.cookie-btn-accept              { background: #ffc800; color: #111111; }
.cookie-btn-reject              { background: transparent; color: #b0b0b0; border: 1px solid #555555; }

/* Light mode */
[data-theme="light"] #cookie-banner         { background: #f0f0f0; }
[data-theme="light"] .cookie-banner-text    { color: #6e6e6e; }
[data-theme="light"] .cookie-btn-reject     { color: #313131; border-color: #aaaaaa; }

@media only screen and (max-width: 600px) {
    .cookie-banner-inner    { flex-direction: column; align-items: flex-start; }
    .cookie-banner-actions  { width: 100%; }
    .cookie-btn             { flex: 1; text-align: center; }
}