/* nexusbiz.tech — overrides layered on top of the design export.
 *
 * The export is inline-styled end to end and its elements carry no classes, so
 * every rule here keys on an id, a tag, or a data-* attribute the export already
 * uses, and every property that has to beat an inline style is !important —
 * that is the only way a stylesheet outranks style="".
 *
 * Rule: desktop must stay pixel-identical. Everything below lives inside a
 * max-width media query, or only touches something the export never styled.
 */

/* --------------------------------------------------------------- base */

/* The export ships no <title>, no focus styling and no scroll-margin. */
:root {
  --nx-accent: #9dc2ff;
  --nx-ink: #0a1636;
}

html {
  /* The nav is fixed at top:16px and ~60px tall; without this, an in-page
     anchor lands with the heading hidden underneath it. */
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The export animates via inline `animation:` and via JS-assigned
     style.animation, so this has to be broad and forceful. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Keyboard focus is invisible in the export — every interactive element is
   inline-styled with no :focus rule at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--nx-accent) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* Images replacing <image-slot> must never letterbox or overflow their frame. */
img { max-width: 100%; }

/* --------------------------------------------------------------- contact form */

#contact form { position: relative; }

[data-contact-submit] {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d3f8f, #0f1f45);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  box-shadow: 0 8px 18px rgba(15, 31, 69, 0.28);
}
[data-contact-submit]:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15, 31, 69, 0.34); }
[data-contact-submit]:active { transform: translateY(0); }
[data-contact-submit][disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* The honeypot. Kept out of the layout, out of the tab order and out of the
   accessibility tree — a screen-reader user must never be asked to fill it. */
[data-hp-field] {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

[data-contact-status] {
  margin: 12px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: #47548a;
}
[data-contact-status][data-tone='ok']   { color: #1d7a4f; font-weight: 600; }
[data-contact-status][data-tone='err']  { color: #b3261e; font-weight: 600; }

/* The export's placeholder colour (#5b6a8c on #e9edf5) sits at about 3.6:1 —
   under the 4.5:1 needed for text this size. */
#contact input::placeholder { color: #4a577d !important; opacity: 1 !important; }

/* --------------------------------------------------------------- footer */

#site-footer {
  border-top: 1px solid rgba(157, 194, 255, 0.18);
  margin-top: 34px;
  padding: 26px 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13px;
  color: rgba(215, 228, 255, 0.72);
}
#site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#site-footer a { color: rgba(215, 228, 255, 0.85); }
#site-footer a:hover { color: #ffffff; text-decoration: underline; }

/* --------------------------------------------------------------- narrow screens */

/* The fixed nav is max-width:720px holding a 44px logo, five labelled items and
   a "Get started" pill with white-space:nowrap. Below ~520px that pill is the
   piece that does not fit, and because it is nowrap it pushes the whole bar past
   the viewport — the logo and the pill both get clipped.

   The pill goes first: it points at #contact, which the Contact item beside it
   already does, and the hero has its own call to action. It is the one genuinely
   redundant element in the bar.

   :not([data-nav-item]) is load-bearing — the Contact nav item ALSO has
   href="#contact", so the bare attribute selector hides the real nav item too.
   The pill is the only #contact link that is not a nav item, which also means
   the nav indicator's querySelectorAll('[data-nav-item]') is unaffected. */
@media (max-width: 520px) {
  nav[aria-label='Main'] a[href='#contact']:not([data-nav-item]) { display: none !important; }
}

@media (max-width: 430px) {
  nav[aria-label='Main'] { padding: 0 6px !important; }
  nav[aria-label='Main'] [data-nav-item] { padding: 6px 2px !important; }
  nav[aria-label='Main'] [data-nav-item] span { font-size: 10.5px !important; margin-top: 3px !important; }
  nav[aria-label='Main'] [data-nav-item] svg { width: 19px !important; height: 19px !important; }
  /* Not :first-child — the first child of the bar is the <span> that draws the
     sliding indicator. The logo is the only link whose label ends in "home". */
  nav[aria-label='Main'] a[aria-label$='home'] { width: 38px !important; height: 38px !important; }
}

@media (max-width: 480px) {
  /* Hero: the robot canvas and the 112px top padding together push the headline
     below the fold on a short phone. */
  section[ref] > div:first-child,
  #dc-root section:first-of-type > div:first-child { padding-top: 92px !important; }

  /* Portfolio: the 330px card is centred in a ~360px viewport, so controls
     pinned 24px in sit on top of the card content. */
  #portfolio [data-carousel-prev] { left: 2px !important; width: 38px !important; height: 38px !important; }
  #portfolio [data-carousel-next] { right: 2px !important; width: 38px !important; height: 38px !important; }

  /* Gallery controls are pinned at a fixed top:200px, which is off-centre once
     the cards shrink. */
  #gallery [data-gallery-prev],
  #gallery [data-gallery-next] { top: 170px !important; width: 38px !important; height: 38px !important; }
  #gallery [data-gallery-prev] { left: 2px !important; }
  #gallery [data-gallery-next] { right: 2px !important; }

  /* The form's 38px side padding eats a third of a 320px content column. */
  #contact form { padding: 24px 20px 14px !important; }
  #contact > div:first-child { padding: 22px 20px !important; }

  /* The services strip indents its icon row 30px and the divider another 40px,
     which forces a horizontal scroll at this width. */
  #services > div:first-child { padding-left: 8px !important; }
  #services > span { margin-left: 12px !important; }
}

@media (max-width: 380px) {
  /* Last resort for very narrow phones: let the portfolio card scale down with
     the viewport rather than clip. transform-origin stays centred so the
     carousel's own translateX maths is unaffected. */
  #portfolio [data-slide] { zoom: 0.92; }
}

/* Nothing on this page should ever scroll sideways. */
body { overflow-x: hidden; }