/* ============================================================
   Ranchers Choice Processing — Global Styles & Divi Overrides
   Applies brand typography, color, and layout on top of Divi 5.
   Monochrome: no hue introduced here — photography is the only color.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Base body ---- */
body,
.et_pb_section,
.et_pb_row {
  font-family: var(--font-body) !important;
  color: var(--text-body);
}

body {
  margin: 0;
  background: var(--color-bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings ---- */
h1, h2, h3, h4,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4 {
  font-family: var(--font-display) !important;
  color: var(--text-strong) !important;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}

/* ---- Links ---- */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

/* ---- Selection ---- */
::selection { background: var(--ink-900); color: var(--white); }

/* ---- Focus ---- */
:focus-visible {
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   DIVI 5 OVERRIDES
   Force the monochrome palette over Divi's defaults.
   ============================================================ */

/* Divi accent / highlight color → brand ink */
:root {
  --et-accent-color: var(--ink-900) !important;
}

/* Divi global header bg */
#et-main-area,
#page-container {
  background: var(--color-bg);
}

/* Divi header — dark background */
#main-header,
#main-header.et-fixed-header {
  background-color: var(--ink-900) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

#main-header.et-fixed-header.scrolled,
#main-header.et-fixed-header.et-fixed-header-scrolled {
  background-color: rgba(20, 20, 20, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Logo in header */
#main-header .logo_container img { max-height: 62px !important; width: auto; }

/* Primary nav — white text on dark header */
#et-top-navigation nav > ul > li > a {
  font-family: var(--font-condensed) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 0.84rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--bone-100) !important;
  transition: color var(--dur-fast) var(--ease-out) !important;
}
#et-top-navigation nav > ul > li > a:hover,
#et-top-navigation nav > ul > li.current-menu-item > a,
#et-top-navigation nav > ul > li.current_page_item > a {
  color: var(--white) !important;
}
#et-top-navigation nav > ul > li.current-menu-item > a,
#et-top-navigation nav > ul > li.current_page_item > a {
  border-bottom: 2px solid var(--white) !important;
}

/* "Contact Us" button in header */
.et_pb_button,
.et-pb-contact-form-btn,
.et_pb_module .et_pb_button {
  font-family: var(--font-condensed) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background-color: var(--ink-900) !important;
  color: var(--white) !important;
  border: 2px solid var(--ink-900) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.6em 1.4em !important;
  font-size: var(--text-sm) !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out) !important;
  box-shadow: var(--shadow-sm) !important;
}
.et_pb_button:hover,
.et_pb_module .et_pb_button:hover {
  background-color: var(--ink-700) !important;
  border-color: var(--ink-700) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}
.et_pb_button:active,
.et_pb_module .et_pb_button:active {
  background-color: var(--black) !important;
  border-color: var(--black) !important;
  transform: translateY(0) !important;
}

/* Ghost / "on dark" button variant — add class rcp-btn-ghost in Divi */
.rcp-btn-ghost.et_pb_button,
.rcp-btn-ghost .et_pb_button {
  background-color: transparent !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}
.rcp-btn-ghost.et_pb_button:hover,
.rcp-btn-ghost .et_pb_button:hover {
  background-color: var(--white) !important;
  color: var(--ink-900) !important;
}

/* Fullwidth header — force white subtitle (overrides Divi accent gold) */
.et_pb_fullwidth_header .et_pb_fullwidth_header_subhead,
.et_pb_fullwidth_header_subhead,
.et_pb_fullwidth_header .et_pb_header_content_wrapper p,
.et_pb_fullwidth_header .et_pb_header_content_wrapper .et_pb_fullwidth_header_subhead strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Divi module text colors */
.et_pb_text, .et_pb_text_inner,
.et_pb_blurb_description {
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-relaxed) !important;
}

/* Divi blurb (feature card) */
.et_pb_blurb .et_pb_module_header {
  font-family: var(--font-display) !important;
  color: var(--text-strong) !important;
}

/* Sections with dark bg class: rcp-section-dark */
.rcp-section-dark,
.et_pb_section.rcp-section-dark {
  background-color: var(--ink-900) !important;
  color: var(--white) !important;
}
.rcp-section-dark .et_pb_text,
.rcp-section-dark .et_pb_text_inner,
.rcp-section-dark h1,
.rcp-section-dark h2,
.rcp-section-dark h3,
.rcp-section-dark h4 {
  color: var(--white) !important;
}

/* Alt surface section: rcp-section-alt */
.rcp-section-alt,
.et_pb_section.rcp-section-alt {
  background-color: var(--bone-200) !important;
}

/* ============================================================
   UTILITY / BRAND CLASSES
   Reference these in Divi module CSS Class fields.
   ============================================================ */

/* Eyebrow / overline label */
.rc-eyebrow {
  font-family: var(--font-condensed) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  font-size: var(--text-sm) !important;
  color: var(--brand) !important;
  display: block;
  margin-bottom: var(--space-2);
}
.rcp-section-dark .rc-eyebrow,
.rc-eyebrow-light { color: var(--text-on-dark-muted) !important; }

/* Rule mark (thin horizontal brand bar) */
.rc-rule {
  display: inline-block;
  width: 40px;
  height: 3px;
  background: var(--brand);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.rcp-section-dark .rc-rule { background: var(--white); }

/* Container */
.rc-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section padding */
.rc-section { padding-block: var(--section-y); }

/* Headings — semantic scale */
.rc-display {
  font-family: var(--font-condensed) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  font-size: var(--text-display) !important;
  color: var(--text-strong) !important;
}
.rc-h1 { font-family: var(--font-display) !important; font-weight: var(--fw-bold) !important;     font-size: var(--text-3xl) !important; line-height: var(--leading-snug) !important; }
.rc-h2 { font-family: var(--font-display) !important; font-weight: var(--fw-semibold) !important; font-size: var(--text-2xl) !important; line-height: var(--leading-snug) !important; }
.rc-h3 { font-family: var(--font-display) !important; font-weight: var(--fw-semibold) !important; font-size: var(--text-xl)  !important; line-height: var(--leading-snug) !important; }
.rc-body { font-family: var(--font-body) !important; font-weight: var(--fw-regular) !important; font-size: var(--text-md) !important; line-height: var(--leading-relaxed) !important; color: var(--text-body) !important; }
.rc-small { font-family: var(--font-body) !important; font-size: var(--text-sm) !important; color: var(--text-muted) !important; }

/* Photo hero — full-bleed with charcoal gradient overlay */
.rcp-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}
.rcp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(14,14,14,0.88) 0%,
    rgba(14,14,14,0.60) 55%,
    rgba(14,14,14,0.30) 100%);
  pointer-events: none;
  z-index: 0;
}
.rcp-hero > * { position: relative; z-index: 1; }
.rcp-hero .rc-display,
.rcp-hero h1, .rcp-hero h2 { color: var(--white) !important; }
.rcp-hero .rc-eyebrow { color: rgba(255,255,255,0.78) !important; }

/* Centered hero (charcoal photo with centered white text) */
.rcp-hero-centered::before {
  background: rgba(14, 14, 14, 0.74) !important;
}

/* Reserve band — solid black with phone number */
.rcp-reserve-band {
  background: var(--ink-900) !important;
  color: var(--white) !important;
  text-align: center;
  padding: var(--space-7) var(--gutter) !important;
}
.rcp-reserve-band a { color: var(--white) !important; font-weight: var(--fw-semibold); }
.rcp-reserve-band a:hover { color: var(--bone-300) !important; }

/* Service / feature cards */
.rcp-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.rcp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Product card featured variant — add class rcp-card-featured */
.rcp-card-featured {
  border-color: var(--ink-900) !important;
  border-width: var(--border-width-strong) !important;
}

/* Gallery grid */
.rcp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.rcp-gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.rcp-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.rcp-gallery-item:hover img { transform: scale(1.04); }
.rcp-gallery-item .rcp-gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14,14,14,0.74), transparent);
  color: var(--white);
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  padding: var(--space-4) var(--space-3) var(--space-3);
}

/* Contact form inputs */
.et_pb_contact_field input,
.et_pb_contact_field textarea,
.et_pb_contact_field select,
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--text-body) !important;
  background: var(--white) !important;
  border: var(--border-width) solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.65em 0.85em !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
  width: 100% !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus, select:focus {
  border-color: var(--ink-900) !important;
  box-shadow: 0 0 0 3px rgba(20,20,20,0.1) !important;
  outline: none !important;
}

/* Footer */
#main-footer,
.et_pb_section.rcp-footer {
  background: var(--ink-900) !important;
  color: var(--white) !important;
}
#main-footer a,
.rcp-footer a { color: rgba(255,255,255,0.78) !important; }
#main-footer a:hover,
.rcp-footer a:hover { color: var(--white) !important; }
#main-footer h4,
.rcp-footer h4 {
  font-family: var(--font-condensed) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: var(--text-sm) !important;
  color: rgba(255,255,255,0.66) !important;
  margin-bottom: var(--space-4) !important;
}

/* Footer disclaimer (required — verbatim, small) */
.rcp-footer-disclaimer {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  text-align: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  margin-top: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* USDA bug placeholder */
.rcp-usda-bug {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  padding: var(--space-3);
  width: 80px; height: 80px;
  text-align: center;
  justify-content: center;
  line-height: 1.1;
}

/* Checklist bullet style */
.rcp-checklist { list-style: none; padding: 0; margin: 0; }
.rcp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}
.rcp-checklist li::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  min-width: 18px;
  background: var(--ink-900);
  border-radius: 50%;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.rcp-section-dark .rcp-checklist li { color: rgba(255,255,255,0.88); }
.rcp-section-dark .rcp-checklist li::before {
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Callout / compliance notice */
.rcp-callout {
  background: var(--bone-200);
  border-left: 3px solid var(--ink-900);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}

/* Pick-up only / compliance badge */
.rcp-badge {
  display: inline-block;
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  background: var(--bone-200);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.8em;
}
.rcp-badge-dark {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border-color: var(--border-on-dark);
}

/* Responsive helpers */
@media (max-width: 980px) {
  .rcp-hero { min-height: 55vh; }
}
@media (max-width: 767px) {
  .rcp-hero { min-height: 45vh; }
  .rcp-gallery { grid-template-columns: repeat(2, 1fr); }
}