/* =============================================================================
   Degesch South Africa — overrides for the static export
   -----------------------------------------------------------------------------
   Loaded last, so these win over Elementor's generated CSS without editing it.
   Everything here is a targeted fix; nothing restyles the site.

   SCOPING NOTE — read before adding a rule here.

   Elementor reuses the same classes for every Nav Menu widget on the page. This
   site has two: the header menu and the Products sidebar menu. An unscoped
   `.elementor-nav-menu--main` rule therefore hits BOTH, and an earlier version of
   this file hid the entire sidebar on every page under 1259px — caught only by a
   pixel diff, because the page still rendered perfectly well without it.

   So header rules are scoped to [data-elementor-type="header"], which is present
   on all 45 pages and contains the header menu and nothing else. Per-widget ids
   are NOT usable for the nav: it is elementor-element-645278a on the home page
   but carries different ids on inner pages.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. NAVIGATION — stop the header menu wrapping to two lines

   Elementor switches to the hamburger at 1024px. Between roughly 1024 and
   1250px the top-level items no longer fit on one line, so "Science" drops to a
   second row and the header grows taller. Two changes: condense the menu
   earlier, and bring the hamburger forward so that broken range is never shown.
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) and (min-width: 1260px) {
  [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item {
    font-size: 14px !important;
    padding-inline: 10px !important;
  }
}

/* 1259px, not Elementor's 1024px.

   Measured, not guessed: even with the condensing above, the five top-level
   items still wrapped to a second row at 1241-1249px. The condensed menu fits
   cleanly from 1250px up, so the hamburger takes over below 1260px — a ~10px
   margin, because exact fit shifts slightly with font-load timing. */
@media (max-width: 1259px) {
  /* hide the horizontal header menu — and ONLY the header one */
  [data-elementor-type="header"] .elementor-nav-menu--main:not(.elementor-nav-menu--dropdown) {
    display: none !important;
  }

  /* and show Elementor's own toggle, which its JS is already bound to */
  [data-elementor-type="header"] .elementor-menu-toggle {
    display: flex !important;
  }
}

/* The panel the toggle opens — WITHOUT this the button does nothing.
   -----------------------------------------------------------------------------
   Elementor ships:

       @media (min-width: 1025px) {
         .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
         .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown
           { display: none }
       }

   so above its own 1024px breakpoint BOTH the toggle and the panel are hidden.
   Revealing only the toggle produced a hamburger that flipped to an X and showed
   nothing at all between 1025 and 1259px.

   Restoring display is safe because open/closed is not expressed with display —
   Elementor collapses the panel with `max-height: 0; transform: scaleY(0);
   overflow: hidden` on `.elementor-menu-toggle:not(.elementor-active) + …`, so a
   closed panel stays collapsed and invisible.

   The panel is targeted as the toggle's sibling, exactly as Elementor's own
   rules do. `.elementor-nav-menu--dropdown` on its own also matches the sub-menu
   containers inside the desktop menu, which is not what we want here. */
@media (min-width: 1025px) and (max-width: 1259px) {
  [data-elementor-type="header"] .elementor-menu-toggle + .elementor-nav-menu__container {
    display: block !important;
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   2. HEADER BUTTON / HERO ALIGNMENT

   The "Contact us" button sits on the content grid, matching the sidebar's right
   edge on inner pages. The hero slideshow ran 10px wider, so the two were
   visibly out of line. Pull the hero back onto the same grid rather than pushing
   the button off it, which would misalign the button on every inner page.

   ce2eb09 is the hero column carrying the background slideshow; it appears only
   on the home page, so this rule is safe to key on the id.

   9px, not 10: at 10px the measured edges crossed over by 1px.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .elementor-element-ce2eb09 { margin-inline-end: 9px !important; }
}

/* -----------------------------------------------------------------------------
   3. MINOR — hold the hero's background colour while its images decode
   -------------------------------------------------------------------------- */
.elementor-element-ce2eb09 { background-color: #e9e9e9; }

/* -----------------------------------------------------------------------------
   3b. HEADING LEVELS CORRECTED WITHOUT CHANGING THE DESIGN

   /contact/ had no <h1> at all, and /company/history/ used <h1> for three
   date-range labels while its real page title sat in an <h2>.

   Retagging alone changes how a heading looks, because Elementor's
   "elementor-size-default" means *inherit the size from the tag* — a pixel diff
   caught "Contact Details" jumping from 32px to 40px. fix_headings.php therefore
   stamps each retagged element with a class naming its ORIGINAL tag, so the old
   size can be restored precisely.

   Headings carrying an EXPLICIT Elementor size (xxl, xl, large, medium, small)
   size themselves and must NOT be pinned: "HISTORY" is elementor-size-xxl at
   59px, and clamping it to the h2 base made that page worse, not better.

   Sizes were read off the untouched WordPress copy on :8080, not guessed. An
   earlier guess of 40px made the timeline headings visibly larger.
   -------------------------------------------------------------------------- */

/* "Contact Details" — was an h2 at 32px/32px, now the page's <h1>.
   Line-height is pinned as well as size: this heading's leading is not a ratio
   of its size, so restoring only the size left it a few pixels out.
   Verified 0.0000% diff at both 1440px and 390px. */
h1.dg-was-h2.elementor-heading-title:not(.elementor-size-xxl):not(.elementor-size-xl):not(.elementor-size-large):not(.elementor-size-medium):not(.elementor-size-small) {
  font-size: 32px !important;
  line-height: 32px !important;
}

/* The three history timeline period titles — Elementor CTA widgets, were <h1>,
   now <h2> so the page has a single top-level heading.

   Measured on the original at 1440px, 1024px and 390px: a constant 30px / 45px
   at every width, so one unconditional pin is correct here. (A fixed pin would
   NOT be safe for a heading whose size is responsive — that mistake made the
   mobile capture worse earlier.) */
h2.dg-was-h1.elementor-cta__title {
  font-size: 30px !important;
  line-height: 45px !important;
}

/* =============================================================================
   3c. CONTACT PAGE — visual treatment
   -----------------------------------------------------------------------------
   Everywhere else on this site the rule is "do not change how it looks". This
   section is the deliberate exception, asked for specifically.

   What was wrong: the fields were borderless white boxes floating on the grey
   background with no visible edge, so the form read as unfinished; the Send
   button was a pale outline that matched nothing else on the site (every other
   call to action is the red button); and there was no grouping, so the form and
   the contact details ran together.

   Everything below is scoped to .page-id-703 so it cannot touch another page.
   Colours are the site's existing palette — red #E3000F, teal #087891, grey
   #E9E9E9 — and no font is changed.
   ============================================================================= */

/* --- the form, as a card ---------------------------------------------------- */
.page-id-703 .quform-form {
  background: #fff;
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .05);
}

/* --- fields ----------------------------------------------------------------- */
.page-id-703 .quform-form input[type="text"],
.page-id-703 .quform-form input[type="email"],
.page-id-703 .quform-form input[type="tel"],
.page-id-703 .quform-form textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #fff;
  font-size: 16px;            /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
  color: #222;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.page-id-703 .quform-form input[type="text"]:hover,
.page-id-703 .quform-form input[type="email"]:hover,
.page-id-703 .quform-form input[type="tel"]:hover,
.page-id-703 .quform-form textarea:hover { border-color: #9b9b9b; }

/* A visible focus ring is not decoration — without it the form cannot be
   navigated by keyboard. Teal rather than the browser default, to match. */
.page-id-703 .quform-form input[type="text"]:focus,
.page-id-703 .quform-form input[type="email"]:focus,
.page-id-703 .quform-form input[type="tel"]:focus,
.page-id-703 .quform-form textarea:focus {
  outline: none;
  border-color: #087891;
  box-shadow: 0 0 0 3px rgba(8, 120, 145, .18);
}

.page-id-703 .quform-form textarea { min-height: 190px; resize: vertical; }

/* --- labels ----------------------------------------------------------------- */
.page-id-703 .quform-form .quform-label label {
  font-weight: 600;
  color: #333;
  margin-bottom: .35rem;
  display: inline-block;
}
.page-id-703 .quform-form .quform-required { color: #E3000F; }

/* --- submit: the site's red call to action ---------------------------------- */
.page-id-703 .quform-form .quform-button-submit button,
.page-id-703 .quform-form button[type="submit"],
.page-id-703 .quform-form input[type="submit"] {
  background: #E3000F;
  border: 1px solid #E3000F;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  padding: .8rem 2.4rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.page-id-703 .quform-form .quform-button-submit button:hover,
.page-id-703 .quform-form button[type="submit"]:hover,
.page-id-703 .quform-form input[type="submit"]:hover {
  background: #b80710;
  border-color: #b80710;
}
.page-id-703 .quform-form button[type="submit"]:focus-visible,
.page-id-703 .quform-form input[type="submit"]:focus-visible {
  outline: 3px solid rgba(8, 120, 145, .5);
  outline-offset: 2px;
}
.page-id-703 .quform-form button[type="submit"]:active { transform: translateY(1px); }
.page-id-703 .quform-form button[type="submit"][disabled] {
  background: #d9a0a4; border-color: #d9a0a4; cursor: not-allowed;
}

/* --- the status message the handler writes ---------------------------------- */
.page-id-703 .js-form-status { border-radius: 3px; }

/* -----------------------------------------------------------------------------
   CONTACT DETAILS COLUMN

   It was a bare run of headings and numbers with default bullets, no grouping
   and no visual relationship to the form beside it. This gives it the same card
   treatment, puts the site red on the section headings and the site teal on the
   links, and makes every number a proper tap target on a phone.

   Scoped to the one text-editor widget on this page (elementor-element-b5d8d50),
   which is the only one in the page region, so nothing else can be caught.
   -------------------------------------------------------------------------- */

.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor {
  background: #fff;
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .05);
}

/* --- section headings: Exports, General Enquiries, Email, Fax, Address ------ */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor h3 {
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #E3000F;
  margin: 1.6rem 0 .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #ececec;
}
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor > h3:first-child { margin-top: 0; }

/* --- region labels above the two area numbers ------------------------------ */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor h4 {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600;
  color: #555;
  margin: 1.1rem 0 .15rem;
}
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor > h4:first-child { margin-top: 0; }

/* --- values ----------------------------------------------------------------- */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor p {
  margin: 0 0 .35rem;
  font-size: 16px;
  line-height: 1.55;
  color: #333;
}

/* --- the General Enquiries list: red marker instead of a default bullet ----- */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul li {
  position: relative;
  /* !important: Elementor resets list padding with a more specific selector, so
     without this the computed padding stayed 0 and the marker sat on top of the
     number. Measured, not assumed. */
  padding-left: 1.15rem !important;
  margin: 0 0 .2rem;
  list-style: none;
}

/* The marker is centred against the row rather than pinned near the top,
   because the tap-target rule below makes each row 44px tall on a phone and a
   top-relative offset lands in the wrong place there. */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E3000F;
}

/* --- phone and email links -------------------------------------------------- */
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor a {
  color: #087891;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  /* a comfortable tap target without changing the line rhythm */
  display: inline-block;
  padding: .1rem 0;
}
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor a:hover {
  color: #E3000F;
  border-bottom-color: #E3000F;
}
.page-id-703 .elementor-element-b5d8d50 .elementor-text-editor a:focus-visible {
  outline: 3px solid rgba(8, 120, 145, .45);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .page-id-703 .quform-form,
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor { padding: 1.25rem; }

  /* left-align on a phone: centred labels and numbers are harder to scan */
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor,
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor h3,
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor h4,
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor p,
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul { text-align: left !important; }

  /* Apple's minimum comfortable touch target is 44px. */
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor a[href^="tel:"],
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor a[href^="mailto:"] {
    padding: .45rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* That taller flex line box throws the list marker off: the dot was pinned to
     .62em from the top, which is the wrong place once the line is 44px tall, so
     it landed on the "+" of the number. Centre it against the row instead. */
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul li {
    padding-left: 1.25rem;
  }
  .page-id-703 .elementor-element-b5d8d50 .elementor-text-editor ul li::before {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* -----------------------------------------------------------------------------
   4. MOBILE — stop long headings dragging the page sideways

   Long single words at the xxl heading size are wider than a phone screen and
   have no break opportunity, so they overflowed their box and gave the whole
   page a horizontal scrollbar: "ANTICOAGULANTS" ran 145px past the edge at
   390px, and the visible part was cut off mid-word.

   Measured on the worst pages before this rule:
     /…/rats-and-mice/anticoagulants/   +135px
     /field-of-activity/professional-use/ +45px
     /products-and-solutions/rodenticides/ +27px

   The same two causes also produced +2 to +15px across the tablet range and up
   to 1259px, so the rule runs to the same breakpoint as the hamburger rather
   than stopping at the phone breakpoint. Above 1260px the layout is the full
   desktop one, where the containing column absorbs the negative margin and no
   overflow occurs.

   This does change how those headings render on phones — they now wrap onto a
   second line instead of running off-screen. That is the point; the previous
   behaviour made them unreadable. Desktop is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1259px) {
  /* hyphens first: "ANTICOAGU-LANTS" reads far better than a bare break that
     leaves a lone "S" on the next line. break-word stays as the safety net for
     strings that cannot be hyphenated (product codes, URLs). */
  .elementor-heading-title,
  h1, h2, h3, h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* The remaining ~9px on almost every page came from a NEGATIVE right margin
     on the call-to-action button (margin-right: -9px). On desktop the containing
     column has enough padding to absorb it; on a phone the column is flush with
     the viewport, so the button poked out and took the page with it. */
  .elementor-button { max-width: 100%; margin-inline-end: 0 !important; }
}