/* =========================================================
   ZiaMap Application Stylesheet
   Order: theme variables -> Prewind utilities -> site components
         -> global typography overrides.
   ========================================================= */

@layer reset, styles, prewind;

@import url("/assets/theme-052a9d04.css");
@import url("/assets/prewind-a674b9f3.css");
@import url("/assets/site-5570c19d.css");

@layer styles {

  /* ---- Base ---- */
  body {
    font-family: var(--font-body);
    color: var(--white);
    background: var(--black);
    font-size: var(--text-base);
    line-height: 1.3;
    overflow-wrap: break-word;
    /* Sticky footer structure: body is the full-height column container.
       main grows to fill remaining space, pushing the footer to the bottom
       on short pages. Uses svh (small viewport height) so it works correctly
       on mobile browsers with collapsible chrome. */
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  main {
    flex: 1;
  }

  p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--white);
    margin-top: var(--space-sm);
    max-width: var(--max-w-text);
  }

  /* ---- Typography (matches live site) ---- */
  h1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    margin-top: var(--space-xl);
    max-width: var(--max-w-text);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    font-style: italic;
  }

  h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-top: var(--space-lg);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    font-style: italic;
  }

  h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-top: var(--space-md);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 1;
    font-style: italic;
  }

  h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin-top: var(--space-sm);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 1;
    font-style: italic;
  }

  /* ---- Links ---- */
  a {
    color: var(--brand-1);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  a:hover {
    color: var(--white);
  }

  /* ---- Buttons (legacy class names used in forms) ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--rounded);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    line-height: 1;
    box-shadow: var(--shadow-sm);
  }
  .btn-primary {
    background: var(--brand-1);
    color: var(--black);
  }
  .btn-primary:hover {
    background: var(--white);
    color: var(--black);
  }
  .btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--midtone);
  }
  .btn-secondary:hover {
    border-color: var(--brand-1);
    color: var(--brand-1);
  }

  /* ---- Forms (admin + lead capture) ---- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    background: var(--darker);
    color: var(--white);
    border: 1px solid var(--dark);
    border-radius: var(--rounded);
    padding: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    width: 100%;
    max-width: var(--max-w-form);
  }
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--brand-1);
    outline-offset: 2px;
    border-color: var(--brand-1);
  }

  /* ---- Reading width helper ---- */
  .reading-width { max-width: var(--max-w-text); }

  /* ---- Brand-glow shadow ---- */
  .brand-glow {
    box-shadow: var(--shadow-brand);
  }
}