/* Crux V5 — Foundation component primitives
 * Scope (Gate 2): Button, Text Link, Section Header, Form Field, + minimal global-shell scaffolding.
 * No page-level, card, pricing, testimonial, planner, or signature components here (later waves).
 */

/* ============ Global shell scaffolding ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--border-1) solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav ul { display: flex; gap: var(--space-5); align-items: center; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-2) 0;
}
.site-nav a:hover { color: var(--text-strong); }
@media (max-width: 63.99rem) {
  .site-nav { display: none; } /* full mobile nav is Wave 2; foundation shows brand + CTA only */
}

.site-footer {
  border-top: var(--border-1) solid var(--border);
  padding-block: var(--space-8);
  color: var(--text-muted);
  font-size: var(--type-small);
}

main:focus { outline: none; }

/* ============ Button ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);           /* >=44px touch target */
  padding: 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: var(--border-2) solid transparent;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
  text-decoration: none;
}
.btn--primary {
  background: var(--action);
  color: var(--action-text);
}
.btn--primary:hover { background: var(--action-hover); }
.btn--secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.btn--secondary:hover { border-color: var(--action); color: var(--action); }
.btn[aria-disabled="true"],
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }
@media (max-width: 29.99rem) {
  .btn--responsive { width: 100%; }
}

/* ============ Text Link ============ */
.link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.link:hover { color: var(--link-hover); }
.link__icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ============ Section Header ============ */
.section-header { max-width: var(--container-narrow); margin-bottom: var(--space-6); }
.section-header__title { margin-top: var(--space-2); }
.section-header__summary { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--type-lead); line-height: 1.5; }

/* ============ Form Field ============ */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.field__req { color: var(--accent); margin-left: 0.15em; }
.field__optional { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field__help { font-size: var(--type-small); color: var(--text-muted); }
.field__control {
  min-height: var(--control-md);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  color: var(--text-strong);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-md);
  width: 100%;
}
textarea.field__control { min-height: calc(var(--control-md) * 2); resize: vertical; }
.field__control::placeholder { color: var(--text-dim); } /* placeholder is decoration, not a label */
.field__control:hover { border-color: var(--border-strong); }
.field__error {
  font-size: var(--type-small);
  color: var(--error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.field__error::before { content: '!'; /* shape + text, not color alone */
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: var(--border-1) solid var(--error); font-weight: 700; font-size: 0.8em;
}
.field[data-invalid="true"] .field__control { border-color: var(--error); border-width: var(--border-2); }

/* Error summary ("There is a problem") */
.error-summary {
  border: var(--border-2) solid var(--error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.error-summary h2 { font-family: var(--font-body); font-size: var(--type-lead); color: var(--text-strong); margin-bottom: var(--space-2); }
.error-summary a { color: var(--link); text-decoration: underline; }

/* ============ Dev harness helpers (not shipped to public pages) ============ */
.swatch { height: 56px; border-radius: var(--radius-sm); border: var(--border-1) solid var(--border); display: flex; align-items: flex-end; padding: var(--space-1); font-family: var(--font-mono); font-size: 10px; }

/* ======================================================================
 * Contact form: responsive 2-up layout, select, and multi-select checkboxes
 * ==================================================================== */
#contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
#contact-form > .field, #contact-form > fieldset, #contact-form > .error-summary, #contact-form > button, #contact-form > p { grid-column: 1 / -1; }
#contact-form > .field--half { grid-column: auto; }
@media (max-width: 34rem) { #contact-form { grid-template-columns: 1fr; } #contact-form > .field--half { grid-column: auto; } }

select.field__control {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) center, calc(100% - 0.85rem) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
select.field__control:focus-visible { outline: var(--border-2) solid var(--focus); outline-offset: 2px; }

fieldset.field--group { display: block; border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
fieldset.field--group .field__label { display: block; margin-bottom: var(--space-3); }
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
@media (max-width: 34rem) { .checkgrid { grid-template-columns: 1fr; } }
.checkfield { display: flex; align-items: flex-start; gap: var(--space-2); }
.checkfield input[type="checkbox"] { margin-top: 0.2em; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.checkfield label { font-size: var(--type-small); color: var(--text); line-height: 1.35; cursor: pointer; }