/* css/styles.css */

/* Skip-link utility */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* Base typography */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

/* Headings use Bree Serif */
h2, h3, h4 {
  font-family: 'Bree Serif', serif;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Clear floats */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* Footer link styling */
footer a {
  text-decoration: none;
}

/* tighten up vertical space, give more horizontal room */
section {
  /* less top/bottom */
  padding-top: .5rem;    /* was 3rem (py-5) */
  padding-bottom: .5rem; /* was 3rem (py-5) */

  /* more left/right */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* on larger screens, give even more horizontal breathing room 
@media (min-width: 768px) {
  section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
*/

/* optionally, if you want your main .container to also give equal padding */
.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}





/* Section spacing */
h2 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}


/* Ensure floats scale on mobile */
article img.float-start,
article img.float-end {
  max-width: 100%;
}

/* Iframe bottom margin */
.ratio {
  margin-bottom: 1rem;
}


/* darken links on light-grey backgrounds so they meet 4.5:1 */
.bg-light a,
.bg-light .link-primary {
  color: #004085 !important; /* a darker blue from Bootstrap’s dark variant */
}
.bg-light a:hover,
.bg-light .link-primary:hover {
  color: #002752 !important; /* slightly deeper on hover */
}


.hero-text {
  /* 1) solid dark fallback for checkers */
  background-color: #212121;

  /* 2) actual semi-transparent you want to see */
  background-color: rgba(0, 0, 0, 0.5);

  position: relative;     /* so the background applies behind the text */
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  color: #fff;
}