/* Shared Nav & Footer Styles for o2log.com */

/* ─── NAV ─── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 clamp(1.5rem,4vw,3rem);height:64px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-left{display:flex;align-items:center;gap:1.5rem;}
.nav-logo{font-size:1.4rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;text-decoration:none;}
.nav-logo-icon{width:36px;height:36px;flex-shrink:0;}
.nav-logo span{line-height:1;}
.nav-logo sub{font-size:0.55em;vertical-align:baseline;position:relative;top:0.3em;margin:0 -0.05em;color:#fff}
.nav-link{color:var(--muted);text-decoration:none;font-size:0.85rem;font-weight:500;letter-spacing:0.04em;transition:color 0.2s;}
.nav-link:hover{color:var(--text)}
.nav-menu{position:relative}
.nav-menu-btn{background:none;border:none;color:var(--muted);font-family:inherit;font-size:0.85rem;font-weight:500;letter-spacing:0.04em;cursor:pointer;display:flex;align-items:center;gap:5px;padding:8px 0;transition:color 0.2s}
.nav-menu-btn:hover{color:var(--text)}
.nav-menu-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform 0.3s}
.nav-menu.open .nav-menu-btn svg{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 12px);left:0;
  min-width:340px;
  background:rgba(18,18,20,0.95);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:12px;
  padding:8px 0;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
}
.nav-menu.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;
  color:var(--muted);text-decoration:none;
  font-size:0.82rem;font-weight:400;line-height:1.4;
  transition:all 0.2s;
}
.nav-dropdown a:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-dropdown a .dd-num{
  font-size:0.65rem;color:var(--green);font-weight:600;
  letter-spacing:0.05em;min-width:20px;opacity:0.7;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:50px;
  background:var(--green);color:#0a0a0a;
  text-decoration:none;font-size:0.82rem;font-weight:600;
  letter-spacing:0.02em;transition:all 0.3s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(52,211,153,0.3)}
.nav-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ─── FOOTER ─── */
.footer-main{
  border-top:1px solid var(--border);
  padding:clamp(3rem,6vh,5rem) clamp(1.5rem,4vw,3rem);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
  background:var(--bg);position:relative;z-index:30;
}
.footer-col-title{
  font-size:0.65rem;color:var(--green);letter-spacing:0.25em;
  text-transform:uppercase;font-weight:600;margin-bottom:1.2rem;
}
.footer-brand{
  font-size:1.4rem;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:8px;margin-bottom:0.8rem;
}
.footer-brand img{width:30px;height:30px;}
.footer-brand sub{font-size:0.55em;vertical-align:baseline;position:relative;top:0.3em;margin:0 -0.05em;}
.footer-tagline{font-size:0.82rem;color:var(--muted);font-weight:300;line-height:1.6;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-links a{
  color:var(--muted);text-decoration:none;font-size:0.82rem;font-weight:400;
  transition:color 0.2s;
}
.footer-links a:hover{color:var(--text)}
.footer-contact-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-contact-item svg{
  width:16px;height:16px;stroke:var(--green);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.footer-contact-item a{
  color:var(--muted);text-decoration:none;font-size:0.82rem;font-weight:400;
  transition:color 0.2s;
}
.footer-contact-item a:hover{color:var(--green)}
.footer-bar{
  border-top:1px solid var(--border);
  padding:1.5rem clamp(1.5rem,4vw,3rem);
  text-align:center;background:var(--bg);position:relative;z-index:30;
}
.footer-copy{font-size:0.7rem;color:var(--dim);letter-spacing:0.1em}

/* ─── MOBILE FAB ─── */
.mobile-fab{
  display:none;
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;
  flex-direction:column;align-items:flex-end;gap:10px;
}
.fab-options{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  opacity:0;transform:translateY(10px) scale(0.95);
  pointer-events:none;
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.mobile-fab.open .fab-options{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.fab-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:50px;
  background:rgba(18,18,20,0.95);border:1px solid var(--border);
  backdrop-filter:blur(16px);
  text-decoration:none;color:var(--text);
  font-size:0.82rem;font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  transition:background 0.2s;
}
.fab-option:hover{background:rgba(30,30,34,0.95)}
.fab-option svg{width:18px;height:18px;flex-shrink:0;}
.fab-option .fab-wa{fill:#25d366;}
.fab-option .fab-call{stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fab-btn{
  width:56px;height:56px;border-radius:50%;border:none;
  background:var(--green);color:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(52,211,153,0.3);
  transition:transform 0.3s,box-shadow 0.3s;
}
.fab-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px rgba(52,211,153,0.4)}
.fab-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.3s}
.mobile-fab.open .fab-btn svg{transform:rotate(45deg)}

/* ─── MOBILE ─── */
@media(max-width:768px){
  .site-nav{padding:0 1rem;height:56px}
  .nav-logo{font-size:1.2rem}
  .nav-logo-icon{width:28px;height:28px}
  .nav-left{gap:0.8rem}
  .nav-menu-btn{font-size:0.75rem}
  .nav-link{font-size:0.75rem}
  .nav-dropdown{
    position:fixed;top:56px;left:0;right:0;
    min-width:unset;width:100%;
    border-radius:0;border-left:none;border-right:none;
    transform:translateY(-8px);
  }
  .nav-menu.open .nav-dropdown{transform:translateY(0)}
  .nav-cta{display:none}
  .mobile-fab{display:flex}
  .footer-main{grid-template-columns:1fr;text-align:center;gap:2.5rem;padding:2.5rem 1.5rem}
  .footer-brand{justify-content:center}
  .footer-links{align-items:center}
  .footer-contact-item{justify-content:center}
}