/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: Child theme for liaudanskas.lt
Version: 1.0
*/

/* ============================================
   LIAUDANSKAS.LT — CUSTOM STYLES
   ============================================ */

/* ============================================
   PAGE BACKGROUND — match section bg color
   Body default white shows between/around
   Elementor sections which use #F6F8FB.
   ============================================ */

body,
.elementor-section-wrap {
  background-color: #F6F8FB !important;
}

/* Elementor container wrappers — transparent so body color shows through */
.e-con,
.e-con-inner {
  background-color: transparent !important;
}

/* ============================================
   MOBILE HEADER + MENU POLISH
   Keeps the Elementor header visually aligned
   with the desktop version on smaller screens.
   ============================================ */

@media (max-width: 900px) {
  .dlh {
    background: #f6f8fb !important;
  }

  .dlh-inner {
    padding: 0 16px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  .dlh-brand {
    order: 2 !important;
    margin-right: auto !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
  }

  .dlh-burger {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 7px 8px !important;
    margin-right: 2px !important;
    margin-left: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5eaf2 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border-radius: 8px !important;
  }

  .dlh-burger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #0b1220 !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    transform: none !important;
  }

  .dlh-burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    opacity: 1 !important;
  }
  .dlh-burger.open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .dlh-burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  .dlh-mobile {
    background: #f6f8fb !important;
    border-top: 1px solid #e5eaf2 !important;
    border-bottom: 1px solid #e5eaf2 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
    padding: 10px 0 16px !important;
  }

  .dlh-mobile a,
  .dlh-mobile-ventures-link {
    color: #64748b !important;
    background: transparent !important;
  }

  .dlh-mobile a:hover,
  .dlh-mobile a:focus,
  .dlh-mobile-ventures-link:hover,
  .dlh-mobile-ventures-link:focus {
    color: #1e40af !important;
    background: rgba(30, 64, 175, 0.05) !important;
  }

  .dlh-mobile a.active,
  .dlh-mobile-ventures-link.active,
  .dlh-mobile-sub a.active {
    color: #1e40af !important;
    background: rgba(30, 64, 175, 0.04) !important;
    font-weight: 700 !important;
  }

  /* Strip browser/iOS default button appearance from mobile nav chevrons */
  .dlh-mobile-ventures-chevron {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    box-shadow: none !important;
  }

  .dlh-mobile-sub {
    background: rgba(255, 255, 255, 0.72) !important;
    border-top: 1px solid #e5eaf2 !important;
    border-bottom: 1px solid #e5eaf2 !important;
  }

  .dlh-mobile-sub a {
    color: #64748b !important;
    padding-left: 40px !important;
  }

  .dlh-mobile-cta a {
    background: #1e40af !important;
    color: #ffffff !important;
  }
}

/* ============================================
   SAFE MOBILE GUARDRAILS
   Prevent overflow and awkward spacing in
   Elementor sections on smaller screens.
   ============================================ */

/* ============================================
   GLOBAL BUTTON TEXT — WHITE ON ALL CTA BUTTONS
   Elementor / Hello theme overrides <a> color
   sitewide. This restores white text on all
   custom CTA buttons across every page prefix.
   ============================================ */

/* Primary filled buttons — all have a colored background, always white text */
a[class*="-btn-primary"],
a[class*="-hero-btn"],
a[class*="-cta-btn-primary"],
a[class*="-panel-cta"],
a[class*="-feature-btn-primary"],
a[class*="-project-btn"],
a[class*="-process-btn"],
a[class*="-zentra-link"] {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Zentra Capital card — force white text on dark navy card */
.dhi-zentra-name,
.dip-zentra-name {
  color: #ffffff !important;
}
.dhi-zentra-desc,
.dip-zentra-desc {
  color: rgba(255, 255, 255, 0.6) !important;
}
.dhi-zentra-stat-num,
.dip-zentra-stat-num {
  color: #ffffff !important;
}
.dhi-zentra-stat-label,
.dip-zentra-stat-label {
  color: rgba(255, 255, 255, 0.55) !important;
}
.dhi-zentra-right-label,
.dip-zentra-right-label {
  color: rgba(255, 255, 255, 0.55) !important;
}
.dhi-strategy-name,
.dip-strategy-name {
  color: #ffffff !important;
}
.dhi-strategy-desc,
.dip-strategy-desc {
  color: rgba(255, 255, 255, 0.55) !important;
}
.dhi-zentra-right-note,
.dip-zentra-note {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================
   DARK SECTION TEXT — GLOBAL FIX
   All sections with background: #0B1220 need
   white headings, readable body text, and
   white button text. This overrides Elementor's
   global typography that defaults to dark colors.
   ============================================ */

/* Dark section headings → white */
.dpc-guest h1, .dpc-guest h2, .dpc-guest h3,
.dsw-cta h1, .dsw-cta h2, .dsw-cta h3,
.dsw-hero h1, .dsw-hero h2, .dsw-hero h3,
.dhi-zentra h1, .dhi-zentra h2, .dhi-zentra h3,
.dip-zentra h1, .dip-zentra h2, .dip-zentra h3,
.die-cta h1, .die-cta h2, .die-cta h3,
.die-hero h1, .die-hero h2, .die-hero h3,
.dim-cta h1, .dim-cta h2, .dim-cta h3,
.dim-hero h1, .dim-hero h2, .dim-hero h3,
.dit-cta h1, .dit-cta h2, .dit-cta h3,
.dit-hero h1, .dit-hero h2, .dit-hero h3,
.dra-cta h1, .dra-cta h2, .dra-cta h3,
.dra-hero h1, .dra-hero h2, .dra-hero h3,
.dst-cta h1, .dst-cta h2, .dst-cta h3,
.dst-hero h1, .dst-hero h2, .dst-hero h3,
.dpp-cta h1, .dpp-cta h2, .dpp-cta h3,
.dins-cta h1, .dins-cta h2, .dins-cta h3,
.dvp-panel h1, .dvp-panel h2, .dvp-panel h3,
.dsp-panel h1, .dsp-panel h2, .dsp-panel h3,
.dip-panel h1, .dip-panel h2, .dip-panel h3,
.dcb-strip h1, .dcb-strip h2, .dcb-strip h3,
.dhs h1, .dhs h2, .dhs h3 {
  color: #ffffff !important;
}

/* Dark section body text → readable white */
.dpc-guest p, .dpc-guest li,
.dsw-cta p,
.dsw-hero p,
.die-cta p, .die-hero p,
.dim-cta p, .dim-hero p,
.dit-cta p, .dit-hero p,
.dra-cta p, .dra-hero p,
.dst-cta p, .dst-hero p,
.dpp-cta p,
.dins-cta p,
.dcb-strip p {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Dark section all links/buttons → white */
.dpc-guest a,
.dsw-cta a,
.die-cta a,
.dim-cta a,
.dit-cta a,
.dra-cta a,
.dst-cta a,
.dpp-cta a,
.dins-cta a,
.dcb-strip a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ── Solid-colored-background primary buttons → white text ─────────────────
   These buttons all have a colored fill (blue/dark) and need white text.
   Listed explicitly to avoid catching light-bg "Watch / Explore" buttons.
   ─────────────────────────────────────────────────────────────────────── */
a.dcb-strip-btn,
a.dfc-btn-primary,
a.dh-btn-primary,
a.dhe-btn,
a.dhn-btn,
a.dhp-btn-primary,
a.dpc-guest-btn,
a.dpc-hero-btn-primary,
a.dpp-cta-btn,
a.dpp-hero-btn,
a.dsp-cta-btn-primary,
a.dvp-cta-btn,
a.dip-cta-btn-primary,
a.dip-opp-link,
a.dim-btn-primary,
a.dims-btn-primary,
a.dins-hero-btn,
a.dins-cta-btn,
a.dins-feature-btn-primary,
a.die-btn-primary,
a.dit-btn-primary,
a.dst-btn-primary,
a.dra-btn--primary,
a.dmi-cta-btn,
a.dmi-trades-link,
a.dlf-btn-primary {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Header nav links — prevent WP global link color from overriding */
a.dlh-drop-trigger,
a.dlh-drop-trigger:hover {
  text-decoration: none !important;
}

/* ── Light-background episode / watch buttons → keep dark text ───────────── */
a.dpc-episode-btn {
  color: #0B1220 !important;
  text-decoration: none !important;
}
a.dpc-media-link {
  color: #1E40AF !important;
  text-decoration: none !important;
}

/* Dark panel CTA text — light blue (#93C5FD) readable on navy dark panels */
[class*="-panel-cta-text"] {
  color: #93C5FD !important;
}
[class*="-panel-cta-arrow"] {
  color: #93C5FD !important;
}

/* Software page dark-hero link (white text on dark bg) */
.dsw-hero-link {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Ghost buttons — only on dark backgrounds, always white text */
a[class*="-btn-ghost"],
a[class*="-cta-btn-ghost"] {
  color: #ffffff !important;
  text-decoration: none !important;
}
/* Secondary buttons — stronger border so they're visible on light #F6F8FB backgrounds */
a[class*="-btn-secondary"],
a[class*="-hero-btn-secondary"] {
  border-color: #8FA8D8 !important; /* was ~#C7D2F5 — clearly visible as button */
  color: #1E40AF !important;
  text-decoration: none !important;
}

/* Kicker labels in dark CTA sections — white on dark bg */
[class*="-cta-kicker"] {
  color: rgba(255, 255, 255, 0.75) !important;
}
[class*="-cta-kicker"]::before {
  background: rgba(255, 255, 255, 0.75) !important;
}
/* Light-bg CTA sections — override kicker back to blue */
.dsp-cta-kicker,
.dl-cta-kicker {
  color: #1E40AF !important;
}
.dsp-cta-kicker::before,
.dl-cta-kicker::before {
  background: #1E40AF !important;
}

/* Light-bg CTA buttons — force white text (WP global link color overrides non-!important) */
a.dl-cta-button,
a.dlh-cta {
  color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  .elementor-section,
  .elementor-container,
  .elementor-widget-wrap {
    max-width: 100%;
  }

  img,
  iframe,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }

  .elementor-button,
  .wp-element-button {
    min-height: 44px;
  }
}

/* ============================================
   GLOBAL SCROLL ENTRANCE ANIMATIONS
   Elements with data-animate fade up on scroll.
   data-delay="N" (ms) staggers children.
   ============================================ */

@keyframes dsl-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animate] {
  opacity: 0;
}

[data-animate].dsl-visible {
  animation: dsl-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================
   CARD DEPTH — multi-layer shadows + hover lift
   ============================================ */

[class*="-card"]:not([class*="-card-label"]):not([class*="-card-row"]):not([class*="-card-icon"]):not([class*="-card-name"]):not([class*="-card-sub"]):not([class*="-card-dot"]):not([class*="-card-text"]):not([class*="-cta-card"]) {
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}

[class*="-build-card"],
[class*="-project-card"]:not([class*="--placeholder"]),
[class*="-feature-card"],
[class*="-benefit-card"],
[class*="-type-card"],
[class*="-cert-card"],
[class*="-topic-card"],
[class*="-partner-type"],
[class*="-process-card"] {
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.05),
    0 12px 32px rgba(15,23,42,0.04) !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}

[class*="-build-card"]:hover,
[class*="-project-card"]:not([class*="--placeholder"]):hover,
[class*="-feature-card"]:hover,
[class*="-benefit-card"]:hover,
[class*="-type-card"]:hover,
[class*="-cert-card"]:hover,
[class*="-topic-card"]:hover,
[class*="-partner-type"]:hover,
[class*="-process-card"]:hover {
  box-shadow:
    0 2px 4px rgba(15,23,42,0.06),
    0 8px 24px rgba(15,23,42,0.09),
    0 24px 56px rgba(15,23,42,0.08) !important;
  transform: translateY(-5px) !important;
}

/* Primary button hover glow */
a[class*="-btn-primary"]:hover,
a[class*="-hero-btn"]:hover,
a[class*="-cta-btn-primary"]:hover {
  box-shadow: 0 8px 28px rgba(30,64,175,0.38), 0 2px 8px rgba(30,64,175,0.22) !important;
}

/* ============================================
   DARK PANEL HOVER LIFT
   Services / Invest right-side dark panels
   ============================================ */

[class*="-panel"]:not([class*="-panel-"]),
.dsp-panel,
.dip-panel,
.dvp-panel {
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  cursor: default;
}

[class*="-panel"]:not([class*="-panel-"]):hover,
.dsp-panel:hover,
.dip-panel:hover,
.dvp-panel:hover {
  box-shadow:
    0 2px 4px rgba(15,23,42,0.18),
    0 12px 32px rgba(15,23,42,0.22),
    0 32px 64px rgba(15,23,42,0.18) !important;
  transform: translateY(-6px) !important;
}

/* ============================================
   SECTION SEPARATORS — DISSOLVE
   Remove hard borders between adjacent sections.
   Each section is already colour-separated;
   a 1px border just creates a harsh line.
   ============================================ */

.elementor-section,
.e-con {
  border-top: none !important;
  border-bottom: none !important;
}

/* ============================================
   DARK CTA SECTIONS — ROUNDED CORNERS
   Partners, Media and Market Insights pages:
   last dark CTA section gets fully rounded corners
   so it curves away from the page edges.
   ============================================ */

.dpp-cta,
.dpc-guest,
.dmi-cta {
  border-radius: 28px;
  overflow: hidden;
}

/* ============================================
   PARTNERS PAGE — SECTION FADE TRANSITIONS
   Fade between alternating white/grey sections
   so the boundary dissolves instead of cuts hard.
   ============================================ */

.dpp-section--light {
  position: relative;
}
.dpp-section--light::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, #fff 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.dpp-section--light::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to top, #fff 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}