/*
 * RRR Studios — WordPress Additional CSS
 * rossrasberry.com
 * ─────────────────────────────────────────────────────────────
 * Sections:
 *   1. Services Page Fixes  (forms, radius, submit, path 05, admin bar)
 *   2. Graphite Theme Override  (nav, services, process, contact, footer)
 *   3. Page Background + Section Gap Fix
 * ─────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════
   1. SERVICES PAGE FIXES
═══════════════════════════════════════════════════════════ */

/* Form inputs — swap white bg for dark translucent */
.rrscope-field input,
.rrscope-field input[type="text"],
.rrscope-field input[type="email"],
.rrscope-field input[type="tel"],
.rrscope-field textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(232, 199, 125, 0.30) !important;
  border-radius: 4px !important;
  color: rgb(255, 243, 212) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rrscope-field select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(232, 199, 125, 0.30) !important;
  border-radius: 4px !important;
  color: rgb(255, 243, 212) !important;
}

.rrscope-field input::placeholder,
.rrscope-field textarea::placeholder {
  color: rgba(255, 243, 212, 0.38) !important;
  font-style: normal !important;
}

.rrscope-field input:focus,
.rrscope-field input[type="text"]:focus,
.rrscope-field input[type="email"]:focus,
.rrscope-field input[type="tel"]:focus,
.rrscope-field textarea:focus,
.rrscope-field select:focus {
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(232, 199, 125, 0.75) !important;
}

/* Dropdown option background — graphite, not wine */
.rrscope-field select option {
  background: rgb(14, 13, 12);
  color: rgb(255, 243, 212);
}

/* Border radius — path cards, panels, chips */
.rrscope-path    { border-radius: 6px !important; }
.rrscope-panel   { border-radius: 6px !important; overflow: hidden; }
.rrscope-detail  { border-radius: 6px !important; }
.rrscope-selected-list > * { border-radius: 3px !important; }
.rrscope-chip    { border-radius: 3px !important; }

/* Submit button */
.rrscope-submit {
  border-radius: 4px !important;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.rrscope-submit:hover {
  background: rgba(232, 199, 125, 0.12) !important;
  color: rgb(255, 243, 212) !important;
}

/* Path 05 — reduce dead space, two-column meta layout */
.rrscope-paths .rrscope-path:last-child {
  padding-bottom: 28px !important;
}
.rrscope-paths .rrscope-path:last-child .rrscope-path-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
}

/* WP Admin Bar offset (logged-in only) */
.admin-bar header.rr-nav-bar {
  top: 32px !important;
}
.admin-bar .rrscope {
  padding-top: calc(112px + 32px) !important;
}


/* ═══════════════════════════════════════════════════════════
   2. GRAPHITE THEME OVERRIDE
   Replaces all wine/burgundy colors across every page.
═══════════════════════════════════════════════════════════ */

/* CSS variable overrides — nav */
:root {
  --rr-nav-black:       #0C0B0A;
  --rr-nav-wine:        #141211;
  --rr-nav-wine-bright: #1D1B19;
}

/* Nav */
.rr-nav-shell {
  background: #0C0B0A !important;
}
.rr-nav-bar {
  background:
    radial-gradient(ellipse at 70% 0%,
      rgba(199, 163, 106, 0.09) 0%,
      rgba(199, 163, 106, 0.02) 28%,
      transparent 58%
    ),
    linear-gradient(180deg,
      #0C0B0A 0%,
      #111010 38%,
      #0E0D0C 68%,
      #0C0B0A 100%
    ) !important;
}
.rr-nav-cta {
  background: linear-gradient(
    135deg,
    rgba(199, 163, 106, 0.18) 0%,
    rgba(199, 163, 106, 0.08) 100%
  ) !important;
}
.rr-nav-cta:hover {
  background: linear-gradient(
    135deg,
    rgba(199, 163, 106, 0.26) 0%,
    rgba(199, 163, 106, 0.14) 100%
  ) !important;
}
.rr-nav-mobile-panel {
  background: rgba(14, 13, 12, 0.97) !important;
}
.rr-nav-mobile-cta {
  background: linear-gradient(
    135deg,
    rgba(199, 163, 106, 0.22) 0%,
    rgba(199, 163, 106, 0.10) 100%
  ) !important;
}

/*
  Services page — use html body .rrscope (specificity 0,1,2) to beat
  the widget's own embedded <style> block which uses .rrscope (0,1,0).
  Also override the widget's internal CSS custom properties scoped to .rrscope.
*/
html body .rrscope {
  --black:       #0C0B0A;
  --black-soft:  #111010;
  --wine:        #141211;
  --wine-soft:   #1A1817;
  --wine-bright: #1D1B19;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(199, 163, 106, 0.10) 0%,
      rgba(199, 163, 106, 0.03) 36%,
      transparent 62%
    ),
    linear-gradient(170deg,
      #141211 0%, #0E0D0C 38%, #0C0B0A 65%, #131110 100%
    ) !important;
}

html body .rrscope-path.is-active {
  background: linear-gradient(
    145deg,
    rgba(199, 163, 106, 0.12),
    rgba(14, 13, 12, 0.72)
  ) !important;
  box-shadow:
    0 0 42px rgba(199, 163, 106, 0.07),
    0 8px 32px rgba(0, 0, 0, 0.42) !important;
}
html body .rrscope-path:nth-child(4) {
  background: linear-gradient(
    145deg,
    rgba(11, 37, 69, 0.42),
    rgba(14, 13, 12, 0.54)
  ) !important;
}
html body .rrscope-detail {
  background:
    radial-gradient(circle at 0% 100%, rgba(199, 163, 106, 0.04), transparent 44%),
    rgba(14, 13, 12, 0.60) !important;
}
html body .rrscope-detail.is-active {
  box-shadow:
    0 0 44px rgba(199, 163, 106, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.32) !important;
}

/* Process page */
.rrprocx {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(199, 163, 106, 0.10) 0%,
      rgba(199, 163, 106, 0.03) 36%,
      transparent 62%
    ),
    linear-gradient(170deg,
      #141211 0%, #0E0D0C 38%, #0C0B0A 65%, #131110 100%
    ) !important;
}
.rrprocx-console {
  background:
    radial-gradient(circle at 0% 100%, rgba(199, 163, 106, 0.04), transparent 44%),
    rgba(14, 13, 12, 0.60) !important;
}

/* Contact page */
.rrcontactx {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(199, 163, 106, 0.10) 0%,
      rgba(199, 163, 106, 0.03) 36%,
      transparent 62%
    ),
    linear-gradient(170deg,
      #141211 0%, #0E0D0C 38%, #0C0B0A 65%, #131110 100%
    ) !important;
}
.rrcontactx-console {
  background:
    radial-gradient(circle at 0% 100%, rgba(199, 163, 106, 0.04), transparent 44%),
    rgba(14, 13, 12, 0.60) !important;
}

/* Footer compact (services + process pages) */
.rrf-footer-compact {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(199, 163, 106, 0.10) 0%,
      rgba(199, 163, 106, 0.03) 36%,
      transparent 62%
    ),
    linear-gradient(170deg,
      #181614 0%, #121110 38%, #0E0D0C 68%, #141312 100%
    ) !important;
}
.rrf-bright-spark-canvas,
.rrf-bright-spark-haze {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   3. PAGE BACKGROUND + SECTION GAP FIX
═══════════════════════════════════════════════════════════ */

body,
.elementor,
.elementor-section-wrap,
#page,
#content,
.site-content {
  background-color: #0E0D0C !important;
}

.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-widget-html {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  margin-top:     0 !important;
  margin-bottom:  0 !important;
}