/* style.css */
head{
    background-color: #FFFFFF;
    color: #343638;
    
}
.centered {
    text-align: center;
}

body{
    background-color: #FFFFFF;
    color: #343638;
}

/* .pagetitle{
    background-color: #A7C4D4;
    color: #343638;
} */
.pure-menu-horizontal{
    background-color: #A7C4D4;
}

.pure-menu-link{
    color: #343638;
}

.tiles {
  
  padding: 1rem;         /* space around the whole grid */
  max-width: 1300px;
  margin: 0 auto;        /* centers the grid */
}

.tile {
  display: flex;
  flex-direction: column;   /* stack image + text */
  text-decoration: none;    /* no underline */
  color: inherit;           /* use normal text color */
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: transform .15s ease, box-shadow .15s ease;

  max-width: 500px;
  margin: .5rem auto;
}

.tile:hover,
.tile:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.tile img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* change to 1/1 for squares, or 4/3 if you prefer */
  object-fit: cover;      /* fills the box and crops overflow */
  object-position: center;
  display: block;
}

.tile-body {
  padding: 0.75rem;
  text-align: center;
  min-height: 96px;       /* adjust if any subtitle wraps more lines */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tile h3 {
  margin: 0;
  font-size: 1.1rem;
}

.tile p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.content {
  max-width: 900px;     /* limits line length for readability */
  margin: 2rem auto;    /* centers horizontally and adds vertical space */
  padding: 0 1rem;      /* little breathing room on small screens */
  text-align: justify;  /* makes paragraphs justified */
}

img.centered-responsive {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.video {
    margin-top: 5px; /* reduce gap above */
    margin-bottom: 20px;
    text-align: center;
}

.download-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #005bb5;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
}
.download-btn:hover {
  background-color: #A7C4D4;
}

img.scale-by-height {
  height: 50vh;   /* 80% of parent’s height */
  width: auto;   /* maintain aspect ratio */
}

/* style for hamburger menu on mobile*/

/* A11y helper for the toggle's text */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Base nav styling (keeps your color) */
.site-nav.pure-menu-horizontal {
  background-color: #A7C4D4;
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Keep default horizontal list on wide screens */
.site-nav .pure-menu-list {
  display: flex;
  margin: 0;
}

/* Hamburger button: hidden on wide screens */
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: #343638;
}
/* Link color keeps your theme */
.site-nav .pure-menu-link,
.site-nav .pure-menu-heading {
  color: #343638;
}

/* MOBILE BEHAVIOR */
@media (max-width: 720px) {
  /* show hamburger on small screens */
  .menu-toggle { display: inline-block; }

  /* Collapse the list by default */
  .site-nav.pure-menu-horizontal .pure-menu-list {
    display: none;     /* hidden until toggled open */
    width: 100%;
  }

  /* Expand when nav has .is-open (set by JS) */
  .site-nav.is-open .pure-menu-list {
    display: block;
  }

  /* Stack items vertically when open */
  .site-nav .pure-menu-item { display: block; }
  .site-nav .pure-menu-link { display: block; padding: 0.6rem 0.75rem; }
}

/* Simple side-by-side images */
.three-image-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* or center — but NOT stretch */
  gap: 1rem;
  flex-wrap: wrap;
}

.three-image-row img {
  width: 30%;               /* let width drive the scaling */
  height: auto;             /* preserve aspect ratio */
  max-width: 100%;
  /* remove max-height — it causes mismatched constraints */
}


.image-row {
  display: flex;
  justify-content: center;  /* center them as a group */
  gap: 1rem;                /* space between images */
  flex-wrap: wrap;          /* wrap to new line on small screens */
}

.image-row img {
  max-width: 45%;
  height: auto;
  flex: 1 1 45%;   /* each image ~45% width, responsive */
}

.responsive-img {
  max-height: 50vh;   /* limit height to 50% of viewport */
  height: auto;       /* adjust automatically */
  width: auto;        /* keep aspect ratio */
  display: block;     /* allows margin centering */
  margin: 0 auto;     /* centers horizontally */
}