/* ============================================================
   Solucom — Elementor overrides (header / footer / components)
   Built on tokens.css + site.css.
   ============================================================ */

/* Brand-green token aliases (logo green). solucom-elementor.css was authored
   against --color-emerald-*, but tokens.css defines --color-teal-*. Without
   these the header CTA background, nav hover & pointer underline collapse. */
:root {
  --color-emerald-300: #5FD3B5; /* light brand-green tint for hover on dark footer */
  --color-emerald-500: #25A684; /* = --color-teal-500, logo green */
  --color-emerald-600: #1F8F71; /* = --color-teal-600 */
}

/* ===================== HEADER ===================== */
#solucom-header { transition: box-shadow var(--dur-base) var(--ease-out); }
#solucom-header.elementor-sticky--effects { box-shadow: 0 6px 24px rgba(11,31,51,0.06); }
#solucom-header > .elementor-container { align-items: center !important; }

.solucom-header-logo img { height: 34px !important; width: auto !important; max-width: none !important; }

/* Nav items */
#solucom-header .elementor-nav-menu a.elementor-item {
  font-family: var(--font-display) !important;
  font-weight: 600 !important; font-size: 15px !important;
  color: var(--color-ink-900) !important;
  text-transform: none; letter-spacing: 0;
  padding: 10px 14px !important;
}
#solucom-header .elementor-nav-menu a.elementor-item:hover,
#solucom-header .elementor-nav-menu li.current-menu-item > a.elementor-item,
#solucom-header .elementor-nav-menu li.current-menu-ancestor > a.elementor-item { color: var(--color-emerald-600) !important; }

/* underline pointer color */
#solucom-header .e--pointer-underline .elementor-item:after { background-color: var(--color-emerald-500) !important; }

/* dropdown caret */
#solucom-header .elementor-nav-menu li.menu-item-has-children > a .sub-arrow { margin-left: 4px; }

/* Submenu (Servizi dropdown) */
#solucom-header .elementor-nav-menu--dropdown,
#solucom-header .elementor-nav-menu ul.sub-menu {
  background: #fff !important; border: 1px solid var(--border-2) !important;
  border-radius: 12px !important; box-shadow: var(--shadow-4) !important;
  padding: 10px !important; min-width: 290px !important; margin-top: 10px !important;
}
#solucom-header .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
  font-family: var(--font-body) !important; font-weight: 500 !important;
  font-size: 14px !important; color: var(--color-ink-800) !important;
  padding: 11px 14px !important; border-radius: 8px !important;
}
#solucom-header .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover { background: var(--bg-accent-soft) !important; color: var(--color-emerald-600) !important; }
/* Audit highlighted in dropdown */
#solucom-header .elementor-nav-menu ul.sub-menu li.nav-audit a.elementor-sub-item { color: var(--color-emerald-600) !important; font-weight: 600 !important; }

/* Header CTA button */
.solucom-header-cta .elementor-button {
  background: var(--color-emerald-500) !important; color: #fff !important;
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--radius-pill) !important; padding: 10px 20px !important;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast);
}
.solucom-header-cta .elementor-button:hover { background: var(--color-emerald-600) !important; transform: translateY(-1px); }

/* Mobile toggle color */
#solucom-header .elementor-menu-toggle { color: var(--color-ink-900) !important; }

@media (max-width: 1024px) {
  #solucom-header .elementor-nav-menu--dropdown { border-radius: 0 0 12px 12px !important; }
}

/* ===================== PRE-FOOTER CTA ===================== */
#solucom-precta > .elementor-container { align-items: center !important; }
#solucom-precta .precta-title .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(26px,3.2vw,38px) !important; line-height: 1.12 !important; letter-spacing: -0.02em; color: #fff !important; }
#solucom-precta .precta-sub p { color: rgba(255,255,255,0.9) !important; font-size: 16px; margin-top: 10px; }
#solucom-precta .elementor-widget-button { display: inline-block; margin: 6px 0 0 10px; }
#solucom-precta .precta-btn-1 .elementor-button { background: #fff !important; color: var(--color-ink-900) !important; font-family: var(--font-display) !important; font-weight: 600 !important; border-radius: var(--radius-pill) !important; padding: 14px 26px !important; }
#solucom-precta .precta-btn-1 .elementor-button:hover { background: var(--color-ink-900) !important; color: #fff !important; }
#solucom-precta .precta-btn-2 .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.55) !important; font-family: var(--font-display) !important; font-weight: 600 !important; border-radius: var(--radius-pill) !important; padding: 14px 26px !important; }
#solucom-precta .precta-btn-2 .elementor-button:hover { border-color: #fff !important; background: rgba(255,255,255,0.12) !important; }
@media (max-width:767px){ #solucom-precta .elementor-widget-button { display:block; margin-left:0; } }

/* ===================== FOOTER ===================== */
#solucom-footer .footer-logo img { height: 30px !important; width: auto !important; filter: brightness(0) invert(1); opacity: 0.95; }
#solucom-footer .footer-phrase p { color: rgba(255,255,255,0.66) !important; font-size: 14.5px; line-height: 1.6; margin-top: 18px; max-width: 340px; }
#solucom-footer .footer-col-heading .elementor-heading-title { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45) !important; margin-bottom: 18px; }
#solucom-footer .footer-links .elementor-icon-list-icon { display: none !important; }
#solucom-footer .footer-links .elementor-icon-list-item { margin-bottom: 4px; }
#solucom-footer .footer-links .elementor-icon-list-text { font-family: var(--font-body) !important; font-size: 14.5px !important; color: rgba(255,255,255,0.78) !important; transition: color var(--dur-base); }
#solucom-footer .footer-links a:hover .elementor-icon-list-text { color: var(--color-emerald-300) !important; }
#solucom-footer .footer-contact p { color: rgba(255,255,255,0.78) !important; font-size: 14.5px; line-height: 1.7; }
#solucom-footer .footer-contact a { color: rgba(255,255,255,0.78); }
#solucom-footer .footer-contact a:hover { color: var(--color-emerald-300); }
#solucom-footer .footer-social .elementor-social-icon { background: rgba(255,255,255,0.08) !important; color: #fff !important; width: 36px; height: 36px; transition: background var(--dur-base); margin-top: 18px; }
#solucom-footer .footer-social .elementor-social-icon:hover { background: var(--color-emerald-500) !important; }

/* ===================== FOOTER BOTTOM BAR ===================== */
#solucom-footbar > .elementor-container { align-items: center !important; }
#solucom-footbar .footbar-copy p { color: rgba(255,255,255,0.5) !important; font-size: 13px; margin: 0; }
#solucom-footbar .footbar-legal { text-align: right; }
#solucom-footbar .footbar-legal p { color: rgba(255,255,255,0.5) !important; font-size: 13px; margin: 0; }
#solucom-footbar .footbar-legal a { color: rgba(255,255,255,0.7); }
#solucom-footbar .footbar-legal a:hover { color: var(--color-emerald-300); }
@media (max-width:767px){ #solucom-footbar .footbar-legal { text-align: left; margin-top: 8px; } }

/* ===================== BLOG ARTICLE FIXES (single post) ===================== */
/* (1) Empty blog sidebar -> article body spans full content width */
body.sol-no-sidebar .sol-blog-aside { display: none !important; }
body.sol-no-sidebar .sol-blog-main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* (4) Header tablet/mobile (<=1024): logo left + hamburger right on ONE row,
   10px breathing room at both edges, CTA hidden, and the dropdown OVERLAYS the
   content (absolute) instead of growing the header height. */
@media (max-width: 1024px) {
  #solucom-header > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #solucom-header > .elementor-container > .elementor-column { width: auto !important; }
  #solucom-header .elementor-element-solhdrc1 { flex: 0 0 auto !important; }
  #solucom-header .elementor-element-solhdrc2 { flex: 1 1 auto !important; }
  #solucom-header .elementor-element-solhdrc2 .elementor-widget-wrap { justify-content: flex-end !important; }
  #solucom-header .elementor-element-solhdrc2 .elementor-menu-toggle { margin-left: auto !important; }
  #solucom-header .elementor-element-solhdrc3 { display: none !important; }
  #solucom-header .solucom-nav .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 1000 !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E6EAEF !important;
    box-shadow: 0 12px 24px rgba(13,27,42,0.10) !important;
  }
}

/* (2)+(3) Phones (<=767): smaller heading scale + reclaim horizontal space.
   Trim the wider-gap column padding to 30px 10px so the body uses more width. */
@media (max-width: 767px) {
  .single-post .sol-post-title .elementor-heading-title { font-size: 26px !important; line-height: 1.22 !important; }
  .single-post .sol-post-content h2 { font-size: 22px !important; line-height: 1.25 !important; }
  .single-post .sol-post-content h3 { font-size: 19px !important; line-height: 1.3 !important; }
  .single-post .sol-post-content p,
  .single-post .sol-post-content li { font-size: 16px !important; line-height: 1.6 !important; }
  .single-post .elementor-column-gap-wider > .elementor-column > .elementor-element-populated {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}