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

@layer reset, styles, prewind;

@import url("/assets/theme-fc9e602b.css");
@import url("/assets/prewind-a674b9f3.css");
@import url("/assets/site-29649a9f.css");
@import url("/assets/cookieconsent-a325c0b9.css");

/* ---- Cookie consent UI: ZiaMap dark + gold theme ---- */
#cc-main {
  --cc-bg: var(--black);
  --cc-primary-color: var(--white);
  --cc-secondary-color: var(--midtone, #9aa0aa);
  --cc-btn-primary-bg: var(--brand-1);
  --cc-btn-primary-color: var(--black);
  --cc-btn-primary-hover-bg: #ffc21f;
  --cc-btn-primary-hover-color: var(--black);
  --cc-btn-secondary-bg: #4a4a56;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-hover-bg: #5a5a68;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-separator-border-color: #22222a;
  --cc-toggle-on-bg: var(--brand-1);
  --cc-toggle-off-bg: #3a3a44;
  /* Category rows (Essential/Analytics/Marketing): the library defaults these
     to a light background, which made the white title text unreadable. Drop the
     fill so the rows sit on the dark modal with visible borders. */
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-bg-hover: #1c1c24;
  --cc-cookie-category-block-border: #2a2a34;
  --cc-cookie-category-block-border-hover: #3a3a46;
  --cc-cookie-category-expanded-block-bg: #121218;
  --cc-cookie-category-expanded-block-hover-bg: #1c1c24;
  --cc-modal-border-radius: 10px;
  --cc-btn-border-radius: 6px;
  --cc-link-color: var(--brand-1);
}

/* "Manage choices" and other secondary buttons: add a border so they read
   clearly against the dark banner instead of blending in. */
#cc-main .cm__btn[data-role="show"],
#cc-main .pm__btn--secondary,
#cc-main .cm__btn--secondary {
  border: 1px solid #6f6f7d;
}

@layer styles {

  /* ---- Base ---- */
  body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    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.5;
    color: var(--ink);
    margin-top: var(--space-sm);
    max-width: var(--max-w-text);
  }

  /* ---- Typography (Zilla Slab headings, upright slab serif. The prior
     italic-uppercase Archivo treatment is retired with the light theme). ---- */
  h1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    margin-top: var(--space-xl);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  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.05;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-top: var(--space-md);
    max-width: var(--max-w-text);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
  }

  h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin-top: var(--space-sm);
    max-width: var(--max-w-text);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
  }

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

  /* ---- 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;
    letter-spacing: 0.01em;
    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(--ink);
  }
  .btn-primary:hover {
    background: var(--gold-hover);
    color: var(--ink);
  }
  .btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--panel-line);
  }
  .btn-secondary:hover {
    border-color: var(--brand-1);
    color: var(--gold-text);
  }

  /* ---- 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(--bg);
    color: var(--ink);
    border: 1px solid var(--panel-line);
    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);
  }
}