/* =========================================================================
   ATAR Business Lounge — LIGHT palette (ivory + wood brown + gold)

   This is the default. To switch, change the one stylesheet line in BOTH
   index.html and ar.html:

       atar-theme-light.css   ivory / cream, brown + gold   ← current
       atar-theme-wood.css    dark espresso, brown + gold
       atar-theme.css         dark navy + gold

   ─────────────────────────────────────────────────────────────────────────
   The theme was built dark: the hero, the services band, the footer and the
   mobile menu all used --procounsel-primary as a background, and put white
   text on top. Simply making that variable light would have turned every
   heading white-on-white, because the same variable is also the heading
   colour.

   So this file does two things. It sets the palette, using espresso as the
   dark role (headings, buttons, the icon in the scroll bar), and then flips
   the specific places where that dark colour was used as a BACKGROUND —
   together with the text that sat on it. Each of those is grouped and
   labelled below.

   Gold note: #c5a050 is the logo gold and stays as a fill colour — buttons,
   icon wells, the pin. As TEXT on a cream background it only reaches 2.2:1,
   which is unreadable, so gold text uses a deeper --atar-gold-text instead.
   Same hue, enough contrast.
   ========================================================================= */

:root {
  /* Gold — logo fill colour, unchanged. */
  --procounsel-base: #c5a050;
  --procounsel-base-rgb: 197, 160, 80;

  /* Dark role: headings, button fills, dark-on-light text. */
  --procounsel-primary: #33261b;
  --procounsel-primary-rgb: 51, 38, 27;

  --procounsel-black: #241a12;
  --procounsel-black-rgb: 36, 26, 18;

  /* Warm neutrals in place of the theme's cool greys. */
  --procounsel-gray: #fbf7f1;
  --procounsel-gray-rgb: 251, 247, 241;
  --procounsel-gray2: #f4ede2;
  --procounsel-gray2-rgb: 244, 237, 226;

  --procounsel-text: #6b6055;
  --procounsel-text-rgb: 107, 96, 85;
  --procounsel-text-dark: #6b6055;
  --procounsel-text-dark-rgb: 107, 96, 85;
  --procounsel-text-gray: #857a6d;
  --procounsel-text-gray-rgb: 133, 122, 109;

  --procounsel-border-color: #e5dacb;
  --procounsel-border-color-rgb: 229, 218, 203;

  /* ATAR tokens. */
  --atar-ivory: #fbf7f1;
  --atar-cream: #f4ede2;
  --atar-cream-deep: #ece2d4;
  --atar-espresso: #33261b;
  --atar-wood: #6b4a31;
  --atar-wood-rgb: 107, 74, 49;
  --atar-gold-text: #856426;   /* 4.7:1 on cream — readable gold for text */
  --atar-gold-dark: #a8853d;
}

/* ------------------------------------------------------------------ page */
body {
  background-color: var(--atar-ivory);
  color: var(--procounsel-text);
}

.preloader {
  background-color: var(--atar-ivory);
}

.custom-cursor__cursor {
  border-color: var(--procounsel-base) !important;
}

/* ---------------------------------------------------------------- header */
/* Sits transparently over the hero, which is now light, so the white nav
   text had to become espresso. */
.main-menu .main-menu__list > li > a,
.main-header__info__text,
.main-header__info a {
  color: var(--atar-espresso);
}

.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.main-header__info a:hover {
  color: var(--atar-gold-text);
}

.mobile-nav__btn span {
  background-color: var(--atar-espresso);
}

/* The sticky bar that slides in on scroll was solid dark. */
.sticky-header--cloned {
  background-color: rgba(251, 247, 241, 0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--procounsel-border-color);
  box-shadow: 0 10px 30px -22px rgba(var(--atar-wood-rgb), 0.5);
}

.atar-lang {
  color: var(--atar-gold-text);
  border-color: rgba(var(--atar-wood-rgb), 0.35);
}

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

/* ------------------------------------------------------------------ hero */
/* The overlays darkened the photo so white text would read. The photo is a
   bright cream-and-walnut interior, so a cream wash suits it far better —
   and lets the headline be espresso instead of white. */
/* The wash element is anchored to whichever side the text sits on and is 62%
   wide — left:0 in the LTR stylesheet, right:0 in the RTL one. The gradient
   inside it has to run the same way. Setting a single 90deg gradient for both
   put the opaque end against the INNER edge on the Arabic page: a hard
   vertical seam a third of the way across, and no wash at all behind the
   Arabic headline. Hence the two rules. */
.main-slider-one__overlay-one {
  background: linear-gradient(90deg,
              var(--atar-ivory) 0%,
              rgba(251, 247, 241, 0.90) 26%,
              rgba(251, 247, 241, 0.62) 56%,
              rgba(251, 247, 241, 0.22) 84%,
              rgba(251, 247, 241, 0) 100%);
}

[dir="rtl"] .main-slider-one__overlay-one {
  background: linear-gradient(-90deg,
              var(--atar-ivory) 0%,
              rgba(251, 247, 241, 0.90) 26%,
              rgba(251, 247, 241, 0.62) 56%,
              rgba(251, 247, 241, 0.22) 84%,
              rgba(251, 247, 241, 0) 100%);
}

.main-slider-one__overlay-two {
  background: linear-gradient(0deg, var(--atar-ivory) -14%,
              rgba(251, 247, 241, 0) 70%);
}

/* The slide sits on the theme's near-black until the photo decodes, which
   flashes dark on a light page. */
.main-slider-one__item {
  background-color: var(--atar-ivory);
}

/* The header spans the full width but the wash only covers 62%, so on the
   other side the phone number and buttons were landing on raw photo — dark
   gold on a dark ceiling in the Arabic screenshot. This is a full-width
   feather across the top, strong enough for the header, gone by the time it
   reaches the headline. */
.main-slider-one__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(251, 247, 241, 0.94) 0%,
              rgba(251, 247, 241, 0.60) 55%,
              rgba(251, 247, 241, 0) 100%);
}

.main-slider-one__title {
  color: var(--atar-espresso);
}

.main-slider-one__text {
  color: var(--procounsel-text);
}

/* --------------------------------------------------------------- feature */
.feature-one__item__title {
  color: var(--atar-espresso);
}

.feature-one__item__icon {
  color: var(--atar-gold-text);
}

.feature-one__item:hover .feature-one__item__icon {
  color: var(--procounsel-base);
}

/* -------------------------------------------------------------- services */
/* This whole band was a dark slab. */
.service-one {
  background-color: var(--atar-cream);
}

.service-one__bg {
  opacity: 0.16;
}

.service-one .sec-title__title {
  color: var(--atar-espresso);
}

.service-one__item {
  background-color: #fff;
}

.service-one__item__icon {
  background-color: var(--procounsel-base);
  color: #fff;
}

/* The stock hover filled the card with solid gold and turned the text white.
   On a light page that reads as a colour accident; the lift, the gold border
   and the underline are enough. */
.service-one__item:hover {
  background-color: #fff;
}

.service-one__item:hover .service-one__item__title {
  color: var(--atar-espresso);
}

.service-one__item:hover .service-one__item__text {
  color: var(--procounsel-text);
}

.service-one__item:hover .service-one__item__icon {
  background-color: var(--atar-espresso);
}

.barnds-one__text h3 {
  color: var(--atar-espresso);
}

/* ------------------------------------------------------ process and FAQ */
.atar-process {
  background-color: var(--atar-ivory);
}

.atar-faq {
  background-color: var(--atar-cream);
}

.atar-process__step,
.atar-faq .accrodion {
  background-color: #fff;
  border-color: rgba(var(--atar-wood-rgb), 0.16);
}

.atar-process__num {
  background-color: rgba(var(--atar-wood-rgb), 0.10);
  color: var(--atar-wood);
}

.service-one__item:hover,
.atar-process__step:hover {
  box-shadow: 0 22px 48px -24px rgba(var(--atar-wood-rgb), 0.45);
}

/* ----------------------------------------------------------- why choose */
.why-choose-one__bg::after {
  background: linear-gradient(-90deg, var(--atar-cream) 33.55%,
              rgba(244, 237, 226, 0) 100%);
}

.why-choose-one__video {
  background-color: var(--atar-espresso);
}

/* ---------------------------------------------------------------- footer */
/* Was a dark slab with white text and a dark decorative background image. */
.main-footer {
  background-color: var(--atar-cream);
  border-top: 1px solid var(--procounsel-border-color);
}

.main-footer__bg {
  opacity: 0.07;
}

.main-footer__bottom {
  background-color: var(--atar-cream-deep);
}

.footer-widget__title {
  color: var(--atar-espresso);
}

.footer-widget__text,
.footer-widget__links li,
.main-footer__info__location,
.main-footer__info__text,
.main-footer__copyright {
  color: var(--procounsel-text);
}

.footer-widget__links li a:hover,
.main-footer__info__text a:hover {
  color: var(--atar-gold-text);
}

.main-footer__info__icon {
  color: var(--atar-gold-text);
}

.main-footer__info__social a,
.mobile-nav__social a {
  color: var(--atar-gold-text);
  border-color: rgba(var(--atar-wood-rgb), 0.35);
}

.main-footer__info__social a:hover,
.main-footer__info__social a:focus-visible,
.mobile-nav__social a:hover,
.mobile-nav__social a:focus-visible {
  background-color: var(--procounsel-base);
  border-color: var(--procounsel-base);
  color: #fff;
}

/* ----------------------------------------------------------- mobile menu */
.mobile-nav__content {
  background-color: var(--atar-ivory);
  border-inline-start: 1px solid var(--procounsel-border-color);
}

.mobile-nav__content .main-menu__list li > a,
.mobile-nav__close {
  color: var(--atar-espresso);
}

.mobile-nav__content .main-menu__list li > a:hover,
.mobile-nav__close:hover {
  color: var(--atar-gold-text);
}

.mobile-nav__contact li,
.mobile-nav__contact li a {
  color: var(--procounsel-text);
}

.mobile-nav__contact li i {
  color: var(--atar-gold-text);
}

/* ------------------------------------------------------------------ misc */
.scroll-to-top__inner {
  background-color: var(--atar-espresso);
}

.sec-title__title span {
  color: var(--atar-gold-text);
}

.sec-title__tagline {
  color: var(--atar-gold-text);
}

.about-one__content__list li span,
.contact-one__info__icon {
  color: var(--atar-gold-text);
}

.atar-progress__bar {
  background: linear-gradient(90deg, rgba(var(--atar-wood-rgb), 0.45),
              var(--procounsel-base));
}

.atar-form__status--pending {
  background-color: rgba(var(--atar-wood-rgb), 0.10);
  color: var(--atar-wood);
}


/* ------------------------------------------------------- button contrast */
/* The theme puts WHITE text on the gold fill. Against #c5a050 that measures
   2.47:1 — the primary call-to-action was the least readable text on the
   page. Espresso on the same gold measures 5.94:1 and looks more expensive
   anyway, so every layer that sits on gold gets dark text and every layer
   that sits on espresso keeps white.

   The buttons are two stacked labels: <i> is what you see, <span> slides in
   on hover, and different sections swap which layer carries which colour. */
.procounsel-btn > i {
  color: var(--atar-espresso);
}

.procounsel-btn > span {
  color: #fff;
}

/* Sections where the base layer is espresso and the hover layer is gold. */
.contact-one__form .procounsel-btn > i,
.why-choose-one .procounsel-btn > i {
  color: #fff;
}

.contact-one__form .procounsel-btn > span,
.why-choose-one .procounsel-btn > span {
  color: var(--atar-espresso);
}

/* Header button: its hover layer is white. */
.main-header__btn .procounsel-btn > span {
  color: var(--atar-espresso);
}

/* Icons sitting inside gold discs, same problem, same fix. */
.main-header__info__icon,
.main-footer__info__pin,
.service-one__item__icon {
  color: var(--atar-espresso);
}

.service-one__item:hover .service-one__item__icon {
  color: #fff;
}

/* Focus rings and the small decorative rules need to be visible against a
   light page, so they use the deeper gold rather than the logo fill. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--atar-gold-text);
}

.sec-title__tagline::before,
.main-menu__list > li > a::after {
  background-color: var(--atar-gold-text);
}