/*
 * FILE: assets/css/components.css
 * PURPOSE: Reusable UI: buttons, cards, hero bands, CTA, testimonials, forms.
 * ----------------------------------------------------------------------------
 * These map 1:1 to the source site's shared components (ui-bits, page-hero,
 * contact form). Page-specific layout lives in pages.css.
 */

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { transform: translateY(-2px); }

/* Navy primary (on light backgrounds) */
.btn-primary { background: var(--navy); color: var(--cream); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--navy-deep); box-shadow: var(--shadow-hover); }

/* Green secondary (used on dark banners + as accent) */
.btn-secondary { background: var(--green); color: var(--white); box-shadow: var(--shadow-brand); }
.btn-secondary:hover { background: var(--green-deep); }

/* Outline (header portal button) */
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-outline:hover { background: var(--sand); border-color: var(--green); }

/* Ghost (subtle, on light) */
.btn-ghost { background: var(--sand); color: var(--navy); }
.btn-ghost:hover { background: #e9dfca; }

/* Ghost on dark */
.btn-ghost-invert { background: transparent; color: var(--cream); border: 1.5px solid rgba(250, 246, 239, 0.35); }
.btn-ghost-invert:hover { background: rgba(250, 246, 239, 0.1); border-color: var(--cream); }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.8rem; }
.btn-block-sm { width: 100%; }

/* ============================ SECTION HEADING ============================ */
.section-heading { max-width: 44rem; margin-inline: auto; text-align: center; }
.section-heading.align-left { margin-inline: 0; text-align: left; }
.section-heading .eyebrow { margin-bottom: 0.75rem; }
.section-heading .section-intro { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.section-navy .section-heading .section-intro { color: rgba(250, 246, 239, 0.8); }
.section-navy .section-heading .eyebrow { color: var(--green); }

/* ============================ GENERIC CARD ============================ */
.card {
  height: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-brand);
}
.card-hover { transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(99, 172, 94, 0.4); }

/* Round icon chip */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: var(--radius-full);
  background: rgba(99, 172, 94, 0.15);
  color: var(--green-deep);
  margin-bottom: 1rem;
}
.icon-chip svg { width: 1.5rem; height: 1.5rem; }
.icon-chip.lg { height: 3.5rem; width: 3.5rem; }
.icon-chip.lg svg { width: 1.75rem; height: 1.75rem; }

/* ============================ SERVICE CARD ============================ */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-brand);
  transition: transform 0.2s var(--ease);
}
.service-card:hover { transform: translateY(-4px); }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; width: 3rem; border-radius: var(--radius-full);
  background: rgba(99, 172, 94, 0.15); color: var(--green-deep); margin-bottom: 1rem;
}
.service-icon svg { width: 1.5rem; height: 1.5rem; }
.service-card h3 { line-height: 1.3; }
.service-card p { margin-top: 0.5rem; flex: 1; font-size: 0.9rem; color: var(--muted); }
.service-more {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem; font-weight: 800; color: var(--navy); transition: color 0.15s var(--ease);
}
.service-card:hover .service-more { color: var(--green-deep); }

/* ============================ TESTIMONIAL ============================ */
.testimonial {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius-2xl);
  background: rgba(250, 246, 239, 0.05);
  box-shadow: inset 0 0 0 1px rgba(250, 246, 239, 0.1);
  padding: 1.75rem;
}
.testimonial-quote-icon { color: var(--green); }
.testimonial-quote-icon svg { width: 2rem; height: 2rem; }
.testimonial-stars { margin-top: 0.5rem; display: flex; gap: 2px; color: var(--green); }
.testimonial-stars svg { width: 1rem; height: 1rem; }
.testimonial blockquote { margin-top: 1rem; flex: 1; line-height: 1.65; color: rgba(250, 246, 239, 0.9); }
.testimonial figcaption { margin-top: 1rem; font-size: 0.875rem; font-weight: 700; color: var(--green); }

/* ============================ CTA ============================ */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--navy-deep); color: var(--cream);
  padding-block: 5rem;
}
.cta-banner-inner { position: relative; text-align: center; }
.cta-banner h2 { color: var(--cream); max-width: 40rem; margin-inline: auto; }
.cta-banner p { margin-top: 1rem; max-width: 34rem; margin-inline: auto; color: rgba(250, 246, 239, 0.8); }
.cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.cta-card {
  max-width: 42rem; margin-inline: auto; text-align: center;
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--radius-3xl); padding: 2.5rem; box-shadow: var(--shadow-brand);
}
.cta-card p { margin-top: 0.75rem; color: var(--muted); }

/* ============================ PAGE HERO ============================ */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.page-hero .container { position: relative; text-align: center; max-width: 48rem; }
.page-hero-title { margin-top: 0.25rem; }
.page-hero-intro { margin-top: 1rem; margin-inline: auto; max-width: 40rem; font-size: 1.1rem; line-height: 1.7; color: var(--muted); }

/* ============================ FORM ============================ */
.form-card {
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--radius-3xl); padding: 2rem; box-shadow: var(--shadow-brand);
}
.inquiry-form { display: flex; flex-direction: column; gap: 1.25rem; }
.field-row { display: grid; gap: 1.25rem; }
.field { display: flex; flex-direction: column; }
.field label { margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.field .req { color: var(--clay); }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--cream);
  border-radius: var(--radius-xl); padding: 0.75rem 1rem; color: var(--ink);
  font: inherit; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(99, 172, 94, 0.3);
}
.field textarea { resize: vertical; }
.field-error { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--clay); }
.form-note { font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
.form-alert {
  background: rgba(201, 112, 79, 0.1); border: 1px solid rgba(201, 112, 79, 0.35);
  color: #8a3f24; border-radius: var(--radius-xl); padding: 0.85rem 1rem; font-size: 0.9rem; font-weight: 700;
}
/* Honeypot: visually + AT hidden, still submitted */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { text-align: center; padding-block: 2rem; }
.form-success-icon { color: var(--green); display: inline-flex; }
.form-success-icon svg { width: 3.5rem; height: 3.5rem; }
.form-success h3 { margin-top: 1rem; font-size: 1.5rem; }
.form-success p { margin-top: 0.5rem; color: var(--muted); }

.footer-revisions,
.machine-resources {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.65;
}

.machine-resources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.machine-resources a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.machine-resources a:hover,
.machine-resources a:focus-visible {
    opacity: 1;
    text-decoration-thickness: 2px;
}