/* =========================================================================
   ATAR Business Lounge — corporate polish + motion layer.

   Loads after the theme, so everything here is a refinement on top of the
   existing gold/navy identity. No colours, grid or section order changed —
   this file adds the custom service icons, tightens the card and form
   treatment, and adds the motion.

   Every animation is switched off under prefers-reduced-motion at the
   bottom of the file.
   ========================================================================= */

:root {
  --atar-gold: var(--procounsel-base, #c7954a);
  --atar-navy: var(--procounsel-primary, #19223a);
  --atar-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------- 1. Scroll progress */
.atar-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 1200;
  background: transparent;
  pointer-events: none;
}

.atar-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
              rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.4),
              var(--atar-gold));
  transition: width 0.12s linear;
}

/* -------------------------------------------------- 2. Custom SVG icons */
.atar-icon {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
}

.atar-icon [data-fill] {
  fill: currentColor;
  stroke: none;
}

/* Sit the SVG inside the theme's existing icon wells. */
.service-one__item__icon,
.feature-one__item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-one__item__icon .atar-icon {
  width: 34px;
  height: 34px;
}

.feature-one__item__icon .atar-icon {
  width: 40px;
  height: 40px;
}

/* Draw the icon strokes in when the card scrolls into view. */
.atar-icon--draw path,
.atar-icon--draw line,
.atar-icon--draw rect,
.atar-icon--draw circle,
.atar-icon--draw polyline {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.is-drawn .atar-icon--draw path,
.is-drawn .atar-icon--draw line,
.is-drawn .atar-icon--draw rect,
.is-drawn .atar-icon--draw circle,
.is-drawn .atar-icon--draw polyline {
  animation: atarDraw 1.1s var(--atar-ease) forwards;
}

.is-drawn .atar-icon--draw > *:nth-child(2) { animation-delay: 0.12s; }
.is-drawn .atar-icon--draw > *:nth-child(3) { animation-delay: 0.24s; }
.is-drawn .atar-icon--draw > *:nth-child(4) { animation-delay: 0.36s; }
.is-drawn .atar-icon--draw > *:nth-child(5) { animation-delay: 0.48s; }

@keyframes atarDraw {
  to { stroke-dashoffset: 0; }
}

/* --------------------------------------------- 3. Service card treatment */
.service-one__item {
  border: 1px solid rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.08);
  border-radius: 14px;
  transition: transform 0.45s var(--atar-ease),
              box-shadow 0.45s var(--atar-ease),
              border-color 0.45s var(--atar-ease);
  will-change: transform;
}

.service-one__item:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.55);
  box-shadow: 0 22px 48px -24px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.45);
}

.service-one__item__title a {
  background-image: linear-gradient(var(--atar-gold), var(--atar-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.4s var(--atar-ease);
}

.service-one__item:hover .service-one__item__title a {
  background-size: 100% 1px;
}

/* ------------------------------------------------ 4. Section tagline rule */
.sec-title__tagline {
  position: relative;
  padding-inline-start: 46px;
}

.sec-title__tagline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background-color: var(--atar-gold);
  transform-origin: inline-start;
  animation: atarRule 0.8s var(--atar-ease) both;
}

.text-center .sec-title__tagline {
  padding-inline-start: 0;
}

.text-center .sec-title__tagline::before {
  display: none;
}

@keyframes atarRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------------------------------------------------- 5. Button polish */
.procounsel-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.procounsel-btn::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -140%;
  width: 60%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
}

.procounsel-btn:hover::after {
  animation: atarShine 0.85s var(--atar-ease);
}

@keyframes atarShine {
  to { inset-inline-start: 140%; }
}

/* ------------------------------------------------- 6. Nav link underline */
.main-menu__list > li > a {
  position: relative;
}

.main-menu__list > li > a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: var(--atar-gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.35s var(--atar-ease);
}

.main-menu__list > li:hover > a::after,
.main-menu__list > li.current > a::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* --------------------------------------------------- 7. Hero slow zoom */
.main-slider-one__bg {
  transform: scale(1);
  transition: transform 8s linear;
}

.owl-item.active .main-slider-one__bg {
  transform: scale(1.07);
}

/* ------------------------------------------------- 8. Feature icon float */
.feature-one__item__icon {
  transition: transform 0.4s var(--atar-ease);
}

.feature-one__item:hover .feature-one__item__icon {
  transform: translateY(-6px);
}

/* --------------------------------------------------- 9. Process section */
.atar-process {
  padding: 100px 0 40px;
  background-color: #fff;
}

.atar-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

@media (max-width: 991px) {
  .atar-process__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .atar-process__grid { grid-template-columns: 1fr; }
}

.atar-process__step {
  position: relative;
  padding: 34px 28px;
  border: 1px solid rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.09);
  border-radius: 14px;
  background-color: #fff;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--atar-ease), transform 0.7s var(--atar-ease),
              border-color 0.4s var(--atar-ease), box-shadow 0.4s var(--atar-ease);
}

.atar-process__step.is-in {
  opacity: 1;
  transform: none;
}

.atar-process__step:nth-child(2) { transition-delay: 0.1s; }
.atar-process__step:nth-child(3) { transition-delay: 0.2s; }
.atar-process__step:nth-child(4) { transition-delay: 0.3s; }

.atar-process__step:hover {
  border-color: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.5);
  box-shadow: 0 20px 40px -26px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.4);
}

.atar-process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.12);
  color: var(--atar-gold);
  font-family: var(--procounsel-heading-font, serif);
  font-size: 18px;
  line-height: 1;
}

.atar-process__title {
  margin-bottom: 10px;
  font-family: var(--procounsel-heading-font, serif);
  font-size: 20px;
  color: var(--atar-navy);
}

.atar-process__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--procounsel-text, #838790);
}

/* ------------------------------------------------------ 10. FAQ section */
.atar-faq {
  padding: 90px 0 100px;
}

.atar-faq .accrodion {
  border: 1px solid rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.09);
  border-radius: 12px;
  margin-bottom: 16px;
  background-color: #fff;
  transition: border-color 0.35s var(--atar-ease), box-shadow 0.35s var(--atar-ease);
}

.atar-faq .accrodion.active {
  border-color: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.5);
  box-shadow: 0 18px 40px -28px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.45);
}

.atar-faq .accrodion-title {
  cursor: pointer;
  padding: 22px 26px;
}

.atar-faq .accrodion-title h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--procounsel-heading-font, serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--atar-navy);
}

.atar-faq .accrodion-title__icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.atar-faq .accrodion-title__icon::before,
.atar-faq .accrodion-title__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--atar-gold);
  transition: transform 0.35s var(--atar-ease);
}

.atar-faq .accrodion-title__icon::after {
  transform: rotate(90deg);
}

.atar-faq .active .accrodion-title__icon::after {
  transform: rotate(0deg);
}

.atar-faq .accrodion-content .inner {
  padding: 0 26px 24px;
}

.atar-faq .accrodion-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--procounsel-text, #838790);
}

/* --------------------------------------------------- 11. Form treatment */
.atar-form input,
.atar-form textarea {
  transition: border-color 0.3s var(--atar-ease), box-shadow 0.3s var(--atar-ease);
}

.atar-form input:focus,
.atar-form textarea:focus {
  border-color: var(--atar-gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.16);
  outline: none;
}

/* Visible keyboard focus everywhere else, which the theme removed. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--atar-gold);
  outline-offset: 3px;
}

/* --------------------------------------------------- 12. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .atar-progress,
  .procounsel-btn::after {
    display: none;
  }

  .main-slider-one__bg,
  .owl-item.active .main-slider-one__bg {
    transform: none;
    transition: none;
  }

  .atar-process__step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sec-title__tagline::before,
  .is-drawn .atar-icon--draw > * {
    animation: none;
  }

  .atar-icon--draw path,
  .atar-icon--draw line,
  .atar-icon--draw rect,
  .atar-icon--draw circle,
  .atar-icon--draw polyline {
    stroke-dashoffset: 0;
  }
}

/* Collapsed by default before the script runs, so no answers flash open. */
.atar-faq .accrodion-content {
  overflow: hidden;
}

.atar-faq .accrodion:not(.active) .accrodion-content {
  height: 0;
}

.atar-faq .accrodion-title {
  user-select: none;
}

/* --------------------------------------------------- 13. Social icon row */
/* All four socials are inline SVG now. Previously Facebook and YouTube came
   from the icon font while Instagram and LinkedIn were SVG, so they sat at
   different sizes and baselines — and the font had no glyph for the latter
   two at all, which is why they showed as empty boxes. */
.main-footer__info__social,
.mobile-nav__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.main-footer__info__social a,
.mobile-nav__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(var(--procounsel-base-rgb, 197, 160, 80), 0.45);
  border-radius: 50%;
  color: var(--atar-gold);
  background-color: transparent;
  transition: background-color 0.35s var(--atar-ease),
              border-color 0.35s var(--atar-ease),
              color 0.35s var(--atar-ease),
              transform 0.35s var(--atar-ease);
}

.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(--atar-gold);
  border-color: var(--atar-gold);
  color: #fff;
  transform: translateY(-3px);
}

.atar-social-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 18px;
}

@media (max-width: 575px) {
  .main-footer__info__social a,
  .mobile-nav__social a {
    width: 40px;
    height: 40px;
  }
}