/* =============================================================================
   connect.css — /connect digital card page styles (namespaced)
   Brand: NO BLUE. Page = cream flat. Element-scale gradients only (CTA + card-back).
   Nav suppressed on this page for distraction-free focus.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Page-level: cream, centered card, no horizontal overflow
   --------------------------------------------------------------------------- */
.gv-connect-page {
  /* Page stays cream (--gv-page) — no gradient/dark at page scale */
}

/* Connect now uses the STANDARD site header (logo left, nav right) and the
   standard mobile tab bar — same as every other page. The old centered-logo
   override and the tabbar-clearance removal are gone so .gv-main keeps its
   built-in bottom padding for the bottom tab bar on mobile. */

/* ---------------------------------------------------------------------------
   Card wrap: centers the card on desktop, full-width on mobile
   --------------------------------------------------------------------------- */
.gv-connect-card-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 20px 48px;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
}

@media (min-width: 768px) {
  .gv-connect-card-wrap {
    padding: 48px 20px 80px;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   The card itself
   --------------------------------------------------------------------------- */
.gv-connect-card {
  width: 100%;
  max-width: 440px;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-lg);
  box-shadow: var(--gv-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------------------------------------------------------------------------
   §2 — Identity block
   --------------------------------------------------------------------------- */
.gv-connect-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 24px;
  gap: 0;
}

/* Photo / avatar placeholder */
.gv-connect-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(58, 42, 26, 0.14);
  background: var(--gv-rule);
  flex-shrink: 0;
}

.gv-connect-avatar svg,
.gv-connect-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
}

.gv-connect-avatar__img {
  object-fit: cover;
  object-position: top center;
  /* Warm photo treatment to match the hero/about portrait tone */
  filter: saturate(1.05);
}

/* Name */
.gv-connect-name {
  font-family: var(--gv-font-display);
  font-size: clamp(34px, 8vw, 44px);
  font-weight: 500;
  color: var(--gv-text);
  line-height: var(--gv-display-lh);
  letter-spacing: var(--gv-display-tracking);
  margin: 0;
}

/* Faded gold rule under name */
.gv-connect-name-rule {
  max-width: 160px;
  margin: 14px auto 16px;
}

/* Title eyebrow */
.gv-connect-title {
  color: var(--gv-text-muted);
  margin-bottom: 10px;
}

/* Tagline */
.gv-connect-tagline {
  font-family: var(--gv-font-body);
  font-size: 18px;
  color: var(--gv-text-body);
  margin: 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   §3 + §4 + §5 — Save module wrapper
   --------------------------------------------------------------------------- */
.gv-connect-save-module {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 24px 24px;
}

/* §3 — Primary save button: full card width, giant */
.gv-connect-save-btn {
  width: 100%;
  min-height: 60px;
  font-size: 18px;
  letter-spacing: 0.1em;
  border-radius: var(--gv-radius);
  margin-bottom: 12px;
}

.gv-connect-save-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Active press: calm tactile feedback */
.gv-connect-save-btn:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .gv-connect-save-btn:active {
    transform: none;
    filter: none;
  }
}

/* Inline status confirmation */
.gv-connect-status {
  font-family: var(--gv-font-body);
  font-size: 16px;
  color: var(--gv-text-muted);
  text-align: center;
  min-height: 22px; /* reserve space to avoid layout shift */
  margin: 0 0 10px;
  line-height: 1.4;
  transition: opacity var(--gv-dur) var(--gv-ease);
}

/* §3b — Desktop QR: the primary "get the card onto your phone" affordance.
   Dark-on-cream for brand + high contrast (scannability is non-negotiable).
   Built and unhidden by contact-save.js on desktop only. */
.gv-connect-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.gv-connect-qr[hidden] { display: none; }

.gv-connect-qr__frame {
  width: 240px;
  height: 240px;
  padding: 16px;
  background: #fffdf6; /* --gv-card; QR background must stay light for contrast */
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  box-shadow: var(--gv-shadow);
  box-sizing: content-box;
}
.gv-connect-qr__frame svg {
  display: block;
  width: 240px;
  height: 240px;
}

.gv-connect-qr__caption {
  font-family: var(--gv-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gv-text-muted);
  text-align: center;
  max-width: 30ch;
  margin: 0;
}

/* On desktop the QR is primary, so it comes first and the .vcf Save button is
   demoted below it as a quiet secondary action. (.gv-connect-save-module is a
   column flexbox, so order controls vertical position.) */
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-qr { order: 1; }
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-status { order: 2; }
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-save-btn { order: 3; }
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-instructions { order: 4; }

.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-save-btn {
  background: transparent;
  color: var(--gv-gold-text);
  border: 1.5px solid var(--gv-gold);
  box-shadow: none;
  font-size: 16px;
  min-height: 52px;
  margin-top: 4px;
}
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-save-btn:hover {
  background: rgba(196, 140, 60, 0.08);
  filter: none;
}

/* Desktop never shows the self-SMS/mailto buttons (JS hides them too). */
.gv-connect-save-module[data-gv-platform="desktop"] .gv-connect-alt-actions {
  display: none;
}

/* §4 — Alt actions: text + email side by side on desktop, stacked on narrow */
.gv-connect-alt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.gv-connect-alt-actions[hidden] { display: none; }

@media (max-width: 340px) {
  .gv-connect-alt-actions {
    grid-template-columns: 1fr;
  }
}

.gv-connect-alt-btn {
  width: 100%;
  min-height: 56px;
  font-size: 15px;
  letter-spacing: 0.08em; /* slightly tighter so the larger label still fits one line */
  padding: 0 14px;
  border-radius: var(--gv-radius);
}

.gv-connect-alt-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* §4b — Inline capture form (progressive disclosure for text/email-to-me).
   Built by contact-save.js and inserted right after the alt-actions row.
   On-brand: cream card field, gold-text label, warm focus ring, 48px+ targets. */
.gv-capture {
  margin: -12px 0 24px; /* pull up under the alt-actions grid (which has 24px below) */
  display: block;
  animation: gv-capture-in var(--gv-dur) var(--gv-ease-out) both;
}
.gv-capture[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gv-capture { animation: none; }
}

@keyframes gv-capture-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gv-capture__label {
  display: block;
  font-family: var(--gv-font-label);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gv-gold-text);
  margin: 0 0 8px;
}

.gv-capture__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.gv-capture__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px;
  font-family: var(--gv-font-body);
  font-size: 18px; /* 65+ body floor; also avoids iOS zoom-on-focus */
  color: var(--gv-text-body);
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  transition: border-color var(--gv-dur) var(--gv-ease),
              box-shadow var(--gv-dur) var(--gv-ease);
}
.gv-capture__input::placeholder { color: var(--gv-text-muted); }
.gv-capture__input:focus-visible {
  outline: 3px solid var(--gv-gold-text);
  outline-offset: 2px;
  border-color: var(--gv-gold-text);
}
.gv-capture__input[aria-invalid="true"] {
  border-color: var(--gv-gold-text);
  box-shadow: 0 0 0 1px var(--gv-gold-text);
}

.gv-capture__send {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 0 22px;
  border-radius: var(--gv-radius);
  font-size: 15px;
}

.gv-capture__error {
  margin: 8px 0 0;
  font-family: var(--gv-font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gv-gold-text); /* warm, on-brand — never a cold red */
}
.gv-capture__error[hidden] { display: none; }

@media (max-width: 360px) {
  .gv-capture__row { flex-wrap: wrap; }
  .gv-capture__send { width: 100%; }
}

/* §5 — Per-device instructions */
.gv-connect-instructions {
  border-top: 1px solid var(--gv-rule);
  padding-top: 20px;
}

.gv-connect-instructions__body {
  font-family: var(--gv-font-body);
  font-size: 18px;
  color: var(--gv-text-muted);
  line-height: var(--gv-body-lh);
}

/* contact-save.js fills data-gv-instructions; static noscript fallback also here */
.gv-connect-steps {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gv-connect-steps li {
  font-size: 18px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   §6 — Secondary links
   --------------------------------------------------------------------------- */
.gv-connect-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--gv-rule);
}

/* Each link is its own discrete, full-width tap row — not a run-on sentence */
.gv-connect-link {
  font-family: var(--gv-font-body);
  font-size: 17px;
  color: var(--gv-text-muted);
  text-decoration: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--gv-radius-sm);
  transition: color var(--gv-dur) var(--gv-ease), background-color var(--gv-dur) var(--gv-ease);
}
.gv-connect-link::after {
  content: "→";
  font-size: 15px;
  color: rgba(196, 140, 60, 0.55);
  transition: transform var(--gv-dur) var(--gv-ease), color var(--gv-dur) var(--gv-ease);
}
/* Hover gold on cream must use --gv-gold-text (#8A5A18, 5.47:1) — LOCKED contrast rule */
.gv-connect-link:hover::after {
  transform: translateX(3px);
  color: var(--gv-gold-text);
}

.gv-connect-link:hover {
  color: var(--gv-gold-text);
  background: rgba(196, 140, 60, 0.06);
}

.gv-connect-link:focus-visible {
  outline: 3px solid var(--gv-gold-text);
  outline-offset: 2px;
  border-radius: var(--gv-radius-sm);
}

/* Middot separators no longer needed — links are now stacked discrete rows */
.gv-connect-link-sep {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gv-connect-link { transition: none; }
}