/**
 * Pauhu Shell — Shared layout styles for all Pauhu sites
 *
 * Provides: skip link, theme toggle, text size, logo switching,
 * lang switch, hamburger nav, footer, reduced motion.
 *
 * Load order: brand.css → shell.css → site-specific style.css
 *
 * IP: Pauhu Oy, Helsinki. Licensed to Pauhu AI Oy via arm's-length royalty.
 *
 * (c) 2026 Pauhu Oy — EU jurisdiction
 */

/* ── Accessibility — reduced motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skip to content ────────────────────────────────────────── */

.skip-to-content,
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ana-3, hsl(210 60% 55%));
  color: white;
  padding: 0.5rem 1rem;
  z-index: 200;
  font-size: 0.9rem;
  transition: top 0.2s;
  text-decoration: none;
}

.skip-to-content:focus,
.skip-link:focus {
  top: 0;
}

/* ── Theme toggle ───────────────────────────────────────────── */

.theme-toggle {
  background: none;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius, 8px);
  color: var(--color-on-surface);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.3rem 0.5rem;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--color-container);
}

.theme-icon-light { display: none; }
.theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: inline; }
[data-theme="dark"] .theme-icon-dark { display: none; }

/* ── Logo light/dark variants ───────────────────────────────── */

.logo-light { display: inline; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline; }

/* ── Text size controls (A- / A+) ───────────────────────────── */

.text-size-controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.text-size-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
}

.text-size-btn:last-child { border-right: none; }
.text-size-btn:hover { background: var(--color-container); }

/* ── Language switch ────────────────────────────────────────── */

.lang-switch {
  display: none; /* Hidden for workshop — EN only (revert after) */
  gap: 0.5rem;
}

.lang-switch a {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius, 8px);
  border: 1px solid transparent;
}

.lang-switch a:hover {
  color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
}

.lang-switch a[aria-current="page"],
html[lang="en"] .lang-switch a[hreflang="en"],
html[lang="fi"] .lang-switch a[hreflang="fi"] {
  color: var(--color-on-surface);
  font-weight: 700;
  border-color: var(--color-outline-variant);
  background: var(--color-container);
}

/* ── Hamburger nav (mobile) ─────────────────────────────────── */

.nav-hamburger {
  display: none;
}

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-outline-variant, var(--border, #333));
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-on-surface, #fff);
    font-size: 1.25rem;
  }
}

/* ── Footer cross-links ─────────────────────────────────────── */

.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-outline-variant, var(--border, #333));
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-on-surface);
}

/* ── Partner logos ──────────────────────────────────────────── */

.partner-logos {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  opacity: 0.7;
}

.partner-logos:hover {
  opacity: 1;
}

.partner-logos img {
  height: 32px;
  filter: grayscale(0.3);
}

/* ── RTL support (Arabic, Urdu, Hebrew) ───────────────────── */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .nav { flex-direction: row-reverse; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .footer-content { flex-direction: row-reverse; }
[dir="rtl"] .footer-links { flex-direction: row-reverse; }

[dir="rtl"] .product-features li { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .product-features li::before { left: auto; right: 0; }

[dir="rtl"] .result-item { border-left: none; border-right: 3px solid var(--ana-2); }
[dir="rtl"] .source-card { border-left: none; border-right: 3px solid var(--brand); }

[dir="rtl"] .method { margin-right: 0; margin-left: 0.5rem; }

[dir="rtl"] .skip-to-content:focus,
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

/* ── Mobile nav drawer ────────────────────────────────────── */

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface, #0c0e11);
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a,
  .nav-links .nav-link {
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
  }

  /* Close button inside drawer */
  .nav-links::before {
    content: '\00d7';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--color-on-surface, #fff);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [dir="rtl"] .nav-links::before { right: auto; left: 1rem; }
}

/* ── Touch targets — WCAG 2.5.8 (44x44px minimum) ────────── */

@media (pointer: coarse) {
  .btn,
  .nav-links a,
  .nav-link,
  button,
  input[type="submit"],
  select {
    min-height: 44px;
    min-width: 44px;
  }

  .footer-col a {
    padding: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .text-size-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Virtual keyboard handling (mobile chat/search) ───────── */

@supports (height: 100dvh) {
  .app, .app-shell {
    min-height: 100dvh;
  }
}

/* ── Safe area insets (notch devices) ─────────────────────── */

@supports (padding: env(safe-area-inset-top)) {
  .header, .app-header, .site-header {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
  }

  .footer, .app-footer, .site-footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  @media (max-width: 768px) {
    .header, .app-header, .site-header {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }
}