/* BudgetByte — additions on top of the original compiled stylesheet (site.css). */

/* DM Sans, self-hosted (was loaded from Google Fonts, which held up the first paint).
   Variable font: every weight in one file. Licence: assets/fonts/OFL.txt */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-opsz-italic.woff2) format('woff2'); }

/* Skip link for keyboard users */
.bb-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; border-radius: 0 0 .5rem 0; }
.bb-skip:focus { left: 0; }

/* Scroll-in animation (content stays visible if JavaScript is off) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Services dropdown (desktop) */
.bb-dd { position: relative; }
.bb-dd-panel { position: absolute; left: 50%; top: calc(100% + .75rem); transform: translateX(-50%); min-width: 17rem; padding: .375rem; border-radius: .75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--popover)); box-shadow: 0 12px 32px rgb(0 0 0 / .45); z-index: 60; }
.bb-dd-panel[hidden] { display: none; }
.bb-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.85rem; height: .85rem; } /* hover bridge */
.bb-dd-panel a { display: block; padding: .55rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground) / .85); transition: background .15s, color .15s; }
.bb-dd-panel a:hover, .bb-dd-panel a:focus-visible { background: hsl(var(--secondary)); color: hsl(var(--primary)); outline: none; }
.bb-dd-panel a[aria-current="page"] { color: hsl(var(--primary)); }
.bb-dd-panel a:first-child { border-bottom: 1px solid hsl(var(--border)); border-radius: .5rem .5rem 0 0; margin-bottom: .25rem; }

/* Mobile menu */
.bb-mobile { max-height: calc(100vh - 6rem); overflow-y: auto; }
.bb-mobile[hidden] { display: none; }
[data-menu-toggle] .bb-icon-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .bb-icon-open { display: none; }
[data-menu-toggle][aria-expanded="true"] .bb-icon-close { display: block; }

/* Testimonial carousel: native scroll-snap, JS adds arrows/dots */
.bb-carousel { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.bb-carousel::-webkit-scrollbar { display: none; }
.bb-carousel:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }
.bb-track > * { scroll-snap-align: start; }
[data-carousel="dots"] button { height: .5rem; border-radius: 9999px; width: .5rem; background: hsl(var(--primary) / .2); transition: all .3s; }
[data-carousel="dots"] button[aria-current="true"] { width: 1.5rem; background: hsl(var(--primary)); }

/* FAQ accordions (native <details>) */
details.bb-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 500; }
details.bb-acc > summary::-webkit-details-marker { display: none; }
details.bb-acc > summary > svg { transition: transform .2s; flex-shrink: 0; }
details.bb-acc[open] > summary > svg { transform: rotate(180deg); }
details.bb-acc > summary:hover { text-decoration: underline; }

/* Form messages + honeypot */
.bb-alert { border-radius: .75rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: .95rem; line-height: 1.5; }
.bb-alert a { text-decoration: underline; }
.bb-alert-ok { background: hsl(var(--primary) / .15); border: 1px solid hsl(var(--primary) / .5); color: hsl(var(--foreground)); }
.bb-alert-err { background: hsl(var(--destructive) / .15); border: 1px solid hsl(var(--destructive) / .6); color: hsl(var(--foreground)); }
[aria-invalid="true"] { border-color: hsl(var(--destructive)) !important; }
.bb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Keep form messages clear of the tall sticky header when the page scrolls to them */
[data-form-status] { scroll-margin-top: 7.5rem; }
@media (min-width: 640px) { [data-form-status] { scroll-margin-top: 9.5rem; } }
@media (min-width: 768px) { [data-form-status] { scroll-margin-top: 11.5rem; } }

/* Long call-to-action buttons wrap on small phones instead of being cut off */
@media (max-width: 480px) {
  main a.whitespace-nowrap, main button.whitespace-nowrap { white-space: normal; text-align: center; max-width: 100%; height: auto; min-height: 2.75rem; }
}

/* Header logo + "a VOX Group Business" endorsement line, right-aligned under "byte" */
.bb-brand { display: inline-flex; flex-direction: column; line-height: 1; }
.bb-brand img { display: block; }
.bb-endorse {
  align-self: flex-end;
  margin-right: 3.2%;           /* lines up with the right edge of the green bar */
  margin-top: -0.3em;           /* sit just under the descenders of "g" and "y" */
  font-weight: 500;
  font-size: .625rem;           /* 10px phones, 12px tablets, 13px desktop */
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: hsl(var(--foreground) / .6);
}
@media (min-width: 640px) { .bb-endorse { font-size: .75rem; } }
@media (min-width: 768px) { .bb-endorse { font-size: .8125rem; } }

/* Rate-card badges in brand olive (the old green-on-green badge failed the contrast check) */
.bb-badge-olive { background: hsl(var(--primary) / .18); color: hsl(74 55% 62%); }

/* Contrast fixes (WCAG AA) for a few elements carried over from the original design */
.bg-primary .bg-primary-foreground\/20.text-primary-foreground { background-color: hsl(0 0% 100% / .3); }  /* badges on olive bands */
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground)); }                                      /* body text on olive bands */
.bb-btn-teal { background-color: #0f766e; color: #fff; }
.bb-btn-teal:hover { background-color: #115e59; }
.bb-btn-danger { background-color: #b91c1c; color: #fff; }
.bb-btn-danger:hover { background-color: #991b1b; }

/* Utility missing from the compiled stylesheet (used by in-text links) */
.underline { text-decoration-line: underline; }