/*
 * contact.css
 * Purpose: layout for contact/index.html (Contact form).
 * The Microsoft Forms embed fills the viewport below a slim header (shared
 * site-nav partial). The page itself never scrolls; the form scrolls inside
 * the frame.
 * The header sits above the frame, tinted on a CSS copy of the form's own
 * background so the two read as one surface. On wide screens the form keeps
 * its own ~50px margin above its card; the frame slides up under the header
 * so that only ~2rem of it shows as the gap between the header and the card.
 * Mobile-first; breakpoints at 48em (768px) and 64em (1024px).
 */

:root {
  /* Sampled from the form's theme background (Microsoft Forms, teal theme).
     Update these if the form's theme is changed. */
  --form-bg-mint: #d5f1e6;
  --form-bg-teal: #c9e9e9;
  --form-bg-blue: #a5d4fd;
  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.7);
  /* Space Microsoft Forms leaves above its card on wide screens (measured
     at desktop width), and how much of it should show below the header. */
  --form-card-offset: 50px;
  --form-gap: 2rem;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* dvh tracks mobile browser toolbars so the frame's bottom isn't hidden. */
  height: 100dvh;
  font-family: var(--font-thai-noto);
  font-variation-settings: "wdth" 100;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 100%, var(--form-bg-blue) 0%, transparent 45%),
    linear-gradient(120deg, var(--form-bg-mint) 0%, var(--form-bg-teal) 100%);
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background-color: var(--marimo-blue);
  color: var(--pure-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 var(--radius-xs) 0;
}

.skip-link:focus {
  left: 0;
}

/* =========================================================
   Header (no photo hero: a slim tinted bar over the form)
   ========================================================= */
/* No backdrop-filter here: it would make the header the containing block
   for the SP nav's position: fixed drawer, squeezing it into the bar. */
.contact-page .site-header {
  padding: var(--space-xs) var(--space-xs);
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
}

/* SP: the nav row is pinned to the viewport (components.css). Match its
   padding to the slimmer header so the hamburger stays on the logo's line,
   and drop the floating white chip since it now sits on the header bar. */
.contact-page .site-header .site-nav {
  padding: var(--space-xs) var(--space-xs);
}

.contact-page .nav-toggle {
  box-shadow: none;
}

/* =========================================================
   Contact form (Microsoft Forms embed)
   ========================================================= */
.contact-form {
  flex: 1 1 auto;
  min-height: 0;
}

.contact-form__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

@media (min-width: 48em) {
  .contact-page .site-header {
    padding: var(--space-xs) var(--space-md);
  }

  .contact-page .site-header .site-nav {
    padding: 0;
  }

  /* The services dropdown is transparent elsewhere (it opens over the hero's
     white gradient); here it opens over the form, so give it its own sheet. */
  .contact-page .site-nav .dropdown__menu {
    margin-top: var(--space-2xs);
    padding: var(--space-xs);
    background-color: var(--pure-white);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-sm);
    box-shadow: 0 0.25rem 1.5rem rgba(42, 42, 42, 0.16);
  }
}

@media (min-width: 64em) {
  /* Slide the frame up under the header (which stacks above it, z-index 2
     in components.css) so the form's own top margin shrinks to --form-gap.
     Only the form's background passes under the bar, never the card. */
  .contact-form {
    margin-top: calc(var(--form-gap) - var(--form-card-offset));
  }
}