/* OpenClaw overrides — mobile UX + perf (2026-03-05) */

/* Stop accidental horizontal page scroll (but keep local horizontal scrollers working) */
html, body {
  overflow-x: hidden;
}

/* Mobile header: keep it compact; make the existing nav a single-line swipe bar */
@media (max-width: 767.98px) {
  header {
    /* backdrop-filter is expensive on many mobile GPUs */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: color-mix(in oklab, var(--card-solid) 92%, transparent) !important;
  }

  /* show the desktop nav on mobile, but as a horizontal swipe strip */
  header nav.hidden.md\:flex {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 2px;

    scrollbar-width: none; /* Firefox */
    scroll-snap-type: x proximity;
  }
  header nav.hidden.md\:flex::-webkit-scrollbar { display: none; }

  header nav.hidden.md\:flex > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* hide the separate mobile-only controls (theme/lang), since nav now contains them */
  header .md\:hidden {
    display: none !important;
  }

  /* tighten button sizing so the nav bar stays "small" */
  header .btn {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  header .theme-switch {
    height: 34px !important;
    width: 72px !important;
  }

  /* Cards blur also costs a lot on mobile; keep the look but remove the blur */
  .card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--card-solid) !important;
  }

  .theme-switch {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Scroll reveal: slightly smaller motion on mobile for less "jank" */
  .oc-reveal {
    transform: translateY(8px);
    transition-duration: 420ms;
  }
}

/* OpenClaw mobile header layout override (stronger) */
@media (max-width: 767.98px) {
  header .container {
    flex-wrap: nowrap !important;
    height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  header nav.hidden.md\:flex {
    justify-content: flex-start;
    margin-left: 10px;
  }
}

/* OpenClaw mobile fixes: clipped buttons + text overflow (2026-03-05) */
@media (max-width: 767.98px) {
  /* Buttons: avoid clipping (Safari + negative margins) */
  .btn {
    overflow: visible !important;
    white-space: normal;
    line-height: 1.2;
    max-width: 100%;
  }

  /* The templates use Tailwind class -ml-1 on icon wrappers; remove the negative margin on mobile to prevent left clipping */
  .btn span.-ml-1 {
    margin-left: 0 !important;
  }

  /* Prevent long words/URLs from overflowing containers */
  h1, h2, h3, p, a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* OpenClaw button polish 2026-03-05 */

/* Global: slightly saner defaults */
.btn {
  gap: 8px;
  font-weight: 600;
}

.btn-ghost {
  border-color: var(--stroke);
}

/* Mobile: CTAs look better full-width and centered */
@media (max-width: 767.98px) {
  main .btn {
    width: 100%;
    justify-content: center;
  }

  /* keep header/nav buttons compact (don't force full width) */
  header .btn {
    width: auto;
  }

  /* Primary: a bit more depth, but not too glossy */
  main .btn-primary {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  }

  /* Ghost: less "milky", more crisp */
  main .btn-ghost {
    background: var(--card-solid);
    border-color: var(--stroke);
  }

  /* Icon sizing consistency */
  .btn svg, .btn img {
    width: 16px;
    height: 16px;
  }
}

/* OpenClaw mobile header title tweak 2026-03-05 */
@media (max-width: 767.98px) {
  /* In the header brand block, hide the tagline ("Glauben leben" / "Live your faith") to keep the nav clean */
  header a.flex.items-center.gap-3 .leading-tight .text-xs {
    display: none !important;
  }

  /* Slightly tighten brand spacing */
  header a.flex.items-center.gap-3 {
    gap: 10px;
  }
}

/* OpenClaw mobile header cleanup + safe areas (2026-03-05) */
@media (max-width: 767.98px) {
  /* Respect iOS safe-area insets (helps in in-app browsers) */
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Keep the brand minimal: logo only */
  header a.flex.items-center.gap-3 .leading-tight {
    display: none !important;
  }

  /* Slightly smaller nav pills so more fit */
  header .btn {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }

  /* Nicer edge treatment for horizontal nav (less "hard cut") */
  header nav.hidden.md\:flex {
    padding-left: 4px;
    padding-right: 10px;
    scroll-padding-left: 12px;
    scroll-padding-right: 12px;

    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%);
  }
}

/* OpenClaw mobile nav: keep only essential links in header (2026-03-05) */
@media (max-width: 767.98px) {
  header nav a[href*="/impressum"],
  header nav a[href*="/privacy"],
  header nav a[href*="/agb"] {
    display: none !important;
  }
}

/* OpenClaw iOS Safari polish (2026-03-05) */
@media (max-width: 767.98px) {
  /* Hero CTA buttons: give a tiny inset so rounded ends never get visually clipped in iOS in-app Safari views */
  main .mt-7.flex.flex-col .btn {
    width: calc(100% - 6px) !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    box-sizing: border-box;
  }

  /* Theme switch: make it a clean icon button (the pill toggle looked broken after size overrides) */
  header .theme-switch {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    background: var(--card-solid) !important;
    border-color: var(--stroke) !important;
    position: relative;
  }
  header .theme-switch__thumb {
    display: none !important;
  }
  header .theme-switch__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
  }
  header .theme-switch__icon svg {
    width: 18px;
    height: 18px;
  }
  /* In light mode (data-theme=light), show the moon (switch to dark). In dark mode, show the sun (switch to light). */
  header .theme-switch[data-theme="light"] .theme-switch__icon--sun {
    display: none !important;
  }
  header .theme-switch[data-theme="dark"] .theme-switch__icon--moon {
    display: none !important;
  }
}

/* OpenClaw hero buttons: fix visual clipping + alignment (2026-03-06) */
@media (max-width: 767.98px) {
  /* Stop forcing all content buttons to 100% width; only apply to the hero CTA stack explicitly */
  main .btn {
    width: auto; /* override earlier rule */
  }

  /* Hero CTA container is: .mt-7.flex.flex-col.gap-3 */
  main .mt-7.flex.flex-col.gap-3 {
    gap: 10px;
  }

  main .mt-7.flex.flex-col.gap-3 .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 999px;
    overflow: visible;
  }

  /* Remove icon negative margin in hero CTAs (was clipping at rounded edge) */
  main .mt-7.flex.flex-col.gap-3 .btn span.-ml-1 {
    margin-left: 0 !important;
  }

  /* Give the icon its own spacing */
  main .mt-7.flex.flex-col.gap-3 .btn span.inline-flex {
    margin-right: 8px;
  }

  /* Slightly reduce button height to look less "fat" */
  main .mt-7.flex.flex-col.gap-3 .btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* OpenClaw fix: hero CTA buttons were overflowing due to leftover margins (2026-03-06) */
@media (max-width: 767.98px) {
  main .mt-7.flex.flex-col.gap-3 .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* OpenClaw: make feature pills wrap nicely on small screens (2026-03-06) */
@media (max-width: 767.98px) {
  /* This container is: .mt-6.flex.flex-wr... */
  main .mt-6.flex {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start;
  }

  main .mt-6.flex > * {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* OpenClaw: fix hero grid on mobile (was auto columns => content clipped) (2026-03-06) */
@media (max-width: 767.98px) {
  /* The hero uses: <div class="grid items-center ... md:grid-cols-2 ...">.
     Without an explicit base grid-cols-1, CSS defaults to auto columns.
     Force single-column layout on mobile. */
  main section.container .grid.items-center {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }

  /* Ensure grid children can shrink */
  main section.container .grid.items-center > * {
    min-width: 0 !important;
  }
}

/* OpenClaw: cache-bust doodles.svg after icon changes (2026-03-06) */
body {
  background-image: url(/bg/doodles.svg?v=20260306-0711) !important;
}
html[data-theme="dark"] body {
  background-image: url(/bg/doodles-dark.svg) !important;
}

/* OpenClaw: remove hero eyebrow "Glauben leben" container (2026-03-06) */
main > section.container:first-of-type .eyebrow {
  display: none !important;
}

/* OpenClaw: mobile screenshot strip sizing (2026-03-06) */
@media (max-width: 767.98px) {
  /* The screenshot cards currently have Tailwind classes h-[360px] w-[168px]. Make them larger on mobile.
     Using attribute selectors to avoid touching the Next.js bundle. */
  main div[class*="h-[360px]"][class*="w-[168px]"][class*="shrink-0"] {
    height: 420px !important;
    width: 194px !important;
    scroll-snap-align: start;
  }

  /* Ensure images stay crisp */
  main div[class*="h-[360px]"][class*="w-[168px]"][class*="shrink-0"] img {
    image-rendering: auto;
  }
}