/* Rocky's Kabob Elements — shared base ("Smoke & Sawdust" design system) */

:root {
  --rk-cream: #fdf4e9;
  --rk-cream-2: #f7ead8;
  --rk-paper: #fffaf1;
  --rk-sand: #dad2c9;
  --rk-brown: #391f1e;
  --rk-brown-2: #2a1615;
  --rk-brown-3: #4a2b29;
  --rk-ink: #391f1e;
  --rk-ink-dim: #634d4d;
  --rk-muted: #8d7a72;
  --rk-orange: #ec4e20;
  --rk-orange-2: #ee673e;
  --rk-orange-deep: #c93e15;
  --rk-green: #6e9350;
  --rk-border: rgba(57, 31, 30, 0.14);
  --rk-border-strong: rgba(57, 31, 30, 0.28);
  --rk-border-light: rgba(253, 244, 233, 0.16);
  --rk-border-light-strong: rgba(253, 244, 233, 0.32);
  --rk-font-display: "Anton", "Arial Narrow", sans-serif;
  --rk-font-body: "Archivo Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rk-font-script: "Mrs Sheppards", cursive;
  --rk-radius: 6px;
  --rk-radius-lg: 10px;
  --rk-maxw: 74rem;
  --rk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rk-shadow-card: 0 14px 34px rgba(57, 31, 30, 0.14);
}

.rk-container {
  width: min(var(--rk-maxw), 92%);
  margin-inline: auto;
}

.rk-section {
  padding-block: 7rem;
  position: relative;
  font-family: var(--rk-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--rk-ink);
}

.rk-section h2,
.rk-section h3 {
  font-family: var(--rk-font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--rk-ink);
  text-wrap: balance;
}

.rk-section h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
}

.rk-section h3 {
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}

.rk-section p {
  margin: 0 0 1rem;
}

.rk-script {
  font-family: var(--rk-font-script);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  color: var(--rk-orange);
  line-height: 1.15;
}

h1 .rk-script,
h2 .rk-script {
  font-size: 1.08em;
  display: inline-block;
  transform: rotate(-2deg);
  margin-inline: 0.06em;
}

.rk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rk-orange);
  margin-bottom: 1rem;
}

.rk-kicker::before {
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--rk-orange);
}

.rk-section-head {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.rk-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.rk-section-head--center .rk-kicker {
  justify-content: center;
}

.rk-section-head--center .rk-kicker::before {
  display: none;
}

.rk-lede {
  color: var(--rk-ink-dim);
  font-size: 1.2rem;
}

/* Dark band */
.rk-section--dark {
  background-color: var(--rk-brown-2);
  color: var(--rk-cream);
}

.rk-section--dark h2,
.rk-section--dark h3 {
  color: var(--rk-cream);
}

.rk-section--dark .rk-lede {
  color: var(--rk-sand);
}

/* Buttons */
.rk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 2rem;
  min-height: 50px;
  border-radius: var(--rk-radius);
  border: 2px solid transparent;
  font-family: var(--rk-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--rk-ease-out), box-shadow 0.25s var(--rk-ease-out),
    background-color 0.25s, color 0.25s, border-color 0.25s;
}

.rk-btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.rk-btn:active {
  transform: scale(0.97);
}

.rk-btn--flame {
  background: var(--rk-orange);
  color: #fff;
  box-shadow: 0 8px 24px rgba(236, 78, 32, 0.35);
}

.rk-btn--flame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.55s var(--rk-ease-out);
}

.rk-btn--flame:hover {
  background: var(--rk-orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(236, 78, 32, 0.45);
  color: #fff;
}

.rk-btn--flame:hover::after {
  transform: translateX(110%);
}

.rk-btn--ghost {
  border-color: var(--rk-border-strong);
  color: var(--rk-ink);
  background: transparent;
}

.rk-btn--ghost:hover {
  border-color: var(--rk-orange);
  color: var(--rk-orange);
  transform: translateY(-2px);
}

.rk-section--dark .rk-btn--ghost,
.rk-cta-band .rk-btn--ghost {
  border-color: var(--rk-border-light-strong);
  color: var(--rk-cream);
}

.rk-btn--gold {
  background: var(--rk-brown);
  color: var(--rk-cream);
}

.rk-btn--gold:hover {
  background: var(--rk-brown-3);
  transform: translateY(-2px);
  color: var(--rk-cream);
}

/* Scroll reveal */
.rk-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--rk-ease-out), transform 0.7s var(--rk-ease-out);
}

.rk-reveal.is-inview {
  opacity: 1;
  transform: none;
}

.rk-reveal[data-delay="1"] { transition-delay: 0.1s; }
.rk-reveal[data-delay="2"] { transition-delay: 0.2s; }
.rk-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* Editor preview: no scroll events fire, keep everything visible */
.elementor-editor-active .rk-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}