/* Landing page — the logged-out front door (page_landing.php).
 *
 * Standalone: this file is the ONLY stylesheet the landing page loads, so it carries its own
 * reset. It deliberately reproduces the look of the old "Landing Pages by PluginOps" page
 * (Source Sans Pro 900 headline, Roboto body, navy login button, blue CTA) — the numbers below
 * are the computed values measured on that page at a 1905px viewport, so the desktop rendering
 * matches it. What the plugin page did NOT do is survive a phone: it hard-coded a 75px headline
 * and percentage columns with no mobile rules, so the h1 overflowed and the page scrolled
 * sideways. Everything here is fluid instead (clamp + a single stacking breakpoint).
 */

:root {
  --ftl-ink: #222222;         /* headline */
  --ftl-body: #1f374e;        /* lead paragraph */
  --ftl-navy: #3a4276;        /* login button */
  --ftl-navy-hover: #4a5490;
  --ftl-blue: #699cfc;        /* form CTA */
  --ftl-blue-hover: #4d86f0;
  --ftl-border: #dddddd;
  --ftl-muted: #888888;
  --ftl-shell: 1380px;
}

html {
  box-sizing: border-box;
  overflow-x: hidden; /* belt-and-braces: nothing here should ever exceed the viewport */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body.ft-landing {
  margin: 0;
  background: #fff;
  color: var(--ftl-ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

.ftl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One shell for both rows, so the header and the hero share a left edge at every width.
   (The plugin used a different horizontal inset per row; they only lined up above ~1560px.) */
.ftl-shell {
  --ftl-gutter: clamp(16px, 4vw, 32px);
  /* border-box, so the gutter has to be added back or the content column comes out narrower
     than the 1380px the design is measured at. */
  max-width: calc(var(--ftl-shell) + 2 * var(--ftl-gutter));
  margin-inline: auto;
  padding-inline: var(--ftl-gutter);
}

/* ---------------------------------------------------------------- header */

.ftl-header {
  padding-block: 19px;
}

.ftl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ftl-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  color: var(--ftl-ink);
  text-decoration: none;
}

.ftl-brand__logo {
  flex: none;
  width: 75px;
  height: 75px;
}

.ftl-brand__name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  line-height: 1.35;
  white-space: nowrap;
}

.ftl-login {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 192px;
  padding: 15px 5px;
  border: 0;
  border-radius: 10px;
  background: var(--ftl-navy);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .3s ease;
}

.ftl-login:hover,
.ftl-login:focus-visible {
  background: var(--ftl-navy-hover);
  color: #fff;
}

.ftl-icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ------------------------------------------------------------------ hero */

.ftl-hero {
  padding-block: 38px 138px; /* 38px + the 100px empty spacer row the plugin page ended with */
}

.ftl-hero__inner {
  display: grid;
  grid-template-columns: 49% 49%;
  justify-content: space-between;
  align-items: start;
}

.ftl-hero__copy {
  padding-top: 64px;
}

.ftl-title {
  margin: 0 0 34px;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 75px);
  line-height: 1.2;
  color: var(--ftl-ink);
}

.ftl-lead {
  margin: 0 0 58px;
  max-width: 40em;
  font-size: 20px; /* flat, like the original — it is the 75px headline that needed to become fluid */
  font-weight: 400;
  line-height: 1.3;
  color: var(--ftl-body);
}

.ftl-hero__media {
  padding-inline: 5%;
  text-align: center;
}

.ftl-hero__media img {
  width: 100%;
  max-width: 431px;
}

/* ------------------------------------------------------------------ form */

.ftl-form {
  max-width: 656px;
}

.ftl-field {
  width: 100%;
  min-height: 50px;
  padding: 7px 18px;
  border: 1px solid var(--ftl-border);
  border-radius: 2px;
  background: #fff;
  color: var(--ftl-body);
  font-family: inherit;
  font-size: 16px; /* keep >= 16px: smaller triggers the iOS zoom-on-focus */
  line-height: 1.5;
}

.ftl-field::placeholder {
  color: var(--ftl-muted);
}

.ftl-field:focus {
  outline: none;
  border-color: var(--ftl-blue);
  box-shadow: 0 0 0 3px rgba(105, 156, 252, .25);
}

.ftl-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  padding: 7px 18px;
  border: 0;
  border-radius: 2px;
  background: var(--ftl-blue);
  color: #fff;
  font-family: inherit;
  font-size: 21px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .3s ease;
}

.ftl-submit:hover,
.ftl-submit:focus-visible {
  background: var(--ftl-blue-hover);
}

.ftl-submit[disabled] {
  opacity: .6;
  cursor: progress;
}

/* reCAPTCHA v2. Google renders a fixed 302x76 iframe into this box, so it cannot shrink with the
   form — below ~330px it is scaled down instead (see the narrow-phone media query). */
.ftl-captcha {
  margin-top: 14px;
  min-height: 78px;
}

/* Set by landing.js until the visitor touches the e-mail field — never by this stylesheet alone,
   or a no-JS visitor would never see the box (see hideCaptchaUntilTyping). */
.ftl-captcha--hidden {
  display: none;
}

/* Honeypot — a bot fills it, a human never sees it. Formspree drops anything with _gotcha set. */
.ftl-gotcha {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.ftl-msg {
  max-width: 656px;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 1.45;
}

.ftl-msg[hidden] {
  display: none;
}

.ftl-msg--ok {
  border: 1px solid #b7e2ca;
  background: #e8f6ee;
  color: #17603a;
}

.ftl-msg--err {
  border: 1px solid #f5c2bd;
  background: #fdecea;
  color: #8f2318;
}

/* ------------------------------------------------------------ responsive */

/* Below ~860px the 49/49 split leaves neither the headline nor the mockup enough room. */
@media (max-width: 860px) {
  .ftl-hero {
    padding-block: 24px 56px;
  }

  .ftl-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .ftl-hero__copy {
    padding-top: 16px;
  }

  .ftl-hero__media {
    padding-inline: 0;
  }

  .ftl-hero__media img {
    max-width: 360px;
  }

  .ftl-title {
    margin-bottom: 24px;
  }

  .ftl-lead {
    margin-bottom: 32px;
  }

  .ftl-brand__name {
    font-size: 21px;
  }
}

@media (max-width: 560px) {
  .ftl-header {
    padding-block: 14px;
  }

  .ftl-brand {
    gap: 12px;
  }

  .ftl-brand__logo {
    width: 44px;
    height: 44px;
  }

  .ftl-brand__name {
    font-size: 18px;
    white-space: normal; /* two short words — let them stack rather than push the button off */
  }

  .ftl-hero__media img {
    max-width: 300px;
  }

  .ftl-lead {
    font-size: 18px;
  }

  .ftl-login {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
  }

  /* "Dejte mi vědět, až to spustíte!" is long — shrink it rather than let it wrap to two
     lines, which leaves the check mark floating beside the block. */
  .ftl-submit {
    padding-inline: 12px;
    font-size: 17px;
  }
}

@media (max-width: 400px) {
  .ftl-brand__logo {
    width: 40px;
    height: 40px;
  }

  .ftl-brand__name {
    font-size: 16px;
  }
}

/* Only the very narrowest phones (iPhone SE 1st gen) need this — at 17px the CTA label wraps
   below ~340px, above it it does not. */
@media (max-width: 340px) {
  .ftl-submit {
    font-size: 15px;
  }
}

/* The reCAPTCHA iframe is a fixed 302px wide and would otherwise overflow the viewport. */
@media (max-width: 330px) {
  .ftl-captcha {
    transform: scale(.9);
    transform-origin: left top;
    min-height: 70px;
  }
}