/*
   Page-specific rules only. Everything else comes from the app's compiled
   AtollUI stylesheet (assets/css/style.css), so the landing and the product
   share one set of tokens.
*/

/* script.js toggles .active on the nav link for the section in view */
.nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-wash);
}

/* script.js opens the lightbox by adding .active */
.gallery-modal { display: none; }
.gallery-modal.active { display: flex; }

/* the connector line between numbered steps stops at the last one */
.step-rule { min-height: 1.5rem; }
.step-item:last-child .step-rule { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/*
   Kill the double-tap-to-zoom gesture (and the 300ms tap delay that comes
   with it). Deliberately NOT user-scalable=no on the viewport meta: that
   would also block pinch-zoom, which people who need to magnify rely on.
*/
html { touch-action: manipulation; }
button, a, input, select, textarea, [role="button"], [data-add], [data-sub], [data-drop] {
  touch-action: manipulation;
}

/*
   The landing's own colours, taken from styles.legacy.css rather than
   sampled off a screenshot:

     #0e2745  .cta-btn-primary, .cta-btn-header, .nav-link.active,
              .logo-text, .section-title      -> primary
     #0a1f35  the :hover of every one of those -> primary-hover
     #7691ae  .hero-title                      -> the muted headline line

   Only fills and headline ink are swapped. --color-primary is also the
   body-text ink, so overriding the variable itself would drag every
   paragraph navy along with it.
*/
.bg-primary { background-color: #0e2745; }
.hover\:bg-primary-hover:hover { background-color: #0a1f35; }

/* two-tone headings: strong line navy, quiet line the old blue-grey */
.hero-title .text-primary,
.section-title .text-primary { color: #0e2745; }
.hero-title .text-ink-faint,
.section-title .text-ink-faint { color: #7691ae; }

/* the dark panel is a rhythm break, not an action colour */
.section-dark { background-color: #1C1C1C; border-radius: 30px;}

/*
   Floating WhatsApp button. Rebuilt from the .floating-contact-btn rules in
   styles.legacy.css, which were written but never had any markup pointing at
   them. Brand green is deliberate -- people recognise it faster than any
   palette colour, and the same exception already applies to the Telegram
   marks elsewhere.
*/
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: width .3s ease, border-radius .3s ease, box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
  white-space: nowrap;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  width: auto;
  min-width: 60px;
  padding: 0 22px 0 18px;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
  transform: translateY(-2px);
  color: #fff;
}
.wa-fab:focus-visible { outline: 3px solid rgba(14, 39, 69, .35); outline-offset: 3px; }

.wa-fab svg { position: relative; z-index: 1; width: 30px; height: 30px; }

.wa-fab-label {
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  font-size: 14px;   /* label-md; 15px was inherited from the old stylesheet and is off-scale */
  font-weight: 500;
  transition: max-width .3s ease, opacity .2s ease, margin .3s ease;
}
.wa-fab:hover .wa-fab-label,
.wa-fab:focus-visible .wa-fab-label { max-width: 220px; opacity: 1; margin-left: 10px; }

/* the ring that draws the eye once, then gets out of the way on hover */
.wa-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25d366;
  animation: wa-fab-pulse 2s ease-out infinite;
  z-index: 0;
}
.wa-fab:hover .wa-fab-pulse,
.wa-fab:focus-visible .wa-fab-pulse { animation: none; opacity: 0; }

@keyframes wa-fab-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 768px) {
  .wa-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .wa-fab svg { width: 28px; height: 28px; }
}

/*
   The rotating business type in the hero. The word slides up and out, the
   next one rises into its place, and the element's width eases between the
   two so the headline settles instead of snapping when "cafes" is replaced
   by "guesthouses". The global reduced-motion rule above collapses all of
   it to a plain swap.
*/
.highlight {
  display: inline-block;
  white-space: nowrap;
  transition: width .38s cubic-bezier(.4, 0, .2, 1);
}
.highlight.is-leaving {
  opacity: 0;
  transform: translateY(-.3em);
  transition: width .38s cubic-bezier(.4, 0, .2, 1),
              opacity .25s ease,
              transform .25s cubic-bezier(.4, 0, .2, 1);
}
.highlight.is-entering { animation: hero-word-in .34s cubic-bezier(.4, 0, .2, 1) both; }

@keyframes hero-word-in {
  from { opacity: 0; transform: translateY(.35em); }
  to   { opacity: 1; transform: none; }
}

/*
   iOS Safari zooms the page in when you focus a field whose text is smaller
   than 16px. That is the only trigger, so the fix is the font size. The other
   way round it -- maximum-scale=1 or user-scalable=no on the viewport -- stops
   the zoom by taking pinch-zoom away from everybody, which is not a trade
   worth making for a 2px difference.
*/
@media (pointer: coarse), (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/*
   Marketing type scale, landing only.

   The product's scale stops at headline-display (56px), which is right for a
   screen someone works in all day and small for a page whose job is to be
   read once from across the room. These steps take the hero to 80 and the
   section headings to 48, matching the reference site, and step down on
   narrow screens rather than dropping straight to the product sizes.

   Left unlayered on purpose: Tailwind's utilities sit in a cascade layer, so
   plain rules here win over the text-headline-* classes in the markup without
   needing !important.
*/
.hero-title { font-size: 40px; line-height: 46px; letter-spacing: -1.2px; }
.section-title { font-size: 30px; line-height: 36px; letter-spacing: -0.8px; }
.hero-subtitle, .section-subtitle { font-size: 16px; line-height: 26px; font-weight: 500; }

@media (min-width: 640px) {
  .hero-title { font-size: 60px; line-height: 66px; letter-spacing: -2px; }
  .section-title { font-size: 40px; line-height: 46px; letter-spacing: -1px; }
  .hero-subtitle, .section-subtitle { font-size: 16px; line-height: 28px; font-weight: 500; }
}

@media (min-width: 1024px) {
  .hero-title { font-size: 80px; line-height: 88px; letter-spacing: -2.8px; }
  .section-title { font-size: 48px; line-height: 56px; letter-spacing: -1.2px; }
}

/*
   On a phone the centred column reads as a stack of floating fragments: each
   line starts in a different place, so the eye has no edge to run down. Below
   the sm breakpoint the eyebrow, heading and sub-text all sit against the left
   margin instead. The buttons and the line under them go with them, since
   centred buttons under left-aligned text look like a mistake rather than a
   choice. Everything re-centres at 640 and up.
*/
@media (max-width: 639px) {
  .section-eyebrow,
  .hero-title,
  .section-title,
  .hero-subtitle,
  .section-subtitle {
    text-align: left;
  }

  .hero-subtitle,
  .section-subtitle { margin-left: 0; margin-right: 0; }

  .hero-cta { justify-content: flex-start; }
  .hero .hero-cta ~ p { text-align: left; }
}

/*
   Same rule as the app: controls do not select or flash when tapped. The
   hero's rotating word is included because it animates -- catching it in a
   selection mid-slide looks broken. Body copy, headings, pricing and the
   signup fields all stay selectable.
*/
button,
[role="button"],
[role="tab"],
summary,
label,
nav a,
.nav-link,
.wa-fab,
.highlight {
  -webkit-user-select: none;
  user-select: none;
}

a,
button,
[role="button"],
summary,
label {
  -webkit-tap-highlight-color: transparent;
}