/* Centralized responsive overrides for the site
   - Provides common @media rules for header, hero, canvas, forms and general layout
   - Mobile-first friendly overrides that complement existing page CSS files
*/

/* Make images and media fluid by default */
img, picture, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Small utility container adjustments */
.container, .contact-card, .card { padding-left: 18px; padding-right: 18px; }

/* ----- Breakpoint: tablets and below ----- */
@media (max-width: 900px) {
  /* Header: reduce padding and wrap nav */
  header {
    padding: 12px 18px;
  }
  header nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  header .logo { font-size: 1.1rem; }

  /* Hero: stack and center content */
  .hero {
    flex-direction: column;
    align-items: center;
    padding: 20px 18px;
    gap: 18px;
  }
  .hero-text { width: 100%; text-align: center; }
  .hero-image { width: 80%; max-width: 360px; height: auto; object-fit: cover; }

  /* Game canvas: scale down to fit */
  .snake-game-container { padding: 16px; }
  #gameCanvas { width: 100%; height: auto; max-width: 560px; }

  /* Forms and grids: single column where appropriate */
  .grid-2, .grid-split { grid-template-columns: 1fr; }

  /* Ensure controls/buttons wrap nicely */
  .controls .button-row { flex-wrap: wrap; gap: 8px; }
  .btn.control-btn { min-width: 120px; }
}

/* ----- Breakpoint: phones and small tablets ----- */
@media (max-width: 700px) {
  /* Header stacks and gives nav full width */
  header { flex-direction: column; align-items: stretch; gap: 10px; }
  header nav { width: 100%; display: flex; justify-content: space-around; }

  /* HUD and game controls stack vertically */
  .snake-hud { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .hud-right { align-self: flex-end; }

  /* Make action buttons easier to tap */
  .btn, .control-btn { width: 100%; box-sizing: border-box; }

  /* Reduce card padding on small screens */
  .contact-card, .card { padding: 16px; }
}

/* ----- Breakpoint: very small phones ----- */
@media (max-width: 480px) {
  /* Smaller type for very small screens */
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }
  footer { font-size: 13px; text-align: center; padding: 14px; }

  /* Tighten up spacing */
  header { padding: 10px 12px; }
  .hero-image { max-width: 280px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Disable/hide game controls on mobile & touch devices (phones + tablets) */
.snake-unavailable { display:none; padding:12px 16px; background:rgba(255,255,255,0.03); color:var(--text-main, #eafcff); border-radius:8px; text-align:center; font-weight:700; margin-bottom:10px; }
@media (max-width:1024px), (hover: none) and (pointer: coarse) {
  .snake-game-container canvas,
  .snake-game-container .controls,
  .snake-game-container .snake-hud {
    display: none !important;
  }
  .snake-game-container { position: static; width: 100%; max-width: 680px; margin: 12px auto; padding: 12px; }
  .snake-unavailable { display:block; }
}