/* Responsive helper styles for BrainyKid */
:root{
  --container-max: 1120px;
}

/* Ensure images scale nicely */
img{max-width:100%;height:auto;display:block}

/* Constrain wide containers on small screens */
.container, .max-w-7xl, .max-w-6xl, .max-w-4xl, .max-w-xl{
  width:100%;padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;
}

/* Improve spacing on small devices */
@media (max-width: 640px){
  .h-16{height:56px}
  nav .px-4{padding-left:0.75rem;padding-right:0.75rem}
  .text-4xl{font-size:1.5rem}
  .sm\\:text-6xl{font-size:2rem}
  .px-8{padding-left:0.75rem;padding-right:0.75rem}
  .py-3\.5{padding-top:0.65rem;padding-bottom:0.65rem}
}

/* Reduce hero image height for small devices */
@media (max-width: 640px){
  .object-cover{object-fit:cover}
  img.max-h\\[\'250px\']{max-height:160px !important}
  .text-4xl{font-size:1.6rem !important}
  h1 .sm\\:inline{display:none}
}

/* Buttons and inputs more compact on small screens */
@media (max-width: 480px){
  .px-8{padding-left:0.75rem;padding-right:0.75rem}
  .py-3\.5{padding-top:0.6rem;padding-bottom:0.6rem}
  .rounded-2xl{border-radius:0.6rem}
}

/* Make forms full width on small screens */
form input[type=text], form input[type=email], form input[type=tel], form input[type=password], form select, textarea{
  box-sizing: border-box;
}

/* Improve grid stacking */
@media (max-width: 768px){
  .sm\\:grid-cols-3{grid-template-columns: repeat(1, minmax(0,1fr));}
  .md\\:flex-row{flex-direction: column}
}

/* Small visual tweaks for cards */
.rounded-3xl{border-radius:1rem}
.rounded-2xl{border-radius:0.75rem}

/* Ensure modals and overlays are usable */
.modal, .overlay{max-width:95vw}

/* Accessibility: increase tap targets */
button, a {touch-action: manipulation}

/* Utility: hide images over certain height on small screens */
@media (max-width:480px){
  img.max-h\\[\'250px\']{max-height:180px}
}

/* Fix elements that set a minimum width (Tailwind arbitrary) on small screens */
@media (max-width:640px){
  .min-w-\[200px\]{min-width: auto !important; width: auto !important;}
  .min-w-\[200px\] > *{max-width:100%;}
}

/* Style mobile menu panel to appear below the nav and match right alignment */
@media (max-width: 768px){
  #mobileMenuPanel{position:absolute;right:0;left:0;top:100%;box-shadow:0 10px 30px rgba(2,6,23,0.08);}
  #mobileMenuPanel .px-4{padding-left:0.75rem;padding-right:0.75rem}
}