/* =========================================================
   Ranger Renovations — front-end + editor detail styles.
   Palette, fonts, spacing, buttons come from theme.json.
   This file adds what native blocks can't: eyebrows, card
   treatments, gallery hover-zoom, process/step dividers,
   and the WPForms skin. Keyed off custom block classNames.
   ========================================================= */

:root {
  --rr-espresso: #23180D;
  --rr-espresso-deep: #1A1109;
  --rr-gold: #D79A24;
  --rr-gold-dark: #B87F17;
  --rr-gold-soft: #E8C77E;
  --rr-cream: #FBF2DC;
  --rr-cream-2: #F4E9CF;
  --rr-ink: #2B2116;
  --rr-muted: #6E6152;
  --rr-muted-light: #C9BCA6;
  --rr-line: rgba(35,24,13,.12);
  --rr-line-dark: rgba(255,255,255,.14);
  --rr-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --rr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ---------- Eyebrow label ---------- */
.rr-eyebrow {
  font-family: var(--rr-sans) !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--rr-gold-dark) !important;
  margin-bottom: .6rem !important;
}
.rr-on-dark .rr-eyebrow, .has-espresso-background-color .rr-eyebrow,
.has-espresso-deep-background-color .rr-eyebrow { color: var(--rr-gold) !important; }
.rr-lead { color: var(--rr-muted); font-size: clamp(1.05rem,1.4vw,1.2rem); }
.rr-on-dark .rr-lead, .has-espresso-background-color .rr-lead { color: var(--rr-muted-light); }

/* Dark sections: force heading/paragraph legibility */
.has-espresso-background-color :where(h1,h2,h3),
.has-espresso-deep-background-color :where(h1,h2,h3),
.rr-on-dark :where(h1,h2,h3) { color: #fff; }

/* ---------- Buttons: outline variant ---------- */
.rr-btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--rr-espresso) !important;
  border: 1.5px solid var(--rr-espresso) !important;
}
.rr-btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--rr-espresso) !important;
  color: var(--rr-cream) !important;
}
.rr-on-dark .rr-btn-outline .wp-block-button__link,
.rr-on-dark .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
}
.rr-on-dark .rr-btn-outline .wp-block-button__link:hover,
.rr-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff !important;
  color: var(--rr-espresso) !important;
}

/* ---------- Header / nav ---------- */
.rr-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,242,220,.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rr-line);
}
.rr-header .wp-block-navigation a { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--rr-ink); }
.rr-header .wp-block-navigation a:hover { color: var(--rr-espresso); }
.rr-custom-logo .custom-logo, .rr-header .wp-block-site-logo img { height: 54px !important; width: auto; }
.rr-topbar { background: var(--rr-espresso); color: var(--rr-cream); }
.rr-topbar p, .rr-topbar a { font-size: .74rem; letter-spacing: .06em; margin: 0; }
.rr-topbar a { color: var(--rr-gold-soft); font-weight: 700; }
.rr-topbar a:hover { color: #fff; }
.rr-phone { font-weight: 700; color: var(--rr-espresso); font-size: .9rem; }

/* ---------- Hero ---------- */
.rr-hero { min-height: min(88vh, 780px) !important; }
.rr-hero .wp-block-cover__inner-container { width: 100%; max-width: 1240px; margin-inline: auto; }
.rr-hero h1 { color: #fff !important; margin-bottom: 1.2rem; }
.rr-hero .rr-eyebrow { color: var(--rr-gold-soft) !important; }
.rr-hero p { color: rgba(255,255,255,.9); max-width: 52ch; }
.rr-hero-inner { max-width: 640px; }

/* ---------- Benefit strip ---------- */
.rr-benefit { border-top: 1px solid var(--rr-line-dark); }
.rr-benefit .rr-b-title { font-family: var(--rr-serif); font-size: 1.15rem; color: var(--rr-gold-soft); font-weight: 600; margin: 0; }
.rr-benefit .rr-b-sub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rr-muted-light); margin: .2rem 0 0; }
.rr-benefit .wp-block-column { border-left: 1px solid var(--rr-line-dark); padding: 1.4rem 1rem; text-align: center; }
.rr-benefit .wp-block-column:first-child { border-left: 0; }

/* ---------- Trust checks ---------- */
.rr-trust .rr-tick {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rr-cream); color: var(--rr-gold-dark);
  font-size: .8rem; font-weight: 800; flex: none;
}
.rr-trust .rr-t-title { font-weight: 700; color: var(--rr-espresso); font-size: .95rem; margin: 0; }
.rr-trust .rr-t-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-muted); margin: .1rem 0 0; }

/* ---------- Split media rounding ---------- */
.rr-split-media img { border-radius: 3px; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Door style cards ---------- */
.rr-door-card {
  background: #fff; border: 1px solid var(--rr-line); border-radius: 3px; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.rr-door-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(35,24,13,.14); }
.rr-door-card .wp-block-image { margin: 0; }
.rr-door-card .wp-block-image img { aspect-ratio: 3/4; object-fit: cover; width: 100%; display: block; background: var(--rr-cream-2); }
.rr-door-name { font-family: var(--rr-serif); font-size: 1.15rem; color: var(--rr-espresso); margin: 0; }
.rr-door-type { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rr-muted); margin: .2rem 0 0; }
.rr-door-body { padding: 1.05rem 1.15rem 1.25rem; }

/* Chips */
.rr-chips .wp-block-button__link {
  background: #fff !important; color: var(--rr-muted) !important;
  border: 1px solid var(--rr-line) !important; border-radius: 40px !important;
  font-size: .68rem !important; letter-spacing: .12em; font-weight: 700;
  padding: .55rem 1.1rem !important; text-transform: uppercase;
}
.rr-chips .wp-block-button__link:hover { border-color: var(--rr-gold) !important; color: var(--rr-espresso) !important; background:#fff !important; }

/* ---------- Category / gallery covers ---------- */
.rr-cat, .rr-gcard { border-radius: 3px; overflow: hidden; }
.rr-cat .wp-block-cover__image-background,
.rr-gcard .wp-block-cover__image-background { transition: transform .6s ease; }
.rr-cat:hover .wp-block-cover__image-background,
.rr-gcard:hover .wp-block-cover__image-background { transform: scale(1.05); }
.rr-cat-label { font-family: var(--rr-serif); font-size: 1.3rem; color: #fff; margin: 0; font-weight: 500; }
.rr-cat-sub { font-size: .8rem; color: rgba(255,255,255,.82); margin: .2rem 0 0; }
.rr-gcat { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rr-gold-soft); font-weight: 700; margin: 0; }
.rr-gname { font-family: var(--rr-serif); color: #fff; font-size: clamp(1.2rem,1.8vw,1.7rem); margin: .25rem 0 0; }
.rr-gcard .wp-block-cover__inner-container { transition: transform .5s ease; }
.rr-gcard:hover .wp-block-cover__inner-container { transform: translateY(-6px); }

/* ---------- Numbered feature list ---------- */
.rr-num .rr-n { font-family: var(--rr-serif); font-size: 2.6rem; color: var(--rr-gold); line-height: 1; margin: 0; }
.rr-num .rr-num-item { border-top: 2px solid var(--rr-line); padding-top: 1.4rem; }
.rr-num h3 { font-size: 1.2rem; margin: .7rem 0 .5rem; }
.rr-num p { font-size: .92rem; color: var(--rr-muted); }

/* ---------- Trusted team (dark) ---------- */
.rr-team .wp-block-column { border-left: 1px solid var(--rr-line-dark); padding: 0 1.6rem; }
.rr-team .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.rr-team .rr-n { font-family: var(--rr-serif); color: var(--rr-gold); font-size: 1.4rem; margin: 0; }
.rr-team h3 { color: #fff; font-size: 1.35rem; margin: .5rem 0 .6rem; }
.rr-team p { color: var(--rr-muted-light); font-size: .95rem; }

/* ---------- Process steps (dark) ---------- */
.rr-steps .wp-block-column { border-left: 1px solid var(--rr-line-dark); padding: 0 1.8rem; }
.rr-steps .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.rr-steps .rr-sn { font-family: var(--rr-serif); color: var(--rr-gold); font-size: 1.1rem; letter-spacing: .05em; margin: 0; }
.rr-steps h3 { color: #fff; font-size: 1.4rem; margin: .8rem 0 .7rem; }
.rr-steps p { color: var(--rr-muted-light); font-size: .93rem; }

/* ---------- Consultation CTA + trust item ---------- */
.rr-cta-trust .rr-tc {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rr-espresso); color: var(--rr-gold); font-size: 1.1rem; font-weight: 800;
}
.rr-cta-trust .rr-tc-title { font-weight: 700; color: var(--rr-espresso); margin: 0; }
.rr-cta-trust .rr-tc-sub { color: var(--rr-muted); font-size: .92rem; margin: .1rem 0 0; }
.rr-form-card {
  background: #fff; border: 1px solid var(--rr-line); border-radius: 6px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px -30px rgba(35,24,13,.35);
}

/* ---------- WPForms skin (no default blue) ---------- */
.rr-form-card .wpforms-form { font-family: var(--rr-sans); }
.rr-form-card .wpforms-field { padding: 0 0 1.05rem; }
.rr-form-card .wpforms-field-label,
.rr-form-card .wpforms-field-label-inline {
  font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rr-espresso) !important; margin-bottom: .5rem !important;
}
.rr-form-card .wpforms-field-description { font-size: .78rem; color: var(--rr-muted); }
.rr-form-card input[type=text],
.rr-form-card input[type=email],
.rr-form-card input[type=tel],
.rr-form-card select,
.rr-form-card textarea {
  width: 100% !important; font-family: var(--rr-sans); font-size: .98rem !important; color: var(--rr-ink) !important;
  background: var(--rr-cream) !important; border: 1px solid var(--rr-line) !important;
  border-radius: 3px !important; padding: .85rem .95rem !important; box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rr-form-card input[type=text],
.rr-form-card input[type=email],
.rr-form-card input[type=tel],
.rr-form-card select { height: 50px !important; }
.rr-form-card textarea { min-height: 120px !important; resize: vertical; }
.rr-form-card input:focus,
.rr-form-card select:focus,
.rr-form-card textarea:focus {
  outline: none !important; border-color: var(--rr-gold) !important; background: #fff !important;
  box-shadow: 0 0 0 3px rgba(215,154,36,.22) !important;
}
/* two-column name row */
.rr-form-card .wpforms-field-row .wpforms-field-row-block { padding-right: .55rem; }
.rr-form-card .wpforms-field-row .wpforms-field-row-block:last-child { padding-right: 0; padding-left: .55rem; }
/* submit button */
.rr-form-card .wpforms-submit-container { text-align: stretch; }
.rr-form-card button[type=submit],
.rr-form-card .wpforms-submit {
  width: 100% !important; display: block !important;
  background: var(--rr-gold) !important; color: var(--rr-espresso) !important;
  font-family: var(--rr-sans) !important; font-weight: 800 !important; font-size: .78rem !important;
  letter-spacing: .13em !important; text-transform: uppercase !important;
  border: 0 !important; border-radius: 2px !important; padding: 1.15rem 2rem !important;
  cursor: pointer; transition: background .3s, color .3s, transform .3s;
}
.rr-form-card button[type=submit]:hover,
.rr-form-card .wpforms-submit:hover { background: var(--rr-gold-dark) !important; color: #fff !important; transform: translateY(-2px); }
/* placeholder shown before WPForms/form exists */
.rr-form-fallback { color: var(--rr-muted); font-size: .9rem; text-align: center; padding: 1.5rem; border: 1px dashed var(--rr-line); border-radius: 4px; }

/* ---------- Footer ---------- */
.rr-footer { background: var(--rr-espresso-deep); color: var(--rr-muted-light); }
.rr-footer .rr-fword { font-family: var(--rr-serif); font-size: 1.6rem; color: #fff; margin: 0; }
.rr-footer .rr-fmark { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--rr-gold); margin: .3rem 0 0; }
.rr-footer p { font-size: .95rem; color: var(--rr-muted-light); }
.rr-footer h4 { font-family: var(--rr-sans); color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; }
.rr-footer a { color: var(--rr-muted-light); font-size: .95rem; }
.rr-footer a:hover { color: var(--rr-gold-soft); }
.rr-footer .wp-block-navigation { flex-direction: column; gap: .3rem; }
.rr-footer-bottom { border-top: 1px solid var(--rr-line-dark); }
.rr-footer-bottom p { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-muted-light); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .rr-benefit .wp-block-column,
  .rr-team .wp-block-column,
  .rr-steps .wp-block-column { border-left: 0; padding-left: 0; padding-right: 0; }
  .rr-hero { min-height: 74vh !important; }
  .rr-topbar .rr-topbar-left { display: none; }
}
@media (max-width: 600px) {
  .rr-hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem) !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rr-cat .wp-block-cover__image-background,
  .rr-gcard .wp-block-cover__image-background,
  .rr-gcard .wp-block-cover__inner-container,
  .rr-door-card { transition: none !important; }
  .rr-cat:hover .wp-block-cover__image-background,
  .rr-gcard:hover .wp-block-cover__image-background { transform: none !important; }
  .rr-gcard:hover .wp-block-cover__inner-container { transform: none !important; }
}