/* ═══════════════════════════════════════════════════════════════
   ASL Security 2026 — global.css v3.0
   DOAR frontend. Admin nu primeste nimic din fisierul asta.
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg, #0a0f14);
  color: var(--text, #f1f5f9);
  font-family: var(--ff, 'Inter', sans-serif);
  font-size: var(--fs, 15px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Spatiu sub header fix */
.wp-site-blocks { padding-top: var(--header-h, 80px) !important; }

a { color: var(--p, #137fec); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c, #00f2ff); }
img { max-width: 100%; height: auto; display: block; }

/* ── HEADER ──────────────────────────────────────────────────── */
.asl-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h, 80px);
  background: rgba(10, 15, 20, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bd, rgba(255,255,255,.08));
  transition: height .3s ease, background .3s ease;
}
.asl-header.scrolled {
  height: 64px;
  background: rgba(5, 7, 10, 0.98) !important;
}

.asl-header-inner {
  height: var(--header-h, 80px);
  padding-inline: clamp(16px, 3vw, 40px);
  max-width: 1440px;
  margin-inline: auto;
  transition: height .3s ease;
}
.asl-header.scrolled .asl-header-inner { height: 64px; }

/* Logo */
.asl-logo .wp-block-site-logo img {
  height: 36px !important;
  width: auto !important;
}
.asl-logo .wp-block-site-title a {
  font-size: 16px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: var(--text, #f1f5f9) !important;
  text-decoration: none !important;
}

/* ── NAVIGARE BLOC ───────────────────────────────────────────── */
.asl-nav { flex-shrink: 1; min-width: 0; }

.asl-nav .wp-block-navigation__container { gap: 2px !important; flex-wrap: nowrap !important; }

.asl-nav .wp-block-navigation-item__content {
  padding: 7px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: rgba(241, 245, 249, 0.42) !important;
  border-radius: 7px !important;
  transition: all .2s !important;
  white-space: nowrap !important;
}
.asl-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.asl-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--p, #137fec) !important;
  background: rgba(19, 127, 236, 0.1) !important;
}

/* Dropdown submeniu */
.asl-nav .wp-block-navigation__submenu-container {
  background: rgba(5, 7, 10, 0.97) !important;
  border: 1px solid var(--bd, rgba(255,255,255,.08)) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  min-width: 210px !important;
  top: calc(100% + 8px) !important;
}
.asl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 12px !important;
  color: rgba(241, 245, 249, 0.5) !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.asl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
  color: var(--p, #137fec) !important;
  background: rgba(19, 127, 236, 0.1) !important;
}

/* Sageata submeniu */
.asl-nav .wp-block-navigation__submenu-icon { opacity: 0.4; transition: opacity .2s; }
.asl-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { opacity: 1; }

/* Mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(5, 7, 10, 0.99) !important;
  padding: 24px 20px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 16px !important;
  padding: 12px 16px !important;
  color: rgba(241, 245, 249, 0.75) !important;
  text-transform: uppercase !important;
}

/* ── HEADER DREAPTA — Portale + CTA ─────────────────────────── */
.asl-header-right {
  flex-shrink: 0;
  gap: 5px !important;
}

/* Portale comune */
.asl-portal .wp-block-button__link {
  transition: all .2s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.asl-portal.client .wp-block-button__link:hover,
.asl-portal.angajat .wp-block-button__link:hover {
  background: rgba(19, 127, 236, 0.12) !important;
  border-color: rgba(19, 127, 236, 0.5) !important;
  color: var(--p, #137fec) !important;
}
.asl-portal.suport .wp-block-button__link:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #10b981 !important;
}

/* CTA button */
.asl-cta .wp-block-button__link {
  transition: all .2s ease !important;
  white-space: nowrap !important;
}
.asl-cta .wp-block-button__link:hover {
  background: #0f6fd4 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(19, 127, 236, 0.4) !important;
}

/* ── SIDEBAR NAV ─────────────────────────────────────────────── */
.asl-snav {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.asl-snav-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  border-radius: 9px;
  color: rgba(241, 245, 249, 0.22);
  transition: all .2s ease;
  text-decoration: none;
  position: relative;
}
.asl-snav-btn:hover, .asl-snav-btn.active {
  background: rgba(19, 127, 236, 0.15);
  border-color: rgba(19, 127, 236, 0.4);
  color: var(--p, #137fec);
}
.asl-snav-btn .material-icons-round { font-size: 16px; }

/* Tooltip stanga */
.asl-snav-btn::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: rgba(5, 7, 10, 0.95);
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  color: var(--text, #f1f5f9);
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.asl-snav-btn:hover::after { opacity: 1; }

/* ── FAB ─────────────────────────────────────────────────────── */
.asl-fab {
  position: fixed;
  bottom: 24px; right: 18px;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--p, #137fec), var(--c, #00f2ff));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  z-index: 989;
  box-shadow: 0 8px 28px rgba(19, 127, 236, 0.45);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.asl-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(19, 127, 236, 0.6);
  color: #fff;
}
.asl-fab .material-icons-round { font-size: 20px; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.asl-footer { background: #05070a !important; border-top: 1px solid var(--bd, rgba(255,255,255,.08)); }

.asl-footer .wp-block-navigation-item__content {
  color: rgba(241, 245, 249, 0.38) !important;
  font-size: 13px !important;
  padding: 3px 0 !important;
  transition: color .2s !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.asl-footer .wp-block-navigation-item__content:hover {
  color: var(--p, #137fec) !important;
}
.asl-footer h6 { margin-bottom: 4px !important; }

/* ── CARDS ───────────────────────────────────────────────────── */
.is-style-asl-card {
  background: rgba(13, 21, 32, 0.8) !important;
  border: 1px solid var(--bd, rgba(255,255,255,.08)) !important;
  border-radius: 20px !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
  backdrop-filter: blur(12px);
}
.is-style-asl-card:hover {
  border-color: rgba(19, 127, 236, 0.3) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-2px);
}

/* ── BUTTONS GLOBAL ──────────────────────────────────────────── */
.wp-block-button__link {
  transition: all .2s ease !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  transition: all .25s ease !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(19, 127, 236, 0.08) !important;
}

/* ── HERO ────────────────────────────────────────────────────── */
.asl-hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text, #f1f5f9);
}

/* Block content typography */
.wp-block-post-content p,
.wp-block-post-content li {
  color: rgba(241, 245, 249, 0.75);
  line-height: 1.75;
}
.wp-block-post-content h2 { font-size: clamp(22px, 3vw, 32px); margin-top: 2em; margin-bottom: .6em; }
.wp-block-post-content h3 { font-size: clamp(18px, 2.5vw, 24px); margin-top: 1.6em; margin-bottom: .5em; }

/* Separator */
.wp-block-separator { border-color: var(--bd, rgba(255,255,255,.08)) !important; opacity: 1 !important; }

/* ── SEPARATOARE SECTIUNI ────────────────────────────────────── */
/* Fara box-uri vizibile - sectiunile sunt transparente, doar cardurile au background */
.wp-block-post-content > .wp-block-group > .wp-block-group.alignfull + .wp-block-group.alignfull {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── CARDURI EGALE ───────────────────────────────────────────── */
.asl-cards-equal { align-items: stretch !important; }
.asl-cards-equal .wp-block-column { display: flex !important; flex-direction: column !important; }
.asl-cards-equal .wp-block-column > .wp-block-group { flex: 1 !important; height: 100% !important; }
.asl-card-icon {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.asl-card-icon p { margin: 0 !important; line-height: 1 !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .asl-portal { display: none !important; }
}
@media (max-width: 820px) {
  .asl-snav { display: none; }
  .asl-fab { bottom: 16px; right: 14px; width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .wp-site-blocks { padding-top: 70px !important; }
  .asl-header { height: 70px; }
  .asl-header-inner { height: 70px; padding-inline: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMAȚII ASL 2026 — identice cu mockup-ul
   ═══════════════════════════════════════════════════════════════ */

/* ── Pulse — dot-ul cyan din eyebrow / status indicators ────── */
@keyframes asl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.75); }
}
.asl-pulse,
.asl-eyebrow::before {
  animation: asl-pulse 2s ease-in-out infinite;
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.asl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.asl-reveal.asl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Carduri stagger (copii din asl-cards-equal) ────────────── */
.asl-cards-equal .wp-block-column {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.asl-cards-equal .wp-block-column.asl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card hover — identic cu mockup (.card:hover) ───────────── */
.is-style-asl-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.is-style-asl-card:hover {
  border-color: rgba(19,127,236,.35) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(19,127,236,.1) !important;
  transform: translateY(-3px) !important;
}

/* ── Button hover glow — identic cu mockup ─────────────────── */
.wp-block-button__link {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(19,127,236,.45) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(19,127,236,.08) !important;
  box-shadow: 0 0 20px rgba(19,127,236,.2) !important;
}

/* ── FAB pulse ring ─────────────────────────────────────────── */
@keyframes asl-ring {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.6); opacity: 0;  }
}
.asl-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(19,127,236,.5);
  animation: asl-ring 2s ease-out infinite;
  pointer-events: none;
}

/* ── Gradient text shimmer (heading gradient) ───────────────── */
@keyframes asl-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
h1 span[style*="background-clip:text"],
h2 span[style*="background-clip:text"] {
  background-size: 200% 200% !important;
  animation: asl-shimmer 6s ease infinite;
}

/* ── Eyebrow label dot ──────────────────────────────────────── */
.asl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.asl-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #00f2ff;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .asl-reveal,
  .asl-cards-equal .wp-block-column {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .asl-pulse, .asl-eyebrow::before, .asl-fab::after,
  h1 span[style*="background-clip:text"],
  h2 span[style*="background-clip:text"] {
    animation: none !important;
  }
}

/* ── Float animation pentru badge-ul AI Scanner ─────────────── */
@keyframes asl-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Hero image mosaic responsive ───────────────────────────── */
@media (max-width: 768px) {
  /* Ascunde mozaicul pe mobile, pastreaza doar textul */
  .wp-block-columns .wp-block-column:last-child > .wp-block-html:has(img) {
    display: none;
  }
}

/* ── Imagini in pattern-uri: border + shadow consistent ─────── */
.asl-img-card img {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
  display: block;
  width: 100%;
  object-fit: cover;
}