/* ============================================================
   style-shared.css — JVDesignStudio
   Shared design tokens, reset, nav, footer, and utilities.
   Generated by build system — do not add page-specific rules.
   ============================================================ */

/* ── Design tokens ── */
:root {
    --beige:      #F0EAD6;
    --tan:        #D2B48C;
    --tan-dk:     #b8956a;
    --rose:       #BC4749;
    --rose-dk:    #9b3a3c;
    --teal:       #70A3A7;
    --teal-dk:    #4e7d80;
    --charcoal:   #403B33;
    --charcoal-lt:#5a5449;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Logo animation ── */
@keyframes logo-shift {
    0%   { color: var(--tan); }
    33%  { color: var(--rose); }
    66%  { color: var(--teal); }
    100% { color: var(--tan); }
}
.logo-name { animation: logo-shift 6s infinite alternate ease-in-out; font-weight: 800; }

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── Skip link ── */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
    left: 50%; transform: translateX(-50%); top: 8px;
    width: auto; height: auto;
    padding: 10px 20px; background: #BC4749; color: white;
    font-weight: 700; font-size: .9rem; border-radius: 8px;
    z-index: 9999; text-decoration: none; white-space: nowrap;
}

/* ── Site header / nav ── */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(30,28,24,0.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(240,234,214,0.08);
    box-shadow: 0 2px 18px rgba(0,0,0,0.3);
}
.header-inner {
    max-width: 1140px; margin: 0 auto;
    padding: 0 24px; height: 68px;
    display: flex; align-items: center; gap: 8px;
}
.logo-link { display: flex; align-items: center; gap: 10px; font-size: 1.22rem; margin-right: auto; }
.logo-link img { height: 36px; border-radius: 8px; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
    font-size: 0.85rem; font-weight: 600; color: rgba(240,234,214,0.65);
    padding: 7px 11px; border-radius: 8px; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: rgba(255,255,255,0.07); color: var(--beige); }
.nav-link.active { background: rgba(188,71,73,0.25); color: var(--rose); }
.nav-toggle {
    display: none; background: none; border: none;
    padding: 8px 12px; font-size: 1.4rem; cursor: pointer;
    color: var(--beige); flex-shrink: 0;
}
.mobile-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: #1e1c18; border-top: 3px solid var(--rose);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease;
}
.mobile-nav.open { max-height: calc(100vh - 68px); overflow-y: auto; }
.mobile-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 24px; font-size: 1rem; font-weight: 600;
    color: rgba(240,234,214,0.7);
    border-bottom: 1px solid rgba(240,234,214,0.06);
    transition: background 0.12s;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { background: rgba(255,255,255,0.05); color: var(--beige); }
@media(max-width:860px) { .main-nav { display: none !important; } .nav-toggle { display: block !important; } }
@media(min-width:861px) { .mobile-nav { display: none !important; } }

/* ── Shared section labels ── */
.section-tag {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: white;
    background: var(--teal-dk); border-radius: 999px;
    padding: 5px 16px; margin-bottom: 14px;
}
.section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900; color: white; line-height: 1.15;
}
.section-header { text-align: center; margin-bottom: 48px; }

/* ── Shared buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--rose); color: white; font-weight: 700;
    border-radius: 14px; padding: 14px 32px; font-size: 1rem;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-primary:hover { background: var(--rose-dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); color: white; font-weight: 700;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 14px; padding: 13px 30px; font-size: 1rem;
    cursor: pointer; transition: background 0.2s;
}
.btn-outline:hover { background: rgba(255,255,255,0.25); }

/* ── jvds-strip (floating tab nav used on game pages) ── */
.jvds-strip{position:fixed;top:0;left:0;right:0;z-index:9999;height:0;overflow:hidden;transition:height .25s ease;background:rgba(10,10,18,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(240,234,214,.08);font-family:'Inter','Segoe UI',sans-serif;}
.jvds-strip.open{height:48px;}
.jvds-strip-inner{height:48px;display:flex;align-items:center;padding:0 14px;gap:8px;}
.jvds-strip-logo{font-size:.82rem;font-weight:800;color:#F0EAD6;text-decoration:none;font-family:'Fredoka',cursive;margin-right:auto;}
.jvds-strip-links{display:flex;align-items:center;gap:2px;}
.jvds-strip-links a{font-size:.72rem;font-weight:600;color:rgba(240,234,214,.65);padding:4px 8px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.jvds-strip-links a:hover{background:rgba(255,255,255,.08);color:#F0EAD6;}
.jvds-strip-links a.hl{background:rgba(112,163,167,.18);color:#93d8d0;border:1px solid rgba(112,163,167,.25);}
.jvds-strip-close{background:none;border:none;color:rgba(240,234,214,.5);font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1;flex-shrink:0;}
.jvds-tab{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9999;background:rgba(10,10,18,0.9);border:1px solid rgba(240,234,214,.1);border-top:none;border-radius:0 0 8px 8px;padding:3px 14px 4px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,234,214,.5);cursor:pointer;transition:color .15s,background .15s;font-family:'Inter','Segoe UI',sans-serif;}
.jvds-tab:hover{color:#F0EAD6;background:rgba(10,10,18,.98);}
.jvds-tab.hidden{display:none;}

/* ── jvds-site-nav (dark compact nav used on tool/workshop pages) ── */
.jvds-site-nav{position:sticky;top:0;z-index:9999;background:rgba(10,10,18,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(240,234,214,0.08);box-shadow:0 2px 16px rgba(0,0,0,0.4);font-family:'Inter','Segoe UI',sans-serif;}
.jvds-nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:54px;display:flex;align-items:center;gap:8px;}
.jvds-nav-logo{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:800;margin-right:auto;text-decoration:none;color:#F0EAD6;font-family:'Fredoka',cursive;}
.jvds-nav-logo img{height:30px;border-radius:7px;}
.jvds-nav-links{display:flex;align-items:center;gap:2px;}
.jvds-nav-links a{font-size:0.78rem;font-weight:600;color:rgba(240,234,214,0.6);padding:5px 9px;border-radius:7px;white-space:nowrap;text-decoration:none;transition:background 0.15s,color 0.15s;}
.jvds-nav-links a:hover{background:rgba(255,255,255,0.07);color:#F0EAD6;}
.jvds-nav-links a.active{background:rgba(188,71,73,0.25);color:#BC4749;}
.jvds-nav-links a.nav-tools{background:rgba(124,58,237,0.2);color:#a78bfa;border:1px solid rgba(124,58,237,0.3);}
.jvds-nav-links a.nav-tools:hover{background:rgba(124,58,237,0.35);color:#c4b5fd;}
.jvds-nav-links a.nav-tools.active{background:rgba(124,58,237,0.4);color:#c4b5fd;border-color:rgba(124,58,237,0.5);}
.jvds-nav-toggle{display:none;background:none;border:none;padding:6px 10px;font-size:1.3rem;cursor:pointer;color:#F0EAD6;flex-shrink:0;line-height:1;}
.jvds-mobile-nav{position:absolute;top:100%;left:0;right:0;z-index:9998;background:#0d0d18;border-top:2px solid #BC4749;box-shadow:0 8px 32px rgba(0,0,0,0.5);max-height:0;overflow:hidden;transition:max-height 0.4s ease;font-family:'Inter','Segoe UI',sans-serif;}
.jvds-mobile-nav.open{max-height:80vh;overflow-y:auto;}
.jvds-mobile-nav a{display:flex;align-items:center;gap:10px;padding:12px 22px;font-size:0.95rem;font-weight:600;color:rgba(240,234,214,0.75);border-bottom:1px solid rgba(240,234,214,0.05);text-decoration:none;transition:background 0.12s;}
.jvds-mobile-nav a:hover{background:rgba(255,255,255,0.05);color:#F0EAD6;}
.jvds-mobile-nav a:last-child{border-bottom:none;}
@media(max-width:860px){.jvds-nav-links{display:none!important;}.jvds-nav-toggle{display:block!important;}}
@media(min-width:861px){.jvds-mobile-nav{display:none!important;}}

/* ── jvds-tools-footer (slim footer used on tool/workshop pages) ── */
.jvds-tools-footer{height:32px;background:rgba(10,10,18,0.97);border-top:1px solid rgba(240,234,214,0.08);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;font-family:'Inter','Segoe UI',sans-serif;}
.jvds-tools-footer a{font-size:0.7rem;font-weight:600;color:rgba(240,234,214,0.5);text-decoration:none;transition:color 0.15s;}
.jvds-tools-footer a:hover{color:#F0EAD6;}

/* ── Site footer ── */
.site-footer { background: #2a2720; padding: 52px 24px 28px; border-top: 1px solid rgba(240,234,214,0.06); }
.footer-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer-logo { font-family: 'Fredoka', cursive; font-size: 1.5rem; font-weight: 700; color: var(--beige); }
.footer-tagline { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,234,214,0.45); }
.footer-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 0.82rem; font-weight: 600; color: rgba(240,234,214,0.55); padding: 4px 9px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.footer-links a:hover { color: var(--beige); background: rgba(255,255,255,0.07); }
.footer-socials { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.footer-socials a { font-size: 0.82rem; font-weight: 600; color: rgba(240,234,214,0.55); padding: 4px 9px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.footer-socials a:hover { color: var(--beige); background: rgba(255,255,255,0.07); }
.footer-copy { font-size: 0.73rem; color: rgba(240,234,214,0.3); border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; width: 100%; }