/* ============================================================
   AMIN VENTURES — site-interactions.css
   Pixel-perfect match to www.amin-ventures.com
   ============================================================ */

/* Keep the first viewport flush with the browser edge, including pull-down overscroll. */
html,
body,
#root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  background: #000 !important;
}

html,
body {
  overscroll-behavior-y: none;
}

body > #root > div:first-child,
body > #root > div:first-child > section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

[data-loc="src/web/pages/Home.tsx:188"],
[data-loc="src/web/pages/Home.tsx:191"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #000 !important;
}

[data-loc="src/web/pages/Home.tsx:191"] {
  height: 100vh !important;
  min-height: 100vh !important;
}

/* ============================================================
   GLOBAL BUTTON / LINK HOVER — micro-hop
   ============================================================ */
:where(
  button,
  [role="button"],
  a[href],
  a.btn-primary,
  a.btn-secondary,
  a[class*="btn"],
  a[class*="button"],
  [onclick],
  .btn-primary,
  .btn-secondary,
  .footer-social-link
) {
  transition:
    transform 100ms ease-out,
    box-shadow 100ms ease-out,
    opacity 100ms ease-out,
    background-color 100ms ease-out,
    color 100ms ease-out;
  transform: translateY(0) scale(1);
  transform-origin: center;
}

@keyframes av-hover-hop-return {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-2px) scale(1.012); }
  58%  { transform: translateY(-1px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}

@media (hover: hover) {
  :where(
    button,
    [role="button"],
    a[href],
    a.btn-primary,
    a.btn-secondary,
    a[class*="btn"],
    a[class*="button"],
    [onclick],
    .btn-primary,
    .btn-secondary,
    .footer-social-link
  ):hover {
    animation: av-hover-hop-return 0.1s ease-out both;
  }

  :where(
    button,
    [role="button"],
    a[href],
    a.btn-primary,
    a.btn-secondary,
    a[class*="btn"],
    a[class*="button"],
    [onclick],
    .btn-primary,
    .btn-secondary
  ):hover,
  :where(
    button,
    [role="button"],
    a[href],
    a.btn-primary,
    a.btn-secondary,
    a[class*="btn"],
    a[class*="button"],
    [onclick],
    .btn-primary,
    .btn-secondary
  ):hover :where(span, p, div, strong, em) {
    color: #c9a84c !important;
    font-weight: 700 !important;
  }
}

/* Buttons: always white text (outside nav) */
:where(
  button,
  [role="button"],
  a.btn-primary,
  a.btn-secondary,
  a.btn-dark,
  a[class*="btn"],
  a[class*="button"],
  .btn-primary,
  .btn-secondary,
  .btn-dark
):not(nav *),
:where(
  button,
  [role="button"],
  a.btn-primary,
  a.btn-secondary,
  a.btn-dark,
  a[class*="btn"],
  a[class*="button"],
  .btn-primary,
  .btn-secondary,
  .btn-dark
):not(nav *) :where(span, p, div, strong, em) {
  color: #ffffff !important;
}

@media (hover: hover) {
  :where(
    button,
    [role="button"],
    a.btn-primary,
    a.btn-secondary,
    a.btn-dark,
    a[class*="btn"],
    a[class*="button"],
    .btn-primary,
    .btn-secondary,
    .btn-dark
  ):not(nav *):hover,
  :where(
    button,
    [role="button"],
    a.btn-primary,
    a.btn-secondary,
    a.btn-dark,
    a[class*="btn"],
    a[class*="button"],
    .btn-primary,
    .btn-secondary,
    .btn-dark
  ):not(nav *):hover :where(span, p, div, strong, em) {
    color: #c9a84c !important;
    font-weight: 700 !important;
  }
}

/* ============================================================
   ICON / SYMBOL HOP EFFECT
   ============================================================ */
:where(.footer-social-link, .team-linkedin-symbol, a[aria-label][href]) {
  transition:
    transform 100ms ease-out,
    opacity 100ms ease-out,
    color 100ms ease-out;
  transform: translateY(0) scale(1);
  transform-origin: center;
  will-change: transform;
}

:where(a[href], button, [role="button"], [onclick]) > :where(svg, img, [class*="icon"], [class*="symbol"]) {
  transform: translateY(0) scale(1);
  transform-origin: center;
  will-change: transform;
}

@keyframes av-symbol-hop-return {
  0%   { transform: translateY(0) scale(1); }
  24%  { transform: translateY(-2px) scale(1); }
  55%  { transform: translateY(-1px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@media (hover: hover) {
  :where(.footer-social-link, .team-linkedin-symbol, a[aria-label][href]):hover {
    animation: av-symbol-hop-return 0.1s ease-out both !important;
    opacity: 0.9;
    z-index: 5;
  }

  :where(a[href], button, [role="button"], [onclick]):hover > :where(svg, img, [class*="icon"], [class*="symbol"]) {
    animation: av-symbol-hop-return 0.1s ease-out both !important;
  }

  nav[data-loc="src/web/components/Navbar.tsx:123"] :where(a[href], button, [role="button"], [onclick]):hover > :where(svg, img, [class*="icon"], [class*="symbol"]) {
    animation: none !important;
    transform: none !important;
    transform-origin: center !important;
  }
}

/* Future Developments should keep the production card/filter behavior. */
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) :where(
  button,
  [role="button"],
  a[href],
  [onclick]
),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) :where(
  button,
  [role="button"],
  a[href],
  [onclick]
) :where(span, p, div, strong, em, img, svg) {
  animation: none !important;
  transform: none !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(255, 255, 255)"],
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(255, 255, 255)"]:hover {
  color: rgb(255, 255, 255) !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(29, 29, 31)"],
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(29, 29, 31)"]:hover {
  color: rgb(29, 29, 31) !important;
  font-weight: 400 !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(199, 199, 204)"],
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(199, 199, 204)"]:hover {
  color: rgb(199, 199, 204) !important;
  font-weight: 400 !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(13, 148, 136)"],
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) button[style*="color: rgb(13, 148, 136)"]:hover {
  color: rgb(13, 148, 136) !important;
  font-weight: 400 !important;
}

@media (hover: hover) {
  #root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) :where(
    button,
    [role="button"],
    a[href],
    [onclick]
  ):hover,
  #root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) :where(
    button,
    [role="button"],
    a[href],
    [onclick]
  ):hover :where(span, p, div, strong, em, img, svg) {
    animation: none !important;
    transform: none !important;
  }

  #root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:61"]:hover > img {
    transform: scale(1.04) !important;
  }
}

nav[data-loc="src/web/components/Navbar.tsx:123"] :where(a, button, span, img, svg, .nav-link, [role="button"]):hover,
nav[data-loc="src/web/components/Navbar.tsx:123"] :where(a, button, span, img, svg, .nav-link, [role="button"]):hover * {
  animation: none !important;
  transform: none !important;
}

/* ============================================================
   PHONE LINK HOP
   ============================================================ */
a[href^="tel:"] span:first-child,
a[href*="bbb.org"] img {
  display: inline-block;
  transition:
    transform 100ms ease-out,
    opacity 100ms ease-out;
  transform: translateY(0) scale(1);
  transform-origin: center;
  will-change: transform;
}

@keyframes av-phone-ring-jump {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  10%  { transform: translate3d(-1px, -2px, 0) rotate(-12deg) scale(1.06, 0.96); }
  20%  { transform: translate3d(1px, -2px, 0) rotate(10deg) scale(0.98, 1.04); }
  30%  { transform: translate3d(-1px, -2px, 0) rotate(-9deg) scale(1.04, 0.98); }
  40%  { transform: translate3d(1px, -2px, 0) rotate(8deg) scale(1); }
  55%  { transform: translate3d(-1px, -1px, 0) rotate(-6deg) scale(1.02); }
  70%  { transform: translate3d(1px, -1px, 0) rotate(4deg) scale(1); }
  85%  { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (hover: hover) {
  a[href^="tel:"]:hover span:first-child,
  a[href*="bbb.org"]:hover img {
    animation: av-symbol-hop-return 0.1s ease-out both !important;
    opacity: 0.9;
  }

  a[href^="tel:"]:hover span:first-child {
    animation: av-phone-ring-jump 0.1s ease-out both !important;
    opacity: 1 !important;
    transform-origin: 50% 15%;
    filter: drop-shadow(0 2px 3px rgba(19, 40, 71, 0.22));
  }
}

/* ============================================================
   GLOBAL TEXT COLOR — white across the website
   ============================================================ */
body,
body :where(h1, h2, h3, h4, h5, h6, p, span, a, li, label, small, strong, em, button, div) {
  color: #ffffff !important;
}

body svg :where(text, tspan) {
  fill: #ffffff !important;
}

body :where(input, textarea, select, option) {
  color: #111111 !important;
}

body :where(input, textarea)::placeholder {
  color: rgba(17, 17, 17, 0.52) !important;
}

@media (max-width: 768px) {
  [data-loc="src/web/pages/Home.tsx:424"] {
    width: calc(100vw - 20px) !important;
  }

  #reels-scroll[data-loc="src/web/pages/Home.tsx:447"] {
    padding-inline: 10px !important;
  }
}

/* Our Team LinkedIn symbols: force AV gold */
a.team-linkedin-symbol,
a.team-linkedin-symbol svg,
.team-linkedin-symbol,
.team-linkedin-symbol svg {
  color: #c9a84c !important;
  fill: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
}

[data-loc="src/web/pages/Team.tsx:225"] {
  color: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
}

/* Footer parity: use the Home footer style on every page. */
.av-contact-footer {
  background: #ffffff !important;
  color: #111111 !important;
}

.av-contact-footer :where(p, a, span, label, button, input, textarea, div, strong) {
  color: inherit !important;
}

.av-contact-footer .av-footer-heading,
.av-contact-footer .av-footer-contact-under-logo .av-footer-heading {
  color: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
}

.av-contact-footer .av-footer-link-list a,
.av-contact-footer .av-footer-contact a,
.av-contact-footer .av-footer-contact p,
.av-contact-footer .av-footer-address-toggle,
.av-contact-footer .av-footer-contact-item span,
.av-contact-footer .av-footer-contact-item strong,
.av-contact-footer .av-footer-back-top {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.av-contact-footer .av-footer-link-list a:hover,
.av-contact-footer .av-footer-contact a:hover,
.av-contact-footer .av-footer-address-toggle:hover,
.av-contact-footer .av-footer-contact a:hover span,
.av-contact-footer .av-footer-contact a:hover strong,
.av-contact-footer .av-footer-address-toggle:hover strong {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.av-contact-footer .av-footer-social {
  background: #ffffff !important;
  border-color: #6f6f6f !important;
  color: #6f6f6f !important;
  -webkit-text-fill-color: #6f6f6f !important;
}

.av-contact-footer .av-footer-social .av-icon-instagram {
  fill: none !important;
  stroke: currentColor !important;
}

.av-contact-footer .av-footer-social .av-icon-linkedin,
.av-contact-footer .av-footer-social .av-icon-facebook {
  fill: currentColor !important;
  stroke: none !important;
}

.av-contact-footer .av-footer-social:hover {
  background: #061f49 !important;
  border-color: #061f49 !important;
  color: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(6, 31, 73, 0.22) !important;
}

.av-contact-footer .av-footer-social:hover .av-icon-instagram {
  fill: none !important;
  stroke: #c9a84c !important;
}

.av-contact-footer .av-footer-social:hover .av-icon-linkedin,
.av-contact-footer .av-footer-social:hover .av-icon-facebook {
  fill: #c9a84c !important;
  stroke: none !important;
}

.av-contact-footer .av-footer-field-stack :where(input, textarea) {
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.av-contact-footer .av-footer-field-stack :where(input, textarea)::placeholder {
  color: rgba(17, 17, 17, 0.56) !important;
  -webkit-text-fill-color: rgba(17, 17, 17, 0.56) !important;
}

.av-contact-footer .av-footer-form-actions button {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.av-contact-footer .av-footer-form-actions button:hover {
  background: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  transform: translateY(-1px) !important;
}

.av-contact-footer .av-footer-bottom p {
  color: rgba(17, 17, 17, 0.58) !important;
  -webkit-text-fill-color: rgba(17, 17, 17, 0.58) !important;
}

.av-contact-footer .av-footer-back-top:hover {
  color: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
  border-color: #111111 !important;
  transform: translateY(-2px) !important;
}

/* Portfolio card polish */
#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:46"] {
  margin: 0 28px 14px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:57"] {
  border-top: 0 !important;
  padding-top: 18px !important;
}

/* Portfolio hover should not change font weights or text colors. */
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover,
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover :where(h3, p, span, div, strong, em) {
  animation: none !important;
}

/* Global scroll recovery: keep vertical page scrolling available. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#root {
  min-height: 100vh !important;
  overflow: visible !important;
}

#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:32"] {
  color: #1d1d1f !important;
  font-weight: 700 !important;
}

#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:40"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:58"] {
  color: #6e6e73 !important;
  font-weight: 400 !important;
}

#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:70"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:76"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:82"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:91"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:97"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:102"] {
  color: #86868b !important;
  font-weight: 400 !important;
}

#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:71"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:77"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:83"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:92"],
#root:has(a[href^="/portfolio/"]) a[href^="/portfolio/"]:hover [data-loc="src/web/pages/Portfolio.tsx:98"] {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

#root:has(a[href^="/portfolio/"]) .portfolio-status-listed {
  color: #439288 !important;
  -webkit-text-fill-color: #439288 !important;
  font-weight: 600 !important;
}

#root:has(a[href^="/portfolio/"]) .portfolio-status-sold {
  color: #c9a84c !important;
  -webkit-text-fill-color: #c9a84c !important;
  font-weight: 600 !important;
}

#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:109"] {
  color: #439288 !important;
  -webkit-text-fill-color: #439288 !important;
  font-weight: 400 !important;
}

#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:154"][style*="background: rgb(29, 29, 31)"],
#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:154"][style*="background: rgb(29, 29, 31)"]:hover,
#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:154"][style*="background: #1d1d1f"],
#root:has(a[href^="/portfolio/"]) [data-loc="src/web/pages/Portfolio.tsx:154"][style*="background: #1d1d1f"]:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button :where(span, p, div, strong, em) {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  font-weight: 500 !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:hover,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus-visible,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:hover :where(span, p, div, strong, em),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus-visible :where(span, p, div, strong, em) {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  font-weight: 700 !important;
}

#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:hover,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus-visible,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:active,
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button :where(span, p, div, strong, em),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:hover :where(span, p, div, strong, em),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus :where(span, p, div, strong, em),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:focus-visible :where(span, p, div, strong, em),
#root:has([data-loc="src/web/pages/FutureDevelopments.tsx:197"]) [data-loc="src/web/pages/FutureDevelopments.tsx:197"] button:active :where(span, p, div, strong, em) {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  font-weight: 500 !important;
}

[data-loc="src/web/pages/Services.tsx:149"] {
  display: none !important;
}