/* Additions on top of site.css (the compiled Tailwind CSS from the original build).
   site.css only contains the utility classes the old React site used, so new components are styled here. */

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
header.sticky { top: var(--promo-h, 0px); }

/* Skip link */
.sr-only:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100; width: auto; height: auto; clip: auto; margin: 0;
  padding: .75rem 1rem; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 700; border-radius: .5rem; }

/* Services dropdown (desktop): opens on hover, keyboard focus, or the chevron button */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd__link { padding-right: .5rem !important; }
.nav-dd__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 2.25rem; margin-left: -.25rem;
  border-radius: .375rem; color: hsl(var(--foreground)); }
.nav-dd__btn:hover { background: hsl(var(--muted)); }
.nav-dd__btn svg { transition: transform .2s; }
.nav-dd__panel { position: absolute; top: calc(100% + .5rem); left: 0; min-width: 17rem; padding: .5rem; border-radius: .75rem;
  display: grid; gap: .125rem; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s; z-index: 60; }
.nav-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; } /* hover bridge */
.nav-dd:hover .nav-dd__panel, .nav-dd:focus-within .nav-dd__panel, .nav-dd.is-open .nav-dd__panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.nav-dd:hover .nav-dd__btn svg, .nav-dd.is-open .nav-dd__btn svg { transform: rotate(180deg); }
.nav-dd__item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .5rem;
  font: 600 .9rem/1.2 var(--font-heading, Montserrat, sans-serif); color: hsl(var(--foreground)); white-space: nowrap; }
.nav-dd__item:hover, .nav-dd__item:focus-visible { background: hsl(var(--muted)); outline: none; }
.nav-dd__item.is-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.nav-dd__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; flex-shrink: 0; }
.nav-dd__all { display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; padding: .6rem .75rem;
  border-top: 1px solid hsl(var(--border)); font-weight: 700; font-size: .85rem; color: hsl(var(--primary)); }
.nav-dd__all:hover { text-decoration: underline; }

/* Services sub-menu (mobile) */
.m-dd__row { display: flex; align-items: stretch; gap: .5rem; }
.m-dd__link { flex: 1; }
.m-dd__btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; border-radius: .375rem;
  background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.m-dd__btn svg { transition: transform .2s; }
.m-dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-dd__list { display: grid; gap: .25rem; margin: .25rem 0 .25rem 1rem; padding-left: .75rem; border-left: 2px solid hsl(var(--yellow)); }
.m-dd__item { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: .375rem; font-weight: 600; color: hsl(var(--foreground)); }
.m-dd__item:hover { background: hsl(var(--muted)); }
.m-dd__item.is-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* FAQ chevron */
[data-faq] button[aria-expanded="true"] > svg { transform: rotate(180deg); }

/* Before / after sliders */
[data-ba] { touch-action: pan-y; }
[data-ba]:focus-visible { outline: 3px solid hsl(var(--yellow)); outline-offset: 3px; }
[data-ba] .border-3 { border-width: 3px; }

/* Deal popup */
/* Same measurements as the original site's dialog: 448px wide, 24px padding, 16px gap between blocks,
   edge-to-edge with square corners on phones, rounded from 640px up. */
.at-modal { position: fixed; inset: 0; z-index: 80; }
.at-modal__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .8); animation: at-fade .2s ease-out; }
.at-modal__panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 28rem;
  max-height: 100vh; overflow-y: auto; display: grid; gap: 1rem; padding: 1.5rem;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  animation: at-pop .2s ease-out; }
@media (min-width: 640px) { .at-modal__panel { border-radius: .5rem; } }
.at-modal__head { display: flex; flex-direction: column; gap: .375rem; }
.at-modal__head h2, .at-modal__head p { margin: 0; }
.at-modal__head h2 { line-height: 2rem; }
.at-modal__submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 3rem; padding: .5rem 1rem;
  border-radius: .375rem; font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; transition: background-color .15s; }
.at-modal__small { margin: .25rem 0 0; font-size: 11px; line-height: 1.5; }
.at-modal__x { position: absolute; right: 1rem; top: 1rem; display: inline-flex; padding: 0; border-radius: .125rem; opacity: .7;
  color: hsl(var(--foreground)); transition: opacity .15s; }
.at-modal__x:hover { opacity: 1; }
.at-modal__x:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.at-input { display: flex; height: 2.5rem; width: 100%; border-radius: .375rem; border: 1px solid hsl(var(--input));
  background: hsl(var(--background)); padding: .5rem .75rem; font-size: 1rem; line-height: 1.5rem; color: hsl(var(--foreground)); }
.at-input::placeholder { color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { .at-input { font-size: .875rem; line-height: 1.25rem; } }
.at-input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
@keyframes at-fade { from { opacity: 0; } }
@keyframes at-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }

/* Toast */
.at-toast { position: fixed; z-index: 90; left: 50%; bottom: 5rem; transform: translateX(-50%); max-width: calc(100vw - 2rem);
  background: hsl(var(--navy-dark)); color: #fff; padding: .875rem 1.25rem; border-radius: .5rem; font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25); border-left: 4px solid hsl(var(--yellow)); animation: at-fade .2s ease-out; }
.at-toast--error { border-left-color: hsl(var(--destructive)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Spam trap field: invisible to people, bots fill it in */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }