/**
 * NowAskJesus Hero — styles
 *
 * All tuning lives in the custom properties at the top of .nak.
 * The two image URLs are injected inline by the shortcode, so this file
 * never needs editing when the artwork changes.
 */

.nak {
  /* ── Palette, read off the mockup ── */
  --ink:#3f1220;            /* headline dark */
  --burgundy:#8a1e3d;       /* italic line, labels, card heading */
  --btn:#75142f;            /* button fill */
  --body:#4d3038;           /* body copy */
  --cream-a:#fdf8f1;        /* bg left */
  --cream-b:#f6e5d2;        /* bg right */
  --pink:#fae2e8;           /* "You might be thinking" bubble */
  --sand:#fdf2d8;           /* "Jesus might ask" bubble */
  --pill-bg:#fdf6e6;
  --pill-br:#ecd6a4;
  --gold:#D9A43A;

  /* ── Fonts ──
     Body text inherits the theme's global font. The display family is
     set explicitly to match the mockup — change it here if Site Settings
     says the site uses something else. ── */
  --display:"Playfair Display", Georgia, serif;
  --sans:inherit;

  /* ── Portrait. In the plugin this becomes a real file URL. ── */
  --portrait: var(--nak-img);   /* set inline by the shortcode */
  --portrait-pos: 100% 32%;      /* focal point — keeps his face in frame when cropped */
  --veil-end: 62%;               /* how far the cream veil reaches before the image shows */

  position:relative; overflow:hidden; isolation:isolate;
  font-family:var(--sans); color:var(--body);
  background-color:var(--cream-a);
  background-image:var(--portrait);
  background-size:cover; background-position:var(--portrait-pos); background-repeat:no-repeat;
  padding:clamp(34px,5.5vw,68px) clamp(18px,5vw,60px) clamp(30px,4vw,52px);
}
/* cream veil over the left so the copy stays legible on top of the photo */
.nak::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--cream-a) 0%,
    rgba(253,248,241,.94) 30%,
    rgba(253,248,241,.55) 48%,
    rgba(253,248,241,0) var(--veil-end));
}
/* ── Button reset ──
   The theme and Elementor both style bare <button> elements. Depending on
   stylesheet order those rules can outrank the hero's, which is what turned
   the rotation dots into burgundy pills. Neutralise everything here, then
   restyle below with selectors specific enough that print order stops
   mattering. ── */
.nak button {
  -webkit-appearance:none; appearance:none;
  background:none; border:0; margin:0; padding:0;
  border-radius:0; box-shadow:none;
  font:inherit; color:inherit; line-height:inherit;
  letter-spacing:normal; text-transform:none;
}

.nak__inner { position:relative; max-width:1080px; margin:0 auto; }

/* ── Top row: copy left, bubbles right ── */
.nak__top { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(20px,3vw,44px); align-items:start; }

.nak__h1 {
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(2.15rem,4.55vw,3.55rem); line-height:1.11;
  letter-spacing:-.012em; margin:0 0 22px; max-width:11ch;
}
.nak__h1 span { display:block; font-style:italic; font-weight:700; color:var(--burgundy); }

.nak__body { font-size:clamp(.98rem,1.18vw,1.09rem); line-height:1.52; max-width:34ch; margin:0; }
.nak__body p { margin:0 0 4px; }
.nak__body .lead { font-weight:700; color:var(--ink); }
.nak__body .turn { font-weight:700; color:var(--burgundy); margin-top:9px; }
.nak__body .close { font-weight:700; color:var(--burgundy); margin-top:16px; font-size:1.06em; }

/* ── Thought bubbles ──
   Below 1200px these sit in normal flow under the copy. Above it they float
   over the figure — see the .nak__bubbles block near the bottom of this file
   for how that stays clear of his face. ── */
.nak__bubbles { position:relative; }
.nak button.bub {
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  border:none; border-radius:26px; padding:17px 21px;
  box-shadow:0 4px 18px rgba(63,18,32,.09);
  transition:transform .16s ease, box-shadow .16s ease, opacity .45s ease;
}
.nak button.bub:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(63,18,32,.15); }
.nak button.bub:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.nak button.bub.fade { opacity:0; }
.nak .bub__label { display:block; font-size:.82rem; font-weight:600; color:var(--burgundy); margin-bottom:6px; }
.nak .bub__text { display:block; font-size:1.02rem; line-height:1.42; color:var(--ink); }

/* Only the "You might be thinking" bubble does anything when clicked, so
   only it carries the arrow. The asymmetry is the explanation — a marked
   bubble next to an unmarked one reads as "this one is the button". */
.nak button.bub--you {
  background:var(--pink); max-width:290px; margin-left:auto;
  padding-right:46px;
}
.nak button.bub--you::before {
  content:""; position:absolute; top:15px; right:17px;
  width:15px; height:15px; opacity:.45;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1e3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
  transition:opacity .16s ease;
}
.nak button.bub--you:hover::before,
.nak button.bub--you:focus-visible::before { opacity:.9; }
.nak button.bub--jesus { background:var(--sand); max-width:268px; margin:38px auto 0 8%; }

.nak__dots { display:flex; gap:6px; margin:18px 0 0 8%; }
.nak .nak__dots button.nak-dot { width:6px; height:6px; padding:0; border:none; border-radius:50%;
  background:rgba(138,30,61,.24); cursor:pointer; transition:background .2s, transform .2s; }
.nak .nak__dots button.nak-dot[aria-current="true"] { background:var(--burgundy); transform:scale(1.4); }
.nak .nak__dots button.nak-dot:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ── The ask card ── */
.nak__card {
  background:#fff; border-radius:14px; padding:clamp(24px,3vw,34px) clamp(20px,3.4vw,40px);
  box-shadow:0 6px 26px rgba(63,18,32,.10); margin-top:clamp(24px,3.4vw,42px); text-align:center;
}
.nak__card h2 { font-family:var(--display); font-weight:700; color:var(--burgundy);
  font-size:clamp(1.35rem,2.1vw,1.65rem); margin:0 0 7px; }
.nak__card .hint { font-size:1rem; color:var(--body); margin:0 0 18px; }
/* Free-questions badge. Sits above the input on purpose: below it, the
   reassurance arrives after the person has already hesitated. */
.nak .nak__card p.nak__free {
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 26px; padding:9px 18px;
  background:var(--pill-bg); border:1px solid var(--pill-br); border-radius:999px;
  font-size:.95rem; font-weight:600; color:var(--burgundy); line-height:1.3;
}
.nak .nak__card p.nak__free svg { flex:none; color:var(--gold); }

.nak__field {
  display:block; width:100%; box-sizing:border-box; resize:none; overflow:hidden;
  font:inherit; font-size:1rem; line-height:1.5; color:var(--ink);
  background:#fff; border:1px solid #e3d6d0; border-radius:9px; padding:14px 16px;
  transition:border-color .16s, box-shadow .16s;
}
.nak__field::placeholder { color:#a99089; }
.nak__field:focus { outline:none; border-color:var(--burgundy); box-shadow:0 0 0 3px rgba(138,30,61,.12); }
.nak button.nak__go {
  margin-top:16px; font:inherit; font-size:1.03rem; font-weight:600; color:#fff;
  background:var(--btn); border:none; border-radius:9px; padding:14px 40px; cursor:pointer;
  transition:background .16s, transform .1s;
}
.nak button.nak__go:hover { background:#8a1a38; }
.nak button.nak__go:active { transform:translateY(1px); }
.nak button.nak__go:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.nak__history {
  display:none; margin-top:26px; align-items:center; justify-content:center; gap:7px;
  font-size:.96rem; font-weight:600; color:var(--burgundy);
  text-decoration:none;
}
.nak__history:hover { text-decoration:underline; text-underline-offset:3px; }
.nak__history svg { flex:none; color:var(--gold); }
/* only rendered for signed-in members — see note in the PHP */
.nak[data-auth="in"] .nak__history { display:inline-flex; }

.nak__safety {
  margin:20px auto 0; max-width:68ch;
  font-size:.8rem; line-height:1.55; color:#8a7169;
}
.nak__safety a { color:#7a6055; text-decoration:underline; text-underline-offset:2px; }
.nak__safety a:hover { color:var(--burgundy); }

/* ── Trust pills ── */
.nak__pills { display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.pill { display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--pill-bg); border:1px solid var(--pill-br); border-radius:10px;
  padding:14px 18px; font-size:.97rem; font-weight:600; color:var(--burgundy); }
.pill svg { flex:none; color:var(--gold); }

/* ── Mobile ── */
@media (max-width:1399px) {
  .nak__top { grid-template-columns:1fr; gap:26px; }
  .nak__h1 { max-width:14ch; }
  .nak__body { max-width:none; }
  .nak__bubbles { min-height:0; margin-top:4px; }
  .nak button.bub--you { margin-left:0; max-width:270px; }
  .nak button.bub--jesus { margin:22px 0 0 6%; max-width:250px; }
  .nak__dots { margin-left:0; justify-content:center; }
  .nak button.nak__go { width:100%; padding:14px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   Desktop: float the bubbles over the portrait.

   The trick is that .nak__bubbles is given the SAME geometry the
   background image resolves to — full height, 3:2 aspect ratio, pinned
   right — which is exactly what `background-size:cover` produces here,
   since the hero is always taller than 2/3 of its width. That makes
   percentage offsets inside it map onto the photograph itself rather
   than onto the viewport, so the bubbles hold their position relative
   to his face at any window size.

   His face occupies roughly 73%–87% across and 18%–39% down. Every
   offset below keeps clear of that box.
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   Phone-only background treatment. Kept separate from the layout
   breakpoint on purpose: the vertical cream fade below is designed for
   a narrow screen, and applying it to a 1300px window washes the
   figure out almost completely.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .nak { background-position:78% 20%; --portrait:var(--nak-img-sm); }
  .nak::before {
    background:linear-gradient(168deg,
      rgba(253,248,241,.62) 0%,
      rgba(253,248,241,.9) 24%,
      var(--cream-a) 46%);
  }
}

@media (min-width:1400px) {
  .nak__top { grid-template-columns:1fr; }
  .nak__copy { max-width:40%; }

  /* `cover` fills by height on a tall section and by width on a short one,
     and the bubble layer below can only match one of those. Filling by
     height always means the image is ALWAYS 1.5x the hero's height, pinned
     right — so the layer's geometry matches the photograph at every size,
     and the bubbles stop drifting when the hero gets taller or shorter.
     Any gap on the left is cream, which is what the mockup shows anyway. */
  .nak { background-size:auto 100%; }

  /* The bubble layer must measure against the SECTION, which is what the
     image is painted on — not against .nak__inner, which is capped at
     1080px and centred. While .nak__inner was the containing block the
     percentages below were resolving against the wrong box, so they only
     held at one particular hero height. .nak::before uses z-index:-1, so
     the content stacks correctly without inner being positioned. */
  .nak__inner { position:static; }

  .nak__bubbles {
    position:absolute; top:0; right:0;
    height:100%; width:auto; aspect-ratio:3/2;
    pointer-events:none;   /* the gaps between bubbles stay click-through */
  }
  .nak button.bub {
    position:absolute; pointer-events:auto;
    width:min(14%, 250px); max-width:250px; margin:0;
  }
  .nak button.bub--you   { top:12%; right:41%; }
  .nak button.bub--jesus { top:36%; right:46%; }

  /* ── Thought-bubble tails ──
     Three shrinking circles drawn as stacked radial gradients on a single
     pseudo-element, so no extra markup is needed. Each trail runs toward
     the figure on the right. Desktop only: below 1400px the bubbles stack
     under the copy and there is nothing to point at. ── */
  .nak button.bub::after {
    content:""; position:absolute; width:48px; height:38px;
    background-repeat:no-repeat; pointer-events:none;
    /* drop-shadow follows the alpha shape, so each circle gets its own
       shadow rather than the whole box. This is what lifts the dots off
       the photograph. */
    filter:
      drop-shadow(0 1px 2px rgba(63,18,32,.26))
      drop-shadow(0 3px 8px rgba(63,18,32,.18));
  }
  .nak button.bub--you::after {
    right:-42px; bottom:-30px;
    background-image:
      radial-gradient(circle 7px   at 8px 8px,   var(--pink) 98%, transparent 100%),
      radial-gradient(circle 5px   at 25px 21px, var(--pink) 98%, transparent 100%),
      radial-gradient(circle 3.5px at 40px 33px, var(--pink) 98%, transparent 100%);
  }
  .nak button.bub--jesus::after {
    right:-42px; top:-30px;
    /* --sand on its own disappears against the tan of his robe, so the
       dots run a shade brighter than the bubble they come from. Set this
       back to var(--sand) if the difference reads as a mismatch. */
    --sand-dot:#fffaea;
    background-image:
      radial-gradient(circle 7px   at 8px 30px,  var(--sand-dot) 98%, transparent 100%),
      radial-gradient(circle 5px   at 25px 17px, var(--sand-dot) 98%, transparent 100%),
      radial-gradient(circle 3.5px at 40px 5px,  var(--sand-dot) 98%, transparent 100%);
    filter:
      drop-shadow(0 1px 2px rgba(63,18,32,.34))
      drop-shadow(0 3px 9px rgba(63,18,32,.22));
  }
  /* Same width and same right edge as the pink bubble, centred within it,
     so they sit squarely underneath rather than off to one side. */
  .nak__dots {
    position:absolute; top:24%; right:41%; margin:0; pointer-events:auto;
    justify-content:center; width:min(14%, 250px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nak button.bub { transition:none; }
  .nak button.bub:hover { transform:none; }
}

/* visually hidden label for the textarea */
.nak__sr {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   BLOG HEADER — [nowask_blog_header]
   Shares the hero's palette and artwork so the blog stops looking like
   a different site. Shorter band: it introduces the page, it isn't
   competing with it.
   ═══════════════════════════════════════════════════════════════════ */
.nakbh {
  --ink:#3f1220; --burgundy:#8a1e3d; --body:#4d3038;
  --cream-a:#fdf8f1; --cream-b:#f6e5d2; --gold:#D9A43A;
  --display:"Playfair Display", Georgia, serif;

  position:relative; overflow:hidden; isolation:isolate;
  color:var(--body);
  background-color:var(--cream-a);
  background-image:var(--nakbh-img);
  background-size:auto 150%;              /* zoomed in so it reads as texture */
  /* Flush right. The image is sized by height, so it's narrower than the
     banner; anything short of 100% leaves bare cream on the right edge. */
  background-position:100% 22%;
  background-repeat:no-repeat;
  padding:clamp(38px,6vw,84px) clamp(20px,5vw,60px) clamp(34px,5vw,72px);
}
/* cream veil across the left so the title never fights the photograph */
.nakbh::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--cream-a) 0%,
    rgba(253,248,241,.95) 34%,
    rgba(253,248,241,.62) 56%,
    rgba(246,229,210,.35) 100%);
}
.nakbh__inner { position:relative; max-width:1080px; margin:0 auto; }

.nakbh__title {
  /* the deeper brand burgundy the page used before, not the brighter
     accent the hero uses for its italic line */
  font-family:var(--display); font-weight:700; color:#792d3f;
  font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.06;
  letter-spacing:-.015em; margin:0;
}
.nakbh__sub {
  font-size:clamp(1rem,1.35vw,1.15rem); line-height:1.6;
  max-width:34ch; margin:16px 0 0; color:var(--body);
}
.nakbh__rule {
  display:block; width:64px; height:3px; border-radius:2px;
  background:var(--gold); margin-top:26px;
}

@media (max-width:900px) {
  .nakbh { background-position:100% 18%; background-size:auto 130%; }
  .nakbh::before {
    background:linear-gradient(150deg,
      rgba(253,248,241,.82) 0%,
      rgba(253,248,241,.94) 40%,
      var(--cream-a) 78%);
  }
  .nakbh__sub { max-width:none; }
}