/* ============================================
   pls. — page styles for the one-pager
   (globals + interactions the design system CSS doesn't cover)
   ============================================ */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--pls-white); overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

/* Scroll-reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.15,1), transform .7s cubic-bezier(.2,.7,.15,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* responsive nav: desktop / mobile swap */
[data-mobile-only] { display: none; }
@media (max-width: 900px) {
  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: inline-flex !important; }
}

/* Hover states (were inline style-hover in the prototype) */
.pls-wa-icon { transition: background .14s ease, color .14s ease, border-color .14s ease; }
.pls-wa-icon:hover { background: var(--pls-purple); color: #fff; border-color: var(--pls-purple); }
.pls-email-row { transition: border-color .14s ease; }
.pls-email-row:hover { border-color: var(--pls-lilac); }

/* About section grid */
.pls-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  grid-template-areas: "head ." "img text";
}
@media (max-width: 760px) {
  .pls-about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "img" "text";
  }
}

/* Mobile drawer */
.pls-drawer { display: none; }
.pls-drawer.is-open { display: flex; }
body.pls-no-scroll { overflow: hidden; }

/* Coffee blend ladder — keep readable on small screens */
@media (max-width: 560px) {
  .pls-blend-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Contact form paired fields stack on narrow screens */
@media (max-width: 520px) {
  .pls-field-pair { grid-template-columns: 1fr !important; }
}

/* Language toggle buttons (nav + footer). Colors flip automatically inside
   a [data-theme="dark"] subtree because they read the semantic tokens. */
.pls-lang-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.01em;
  font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; display: inline-block;
}
.pls-lang-btn:hover { color: var(--color-text); }
.pls-lang-btn.is-active { font-weight: 700; color: var(--color-text); }
.pls-lang-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Skip link for keyboard users */
.pls-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pls-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; text-decoration: none;
}
.pls-skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}