/*
 * ================================================================
 *  BlueWave IT — components.css
 *  Reusable UI components: buttons, cards, icons, feature lists,
 *  status dots, badges, form fields, FAQ accordion styles.
 *
 *  Requires: theme.css (tokens must be loaded first)
 *  Load order: theme.css → components.css → [page].css
 * ================================================================
 */


/* ================================================================
   1. BUTTONS
   Usage:
     <a href="contact.html" class="btn btn-primary">Book a Consultation</a>
     <a href="services.html" class="btn btn-secondary">Explore Services</a>
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    transform     200ms ease,
    box-shadow    200ms ease,
    background    200ms ease,
    border-color  200ms ease;
}

/* ── Primary — filled cyan gradient ── */
.btn-primary {
  background: linear-gradient(130deg, #00c2cb 0%, #38d9e8 100%);
  color: #031922;
  box-shadow: 0 6px 22px rgba(0,194,203,0.32), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,194,203,0.42), inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ── Secondary — ghost style ── */
.btn-secondary {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(56,217,232,0.30);
  transform: translateY(-2px);
}
body.theme-light .btn-secondary {
  background: rgba(10,22,40,0.04);
}
body.theme-light .btn-secondary:hover {
  background: rgba(10,22,40,0.08);
}

/* ── Button size modifier ── */
.btn-sm {
  padding: 9px 18px;
  font-size: 0.86rem;
}


/* ================================================================
   2. CARDS
   Base card: glassmorphism surface used across all pages.
   Add .hover-lift for interactive cards (services, features).
   Add .tilt-card for 3-D perspective hover on desktop.

   Usage:
     <div class="card">…</div>
     <div class="card hover-lift">…</div>
     <div class="card hover-lift tilt-card">…</div>
   ================================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px;
  transition:
    transform     220ms cubic-bezier(0.16,1,0.3,1),
    border-color  220ms ease,
    box-shadow    220ms ease,
    background    220ms ease;
}

.card.hover-lift:hover {
  transform: translateY(-5px);
  border-color: rgba(56,217,232,0.24);
  box-shadow: 0 20px 48px rgba(0,0,0,0.26), 0 0 0 1px rgba(56,217,232,0.10);
  background: var(--bg-card-hover);
}

/* Preserve-3d for JS tilt effect */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}


/* ================================================================
   3. CARD ICON
   The standard icon container used at the top of feature/service
   cards. Pair with an .icon-svg inside.

   Usage:
     <div class="card-icon">
       <svg class="icon-svg" …>…</svg>
     </div>
   ================================================================ */

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(0,194,203,0.15), rgba(15,76,129,0.22));
  border: 1px solid rgba(56,217,232,0.20);
  color: var(--cyan-3);
}

/* ── SVG icon standard ──
   All inline SVGs should use these attributes:
   fill="none" stroke="currentColor" stroke-width="1.7"
   stroke-linecap="round" stroke-linejoin="round"
   Primary shapes: stroke color var(--cyan-2)
   Detail elements: stroke color var(--cyan-3)
── */
.icon-svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ================================================================
   4. FEATURE LIST
   Checkmark-prefixed list used inside cards and sections.

   Usage:
     <ul class="feature-list">
       <li>Item one</li>
       <li>Item two</li>
     </ul>
   ================================================================ */

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted-2);
  font-size: 0.97rem;
}
.feature-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  /* Inline SVG checkmark — no external file dependency */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ================================================================
   5. STATUS DOTS
   Small colored indicator dots used in dashboard widgets and
   status rows.

   Usage:
     <span class="status-dot"></span>          ← green (default)
     <span class="status-dot amber"></span>    ← amber / warning
     <span class="status-dot red"></span>      ← red / critical
   ================================================================ */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(62,232,154,0.10);
  flex: 0 0 auto;
}
.status-dot.amber {
  background: var(--amber);
  box-shadow: 0 0 0 7px rgba(255,207,78,0.10);
}
.status-dot.red {
  background: var(--danger);
  box-shadow: 0 0 0 7px rgba(255,95,95,0.10);
}

/* ── Pulse animation (for live/active indicators) ── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(62,232,154,0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(62,232,154,0.00); }
}
.status-dot.pulse { animation: pulse 2s infinite; }


/* ================================================================
   6. BADGE
   Small inline label — used for status pills, "All Systems Healthy"
   type callouts, and ribbon labels on cards.

   Usage:
     <span class="badge">Active</span>
     <span class="badge badge-green">Verified</span>
     <span class="badge badge-amber">Warning</span>
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(62,232,154,0.12);
  border: 1px solid rgba(62,232,154,0.22);
  color: var(--green);
  white-space: nowrap;
}
.badge-amber {
  background: rgba(255,207,78,0.12);
  border-color: rgba(255,207,78,0.22);
  color: var(--amber);
}
.badge-cyan {
  background: rgba(0,194,203,0.12);
  border-color: rgba(0,194,203,0.22);
  color: var(--cyan-2);
}


/* ================================================================
   7. DASHBOARD STATUS ROWS
   Used in the hero card and any monitoring widget.
   Extracted from the inline styles previously on index.html.

   Usage:
     <div class="status-grid">
       <div class="status-row">
         <div class="status-row-left">
           <span class="status-dot pulse"></span>
           <span class="status-row-label">Endpoint Monitoring</span>
         </div>
         <span class="status-row-value">Active</span>
       </div>
     </div>
   ================================================================ */

.status-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  background: rgba(62,232,154,0.07);
  border: 1px solid rgba(62,232,154,0.18);
}
.status-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-row-label {
  font-size: 0.83rem;
  color: var(--text);
}
.status-row-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3ee89a;
}

/* ── Metric cells (uptime, response time) ── */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.metric-cell {
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--line);
  text-align: center;
}
.metric-cell strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--cyan-2);
  line-height: 1;
}
.metric-cell span {
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}


/* ================================================================
   8. FORM ELEMENTS
   Shared input, textarea, select, and label styles.
   Used on contact.html and any page with a form.
   ================================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 180ms ease, background 180ms ease;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: rgba(56,217,232,0.40);
  background: rgba(255,255,255,0.07);
}
.form-control::placeholder { color: var(--muted); }
body.theme-light .form-control {
  background: rgba(10,22,40,0.04);
  border-color: rgba(10,22,40,0.14);
}
body.theme-light .form-control:focus {
  background: rgba(255,255,255,0.80);
  border-color: var(--cyan);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* ── Form grid (2-col on desktop) ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Form status message ── */
.form-status {
  font-size: 0.92rem;
  min-height: 1.4em;
  transition: color 200ms ease;
}


/* ================================================================
   9. FAQ ACCORDION
   Shared styles for the FAQ section used on index and pricing.

   Usage:
     <div class="faq-item">
       <button class="faq-question">Question text</button>
       <div class="faq-answer"><p>Answer text</p></div>
     </div>
   ================================================================ */

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.faq-item.open {
  border-color: rgba(56,217,232,0.20);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  transition: background 160ms ease;
}
.faq-question:hover { background: var(--bg-card-hover); }
.faq-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--cyan-2);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  display: none;
  padding: 0 22px 18px;
  color: var(--muted-2);
  font-size: 0.97rem;
  line-height: 1.7;
  background: var(--bg-card);
}
.faq-item.open .faq-answer {
  display: block;
}


/* ================================================================
   10. PROCESS STEPS
   Numbered step flow used in the onboarding/process section.

   Usage:
     <div class="process-grid">
       <div class="process-step">
         <div class="process-num">01</div>
         <h3>Discovery</h3>
         <p>…</p>
       </div>
     </div>
   ================================================================ */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* ── Horizontal connector line between steps ── */
.process-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line-strong) 20%,
    var(--cyan-2) 50%,
    var(--line-strong) 80%,
    transparent 100%
  );
  z-index: 0;
}

.process-step {
  position: relative;
  padding: 0 20px 0 0;
  z-index: 1;
}

.process-num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 20px;
  background: var(--bg);
  border: 1px solid rgba(56,217,232,0.30);
  color: var(--cyan-2);
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(56,217,232,0.15);
}

.process-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text);
}
.process-step p {
  font-size: 0.93rem;
  color: var(--muted-2);
  line-height: 1.6;
}

@media (max-width: 980px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-grid::before { display: none; }
  .process-step { padding: 0; }
}


/* ================================================================
   11. ASSESSMENT / CTA BAND
   Full-width call-to-action strip used between sections.

   Usage:
     <section class="assessment-band">
       <div class="container">
         <div class="assessment-box">…</div>
       </div>
     </section>
   ================================================================ */

.assessment-band {
  background: linear-gradient(135deg,
    rgba(0,194,203,0.08) 0%,
    rgba(15,76,129,0.12) 100%
  );
  border-top:    1px solid rgba(56,217,232,0.12);
  border-bottom: 1px solid rgba(56,217,232,0.12);
}

.assessment-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 48px 40px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid rgba(56,217,232,0.15);
}

.assessment-box h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin-bottom: 10px;
}
.assessment-box p {
  color: var(--muted-2);
  max-width: 52ch;
}

@media (max-width: 640px) {
  .assessment-box {
    padding: 36px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ================================================================
   12. TRUST / VALUE PROPS BAR
   Four-column icon + label strip used below hero or sections.

   Usage:
     <div class="trust-grid">
       <div class="trust-item">
         <strong>Predictable</strong>
         <span>Monthly user-based support</span>
       </div>
     </div>
   ================================================================ */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.trust-item span {
  color: var(--muted-2);
  font-size: 0.93rem;
}
.trust-item .trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(0,194,203,0.12), rgba(15,76,129,0.16));
  border: 1px solid rgba(56,217,232,0.18);
  color: var(--cyan-3);
}

@media (max-width: 980px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .trust-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   13. PAGE HERO (non-homepage)
   Simpler hero for interior pages (services, about, contact).
   Replaces the full .hero with .hero-grid used on index.html.

   Usage:
     <section class="page-hero band">
       <div class="container">
         <span class="section-label">…</span>
         <h1>Page Title</h1>
         <p>Short descriptor</p>
       </div>
     </section>
   ================================================================ */

.page-hero {
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.page-hero p {
  color: var(--muted-2);
  font-size: 1.1rem;
  max-width: 58ch;
}