/* ============================================================
   UA Pilots English Program — site-custom.css
   Consolidated from: custom.css, custom-register.css, custom-resources.css
   ============================================================ */

/* ---------------------------
   Accessibility Utilities
--------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------
   General Responsive Styling
--------------------------- */
img.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  #nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
  }

  body {
    padding: 0 1rem;
  }
}

/* ---------------------------
   Google Form Wrapper (Register Page)
--------------------------- */
.google-form-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 1.5rem auto 0;
  padding-top: 150%; /* Aspect ratio for form */
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.google-form-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .google-form-wrapper {
    padding-top: 200%;
  }
}

/* ---------------------------
   Resource Sections (Resources Page)
--------------------------- */
.resource-section {
  margin-top: 2rem;
}

.resource-section ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.resource-section a {
  text-decoration: none;
}

.resource-section a:hover,
.resource-section a:focus {
  text-decoration: underline;
}
/* Resources page: make link titles stronger, descriptions smaller */
.wrapper.style1 .resource-section ul {
  margin-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.wrapper.style1 .resource-section ul li {
  margin-bottom: 0.9rem;
}

/* Main clickable link (the thing users care about) */
.wrapper.style1 .resource-section ul li > a {
  display: inline-block;
  font-size: 1.1rem !important;      /* bigger than body text */
  font-weight: 600;                  /* semi-bold */
  color: #222 !important;            /* darker, higher contrast */
  text-decoration: underline;        /* clear that it’s clickable */
}

.wrapper.style1 .resource-section ul li > a:hover,
.wrapper.style1 .resource-section ul li > a:focus {
  color: #000 !important;
}

/* Supporting description under each link */
.wrapper.style1 .resource-section ul li > p {
  margin: 0.15rem 0 0.45rem;
  font-size: 0.9rem !important;      /* smaller than link + body */
  line-height: 1.4;
  color: #666 !important;            /* clearly secondary */
}
/* Main clickable link (the thing users care about) */
.wrapper.style1 .resource-section ul li > a {
  display: inline-block;
  font-size: 1.1rem !important;
  font-weight: 600;
  color: #0056b3 !important;          /* blue link */
  text-decoration: underline;
}

/* Hover / focus: slightly darker blue */
.wrapper.style1 .resource-section ul li > a:hover,
.wrapper.style1 .resource-section ul li > a:focus {
  color: #003f88 !important;          /* darker blue on hover/focus */
}

/* Optional: keep visited links same blue so they don’t “disappear” */
.wrapper.style1 .resource-section ul li > a:visited {
  color: #0056b3 !important;
}