/* =========================================================
   LHK — RTL / bidi / floating WhatsApp overrides
   Loaded last, on top of style.css + custom.css +
   header-footer-modern.css.

   1. Bidi isolation + digit normalisation for phone numbers
   2. Right-to-left mirroring of the rd-navbar (desktop + drawer)
   3. WhatsApp: CTA band button + floating icon

   NOTE ON APPROACH
   `<html dir="rtl">` already reverses flex/grid main axes, inline
   order and default text alignment for free. What it does NOT
   reverse are *physical* properties: margin-left/right, left/right
   offsets, translateX(), border-left/right and text-align: left.
   So everything below only mirrors physical values. Adding
   `flex-direction: row-reverse` on top of dir="rtl" would reverse
   twice and land back on the broken LTR layout.
   ========================================================= */

/* =========================================================
   1. BIDI ISOLATION + DIGIT NORMALISATION
   ---------------------------------------------------------
   In an RTL paragraph the Unicode bidi algorithm lays each run of
   European digits out as a separate unit, so "+965 1883 883" gets
   painted as "883 1883 965+". Isolating the value inside <bdi>
   (unicode-bidi: isolate) and pinning dir="ltr" keeps it intact.

   On top of that, Arabic webfonts can substitute Arabic-Indic glyphs
   for plain ASCII digits through OpenType's `locl` feature, which
   makes "+965 1883 883" appear as "+٩٦٥ ١٨٨٣ ٨٨٣" the moment the page
   flips to Arabic. Asking for lining figures and switching `locl`
   off keeps the ASCII digits the admin typed, in both languages.
   ========================================================= */

/* Helper output + a global safety net for markup not yet
   converted to the phone_text() helper. */
bdi.ltr-isolate,
.ltr-isolate,
a[href^="tel:"],
a[href^="sms:"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0;
}

/* Keep the label text aligned with the page; only the value is pinned. */
[dir="rtl"] a[href^="tel:"] {
  text-align: right;
}

[dir="rtl"] .unit-body-ltr a {
  display: block;
  text-align: right;
}

.ltr-isolate {
  display: inline-block;
}

/* =========================================================
   2. RIGHT-TO-LEFT NAVBAR
   ========================================================= */

/* ---- 2.0 Menu alignment -----------------------------------
   header-footer-modern.css pushes the menu to the far edge with
   `margin-inline-start: auto` on .rd-navbar-nav-wrap. That is the
   correct rule for English, but under dir="rtl" the inline start
   *is* the right edge, so the auto margin absorbs the free space on
   the right and strands the menu on the left with a large empty
   gap. Moving the auto margin to the inline END puts the menu back
   on the extreme right, matching English.
   ---------------------------------------------------------- */
[dir="rtl"] .rd-navbar-static .rd-navbar-nav-wrap {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* NOTE: the template's gap rule (`.rd-navbar-static * + .rd-navbar-search`)
   is already overridden by the symmetric `margin: 0 20px` on
   .rd-navbar-classic .rd-navbar-search, so there is nothing physical left
   to mirror on the search box. */

/* ---- 2.1 Item spacing (physical margin) ---- */
[dir="rtl"] .rd-navbar-static .rd-nav-item + .rd-nav-item {
  margin-left: 0;
  margin-right: 42px;
}

[dir="rtl"] .rd-navbar-classic.rd-navbar-static .rd-nav-item + .rd-nav-item {
  margin-left: 0;
  margin-right: 0;
}

[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav-wrap .rd-nav-item + .rd-nav-item {
  margin-left: 0;
  margin-right: 0;
}

/* ---- 2.2 Underline sweep ---- */
[dir="rtl"] .rd-navbar-static .rd-nav-link::after {
  transform-origin: right;
}

/* ---- 2.3 Submenu caret ---- */
[dir="rtl"] .rd-navbar-classic.rd-navbar-static .rd-nav-item .rd-navbar-submenu-toggle {
  margin-left: 0;
  margin-right: -16px;
}

[dir="rtl"] .rd-navbar-classic.rd-navbar-static .rd-nav-item .rd-navbar-submenu-toggle:before {
  right: auto;
  left: 2px;
}

/* ---- 2.4 Dropdowns (physical left/text-align) ---- */
[dir="rtl"] .rd-navbar-static .rd-menu,
[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown,
[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown li,
[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown li > a {
  text-align: right;
}

[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown {
  left: auto;
  right: 0;
}

[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown li > a {
  left: auto;
  right: -3px;
  padding: 1px 0 1px 14px;
}

[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown .rd-navbar-dropdown {
  left: auto;
  right: 100%;
}

[dir="rtl"] .rd-navbar-static .rd-navbar-dropdown.rd-navbar-open-left {
  left: auto;
  right: 100%;
}

/* ---- 2.5 Mobile / tablet off-canvas drawer ---- */
[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav-wrap {
  left: auto;
  right: 0;
  transform: translateX(110%);
}

[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav-wrap.active {
  transform: translateX(0);
}

[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav,
[dir="rtl"] .rd-navbar-fixed .rd-nav-item,
[dir="rtl"] .rd-navbar-fixed .rd-nav-link {
  text-align: right;
}

[dir="rtl"] .rd-navbar-fixed .rd-navbar-brand {
  margin-left: 0;
  margin-right: 6px;
  text-align: right;
}

/* The template JS positions the drawer backdrop from the trigger side;
   in RTL the drawer lives on the right, so keep the toggle on the left. */
[dir="rtl"] .rd-navbar .rd-navbar-toggle {
  order: 3;
}

/* ---- 2.6 Search box (physical right offset) ---- */
[dir="rtl"] .rd-navbar-search .form-input {
  padding-right: 15px;
  padding-left: 50px;
}

[dir="rtl"] .rd-navbar-search .rd-search-form-submit {
  right: auto;
  left: 0;
}

/* ---- 2.7 Aside contact block ---- */
[dir="rtl"] .rd-navbar-aside .unit-left {
  margin-left: 0;
  margin-right: 10px;
}

[dir="rtl"] .rd-navbar-aside .contact-info {
  text-align: right;
}

/* The gap between the phone block and the address block is a physical
   left margin in the template; mirror it. */
[dir="rtl"] .rd-navbar-classic.rd-navbar-static .rd-navbar-aside .contact-info + .contact-info {
  margin-left: 0;
  margin-right: 130px;
}

[dir="rtl"] .hm-strip-item > svg {
  margin-left: 0;
  margin-right: 8px;
}

/* ---- 2.8 Breadcrumb separators ---- */
[dir="rtl"] .breadcrumbs-custom-path li + li:before,
[dir="rtl"] .cms-breadcrumb__divider {
  transform: scaleX(-1);
}

/* =========================================================
   3. WHATSAPP
   ========================================================= */

/* ---- 3.1 Floating icon (every public page) ----
   The CTA band above the footer now carries its own WhatsApp button
   (partials/cta-band.blade.php); this icon is the always-visible companion
   to it. Renders as a clean circular icon and expands into a captioned
   pill on hover, so the corner never covers page content while
   still telling first-time visitors what the icon does. */
.lhk-wa-float {
  position: fixed;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.65);
transition: width 0.28s ease, padding 0.28s ease, border-radius 0.28s ease,
    transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  font-family: var(--lhk-font-body, "Lato", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif);
}

/* "bottom-end" is the right edge on English and the left edge on
   Arabic, so the icon always lands away from the sticky
   "Book an Appointment" rail, which uses the opposite corner. */
.lhk-wa-float--bottom-end {
  inset-inline-end: 22px;
  bottom: 22px;
}

.lhk-wa-float--bottom-start {
  inset-inline-start: 22px;
  bottom: 22px;
}

.lhk-wa-float:hover,
.lhk-wa-float:focus-visible {
  width: auto;
  padding-inline: 18px;
  border-radius: 999px;
  color: #fff;
  background: #1eb855;
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -10px rgba(37, 211, 102, 0.75);
  outline: none;
}

.lhk-wa-float:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.45), 0 16px 38px -10px rgba(37, 211, 102, 0.75);
}

.lhk-wa-float__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.lhk-wa-float__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.lhk-wa-float__label {
  max-width: 0;
  margin-inline-start: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: max-width 0.28s ease, margin-inline-start 0.28s ease, opacity 0.2s ease;
}

.lhk-wa-float:hover .lhk-wa-float__label,
.lhk-wa-float:focus-visible .lhk-wa-float__label {
  max-width: 260px;
  margin-inline-start: 10px;
  opacity: 1;
}

/* ---- 3.3 First-visit attention pulse ---- */
@keyframes lhk-wa-pulse {
  0% {
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.65), 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.65), 0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.65), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.lhk-wa-float--pulse {
  animation: lhk-wa-pulse 1.6s ease-out 2;
}

/* ---- 3.4 Touch devices and small screens ----
   There is no hover on touch, so the icon stays circular and the
   caption lives in the title/aria-label instead. */
@media (hover: none), (max-width: 767.98px) {
  .lhk-wa-float {
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
  }

  .lhk-wa-float:hover,
  .lhk-wa-float:focus-visible {
    width: 54px;
    padding: 0;
    border-radius: 50%;
  }

  .lhk-wa-float__label {
    display: none;
  }

  .lhk-wa-float--bottom-end {
    inset-inline-end: 16px;
    bottom: 16px;
  }

  .lhk-wa-float--bottom-start {
    inset-inline-start: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lhk-wa-float,
  .lhk-wa-float:hover,
  .lhk-wa-float:focus-visible,
  .lhk-wa-float__label {
    transition: none;
    transform: none;
  }

  .lhk-wa-float--pulse {
    animation: none;
  }
}

/* ==========================================================================
   4. SITEWIDE CTA BAND (above the footer, every public page)
   --------------------------------------------------------------------------
   partials/cta-band.blade.php is included from layouts/front.blade.php, so this
   band sits OUTSIDE the .about-page wrapper on every page except About.

   It used to borrow the About page's .about-cta* rules, which resolve their
   colours through custom properties declared on .about-page
   (--about-grad, --about-blue, --about-navy, ...). Outside that wrapper those
   variables do not exist, so `background: var(--about-grad)` fell back to
   "unset" and the card rendered as bare white text on white - invisible on
   every page except About. The department page looked correct only because
   .cms-dept-cta declares --cms-grad on its own wrapper (.cms-departments).

   The band is now a deliberate one-to-one twin of .cms-dept-cta: same gradient,
   same 30px radius / 46px 52px padding, same heading scale, same .cms-btn pill
   buttons, same breakpoints. Every value is declared locally on .lhk-cta-band,
   so nothing is inherited from a page-level scope and the About page markup is
   irrelevant.

   Two deliberate departures from .cms-dept-cta:
     - the card is a strict 50/50 grid (copy | actions) instead of a wrapping
       flex row, so the text always owns the left half and the buttons the
       right half;
     - the soft round highlight is doubled - inline-end/top and
       inline-start/bottom - to frame the card diagonally.
   Both use logical properties, so the patch pair mirrors itself on Arabic.

   Only the WhatsApp button is extra - it keeps the brand green so it reads as
   "chat" beside the white appointment pill and the outlined phone pill.
   ========================================================================== */

.lhk-cta-band {
  --lhk-cta-grad: linear-gradient(135deg, #2a93c9 0%, #7cb7d5 100%);
  --lhk-cta-blue-dark: #1f7bb0;
  --lhk-cta-sky: #bfe4f8;
  padding: 0 0 96px;
  background: #ffffff;
}

/* Twin of .cms-dept-cta, laid out as two equal halves. */
.lhk-cta-band__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  overflow: hidden;
  padding: 46px 52px;
  border-radius: 30px;
  color: #fff;
  background: var(--lhk-cta-grad);
  box-shadow: 0 28px 60px rgba(42, 147, 201, 0.26);
}

/* Diagonal highlight pair: inline-end/top, then inline-start/bottom. */
.lhk-cta-band__card::before,
.lhk-cta-band__card::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.lhk-cta-band__card::before {
  inset-inline-end: -80px;
  top: -120px;
}

.lhk-cta-band__card::after {
  inset-inline-start: -80px;
  bottom: -120px;
}

/* Left half. No max-width: the grid column already sets the measure. */
.lhk-cta-band__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Small kicker above the heading, in the .cms-section-head__eyebrow idiom. */
.lhk-cta-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--lhk-cta-sky);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lhk-cta-band__eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, var(--lhk-cta-sky));
}

/* Twin of .cms-dept-cta__text h3 */
.lhk-cta-band__title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Twin of .cms-dept-cta__text p */
.lhk-cta-band__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15.5px;
  line-height: 1.75;
}

/* Twin of .cms-dept-cta__actions, now occupying the card's right half.
   justify-content: flex-end pushes the pills against the trailing edge so the
   right half reads as a deliberate block rather than a ragged middle. */
.lhk-cta-band__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

/* Twins of .cms-btn / .cms-btn--light / .cms-btn--ghost, declared here so the
   band never depends on the department page's wrapper variables. */
.lhk-cta-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.lhk-cta-band__btn--light {
  color: var(--lhk-cta-blue-dark);
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(6, 32, 51, 0.22);
}

.lhk-cta-band__btn--light:hover,
.lhk-cta-band__btn--light:focus {
  color: var(--lhk-cta-blue-dark);
  box-shadow: 0 20px 40px rgba(6, 32, 51, 0.28);
}

.lhk-cta-band__btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.lhk-cta-band__btn--ghost:hover,
.lhk-cta-band__btn--ghost:focus {
  color: var(--lhk-cta-blue-dark);
  border-color: #ffffff;
  background: #ffffff;
}

/* Shared hover lift, matching .cms-btn's translateY(-3px). */
.lhk-cta-band__btn:hover,
.lhk-cta-band__btn:focus {
  transform: translateY(-3px);
}

.lhk-cta-band__btn:focus-visible {
  outline: 3px solid rgba(191, 228, 248, 0.75);
  outline-offset: 2px;
}

/* WhatsApp keeps the brand green so it reads as "chat", distinct from the
   white appointment button and the outlined phone button beside it. */
.lhk-cta-band__btn--whatsapp {
  color: #ffffff;
  border-color: #25d366;
  background: #25d366;
}

.lhk-cta-band__btn--whatsapp:hover,
.lhk-cta-band__btn--whatsapp:focus {
  color: #ffffff;
  border-color: #1eb455;
  background: #1eb455;
}

.lhk-cta-band__btn--whatsapp .bi-whatsapp {
  font-size: 1.05em;
}

/* ---- 4.1 Responsive ----
   Below 992px there is no room for two halves, so the card collapses to a
   single column (text above, buttons below) and the pills go back to the
   leading edge. */
@media (max-width: 1199.98px) {
  .lhk-cta-band__card {
    padding: 40px 38px;
  }
}

@media (max-width: 991.98px) {
  .lhk-cta-band__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .lhk-cta-band__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .lhk-cta-band {
    padding-bottom: 62px;
  }

  .lhk-cta-band__actions {
    width: 100%;
  }

  .lhk-cta-band__btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lhk-cta-band__btn {
    transition: none;
  }

  .lhk-cta-band__btn:hover,
  .lhk-cta-band__btn:focus {
    transform: none;
  }
}

/* ==========================================================================
   5. DYNAMIC FORM SPLIT SECTION (home page)
   --------------------------------------------------------------------------
   The admin-managed dynamic forms ticked for a page used to render as a lone
   centred white card on the body background. They now sit in a 3 / 9 split:
   a narrow gradient panel carrying the contact details on the inline-start
   side, and the form itself filling the remaining nine columns.

   The panel deliberately reuses the section 4 treatment - same gradient, same
   pair of round highlights at the inline-end/top and inline-start/bottom
   corners - so the form block and the CTA band underneath it read as one
   family. No image asset is involved, so the block costs nothing to load.

   Scoped to .lhk-form-split: the standalone /form/{slug} page and CMS pages
   keep the plain centred card from .lhk-dform (custom.css).
   ========================================================================== */

.lhk-form-split {
  padding: 8px 0 72px;
  background: #ffffff;
}

.lhk-form-split__card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 28px 60px rgba(42, 147, 201, 0.18);
}

/* ---- 5.1 Gradient panel (the "image" column) ----
   Same diagonal highlight pair as the CTA band. */
.lhk-form-split__aside {
  --lhk-split-grad: linear-gradient(135deg, #2a93c9 0%, #7cb7d5 100%);
  --lhk-split-navy: #0e2f47;
  --lhk-split-sky: #bfe4f8;
  position: relative;
  isolation: isolate;
  flex: 0 0 25%;
  max-width: 25%;
  overflow: hidden;
  padding: 46px 34px;
  color: #ffffff;
  background: var(--lhk-split-grad);
}

.lhk-form-split__aside::before,
.lhk-form-split__aside::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.lhk-form-split__aside::before {
  inset-inline-end: -90px;
  top: -130px;
}

.lhk-form-split__aside::after {
  inset-inline-start: -110px;
  bottom: -150px;
  width: 340px;
  height: 340px;
}

.lhk-form-split__aside-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Reuses the band's heading scale so the two gradients match. */
.lhk-form-split__heading {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Pinned to the panel foot: the heading stays at the top and the contact list
   drops to the bottom, whatever height the form column sets. */
.lhk-form-split__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.lhk-form-split__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.lhk-form-split__contact-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 15px;
}

.lhk-form-split__contact-item a,
.lhk-form-split__contact-item span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lhk-form-split__contact-item a:hover,
.lhk-form-split__contact-item a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

/* ---- 5.2 Form column ---- */
.lhk-form-split__main {
  flex: 1 1 0%;
  min-width: 0;
  padding: 46px 52px;
  background: #ffffff;
}

/* .lhk-dform is a centred 860px card on its own (custom.css). Inside the split
   the grid column already sets the measure, and the heading should read from
   the same edge as the fields. */
.lhk-form-split__main .lhk-dform {
  max-width: none;
  margin: 0;
}

.lhk-form-split__main .lhk-dform-head {
  margin-bottom: 24px;
  text-align: start;
}

.lhk-form-split__main .lhk-dform-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lhk-form-split__main .lhk-form-actions {
  margin-top: 26px;
  padding-top: 20px;
  text-align: start;
}

/* Two forms ticked for the same page: separate them instead of stacking. */
.lhk-form-split__main .lhk-dform + .lhk-dform {
  margin-top: 46px;
  padding-top: 42px;
  border-top: 1px solid #eaf1f7;
}

/* ---- 5.3 Responsive ----
   Below 992px the two columns are too narrow, so the gradient panel becomes a
   full-width banner on top and the form sits underneath it. */
@media (max-width: 1199.98px) {
  .lhk-form-split__aside {
    padding: 40px 34px;
  }

  .lhk-form-split__main {
    padding: 40px 38px;
  }
}

@media (max-width: 991.98px) {
  .lhk-form-split__aside,
  .lhk-form-split__main {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .lhk-form-split__aside {
    padding: 36px 34px;
  }

  .lhk-form-split__aside-body {
    display: block;
  }

  .lhk-form-split__contact {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 22px;
  }

  .lhk-form-split__main {
    padding: 36px 34px;
  }
}

@media (max-width: 575.98px) {
  .lhk-form-split {
    padding-bottom: 48px;
  }

  .lhk-form-split__aside,
  .lhk-form-split__main {
    padding: 30px 24px;
  }

  .lhk-form-split__card {
    border-radius: 24px;
  }

  .lhk-form-split__contact {
    flex-direction: column;
  }
}

/* ==========================================================================
   Typography — one font system for the whole website
   --------------------------------------------------------------------------
   The theme asks for Lato (body) + Asap (headings) in style.css, but shipped no
   webfonts for them, so every browser silently substituted a different local
   font. A previous attempt forced a system stack with !important, which threw
   the design fonts away *and* broke every .mdi icon span.

   Both families are now loaded from the layout, so the only thing needed here
   is to expose them as variables, add an Arabic face for the RTL locale, and
   stop any stray rule from hijacking text or icon fonts.
   ========================================================================== */

:root {
  --lhk-font-body: "Lato", "Noto Sans Arabic", "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
  --lhk-font-heading: "Asap", "Noto Sans Arabic", "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
}

/* Text elements inherit the body face; form controls must not fall back to the
   OS default, so they are set explicitly. */
body,
.font-default,
input,
select,
textarea,
button {
  font-family: var(--lhk-font-body) !important;
}

/* Headings keep the theme's accent face, including their nested links. */
.font-accent,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: var(--lhk-font-heading) !important;
}

/* Icon fonts must never be overwritten by a text font rule. fonts.css loads
   before custom.css, so restating them here (last in the cascade) is what
   actually keeps the glyphs intact. */
.mdi {
  font-family: "Material Design Icons" !important;
}

.fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands {
  font-family: "FontAwesome" !important;
}

.flaticon {
  font-family: "Flaticon" !important;
}

.bi {
  font-family: bootstrap-icons !important;
}

/* LightGallery (used by the certificates/photos lightbox) ships its own
   Open Sans stack, which was the last place the front end still rendered in
   a different face than the rest of the page. */
.lg-outer .lg-dropdown a,
.lg-dropdown a {
  font-family: var(--lhk-font-body) !important;
}