/*
 Theme Name:   ITBS Child
 Theme URI:    https://itbs.ro
 Description:  Child theme for IT Business Solutions — bazat pe Hello Elementor
 Author:       CRST Agency
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  itbs-child
*/

/* ================================================
   CSS VARIABLES — identice cu site-ul original
   ================================================ */
:root {
  --primary:        #2563eb;
  --primary-light:  #3b82f6;
  --primary-dark:   #1d4ed8;
  --accent:         #06b6d4;
  --dark:           #0f172a;
  --dark-2:         #1e293b;
  --dark-3:         #334155;
  --white:          #ffffff;
  --gray:           #64748b;
  --gray-light:     #94a3b8;
  --light:          #f1f5f9;
  --light-2:        #e2e8f0;
  --gradient:       linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --gradient-text:  linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  --radius:         12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow:         0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:      0 12px 48px rgba(0,0,0,0.12);
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   GLOBAL
   ================================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

/* ================================================
   UTILITÄ‚ÈšI GRADIENT TEXT
   ================================================ */
.gradient-text,
.gradient-text span {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================
   BUTOANE ELEMENTOR — clase custom
   ================================================ */
.elementor-button.btn-gradient,
.elementor-button.btn-gradient:hover {
  background: var(--gradient) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.35) !important;
  transition: var(--transition) !important;
}
.elementor-button.btn-gradient:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,99,235,0.45) !important;
}

.elementor-button.btn-outline {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}
.elementor-button.btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

.elementor-button.btn-outline-dark {
  background: transparent !important;
  border: 2px solid var(--light-2) !important;
  color: var(--dark-3) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}
.elementor-button.btn-outline-dark:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ================================================
   CARDS — hover effects
   ================================================ */
.itbs-card {
  transition: var(--transition);
}
.itbs-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ================================================
   HEADER — fix pentru Hello Elementor
   ================================================ */
.site-header {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

/* Remove default Hello Elementor spacing */
.page-header,
.page-content > .elementor:first-child {
  margin-top: 0;
}

/* ================================================
   ELEMENTOR SECTIONS — remove default padding
   ================================================ */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
  .elementor-column {
    padding: 0 !important;
  }
  h1.elementor-heading-title {
    font-size: 32px !important;
  }
  h2.elementor-heading-title {
    font-size: 26px !important;
  }
}


/* === FIX FULLWIDTH ELEMENTE === */

/* Footer full-width */
.site-footer {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Header full-width */
.site-header {
    max-width: none !important;
    width: 100% !important;
}

/* Hero full-width */
.hero {
    max-width: none !important;
    width: 100% !important;
}

/* Toate sectiunile mari sa fie full-width */
.hooks-section,
.cta-section,
.value-section,
.partners-section,
.testimonial-section,
.contact-section,
.newsletter-section {
    max-width: none !important;
    width: 100% !important;
}

/* Elementor widget HTML - nu limita latimea */
.elementor-widget-html .site-footer,
.elementor-widget-html .site-header,
.elementor-widget-html .hero,
.elementor-widget-html section {
    max-width: none !important;
    width: 100% !important;
}

/* Codex parity fixes: match Vercel reference on mobile and hook section */
.hooks-motto {
  color: #fff !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  line-height: 1.5 !important;
}

.stat {
  display: block !important;
}

.stat-number,
.stat-suffix {
  display: inline !important;
  white-space: nowrap !important;
}

@media (max-width: 1024px) {
  .hooks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .hooks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* === Codex hero parity with Vercel reference - 2026-05-29 === */
body.home .elementor .elementor-element-r3ip2dm{position:relative!important;min-height:100vh!important;display:flex!important;align-items:center!important;padding-top:72px!important;overflow:hidden!important;background:#0f172a!important;width:100vw!important;left:50%!important;margin-left:-50vw!important}body.home .elementor .elementor-element-r3ip2dm:before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;background-image:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}body.home .elementor .elementor-element-r3ip2dm:after,body.home .elementor .elementor-element-r3ip2dm>.elementor-background-overlay{content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(135deg,rgba(15,23,42,.92) 0%,rgba(30,41,59,.8) 50%,rgba(15,23,42,.7) 100%)!important;pointer-events:none!important}body.home .elementor .elementor-element-r3ip2dm>.elementor-container{position:relative!important;z-index:2!important;display:block!important;width:100%!important;max-width:720px!important;margin:0 auto!important;padding:80px 0!important}body.home .elementor .elementor-element-r3ip2dm .elementor-column,body.home .elementor .elementor-element-r3ip2dm .elementor-widget-wrap{display:block!important;width:100%!important;max-width:720px!important;padding:0!important}body.home .elementor .elementor-element-r3ip2dm .elementor-widget-spacer{display:none!important}body.home .elementor .elementor-element-r3ip2dm .hero-heading{margin:0 0 24px!important}body.home .elementor .elementor-element-r3ip2dm .hero-heading .elementor-heading-title{font-size:clamp(2.5rem,5vw,4rem)!important;font-weight:900!important;color:#fff!important;line-height:1.1!important;letter-spacing:-.02em!important;margin:0!important;max-width:720px!important}body.home .elementor .elementor-element-r3ip2dm .gradient-text{background:linear-gradient(135deg,#3b82f6 0%,#06b6d4 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}body.home .elementor .elementor-element-r3ip2dm .hero-desc,body.home .elementor .elementor-element-r3ip2dm .hero-desc .elementor-widget-container p{max-width:560px!important;margin:0 0 40px!important;color:#94a3b8!important;font-size:1.2rem!important;line-height:1.7!important}body.home .elementor .elementor-element-r3ip2dm .itbs-btn-primary,body.home .elementor .elementor-element-r3ip2dm .itbs-btn-outline{display:inline-block!important;width:auto!important;margin:0 16px 64px 0!important;vertical-align:top!important}body.home .elementor .elementor-element-r3ip2dm .itbs-btn-primary .elementor-button,body.home .elementor .elementor-element-r3ip2dm .itbs-btn-outline .elementor-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:14px 28px!important;border-radius:50px!important;font-weight:600!important;font-size:.95rem!important;line-height:1.6!important;white-space:nowrap!important;text-transform:none!important;letter-spacing:0!important}body.home .elementor .elementor-element-r3ip2dm .itbs-btn-primary .elementor-button{background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%)!important;color:#fff!important;border:none!important;box-shadow:0 4px 16px rgba(37,99,235,.3)!important}body.home .elementor .elementor-element-r3ip2dm .itbs-btn-outline .elementor-button{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.4)!important}body.home .elementor .elementor-element-r3ip2dm .elementor-element-fnq5cim .elementor-button-text{font-size:0!important}body.home .elementor .elementor-element-r3ip2dm .elementor-element-fnq5cim .elementor-button-text:before{content:"Solicită o consultanță"!important;font-size:.95rem!important}body.home .elementor .elementor-element-r3ip2dm .hero-stats{display:flex!important;gap:48px!important;flex-wrap:nowrap!important;padding-top:40px!important;border-top:1px solid rgba(255,255,255,.1)!important;margin:0!important}body.home .elementor .elementor-element-r3ip2dm .hero-stats .stat{display:block!important;flex:0 0 auto!important}body.home .elementor .elementor-element-r3ip2dm .hero-stats .stat-number{display:block!important;font-size:2rem!important;font-weight:800!important;color:#fff!important;font-family:'JetBrains Mono',monospace!important;line-height:1!important}body.home .elementor .elementor-element-r3ip2dm .hero-stats .stat-label{display:block!important;width:auto!important;color:#94a3b8!important;font-size:.85rem!important;font-weight:500!important;margin-top:4px!important}@media(max-width:767px){body.home .elementor .elementor-element-r3ip2dm{min-height:auto!important;padding:112px 24px 72px!important;left:auto!important;margin-left:0!important}body.home .elementor .elementor-element-r3ip2dm>.elementor-container{max-width:100%!important;padding:0!important}body.home .elementor .elementor-element-r3ip2dm .itbs-btn-primary,body.home .elementor .elementor-element-r3ip2dm .itbs-btn-outline{display:block!important;margin:0 0 14px!important}body.home .elementor .elementor-element-r3ip2dm .hero-stats{gap:24px!important;flex-wrap:wrap!important;margin-top:40px!important}}
/* === End Codex hero parity === */

/* === Codex header parity with Vercel reference - 2026-05-29 === */
body.home .site-header{height:72px!important;padding:0!important;width:100vw!important;max-width:none!important}body.home .site-header .header-inner{max-width:1200px!important;width:100%!important;margin:0 auto!important;padding:0 24px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:nowrap!important}body.home .site-header .main-nav{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;align-items:center!important}body.home .site-header .logo,body.home .site-header .btn-call{flex-shrink:0!important}body.home .site-header .btn-call{margin:0!important;white-space:nowrap!important}
/* === End Codex header parity === */

/* ================================================
   MOBILE RESPONSIVE - Fix complet 2026-05-30
   ================================================ */

/* --- HEADER MOBIL --- */
@media (max-width: 768px) {
  .site-header { height: auto !important; }
  .container.header-inner {
    padding: 12px 20px !important;
    position: relative;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
  }
  .burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: 0.3s ease;
  }
  .burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.is-active span:nth-child(2) { opacity: 0; }
  .burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav {
    display: none !important;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 8px 20px 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 9999;
    gap: 0 !important;
  }
  .main-nav.nav-open { display: flex !important; }
  .main-nav .nav-link {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--light-2);
    font-size: 1rem !important;
    display: block;
    width: 100%;
  }
  .main-nav .nav-link:last-child { border-bottom: none; }
  .btn-call-text { display: none !important; }
  .btn-call { padding: 10px 12px !important; border-radius: 50px !important; flex-shrink: 0; }
}

/* --- HOOKS SECTION MOBIL --- */
@media (max-width: 768px) {
  .hooks-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .hooks-banner { padding: 40px 20px !important; }
  .hooks-motto { font-size: 1.3rem !important; text-align: center; }
}
@media (max-width: 480px) {
  .hooks-grid { grid-template-columns: 1fr !important; }
}

/* --- FEATURES GRID MOBIL --- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* --- SERVICES + BLOG CARDS MOBIL --- */
@media (max-width: 1024px) {
  .access-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  .access-cards { grid-template-columns: 1fr !important; }
}

/* --- VALUE SECTION MOBIL --- */
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .value-image { max-height: 320px; overflow: hidden; border-radius: var(--radius-lg); }
}

/* --- CTA SECTION MOBIL --- */
@media (max-width: 768px) {
  .cta-box { padding: 48px 24px !important; text-align: center !important; }
  .cta-actions { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .cta-actions .btn { width: 100% !important; max-width: 320px !important; text-align: center !important; }
}

/* --- FOOTER MOBIL --- */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { text-align: center !important; flex-direction: column !important; gap: 8px !important; }
}

/* --- GENERAL SECTIUNI MOBIL --- */
@media (max-width: 768px) {
  .section { padding-left: 20px !important; padding-right: 20px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; max-width: 100% !important; }
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  .section-header { margin-bottom: 32px !important; }
  .feature-card, .access-card, .hook-card { padding: 24px 20px !important; }
}

/* === End Mobile Responsive Fix 2026-05-30 === */

/* ================================================
   MOBILE RESPONSIVE - Fix complet 2026-05-30
   ================================================ */

/* --- HEADER MOBIL --- */
@media (max-width: 768px) {
  .site-header { height: auto !important; }
  .container.header-inner {
    padding: 12px 20px !important;
    position: relative;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
  }
  .burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: 0.3s ease;
  }
  .burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.is-active span:nth-child(2) { opacity: 0; }
  .burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav {
    display: none !important;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 8px 20px 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 9999;
    gap: 0 !important;
  }
  .main-nav.nav-open { display: flex !important; }
  .main-nav .nav-link {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--light-2);
    font-size: 1rem !important;
    display: block;
    width: 100%;
  }
  .main-nav .nav-link:last-child { border-bottom: none; }
  .btn-call-text { display: none !important; }
  .btn-call { padding: 10px 12px !important; border-radius: 50px !important; flex-shrink: 0; }
}

/* --- HOOKS SECTION MOBIL --- */
@media (max-width: 768px) {
  .hooks-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .hooks-banner { padding: 40px 20px !important; }
  .hooks-motto { font-size: 1.3rem !important; text-align: center; }
}
@media (max-width: 480px) {
  .hooks-grid { grid-template-columns: 1fr !important; }
}

/* --- FEATURES GRID MOBIL --- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* --- SERVICES + BLOG CARDS MOBIL --- */
@media (max-width: 1024px) {
  .access-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  .access-cards { grid-template-columns: 1fr !important; }
}

/* --- VALUE SECTION MOBIL --- */
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .value-image { max-height: 320px; overflow: hidden; border-radius: var(--radius-lg); }
}

/* --- CTA SECTION MOBIL --- */
@media (max-width: 768px) {
  .cta-box { padding: 48px 24px !important; text-align: center !important; }
  .cta-actions { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .cta-actions .btn { width: 100% !important; max-width: 320px !important; text-align: center !important; }
}

/* --- FOOTER MOBIL --- */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { text-align: center !important; flex-direction: column !important; gap: 8px !important; }
}

/* --- GENERAL SECTIUNI MOBIL --- */
@media (max-width: 768px) {
  .section { padding-left: 20px !important; padding-right: 20px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; max-width: 100% !important; }
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  .section-header { margin-bottom: 32px !important; }
  .feature-card, .access-card, .hook-card { padding: 24px 20px !important; }
}

/* === End Mobile Responsive Fix 2026-05-30 === */

/* ================================================
   MOBILE FIX v2 - bare albe + grids corecte
   ================================================ */

/* --- FIX BARE ALBE: opreste overflow orizontal --- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* --- FIX HEADER pe mobil --- */
@media (max-width: 768px) {
  .site-header,
  body.home .site-header {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
}

/* --- FIX VALUE GRID: imagine + text stivuite vertical --- */
@media (max-width: 900px) {
  .value-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .value-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  .value-image {
    width: 100% !important;
    max-height: 280px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .value-content {
    width: 100% !important;
  }
}

/* --- FIX HOOKS GRID: 2 col la mobil --- */
@media (max-width: 768px) {
  .hooks-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hook-card {
    padding: 20px 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }
}
@media (max-width: 480px) {
  .hooks-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- FIX FEATURES GRID: 1 col pe mobil --- */
@media (max-width: 768px) {
  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .feature-card {
    padding: 20px 16px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- FIX CTA BOX padding prea mare --- */
@media (max-width: 768px) {
  .cta-box {
    padding: 40px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- FIX ACCESS CARDS: 1 coloana pe mobil --- */
@media (max-width: 768px) {
  .access-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .access-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* --- FIX CONTAINER si SECTION overflow --- */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .section,
  .hooks-section,
  .why-us,
  .value-section,
  .cta-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* === End Mobile Fix v2 === */



/* === Hook Cards Styling - match reference design === */
.elementor-widget-wrap:has(.hook-num) {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
}
/* Override Elementor's generated font size for hook numbers */
body.home .hook-num .elementor-heading-title,
body.home .elementor-element.hook-num .elementor-heading-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 14px 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
body.home .hook-title .elementor-heading-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
}
body.home .hook-desc .elementor-widget-container p {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* === End Hook Cards Styling === */