/* Site-wide header + footer restyle — v1.0.0
 * Combines what used to be page-header-v1.css and page-footer-v1.css
 * (both scoped to body.page-id-536, the /8-2 page only) into one
 * unscoped stylesheet loaded on every page via
 * sop-chrome-global-restyle.php, so the shared header (Elementor post 20)
 * and footer (Elementor post 198) look the same everywhere, not just on
 * /8-2.
 *
 * Both widgets print their own inline <style> blocks using a blue palette
 * (header: #1f70be/#173d72, footer: #EAF4FF/#1F91C2) and the system font
 * stack - unrelated to the teal/mint brand (#0ca39d / #073a3c / #eefaf8,
 * Manrope) used on /8-2. Every rule here needs !important and
 * matching-or-higher specificity to win, since those inline blocks sit
 * later in the document than this stylesheet's <link> in <head>.
 */

/* ===== Header ===== */
/* fix: same stale-duplication problem the footer had - page-header-v1.css
   (page-id-536-only) picked up several refinements after this file's
   original consolidation - the header row's own max-width/padding fix,
   the flex layout on its inner row, nav text bumped to 17px, the logo
   switched from fixed-height to fixed-width sizing, and overflow-x
   hardening - that never got copied here, so Elementor rendering the
   shared header (post 20) outside of page 536's own context (editor,
   Preview, any other page) kept showing the older values below. The
   4-column submenu was the opposite case: it was already correct only
   here (it's tied to page-chrome-global-v1.js's
   reorganizeServicesMenu(), a site-wide behavior to begin with), so
   page-header-v1.css's older/simpler submenu rules were the stale ones
   and are dropped rather than merged in. Consolidated so there is one
   header stylesheet again; page-header-v1.css's own enqueue has been
   removed (see sop-expert-page-8-2-icon-fix-v116.php) rather than left
   as a second, now-redundant copy. */

body #tahefobu-header,
body .elementor-element-custom_header_container {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #dce9e6 !important;
  box-shadow: 0 2px 16px rgba(7, 58, 60, 0.05) !important;
}

/* the header bar's background is full-bleed, but its own row needs to
   line up with the 1180px content column every section on /8-2 uses -
   and, now that this rule is unscoped, with the equivalent row on every
   other page too. */
body .elementor-element-custom_header_container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

@media (max-width: 767px) {
  body .elementor-element-custom_header_container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

body .elementor-element-custom_header_container > .e-con-inner {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
}

/* fix: "ліва частина шапки виходить за межі сторінки" - hardening against
   any element in this shared header row computing wider than the
   viewport and dragging the document's horizontal extent along with it.
   Was page-id-536-only; the header renders the same way on every page,
   so the same protection belongs everywhere it's used. */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body #tahefobu-header * {
  font-family: Manrope, Arial, sans-serif !important;
}

/* fix: nav text bumped 15px -> 17px to match the reference screenshot -
   was only applied on page 536 via page-header-v1.css. */
body .sop-h-nav-item .elementor-heading-title,
body .sop-h-nav-item .elementor-heading-title a {
  color: #073a3c !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

body .sop-h-nav-item:hover .elementor-heading-title,
body .sop-h-nav-item:hover .elementor-heading-title a {
  color: #0ca39d !important;
}

body .sop-h-dropdown-parent .elementor-heading-title::after {
  color: #557273 !important;
}

body .sop-h-dropdown-parent:hover .elementor-heading-title::after {
  color: #0ca39d !important;
}

/* fix: the widget's own version of this was a flat 3-column grid of 31
   links with no headings and a fixed 820px width positioned at a fixed
   left:-280px offset from the trigger - on real desktop widths that ran
   off both edges of the viewport. page-chrome-global-v1.js regroups the
   same links (same hrefs, nothing added/removed) into 4 labeled
   categories; the layout here switches to those categories and clamps
   the box to the viewport instead of a fixed offset. */
body .sop-h-submenu {
  left: 0 !important;
  width: min(880px, calc(100vw - 32px)) !important;
  padding: 22px 24px !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 45px rgba(7, 58, 60, 0.14) !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px 22px !important;
}

body .sop-h-submenu-col {
  min-width: 0;
}

body .sop-h-submenu-col + .sop-h-submenu-col {
  border-left: 1px solid #eaf2f1;
  padding-left: 22px;
  margin-left: -1px;
}

body .sop-h-submenu-heading {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0ca39d;
  color: #073a3c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .sop-h-submenu-col ul {
  display: block !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .sop-h-submenu-col li {
  margin: 0;
  padding: 0;
}

body .sop-h-submenu a {
  color: #354a4a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  padding: 7px 8px !important;
  border-radius: 6px !important;
  margin: 0 -8px !important;
}

body .sop-h-submenu a:hover {
  background: #eefaf8 !important;
  color: #008c89 !important;
}

/* logo: the new lockup (shield + wordmark side by side, ~2.1:1) is
   proportionally taller than the old badge it replaces. fix: switched
   from fixed-height to fixed-width sizing (~190px on desktop) so it
   reads as a proper anchor at the left edge of the wider bar - was only
   applied on page 536 via page-header-v1.css. */
body .sop-h-logo-widget img {
  width: 190px !important;
  height: auto !important;
}

@media (max-width: 767px) {
  body .sop-h-logo-widget img {
    width: 130px !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  body .sop-h-logo-widget img {
    width: 110px !important;
    height: auto !important;
  }
}

/* fix: white text on #0ca39d was 3.12:1, fails WCAG AA 4.5:1 - swapped in
   the color that used to be only the :hover state (5.33:1, passes) and
   picked a new, slightly darker hover so the two states stay distinct. */
body .sop-h-cta-widget .elementor-button {
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  background: #067b75 !important;
  box-shadow: 0 8px 18px rgba(12, 163, 157, 0.22) !important;
  transition: background 0.2s ease !important;
}

body .sop-h-cta-widget .elementor-button:hover {
  background: #055f59 !important;
}

body .sop-h-mobile-menu > summary {
  border: 1px solid #cbdcda !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #073a3c !important;
  font-weight: 700 !important;
}

body .sop-h-mobile-panel {
  border: 1px solid #dce9e6 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 30px rgba(7, 58, 60, 0.14) !important;
}

body .sop-h-mobile-panel > a,
body .sop-h-mobile-services > summary,
body .sop-h-mobile-services > a {
  color: #073a3c !important;
  font-weight: 600 !important;
}

body .sop-h-mobile-services > a {
  background: #f7fbfa !important;
  border-bottom: 1px solid #eefaf8 !important;
}

/* ===== Footer ===== */
/* fix: "footer виглядає інакше в редакторі Elementor, ніж на сайті" -
   root cause was that every refinement made after this file's original
   consolidation (compact spacing, smaller logo, tighter line-height,
   centered copyright + working privacy link, the 1180px width fix) kept
   getting written ONLY to page-footer-v1.css, a second stylesheet
   enqueued exclusively when is_page(536) is true. That condition is
   false whenever Elementor renders post 198 (the footer template) on
   its own - in the editor, in Preview, in Theme Builder - so none of
   those newer rules ever reached that context, only the old snapshot
   below. Replaced with the current, fully up to date rules (still
   unscoped/unconditional, still the only footer stylesheet) so there is
   one source of truth again; page-footer-v1.css's own enqueue has been
   removed (see sop-expert-page-8-2-icon-fix-v116.php) rather than left
   as a second, now-redundant copy. */

body .elementor-element-sopxf_container_main {
  background-color: #eefaf8 !important;
  border-top: 1px solid #dce9e6 !important;
}

/* the footer bar's background is full-bleed, but its inner row
   (Elementor's own boxed container setting) resolves narrower than the
   1180px every content section on /8-2 uses - pinned to match. Every
   other page keeps whatever content width it already has; this only
   affects the footer's own internal column, not the rest of that page. */
body .elementor-element-sopxf_container_main > .e-con-inner {
  max-width: 1180px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body .elementor-element-sopxf_container_main,
body .elementor-element-sopxf_container_main * {
  font-family: Manrope, Arial, sans-serif !important;
}

body .elementor-element-sopxf_logo_img img {
  width: 140px !important;
}

body .elementor-element-sopxf_desc_text,
body .elementor-element-sopxf_desc_text p {
  color: #557273 !important;
  font-size: 13px !important;
}

/* fix: "Послуги"/"Контакти" heading no longer needs CSS (display:block
   on <strong>) to force itself onto its own line - the content is now
   two real <p> elements (heading, then the list; see EMCP Tools change
   to sopxf_services_text/sopxf_contacts_text), so the browser breaks
   the line on its own, no CSS involved. p:first-child/p:last-child are
   safe again now that there genuinely are two separate paragraphs -
   they used to both match a single shared <p> (heading text + list
   crammed into one paragraph), which is what caused the collision this
   rule previously worked around by targeting <strong> instead. */
body .elementor-element-sopxf_services_text p,
body .elementor-element-sopxf_contacts_text p {
  margin: 0 !important;
  color: #557273 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body .elementor-element-sopxf_services_text p:first-child,
body .elementor-element-sopxf_contacts_text p:first-child {
  margin: 0 0 10px !important;
  color: #073a3c !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
}

body .elementor-element-sopxf_contacts_text a {
  color: #073a3c !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body .elementor-element-sopxf_contacts_text a:hover {
  color: #0ca39d !important;
}

/* fix: same #0ca39d contrast fail as the header CTA (3.12:1), plus this
   button measured 39px tall on mobile - under the 44px touch-target
   minimum. Reused the darker color and added min-height. */
body .elementor-element-sopxf_consult_btn .elementor-button {
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  background: #067b75 !important;
  box-shadow: 0 8px 18px rgba(12, 163, 157, 0.22) !important;
  transition: background 0.2s ease !important;
  min-height: 44px !important;
}

body .elementor-element-sopxf_consult_btn .elementor-button:hover {
  background: #055f59 !important;
}

/* copyright line - the widget's own content used to carry ~40 manual
   &nbsp; characters as a fake left-indent instead of real centering;
   that's been cleaned out of the content itself (via EMCP Tools, so it
   applies everywhere this footer is used) and text-align:center here
   does the real centering, reliably at any width. */
body .sopx-copy {
  color: #35595b !important;
  font-size: 12px !important;
  text-align: center !important;
  /* text-align:center only centers the text inside this paragraph's own
     box - the box itself has a native fixed width (625px, from
     Elementor's own generated CSS) and defaults to sitting flush left
     within the full-width widget. margin:auto centers that box too. */
  width: 625px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .sop8-privacy-link {
  color: #073a3c !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

body .sop8-privacy-link:hover {
  color: #0ca39d !important;
}