/* ==========================================================================
   AVRA - link states and hover effects

   Hover is gated on the .avra-hover body class set from Appearance > AVRA Site.
   ========================================================================== */

/* ---- Link state reset ----------------------------------------------------
   Hello Elementor colours bare links and their :focus / :active states with its
   own accent - that is the pink flash on click. Every interactive element in
   this design takes its colour from its own component, so the theme states are
   neutralised once here rather than patched case by case. */

.avra-header__navwrap a,
.avra-header__navwrap a:hover,
.avra-header__navwrap a:focus,
.avra-header__navwrap a:active,
.avra-header__navwrap a:visited,
.avra-drawer a,
.avra-drawer a:hover,
.avra-drawer a:focus,
.avra-drawer a:active,
.avra-footer__col .elementor-nav-menu--main .elementor-item,
.avra-footer__col .elementor-nav-menu--main .elementor-item:hover,
.avra-footer__col .elementor-nav-menu--main .elementor-item:focus,
.avra-footer__col .elementor-nav-menu--main .elementor-item:active,
.avra-projects__slide, .avra-projects__slide:hover, .avra-projects__slide:focus, .avra-projects__slide:active,
.avra-sectors__card, .avra-sectors__card:hover, .avra-sectors__card:focus, .avra-sectors__card:active,
.avra-news__card, .avra-news__card:hover, .avra-news__card:focus, .avra-news__card:active,
.avra-socials a, .avra-socials a:hover, .avra-socials a:focus, .avra-socials a:active,
.avra-footer__contact a, .avra-footer__contact a:hover, .avra-footer__contact a:focus, .avra-footer__contact a:active {
  color: inherit;
}

/* Keyboard focus stays visible - only the mouse-click highlight is removed. */
.avra-header__navwrap a:focus-visible,
.avra-footer__col .elementor-item:focus-visible,
.avra-projects__slide:focus-visible,
.avra-sectors__card:focus-visible,
.avra-news__card:focus-visible,
.avra-socials a:focus-visible,
.avra-btn:focus-visible,
.avra-arrow:focus-visible {
  outline: 2px solid var(--avra-accent);
  outline-offset: 3px;
}

/* ---- Hover -------------------------------------------------------------- */

.avra-hover .avra-header__navwrap .elementor-item {
  position: relative;
  transition: opacity .25s ease;
}
.avra-hover .avra-header__navwrap .elementor-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.avra-hover .avra-header__navwrap .elementor-item:hover::after,
.avra-hover .avra-header__navwrap .elementor-item-active::after { transform: scaleX(1); }

.avra-hover .avra-footer__col .elementor-nav-menu--main .elementor-item {
  transition: opacity .25s ease, transform .25s ease;
}
.avra-hover .avra-footer__col .elementor-nav-menu--main .elementor-item:hover {
  opacity: .55;
  transform: translateX(2px);
}

.avra-hover .avra-projects__title,
.avra-hover .avra-sectors__title,
.avra-hover .avra-news__title { transition: opacity .3s ease; }
.avra-hover .avra-projects__slide:hover .avra-projects__title,
.avra-hover .avra-sectors__card:hover .avra-sectors__title,
.avra-hover .avra-news__card:hover .avra-news__title { opacity: .55; }

.avra-hover .avra-arrow { transition: opacity .25s ease, transform .25s ease; }
.avra-hover .avra-arrow:not([disabled]):hover { transform: scale(1.06); opacity: 1; }

.avra-hover .avra-socials a { transition: opacity .25s ease, transform .25s ease; }
.avra-hover .avra-socials a:hover { opacity: .55; transform: translateY(-2px); }

.avra-hover .avra-footer__contact a { transition: opacity .25s ease; }
.avra-hover .avra-footer__contact a:hover { opacity: .6; }

/* Image zoom is already on the cards; hold it steady when hover is switched off. */
body:not(.avra-hover) .avra-projects__slide:hover .avra-projects__figure img,
body:not(.avra-hover) .avra-sectors__card:hover .avra-sectors__figure img,
body:not(.avra-hover) .avra-news__card:hover .avra-news__figure img { transform: none; }

/* Marquee autoplay switch (Appearance > AVRA Site) */
body:not(.avra-marquee-on) .avra-marquee__track { animation: none; }
body:not(.avra-marquee-on) .avra-marquee__vp { overflow-x: auto; scrollbar-width: none; }
body:not(.avra-marquee-on) .avra-marquee__vp::-webkit-scrollbar { display: none; }

/* button fixes */

/* Hello Elementor paints bare <button> elements - including :hover and :focus -
   with its own accent. That is the pink square behind the carousel arrows. The
   earlier reset covered border and shadow but not background. */
button.avra-arrow,
button.avra-arrow:hover,
button.avra-arrow:focus,
button.avra-arrow:active,
button.avra-arrow:focus-visible,
button.avra-arrow[disabled] {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
button.avra-arrow:focus { outline: none; }
button.avra-arrow:focus-visible { outline: 2px solid var(--avra-accent); outline-offset: 3px; }

/* The section buttons are Elementor button widgets, so they render as
   .elementor-button and never matched the .avra-btn hover rules. */
body.avra-hover .elementor-element-abbtn .elementor-button,
body.avra-hover .elementor-element-hdrcta .elementor-button,
body.avra-hover .elementor-element-ctabtn .elementor-button {
  transition: background-color .28s ease, color .28s ease, opacity .28s ease;
}
body.avra-hover .elementor-element-abbtn .elementor-button:hover,
body.avra-hover .elementor-element-abbtn .elementor-button:focus,
body.avra-hover .elementor-element-hdrcta .elementor-button:hover,
body.avra-hover .elementor-element-hdrcta .elementor-button:focus {
  background-color: var(--avra-dust) !important;
  color: var(--avra-umbra) !important;
}
body.avra-hover .elementor-element-ctabtn .elementor-button:hover,
body.avra-hover .elementor-element-ctabtn .elementor-button:focus {
  background-color: var(--avra-umbra) !important;
  color: #FFFFFF !important;
}

/* Same leak on the newsletter submit and any Elementor button anywhere on the site. */
.elementor-button:focus,
.elementor-button:active { box-shadow: none; }

/* ---- global bare-button reset -------------------------------------------
   Hello Elementor paints bare <button> on :hover/:focus/:active. Neutralise the
   shadow/outline globally, but leave background-color alone: each family sets
   its own (white tiles, transparent arrows) and a blanket value overrode them. */
button[class^='avra-']:focus,
button[class*=' avra-']:focus,
button[class^='avra-']:active,
button[class*=' avra-']:active {
  box-shadow: none;
  outline: none;
}
button[class^='avra-']:focus-visible,
button[class*=' avra-']:focus-visible {
  outline: 2px solid var(--avra-accent);
  outline-offset: 2px;
}

/* ---- button hover: fill sweep -------------------------------------------
   Background wipes in from the left, label flips to the contrast colour.
   Gated on .avra-hover (Appearance > AVRA Site). The sweep is a pseudo-element
   so it never affects layout, and sits behind the label via z-index. */
.avra-hover .elementor-button,
.avra-hover .avra-btn,
.avra-hover .avra-plocation__btn,
.avra-hover .avra-pact--text,
.avra-hover .avra-pact--share {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s ease;
}
.avra-hover .elementor-button::before,
.avra-hover .avra-btn::before,
.avra-hover .avra-plocation__btn::before,
.avra-hover .avra-pact--text::before,
.avra-hover .avra-pact--share::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--avra-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.avra-hover .elementor-button:hover::before,
.avra-hover .avra-btn:hover::before,
.avra-hover .avra-plocation__btn:hover::before,
.avra-hover .avra-pact--text:hover::before,
.avra-hover .avra-pact--share:hover::before {
  transform: scaleX(1);
}
.avra-hover .elementor-button:hover,
.avra-hover .avra-btn:hover,
.avra-hover .avra-plocation__btn:hover,
.avra-hover .avra-pact--text:hover,
.avra-hover .avra-pact--share:hover {
  color: #FFFFFF !important;
}

/* dark buttons sweep to sand instead, so the label stays readable */
.avra-hover .avra-ctform .elementor-button::before,
.avra-hover .avra-abcta .elementor-button::before,
.avra-hover .avra-cta .elementor-button::before { background: var(--avra-accent); }

/* the submit button is already umbra; sweep it to accent and keep white text */
.avra-hover .avra-ctform button.elementor-button:hover { color: #FFFFFF !important; }

/* nav links keep the existing underline treatment - no sweep on text links */
.avra-hover .elementor-nav-menu .elementor-item::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  .avra-hover .elementor-button::before,
  .avra-hover .avra-btn::before,
  .avra-hover .avra-plocation__btn::before { transition: none; }
}

/* The button widget wrapper was painting the white box while the <a> inside it
   is the real button (Figma 25502:1218 = 161x36). The sweep fills the <a>, so
   the wrapper's background showed as an unfilled frame on hover. Only the <a>
   should carry the button surface. */
.avra-header__cta { background-color: transparent !important; }
.avra-header__cta > .elementor-button-wrapper { line-height: 0; }

/* any other button widget that paints its own wrapper gets the same treatment */
.elementor-widget-button { background-color: transparent !important; }