/*
 * Public Pages
 * Styles for public-facing website (landing, pricing, about, etc.)
 * Not for authenticated app pages.
 *
 * Structure:
 *   <section class="section">
 *     <div class="container">
 *       <!-- content here -->
 *     </div>
 *   </section>
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════════════════════
     SECTION
     Full-width wrapper. Use modifiers for different backgrounds.
     ═══════════════════════════════════════════════════════════════════════════ */

  .section {
    inline-size: 100%;
    padding-block: var(--space-12);
    position: relative;
  }

  .section--hero {
    padding-block: var(--space-16) var(--space-12);
    overflow: hidden;
  }

  .section--compact {
    padding-block: var(--space-8);
  }

  .section--flush {
    padding-block: 0;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CONTAINER
     Centered content wrapper with max-width.
     ═══════════════════════════════════════════════════════════════════════════ */

  .container {
    max-inline-size: var(--content-width);
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--main-padding);
  }

  .container--wide {
    max-inline-size: 720px;
  }

  .container--narrow {
    max-inline-size: 400px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════════════════════════════════════ */

  .hero__headline {
    font-size: 20px;
    font-weight: var(--weight-regular);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-6);
    color: var(--color-ink);
    text-transform: lowercase;

    em {
      font-style: italic;
      color: var(--color-primary);
    }
  }

  .hero__subheadline {
    font-size: 18px;
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    line-height: 1.4;
    max-inline-size: 480px;
    text-transform: lowercase;

    em {
      font-style: italic;
      color: var(--color-ink);
    }
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SECTION TITLE
     ═══════════════════════════════════════════════════════════════════════════ */

  .section__title {
    font-size: 20px;
    font-weight: var(--weight-extralight);
    color: var(--color-ink);
    margin-block-end: var(--space-6);
    text-transform: lowercase;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MANIFESTO
     Large, statement paragraph text
     ═══════════════════════════════════════════════════════════════════════════ */

  .section--manifesto {
    padding-block: var(--space-12);
  }

  .manifesto {
    max-inline-size: 560px;
  }

  .manifesto p {
    font-size: 18px;
    font-weight: var(--weight-regular);
    line-height: 1.4;
    color: var(--color-ink);
    margin-block-end: var(--space-4);
    text-transform: lowercase;

    &:last-child {
      margin-block-end: 0;
    }

    em {
      font-style: italic;
      color: var(--color-ink);
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ROADMAP
     What's coming section (card grid like hapy.design advantages)
     ═══════════════════════════════════════════════════════════════════════════ */

  .roadmap-wrapper {
    background-color: var(--color-canvas-raised);
    border-radius: var(--radius-md);
    padding: 8px;
  }

  .roadmap {
    display: grid;
    gap: 8px;
  }

  @media (min-width: 640px) {
    .roadmap {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .roadmap__item {
    padding: 16px;
    background-color: white;
    border-radius: var(--radius-md);
  }

  .roadmap__title {
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    margin-block-end: var(--space-2);
    text-transform: lowercase;
  }

  .roadmap__desc {
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    line-height: 1.4;
    text-transform: lowercase;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FAQ
     Simple Q&A section
     ═══════════════════════════════════════════════════════════════════════════ */

  .faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-inline-size: 560px;
  }

  .faq__item {
    /* Simple stacked layout */
  }

  .faq__question {
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    margin-block-end: var(--space-2);
    text-transform: lowercase;
  }

  .faq__answer {
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    line-height: 1.4;
    text-transform: lowercase;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     DECORATIVE BLOBS
     Add to a section to get decorative background blobs
     ═══════════════════════════════════════════════════════════════════════════ */

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
  }

  .blob--1 {
    inline-size: 400px;
    block-size: 400px;
    background: var(--color-primary);
    inset-block-start: -100px;
    inset-inline-end: -150px;
    opacity: 0.06;
  }

  .blob--2 {
    inline-size: 300px;
    block-size: 300px;
    background: var(--color-primary);
    inset-block-end: 10%;
    inset-inline-start: -100px;
    opacity: 0.04;
  }

  .blob--3 {
    inline-size: 200px;
    block-size: 200px;
    background: var(--color-primary);
    inset-block-start: 40%;
    inset-inline-end: -50px;
    opacity: 0.03;
  }

  /* Ensure container content stays above blobs */
  .section--hero .container {
    position: relative;
    z-index: 1;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     PUBLIC FOOTER
     ═══════════════════════════════════════════════════════════════════════════ */

  .public-footer {
    padding-block: var(--space-16) var(--space-8);
    font-size: 14px;
    font-weight: var(--weight-regular);
    color: var(--color-ink-faint);
    text-transform: lowercase;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     WAITLIST FORM
     ═══════════════════════════════════════════════════════════════════════════ */

  .waitlist-card {
    background-color: var(--color-canvas-raised);
    border-radius: var(--radius-md);
    padding: 8px;
    inline-size: 100%;
  }

  .waitlist-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .waitlist-form .form__input {
    background-color: white;
    border: none;
    outline: none;
    box-shadow: none;

    &:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }
  }

  .waitlist-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (min-width: 480px) {
    .waitlist-form__fields {
      flex-direction: row;
    }
  }

  .waitlist-success {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
  }

  .waitlist-success__icon {
    inline-size: 20px;
    block-size: 20px;
    flex-shrink: 0;
  }

  .waitlist-success__message {
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    margin: 0;
    text-transform: lowercase;
  }

  .waitlist-alert {
    padding: var(--space-2);
  }

  .waitlist-alert__message {
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-negative);
    margin: 0;
    text-transform: lowercase;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FEATURES (legacy, keeping for compatibility)
     ═══════════════════════════════════════════════════════════════════════════ */

  .features {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .feature__title {
    font-size: var(--text-normal);
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    margin-block-end: var(--space-2);
  }

  .feature__desc {
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    color: var(--color-ink-muted);
    line-height: 1.6;
  }
}