/*
  initi8: behaviour the conversion could not carry.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  The five service cards are hover boxes: at rest each shows its photograph,
  and on hover a panel slides up from the bottom carrying the service name, a
  sentence about it, and a link into that section of the services page.

  The panel is still in the markup and still sits at translateY(100%) behind a
  clipped container, but the reveal was lost. The de-theme compiler reads
  authored CSS and reattaches each rule to the element it computed, so

      .card:hover .panel { transform: translateY(0) }

  became "reveal the panel when you hover the panel", and the panel is the one
  thing you cannot hover: it is parked below the card with overflow hidden. The
  cards therefore sat there as five silent photographs.

  Restored by putting the relationship back. Nothing here restyles the card, it
  only moves the panel to the position the original moved it to, over the same
  600ms the captured transition already specifies.

  Keyboard included: the panel holds the only link out of the card, so a
  keyboard user has to be able to reach it. :focus-within opens the card when
  the link inside takes focus.
*/

.dipi-hover-box-container:hover .dipi-hover-box-hover,
.dipi-hover-box-container:focus-within .dipi-hover-box-hover {
  transform: translateX(0) translateY(0) !important;
}

/* The front face carries the photograph. Dimming it as the panel arrives is
   what the original did, and it is what makes the text on the panel readable
   over a photograph. */
.dipi-hover-box-container:hover .dipi-hover-box-content,
.dipi-hover-box-container:focus-within .dipi-hover-box-content {
  opacity: 0.55;
}

.dipi-hover-box-content { transition: opacity 600ms ease; }

/* A visible focus ring on the card itself, since the whole card is the target
   of the interaction even though the link inside is what receives focus. */
.dipi-hover-box-container:focus-within {
  outline: 2px solid #2ebaf0;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dipi-hover-box-hover { transition: none !important; }
  .dipi-hover-box-content { transition: none !important; }
}

/* Touch has no hover. On a phone the panel would never appear and the card
   would be a photograph with no way into the page it belongs to, so it is
   shown outright. */
@media (hover: none) {
  .dipi-hover-box-hover { transform: translateX(0) translateY(0) !important; }
  .dipi-hover-box-content { opacity: 0.55; }
}

/* ---- the service cards on a phone ---------------------------------------
   Two problems on a narrow screen, both from the card being built to be
   hovered.

   The theme drops fifth-width columns to two across, which crops each
   photograph to a 166px slice. And the panel is absolutely positioned at a
   fixed 400px with its content bottom-aligned, so shortening the card to fit
   the screen simply pushed the "Learn More" button below the clip: the text ran
   over the busiest part of the photograph and the button was gone.

   So on a phone the card stops being an overlay and becomes what it is: a
   picture with a caption. One per row, the photograph on top at a fixed height,
   the panel below it in normal flow, and the card sized to whatever the text
   needs. Nothing is cropped, nothing is hidden behind an interaction that a
   touch screen cannot perform, and the longest description sets the height
   rather than being cut off by it.                                           */
@media (max-width: 767px) {
  .et_pb_column:has(.dipi-hover-box-container) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
    float: none !important;
  }

  /* the card grows to fit, rather than clipping its own contents */
  .dipi-hover-box-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* the photograph, given a fixed slice of the card so it reads as an image */
  .dipi-hover-box-content {
    position: relative !important;
    height: 200px !important;
    min-height: 200px !important;
    opacity: 1 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* the caption, in normal flow underneath, on the dark it already carries */
  .dipi-hover-box-hover {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    background-image: none !important;
    background-color: #0a0000 !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 0 0 10px 10px !important;
  }

  /* the button is part of the caption now, not floating over a photograph */
  .dipi-hover-box-hover a {
    display: inline-block;
    margin-top: 0.75rem;
  }
}

/* ---- the Learn More button ----------------------------------------------
   The theme ships a generic button-hover rule: go translucent, grow a 2px
   border, and reshuffle the padding to make room for a slide-in arrow. The
   original overrides all of it, so hovering the button there changes nothing
   but the corner radius.

   The compiler captured the generic rule rather than the override, so on the
   converted page the button went translucent over a photograph with dark text
   on top of it, gained a border, and jumped as its padding changed. Put back
   what the original actually does.                                          */
.dipi-hover-box-hover a:hover,
.dipi-hover-box-hover a:focus-visible {
  background-color: #fff !important;
  color: rgb(21, 2, 42) !important;
  border-width: 0 !important;
  padding: 15px 20px !important;
  border-radius: 0 !important;
}

.dipi-hover-box-hover a {
  transition: border-radius 0.2s ease;
}

.dipi-hover-box-hover a:focus-visible {
  outline: 2px solid #2ebaf0;
  outline-offset: 3px;
}

/* ---- the header menu on the Arabic pages --------------------------------
   The theme cancels the first and last menu item's 11px padding with a -11px
   margin on the list itself. Left to right that overhang lands inside the
   header and is invisible. Right to left the list sits flush against the
   inline start of the viewport, so the same overhang falls outside it and
   every Arabic page gained eleven pixels of horizontal scroll.

   Same result, no negative margin: drop the padding on the two end items
   instead of pulling the whole list out over its container.                */
[dir="rtl"] .et-menu.nav {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[dir="rtl"] .et-menu.nav > li:first-child { padding-inline-start: 0; }
[dir="rtl"] .et-menu.nav > li:last-child  { padding-inline-end: 0; }