/* ==========================================================
   Franchise-City — lean, consolidated stylesheet
   ========================================================== */

/* ---------- 0) Design tokens ---------- */
:root{
  --fc-primary:#C6AA58;           /* gold */
  --fc-primary-dk:#1e40af;        /* deep blue (for gold→blue gradient) */
  --fc-secondary:#10b981;         /* emerald */
  --fc-secondary-dk:#059669;
  --fc-card:#ffffff;
  --fc-muted:#f8fafc;
  --fc-text:#0f172a;
  --fc-radius:18px;
  --fc-shadow:0 6px 22px rgba(0,0,0,.08);
  --fc-shadow-lg:0 12px 28px rgba(0,0,0,.12);

  /* Card sizing */
  --card-img-h: 230px;            /* hero image area on each card */
  --card-cta-h: 56px;             /* min height of CTA button */
  --card-cta-gap: 1rem;           /* gap from CTA to card edge/content */

  /* Hero knobs (set both to 0px to disable overhang) */
  --hero-overhang-left: 0px;      /* e.g. 150px to hang copy left */
  --hero-overhang-right: 0px;     /* e.g. 160px to hang video right */
  --hero-video-height: 520px;     /* desktop video height */
}

@media (min-width:768px){
  :root{ --card-img-h: 240px; }
}

/* ---------- 1) Page shell ---------- */
.single-franchise-city main.wrap.franchise-city{
  max-width:1280px;
  margin-inline:auto;
  padding:0 1.25rem 5rem;
  color:var(--fc-text);
}

/* ---------- 2) HERO (full-bleed bg, grid content) ---------- */
.single-franchise-city .city-hero{
  position:relative;
  /* content aligned to the same width as cards */
  max-width:1280px;
  margin-inline:auto;
  padding:4rem max(1.25rem, env(safe-area-inset-left))
          2rem  max(1.25rem, env(safe-area-inset-right));
  display:grid;
  gap:2rem;
  grid-template-areas:
    "copy"
    "cta"
    "media";                       /* mobile order */
  color:#fff;
  overflow:visible;                /* allow bg + overhangs */
  margin-bottom:3rem;
}

/* Paint a truly full-bleed background (edge-to-edge) */
.single-franchise-city .city-hero::before,
.single-franchise-city .city-hero::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;                     /* full viewport width */
  height:100%;
  transform:translateX(-50%) scale(1.05); /* center + hide blur edges */
  pointer-events:none;
}
.single-franchise-city .city-hero::before{
  z-index:-2;
  background:url("https://www.corpnet.com/wp-content/uploads/2019/12/World-Map-With-Franchise-Businesses-Marked.jpg")
             center/cover no-repeat;
  filter:blur(7px);
}
.single-franchise-city .city-hero::after{
  z-index:-1;
  background:rgba(0,0,0,.55);
}

/* Map areas */
.single-franchise-city .hero-copy{    grid-area:copy; }
.single-franchise-city .hero-buttons{ grid-area:cta;  }
.single-franchise-city .hero-media{   grid-area:media;}

@media (min-width:1000px){
  .single-franchise-city .city-hero{
    grid-template-columns:1fr 1fr;     /* mirrors the 2-up card grid */
    grid-template-areas:
      "copy  media"
      "cta   media";
    column-gap:2rem;
    align-items:start;
    padding-bottom:4rem;
  }
  /* Optional editorial “overhang” look */
  .single-franchise-city .hero-copy{
    margin-left:calc(-1 * var(--hero-overhang-left));
  }
  .single-franchise-city .hero-buttons{
    margin-left:calc(-1 * var(--hero-overhang-left));
  }
  .single-franchise-city .hero-media iframe{
    width:calc(100% + var(--hero-overhang-right)) !important;
    margin-right:calc(-1 * var(--hero-overhang-right)) !important;
  }
}

/* Hero text */
.single-franchise-city .hero-copy h1{
  margin:0 0 1rem;
  line-height:1.1;
  font-weight:800;
  font-size:clamp(2rem,4vw,3.25rem);
}
.single-franchise-city .hero-copy .city-desc{
  margin:0;
  max-width:65ch;
  line-height:1.6;
  font-size:1.0625rem;
}

/* Hero buttons (modern pills) */
.single-franchise-city .hero-buttons{
  display:flex; gap:1rem; flex-wrap:wrap; max-width:28rem; margin-top:.9rem;
}
.single-franchise-city .hero-btn{
  flex:1; padding:1rem 1.25rem; border-radius:999px;
  font:700 1.05rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-decoration:none; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--fc-primary),var(--fc-primary-dk));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.single-franchise-city .hero-btn.secondary{
  background:linear-gradient(135deg,var(--fc-secondary),var(--fc-secondary-dk));
  box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.single-franchise-city .hero-btn:hover{ transform:translateY(-3px); filter:saturate(1.06); box-shadow:var(--fc-shadow-lg); }

/* Hero media (video) */
.single-franchise-city .hero-media iframe{
  width:100%; height:240px; border:0; border-radius:16px; display:block;
}
@media (min-width:900px){
  .single-franchise-city .hero-media iframe{ height:var(--hero-video-height); }
}

/* ---------- 3) Franchise grid (2 per row on desktop) ---------- */
.single-franchise-city .franchise-grid{
  max-width:1280px; margin:2rem auto 4rem;
  display:grid; gap:2rem; grid-template-columns:1fr;
}
@media (min-width:768px){
  .single-franchise-city .franchise-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 4) Franchise card ---------- */
.single-franchise-city .franchise-card{
  position:relative;
  background:var(--fc-card);
  border-radius:var(--fc-radius);
  box-shadow:var(--fc-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  /* reserve room so the pinned CTA never covers content */
  padding-bottom:calc(var(--card-cta-h) + var(--card-cta-gap) + .5rem);
}
.single-franchise-city .franchise-card:hover{
  transform:translateY(-6px); box-shadow:var(--fc-shadow-lg);
}

/* Card image (full-bleed at top) */
.single-franchise-city .franchise-logo{
  width:100%; height:var(--card-img-h) !important; object-fit:cover; display:block;
}

/* Dark overlay only if image exists (supports :has or .has-image) */
.single-franchise-city .franchise-card:has(.franchise-logo)::before,
.single-franchise-city .franchise-card.has-image::before{
  content:""; position:absolute; left:0; right:0; top:0; height:var(--card-img-h);
  background:linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 38%, rgba(0,0,0,0) 80%);
  border-top-left-radius:var(--fc-radius); border-top-right-radius:var(--fc-radius);
  pointer-events:none; z-index:1;
}

/* Name centered on the photo when image exists */
.single-franchise-city .franchise-card:has(.franchise-logo) .franchise-name,
.single-franchise-city .franchise-card.has-image .franchise-name{
  position:absolute; z-index:2; top:18px; left:50%; transform:translateX(-50%);
  margin:0; max-width:calc(100% - 32px); text-align:center; color:#fff;
  font-weight:800; line-height:1.1; text-shadow:0 3px 14px rgba(0,0,0,.55);
  font-size:clamp(1.9rem, 2.4vw, 2.6rem);
}

/* Name in normal flow (no image case) */
.single-franchise-city .franchise-card:not(:has(.franchise-logo)) .franchise-name{
  position:static; transform:none; margin:1rem 1.5rem .5rem; color:var(--fc-text);
  text-shadow:none; font-weight:800; font-size:1.6rem; text-align:left;
}

/* Inner spacing for dynamic content */
.single-franchise-city .franchise-card > *:not(.franchise-logo):not(.franchise-name){
  padding-inline:1.5rem;
}
.single-franchise-city .franchise-card p.franchise-blurb{
  margin-top:1.25rem; margin-bottom:1rem; line-height:1.55; font-size:1.05rem;
}

/* Metrics mini-table (pill rows) */
.single-franchise-city .fr-metrics{
  width:100%; border-collapse:separate; border-spacing:0 .5rem; font-size:.95rem;
  margin-bottom:max(4rem, calc(var(--card-cta-h) + var(--card-cta-gap)));
}
.single-franchise-city .fr-metrics thead td{ font-weight:700; color:#475569; padding:.5rem .75rem; border:none; }
.single-franchise-city .fr-metrics tr{ background:var(--fc-muted); border-radius:12px; }
.single-franchise-city .fr-metrics td{ border:none; padding:.65rem .85rem; }
.single-franchise-city .fr-metrics td.label{ font-weight:600; color:#334155; width:48%; }

/* Pinned CTA (matches the reserved space so it never overlaps) */
.single-franchise-city .franchise-cta{
  position:absolute; left:1.5rem; right:1.5rem; bottom:var(--card-cta-gap);
  min-height:var(--card-cta-h); display:block; padding:.9rem 1.25rem;
  border-radius:12px; text-align:center; text-decoration:none;
  color:#fff; font-weight:700; font-size:1.05rem;
  background:linear-gradient(135deg,var(--fc-primary),var(--fc-primary-dk));
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.single-franchise-city .franchise-cta:hover{ transform:translateY(-2px); filter:saturate(1.05); box-shadow:0 14px 28px rgba(0,0,0,.2); }

/* ---------- 5) Injected CTA block (spans both columns) ---------- */
.single-franchise-city .cta-grid-block{
  grid-column:1/-1; background:var(--fc-muted); border-radius:var(--fc-radius);
  box-shadow:var(--fc-shadow); padding:2.5rem 2rem; text-align:center;
  display:flex; flex-direction:column; gap:1.25rem; align-items:center;
}
.single-franchise-city .cta-grid-block h2{ margin:0; font-size:2rem; font-weight:800; }
.single-franchise-city .cta-grid-block .subtitle{ margin:0; font-size:1.1rem; color:#334155; }
.single-franchise-city .cta-grid-block .cta-btns{ display:flex; flex-direction:column; gap:1rem; width:100%; max-width:24rem; }
.single-franchise-city .cta-grid-block .cta-btns .btn{
  padding:1rem 1.25rem; border-radius:999px; font-weight:700; text-decoration:none; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--fc-primary),var(--fc-primary-dk));
}
.single-franchise-city .cta-grid-block .cta-btns .btn.secondary{
  background:linear-gradient(135deg,var(--fc-secondary),var(--fc-secondary-dk));
}

/* ---------- 6) Factors & tables (unchanged) ---------- */
.single-franchise-city .factors-heading{ font-size:1.75rem; font-weight:800; margin:0 auto 1.25rem; text-align:center; }
.single-franchise-city .factors-desc{ max-width:60ch; margin:0 auto 3rem; line-height:1.65; font-size:1.0625rem; }

.single-franchise-city .dual-tables{
  display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:center;
  max-width:1280px; margin:3rem auto 0;
}
.single-franchise-city .data-table{
  flex:1 1 320px; max-width:520px; border-collapse:collapse; background:#fff; border:1px solid #000;
}
.single-franchise-city .data-table thead{ background:#f5f5f7; }
.single-franchise-city .data-table th,
.single-franchise-city .data-table td{ border:1px solid #000; padding:.9rem 1rem; }
.single-franchise-city .data-table tr:nth-child(even) td{ background:#fafafa; }

/* ---------- 7) Disclaimer ---------- */
.single-franchise-city .disclaimer{ font-size:.9rem; color:#666; text-align:center; max-width:72ch; margin:2rem auto 0; }

/* ================== PATCH: hero overhang + buttons + card title ================== */

/* 1) Desktop overhang amounts (set to taste). Mobile stays normal. */
@media (min-width:1000px){
  :root{
    --hero-overhang-left: 150px;   /* copy & buttons hang this far to the left */
    --hero-overhang-right: 160px;  /* video hangs this far to the right */
  }
}

/* 2) Buttons belong under the description even if they’re inside .hero-media */
.single-franchise-city .hero-buttons{ grid-area: cta; }        /* always the CTA area */
.single-franchise-city .hero-media{ display: contents; }       /* flatten wrapper */
.single-franchise-city .hero-media iframe{
  grid-area: media;                                            /* keep video on the right */
}

/* Re-assert the “overhang right” video sizing (so left edge stays on col 2) */
@media (min-width:1000px){
  .single-franchise-city .hero-media iframe{
    width: calc(100% + var(--hero-overhang-right)) !important;
    margin-right: calc(-1 * var(--hero-overhang-right)) !important;
    height: var(--hero-video-height);
    border-radius: 16px;
    align-self: start;
  }
}

/* === Franchise title: lower it ~30px from the previous spot === */
:root{ --card-title-top: 48px; }  /* was ~18px; 18+30 = 48px */

/* With image */
.single-franchise-city
  .franchise-card:has(.franchise-logo) .franchise-name,
.single-franchise-city
  .franchise-card.has-image .franchise-name{
  top: var(--card-title-top) !important;  /* lower */
  bottom: auto !important;
  left: 50%;
  transform: translateX(-50%) !important; /* stay horizontally centered */
}

/* If you use the CSS fallback image (no <img>): match the same position */
.single-franchise-city
  .franchise-card:not(:has(.franchise-logo)) .franchise-name{
  position: absolute;
  z-index: 2;
  top: var(--card-title-top) !important;
  left: 50%;
  transform: translateX(-50%) !important;
  margin: 0;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}


/* ===== Bridge CTA (between hero and grid) ===== */
.bridge-cta{
  max-width:1280px;
  margin: 1.75rem auto 2.25rem;
  padding: 1.2rem 1.25rem;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #f7f7ff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.bridge-line{
  margin:0;
  line-height:1.25;
  display:flex; flex-wrap:wrap; gap:.6ch;
  align-items: center; justify-content: center;
}

/* “Book a free call” — bold block text with red marker highlight */
.marker-word{
  position: relative;
  display: inline;                 /* lets the highlight wrap naturally */
  padding: .1em .4em;              /* space inside the highlight */
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  letter-spacing: .2px;
  color: #111;
  z-index: 0;
  /* keep the highlight on each wrapped line */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.marker-word::before{
  content: "";
  position: absolute;
  inset: .15em -.3em .15em -.3em; /* marker thickness & width */
  background: #ff4b4b;            /* red marker */
  border-radius: 8px;
  transform: rotate(-2deg);        /* hand-drawn feel */
  box-shadow: 0 2px 0 rgba(0,0,0,.04) inset, 0 3px 12px rgba(0,0,0,.12);
  z-index: -1;                     /* behind the text */
}

/* The rest of the sentence — readable “handwritten-ish” without loading fonts */
.script-rest{
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* If you later load a script font, put it first in this list */
  font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
  color: #111;
  letter-spacing: .15px;
}

/* Small-screen tweaks */
@media (max-width: 560px){
  .bridge-cta{ padding: .9rem .9rem; border-radius: 12px; }
  .marker-word{ display: inline; } /* no forced line break */
}

.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: .75rem max(1rem, env(safe-area-inset-left))
           calc(.75rem + env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-right));
  background: #0f172a;            /* dark bar */
  display: flex; justify-content: center;
  z-index: 1000; box-shadow: 0 -8px 20px rgba(0,0,0,.15);
}

/* Red-marker “pen” highlight style */
.sticky-cta__btn{
  position: relative;
  display: inline;                /* lets marker wrap across lines if needed */
  padding: .2em .6em;             /* tap area + space inside highlight */
  font-weight: 900;
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  letter-spacing: .2px;
  color: #111;                    /* dark text on red highlight */
  text-decoration: none;
  background: none; border: 0; border-radius: 0; /* remove pill look */
  cursor: pointer;

  /* keep the highlight on each wrapped line */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* the “marker” behind the text */
.sticky-cta__btn::before{
  content: "";
  position: absolute;
  inset: .18em -.35em .18em -.35em;       /* marker thickness & width */
  background: #ff4b4b;                    /* red pen */
  border-radius: 10px;
  transform: rotate(-2deg);                /* hand-drawn feel */
  box-shadow: 0 2px 0 rgba(0,0,0,.05) inset, 0 6px 18px rgba(0,0,0,.18);
  z-index: -1;                             /* behind the text */
}

/* micro-interactions */
.sticky-cta__btn:active{ transform: translateY(1px); }
.sticky-cta__btn:focus-visible{
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px;
}

@media (min-width: 900px){
  .sticky-cta{ display: none; }  /* mobile-only (optional) */
}