/* ============================================
   Riley's Roofing — Shared Inner Page CSS
   Used by Contact + Terms & Conditions pages.
   Relies on the same :root tokens defined in
   the main riley-roofing.css stylesheet.
   ============================================ */

/* ── BREADCRUMB ── */
.rr-breadcrumb { margin-bottom: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: #9a9a9a; }
.rr-breadcrumb a { color: #9a9a9a; text-decoration: none; }
.rr-breadcrumb a:hover { color: var(--rr-green); }
.rr-breadcrumb [aria-current="page"] { color: var(--rr-green); }
.rr-breadcrumb-sep { margin: 0 8px; color: #555; }

/* ── GENERIC INNER HERO ── */
.rr-inner-hero { position: relative; min-height: 300px; background: #07090b; overflow: hidden; display: flex; align-items: center; }
.rr-inner-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.55) 100%),
    url('https://cms-staginglink3.com/riley-roofing/v1/wp-content/themes/twentytwentyfive/assets/images/hero-roof-house.jpeg') center 30%/cover no-repeat;
}
.rr-inner-hero-inner { position: relative; padding: 48px 0 42px; max-width: 680px; }
.rr-inner-hero h1 { font-family: var(--rr-font-head); font-size: 42px; line-height: .98; margin: 8px 0 16px; color: #fff; text-transform: uppercase; letter-spacing: -1px; }
.rr-inner-hero h1 span { color: var(--rr-green); }
.rr-inner-hero-text { color: #ccc; font-size: 15px; max-width: 520px; line-height: 1.55; margin-bottom: 0; }

/* ── SHARED SECTION SPACING (in case main CSS doesn't define) ── */
.rr-section { padding: 56px 0; background: #fff; }
.rr-section h2 { font-family: var(--rr-font-head); text-transform: uppercase; font-size: 28px; line-height: 1.1; letter-spacing: .3px; color: #111; margin: 0 0 20px; }

@media (max-width: 768px) {
  .rr-inner-hero { min-height: auto; }
  .rr-inner-hero-inner { padding: 32px 0 28px; }
  .rr-inner-hero h1 { font-size: 30px; letter-spacing: -.5px; }
  .rr-inner-hero-text { font-size: 14px; }
  .rr-section { padding: 40px 0; }
  .rr-section h2 { font-size: 22px; }
}