/*
 * contact.css — page-specific styles for contact.html.
 *
 * Extracted from an inline <style> block in contact.html for caching and
 * HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the contact page needs to.
 *
 * Scope:
 *   - Split-Hero page overrides (.home-hero__grid, credential pills, mobile)
 *   - Contact info panel header + intro (.contact-info__*)
 *   - Contact cards (Email / Phone / Social) shared treatment (.contact-card*)
 *   - Social brand buttons inside the contact card (.contact-social__btn*)
 *   - "Send Us a Message" form panel background (#send-message.contact-form)
 */

/* ── Split Hero — shared core in css/style.css; page overrides only ──
   Per the "Hero Section Standard" in CLAUDE.md, the home page hero
   (index.html) is the canonical reference for spacing, font color,
   and other styling details. Page-specific content (title, copy,
   button labels, credential labels, photo) stays unique to this page. */
.home-hero__grid {
  display: grid;
  /* Single column, matching the home hero — the photo is no longer a
     grid column; it pins to the section's right half (see
     .home-hero__bleed below). */
  grid-template-columns: 1fr;
}
/* ── Hero photo — full-bleed feathered, mirroring the home hero
   (design handoff "Hero — Image Treatments", Option 2). The photo
   pins to the section's right half and dissolves into the navy via
   mask gradients (fade-in from the left over 24%, fade-out at the
   bottom past 78%), with a navy wash over the dissolve so the
   headline stays legible. ── */
.home-hero__content { position: relative; max-width: 690px; }
.home-hero__bleed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  /* Above the section's grid overlay (z 0); .container (z 1) comes
     later in the DOM so text still paints on top. */
  z-index: 1;
  pointer-events: none;
}
.home-hero__bleed-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  display: block;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.home-hero__bleed-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
  pointer-events: none;
}
.home-hero__credentials {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  /* flex-wrap kept (not in home hero) because this page has 4 credentials
     vs home's 2 — safety net so they wrap to a second line on narrow
     viewports instead of overflowing the column. */
  flex-wrap: wrap;
}
.home-hero__cred {
  /* display/align/gap match home hero so credentials with inner icons
     would render identically; for plain text creds (which this page
     uses) it's a no-op. */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  /* Muted slate at rest, brand teal on hover — trust-strip styling
     from the design handoff (Hero — Image Treatments); the hover
     tint is decorative since the row isn't interactive. Mirrors the
     home page hero. */
  color: rgba(160, 178, 206, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s ease;
}
.home-hero__cred:hover {
  color: var(--teal);
}
/* Connect-page divider override matching home (global rule in
   css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
   handoff trust-strip hairline, thickened to 2px wide. */
.home-hero__cred-divider {
  width: 2px;
  height: 13px;
  background: rgba(255, 255, 255, 0.22);
}
/* Hero glow customizations — mirror the home page hero per CLAUDE.md.
   - Top-right circle glow removed; ::before repurposed as the
     grid-line layer, radially masked (per the design handoff's
     bg-grid) so the grid fades out toward the lower-right and never
     shows behind the full-bleed photo's feathered edges.
   - All glows removed: ::after (which carried the bottom-edge teal
     ellipse glow) is disabled entirely. */
.home-hero::before {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
  mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
}
/* When the full-bleed photo is showing (>1100px), also clamp the grid
   horizontally so it ends just past the CTA row's last button and
   never reaches the photo's feathered edge — same values as the home
   hero. */
@media (min-width: 1101px) {
  .home-hero::before {
    -webkit-mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    mask-composite: intersect;
  }
}
.home-hero::after {
  display: none;
}
/* Below ~1100px the text column would run into the photo's opaque
   zone, so the bleed hides and the hero goes text-only — same
   breakpoint as the home hero. */
@media (max-width: 1100px) {
  .home-hero__bleed { display: none; }
}
@media (max-width: 900px) {
  .home-hero__title { font-size: 38px; }
  /* Drop the forced headline break on small screens — the narrow column
     wraps naturally there (same pattern as the home hero). */
  .home-hero__title br { display: none; }
}

/* ── Contact Info Panel Redesign ── */
.contact-info__label-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 14px;
}
.contact-info__heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 35px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.contact-info__intro {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 30px;
  max-width: 380px;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* Fix all three stacked cards (Email / Phone / Social) to the same height.
     The Social card is naturally tallest because its body holds a "Follow Us"
     label plus a 32px row of social-icon buttons; min-height brings Email /
     Phone up to match. align-items:center keeps their shorter content
     vertically centered inside the taller box. */
  min-height: 88px;
  box-sizing: border-box;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.08),
    0 12px 32px rgba(11, 27, 61, 0.08),
    0 2px 8px rgba(11, 27, 61, 0.08);
}
.contact-card:hover {
  border-color: var(--teal);
  box-shadow: 0 12px 32px rgba(43,191,154,0.2);
  transform: translateY(-2px);
}
/* Icon wrapper holds the brand-logo image; background:none + padding:0 because
   the image already supplies its own square treatment and we want it edge to
   edge. The flex centering kept here so future replacements (e.g., an SVG glyph)
   render correctly inside the 44×44 box. */
.contact-card__icon {
  width: 44px;
  height: 44px;
  background: none;
  padding: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  /* Softened to read as a subtle card mark rather than a hard logo.
     Matches the .svc-card__icon-wrap img treatment on the home page. */
  opacity: 0.6;
}
.contact-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  margin-bottom: 3px;
}
.contact-card__value {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}
.contact-social__icons {
  display: flex;
  gap: 10px;
  /* Lift the icon row off the "Follow Us" label sitting directly above. */
  margin-top: 6px;
}
.contact-social__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-400);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.contact-social__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.contact-social__btn--linkedin { background: rgba(0,119,181,0.1); border-color: rgba(0,119,181,0.25); color: #0077B5; }
.contact-social__btn--linkedin:hover { background: #0077B5; border-color: #0077B5; color: #fff; }
.contact-social__btn--facebook { background: rgba(24,119,242,0.1); border-color: rgba(24,119,242,0.25); color: #1877F2; }
.contact-social__btn--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.contact-social__btn--x { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); color: #333; }
.contact-social__btn--x:hover        { background: #000;    border-color: #000;    color: #fff; }
/* Card body grows to fill the row after the 44px icon. Applied to all three
   cards so the click target (Email / Phone) spans the full card width, and
   the Social card's icon row has room to lay out. */
.contact-card__body {
  flex: 1;
}

/* Static variant — the Social Media card has clickable icons inside it but
   the card itself isn't a link. Revert the .contact-card hover lift / top
   teal accent / pointer cursor so it doesn't pretend to be interactive. */
.contact-card--static { cursor: default; }
.contact-card--static:hover {
  border-color: transparent;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.08),
    0 12px 32px rgba(11, 27, 61, 0.08),
    0 2px 8px rgba(11, 27, 61, 0.08);
  transform: none;
}
.contact-card--static:hover::before { transform: scaleX(0); }

/* ── Send Us a Message panel — uniform soft mint background ── */
#send-message.contact-form {
  background: #f4faf6;
  border: none;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.12),
    0 12px 32px rgba(11, 27, 61, 0.12),
    0 2px 8px rgba(11, 27, 61, 0.12);
}

/* Netlify-Forms honeypot wrapper — kept in the DOM so spam bots fill it,
   hidden from real users via display:none (also keeps screen readers from
   announcing the bait label). */
.contact-form__honeypot {
  display: none;
}

/* Form footer row — two reassurance bullets ("Replies within 1 business day",
   "Confidential …") on the left, submit button on the right. Wraps to a
   single column under narrow viewports so the button doesn't collide. */
.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-form__assurances {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__assurance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
}

/* Live region updated by handleContactSubmit() with success / error copy. */
#asuratrust-contact-status {
  margin-top: 16px;
  font-size: 14px;
}