/* =========================================================================
   ATAR Business Lounge — custom additions on top of the ProCounsel theme.
   Nothing here changes the theme's colours, spacing or layout; it only adds
   the language switcher, the contact-form states and Arabic typography.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Skip link */
.atar-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background-color: var(--procounsel-base, #c7954a);
  color: #fff;
  font-family: var(--procounsel-font, sans-serif);
  font-size: 15px;
  text-decoration: none;
}

.atar-skip-link:focus {
  inset-inline-start: 0;
}

/* ------------------------------------------------- 2. Language switcher button */
.atar-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.55);
  border-radius: 30px;
  background-color: transparent;
  color: var(--procounsel-base, #c7954a);
  font-family: var(--procounsel-font, sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.atar-lang:hover,
.atar-lang:focus-visible {
  background-color: var(--procounsel-base, #c7954a);
  border-color: var(--procounsel-base, #c7954a);
  color: #fff;
}

.atar-lang i {
  font-size: 16px;
  line-height: 1;
}

.main-header__right .atar-lang {
  margin-inline-end: 20px;
}

/* the switcher stays visible on mobile; the quote button is what gets hidden */
@media (max-width: 1199px) {
  .main-header__right .atar-lang {
    margin-inline-end: 12px;
  }
}

@media (max-width: 575px) {
  .main-header__right .atar-lang {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  .main-header__right .atar-lang i {
    display: none;
  }
}

.atar-lang--mobile {
  display: inline-flex;
  margin: 10px 0 25px;
}

/* --------------------------------------------------------- 3. Contact form UI */
/* Visible labels are kept for screen readers only — the theme's design uses
   placeholders, so we hide the label text without removing it from the a11y tree. */
.atar-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.atar-form__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.atar-form input.is-invalid,
.atar-form textarea.is-invalid {
  border-color: #d9534f !important;
}

.atar-form__status {
  display: none;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: var(--procounsel-font, sans-serif);
  font-size: 15px;
  line-height: 1.6;
}

.atar-form__status.is-visible {
  display: block;
}

.atar-form__status--pending {
  background-color: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.12);
  color: var(--procounsel-base, #c7954a);
}

.atar-form__status--success {
  background-color: rgba(40, 167, 69, 0.12);
  color: #1e7e34;
}

.atar-form__status--error {
  background-color: rgba(217, 83, 79, 0.12);
  color: #b02a26;
}

.atar-form button[type="submit"][disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* ----------------------------------------------- 4. Faster perceived load-in */
/* The theme hides its preloader on window.load, which waits for every image.
   We drop it as soon as the DOM and scripts are ready instead. */
html.is-ready .preloader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Keep off-screen sections out of the first paint's layout work. */
.why-choose-one,
.contact-one,
.main-footer__top {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

img {
  max-width: 100%;
  height: auto;
}

/* The custom cursor is a desktop-only flourish; skip it on touch devices. */
@media (hover: none), (pointer: coarse) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hammer path {
    animation: none !important;
  }
}

/* ------------------------------------------------------- 5. Arabic typography */
html[lang="ar"] {
  --procounsel-font: "Cairo", "Segoe UI", "Tahoma", sans-serif;
  --procounsel-heading-font: "Amiri", "Times New Roman", serif;
  --procounsel-special-font: "Amiri", serif;
}

html[lang="ar"] body {
  font-family: var(--procounsel-font);
}

/* Latin letter-spacing tightens Arabic joins and looks broken — reset it. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] .sec-title__tagline,
html[lang="ar"] .procounsel-btn {
  letter-spacing: normal;
}

/* Arabic needs a little more leading than the Latin setting. */
html[lang="ar"] .main-slider-one__title,
html[lang="ar"] .sec-title__title {
  line-height: 1.35;
}

html[lang="ar"] .main-slider-one__text,
html[lang="ar"] .about-one__content__text,
html[lang="ar"] .why-choose-one__text,
html[lang="ar"] .service-one__item__text,
html[lang="ar"] .footer-widget__text {
  line-height: 1.9;
}

/* text-transform has no effect in Arabic but does add rendering cost */
html[lang="ar"] * {
  text-transform: none !important;
}

/* Phone numbers, e-mail and URLs stay left-to-right inside RTL text. */
html[lang="ar"] [dir="ltr"] {
  text-align: right;
  unicode-bidi: isolate;
}

/* Keep the mobile menu toggle on the correct side in RTL. */
html[dir="rtl"] .atar-skip-link:focus {
  inset-inline-start: 0;
}

/* --------------------------------------- 6. No flash of un-initialised sliders */
/* Owl Carousel is initialised on window.load, so until then every slide sits
   stacked on the page. Hiding all but the first means the hero can paint from
   HTML + CSS alone, without waiting for any JavaScript. Owl adds .owl-loaded
   the moment it takes over. */
.main-slider-one__carousel:not(.owl-loaded) .item:not(:first-child),
.barnds-carousel__one:not(.owl-loaded) .item:not(:first-child) {
  display: none;
}

/* ------------------------------------------- 7. Instagram / LinkedIn icons */
/* The theme's icon font has no glyph for either, so those two rendered as
   empty boxes. Inline SVG instead, sized to sit level with the font icons. */
.atar-social-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.main-footer__info__social a,
.mobile-nav__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------ 8. screen-reader-only labels */
/* Bootstrap 5 renamed .sr-only to .visually-hidden and dropped the old class
   entirely, so every <span class="sr-only"> in the theme's markup rendered as
   plain visible text — which is why the social icons had "Facebook",
   "Instagram" and so on printed across them. Defining the class restores the
   intended behaviour anywhere it is still used. */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}