/* LexiFlow Shared Layout — Agent-Centric Styles */
/* Accessibility & Layout Shift Prevention */

/* --- Layout Shift Prevention --- */
html { overflow-y: scroll; }
body { min-height: 100vh; }
img, video, iframe { max-width: 100%; height: auto; }
img { aspect-ratio: attr(width) / attr(height); }

/* --- Agentic Intake Section --- */
#agentic-intake-section {
  scroll-margin-top: 80px;
}

/* --- Focus Management --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 2px;
}

/* --- Skip to Content --- */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: #c9a84c;
  color: #0f172a;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 0;
}

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

/* --- Responsive Typography --- */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.1rem, 3vw, 1.4rem) !important; }
}

/* --- Agent Accessible Navigation --- */
nav ul li a[aria-current="page"] {
  font-weight: 700;
  color: #c9a84c;
}

/* --- Prevent CLS on Hero Images & CTAs --- */
.btn, .btn-cta, .btn-primary, .btn-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Nav Toggle (Hamburger) --- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  color: #0f172a;
}
@media (max-width: 768px) {
  .nav-toggle { display: block; }
}

/* --- Agentic Browsing: Owner-Specified Styles --- */
#agentic-intake-section {
  display: block;
  min-height: 450px;
  contain: layout size;
}
#webmcp-intake-form input,
#webmcp-intake-form select,
#webmcp-intake-form textarea,
#webmcp-intake-form button,
#webmcp-intake-form label {
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 44px;
  min-height: 44px;
}
#webmcp-intake-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}