/* ============================================================
   MarketResearchly - site theme for the public pages
   (features, methodology, pricing, about, contact, signup, login).

   The homepage was redesigned around the background film with
   frosted cards, serif display headings and violet pill buttons.
   These pages still carried the older look: cool grey on white,
   full-width grey bands split by rules, bold sans headings and
   square dark buttons. This file brings them in line with the
   homepage without touching their markup.

   Loaded by includes/header.php on body.site-warm only (never on
   the logged-in app pages or the homepage). The pages style
   almost everything inline, so most rules here match those
   inline declarations by attribute and need !important to win.
   Tokens (--mr-*) come from style.css.
   ============================================================ */

/* ---------- backdrop ----------
   The homepage film's palette as a still: light grey with soft violet
   glows (the film's light source). Fixed,
   so the page scrolls over one continuous surface like the film. */
html:has(body.site-warm) { background: #F5EFE8; }
body.site-warm {
  background:
    radial-gradient(1100px 720px at 88% -8%, rgba(86, 74, 153, .10), rgba(86, 74, 153, 0) 62%),
    radial-gradient(900px 640px at -4% 38%, rgba(154, 145, 200, .16), rgba(154, 145, 200, 0) 66%),
    radial-gradient(1000px 700px at 104% 96%, rgba(106, 95, 172, .10), rgba(106, 95, 172, 0) 62%),
    #F5EFE8;
  background-attachment: fixed;
}

/* ---------- nav ----------
   Stays fixed at the top while scrolling (the user asked for that
   everywhere except the homepage). Content slides under it, so the
   bar carries a frosted light surface instead of being clear. */
.site-warm .site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 240, 233, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(22, 22, 24, .06);
}
.site-warm .pill-outline { background: rgba(255, 255, 255, .7); }
/* No logo pill here: that pill exists only on the homepage, where the
   logo sits over the video. These pages have a plain light bar. */

/* ---------- sections: no bands, no rules ----------
   Full-width white / pale grey section fills become transparent so
   the backdrop runs through, as on the homepage (the user asked
   for no white patches there). The hairlines between sections go too.
   Dark sections keep their fill. */
.site-warm section[style*="background:#fff"],
.site-warm section[style*="background:oklch(0.985 0.001 262)"],
.site-warm section[style*="background:oklch(0.988 0.001 262)"],
.site-warm section[style*="background:oklch(0.99 0.001 262)"],
.site-warm section[style*="background:oklch(0.975 0.002 262)"] {
  background: transparent !important;
}
.site-warm section[style*="border-top:1px solid oklch(0.9"],
.site-warm header[style*="border-top:1px solid oklch(0.9"] {
  border-top-color: transparent !important;
}

/* Some pages (contact, pricing) wrap their top block in a full-width
   div rather than a section. A light fill with no rounded corners is
   one of those wrappers (or a row inside a card), so it goes clear too,
   along with its bottom rule. */
.site-warm div[style*="background:#fff"]:not([style*="border-radius"]),
.site-warm div[style*="background:oklch(0.985 0.001 262)"]:not([style*="border-radius"]),
.site-warm div[style*="background:oklch(0.988 0.001 262)"]:not([style*="border-radius"]),
.site-warm div[style*="background:oklch(0.99 0.001 262)"]:not([style*="border-radius"]),
.site-warm div[style*="background:oklch(0.975 0.002 262)"]:not([style*="border-radius"]) {
  background: transparent !important;
}
.site-warm div[style^="background:oklch(0.985 0.001 262);border-bottom"] { border-bottom-color: transparent !important; }
/* except the MarketResearchly column in the features comparison table:
   it keeps a highlight, as the homepage card's violet lane */
.site-warm div[style^="padding:17px 24px"][style*="background:oklch(0.975 0.002 262)"] {
  background: rgba(86, 74, 153, .06) !important;
}

/* ---------- cards: frosted glass like the homepage ----------
   a card is a light fill WITH rounded corners */
.site-warm div[style*="background:#fff"][style*="border-radius"],
.site-warm div[style*="background:oklch(0.985 0.001 262)"][style*="border-radius"],
.site-warm div[style*="background:oklch(0.988 0.001 262)"][style*="border-radius"],
.site-warm div[style*="background:oklch(0.99 0.001 262)"][style*="border-radius"],
.site-warm div[style*="background:oklch(0.975 0.002 262)"][style*="border-radius"],
.site-warm .feature-card {
  background: rgba(255, 255, 255, .74) !important;
  border-color: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px rgba(60, 50, 42, .08);
}
.site-warm .feature-card:hover { border-color: rgba(86, 74, 153, .35) !important; }

/* cool grey hairlines inside cards and tables take the theme grey */
.site-warm [style*="solid oklch(0.9"] { border-color: rgba(22, 22, 24, .08) !important; }

/* dark blocks take the homepage's dark */
.site-warm [style*="background:oklch(0.21 0.01 262)"] { background: #1E1D28 !important; }
.site-warm div[style*="background:oklch(0.21 0.01 262)"][style*="border-radius"] {
  box-shadow: 0 30px 70px rgba(30, 29, 40, .25);
}

/* ---------- headings: the homepage's serif display ----------
   Only family, weight and tracking are changed (never colour, so the
   white headings on dark panels stay white). The serif sets smaller
   than the old bold sans at the same size, so each inline size steps
   up to sit near the homepage's scale. */
.site-warm h1[style], .site-warm h2[style] {
  font-family: var(--mr-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}
.site-warm h1[style*="font-size:52px"] { font-size: 66px !important; line-height: 1.02 !important; }
.site-warm h1[style*="font-size:46px"] { font-size: 58px !important; line-height: 1.04 !important; }
.site-warm h1[style*="font-size:40px"] { font-size: 50px !important; line-height: 1.06 !important; }
.site-warm h2[style*="font-size:38px"] { font-size: 46px !important; line-height: 1.08 !important; }
.site-warm h2[style*="font-size:34px"] { font-size: 42px !important; }
.site-warm h2[style*="font-size:24px"] { font-size: 30px !important; }

/* ---------- buttons: the homepage's pills ---------- */
.site-warm .btn-dark,
.site-warm .btn-submit {
  background: var(--mr-accent) !important; color: var(--mr-accent-ink) !important;
  border-radius: 999px !important;
}
.site-warm .btn-dark:hover,
.site-warm .btn-submit:hover { background: #453B80 !important; color: var(--mr-accent-ink) !important; }
.site-warm .btn-light {
  background: rgba(255, 255, 255, .85) !important; border-radius: 999px !important;
  border-color: rgba(22, 22, 24, .12) !important;
}
.site-warm .btn-light:hover { background: #fff !important; }

/* form fields stay solid white so typing is crisp */
.site-warm .field-input { border-color: rgba(22, 22, 24, .14); border-radius: 12px; }
.site-warm .field-input:focus { border-color: var(--mr-accent); box-shadow: 0 0 0 3px rgba(86, 74, 153, .14); }

/* ---------- footer ---------- */
.site-warm .site-footer { border-top-color: rgba(22, 22, 24, .08); background: transparent; }