/* Maryland Homebuyer Hub — Simple Conversion Page
 *
 * Minimal, generic layer for the reusable "Simple Conversion Page" template:
 * short conversion and utility pages such as scheduling, quiz or contact.
 * Deliberately small. The shell, tokens, typography and compliance styling all
 * come from homepage.css and pillar-page.css; only hero and body rhythm live
 * here, and every colour reads from the existing token set.
 *
 * Cascade note: .mhh-simple-hero-inner, .mhh-simple-body and .mhh-simple-trust
 * all sit on elements that also carry .mhh-wrap, whose horizontal gutter is
 * owned by homepage.css (.mhh-wrap and the higher-specificity
 * .mhh-site-shell .mhh-wrap responsive rules). Vertical rhythm is therefore set
 * with padding-top / padding-bottom longhands only -- a padding shorthand here
 * silently zeroes that shared gutter and pushes the hero and body 32px left of
 * the header. For the same reason the 820px measure is applied to the hero's
 * children rather than to the .mhh-wrap element itself, which is pinned to
 * 1280px by .mhh-site-shell .mhh-wrap.
 */

.mhh-simple-main{overflow-x:clip}

/* ---------- hero ---------- */
.mhh-simple-hero{
  background:var(--mhh-cream,#f7f5f0);
  border-bottom:1px solid var(--mhh-line,#e7e4df);
}
.mhh-simple-hero-inner{
  padding-top:56px;
  padding-bottom:44px;
}
.mhh-simple-hero-inner>*{max-width:820px}
.mhh-simple-hero .mhh-kicker{margin-bottom:12px}
.mhh-simple-hero h1{
  font-size:46px;
  line-height:1.06;
  letter-spacing:-1.6px;
  font-weight:800;
  margin:0;
  color:var(--mhh-ink,#111214);
}

/* ---------- body ---------- */
.mhh-simple-body{
  padding-top:44px;
  padding-bottom:8px;
}
.mhh-simple-article{max-width:820px}
.mhh-simple-article>*:first-child{margin-top:0}
.mhh-simple-article p{margin:0 0 20px}

/* pillar-page.css opens .mhh-article h2 with a 76px top margin, which is the
 * right rhythm for a 5,000-word article and far too much air between the four
 * short sections of a conversion page. Scoped to the simple template only, so
 * long-form pages keep their rhythm. Schedule a Call carries no H2 inside the
 * article, so this cannot move it. */
.mhh-simple-article h2{margin-top:52px}

/* ---------- compliance ---------- */
.mhh-simple-trust{padding-bottom:64px}
.mhh-simple-trust .mhh-trust-panel{margin-top:40px}

/* Measure note: the compliance panel is emitted in its own .mhh-wrap, which is
 * pinned to 1280px, while the hero heading and the article above it are held to
 * the 820px measure. Without the constraint below the panel out-runs everything
 * above it by up to 381px at 1280px+ and 125px at 1024px -- the two columns stop
 * sharing a right edge. Every other MHH template avoids this by rendering the
 * panel INSIDE the 820px content column (page-buying-a-home-in-maryland.php and
 * the loan program template both do), so this restates that same measure rather
 * than inventing a new one. Applied to the panel, never to .mhh-wrap itself:
 * a max-width on the wrap would break the shared horizontal gutter. */
.mhh-simple-trust .mhh-trust-panel{max-width:820px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mhh-simple-hero-inner{padding-top:44px;padding-bottom:34px}
  .mhh-simple-hero h1{font-size:38px;letter-spacing:-1.2px}
  .mhh-simple-body{padding-top:34px;padding-bottom:4px}
}
@media (max-width:560px){
  .mhh-simple-hero-inner{padding-top:34px;padding-bottom:26px}
  .mhh-simple-hero h1{font-size:31px;letter-spacing:-.9px;line-height:1.08}
  .mhh-simple-body{padding-top:26px;padding-bottom:4px}
  .mhh-simple-trust{padding-bottom:48px}
}

/* ==========================================================================
 * START HERE (page 18) -- wider conversion shell
 *
 * Scoped to .page-id-18 ON PURPOSE. The 820px measure above is the correct
 * width for a short single-action page like Schedule a Call, which is one
 * paragraph, a list and a booking embed. Start Here is a different job: a
 * survey, a value panel, a routing grid and a CTA pair all need more room, and
 * at 1280px the 820px column leaves the page reading like a narrow blog post.
 *
 * Widening is applied to the CONTAINERS only. Reading width is untouched:
 * pillar-page.css already pins .mhh-article>p, >ul and >ol to 760px, so body
 * copy keeps its measure while panels, the survey and the grid use the extra
 * space. Nothing here can reach Schedule a Call or any other simple page.
 *
 * Cascade: simple-page.css is enqueued with a 'mhh-pillar-page' dependency and
 * prints after both pillar-page.css and cta-components.css, so these rules win
 * on source order; the .page-id-18 prefix raises specificity regardless.
 *
 * As always in this file: never put a max-width or a padding shorthand on a
 * .mhh-wrap element -- that silently breaks the shared horizontal gutter. The
 * measures below are applied to the wrap's CHILDREN.
 * ========================================================================== */

.page-id-18 .mhh-simple-hero-inner>*{max-width:960px}
.page-id-18 .mhh-simple-article{max-width:960px}
.page-id-18 .mhh-simple-trust .mhh-trust-panel{max-width:960px}

/* ---------- survey stage ----------
 * The survey is the primary conversion action, so its heading, its supporting
 * line, the reassurance line and the embed are framed as one block instead of
 * four loose siblings. Chrome is borrowed from .mhh-trust-panel (cream ground,
 * 5px red top rule) so this introduces no new design language. */

.page-id-18 .mhh-sh-stage{
  background:var(--mhh-cream,#f7f5f0);
  border:1px solid var(--mhh-line,#e7e4df);
  border-top:5px solid var(--mhh-red,#c91525);
  border-radius:9px;
  padding:30px 32px 32px;
  margin:36px 0 40px;
}
.page-id-18 .mhh-sh-stage h2{margin-top:0}
.page-id-18 .mhh-sh-stage>p{max-width:700px}

/* Reassurance line sits directly against the embed, so its bottom margin is
 * tightened rather than inheriting the 20px paragraph rhythm. */
.page-id-18 .mhh-sh-reassure{
  font-size:14px;
  font-weight:800;
  color:#5b5e63;
  margin:0 0 6px!important;
}

/* min-height is deliberately NOT raised here: the vendor's form_embed.js posts
 * the survey's measured height back, and reserving more than it needs would
 * leave dead cream space under a short form. */
.page-id-18 .mhh-sh-stage .mhh-start-here-embed{
  margin:0;
  box-shadow:0 6px 22px #00000012;
}

/* ---------- routing grid ----------
 * auto-fit rather than a fixed column count so the same rule serves the four
 * cards that render today and the seven that render once the manufactured,
 * renovation and construction hubs publish. At the 960px measure this resolves
 * to three columns, then two, then one, with no extra breakpoints. The
 * min(275px,100%) floor stops a single track out-running a narrow phone. */
.mhh-start-here-routes{
  grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr));
}

@media (max-width:900px){
  .page-id-18 .mhh-sh-stage{padding:26px 22px 26px;margin:30px 0 34px}
}
@media (max-width:560px){
  .page-id-18 .mhh-sh-stage{padding:22px 18px 22px;margin:26px 0 30px;border-radius:8px}
}


/* ==========================================================================
 * MARYLAND COUNTIES (page 24) -- directory hub
 *
 * Same widened container treatment as Start Here: the 820px measure suits a
 * single-column conversion page, not a 24-item scannable directory. Reading
 * width is still owned by pillar-page.css (.mhh-article>p/ul/ol at 760px), so
 * only the containers grow.
 *
 * Never a max-width or padding shorthand on a .mhh-wrap element -- that breaks
 * the shared gutter. Measures go on the wrap's children.
 * ========================================================================== */

.page-id-24 .mhh-simple-hero-inner>*{max-width:960px}
.page-id-24 .mhh-simple-article{max-width:960px}
.page-id-24 .mhh-simple-trust .mhh-trust-panel{max-width:960px}

/* Fixed three columns on desktop: 24 jurisdictions divide evenly into 8 rows
 * of 3, so the last row is never stranded. Steps to 2 then 1 below. minmax(0,1fr)
 * rather than 1fr so a long name cannot force a track wider than its share. */
.mhh-county-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:26px 0 34px;
}
@media (max-width:820px){
  .mhh-county-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mhh-county-grid{grid-template-columns:minmax(0,1fr)}
}
.mhh-county-grid a,
.mhh-county-grid span{
  display:block;
  border:1px solid var(--mhh-line,#e7e4df);
  border-radius:8px;
  padding:15px 17px;
  background:#fff;
  font-size:15.5px;
  font-weight:800;
  line-height:1.3;
  color:#111;
  text-decoration:none!important;
}
.mhh-county-grid a:hover{border-color:#d2a31d;box-shadow:0 5px 18px #0000000a}

/* Jurisdictions with no published guide are rendered as a non-interactive
 * span, never a dead or draft-bound link. Muted so the difference from a live
 * card is obvious at a glance. */
.mhh-county-grid .is-pending{background:#fbfbfa;color:#5b5e63;font-weight:700}

/* Bottom CTA: existing .mhh-inline-cta / .mhh-button language from
 * pillar-page.css. Only the action row and a dark-outline secondary variant are
 * new, and both are scoped to this page. mhh-button--outline is not reused
 * because it is white-on-dark and would vanish on the cream CTA ground. */
.page-id-24 .mhh-county-actions{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
.page-id-24 .mhh-button--ghost{border:2px solid #111;color:#111!important;background:transparent}
.page-id-24 .mhh-button--ghost:hover{background:#111;color:#fff!important}

@media (max-width:620px){
  .page-id-24 .mhh-county-actions{display:grid}
  .page-id-24 .mhh-county-actions .mhh-button{width:100%}
}


/* ==========================================================================
 * MARYLAND REFINANCE OPTIONS (page 28) -- horizontal intent hub
 *
 * Same widened container treatment as Start Here and Maryland Counties: the
 * 820px measure suits a single-column conversion page, not a two-column card
 * comparison. Reading width still comes from pillar-page.css.
 *
 * Cards reuse .mhh-info-card / .mhh-two-col from pillar-page.css; only the
 * internal paragraph rhythm and the eligibility line are added, because
 * .mhh-info-card p sets margin:0 for single-paragraph cards and these carry two.
 * ========================================================================== */

.page-id-28 .mhh-simple-hero-inner>*{max-width:960px}
.page-id-28 .mhh-simple-article{max-width:960px}
.page-id-28 .mhh-simple-trust .mhh-trust-panel{max-width:960px}

.mhh-refi-card h3{margin:0 0 9px}
.mhh-refi-card p{margin:0 0 10px}
.mhh-refi-card p:last-child{margin-bottom:0}
.mhh-refi-who{font-size:14px;color:#5b5e63}
.mhh-refi-who strong{color:#111}