/* =========================================================
   CrossMerg — Service Areas (Base)
   File: /assets/themes/crossmerg/custom/css/service-areas-base.css
   Purpose:
   - Canonical shared styling for ALL Service Area pages
   - Prevent per-page drift (Front-of-Funnel vs Doing vs After)
   ========================================================= */

/* ============================================================
   SERVICE AREAS — BASE CONTRACT
   Applies to ALL service-area pages
   ============================================================ */

/* ----------------------------------------
   Opening container rhythm
   ---------------------------------------- */

.cm-page--service-areas .cm-sa-open-box {
  margin-top: 1.75rem;
}

/* ----------------------------------------
   Canonical opening note
   ---------------------------------------- */

.cm-page--service-area .cm-sa-open-note,
.cm-page--service-area .cm-fof-intro-note,
.cm-page--service-areas .cm-sa-open-box .cm-sa-open-note,
.cm-page--service-areas .cm-sa-open-box .cm-note.cm-sa-open-note {
  margin-top: 1.25rem;
  margin-bottom: 0;

  padding: 1rem 1.25rem;

  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 500;

  color: #334155; /* slate-700 */

  background: rgba(15, 23, 42, 0.04);
  border-left: 4px solid rgba(62, 121, 209, 0.35);
  border-radius: 0.5rem;

  /* 🔒 LEFT-ALIGNED CANONICAL BEHAVIOR */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;

  opacity: 0.92;
}

/* ----------------------------------------
   Slight tightening on small screens
   ---------------------------------------- */

@media (max-width: 768px) {
  .cm-page--service-area .cm-sa-open-note,
  .cm-page--service-areas .cm-sa-open-box .cm-sa-open-note {
    font-size: 0.94rem;
    padding: 0.9rem 1rem;
  }
}

/* ============================================================
   OVERRIDE CONTRACT (LOCKED)
   Must win vs per-page CSS loaded later
   ============================================================ */

.cm-page--service-area .cm-sa-open-box .cm-note.cm-sa-open-note,
.cm-page--service-area .cm-sa-open-box .cm-sa-open-note,
.cm-page--service-area .cm-sa-open-box .cm-fof-intro-note,

.cm-page--service-areas .cm-sa-open-box .cm-note.cm-sa-open-note,
.cm-page--service-areas .cm-sa-open-box .cm-sa-open-note,
.cm-page--service-areas .cm-sa-open-box .cm-fof-intro-note {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;

  padding: 1rem 1.25rem !important;

  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;

  color: #334155 !important;

  background: rgba(15, 23, 42, 0.04) !important;
  border-left: 4px solid rgba(62, 121, 209, 0.35) !important;
  border-radius: 0.5rem !important;

  /* 🔒 FORCE LEFT ALIGNMENT — NO CENTERING */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;

  opacity: 0.92 !important;
}

@media (max-width: 768px){
  .cm-page--service-area .cm-sa-open-box .cm-note.cm-sa-open-note,
  .cm-page--service-area .cm-sa-open-box .cm-sa-open-note,
  .cm-page--service-area .cm-sa-open-box .cm-fof-intro-note,

  .cm-page--service-areas .cm-sa-open-box .cm-note.cm-sa-open-note,
  .cm-page--service-areas .cm-sa-open-box .cm-sa-open-note,
  .cm-page--service-areas .cm-sa-open-box .cm-fof-intro-note{
    font-size: 0.94rem !important;
    padding: 0.9rem 1rem !important;
  }
}

/* ============================================================
   SERVICE AREA — SCROLL CUE (Canonical)
   - Works for Service Areas index + each Service Area page
   - Safe: scoped to marketing/service-area wrappers only
   ============================================================ */

/*
  Scroll cue is used on:
  - Service Area pages (.cm-page--service-area)
  - Service Areas index (.cm-page--service-areas)
  - Marketing pages like Home (body.marketing-site)
*/
body.marketing-site .cm-sa-scrollcue,
body.marketing-site .cm-scrollcue,

.cm-page--service-area .cm-sa-scrollcue,
.cm-page--service-areas .cm-sa-scrollcue{
  /* Make centering work reliably (margin: auto needs a block-level box) */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  border-radius: 999px;

  margin: 1.25rem auto 0;
  text-decoration: none;

  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(62, 121, 209, 0.18);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);

  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.marketing-site .cm-sa-scrollcue:hover,
body.marketing-site .cm-scrollcue:hover,

.cm-page--service-area .cm-sa-scrollcue:hover,
.cm-page--service-areas .cm-sa-scrollcue:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  background: rgba(62, 121, 209, 0.07);
}

body.marketing-site .cm-sa-scrollcue-inner,
body.marketing-site .cm-scrollcue-inner,

.cm-page--service-area .cm-sa-scrollcue-inner,
.cm-page--service-areas .cm-sa-scrollcue-inner{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(62, 121, 209, 0.75);
  border-bottom: 2px solid rgba(62, 121, 209, 0.75);
  transform: rotate(45deg);
  margin-top: -2px;
}

/* optional: subtle pulse so it reads as “action” */
@media (prefers-reduced-motion: no-preference){
  body.marketing-site .cm-sa-scrollcue-inner,
  body.marketing-site .cm-scrollcue-inner,

  .cm-page--service-area .cm-sa-scrollcue-inner,
  .cm-page--service-areas .cm-sa-scrollcue-inner{
    animation: cmScrollCuePulse 1.9s ease-in-out infinite;
  }
  @keyframes cmScrollCuePulse{
    0%, 100%{ transform: rotate(45deg) translateY(0); opacity: 0.85; }
    50%{ transform: rotate(45deg) translateY(3px); opacity: 1; }
  }
}