/* override.css - accessibility improvements for specific buttons */

/* Improve contrast for the "Ver Cursos" outlined button in the Hero (#inicio)
   - Normal: dark text + gold border for legibility on light/dark backgrounds
   - Hover/Focus: gold background with white text for strong contrast */
#inicio .border-2.border-white\/30.text-white{
  border-color: #c9a227 !important; /* gold border */
  color: #ffffff !important; /* white text in normal state */
  background-color: transparent !important;
}
#inicio .border-2.border-white\/30.text-white:hover,
#inicio .border-2.border-white\/30.text-white:focus{
  background-color: #c9a227 !important; /* gold */
  color: #ffffff !important; /* white text on gold */
  border-color: #c9a227 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  outline: none;
}
#inicio .border-2.border-white\/30.text-white:focus-visible{
  box-shadow: 0 0 0 4px rgba(201,162,39,0.18);
}

@media (prefers-contrast: more){
  #inicio .border-2.border-white\/30.text-white{
    border-color: #c9a227 !important;
  }
}

/* Prevent horizontal overflow on small screens */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* prevent accidental horizontal scrolling */
}

/* Ensure media and SVGs scale down */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Make sure common max-width utility containers don't overflow on very small devices */
.max-w-7xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-max, .container {
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

/* Wrap long words/URLs so they don't cause overflow */
p, h1, h2, h3, h4, h5, h6, li, a, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Force any extremely wide elements to fit within viewport */
* {
  box-sizing: border-box;
}

@media (max-width: 480px) {
  /* small extra safeguard for transforms or large fixed elements */
  body > * {
    min-width: 0;
  }
}

/* Styles for the hero inline image inserted under "Ver Cursos" */
.hero-inline-image {
  display: block;
  width: 100%;
  max-width: calc(100% - 2rem);
  margin: 1.25rem auto 0;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.12);
}

/* Smaller footprint on very small screens */
@media (max-width: 420px) {
  .hero-inline-image { margin-top: 0.75rem; border-radius: 8px; }
}