/* ==========================================================================
   JEWELERS MUTUAL PAGE  |  /pages/jewelers-mutual
   Scoped entirely to .jm-page so it cannot affect the rest of the site.
   Restyled to match the Montage Jewelry Care Plans page: flat brand-purple
   palette (no CSS custom properties), bordered light-lavender card blocks,
   and a plain-panel CTA/disclaimer treatment instead of a solid color block.
   Colors are hardcoded to Schmidt Jewelers' brand purple to match
   schmidt-custom.css exactly. This trades away the previous cross-client
   reusability (this file was --brand-primary driven before); if this page
   gets reused on another client, the hex values below need to be swapped.
   Bootstrap 5 baseline. Do NOT paste this into the page editor.
   Load it with the link tag documented in the delivery notes.

   NOTE: this file now also carries the CONTACT PAGE rules at the bottom.
   Those are NOT scoped to .jm-page — see the section header for why.
   ========================================================================== */
.jm-page {
  color: #333333;
  max-width: 860px;
  margin: 0 auto;
}
/* ---- Headings ---------------------------------------------------------- */
.jm-page .jm-h2 {
  color: #670067;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.jm-page .jm-h3 {
  color: #670067;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.jm-page .jm-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0;
}
.jm-page p {
  line-height: 1.65;
  margin: 0 0 0.85rem;
}
.jm-page p:last-child { margin-bottom: 0; }
/* ---- Blocks ------------------------------------------------------------ */
.jm-page .jm-intro { margin-bottom: 2rem; }
.jm-page .jm-section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid #e0d0e0;
}
/* Card treatment for the comparison / appraisal blocks, matching .montage-card */
.jm-page .jm-compare,
.jm-page .jm-appraisal {
  background-color: #f8f5f8;
  border: 1px solid #e0d0e0;
  border-radius: 8px;
  padding: 1.5rem;
}
/* ---- Coverage list ----------------------------------------------------- */
.jm-page .jm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.5rem;
}
.jm-page .jm-list li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.5;
}
.jm-page .jm-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #670067;
}
/* ---- Steps ------------------------------------------------------------- */
.jm-page .jm-steps {
  margin: 0;
  padding-left: 1.25rem;
}
.jm-page .jm-steps li {
  line-height: 1.6;
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.jm-page .jm-steps li::marker {
  color: #670067;
  font-weight: 700;
}
.jm-page .jm-step-title {
  font-weight: 600;
  display: inline;
}
/* ---- Small print inside sections --------------------------------------- */
.jm-page .jm-note {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
}
/* ---- Call to action ----------------------------------------------------
   Montage-style plain panel instead of a solid purple block: light lavender
   background, dark ink text, and a solid-purple button doing the emphasis
   instead of the whole section. */
.jm-page .jm-cta {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem;
  background-color: #f8f5f8;
  border: 1px solid #e0d0e0;
  border-radius: 8px;
  text-align: center;
}
.jm-page .jm-cta-text {
  color: #333333;
  font-size: 1.0625rem;
  margin: 0 0 1rem;
}
.jm-page .jm-cta-buttons {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}
.jm-page .jm-btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 3px;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jm-page .jm-btn-primary {
  background-color: #670067;
  color: #FFFFFF;
  border: 1px solid #670067;
}
.jm-page .jm-btn-primary:hover,
.jm-page .jm-btn-primary:focus {
  background-color: #4d004d;
  border-color: #4d004d;
  color: #FFFFFF;
}
.jm-page .jm-btn-outline {
  background-color: transparent;
  color: #670067;
  border: 1px solid #670067;
}
.jm-page .jm-btn-outline:hover,
.jm-page .jm-btn-outline:focus {
  background-color: #670067;
  color: #FFFFFF;
}
/* Visible keyboard focus for accessibility */
.jm-page .jm-btn:focus-visible {
  outline: 2px solid #670067;
  outline-offset: 2px;
}
/* ---- Disclaimer ---------------------------------------------------------
   Matches .montage-disclaimer: light lavender panel, top rule, muted grey
   text, purple links. */
.jm-page .jm-disclaimer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e0d0e0;
  background-color: #f8f5f8;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #666666;
}
.jm-page .jm-disclaimer a {
  color: #670067;
  text-decoration: underline;
}
.jm-page .jm-updated {
  margin-top: 0.5rem;
  font-style: italic;
}
/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .jm-page .jm-list {
    grid-template-columns: 1fr;
  }
  .jm-page .jm-cta-buttons {
    flex-direction: column;
  }
  .jm-page .jm-btn {
    width: 100%;
  }
}

/* ==========================================================================
   CONTACT PAGE  |  /contact-us  —  "Call or Text"
   /contact-us is a Punchmark system page, so its markup cannot be edited in
   the page editor and there is no wrapper class to scope against. These rules
   therefore target the phone block by STRUCTURE: the only column on that page
   that contains a <p class="lead"> wrapping a tel: link.
   That means they are not .jm-page scoped — if this file is ever loaded
   site-wide rather than only on /pages/jewelers-mutual, confirm no other page
   uses that same .container.max-width-900 > .col-md-6 > p.lead > a[tel:]
   structure. Nothing else on Schmidt currently does.
   ========================================================================== */
/* ---- Relabel heading: "Call Arkansas City Store" -> "Call or Text ..." --- */
.container.max-width-900 .col-md-6:has(> p.lead > a[href^="tel:"]) > h2 {
  font-size: 0;
  line-height: 0;
}
.container.max-width-900 .col-md-6:has(> p.lead > a[href^="tel:"]) > h2::after {
  content: "Call or Text Our Arkansas City Store";
  display: block;
  /* Matches Bootstrap 5 .h4 — adjust if the Turquoise theme overrides it */
  font-size: 1.5rem;
  line-height: 1.2;
  color: #670067;
}
/* ---- Supporting line beneath the number -------------------------------- */
.container.max-width-900 .col-md-6:has(> p.lead > a[href^="tel:"]) > p.lead::after {
  content: "Call or text us during store hours \2014 we answer both.";
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: #666666;
}
/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .container.max-width-900 .col-md-6:has(> p.lead > a[href^="tel:"]) > h2::after {
    font-size: 1.25rem;
  }
}