/* rkm.digital runtime styles
 *
 * Companion to /js/rkm-runtime.js. Provides the visual side of:
 *   - Scroll-into-view fade reveals (.rkm-fade-in / .rkm-visible)
 *   - Hover effects (pure CSS on Webflow class names)
 *   - Mobile nav open/closed states
 *   - FAQ accordion expand/collapse
 *
 * Loaded AFTER rkm-neu.webflow.css so these rules win where needed.
 */

/* Honeypot field — hidden from real users but visible to spam bots that
   skim the DOM. Position off-screen + zero-size with a clip-path. Don't
   use display:none (some bots skip those). */
.rkm-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}
.rkm-form-privacy {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65); /* form sits on the dark contact section */
  margin: 1rem 0;
  line-height: 1.5;
}
.rkm-form-privacy a {
  color: var(--primary-color, #f43c00);
  text-decoration: underline;
}

/* Form inputs + buttons inherit the page font (Inter Variable) instead of
   falling back to the user-agent's default serif. */
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button,
.contact-form input[type="submit"] {
  font-family: inherit;
}

/* FAQ question size — Webflow shipped 24px, we run smaller. */
.faq-question {
  font-size: 18px;
}

/* Success / error feedback after form submit */
.rkm-form-status {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
}
/* Override Webflow's .w-form-done { display: none } — we add that
   class on success so GTM's element-visibility trigger fires, but
   we still want the message visible to the user. */
.rkm-form-status.w-form-done { display: block; }
.rkm-form-success {
  background: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.rkm-form-error {
  background: rgba(244, 60, 0, 0.08);
  color: var(--primary-color, #f43c00);
  border: 1px solid rgba(244, 60, 0, 0.3);
}

/* Global horizontal overflow lock — prevents marquee strips
   (`.tricker-wrapper`, `.service-tricker-flex-wrap`, `.vision-tricker`)
   from making the page wider than the viewport.
   Use `clip` not `hidden` — `hidden` breaks position:sticky on the
   benefits cards (sticky doesn't work when any ancestor has
   overflow:hidden). `clip` provides the same clipping without that. */
html, body {
  overflow-x: clip;
}

/* ───────── Scroll fade reveals ───────── */
.rkm-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.rkm-fade-in.rkm-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rkm-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ───────── Hover effects on Webflow classes ───────── */
.nav-link,
.primary-button,
.secondary-button,
.footer-link-wrap,
.footer-single-wrap,
.work-v1-single-wrap,
.faq-tabs-single-wrap,
.about-lightbox-link {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              color 0.2s ease;
}

.nav-link:hover,
.footer-link-wrap:hover {
  opacity: 0.7;
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
}

.work-v1-single-wrap:hover,
.faq-tabs-single-wrap:hover {
  transform: translateY(-3px);
}

.about-lightbox-link:hover {
  transform: scale(1.02);
}

/* Smooth color/anchor transitions */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ───────── Navbar positioning ───────── */
/* Desktop: navbar scrolls away with the page (Webflow shipped it sticky;
   user prefers scroll-away). */
.navbar {
  position: relative !important;
  inset: auto !important;
  z-index: 10;
}
/* Mobile: keep sticky so the hamburger is reachable mid-scroll. */
@media (max-width: 991px) {
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset: 0% 0% auto !important;
    background-color: var(--background-color, #eee9e3) !important;
    z-index: 100;
  }
  /* Push body content down by the navbar height so it doesn't sit underneath */
  body {
    padding-top: 80px;
  }
}

/* ───────── Mobile-only drawer (separate from desktop nav) ───────── */
/* Hide the desktop .nav-menu entirely on mobile — we use #rkm-mobile-drawer instead */
@media (max-width: 991px) {
  .navbar .nav-menu,
  .navbar .w-nav-menu {
    display: none !important;
  }
}

#rkm-mobile-drawer {
  display: none;
}
@media (max-width: 991px) {
  #rkm-mobile-drawer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    position: fixed;
    top: 80px;  /* sit BELOW the sticky navbar so logo + X are visible */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color, #eee9e3);
    z-index: 99;
    padding: 2.5rem 1.5rem;
    overflow-y: auto;
    transform: translateY(-110%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
    pointer-events: none;
  }
  #rkm-mobile-drawer.rkm-nav-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  #rkm-mobile-drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #rkm-mobile-drawer ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  #rkm-mobile-drawer ul li:last-child {
    border-bottom: none;
  }
  #rkm-mobile-drawer ul a {
    display: block;
    padding: 1.125rem 0;
    text-align: left;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--black, #000);
    letter-spacing: -0.4px;
  }
  #rkm-mobile-drawer .rkm-mobile-drawer-cta {
    margin-top: 1rem;
    background: var(--primary-color, #f43c00);
    color: #fff;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 150px;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.4px;
  }
}
body.rkm-nav-locked {
  overflow: hidden;
}

/* ───────── Hamburger button (replaces Lottie animation) ─────────
   The original .hamburger div was a Lottie SVG. Without webflow.js + Lottie
   runtime, draw three CSS bars instead. */
.menu-button {
  cursor: pointer;
  display: none; /* hidden on desktop, made visible by Webflow's data-collapse='medium' rule on mobile */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
@media (max-width: 991px) {
  .menu-button {
    display: flex;
  }
}

.menu-button .hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 18px;
  /* middle bar drawn as background gradient */
  background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  color: var(--black, #000);
  transition: background 0.2s ease;
}
.menu-button .hamburger::before,
.menu-button .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: top 0.25s ease, bottom 0.25s ease, transform 0.25s ease;
}
.menu-button .hamburger::before { top: 0; }
.menu-button .hamburger::after  { bottom: 0; }

/* Open state — animate to X */
.menu-button.rkm-nav-open .hamburger {
  background-image: none; /* hide middle bar */
}
.menu-button.rkm-nav-open .hamburger::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-button.rkm-nav-open .hamburger::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ───────── FAQ accordion expand / collapse ─────────
   The FAQ uses Webflow's .w-tabs widget. Each .faq-tabs-single-wrap is a
   tab link containing the question + answer. Webflow's source ships with
   inline style="height:0px" on each .faq-answer-wrap to start collapsed.
   We override with !important to manage state via the .w--current class. */
.faq-tabs-single-wrap .faq-answer-wrap {
  height: 0 !important;
  overflow: hidden;
  opacity: 0;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}
.faq-tabs-single-wrap.w--current .faq-answer-wrap {
  height: auto !important;
  /* fallback — height:auto can't transition. Use a max-height transition to
     give it animated reveal. */
  max-height: 800px;
  opacity: 1;
}
/* Plus / minus icon swap. The HTML has .faq-plus and .faq-plus.minuse
   stacked — Webflow IX2 was fading the minus in when expanded. */
.faq-icon-wrap .faq-plus.minuse { opacity: 0; transition: opacity 0.2s; }
.faq-tabs-single-wrap.w--current .faq-icon-wrap .faq-plus { opacity: 0; }
.faq-tabs-single-wrap.w--current .faq-icon-wrap .faq-plus.minuse { opacity: 1; }

/* ───────── "Was wir machen" accordion-tabs (.work-tab-link) ─────────
   Each tab link contains its own question + answer block. Only the
   current tab's answer expands — clicking another tab collapses the
   previous and expands the new one. JS toggles .w--current. */
.work-tab-link .work-v1-answer-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              margin-top 0.3s ease;
}
.work-tab-link.w--current .work-v1-answer-wrap {
  max-height: 800px;
  opacity: 1;
}
/* Slight visual cue for the active question */
.work-tab-link {
  cursor: pointer;
}

/* Disable the IX2 cloak that webflow.js was supposed to lift —
   we manage initial state ourselves now via .rkm-fade-in. */
html.w-mod-js:not(.w-mod-ix) [data-w-id] {
  opacity: 1 !important;
}

/* ───────── Marquee / "tricker" strips ───────── */
/* Logo strip + service-text strip both use a horizontally scrolling
   marquee animation. The Webflow source duplicates the inner content
   so a -50% translate seams cleanly into a continuous loop.
   Webflow's JS used to drive these — we replace with pure CSS. */

.tricker-wrapper {
  display: flex;
  width: max-content;
  animation: rkm-marquee-left 35s linear infinite;
  will-change: transform;
}

.service-tricker-flex-wrap {
  display: flex;
  width: max-content;
  animation: rkm-marquee-left 35s linear infinite;
  will-change: transform;
}

/* Hero "Design · Development · E-Commerce" strip */
.vision-tricker {
  display: flex;
  width: max-content;
  animation: rkm-marquee-left 30s linear infinite;
  will-change: transform;
}

/* Pause on hover for accessibility / readability */
.tricker-wrapper:hover,
.service-tricker-flex-wrap:hover,
.vision-tricker:hover {
  animation-play-state: paused;
}

@keyframes rkm-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tricker-wrapper,
  .service-tricker-flex-wrap,
  .vision-tricker {
    animation: none;
  }
}