/* ==========================================================================
   Sellway landing – styles
   Mobile-first. Breakpoints: tablet >= 768px, desktop >= 1200px
   (the same breakpoints switch the Figma modes in tokens.css).
   ========================================================================== */

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--theme-background);
  color: var(--theme-text);
  font-family: var(--secondary-family);
  font-weight: var(--secondary-regular);
  font-size: var(--font-size-text-main);
  line-height: var(--line-height-text);
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--button-primary-background);
  outline-offset: var(--focus-ring-width);
}

/* Line break that only exists from tablet up (copy from Figma) */
.break-tablet {
  display: none;
}

@media (min-width: 768px) {
  .break-tablet {
    display: inline;
  }
}

/* Text for screen readers only (e.g. "opens in a new window") */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Paragraph groups separated by one empty line, as in Figma */
.stack-text > p + p {
  margin-top: var(--paragraph-spacing);
}

/* Page wrapper: content is designed for a 1440px frame */
.page {
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* ---------- Themes (section colour modes) ---------- */

.theme-light {
  background: var(--theme-background);
  color: var(--theme-text);
}

.theme-light-alt {
  background: var(--brand-secondary-light);
  color: var(--theme-text);
}

/* ---------- Text styles (Figma text styles) ---------- */

.text-h1 {
  font-family: var(--primary-family);
  font-weight: var(--primary-bold);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.text-h2 {
  font-family: var(--primary-family);
  font-weight: var(--primary-bold);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.text-large,
.text-main,
.text-small,
.text-extra-small {
  font-family: var(--secondary-family);
  font-weight: var(--secondary-regular);
  line-height: var(--line-height-text);
  letter-spacing: 0;
}

.text-large { font-size: var(--font-size-text-large); }
.text-main { font-size: var(--font-size-text-main); }
.text-small { font-size: var(--font-size-text-small); }
.text-extra-small { font-size: var(--font-size-text-extra-small); }

/* Label: eyebrow above section titles */
.text-label {
  font-family: var(--secondary-family);
  font-weight: var(--secondary-bold);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

/* ---------- Button ---------- */

/* Flex: centres the single label inside a fixed-height button (Figma Auto Layout) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--button-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border-width) solid var(--button-primary-border);
  border-radius: var(--radius-small);
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.button:hover {
  opacity: var(--button-hover-opacity);
}

.button--block {
  align-self: stretch;
  width: 100%;
  min-height: var(--button-height-large);
}

.button[disabled] {
  cursor: progress;
  opacity: var(--logo-opacity);
}

/* ==========================================================================
   Header (nav)
   ========================================================================== */

/* Flex: vertical Auto Layout on mobile (brand above partnership),
   switches to a row with space-between from tablet up */
.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-20);
  padding: var(--padding-vertical-small) var(--padding-horizontal-main);
}

.nav__brand {
  display: block;
  flex-shrink: 0;
}

.nav__brand-artwork {
  width: var(--brand-width);
  height: auto;
}

/* Flex: horizontal Auto Layout (label + partner logo) on mobile and desktop */
.nav__partnership {
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}

.nav__partner-logo {
  width: var(--partner-logo-width-mobile);
  height: auto;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Tablet: label stacked above the logo */
  .nav__partnership {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__partner-logo {
    width: var(--partner-logo-width);
  }
}

@media (min-width: 1200px) {
  .nav__partnership {
    flex-direction: row;
    align-items: center;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Flex: column on mobile/tablet, row (content + preview) on desktop – Figma Auto Layout */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-35);
  padding: var(--padding-vertical-extra-small) var(--padding-horizontal-main) var(--padding-vertical-small);
}

/* Flex: vertical stack (offer badge, intro) */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-small);
  width: 100%;
}

/* Flex: icon + label in one row */
.hero__offer {
  display: flex;
  align-items: center;
  gap: var(--gap-10);
  width: 100%;
  padding: var(--offer-padding-y) var(--offer-padding-x);
  border-radius: var(--radius-main);
  background: var(--brand-secondary-light);
}

.hero__offer-icon {
  flex-shrink: 0;
}

.hero__label {
  color: var(--brand-secondary);
}

/* Flex: vertical stack (title, text, button) */
.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-medium);
  width: 100%;
}

.hero__preview {
  width: 100%;
}

.hero__preview img,
.inquiry-audit__preview img,
.mice-alerts__preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .hero__offer {
    width: auto;
  }

  .hero__intro {
    gap: var(--space-small);
  }

  .hero__preview {
    max-width: var(--hero-preview-width);
  }
}

@media (min-width: 1200px) {
  .hero {
    flex-direction: row;
  }

  .hero__content {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero__preview {
    flex: 0 1 var(--hero-preview-width);
  }
}

/* ==========================================================================
   Clients
   ========================================================================== */

/* Flex: vertical stack (title + logos) */
.clients {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding: var(--padding-vertical-small) var(--padding-horizontal-main);
}

/* Grid: Figma uses a 3×2 grid of equal cells on mobile and tablet;
   logos (all 200×56) fill the cell width, rows take the logo height */
.clients__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--gap-20);
}

.clients__logo img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: var(--logo-opacity);
}

@media (min-width: 768px) {
  .clients__logos {
    gap: var(--gap-40);
  }
}

/* Flex: single row with space-between on desktop – Figma Auto Layout;
   logos keep their natural size and shrink evenly when the row gets narrow */
@media (min-width: 1200px) {
  .clients__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .clients__logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  .clients__logo img {
    width: auto;
  }
}

/* ==========================================================================
   Inquiry audit
   ========================================================================== */

/* Flex: column (content, then preview) on mobile/tablet, row on desktop */
.inquiry-audit__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-extra-large);
  padding: var(--padding-vertical-main) var(--padding-horizontal-main);
}

/* Flex: vertical stack (intro, details, button) */
.inquiry-audit__content,
.mice-alerts__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-30);
}

/* Flex: vertical stack (eyebrow + title) */
.inquiry-audit__intro,
.mice-alerts__intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-15);
}

/* Flex: vertical stack (text, issues, trial text) */
.inquiry-audit__details,
.mice-alerts__details {
  display: flex;
  flex-direction: column;
  gap: var(--gap-30);
}

/* Flex: vertical list of issues */
.inquiry-audit__issues {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

/* Flex: icon + text in one row */
.inquiry-issue {
  display: flex;
  align-items: center;
  gap: var(--gap-15);
}

/* Flex: centres the close icon in its 24px icon box */
.inquiry-issue__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
}

.inquiry-issue__icon img {
  width: var(--issue-icon-size);
  height: var(--issue-icon-size);
}

.inquiry-issue__text {
  flex: 1 1 0;
  min-width: 0;
}

.inquiry-audit__preview {
  width: 100%;
}

@media (min-width: 1200px) {
  .inquiry-audit {
    border-radius: var(--radius-large);
  }

  .inquiry-audit__inner {
    flex-direction: row;
    align-items: center;
    padding-inline: var(--padding-horizontal-large);
  }

  .inquiry-audit__content {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Desktop: preview sits on the left, DOM keeps content first */
  .inquiry-audit__preview {
    order: -1;
    flex: 0 1 var(--inquiry-preview-width);
  }
}

/* ==========================================================================
   MICE alerts
   ========================================================================== */

/* Flex: column on mobile/tablet, row (content + preview) on desktop */
.mice-alerts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-extra-large);
  /* Mobile uses padding-horizontal/large in Figma */
  padding: var(--padding-vertical-main) var(--padding-horizontal-large);
}

.mice-alerts__content {
  width: 100%;
}

.mice-alerts__preview {
  width: 100%;
}

@media (min-width: 768px) {
  .mice-alerts {
    padding-inline: var(--padding-horizontal-main);
  }

  .mice-alerts__preview {
    max-width: var(--mice-preview-width);
  }
}

@media (min-width: 1200px) {
  .mice-alerts {
    flex-direction: row;
  }

  .mice-alerts__content {
    flex: 1 1 0;
    min-width: 0;
  }

  .mice-alerts__preview {
    flex: 0 1 var(--mice-preview-width);
  }
}

/* ==========================================================================
   Trial (steps + form)
   ========================================================================== */

/* Flex: column on mobile/tablet, row (steps + form card) on desktop */
.trial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-60);
  padding: var(--padding-vertical-none) var(--padding-horizontal-main) var(--padding-vertical-main);
}

/* Flex: vertical stack (intro + steps list) */
.trial__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
  width: 100%;
}

/* Flex: vertical stack (eyebrow + title) */
.trial__intro,
.faq__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

/* Flex: vertical list of steps */
.trial__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
}

/* Flex: vertical stack (number, title, text) */
.trial-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-extra-small);
  padding-left: var(--step-indent);
  border-left: var(--border-width) solid var(--brand-secondary);
}

.trial-step__title {
  font-family: var(--primary-family);
  font-weight: var(--primary-bold);
  font-size: var(--font-size-step-title);
  line-height: var(--line-height-step-title);
}

/* Flex: vertical Auto Layout of the form card */
.trial__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  width: 100%;
  padding: var(--padding-vertical-small) var(--padding-horizontal-main);
  border-radius: var(--radius-large);
  background: var(--brand-secondary-light);
  /* CTA target (#trial): keep a little space above the card after scrolling */
  scroll-margin-top: var(--scroll-margin-top);
}

/* Flex: offer label and partner logo on opposite ends */
.trial__form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  padding-bottom: var(--form-heading-padding-bottom);
  border-bottom: var(--border-width) solid var(--brand-secondary);
}

.trial__partner-logo {
  width: var(--form-partner-logo-width);
  height: auto;
}

/* Flex: vertical stack (fields + consent) */
.trial__controls {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
}

/* Flex: vertical list of fields */
.trial__fields {
  display: flex;
  flex-direction: column;
  gap: var(--gap-7);
}

/* Flex: label above input */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

.form-field__label {
  font-family: var(--secondary-family);
  font-weight: var(--secondary-bold);
  font-size: var(--font-size-field-label);
  line-height: var(--line-height-field-label);
}

/* Required-field marker in labels (hidden from screen readers – inputs have `required`) */
.form-field__required {
  color: var(--input-warning);
}

.form-field__control {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding);
  border: var(--border-width) solid var(--medium-dark);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--theme-text);
  font-family: var(--text-main-font-family);
  font-weight: var(--text-main-font-weight);
  font-size: var(--font-size-field-input);
  line-height: var(--text-main-line-height);
  letter-spacing: var(--text-main-letter-spacing);
}

.form-field__control::placeholder {
  color: var(--theme-text);
  opacity: var(--logo-opacity);
}

/* Error state: red border (Figma "input/warning") – set by JS or after user interaction */
.form-field__control[aria-invalid="true"],
.form-field__control:user-invalid {
  border-color: var(--input-warning);
}

.form-field__error {
  color: var(--input-warning);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text);
}

/* Flex: checkbox + consent text in one row */
.trial__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-10);
}

.trial__consent-checkbox {
  appearance: none;
  flex-shrink: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  border: var(--border-width) solid var(--checkbox-border);
  border-radius: var(--radius-small);
  background: var(--white) center / contain no-repeat;
  cursor: pointer;
}

.trial__consent-checkbox:checked {
  background-image: url("../img/icon-checkbox.svg");
}

.trial__consent-checkbox[aria-invalid="true"],
.trial__consent-checkbox:user-invalid {
  border-color: var(--input-warning);
}

.trial__consent-body {
  flex: 1 1 0;
  min-width: 0;
}

.trial__consent-label {
  display: block;
  cursor: pointer;
}

/* Honeypot: visually hidden, kept out of the tab order */
.form-honeypot {
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.trial__status {
  padding: var(--offer-padding-y) var(--offer-padding-x);
  border-radius: var(--radius-small);
  background: var(--white);
}

.trial__status--success {
  border-left: var(--focus-ring-width) solid var(--button-primary-background);
}

.trial__status--error {
  border-left: var(--focus-ring-width) solid var(--input-warning);
}

@media (min-width: 768px) {
  .trial__form {
    max-width: var(--trial-form-width);
  }
}

@media (min-width: 1200px) {
  .trial {
    flex-direction: row;
    justify-content: center;
  }

  .trial__steps {
    flex: 0 1 var(--trial-steps-width);
    min-width: 0;
  }

  .trial__form {
    flex: 0 0 var(--trial-form-width);
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

/* Flex: column on mobile/tablet, row (intro + questions) on desktop */
.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-80);
  /* Mobile uses padding-horizontal/large in Figma */
  padding: var(--padding-vertical-main) var(--padding-horizontal-large);
}

.faq__intro {
  width: 100%;
  max-width: var(--faq-intro-width);
}

/* Flex: vertical list of accordion items */
.faq__questions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
  width: 100%;
}

.faq-item {
  padding: var(--faq-item-padding-y) var(--faq-item-padding-x);
  border-radius: var(--radius-main);
  background: var(--white);
}

/* Flex: question + toggle icon in one row */
.faq-item__heading {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  list-style: none;
  cursor: pointer;
}

.faq-item__heading::-webkit-details-marker {
  display: none;
}

.faq-item__question {
  flex: 1 1 0;
  min-width: 0;
  color: var(--theme-text);
}

.faq-item__toggle {
  flex-shrink: 0;
  width: var(--toggle-size);
  height: var(--toggle-size);
  transition: transform var(--faq-duration) ease-out;
}

/* .is-closing is set by js/faq.js while the answer collapses */
.faq-item[open]:not(.is-closing) .faq-item__toggle {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__toggle {
    transition: none;
  }
}

.faq-item__answer {
  margin-top: var(--gap-20);
  color: var(--button-secondary-text);
}

@media (min-width: 768px) {
  .faq__inner {
    padding-inline: var(--padding-horizontal-main);
  }
}

@media (min-width: 1200px) {
  .faq {
    border-radius: var(--radius-large);
  }

  .faq__inner {
    flex-direction: row;
    padding-inline: var(--padding-horizontal-large);
  }

  .faq__intro {
    flex: 0 0 var(--faq-intro-width);
  }

  .faq__questions {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ==========================================================================
   Sticky CTA (mobile only)
   ========================================================================== */

/* position: fixed – an overlay pinned to the bottom of the screen, not page layout */
.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  height: var(--sticky-cta-height);
  padding: var(--sticky-cta-padding) var(--padding-horizontal-main);
  padding-bottom: calc(var(--sticky-cta-padding) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  box-shadow: var(--sticky-cta-shadow);
  transition: translate var(--sticky-cta-duration) ease-out, visibility var(--sticky-cta-duration);
}

/* Set by js/sticky-cta.js while the form is on screen */
.sticky-cta--hidden {
  translate: 0 100%;
  visibility: hidden;
}

/* Space at the end of the page so the bar never covers the footer */
body:has(.sticky-cta) {
  padding-bottom: var(--sticky-cta-height);
}

@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }

  body:has(.sticky-cta) {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* ==========================================================================
   Thank-you page (dziekujemy.html)
   ========================================================================== */

/* Flex: vertical stack (eyebrow, title, text, button) – same rhythm as section intros */
.thanks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-small);
  padding: var(--padding-vertical-main) var(--padding-horizontal-main);
}

.thanks__text {
  max-width: var(--thanks-text-max-width);
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Flex: stacked on mobile, row with space-between from tablet up */
.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-10);
  padding: var(--padding-vertical-small) var(--padding-horizontal-main);
}

.footer__privacy-link {
  text-decoration: none;
}

.footer__privacy-link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
}