/*
 * Additions to the original stylesheet (site.css = the compiled Tailwind v4 build of wayraai.com).
 * Only rules the pages need that the original build did not generate.
 * Loaded after site.css and unlayered on purpose, so these win over site.css utilities.
 */

/* Scroll reveal: content stays visible when JavaScript is off (the <head> script adds .js). */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* Theme toggle: both icons are in the HTML; show the one for the current theme. */
.wayra-icon-sun {
  display: none;
}
[data-theme="dark"] .wayra-icon-sun {
  display: block;
}
[data-theme="dark"] .wayra-icon-moon {
  display: none;
}

/* Header icon buttons are 36px like the original; widen the hit area to 40px. */
[data-theme-toggle],
[data-menu-toggle] {
  position: relative;
}
[data-theme-toggle]::before,
[data-menu-toggle]::before {
  content: "";
  position: absolute;
  inset: -2px;
}

/* Small links (header, footer, mobile menu, contact cards): a tap area of at least 40 x 40px
   without changing the layout. */
.wayra-tap {
  position: relative;
}
.wayra-tap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 40px);
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Mobile menu links slide in one after another when the menu opens (--i = position in the list). */
.wayra-mm-link {
  opacity: 0;
  transform: translateY(14px);
  transition-delay: 0ms;
}
#mobile-menu.is-open .wayra-mm-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(70ms + var(--i, 0) * 50ms);
}
@media (prefers-reduced-motion: reduce) {
  .wayra-mm-link,
  #mobile-menu.is-open .wayra-mm-link {
    transition: none;
  }
}

/* Utilities the original build did not include. */
.overflow-y-auto {
  overflow-y: auto;
}
/* Long e-mail addresses may wrap only on phones; from 768px they stay on one line like the original. */
@media (max-width: 767.98px) {
  .break-words {
    overflow-wrap: anywhere;
  }
}

/* About page, leadership cards: below 390px the 16:9 picture box is shorter than the logo + initials,
   which the original cut off at the bottom. Centre them in the box instead. */
@media (max-width: 389.98px) {
  .aspect-16\/9 > .min-h-\[260px\] {
    min-height: 0;
  }
}