/* Tango IT site fixes, maintained by Core Nova.
   Additive only. Never edit the generated bundles in /assets/litespeed/. */

/* --- Dropdown overlap in the main navigation ---------------------------------
   Each submenu panel is 285px wide, but adjacent top-level items sit only about
   139px apart, and every submenu carries the same z-index (9999). The theme also
   transitions `all .3s`, which animates `visibility`, so an outgoing panel stays
   painted while the next one appears. Two opaque panels then overlap by roughly
   146px with no stacking order to separate them, and the left panel's text pokes
   out beside the right one.

   Fix: hide the outgoing panel promptly instead of fading it, and lift whichever
   panel is actually hovered or focused above its neighbours. */

.uael-nav-menu__layout-horizontal .uael-nav-menu .menu-item-has-children > .sub-menu {
  transition: opacity .15s ease-in, visibility 0s linear .15s;
}

.uael-nav-menu__layout-horizontal .uael-nav-menu .menu-item-has-children:hover > .sub-menu,
.uael-nav-menu__layout-horizontal .uael-nav-menu .menu-item-has-children:focus-within > .sub-menu {
  transition: opacity .15s ease-in, visibility 0s linear 0s;
  z-index: 10050;
}

/* --- Pipedrive enquiry forms -------------------------------------------------
   Added 2026-09-03, replacing the inherited WPForms markup and the temporary
   placeholder that stood in for it.

   Two LeadBooster web forms, built by Tango IT in their own Pipedrive account:
   the general enquiry form in the "Send us an enquiry" panel on every page, and
   the job enquiry form on /join/. Pipedrive renders each one inside an iframe it
   owns, so nothing here can reach the fields, the fonts or the submit button.
   Styling of the form itself is done in Pipedrive, not in this file. What is left
   to do here is stop the iframe overflowing its column on narrow screens. */

.pipedriveWebForms {
  width: 100%;
  max-width: 640px;
}

.pipedriveWebForms iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

/* --- /join/ : job enquiry heading + form relocated into the footer panel ----
   On /join/ the general enquiry form was removed (the page has its own job
   enquiry form), which left the footer's two-column panel half empty. The
   "Ready to change the way you work?" dual heading and the job enquiry form
   were then moved out of the page body into that right-hand column, so /join/
   keeps the same footer layout as every other page.

   The heading's styling was authored by Elementor scoped to .elementor-29,
   the page-body wrapper. Now that the widget sits under .elementor-212, the
   footer wrapper, those rules no longer reach it, so re-apply the same
   declarations here. Values come straight from the generated rules; the
   var()s are global custom properties defined on the body. Scoped to /join/
   with body.elementor-page-29 so no other page is touched. */

body.elementor-page-29 .elementor-element-5eb379b {
  text-align: center;
  /* Match the width of the Pipedrive form below and sit on the same left edge,
     so the centred heading lines up over the form rather than drifting to the
     right of the 70% column. */
  max-width: 640px;
  margin-right: auto;
}

body.elementor-page-29 .elementor-element-5eb379b .premium-dual-header-first-header span {
  display: block;
}

body.elementor-page-29 .elementor-element-5eb379b .premium-dual-header-first-span {
  font-family: var(--e-global-typography-9b0ea16-font-family), Sans-serif;
  /* 32px, 2026-09-04: now matches "the way you work?" below it and the
     "Send us an Enquiry" heading in the home footer. Font and colour (the
     primary orange) unchanged. */
  font-size: 32px;
  text-transform: var(--e-global-typography-9b0ea16-text-transform);
  line-height: var(--e-global-typography-9b0ea16-line-height);
  color: var(--e-global-color-primary);
}

body.elementor-page-29 .elementor-element-5eb379b .premium-dual-header-second-header {
  font-family: var(--e-global-typography-22666da-font-family), Sans-serif;
  font-size: 32px;
  text-transform: var(--e-global-typography-22666da-text-transform);
  line-height: var(--e-global-typography-22666da-line-height);
  /* Secondary teal (#166782), 2026-09-04: back to its original colour after a
     brief all-orange test, so the two lines read as two tones again. */
  color: var(--e-global-color-secondary);
  margin-bottom: 15px;
}

/* --- Home footer: "Send us an Enquiry" heading, matched to /join/ above -----
   Was 1.5em (24px), the secondary teal and left-aligned, inherited from the
   generated bundle rule scoped to .elementor-212 .elementor-element-19deb4d.
   Re-declared here at the same specificity, overriding colour, size, alignment
   and bottom margin, so both enquiry-form headings share one look. */

.elementor-212 .elementor-element.elementor-element-19deb4d .elementor-heading-title {
  font-size: 32px;
  color: var(--e-global-color-secondary);
  text-align: center;
  margin-bottom: 15px;
}

/* --- Blog and author post cards: thumbnail sizing -----------------------------
   Added 2026-09-05.

   Elementor sizes a post card's thumbnail with an aspect-ratio box: the wrapper
   carries padding-bottom and the image is taken out of the flow and centred inside
   it. The rule that lifts the image out of the flow is scoped to a class,
   elementor-has-item-ratio, which Elementor's own JavaScript adds at runtime. That
   JavaScript is not shipped with the static site, so the class never appears and the
   image stays in the flow, sitting below the padding box instead of inside it.

   It went unnoticed until now because the images were never loading: LiteSpeed's lazy
   loader left them as zero-height placeholders, so the wrong layout produced roughly
   the right height by accident. With the images loading properly the gap shows, about
   150px per card on /blog/ and both author pages.

   These declarations are the ones Elementor applies under that class, so the cards
   match the original site again. */

.elementor-posts-container .elementor-post__thumbnail img {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  height: auto;
  transform: scale(1.01) translate(-50%, -50%);
}

/* --- Self-hosted replacements for the two Adobe Fonts (Typekit) families ----
   Added 2026-09-16, removing the last third-party font service from the site.
   Revised 2026-09-16: swapped again, same technique, different replacements
   (Playfair Display and Barlow Condensed did not read the way Tango wanted).

   The Elementor kit's global typography was set up against two Adobe Fonts
   (Typekit) families, loaded on every page via a <link> to use.typekit.net:
     - "ofelia-display"          headings and the main nav, at weights 500
                                  and 600
     - "proxima-soft-condensed"  body/secondary/accent text and buttons, at
                                  weights 300, 400, 500 and 600
   That <link> has been removed from every page. Every page's inline
   Elementor CSS still asks for those two family names by name (hundreds of
   generated occurrences, not worth touching one by one), so instead of
   renaming every reference, the two families are redefined here to point at
   self-hosted, free replacements:
     - "ofelia-display"          -> Montserrat (Google Fonts, SIL Open Font
       License).
     - "proxima-soft-condensed"  -> Roboto (Google Fonts, Apache License 2.0).

   Every weight actually referenced anywhere on the site is covered (checked
   across all 40 pages, including the main nav and the two author pages,
   which is what surfaced the 500 and 300/600 weights below), and only the
   Latin subset, to keep this small: six files, about 18-22KB each. They are
   self-hosted under /assets/fonts/ rather than pulled from Google's CDN, so
   this does not trade one third-party request for another. */

@font-face {
  font-family: "ofelia-display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-500.woff2") format("woff2");
}

@font-face {
  font-family: "ofelia-display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
  font-family: "proxima-soft-condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/roboto-300.woff2") format("woff2");
}

@font-face {
  font-family: "proxima-soft-condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: "proxima-soft-condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/roboto-500.woff2") format("woff2");
}

@font-face {
  font-family: "proxima-soft-condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/roboto-600.woff2") format("woff2");
}