/* ==========================================================================
   By Jillian Rose — Contact Page
   Only loaded on page-templates/contact.php (see functions.php), never
   site-wide. Uses exclusively existing design-system tokens — no new
   colors, fonts, or spacing values introduced here, with one flagged
   exception: .bjr-contact-icon-badge is a new small component (no
   circular icon-badge exists anywhere else on the site yet to reuse),
   built from existing tokens only (--color-accent border,
   --color-accent-dark icon fill).
   ========================================================================== */

/* ---- Hero: full-bleed banner — photo fills the entire section as a
   background (position:absolute, object-fit:cover), gradient scrim
   behind the text, script graphic/heading/divider/copy overlaid on
   top, left-aligned. Same structural pattern as .bjr-contact-thankyou-
   media below (and the Privacy Policy/Terms of Use hero,
   .legal-hero-media/-photo/-gradient in legal.css) — replaces the
   earlier split-column layout entirely. Gradient values are the same
   rgba() equivalents of --color-bg used on both of those. ---- */
.bjr-contact-hero { padding: 0; }
.bjr-contact-hero-media {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bjr-contact-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.bjr-contact-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.85) 30%, rgba(247,245,242,.45) 52%, rgba(247,245,242,0) 68%);
  pointer-events: none;
}
.bjr-contact-hero-text-wrap { position: relative; z-index: 3; width: 100%; }
.bjr-contact-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 460px;
}
.bjr-contact-hero-text p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 42ch;
  margin: 0;
}
/* Real script-graphic upload (attachment #1510), cropped to its real
   visible content before upload. */
.bjr-contact-lets-img {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 -6px;
}
/* Heading + divider wrapped together and centered as a shrink-to-fit
   unit — inline-flex column collapses to the width of whichever child
   ("Connect" or the divider's own max-width) is wider, and centers the
   other one relative to that shared width, so the divider centers
   directly under the word regardless of layout. */
.bjr-contact-hero-heading-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.bjr-contact-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(28px, 3.6vw, var(--text-h1));
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
/* Narrower instance of the shared .divider-motif component
   (components.css) — the same heart-divider treatment used under the
   Privacy Policy/Terms of Use hero title and the Start Here headings,
   just constrained to a short width here instead of spanning the full
   container. Centering comes from the parent group above. */
.bjr-contact-heading-divider {
  max-width: 130px;
  margin: var(--space-1) 0 var(--space-2);
}
.bjr-contact-heading-divider .icon { width: 14px; height: 14px; color: var(--color-accent); }

@media (max-width: 900px) {
  .bjr-contact-hero-media { min-height: 380px; }
  .bjr-contact-hero-text { max-width: 100%; }
  /* Same top-to-bottom fallback used on the legal hero/other full-
     bleed banners at this breakpoint — the photo crops narrower here,
     so a left-right fade can't rely on the same negative space. */
  .bjr-contact-hero-gradient {
    background: linear-gradient(180deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.88) 55%, rgba(247,245,242,.55) 100%);
  }
}

/* ---- Two-column main section: real Ninja Forms form (left) + info
   column (right), sitting on a shared soft blush wash — same
   rgba(182,138,147, x) derivation of --color-accent already used for
   the affiliate-disclosure bubble and Start Here's Most-Loved Posts
   background, not a new color. ---- */
.bjr-contact-main { padding: var(--space-6) 0; background: rgba(182,138,147,.08); }
.bjr-contact-main-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
/* 30% larger than the original 220px, centered — shared by both
   "send a message" and "before you send" so they stay the same size. */
.bjr-contact-heading-img {
  display: block;
  width: 286px;
  height: auto;
  margin: 0 auto var(--space-2);
}

/* ---- Contact form: real Ninja Forms markup (form ID 1), styled via
   its own real input/textarea/submit elements — no DOM restructuring,
   so the real field registration/validation/email notification stays
   completely intact. ---- */
.bjr-contact-form-wrap { margin-top: var(--space-1); }
.bjr-contact-form-wrap .nf-field-container { margin-bottom: var(--space-2); }
/* Ninja Forms' own bundled stylesheet (display-opinions-light.css) sets
   an unscoped ".nf-form-content label{font-size:18px}" rule — equal
   selector specificity to a plain ".bjr-contact-form-wrap label", so
   whichever stylesheet happens to print later in <head> wins the tie
   (verified: nf-display-css loads after bjr-contact-css), which is why
   the Name/Email/Message labels were rendering at NF's 18px instead of
   ours. Scoped one level deeper (.nf-field-label label /
   .nf-field-label .nf-label-span — the real wrapper NF's own field
   template renders) so this wins outright on specificity, no
   !important needed. */
.bjr-contact-form-wrap .nf-field-label label,
.bjr-contact-form-wrap .nf-field-label .nf-label-span {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
/* The form's own title ("Contact Me", Ninja Forms' Form Title setting,
   show_title enabled) renders as a bare, unstyled heading — Ninja
   Forms has no CSS of its own for it, so it was falling back to the
   browser's default h3 size and competing with both the "send a
   message" graphic above it and the info column's EMAIL label.
   Matched to that EMAIL label's exact treatment (.bjr-contact-info-
   label): bold, uppercase, 13px. */
.bjr-contact-form-wrap .nf-form-title,
.bjr-contact-form-wrap .nf-form-title h1,
.bjr-contact-form-wrap .nf-form-title h2,
.bjr-contact-form-wrap .nf-form-title h3,
.bjr-contact-form-wrap .nf-form-title h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.bjr-contact-form-wrap input[type="text"],
.bjr-contact-form-wrap input[type="email"],
.bjr-contact-form-wrap input[type="tel"],
.bjr-contact-form-wrap textarea {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
}
.bjr-contact-form-wrap textarea { min-height: 100px; resize: vertical; }
.bjr-contact-form-wrap input[type="text"]::placeholder,
.bjr-contact-form-wrap input[type="email"]::placeholder,
.bjr-contact-form-wrap textarea::placeholder { color: var(--color-text-secondary); }
/* Submit: matches the site's real .btn-primary fill/weight/uppercase
   treatment, full width, centered heart via a background-image data
   URI (::after can't render inside a replaced <input>). !important on
   every property — Ninja Forms ships its own bundled CSS with a
   higher-specificity selector on the real submit button, which is why
   this needs to win deliberately rather than relying on plain
   selector weight. */
.bjr-contact-form-wrap input[type="submit"],
.bjr-contact-form-wrap button[type="submit"] {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  background-color: var(--color-button-fill) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 15px 46px 15px 25px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M12 21s-6.7-4.35-9.3-8.2C.8 10.1 1.4 6.6 4.4 5c2.3-1.2 5-.4 7.6 2.3C14.6 4.6 17.3 3.8 19.6 5c3 1.6 3.6 5.1 1.7 7.8C18.7 16.65 12 21 12 21z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 15px 15px !important;
  transition: background-color .25s ease !important;
}
.bjr-contact-form-wrap input[type="submit"]:hover,
.bjr-contact-form-wrap button[type="submit"]:hover { background-color: var(--color-button-fill-hover) !important; }
.bjr-contact-form-wrap .nf-field-container.submit-container,
.bjr-contact-form-wrap .submit-container { text-align: center; }
.bjr-contact-form-fineprint {
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* ---- Info column ---- */
.bjr-contact-info-col > p { font-size: 14.5px; line-height: 1.65; color: var(--color-text); margin: 0 0 var(--space-3); }
.bjr-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.bjr-contact-info-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.bjr-contact-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bjr-contact-icon-badge .icon { width: 17px; height: 17px; color: var(--color-accent-dark); }
.bjr-contact-info-text { padding-top: 6px; }
.bjr-contact-info-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 4px;
}
.bjr-contact-info-text a {
  font-size: 14px;
  color: var(--color-accent-dark);
  text-decoration: none;
}
.bjr-contact-info-text a:hover { color: var(--color-text); }
.bjr-contact-info-text p { font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 var(--space-1); }
.bjr-contact-info-social { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.bjr-contact-info-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dark);
}
.bjr-contact-info-social a:hover { background: var(--color-button-fill); border-color: var(--color-button-fill); color: var(--color-white); }
.bjr-contact-info-social .icon { width: 15px; height: 15px; }

/* ---- Bottom banner: full-bleed, same structural pattern as the hero
   above and the Privacy Policy/Terms of Use hero
   (.legal-hero-media/-photo/-gradient in legal.css). Unchanged by this
   request. ---- */
.bjr-contact-thankyou { padding: 0; }
.bjr-contact-thankyou-media {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bjr-contact-thankyou-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.bjr-contact-thankyou-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.82) 32%, rgba(247,245,242,.4) 55%, rgba(247,245,242,0) 70%);
  pointer-events: none;
}
.bjr-contact-thankyou-text-wrap { position: relative; z-index: 3; width: 100%; }
.bjr-contact-thankyou-text { max-width: 440px; }
.bjr-contact-thankyou-img { display: block; width: 220px; height: auto; margin: 0 0 var(--space-2); }
.bjr-contact-thankyou-text p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 900px) {
  .bjr-contact-main-inner { grid-template-columns: 1fr; }
  .bjr-contact-thankyou-media { min-height: 320px; }
  .bjr-contact-thankyou-text { max-width: 100%; }
  .bjr-contact-thankyou-gradient {
    background: linear-gradient(180deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.88) 55%, rgba(247,245,242,.55) 100%);
  }
}