/* File: public/assets/styles.css
   Clean baseline styles (easy to extend)
   Goal:
   - Simple, modern look (works now)
   - Clear form spacing + readable typography
   - Reusable button styles
   - Sticky header (dark theme + blue accent)
*/

/* -----------------------------
   1) Reset / Base
-------------------------------- */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  /* Change font here anytime */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  margin: 0;
  padding: 0;

  /* Background + text */
  background: #f5f5f5;
  color: #111;
  line-height: 1.5;
}

/* -----------------------------
   2) Layout Containers
-------------------------------- */

/*
  NOTE:
  We keep generic header/footer styling, but your sticky header
  uses .site-header (separate styles below).
*/
header, footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

main {
  /* Page padding */
  padding: 2rem;

  /* Optional max width for nicer reading */
  max-width: 900px;
  margin: 0 auto;
}

/* Sections spacing */
section {
  margin-bottom: 2rem;
}

/* Headings */
h1, h2, h3 {
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

/* Paragraph spacing */
p {
  margin: 0 0 1rem 0;
}

/* -----------------------------
   3) Forms
-------------------------------- */
/* Label layout: label wraps input/textarea in our HTML */
label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* All inputs/selects/textarea share the same base look */
form input,
form select,
form textarea {
  width: 100%;
  margin-top: 0.35rem;     /* space between label text and field */
  margin-bottom: 0.25rem;  /* slight separation before next label */

  padding: 0.65rem 0.75rem;

  border: 1px solid #ccc;
  border-radius: 8px;

  background: #fff;
  color: #111;

  font-size: 1rem;
}

/* Make textarea feel nicer */
form textarea {
  min-height: 120px;
  resize: vertical; /* user can expand up/down */
}

/* Focus state (accessibility + polish) */
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
}

/* Turnstile spacing */
.cf-turnstile {
  margin: 0.75rem 0 1rem 0;
}

/* Disclaimer + helper text */
.form-disclaimer {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-top: 0.75rem;
}

.form-help {
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Status message area */
#response {
  margin-top: 0.75rem;
  font-weight: 600;
}

/* -----------------------------
   4) Buttons
-------------------------------- */
/* Base button style */
button {
  padding: 0.75rem 1.25rem;
  background: #007bff;
  color: #fff;

  border: none;
  border-radius: 10px;

  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;
}

/* Hover states */
button:hover {
  filter: brightness(0.95);
}

/* Disabled state (if you add it later) */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Optional button variants (use these classes in HTML when needed) */
.btn-primary {
  background: #007bff;
}

.btn-secondary {
  background: #444;
  margin-top: 0.75rem; /* useful for the email fallback button */
}

/* Links */
a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -----------------------------
   5) Sticky Header (Dark + Blue)
-------------------------------- */

/*
  Your sticky header uses:
  <header class="site-header">
    <div class="site-header__inner">...</div>
  </header>
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;

  background: #0b1220;
  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Make sure the sticky header isn't affected by the generic header styles */
.site-header {
  text-align: left;
  padding: 0; /* we control padding in the inner container */
}

.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1rem;

  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 220px;
}

.brand__name {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.brand__tag {
  font-size: 0.9rem;
  opacity: 0.85;
  font-weight: 600;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.site-nav__link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.site-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Header CTA buttons (NOT the same as <button>) */
.header-ctas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 0.85rem;
  border-radius: 10px;

  text-decoration: none;
  font-weight: 900;
  font-size: 0.95rem;

  white-space: nowrap;
}

.cta--primary {
  background: #2d7dff;
  color: #fff;
}

.cta--primary:hover {
  filter: brightness(0.95);
}

.cta--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Mobile menu button */
.menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-weight: 900;
  cursor: pointer;
}

/* Responsive behavior: collapse nav + CTAs into a toggled dropdown */
@media (max-width: 900px) {
  .site-nav,
  .header-ctas {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
    margin-left: auto;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  /* When menu opens (JS adds .is-open) */
  .site-header.is-open .site-nav,
  .site-header.is-open .header-ctas {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .site-header.is-open .site-nav {
    margin-top: 0.5rem;
  }

  .brand {
    min-width: 0;
  }
}

/* -----------------------------
   6) Small Mobile Tweaks
-------------------------------- */
@media (max-width: 600px) {
  main {
    padding: 1.25rem;
  }

  header, footer {
    padding: 0.9rem;
  }

  button {
    width: 100%; /* big tap target on mobile */
  }
}
/* FIX: Stop header overlap / "double click" feeling */
.site-header { position: sticky; top: 0; z-index: 1000; }
.site-header__inner { position: relative; z-index: 2; }
.site-nav, .header-ctas, .menu-btn, .brand { position: relative; z-index: 2; }
.site-nav__link, .cta { display: inline-flex; align-items: center; }