/*
Theme Name: Hello Elementor Child (Eco-Power Modern)
Theme URI: https://smart-eco.pl/
Description: Modern, responsive, eco-art design child theme for Stowarzyszenie Mlodych Artystow Eco-Power.
Author: Eco-Power Team
Template: hello-elementor
Version: 1.0.2
*/

:root {
  --eco-primary: #047857;
  --eco-primary-hover: #059669;
  --eco-dark: #083325;
  --eco-accent: #10b981;
  --eco-light: #ecfdf5;
  --eco-bg: #fbfbfa;
  --eco-text: #1e293b;
  --eco-muted: #64748b;
  --eco-border: #e2e8f0;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--eco-text);
  background-color: var(--eco-bg);
  -webkit-font-smoothing: antialiased;
}

/* FIX: Guaranteed White Text on Primary Buttons */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary *,
.btn-primary:hover,
.btn-primary:hover *,
.btn-primary.is-hovered,
.btn-primary.is-hovered *,
.btn-primary:focus,
.btn-primary:focus * {
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn-primary {
  background-color: #047857 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.btn-primary.is-hovered {
  background-color: #059669 !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 28px -4px rgba(4, 120, 87, 0.5) !important;
}

/* GUARANTEED WHITE TEXT ON .btn-all-projects AND HOVER */
.btn-all-projects,
.btn-all-projects:link,
.btn-all-projects:visited,
.btn-all-projects:hover,
.btn-all-projects.is-hovered,
.btn-all-projects:focus,
.btn-all-projects:active {
  background-color: #047857 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn-all-projects:hover,
.btn-all-projects.is-hovered {
  background-color: #065f46 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -3px rgba(4, 120, 87, 0.4) !important;
}

.btn-all-projects *,
.btn-all-projects:hover *,
.btn-all-projects.is-hovered * {
  color: #ffffff !important;
}

/* SEARCH INPUT PADDING FIX */
#project-search-input {
  padding-left: 54px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

/* Modern Card Hover Effects */
.eco-card,
.card-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--eco-border);
  background: #ffffff;
}

.eco-card:hover,
.card-hover:hover,
.card-hover.is-hovered {
  transform: translateY(-8px) !important;
  box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.05) !important;
  border-color: #94a3b8 !important;
}

/* Secondary Button Hover */
.btn-secondary {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-secondary:hover,
.btn-secondary.is-hovered {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
}

/* Eco-Dark & Text-Eco-Dark Utilities */
.bg-eco-dark,
#site-footer,
footer#site-footer {
  background-color: #063e2c !important;
  color: #ffffff !important;
}

.text-eco-dark {
  color: #063e2c !important;
}

/* Filter Pills Hover & Active (All / Wszystkie) */
.filter-pill {
  transition: all 0.25s ease !important;
}

.filter-pill.bg-eco-dark,
.filter-pill.filter-pill-active {
  background-color: #047857 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3) !important;
}

.filter-pill.bg-eco-dark:hover,
.filter-pill.filter-pill-active:hover {
  background-color: #065f46 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
  transform: translateY(-2px);
}

.filter-pill:not(.bg-eco-dark):not(.filter-pill-active) {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

.filter-pill:not(.bg-eco-dark):not(.filter-pill-active):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #047857 !important;
  transform: translateY(-2px);
}

/* Footer Typography & Contrast */
#site-footer p,
#site-footer li,
#site-footer span {
  color: rgba(255, 255, 255, 0.85) !important;
}

#site-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.2s ease;
}

#site-footer a:hover {
  color: #34d399 !important;
}

#site-footer h4,
#site-footer .font-bold.text-emerald-400 {
  color: #34d399 !important;
}

/* Pillar Card Hover */
.pillar-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pillar-card:hover,
.pillar-card.is-hovered {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.08) !important;
  border-color: #34d399 !important;
}

/* Modern Eco-Leaf Banner Animation & Background */
.modern-eco-banner {
  background: radial-gradient(circle at 20% 50%, rgba(52, 211, 153, 0.25), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.3), transparent 60%),
              linear-gradient(135deg, #052e16 0%, #064e3b 45%, #047857 85%, #059669 100%);
  position: relative;
  overflow: hidden;
}

.leaf-pattern-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: radial-gradient(#a7f3d0 1px, transparent 1px), radial-gradient(#34d399 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  pointer-events: none;
}

.sunbeam-flare {
  position: absolute;
  top: -50%;
  left: 20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(52, 211, 153, 0.08) 40%, transparent 70%);
  transform: rotate(-15deg);
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================
   SUPPRESS GOOGLE TRANSLATE BANNER, WIDGETS & BROKEN EMBEDS
   ========================================== */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe[id*="container"],
iframe[id*=":1.container"],
.VIpgJd-yAWdab-r9fb2b-sample-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
#google_translate_element,
#glt-translate-trigger,
.glt-translate-trigger,
#flags,
.tool-container,
.ose-embedpress-responsive iframe[src*="facebook.com"],
iframe[src*="facebook.com/plugins"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0px !important;
  width: 0px !important;
}

html, body {
  top: 0px !important;
  position: static !important;
  margin-top: 0px !important;
  padding-top: 0px !important;
}

.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================
   OFFICIAL FACEBOOK CONTACT CARD & BUTTON
   ========================================== */
.fb-contact-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 16px !important;
  max-width: 520px !important;
  margin: 28px 0 !important;
  box-sizing: border-box !important;
}

.fb-contact-card br {
  display: none !important;
}

.fb-contact-card .fb-icon {
  width: 44px !important;
  height: 44px !important;
  background-color: #1877f2 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.fb-contact-card .fb-info {
  flex: 1 !important;
}

.fb-contact-card .fb-title {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 0 2px 0 !important;
}

.fb-contact-card .fb-subtitle {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.fb-contact-card .fb-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  background-color: #1877f2 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  box-shadow: 0 3px 8px rgba(24, 119, 242, 0.25) !important;
  transition: all 0.2s ease !important;
}

.fb-contact-card .fb-btn:hover {
  background-color: #166fe5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(24, 119, 242, 0.35) !important;
}

/* ========================================================
   MODERN RESPONSIVE VIDEO CARDS & EMBEDS (SITE-WIDE)
   Unified polished styling matching /justsolarguitar-kpo/
   ======================================================== */

/* Gutenberg Embed Containers: Neutralize wrappers so there are no nested borders */
.wp-block-embed {
  margin: 2rem 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.wp-block-embed__wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Primary Video Card Container: 16:9 aspect ratio, rounded corners, subtle shadow and border */
.responsive-video-card,
.ose-youtube,
.ose-embedpress-responsive:not(.embedpress-pdf-wrapper):not([data-embed-type="PDF"]),
.wp-block-embed__wrapper:not(:has(.ose-youtube)),
.elementor-widget-video .elementor-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #000000 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

/* Elegant lift and shadow on hover */
.responsive-video-card:hover,
.ose-youtube:hover,
.ose-embedpress-responsive:not(.embedpress-pdf-wrapper):not([data-embed-type="PDF"]):hover,
.wp-block-embed__wrapper:not(:has(.ose-youtube)):hover,
.elementor-widget-video .elementor-wrapper:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 28px -4px rgba(0, 0, 0, 0.14), 0 8px 12px -6px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

/* Absolute fill for the inner iframe or video element - NO top margin, NO gaps */
.responsive-video-card iframe,
.ose-youtube iframe,
.ose-embedpress-responsive iframe:not(.embedpress-embed-document-pdf),
.wp-block-embed iframe,
.elementor-widget-video iframe,
.elementor-widget-video .elementor-video,
.aspect-video iframe,
[class*="aspect-video"] iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transform: none !important;
  display: block !important;
}

/* Ensure aspect-video containers are positioned relatively for absolute iframes */
.aspect-video,
[class*="aspect-video"] {
  position: relative !important;
  overflow: hidden !important;
}

/* Reset inner iframes when inside any container */
.responsive-video-card iframe,
.ose-youtube iframe,
.ose-embedpress-responsive iframe,
.wp-block-embed iframe,
.elementor-widget-video iframe,
.aspect-video iframe {
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* Elementor Video Playlist Widget Styling */
.elementor-widget-video-playlist {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 18px -3px rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
}

.elementor-widget-video-playlist .e-tabs-main-area {
  background-color: #000000 !important;
}

.elementor-widget-video-playlist .e-tab-thumbnail {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ==========================================
   ECO VIDEO SHOWCASE CARDS (Multi-video Grid)
   ========================================== */
.eco-video-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background-color: #ffffff !important;
}

.eco-video-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.12), 0 8px 14px -6px rgba(0, 0, 0, 0.06) !important;
}

.eco-video-card .video-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background-color: #020617 !important;
  overflow: hidden !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eco-video-card .video-thumb-wrap iframe {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  box-shadow: none !important;
}

/* ==========================================
   HEADER NAVIGATION (STRICT 1-LINE ITEMS)
   ========================================== */
.glass-nav,
.glass-nav a,
.glass-nav span,
.glass-nav .relative.group {
  white-space: nowrap !important;
}