/*
 * AEOvara — deferred.css
 * Ei-kriittiset tyylit: hover-tilat, animaatiot, footer,
 * mobiilivalikko-sisältö, dropdown-linkit, scanner, AEV-komponentit.
 * Ladataan non-blocking (rel="preload") — ei vaikuta LCP/FCP:hen.
 */

/* ── Neon-gradient-nappi: hover ─────────────────────────────────── */
.neon-gradient-btn:hover {
  box-shadow: 0 0 30px rgba(255, 34, 133, 0.5);
  transform: translateY(-2px);
}

/* ── Logo: hover ─────────────────────────────────────────────────── */
.nav-logo a:hover { opacity: 0.85; }
.nav-logo a:hover img {
  filter: drop-shadow(0 2px 20px rgba(255, 34, 133, 0.6));
}

/* ── Accordion: avautumisanimaatio ja @keyframes ─────────────────── */
details[open] .accordion-content {
  animation: fadeInDown 0.4s ease-out forwards;
}

@keyframes fadeInDown {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Footer ──────────────────────────────────────────────────────── */
#colophon {
  background-color: #151618 !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 60px;
  padding: 48px 0;
}

@media (max-width: 639px) {
  #colophon > div > div:first-child {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #colophon nav[aria-label="Sivukartta"] {
    justify-content: center;
    width: 100%;
    gap: 12px 20px;
  }
  #colophon nav[aria-label="Sosiaalinen media"] {
    justify-content: center;
    width: 100%;
  }
}

/* ── Sivunumerot: hover ──────────────────────────────────────────── */
nav.navigation .nav-links a:hover,
.page-numbers:hover,
.page-numbers.current {
  color: var(--color-primary);
}

/* ── WCAG: napin hover-korjaus ───────────────────────────────────── */
.bg-\[#d4006e\]:hover {
  background-color: #ff2285 !important;
}

/* ── Hamburger: hover ────────────────────────────────────────────── */
.hamburger-btn:hover {
  background: rgba(255, 34, 133, 0.12);
  border-color: rgba(255, 34, 133, 0.4);
}

/* ── Nav-linkit: hover-alaviiva-animaatio ────────────────────────── */
#aeovara-nav .nav-links a:hover,
#aeovara-nav .nav-links .dropdown-toggle:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

#aeovara-nav .nav-links a:hover::after,
#aeovara-nav .nav-links .dropdown-toggle:hover::after {
  transform: scaleX(1);
}

/* ── Dropdown-ikoni: hover/avaus-rotaatio ────────────────────────── */
.has-dropdown.is-open .dropdown-toggle .material-icons,
.has-dropdown:hover  .dropdown-toggle .material-icons {
  transform: rotate(180deg);
  color: #ff5aa5;
}

/* ── Dropdown-menu: glow-viiva yläreunassa ───────────────────────── */
#aeovara-nav .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -1px; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 34, 133, 0.75) 40%,
    rgba(127, 31, 159, 0.65) 60%,
    transparent
  );
  pointer-events: none;
}

/* ── Dropdown-menu: linkkityylit ─────────────────────────────────── */
#aeovara-nav .dropdown-menu > li {
  list-style: none;
  padding: 0;
}

/* Varmistetaan oikea flex-asettelu ja ylikirjoitetaan nav-linkkien base-tyylit */
#aeovara-nav .nav-links .dropdown-menu a {
  display: flex !important;
  flex-direction: column !important;
  white-space: normal !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

#aeovara-nav .nav-links .dropdown-menu a::after { display: none !important; }

/* ── CTA-nappi: shine-sweep + hover ─────────────────────────────── */
.nav-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transition: left 0.55s ease;
  pointer-events: none;
}

.nav-cta-btn:hover {
  background-position: right center;
  box-shadow:
    0 6px 32px rgba(255, 34, 133, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  color: #ffffff;
  text-decoration: none;
}
.nav-cta-btn:hover::before { left: 150%; }
.nav-cta-btn:active { transform: translateY(0); }

/* ── @keyframes: badge-pulse ja cta-glow ────────────────────────── */
@keyframes badge-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 2px 8px  rgba(180,0,90,0.45); }
  50%       { opacity: 0.72; box-shadow: 0 2px 18px rgba(255,34,133,0.7); }
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(180,0,90,0.4); }
  50%       { box-shadow: 0 6px 30px rgba(255,34,133,0.7); }
}

/* ── Mobiilivalikko: sisältötyylit ───────────────────────────────── */
.mobile-nav > nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0 20px;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.mobile-nav a::after { display: none !important; }

.mobile-nav a:hover {
  color: #ff5aa5;
  background: rgba(255, 34, 133, 0.06);
  border-left-color: #ff5aa5;
  text-decoration: none;
}

.mobile-nav a .material-icons {
  font-size: 18px;
  opacity: 0.7;
  flex-shrink: 0;
  pointer-events: none;
  color: inherit;
}

.mobile-group {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin: 6px 0;
  padding: 5px 0;
}

.mobile-group-label {
  display: block;
  padding: 8px 24px 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 34, 133, 0.6);
}

.mobile-group a {
  padding-left: 44px;
  font-weight: 500;
  font-size: 14px;
}

.mobile-cta-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 14px 20px 0;
  padding: 15px 24px;
  background: linear-gradient(135deg, #b8006a 0%, #ff2285 100%);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
  border-left: none !important;
  box-shadow: 0 4px 22px rgba(180, 0, 90, 0.45);
  transition: box-shadow 0.2s, transform 0.15s;
}

.mobile-cta-btn::after { display: none !important; }

.mobile-cta-btn:hover {
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 32px rgba(255, 34, 133, 0.65);
  transform: translateY(-1px);
  border-left-color: transparent !important;
}

/* ── Nappisysteemi: hover-tilat ──────────────────────────────────── */
a[class*="bg-[#d4006e]"]:not(#aeovara-nav a):hover,
button[class*="bg-[#d4006e]"]:not(#aeovara-nav button):hover,
a[class*="bg-primary"]:not([class*="bg-primary/"]):not(#aeovara-nav a):hover,
button[class*="bg-primary"]:not([class*="bg-primary/"]):not(#aeovara-nav button):hover,
.btn-primary:hover {
  background-position: right center !important;
  box-shadow: 0 6px 28px rgba(255,34,133,0.55), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

a[class*="border-white/20"][class*="rounded-xl"]:not(#aeovara-nav a):hover,
button[class*="border-white/20"][class*="rounded-xl"]:not(#aeovara-nav button):hover,
.btn-ghost:hover {
  background: rgba(255, 34, 133, 0.1) !important;
  border-color: rgba(255, 90, 165, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 34, 133, 0.2) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

a[class*="bg-secondary"]:not([class*="bg-secondary/"]):not([class*="text-secondary"]):not([class*="border-secondary"]):not(#aeovara-nav a):hover,
button[class*="bg-secondary"]:not([class*="bg-secondary/"]):not(#aeovara-nav button):hover,
.btn-secondary:hover {
  box-shadow: 0 6px 28px rgba(159, 63, 191, 0.65) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

a[class*="block"][class*="py-4"][class*="rounded-xl"][class*="border-white"]:not(#aeovara-nav a):hover {
  background: rgba(255, 34, 133, 0.1) !important;
  border-color: rgba(255, 90, 165, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 34, 133, 0.2) !important;
  transform: translateY(-1px) !important;
}
a[class*="block"][class*="py-4"][class*="rounded-xl"][class*="bg-[#d4006e]"]:not(#aeovara-nav a):hover,
a[class*="block"][class*="py-4"][class*="rounded-xl"][class*="bg-primary"]:not([class*="bg-primary/"]):not(#aeovara-nav a):hover {
  box-shadow: 0 6px 26px rgba(255, 34, 133, 0.55) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ── Tekstilinkit: hover ─────────────────────────────────────────── */
main a:not([class*="px-"]):not([class*="py-"]):not([class*="block"]):not(.aev-btn):not(.neon-gradient-btn):not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(#aeovara-nav a):not(.aeovara-ai-answer-box__cta):not(.ai-answer-box__cta):hover,
.elementor-link-override:hover,
a.elementor-link-override:hover {
  color: var(--link-hover) !important;
  text-decoration-color: rgba(255, 128, 181, 0.6) !important;
}

a[class*="text-primary"][class*="font-bold"]:not(#aeovara-nav a):hover {
  color: var(--link-hover) !important;
  text-decoration: none !important;
}

main a[target="_blank"]:not([class*="px-"]):not([class*="block"]):not(#aeovara-nav a)::after {
  content: ' ↗';
  font-size: 0.75em;
  opacity: 0.65;
}

a[class*="border-primary"][class*="rounded-xl"]:not(#aeovara-nav a):hover,
button[class*="border-primary"][class*="rounded-xl"]:not(#aeovara-nav button):hover {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AEOVARA AI-CARD — Scanner beam -animaatio + shimmer
   ═══════════════════════════════════════════════════════════════════ */
.aeovara-scanner {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}

.aeovara-scanner__beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 163px;
    top: -163px;
    background: linear-gradient(
        to bottom,
        transparent                     0%,
        rgba(255, 34, 133, 0.00)        8%,
        rgba(255, 34, 133, 0.03)       30%,
        rgba(255, 34, 133, 0.08)       55%,
        rgba(255, 34, 133, 0.16)       78%,
        rgba(255, 34, 133, 0.40)       91%,
        rgba(255, 34, 133, 0.85)       97%,
        rgba(255, 34, 133, 1.00)      100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%, white 5%, white 95%, transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%, white 5%, white 95%, transparent 100%
    );
    filter: drop-shadow(0 2px 8px rgba(255, 34, 133, 0.7))
            drop-shadow(0 4px 20px rgba(255, 34, 133, 0.3));
    animation: scanner-slide 3.4s ease-in-out infinite;
    will-change: transform;
    transform: translateY(0);
}

@keyframes scanner-slide {
    0%   { transform: translateY(0);      opacity: 0; }
    3%   { transform: translateY(0);      opacity: 1; }
    93%  { transform: translateY(616px);  opacity: 1; }
    98%  { transform: translateY(616px);  opacity: 0; }
    100% { transform: translateY(616px);  opacity: 0; }
}

.aeovara-ai-card {
    box-shadow: 0 0 50px rgba(255, 34, 133, 0.10), 0 20px 60px rgba(0,0,0,0.4);
}

.aeovara-shimmer {
    animation: shimmer-slide 2.2s ease-in-out infinite;
    width: 40%;
}
@keyframes shimmer-slide {
    0%   { width: 20%; opacity: 0.5; }
    50%  { width: 85%; opacity: 1;   }
    100% { width: 20%; opacity: 0.5; }
}

/* ============================================================
   AEV-nappisysteemi + FAQ + Expert-FAQ
   ============================================================ */
:root { --aev-btn-grad-from: #ff2285; --aev-btn-grad-to: #7f1f9f; --aev-btn-text: #ffffff; }
.aev-btn, .aev-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-family: var(--font-main);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  line-height: 1;
  position: relative;
  isolation: isolate;
  z-index: 0;
  color: #ffffff !important;
}
.aev-btn::before, .aev-btn::after {
  z-index: 0;
  pointer-events: none;
}
.aev-btn > * {
  position: relative;
  z-index: 1;
}
.aev-btn--primary { background: linear-gradient(135deg, var(--aev-btn-grad-from), var(--aev-btn-grad-to)); color: var(--aev-btn-text) !important; box-shadow: 0 4px 15px rgba(255, 34, 133, 0.3); border: none; }
.aev-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 34, 133, 0.5); filter: brightness(1.1); }
.aev-btn--ghost { background: rgba(255, 255, 255, 0.05); border: 1.5px solid var(--aev-btn-grad-from); color: var(--aev-btn-text) !important; }
.aev-btn--ghost:hover { background: rgba(255, 34, 133, 0.1); border-color: var(--aev-btn-grad-to); transform: translateY(-2px); }
.aev-section--cta { padding-bottom: 4rem; }
.aev-section--faq { padding-top: 4rem; }
.aev-faq details summary, .aev-faq details summary h3, .aev-faq details summary .question, .aev-faq details summary .faq-question { color: var(--color-primary, #ff2285) !important; }

:root { --aev-faq-q: #ffb3e6; }
.aev-faq--expert details { background: rgba(255, 255, 255, 0.03); transition: background 0.2s ease; }
.aev-faq--expert details[open] { background: rgba(255, 255, 255, 0.05); }
.aev-faq--expert details > summary,
.aev-faq--expert details > summary h3,
.aev-faq--expert details > summary .faq-question,
.aev-faq--expert details > summary .question {
  color: var(--aev-faq-q) !important;
}
.aev-faq--expert details > summary:hover { filter: brightness(1.08); }
.aev-faq--expert details > summary:focus-visible {
  outline: 2px solid rgba(255, 34, 133, 0.8);
  outline-offset: 3px;
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   WORDPRESS BLOCK STYLES — Blogisisältö
   ═══════════════════════════════════════════════════════════════════ */
.wp-block-embed {
  position: relative;
  margin: 1.5rem 0;
}
.wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 0.75rem;
}
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper video,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.wp-block-button {
  display: inline-flex;
}
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background-color: var(--color-primary, #ff2285);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25;
  border-radius: 9999px;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.2s;
  border: none;
}
.wp-block-button__link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--color-primary, #ff2285);
  color: var(--color-primary, #ff2285) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 34, 133, 0.1);
  color: var(--color-primary, #ff2285) !important;
}