/* ============================================================
   Mprayer — search page
   Sits on top of styles.css + dravidian.css. Uses the Chola
   palette variables already defined on .dravidian.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the ask ---------- */
.mps-ask{
  position:relative;padding:56px 0 40px;
  background:
    radial-gradient(1100px 380px at 50% -140px, rgba(223,162,25,.20), transparent 70%),
    linear-gradient(180deg,var(--cream-2),var(--cream));
  border-bottom:1.5px solid var(--sand);
}
.mps-head{max-width:760px;margin:0 auto 26px;text-align:center}
.mps-head h1{font-size:clamp(2rem,4.4vw,3rem);margin:.25rem 0 .6rem;line-height:1.08}
.mps-head .lead{font-size:1.06rem;color:var(--ink-soft);margin:0}

/* ---------- the field ---------- */
.mps-form{max-width:820px;margin:0 auto}
.mps-field{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--line-gold);border-radius:16px;
  padding:8px 8px 8px 16px;
  box-shadow:0 14px 34px rgba(74,21,15,.13);
}
.mps-field:focus-within{border-color:var(--brick);box-shadow:0 16px 40px rgba(178,58,30,.20)}
.mps-ic{width:22px;height:22px;flex:none;color:var(--gold-deep)}
.mps-field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:'Inter',system-ui,sans-serif;font-size:1.06rem;color:var(--ink);
  padding:12px 2px;
}
.mps-field input::placeholder{color:#A98F72}
.mps-go{flex:none;padding:12px 24px;border-radius:11px}

/* ---------- example chips ---------- */
.mps-chips{
  max-width:900px;margin:18px auto 0;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:center;
}
/* --gold-deep on cream is 3.4:1 — under the 4.5:1 WCAG AA floor at this
   size. --brick-deep carries the same warmth at 7.9:1. */
.mps-chips-lab{
  font-family:'Poppins',sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brick-deep);margin-right:4px;
}
.mps-chip{
  font:inherit;font-size:.88rem;color:var(--maroon);
  background:rgba(255,255,255,.78);border:1.5px solid var(--sand);
  border-radius:999px;padding:7px 15px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s;
  max-width:100%;text-align:left;
}
.mps-chip:hover{border-color:var(--gold);background:#fff;transform:translateY(-1px)}

/* ---------- results ---------- */
.mps-results{padding:38px 0 56px}

.mps-understood{
  max-width:820px;margin:0 auto 14px;text-align:center;
  font-family:'Marcellus',Georgia,serif;font-size:1.32rem;line-height:1.4;
  color:var(--maroon);
}

.mps-care{
  max-width:820px;margin:0 auto 18px;padding:14px 18px;
  background:#FFF8E8;border:1.5px solid var(--gold);border-left-width:5px;
  border-radius:10px;font-size:.95rem;color:var(--ink);line-height:1.55;
}
.mps-care b{color:var(--maroon-ink)}
.mps-care--crisis{background:#FDF0EC;border-color:var(--brick)}
.mps-care--soft{background:#F6F1E4;border-color:var(--sand);border-left-color:var(--bronze-lt)}

.mps-status{
  max-width:820px;margin:0 auto 22px;text-align:center;
  font-family:'Poppins',sans-serif;font-size:.86rem;letter-spacing:.06em;
  color:var(--ink-soft);
}
.mps-status.is-working{color:var(--gold-deep)}
.mps-status.is-working::after{
  content:"";display:inline-block;width:.5em;text-align:left;
  animation:mpsDots 1.2s steps(4,end) infinite;
}
@keyframes mpsDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){
  .mps-status.is-working::after{animation:none;content:""}
}

/* ---------- result cards ---------- */
.mps-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;max-width:1080px;margin:0 auto;
}
.mps-card{
  display:flex;flex-direction:column;gap:7px;
  background:#fff;border:1.5px solid var(--sand);border-radius:14px;
  padding:18px 20px 18px;position:relative;overflow:hidden;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.mps-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brick),var(--gold),var(--tblue));
}
.mps-card:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 14px 30px rgba(74,21,15,.13)}

.mps-c-head{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mps-c-state,.mps-c-chip{
  font-family:'Poppins',sans-serif;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.mps-c-state{background:var(--stone);color:var(--gold-light)}
.mps-c-chip{background:var(--cream-2);color:var(--maroon);border:1px solid var(--sand)}

.mps-c-temple{font-family:'Marcellus',serif;font-size:1.22rem;color:var(--maroon);
  line-height:1.16;margin:4px 0 0}
.mps-c-ritual{font-family:'Poppins',sans-serif;font-size:.93rem;color:var(--brick);
  font-weight:500}

/* `.dravidian p` is (0,1,1), so a bare `.mps-c-why` loses to it and the
   sentence silently drops to the muted body colour. Match the theme's own
   descendant idiom to win. */
.dravidian .mps-c-why{
  margin:4px 0 0;font-size:.92rem;line-height:1.55;color:var(--ink);
  background:#FBF5E6;border-left:3px solid var(--gold);
  padding:10px 12px;border-radius:0 8px 8px 0;
}
.mps-c-why span{
  display:block;font-family:'Poppins',sans-serif;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:3px;
}
.mps-c-story{margin:4px 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}

.mps-c-tag{
  align-self:flex-start;font-family:'Poppins',sans-serif;font-size:.72rem;
  color:var(--patina);border:1px solid var(--patina);border-radius:999px;
  padding:3px 11px;margin-top:2px;
}
.mps-c-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:12px;
}
.mps-c-price{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:1.12rem;
  color:var(--maroon);line-height:1.1;
}
.mps-c-price small{display:block;font-weight:400;font-size:.7rem;color:var(--ink-soft);
  letter-spacing:.02em;margin-top:2px}
.mps-c-foot .btn{flex:none;padding:9px 16px;font-size:.86rem}

/* ---------- empty + footnote ---------- */
.mps-empty{
  max-width:640px;margin:8px auto 0;text-align:center;
  background:#fff;border:1.5px dashed var(--line-gold);border-radius:14px;padding:28px 24px;
}
.mps-empty h3{margin:0 0 8px;font-size:1.2rem}
.mps-empty p{margin:0 0 16px}

.mps-foot{
  max-width:760px;margin:30px auto 0;text-align:center;
  font-size:.82rem;line-height:1.6;color:var(--ink-soft);opacity:.9;
}

/* ---------- homepage search box ---------- */
.mps-hero-search{margin:18px 0 22px;max-width:560px}
.mps-hero-search .mps-field{padding:6px 6px 6px 14px;border-radius:14px}
.mps-hero-search .mps-field input{font-size:1rem;padding:10px 2px}
.mps-hero-search .mps-go{padding:10px 18px;font-size:.9rem}
/* The hero copy panel is dark at every width — a translucent scrim over the
   temple photo on desktop, a solid brown gradient once it stacks on mobile —
   so this line is light in both. It must out-specify `.dravidian p`, which
   would otherwise paint it dark brown on a dark panel and make it vanish;
   `.d-hero--photo .…` is how the theme scopes its other hero text. */
.d-hero--photo .mps-hero-hint{
  margin:8px 0 0;font-size:.84rem;color:#F0DEBE;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .mps-ask{padding:40px 0 32px}
  .mps-field{flex-wrap:wrap;padding:10px 12px}
  .mps-field input{flex:1 1 100%;order:2;padding:8px 0}
  .mps-ic{order:1}
  .mps-go{order:3;flex:1 1 100%;margin-top:6px}
  .mps-chips{justify-content:flex-start}
  .mps-grid{grid-template-columns:1fr}
  .mps-c-foot{flex-direction:column;align-items:stretch;gap:10px}
  .mps-c-foot .btn{text-align:center}
}


/* Same floor as dravidian.css - see the note there. */
@media (max-width: 700px) {
  .mps-c-state, .mps-c-chip, .mps-c-why span { font-size: .72rem; }
}