/* LiteCode website — animations, responsive rules, and interaction states.
   Layout/visual styling is authored inline on elements (from the Litecode Website design). */
@keyframes lcUp { from { transform: translateY(16px); } to { transform: none; } }
@keyframes lcPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@media (prefers-reduced-motion: reduce) { [style*="lcUp"], [style*="lcFloat"], [style*="lcBar"], [style*="lcPulse"] { animation:none !important; } }
@keyframes lcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lcBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
body { margin:0; }
html { scroll-behavior:smooth; }
[data-lucide] { stroke-width:1.75; }
::selection { background:#d9e8ff; color:#133f78; }
.lc-link:hover { color:#1878e0 !important; }
.lc-navcta:hover { background:var(--accent-mid,#2d86ea) !important; transform:translateY(-1px); }
.lc-prod:hover { transform:translateY(-2px); }
input:focus, textarea:focus { outline:none; border-color:var(--accent,#1878e0) !important; box-shadow:0 0 0 3px rgba(24,120,224,0.16); }

/* ============ RESPONSIVE ============ */
/* NOTE: React re-serializes inline styles with a space after each colon,
   so attribute selectors must use the spaced form (e.g. "font-size: 68px"). */
/* Tablet: collapse 3/4-col grids to 2 */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Phone / small tablet: stack everything */
@media (max-width: 860px) {
  .lc-nav-links { display:none !important; }
  nav { padding-left:18px !important; padding-right:18px !important; }
  .lc-hero-grid { grid-template-columns:1fr !important; gap:40px !important; }
  .lc-about-grid { grid-template-columns:1fr !important; gap:36px !important; }
  .lc-contact-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .lc-prod-row { grid-template-columns:1fr !important; gap:30px !important; }
  .lc-prod-row > * { order:0 !important; }
  .lc-bespoke { grid-template-columns:1fr !important; gap:28px !important; padding:30px !important; }
  .lc-eco-grid { grid-template-columns:1fr !important; gap:40px !important; }
  .lc-hw-side { display:none !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns:1fr 1fr !important; gap:28px !important; }
  /* headings shrink */
  [style*="font-size: 68px"] { font-size:38px !important; }
  [style*="font-size: 60px"] { font-size:38px !important; }
  [style*="font-size: 44px"] { font-size:30px !important; }
  [style*="font-size: 42px"] { font-size:30px !important; }
  [style*="font-size: 40px"] { font-size:28px !important; }
  [style*="font-size: 38px"] { font-size:27px !important; }
  [style*="font-size: 32px"] { font-size:26px !important; }
  h1[style*="font-size: 20px"], p[style*="font-size: 20px"] { font-size:17px !important; }
  [style*="font-size: 18.5px"] { font-size:16.5px !important; }
  /* section padding shrink */
  [style*="padding: 96px 32px"] { padding:60px 20px !important; }
  [style*="padding: 90px 32px"] { padding:60px 20px !important; }
  [style*="padding: 84px 32px 0"] { padding:48px 20px 0 !important; }
  [style*="padding: 72px 32px 80px"] { padding:44px 20px 52px !important; }
  [style*="padding: 72px 32px; position"] { padding:56px 20px !important; }
}
/* Narrow phone: single-column cards + tighter type */
@media (max-width: 560px) {
  .lc-form-row { grid-template-columns:1fr !important; }
  .lc-nav-store { display:none !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
  [style*="font-size: 68px"] { font-size:32px !important; }
  [style*="font-size: 60px"] { font-size:32px !important; }
  [style*="font-size: 44px"] { font-size:27px !important; }
  [style*="font-size: 42px"] { font-size:27px !important; }
}

/* a11y / UX hardening (not part of the visual design):
   keyboard focus ring + offset anchored sections so they clear the sticky header. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent, #1878e0); outline-offset: 2px; border-radius: 4px; }
#top, section[id] { scroll-margin-top: 88px; }