/* Vertex Connect extras: footer social icons, working contact-form option cards,
   form status notice. Built only on the site's existing design tokens. */

/* Footer social icons */
.vc-social-label{margin-top:1.75rem;font-family:var(--font-mono);font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.14em;color:color-mix(in oklab,var(--primary-foreground) 55%,transparent)}
.vc-social{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.75rem;padding:0;list-style:none}
.vc-social a{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid color-mix(in oklab,var(--primary-foreground) 22%,transparent);border-radius:var(--radius);color:color-mix(in oklab,var(--primary-foreground) 75%,transparent);transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.vc-social a:hover{color:var(--primary-foreground);border-color:var(--brand-green-bright);background-color:color-mix(in oklab,var(--brand-green-bright) 16%,transparent)}
.vc-social a:focus-visible{outline:2px solid var(--brand-green-bright);outline-offset:2px;color:var(--primary-foreground)}
.vc-social svg{width:1.125rem;height:1.125rem}

/* Contact form: selectable "What brings you here?" cards (same look as the original buttons) */
.vc-intent{position:relative;display:block;cursor:pointer}
.vc-intent input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.vc-intent-box{display:block;height:100%;padding:1rem;text-align:left;border:1px solid var(--border);background-color:var(--surface);transition:border-color .15s ease,background-color .15s ease}
.vc-intent:hover .vc-intent-box{border-color:var(--border-strong)}
.vc-intent input:checked + .vc-intent-box{border-color:var(--brand-green);background-color:var(--secondary)}
.vc-intent input:focus-visible + .vc-intent-box{outline:2px solid var(--brand-green);outline-offset:2px}

/* Honeypot: hidden from people, visible to bots */
.vc-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Form status notice */
.vc-notice{margin-bottom:2.5rem;padding:1rem 1.25rem;border:1px solid var(--border);border-left-width:3px;background-color:var(--surface);font-size:.875rem;line-height:1.5;color:var(--foreground)}
.vc-notice strong{display:block;margin-bottom:.125rem;font-weight:600;color:var(--primary)}
.vc-notice--ok{border-left-color:var(--brand-green)}
.vc-notice--err{border-left-color:var(--accent)}

/* ---------- Header: Services dropdown + mobile menu ---------- */
.vc-dd{position:relative;display:flex;align-items:center;gap:.125rem}
.vc-dd-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;cursor:pointer;color:color-mix(in oklab,var(--foreground) 80%,transparent);transition:color .15s ease}
.vc-dd-toggle:hover,.vc-dd.is-open .vc-dd-toggle{color:var(--primary)}
.vc-dd-toggle svg{transition:transform .15s ease}
.vc-dd.is-open .vc-dd-toggle svg{transform:rotate(180deg)}
.vc-dd-toggle:focus-visible,.vc-menu-btn:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}
.vc-dd-panel{position:absolute;left:-1rem;top:100%;z-index:60;display:none;min-width:19rem;padding-top:1.5rem}
.vc-dd.is-open .vc-dd-panel{display:block}
.vc-dd-card{padding:.5rem;border:1px solid var(--border);border-top:2px solid var(--brand-green);background-color:var(--surface);box-shadow:0 14px 32px -14px color-mix(in oklab,var(--primary-deep) 35%,transparent)}
.vc-dd-card a{display:block;padding:.7rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--foreground);border-radius:var(--radius);transition:background-color .15s ease,color .15s ease}
.vc-dd-card a:hover,.vc-dd-card a:focus-visible{background-color:var(--secondary);color:var(--primary);outline:none}
.vc-dd-card .vc-dd-all{margin-bottom:.375rem;padding-bottom:.85rem;border-bottom:1px solid var(--border);border-radius:0;font-weight:600;color:var(--primary)}
.vc-dd-card .vc-dd-all:hover{background-color:transparent;color:var(--brand-green)}

/* Mobile menu */
.vc-menu-btn{cursor:pointer;color:var(--foreground)}
@media (max-width:63.999rem){.vc-menu-btn{display:inline-flex;align-items:center;justify-content:center}}
.vc-menu-btn .vc-icon-close{display:none}
.vc-menu-btn.is-open .vc-icon-open{display:none}
.vc-menu-btn.is-open .vc-icon-close{display:block}
.vc-mobile{border-top:1px solid var(--border);background-color:var(--surface);max-height:calc(100vh - 4.5rem);overflow-y:auto}
.vc-mobile[hidden]{display:none}
.vc-mobile-inner{padding-top:.5rem;padding-bottom:1.5rem}
.vc-mobile a{display:block;padding:.85rem 0;border-bottom:1px solid var(--border);font-size:.9375rem;font-weight:500;color:var(--foreground)}
.vc-mobile a:hover{color:var(--primary)}
.vc-mobile-sub{margin:.25rem 0 .5rem .25rem;padding-left:1rem;border-left:2px solid var(--brand-green)}
.vc-mobile-sub a{padding:.65rem 0;font-size:.875rem;font-weight:400;color:color-mix(in oklab,var(--foreground) 85%,transparent)}
.vc-mobile-sub a:last-child{border-bottom:0}
.vc-mobile .vc-mobile-cta{display:block;margin-top:1.25rem;padding:.9rem 1.25rem;border:0;border-radius:var(--radius);background-color:var(--accent);color:var(--accent-foreground);font-size:.875rem;font-weight:600;text-align:center}
.vc-mobile .vc-mobile-cta:hover{color:var(--accent-foreground);filter:brightness(.96)}
@media (min-width:64rem){.vc-mobile,.vc-mobile[hidden]{display:none!important}}

/* Keep the header CTA on one line; tighten nav spacing on narrow desktops so it always fits */
header a[href$="/contact/"]{white-space:nowrap;flex-shrink:0}
@media (min-width:64rem) and (max-width:75rem){header nav[aria-label="Primary"]{gap:1.25rem}}