body {
  /* Bob preference:
     light blue page background helps frame the centered white content blocks */
  background-color: lightblue;
}

.site-header,
.site-footer,
main {
  /* Keep main page sections aligned to the same centered width */
  font-size: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

main {
  /* White content area inside the light blue page background */
  background: #ffffff;
  min-height: 60vh;
}

.header-grid {
  /* Header layout:
     logo/image on the left, text content on the right */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
}

.container-grid {
  /* Two-column content block:
     fixed-ish image column + flexible text column */
  display: grid;
  grid-template-columns: clamp(110px, 30vw, 229px) 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
  margin-bottom: 2rem;
}

.group-margin {
  /* Small left indent for grouped content sections */
  margin-left: 1%;
}

img.link-group {
  /* Makes linked group images scale to fit their container */
  width: 100%;
  height: auto;
  display: block;
}

/* Shared thumbnail styling for BOTH images and videos
   This creates a consistent "tile" look and strong visual affordance */
.photoslink {
  display: inline-block;          /* Ensures consistent box behavior */
  width: 200px;
  height: auto;

  border: 6px solid #1a4cff;      /* Bob chose bold — very visible 👍 */
  border-radius: 6px;             /* Slight rounding for softer edges */

  margin: 8px;
  box-sizing: border-box;         /* Keeps border from expanding layout */

  background: #ffffff;            /* Helps normalize video appearance */
}

/* Hover state: strong feedback */
.photoslink:hover {
  border-color: #00aa00;
  cursor: pointer;
}

/* Video-specific adjustments */
.photo-video-thumb {
  vertical-align: top;            /* Keeps video aligned with image thumbnails */
}
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #d8d8d8;
}

img.responsive {
  /* General-purpose responsive image */
  width: 90%;
  height: auto;
}

/* Container for photo/video thumbnails
   Uses flex so thumbnails wrap naturally across the page */
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.center_responsive {
  /* Centers an image-like element and gives it a large display width */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  height: auto;
}

img.link {
  /* Standard image size for linked content blocks */
  max-width: 229px;
  height: auto;
}

a:hover {
  /* Global link hover color */
  color: green;
}

a.link-a {
  /* Special larger text links used in content areas */
  color: #0000FF;
  font-size: 25px;
}

a.link-a:hover {
  color: green;
}

.site-logo {
  /* Site logo sizing in the header */
  max-width: 110px;
  height: auto;
}

.site-nav {
  /* Simple horizontal nav that wraps on narrower screens */
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: #0645ad;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

h1, h2, h3, p {
  /* Tight vertical rhythm for this site style */
  margin: 0 0 5px 0;
  padding: 0;
}

.content-note {
  color: #555;
  font-style: italic;
}

.site-footer {
  font-size: 0.95rem;
  color: #555;
  border-top: 1px solid #d8d8d8;
  background: #ffffff;
}

.cookie-consent {
  /* Keeps cookie text centered and narrower than full page width */
  max-width: 1000px;
  margin: 1rem auto 2rem auto;
  padding: 0 1rem;
  color: #555;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .container-grid {
    /* Collapse to a single column on smaller screens */
    grid-template-columns: 1fr;
  }

  .container-grid a:first-child {
    /* Keep the linked image from growing too large in stacked view */
    max-width: 229px;
  }
}