/* ============================================================
   FILE: /css/components.css
   PURPOSE: Reusable UI components used across the site
   Contents:
   1) Buttons (polished + less “generic”)
   2) Cards (UPDATED: reduces “stepped” shadow illusion)
   3) Navigation (premium active pill)
   4) Forms (base + field polish; fixes tiny inputs)
   5) Contact form grid layout
   6) Honeypot (anti-spam)
   7) Notices (success/error)
   8) Inline validation (no popups)
   9) Hero lead copy (spans container)
   ============================================================ */


/* ============================================================
   1) BUTTONS (POLISHED, NOT GENERIC)
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(to bottom, #ffffff, var(--surface));
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.015em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 26px rgba(16,24,40,.16);
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms ease,
    filter 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.btn:hover{
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 44px rgba(16,24,40,.20);
}

.btn:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 26px rgba(16,24,40,.16);
}

.btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 2px;
}

/* Primary = accent gradient + glow */
.btn-primary{
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 92%, white),
    var(--accent)
  );
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 70%, black);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 34px rgba(37,99,235,.40);
}

.btn-primary:hover{
  filter: brightness(0.99);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 22px 52px rgba(37,99,235,.48);
}

/* Ghost = minimal but still feels designed */
.btn-ghost{
  background: transparent;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.btn-ghost:hover{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}


/* ============================================================
   2) CARDS (UPDATED: REDUCE SHADOW “POOLING”)
   - The prior shadow was large enough to create a “stepped” illusion
   - isolation prevents neighboring elements from blending shadows visually
   ============================================================ */
.card{
  position: relative;
  isolation: isolate;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  padding: var(--s-5);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 12px 28px rgba(16,24,40,.14);
}

.card--muted{
  background: var(--surface);
}


/* ============================================================
   3) NAVIGATION debating LINKS (PREMIUM ACTIVE PILL)
   ============================================================ */
.nav a{
  color: var(--muted);
  font-weight: 600;
  padding: var(--s-2);
  border-radius: 10px;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.nav a:hover{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  text-decoration: none;
}

/* Active pill feels “intentional” (not flat) */
.nav a[aria-current="page"]{
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--surface) 85%, white),
    var(--surface)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 18px rgba(16,24,40,.10);
}

/* Active nav highlight by body class (no PHP logic needed) */
.page-home .nav-home,
.page-about .nav-about,
.page-experience .nav-experience,
.page-perspectives .nav-perspectives,
.page-contact .nav-contact{
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--surface) 85%, white),
    var(--surface)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 18px rgba(16,24,40,.10);
  border-radius: 10px;
}


/* ============================================================
   4) FORMS (BASE + POLISH)
   - Keeps inputs full width (fixes “tiny fields”)
   ============================================================ */
.field label{
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.field input,
.field textarea{
  width: 100%;
  display: block;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    inset 0 2px 3px rgba(16,24,40,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 2px 3px rgba(16,24,40,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.field textarea{
  min-height: 140px;
  resize: vertical;
}

.help{
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--text-sm);
}


/* ============================================================
   5) CONTACT FORM GRID LAYOUT
   ============================================================ */
.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 860px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}

.field--full{
  grid-column: 1 / -1;
}

.help-row{
  margin-top: var(--s-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

/* When the <form> itself uses .card */
form.card{
  display: grid;
  gap: var(--s-4);
}


/* ============================================================
   6) HONEYPOT (ANTI-SPAM) — MUST BE HIDDEN
   ============================================================ */
.hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================
   7) NOTICES (SUCCESS / ERROR)
   ============================================================ */
.notice{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--surface);
}

.notice ul{ margin: var(--s-3) 0 0; }

.notice-success{
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
}

.notice-error{
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
}

.notice-success .actions{
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}


/* ============================================================
   8) INLINE VALIDATION (NO POPUPS)
   ============================================================ */
.field-error{
  margin: var(--s-2) 0 0;
  color: #dc2626;
  font-size: var(--text-sm);
}

.is-invalid{
  border-color: #dc2626 !important;
}


/* ============================================================
   9) HERO LEAD COPY
   ============================================================ */
.hero-lead{
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text);
}