/* Native HTML components. The main visual design is in site.css. */

/* Keep the mobile menu icon and browser-native buttons readable on dark panels. */
.mobile-menu-toggle, .work-card { color: var(--foreground); }
.astro-rich p + p { margin-top: 22px; }
.hero-description p { color: inherit; }
.footer-tagline p { margin-top: 24px; max-width: 310px; }
.inner-hero::before {
  background-image: var(--astro-hero-background, url('../images/space-panorama.webp'));
}

/* A real details/summary dropdown works with mouse, touch and keyboard. */
.astro-dropdown { position: relative; }
.astro-dropdown > summary { list-style: none; cursor: pointer; }
.astro-dropdown > summary::-webkit-details-marker { display: none; }
.astro-dropdown .service-menu { position: absolute; top: 100%; left: -90px; z-index: 90; }
.astro-dropdown:not([open]) > .service-menu { display: none !important; }
.astro-dropdown:has(a[aria-current='page']) > summary { color: var(--cyan); }
.nav-dropdown-toggle svg { width: 13px; height: 13px; }

/* Dialogs provide native focus trapping, Escape dismissal and an inert backdrop. */
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: #030b16db; backdrop-filter: blur(5px); }
.astro-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  background: #081728;
  color: var(--foreground);
  z-index: 2;
}
.astro-close svg { width: 19px; height: 19px; }
dialog.gallery-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1000px, calc(100vw - 40px));
  max-width: none;
  max-height: 92svh;
  overflow: auto;
  border: 1px solid #7ae5ee40;
  border-radius: 10px;
  background: #071322;
  color: var(--foreground);
  padding: 30px;
}
.gallery-dialog .gallery-preview-image {
  width: 100%; height: auto; max-height: 70svh;
  object-fit: contain; background: #06101d;
}
.gallery-dialog h2 { font-size: 31px; line-height: 1.2; margin: 20px 0 10px; }
.gallery-dialog p { font-size: 15px; margin: 0; }
.work-card[hidden] { display: none !important; }
dialog.mobile-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 35px 30px;
  overflow: auto;
  border: 0;
  border-left: 1px solid var(--line);
}
.mobile-sheet h2 { font-size: 28px; margin: 13px 0; }
.mobile-sheet > p { font-size: 14px; margin-bottom: 18px; }
.mobile-sheet .subnav { margin: 5px 0 15px; }

/* FAQ entries remain usable even when JavaScript is disabled. */
.astro-faq-item { border-bottom: 1px solid var(--line); }
.astro-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--astro-display); font-size: 21px; line-height: 1.4;
  letter-spacing: -.025em; padding: 26px 0; list-style: none; cursor: pointer;
}
.astro-faq-item > summary::-webkit-details-marker { display: none; }
.astro-faq-item > summary svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--cyan); transition: transform .25s;
}
.astro-faq-item[open] > summary svg { transform: rotate(180deg); }
.astro-faq-answer { color: var(--dim); font-size: 16px; line-height: 1.8; padding: 0 0 25px; }

/* The inquiry uses real input/select/textarea elements and readable feedback. */
.astro-inquiry { margin-top: 30px; }
.astro-inquiry label { display: block; color: #d7e4ee; font-size: 14px; margin-bottom: 8px; }
.astro-inquiry input, .astro-inquiry textarea, .astro-inquiry select {
  width: 100%; border: 1px solid var(--input); border-radius: 4px;
  background: #06101d; color: var(--foreground); padding: 13px 15px;
  font: inherit; font-size: 16px; line-height: 1.5;
}
.astro-inquiry select { appearance: auto; min-height: 52px; }
.astro-inquiry textarea { resize: vertical; min-height: 155px; }
.astro-inquiry [aria-invalid='true'] { border-color: #fb7185; }
.astro-inquiry button { margin-top: 25px; }
.astro-inquiry[aria-busy='true'] button { opacity: .6; cursor: wait; }
.form-consent { margin-top: 20px !important; }
.form-status {
  margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--cyan);
  border-radius: 4px; font-size: 14px; color: var(--foreground);
}
.form-status[data-state='error'] { border-color: #fb7185; }
.form-status[hidden] { display: none; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* A saved pause preference must not freeze new-page text at opacity zero. */
.motion-paused .hero-content > * { animation: none !important; opacity: 1; transform: none; }

@media (max-width: 640px) {
  .astro-faq-item > summary { font-size: 18px; padding: 22px 0; }
  dialog.gallery-dialog { width: calc(100vw - 30px); padding: 20px; }
  .gallery-dialog .gallery-preview-image { max-height: 57svh; }
  .gallery-dialog h2 { font-size: 26px; }
  .astro-inquiry { margin-top: 24px; }
  .astro-inquiry button { max-width: 100%; white-space: normal; }
  .footer-tagline p { max-width: 320px; }
}