/* ==========================================================================
   Tapcard – style.css (center fix) — v2025-11-08
   Focus: force horizontal centering of hero/page + CTA
   ========================================================================== */

/* Base brand variables (kept) */
:root{
  --brand: #0b5db0;
  --brand-ink: #08437d;
  --accent: #d17c4a;
  --container: 1080px;
}

/* Ensure page uses full width but allows centered blocks */
html, body{ height:100%; margin:0; }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Generic container utility (use when available in markup) */
.container,
.wrapper,
main,
.site,
#app{
  width: min(100% - 32px, var(--container));
  margin-inline: auto;                /* <-- centers horizontally */
}

/* Hero/Page: vertical + horizontal centering */
.hero,
.page{
  min-height: 100dvh;
  display: grid !important;
  place-items: center !important;     /* horizontal + vertical */
  text-align: center !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
  box-sizing: border-box;
}

/* Inner content is constrained + centered even if parent is full width */
.hero > .content,
.page > .content{
  width: min(100% - 40px, 960px);
  margin-inline: auto;                /* <-- keeps it off the left edge */
}

/* CTA button (links) */
a.primary-cta,
a#vytvorit-vizitku,
a[href*="vytvorit"],
a[href*="zacit"]{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--brand);
  color:#fff !important;
  font-weight:800; padding:.875rem 1.25rem;
  border-radius:12px; text-decoration:none;
  border:1px solid transparent;
  box-shadow:0 6px 16px rgba(11,93,176,.25);
  transition: background-color .2s, transform .08s, box-shadow .2s;
  margin-top:24px;
}
a.primary-cta:hover,
a#vytvorit-vizitku:hover,
a[href*="vytvorit"]:hover,
a[href*="zacit"]:hover{
  background: var(--brand-ink);
  transform: translateY(-1px);
  box-shadow:0 12px 28px rgba(11,93,176,.28);
}

/* Nuclear de-lefting: neutralize legacy positioning that can pin content left */
.hero.fix-center,
.page.fix-center,
.fix-center{
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Optional: icon/text spacing so bullets don't hug the edge */
.hero .content > * + *{ margin-top: 12px; }