/* Mamahotel base styles. Portability contract: every selector starts with .mh-, there are no tag selectors
   and no global resets, so this file can be pasted into a WordPress page next to a foreign theme.
   Colours, sizes and spacing come from tokens.css only (var(--mh-*)). */

.mh-root {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .mh-root {
    scroll-behavior: auto;
  }
}

.mh-page {
  margin: 0;
  min-height: 100vh;                     /* short pages (legal) fill the screen, so the page background is never tiled */
  background: radial-gradient(900px 500px at 50% -10%, var(--mh-bg-glow) 0%, transparent 60%), var(--mh-bg);
  color: var(--mh-text);
  font-family: var(--mh-font-body);
  line-height: 1.6;
}

/* box-sizing is scoped to the page, never applied to the host theme */
.mh-page,
.mh-page *,
.mh-page *::before,
.mh-page *::after {
  box-sizing: border-box;
}

/* author display rules (inline-flex buttons, flex fields) must not defeat the hidden attribute */
.mh-page [hidden] {
  display: none !important;
}

.mh-section {
  padding: var(--mh-space-12) var(--mh-space-4);
  max-width: 560px;
  margin: 0 auto;
}

.mh-h2 {
  margin: 0 0 var(--mh-space-3);
  font-family: var(--mh-font-display);
  font-size: 1.75rem;
  line-height: 1.2;
}

.mh-hint {
  display: block;
  color: var(--mh-text-muted);
  font-size: 0.875rem;
}

.mh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* honeypot: off-screen but still in the DOM and rendered (NOT display:none, bots skip those) */
.mh-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* buttons */
.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mh-tap);
  padding: var(--mh-space-3) var(--mh-space-6);
  border: 1px solid transparent;
  border-radius: var(--mh-radius-md);
  font-family: var(--mh-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.mh-btn--primary {
  background: var(--mh-accent);
  color: var(--mh-accent-ink);
}

.mh-btn--primary:hover {
  background: var(--mh-accent-hover);
}

.mh-btn--primary:disabled {
  opacity: 0.6;
  cursor: progress;
}

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

.mh-btn:focus-visible {
  outline: 3px solid var(--mh-accent-hover);
  outline-offset: 2px;
}

/* colours only the word WhatsApp. The word sits inside .mh-btn__label because .mh-btn is inline-flex: a bare span
   would become its own flex item and drop the space before it. The ghost button never changes its background
   (focus is an outline), so it needs no state override; the on-paper colour and its hover live in
   components/concierge.css, the checked chip in components/form.css. */
.mh-wa-word {
  color: var(--mh-whatsapp);
}

/* hero (first screen): layout basics; the neon sign, icons and the door tag live in components/hero.css */
.mh-hero {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--mh-space-12) var(--mh-space-4) var(--mh-space-6);   /* >= 40px on top so the prototype pill never covers the sign */
  text-align: center;
}

/* the visible keyword line under the sign (SEO, client 23 Oct 2026); muted so the neon accent stays with the sign and the slogan */
.mh-hero__kicker {
  margin: 0 0 var(--mh-space-2);
  color: var(--mh-text-muted);
  font-family: var(--mh-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.mh-hero__title {
  margin: 0 0 var(--mh-space-2);
  font-family: var(--mh-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.4vw, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
}

.mh-hero__sub {
  margin: 0 0 var(--mh-space-4);
  color: var(--mh-text-muted);
  line-height: 1.5;
  text-wrap: balance;
}

/* „Zjisti za minutu…“ always starts its own line under „Ji taky.“ (client 2026-10-22) */
.mh-hero__sub-line {
  display: block;
}

/* the slogan under the subline (D-21 as revised by the client 2026-10-17); the same words close the page in the footer */
.mh-hero__slogan {
  margin: 0 0 var(--mh-space-6);
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: var(--mh-glow-soft);
  text-wrap: balance;
}

.mh-hero__ctas {
  display: grid;
  gap: var(--mh-space-3);
}

/* honest prototype label (FORM-04): shown only while the active adapter is a stub */
.mh-prototype-label {
  position: fixed;
  top: var(--mh-space-2);
  left: var(--mh-space-2);
  z-index: 10;                           /* stays below any future cookie bar */
  padding: var(--mh-space-1) var(--mh-space-3);
  border-radius: var(--mh-radius-full);
  background: var(--mh-label-bg);
  color: var(--mh-label-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}