/* Rochester, MN test market — page-specific styles only.
   The look (tokens, header, nav, buttons, hero, cards, footer) comes from the main
   site's /css/styles.min.css, loaded first on every Rochester page, so Rochester
   matches panthercoating.com and follows it when the main stylesheet changes.
   On rochester.panthercoating.com that file reaches the real /css/ only through the
   host-scoped 200! rule in _redirects. This file only covers pieces the main site
   has no class for, and uses the main site's tokens. */

/* No close button on the Rochester promo bar, so no space reserved for one. */
.roc .promobar__text { padding-right: 0; }

/* Current page in the nav (the main site has no aria-current style). */
.roc .nav-desktop__link[aria-current="page"] { background-color: var(--color-bg-section); }
.roc .nav-mobile__link[aria-current="page"] { color: var(--color-blue-dark); }

/* Hero: index uses a real <img> behind the main-site overlay so the photo keeps its alt text. */
.roc-hero { isolation: isolate; }
.roc-hero--photo { background-image: none; }
.roc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.roc-hero .roc-price-line { color: var(--color-blue); }
.roc-hero .hero__lede a { color: var(--color-blue); text-decoration: underline; }
.roc-flag { color: #D1D5DB; font-size: var(--text-body-sm); }
.roc-promo-pill,
.roc-preview-note {
  display: inline-block;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 8px 18px;
  color: rgba(255,255,255,0.95);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.roc-preview-note { border-radius: var(--radius-lg); }
.roc-preview-note[hidden] { display: none; }

/* Price and lede lines under the cards. */
.roc-price-line { font-size: var(--text-body-lg); font-weight: 700; margin-bottom: var(--space-4); }
.roc-price-line a { color: inherit; }
.roc-lede { font-size: var(--text-body-lg); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.roc-after { text-align: center; margin-top: var(--space-6); }
.roc-after p { margin-left: auto; margin-right: auto; }
.roc-note { font-size: var(--text-body-sm); color: var(--color-text-muted); }
.section-header .roc-note { margin: var(--space-2) auto 0; }
.roc .section-header { margin-bottom: var(--space-6); }

/* Headings that sit outside .section-header / .service-card. */
.roc .roc-panel h2 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.roc .roc-panel p { max-width: 70ch; flex: none; }

/* Numbered install steps, styled like the main site's cards. */
.roc-steps {
  list-style: none;
  counter-reset: roc-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.roc-steps li {
  counter-increment: roc-step;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: var(--color-text-muted);
}
.roc-steps li::before {
  content: counter(roc-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-blue);
  font-weight: 800;
  margin-bottom: var(--space-3);
}
.roc-steps strong { display: block; font-size: var(--text-h4); color: var(--color-black); margin-bottom: var(--space-2); }

/* Reviews: the attribution line is one string, so it gets one style. */
.roc-quote { margin: 0; }
.roc-quote footer { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-subtle); }

/* Company stats on the reviews page. */
.roc-stat {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-align: center;
}
.roc-stat strong { display: block; font-size: var(--text-h3); font-weight: 800; color: var(--color-black); margin-bottom: var(--space-1); }
.roc-stat span { font-size: var(--text-body-sm); color: var(--color-text-muted); }

/* Project photos. */
.roc-photos figure { margin: 0; }
.roc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.roc-photos figcaption { font-size: var(--text-body-sm); color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }

/* Contact: layout and the estimate form's look. Field names and structure are untouched. */
.roc-contact { align-items: start; }
.roc-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6) var(--space-5);
}
.roc-form { display: grid; gap: var(--space-4); }
.roc-form label { display: grid; gap: var(--space-2); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-black); }
.roc-form input,
.roc-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.roc-form input:focus,
.roc-form textarea:focus { outline: none; border-color: var(--color-blue-dark); box-shadow: 0 0 0 3px var(--color-blue-soft); }
.roc-form textarea { min-height: 130px; resize: vertical; }
.roc-form .roc-note { margin: 0; }
.roc-error { color: var(--color-error); margin: 0; }
.roc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: three columns (logo, contact, pages) instead of the main site's four. */
.roc-footer__label {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  margin-bottom: var(--space-4);
}
@media (min-width: 1024px) { .roc-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.roc .site-footer ul li a[href^="tel:"] { white-space: nowrap; }

@media (min-width: 640px) {
  .roc-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .roc-reviews { align-items: stretch; }
}

/* Mobile call/estimate bar: equal halves so "Request an estimate" fits on one line at 390px. */
.roc-cta-bar .mobile-cta-bar__btn--call,
.roc-cta-bar .mobile-cta-bar__btn--estimate { flex: 1 1 0; }