/*
Theme Name: DoGood Child
Theme URI: https://dogood.qodeinteractive.com
Description: A child theme of DoGood
Author: Select Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: dogood
Template: dogood
*/

/* Prevent horizontal overflow on all screen sizes */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ==========================================================================
   Desktop logo - bigger
   ========================================================================== */
/* Desktop header - make taller for bigger logo */
/* Header — consistent on all pages, not transparent/absolute */
#qodef-page-header {
  height: 130px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  background-color: #fff !important;
}

/* Disable transparent header behavior */
.qodef-header--transparent #qodef-page-header {
  position: relative !important;
}
#qodef-page-outer {
  margin-top: 0 !important;
}

#qodef-page-header-inner,
.qodef-header--standard #qodef-page-header-inner {
  height: 100px !important;
  border: none !important;
  border-bottom: none !important;
  align-items: center !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#qodef-page-header .qodef-header-navigation {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#qodef-top-area {
  display: none !important;
}

body #qodef-top-area {
  display: none !important;
}

/* ==========================================================================
   Custom Top Header Bar
   ========================================================================== */
#filia-top-bar {
  position: relative;
  width: 100%;
  z-index: 1;
  background: #333 !important;
  pointer-events: auto;
}

#filia-top-bar .filia-top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 60px;
  box-sizing: border-box;
}

#filia-top-bar .filia-top-bar-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

#filia-top-bar .filia-top-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  line-height: 27px;
  transition: opacity 0.3s;
}

#filia-top-bar .filia-top-contact:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #fff;
}

#filia-top-bar .filia-top-contact i {
  font-size: 13px;
}

#filia-top-bar .filia-top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#filia-top-bar .filia-top-bar-right a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  line-height: 1;
}

#filia-top-bar .filia-top-bar-right a:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #fff;
}

/* Hide custom top bar on mobile/tablet */
@media only screen and (max-width: 1280px) {
  #filia-top-bar {
    display: none !important;
  }
}

/* Force mobile header on tablet (1025px - 1280px) */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #qodef-page-header {
    display: none !important;
  }
  #qodef-page-mobile-header {
    display: block !important;
  }
}

#qodef-page-header .qodef-header-logo-link {
  height: 100px !important;
  padding: 0 !important;
  box-sizing: content-box !important;
}

#qodef-page-header .qodef-header-logo {
  margin-top: 0 !important;
}

#qodef-page-header .qodef-header-logo-link img {
  max-height: 70px !important;
  height: 70px !important;
  max-width: none !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ==========================================================================
   Desktop — consistent section widths
   ========================================================================== */

/* Ensure all Elementor containers use the same max-width on desktop */
.e-con-boxed > .e-con-inner {
  max-width: 1250px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.elementor-template-canvas .qodef-header-navigation > ul > li > a {
  color: #fff !important;
}
.elementor-template-canvas .qodef-header-navigation > ul > li > a:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* Text marquee banner — force full width */
.elementor-element[data-id="ad92246"] {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Homepage — three columns equal height
   ========================================================================== */
.elementor-element[data-id="03e50ce"] > .e-con-inner {
  align-items: stretch !important;
}

/* ==========================================================================
   Footer bottom bar — centered, Montserrat
   ========================================================================== */
.elementor-element[data-id="1cff069"] > .e-con-inner {
  justify-content: center !important;
  align-items: center !important;
}

#info-block,
#footer-copy {
  text-align: center !important;
  font-family: "Montserrat", sans-serif !important;
}

/* Footer social icons — grid 4 coloane */
.elementor-element[data-id="0357d8c"] .elementor-social-icons-wrapper.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(4, auto) !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Safe Exit — smooth hide on footer */


.elementor-element[data-id="a8c0ff6"] .qodef-e-main-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.emergency-button {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Elementor widgets — prevent overflow */
.elementor-widget {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Images — prevent overflow */
.elementor-widget-image img,
.elementor-image img {
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   Mobile responsive fixes - reduce side spacing on small screens
   ========================================================================== */

/* Make the theme content grid fluid on tablet and mobile */
@media only screen and (max-width: 1280px) {
  .qodef-content-grid {
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  /* Fix mobile header overflow on tablet too */
  #qodef-page-mobile-header-inner.qodef-content-grid {
    padding: 0 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Elementor boxed containers */
  .e-con-boxed > .e-con-inner {
    max-width: 100% !important;
  }

  /* Ensure page wrapper doesn't overflow */
  #qodef-page-wrapper,
  #qodef-page-outer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Make mobile header taller for bigger logo */
  #qodef-page-mobile-header {
    height: 80px !important;
  }
  #qodef-page-mobile-header .qodef-mobile-header-logo-link {
    height: 80px !important;
  }

  /* Mobile header logo bigger on all tablets */
  #qodef-page-mobile-header .qodef-mobile-header-logo-link img,
  #qodef-page-mobile-header
    .qodef-mobile-header-logo-link
    img:not(.qodef--main) {
    max-height: none !important;
    height: 65px !important;
    width: auto !important;
  }
  #qodef-page-mobile-header .qodef-mobile-header-logo-link {
    height: 65px !important;
  }
}

/* Mobile fixes */
@media only screen and (max-width: 767px) {
  /* Keep the fullscreen navigation comfortable on smaller screens */
  .qodef-fullscreen-menu > ul > li > a {
    font-size: clamp(42px, 12.8vw, 48px);
    line-height: 1.15;
  }

  .qodef-fullscreen-menu .qodef-drop-down-second-inner ul li > a {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Fix mobile header overflow */
  #qodef-page-mobile-header-inner.qodef-content-grid {
    padding: 0 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Images — prevent overflow */
  .elementor-widget-image img,
  .elementor-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media only screen and (max-width: 480px) {
  /* Slightly smaller logo on small phones */
  #qodef-page-mobile-header .qodef-mobile-header-logo-link img,
  #qodef-page-mobile-header
    .qodef-mobile-header-logo-link
    img:not(.qodef--main) {
    height: 55px !important;
  }
  #qodef-page-mobile-header .qodef-mobile-header-logo-link {
    height: 55px !important;
  }
}

/* ==========================================================================
   Hero slider — force full-width on mobile (break out of theme containers)
   ========================================================================== */
.filia-hero-slider {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   WPForms confirmation message styling
   ========================================================================== */
.wpforms-confirmation-container-full,
div.wpforms-container-full .wpforms-confirmation-container-full {
  background: #ffffff !important;
  border: 2px solid #ed1c24 !important;
  border-radius: 12px !important;
  padding: 30px 35px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  margin: 20px 0 !important;
  position: relative;
}

.wpforms-confirmation-container-full p,
div.wpforms-container-full .wpforms-confirmation-container-full p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #333333 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.wpforms-confirmation-container-full::before {
  content: "✓";
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #ed1c24;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 16px;
}

/* ==========================================================================
   Companii page — Accordion toggle (tematici workshopuri)
   ========================================================================== */
/* Hide the accordion container by default */
.elementor-element[data-id="a6b7dda"] {
  display: none;
  overflow: hidden;
}
.elementor-element[data-id="a6b7dda"].filia-accordion-open {
  display: block;
  animation: filiaSlideDown 0.4s ease;
}

@keyframes filiaSlideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    max-height: 3000px;
    transform: translateY(0);
  }
}

/* Toggle button style — matches Elementor "Descoperă mai multe aici" button */
.filia-toggle-accordion-btn {
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  align-items: center;
  align-self: flex-start !important;
  gap: 8px;
  background-color: #ED1C24 !important;
  color: #FFFFFF !important;
  font-family: "Montserrat", Sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  border-radius: 24px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px !important;
  line-height: 1 !important;
}
.filia-toggle-accordion-btn:hover {
  background-color: #333 !important;
  color: #FFFFFF !important;
}
.filia-toggle-accordion-btn .filia-btn-arrow {
  transition: transform 0.3s;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
}
.filia-toggle-accordion-btn.filia-open .filia-btn-arrow {
  transform: rotate(180deg);
}

/* ==========================================================================
   Companii page — Company logos section (replaces colleague photo)
   ========================================================================== */
/* Remove the background image from the photo container */
.elementor-element[data-id="cab4a9f"] {
  background-image: none !important;
}

.filia-logos-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  box-sizing: border-box;
}

.filia-logos-section h3 {
  font-family: "Montserrat", Sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 30px 0;
}

.filia-logos-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.filia-logos-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  animation: filiaLogoFloat 3s ease-in-out infinite;
}

.filia-logos-grid a:nth-child(1) { animation-delay: 0s; }
.filia-logos-grid a:nth-child(2) { animation-delay: 1s; }
.filia-logos-grid a:nth-child(3) { animation-delay: 2s; }

@keyframes filiaLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.filia-logos-grid img {
  max-height: 60px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media only screen and (max-width: 767px) {
  .filia-logos-section {
    padding: 30px 20px;
  }
  .filia-logos-grid {
    gap: 20px;
  }
  .filia-logos-grid img {
    max-height: 45px;
    max-width: 120px;
  }
}