/**
 * Core Web Vitals — CLS / INP helpers (public site)
 */
:root {
  --nav-strip-h: 6px;
  --nav-bar-h: 68px;
  --header-h: calc(var(--nav-strip-h) * 2 + var(--nav-bar-h));
  --hero-min-h: min(520px, 90vh);
  --code-panel-min-h: 300px;
  --banner-min-h: 140px;
  --prod-thumb-h: 120px;
  --testi-avatar: 38px;
}

html { scroll-behavior: smooth; }

/* Site-wide: no underlines on links */
a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

img[width][height] {
  height: auto;
}

.media-fixed {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Reserve space before fonts load */
.site-header {
  min-height: var(--header-h);
}

.hero {
  min-height: var(--hero-min-h);
}

.coding-animation {
  flex: 0 0 min(460px, 100%);
  min-height: var(--code-panel-min-h);
  contain: layout style;
}

.code-container {
  min-height: var(--code-panel-min-h);
}

.banner {
  min-height: var(--banner-min-h);
}

.prod-thumb {
  min-height: var(--prod-thumb-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testi-avatar {
  width: var(--testi-avatar);
  height: var(--testi-avatar);
  min-width: var(--testi-avatar);
  min-height: var(--testi-avatar);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.pattern-strip {
  height: 6px;
  min-height: 6px;
}

.nav-drawer {
  will-change: max-height;
}

/* INP: visible focus, adequate touch targets */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #0077B6;
  outline-offset: 2px;
}

.btn-p,
.btn-s,
.btn-login,
.btn-register,
.nav-toggle {
  min-height: 44px;
  touch-action: manipulation;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .code-line { animation: none !important; opacity: 1 !important; }
  .testi-track { animation: none !important; }
}