/* ══════════════════════════════════════════════════════════════
   FOOTER GLOBALE — phIllumina v2
   Sostituisce il vecchio includes/footer.php su tutte le pagine.
   CSS standalone: non dipende da home2.css.
   ══════════════════════════════════════════════════════════════ */

:root {
    --ft-bg:       #F8F6F1;
    --ft-graphite: #1A1817;
    --ft-gold:     #FBC302;
    --ft-gold-dk:  #B8753A;
    --ft-text2:    rgba(26,24,23,0.55);
    --ft-text3:    rgba(26,24,23,0.35);
    --ft-line:     rgba(26,24,23,0.09);
    --ft-ease:     cubic-bezier(0.16,1,0.3,1);
    --ft-mono:     'JetBrains Mono', monospace;
    --ft-sans:     'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* ── WRAPPER ─────────────────────────────────────────────────── */
.ph-footer {
    background: var(--ft-bg);
    color: var(--ft-graphite);
    border-top: 1px solid var(--ft-line);
    position: relative;
    font-family: var(--ft-sans);
}
/* Linea gold in cima */
.ph-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ft-gold), transparent);
    pointer-events: none;
}

/* ── TOP BAR (grafite) ───────────────────────────────────────── */
.ph-ft-topbar {
    background: var(--ft-graphite);
    color: var(--ft-bg);
    padding: 18px 32px;
}
.ph-ft-topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.ph-ft-contacts {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.ph-ft-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ft-bg);
    text-decoration: none;
    transition: color 0.25s var(--ft-ease);
}
.ph-ft-contact-link:hover { color: var(--ft-gold); }
.ph-ft-contact-link svg { color: var(--ft-gold); flex-shrink: 0; }
.ph-ft-contact-label {
    font-family: var(--ft-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(248,246,241,0.45);
}
.ph-ft-contact-value {
    font-size: 15px;
    font-weight: 600;
}
.ph-ft-contact-sep { color: rgba(248,246,241,0.2); }

/* Social top bar */
.ph-ft-social-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-ft-social-link {
    width: 34px; height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(248,246,241,0.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(248,246,241,0.5);
    text-decoration: none;
    transition: all 0.22s var(--ft-ease);
    flex-shrink: 0;
}
.ph-ft-social-link:hover {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: var(--ft-graphite);
    transform: translateY(-2px);
}
.ph-ft-social-nolink {
    cursor: default;
    opacity: 0.3;
}
.ph-ft-social-nolink:hover {
    background: transparent;
    border-color: rgba(248,246,241,0.12);
    color: rgba(248,246,241,0.5);
    transform: none;
}
.ph-ft-social-link svg { width: 15px; height: 15px; }

/* ── MAIN GRID ───────────────────────────────────────────────── */
.ph-ft-main {
    padding: 72px 32px 56px;
}
.ph-ft-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1fr 1fr;
    gap: 56px;
}

/* Brand col */
.ph-ft-brand {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Logo footer — SVG + "by Phaenomena Group" */
.ph-ft-logo-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-decoration: none;
    margin-bottom: 20px;
}
.ph-ft-logo-img {
    height: clamp(32px, 2.4vw, 46px);
    width: auto;
    display: block;
}
.ph-ft-logo-by {
    font-family: var(--ft-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(26,24,23,0.4);
    text-transform: uppercase;
}
.ph-ft-logo-pha {
    color: #1A1817;
    font-weight: 700;
}
.ph-ft-logo-grp {
    color: #02A0E1;
    font-weight: 700;
}
.ph-ft-company {
    font-size: 15px;
    font-weight: 600;
    color: var(--ft-graphite);
    margin-bottom: 3px;
}
.ph-ft-piva {
    font-family: var(--ft-mono);
    font-size: 12px;
    color: var(--ft-text3);
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}
.ph-ft-piva strong { color: var(--ft-text2); font-weight: 600; }

.ph-ft-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.ph-ft-mark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--ft-line);
    font-family: var(--ft-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ft-text2);
    transition: all 0.22s;
    background: transparent;
}
.ph-ft-mark:hover { border-color: var(--ft-graphite); color: var(--ft-graphite); }
.ph-ft-mark-gold {
    border-color: var(--ft-gold-dk);
    color: var(--ft-gold-dk);
}
.ph-ft-mark-dot {
    width: 5px; height: 5px;
    background: var(--ft-gold-dk);
    border-radius: 50%;
}

/* Sedi col */
.ph-ft-sedi {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ph-ft-sede {
    border-left: 2px solid var(--ft-line);
    padding-left: 16px;
    transition: border-color 0.22s;
}
.ph-ft-sede:hover { border-left-color: var(--ft-gold-dk); }
.ph-ft-sede-tag {
    font-family: var(--ft-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--ft-gold-dk);
    letter-spacing: 0.18em;
    margin-bottom: 7px;
    text-transform: uppercase;
}
.ph-ft-sede address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ft-text2);
}

/* Link columns */
.ph-ft-col-title {
    font-family: var(--ft-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ft-graphite);
    margin-bottom: 26px;
}
.ph-ft-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.ph-ft-list li a {
    font-size: 15px;
    color: var(--ft-text2);
    text-decoration: none;
    display: inline-block;
    padding-left: 0;
    transition: color 0.22s var(--ft-ease), padding-left 0.22s var(--ft-ease);
    position: relative;
}
.ph-ft-list li a::before {
    content: '→';
    position: absolute;
    left: 0;
    opacity: 0;
    color: var(--ft-gold-dk);
    transition: opacity 0.22s, transform 0.22s;
    transform: translateX(-8px);
}
.ph-ft-list li a:hover {
    color: var(--ft-graphite);
    padding-left: 18px;
}
.ph-ft-list li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ── BOTTOM BAR ──────────────────────────────────────────────── */
.ph-ft-bottom {
    border-top: 1px solid var(--ft-line);
    padding: 20px 32px;
    background: rgba(26,24,23,0.025);
}
.ph-ft-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.ph-ft-copyright {
    font-family: var(--ft-mono);
    font-size: 12px;
    color: var(--ft-text3);
    letter-spacing: 0.05em;
}
.ph-ft-legal {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
}
.ph-ft-legal a {
    font-family: var(--ft-mono);
    font-size: 12px;
    color: var(--ft-text3);
    text-decoration: none;
    transition: color 0.2s;
}
.ph-ft-legal a:hover { color: var(--ft-graphite); }
.ph-ft-legal .sep { color: var(--ft-text3); opacity: 0.4; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ph-ft-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
    .ph-ft-main { padding: 56px 24px 40px; }
    .ph-ft-topbar { padding: 16px 24px; }
    .ph-ft-bottom { padding: 18px 24px; }
}
@media (max-width: 640px) {
    .ph-ft-grid { grid-template-columns: 1fr; gap: 36px; }
    .ph-ft-contacts { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ph-ft-contact-sep { display: none; }
    .ph-ft-topbar-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .ph-ft-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ── ANIMAZIONE PUNTO PULSANTE ───────────────────────────────── */
@keyframes ph-ft-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(251,195,2,0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(251,195,2,0); }
    100% { box-shadow: 0 0 0 0 rgba(251,195,2,0); }
}
.ph-ft-pulse-dot {
    width: 6px; height: 6px;
    background: var(--ft-gold);
    border-radius: 50%;
    animation: ph-ft-pulse 2.2s ease-out infinite;
}