/* Reset-ish */
* { box-sizing: border-box; }
html,body{height:100%;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #fafafa;
  color: #222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Page container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.site-title{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing: -0.01em;
  color: #0b3140;
}
.site-subtitle{ font-size:0.9rem; color:#4a4a4a }

/* Top navigation */
.topnav{
  display:flex;
  gap:10px;
  background: linear-gradient(90deg,#0b3140,#0b5262);
  padding:6px 10px;
  border-radius:8px;
}
.topnav a{
  color: #fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:6px;
  font-weight:600;
}
.topnav a.active{ background: rgba(255,255,255,0.12); }
.topnav a:hover{ background: rgba(255,255,255,0.08); }

/* Support pages that use a plain div.topnav (legacy files) */
.topnav{ align-items:center; }

/* Center top navigation horizontally on every page */
.topnav{
  margin-left: auto;
  margin-right: auto;
}

/* When the header contains both title and nav, keep spacing but allow nav to be centered */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* On narrow screens stack title above navigation and center both */
@media (max-width:720px){
  .site-header{ flex-direction:column; align-items:center; gap:8px }
  .topnav{ width:100%; max-width:720px; box-sizing:border-box }
}

/* Style for in-page lists of links (pictures page, blog index, video lists) */
.navlist, .link-cards{
  margin-top:18px;
}
.navlist ul, .link-cards ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.navlist li, .link-cards li{
  background:#fff;
  border:1px solid rgba(12,30,40,0.06);
  padding:12px 14px;
  border-radius:8px;
  box-shadow: 0 6px 18px rgba(12,30,40,0.03);
}
.navlist a, .link-cards a{
  color:#0b3140;
  text-decoration:none;
  font-weight:600;
}
.navlist a:hover, .link-cards a:hover{
  color:#0b5262;
  text-decoration:underline;
}

/* Blog item link lists (for e.g. archive) */
.blog-links{
  margin-top:14px;
}
.blog-links a{ display:block; padding:8px 0; color:#19424a; text-decoration:none }
.blog-links a:hover{ color:#0b5262; text-decoration:underline }

/* Small media/video list style */
.video-list ul{ list-style:none; padding:0; }
.video-list li{ margin-bottom:8px }
.video-list a{ color:#0b3140; font-weight:600 }

/* Responsive video grid */
.video-container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:18px;
}
.video-tile{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#000;
  box-shadow: 0 6px 18px rgba(12,30,40,0.06);
  /* aspect-ratio: auto;*/
  min-height:120px;
}
.video-container video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
  background:#000;
}

/* make individual video elements keyboard-focusable and show ring */
.video-tile:focus-visible{
  box-shadow: 0 0 0 3px rgba(11,81,98,0.18), 0 8px 20px rgba(12,30,40,0.06);
}

/* Utility classes for centering content */
.center{ text-align:center; }

/* Body text blocks used across pages */
.bodytext, .starttext{ color:#333; }

/* Gallery grid */
.gallery{
  position:relative;
  display:grid;
  /* use auto-fit so items fill available space and remain responsive */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:16px; /* slightly more breathing room between items */
  margin-top:18px;
}
.media-tile{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#efefef;
  box-shadow: 0 6px 18px rgba(12,30,40,0.06);
  cursor:pointer;
  display:block;
}

.media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: 600;
  transform: translateY(0);
  opacity: 1;
  z-index: 2;
}
.media-tile:hover .media-caption,
.media-tile:focus-within .media-caption,
.media-tile:focus .media-caption{
  transform: translateY(0%);
  opacity:1;
}
.media-caption span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gallery-item, .video-tile, .gallery > .frontpagepic{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#efefef;
  box-shadow: 0 6px 18px rgba(12,30,40,0.06);
  cursor:pointer;
  display:block;
}
.gallery-item .thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), filter 360ms;
  will-change: transform;
}
.gallery-item:hover .thumb, .video-tile:hover video{ transform: scale(1.03); }

/* Caption overlay */
.gallery-item .caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color:#fff;
  font-weight:600;
  transform: translateY(100%);
  transition: transform 260ms ease, opacity 220ms ease;
  opacity:0;
}
.gallery-item:hover .caption,
.gallery-item:focus-within .caption,
.gallery-item:focus .caption{
  transform: translateY(0%);
  opacity:1;
}
.gallery-item .caption span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Make gallery items keyboard accessible and show a focus ring */
.gallery-item:focus{ outline: none; }
.gallery-item:focus-visible{
  box-shadow: 0 0 0 3px rgba(11,81,98,0.18), 0 8px 20px rgba(12,30,40,0.06);
}

/* Touch-specific overlay for .gallery-item to show clearer focus/active state on phones */
@media (hover: none) and (pointer: coarse){
  .gallery-item{
    /* create a layering context for the overlay */
    position:relative;
    will-change: transform, opacity;
  }

  /* use a pseudo-element as overlay */
  .gallery-item::after{
    content: '';
    position:absolute;
    inset:0;
    /* stronger gradient for better contrast on touch devices */
    background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.42));
    opacity:0;
    transition: opacity 180ms ease, transform 200ms ease;
    pointer-events:none;
    border-radius:inherit;
  }

  /* show overlay on touch (active) or when focused via keyboard on device */
  .gallery-item:active::after,
  .gallery-item:focus::after,
  .gallery-item:focus-within::after{
    opacity:1;
    transform: translateY(0);
  }

  /* also make caption more visible on touch */
  .gallery-item:active .caption,
  .gallery-item:focus .caption,
  .gallery-item:focus-within .caption{
    transform: translateY(0%);
    opacity:1;
  }
}

/* Smaller screens: reduce columns and spacing */
@media (max-width:720px){
  .gallery{ grid-template-columns: repeat(2, 1fr); gap:10px }
}

@media (max-width:420px){
  .gallery{ grid-template-columns: repeat(1, 1fr) }
}

/* legacy size helper classes removed (grid handles sizing) */

/* Lightbox wrapper and content (preserve existing classes used by gallery.js) */
.lightbox-wrapper{ display:none; background:#111; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.lightbox{ width:100%; height:100%; display:flex; flex-direction:column; color:#fff; }
.lightbox .lightbox-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:rgba(0,0,0,0.35); }
.lightbox .lightbox-title{ font-weight:600; }
.lightbox .lightbox-numbers{ opacity:0.9 }
.lightbox .lightbox-slides-wrapper{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox .lightbox-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform 400ms ease, opacity 400ms ease; }
.lightbox .lightbox-slide[data-state="prev"]{ transform:translateX(-100%); opacity:0 }
.lightbox .lightbox-slide[data-state="next"]{ transform:translateX(100%); opacity:0 }
.lightbox .lightbox-slide[data-state="current"]{ transform:translateX(0); opacity:1 }
.lightbox .lightbox-image{ max-width:90%; max-height:85vh; display:block }
.lightbox .lightbox-close{ background:none; border:0; color:#fff; font-size:22px; cursor:pointer }
.lightbox .lightbox-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; background:rgba(0,0,0,0.45); border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:0; color:#fff; z-index:1001 }
.lightbox .lightbox-arrow svg{ width:22px; height:22px }
.lightbox .lightbox-arrow.arrow-left{ left:12px }
.lightbox .lightbox-arrow.arrow-right{ right:12px }
.lightbox .lightbox-arrow:hover{ background:rgba(0,0,0,0.6) }
.lightbox .lightbox-arrow:focus{ outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,0.12) }

/* Responsive tweaks */
@media (max-width:720px){
  .site-title{ font-size:1.05rem }
  .topnav{ gap:6px; padding:8px }
  .topnav a{ padding:8px 10px; font-size:0.95rem }
  .gallery{ grid-template-columns: repeat(2, 1fr); gap:10px }
}

@media (max-width:420px){
  .gallery{ grid-template-columns: repeat(1, 1fr) }
}

/* Mobile-specific touch and hit-area improvements */
@media (max-width:480px){
  /* Make topnav links larger and stack them vertically for easier tapping */
  .topnav{ flex-direction:column; align-items:stretch; padding:8px; gap:8px }
  .topnav a{ display:block; width:100%; text-align:center; padding:12px 14px; border-radius:8px }

  /* Increase lightbox arrow hit area and slightly reposition so they're easy to reach */
  .lightbox .lightbox-arrow{ width:64px; height:64px; }
  .lightbox .lightbox-arrow.arrow-left{ left:8px }
  .lightbox .lightbox-arrow.arrow-right{ right:8px }

  /* Ensure gallery tiles on phones have a usable height before images load */
  .gallery-item, .media-tile{ min-height:140px }
}

/* Extra small phones: larger tap targets and remove heavy shadows for clarity */
@media (max-width:360px){
  .topnav a{ padding:14px 16px; font-size:1rem }
  .gallery-item, .media-tile{ min-height:120px }
  .gallery{ gap:8px }
  .lightbox .lightbox-arrow{ width:56px; height:56px }
}

/* Minor utility */
.frontpagepic{ display:block; margin:10px auto; border-radius:8px; overflow:hidden }

/* When `.frontpagepic` is used inside a `.gallery`, make it behave like a proper
   grid item: fill the grid cell, maintain aspect ratio and ensure the img scales
   to the cell (prevents overlapping/overflow issues when images have fixed width attrs) */
.gallery > .frontpagepic{
  margin:0; /* grid gap handles spacing */
  border-radius:10px;
  overflow:hidden;
  display:block;
  width:100%;
  /* prefer native aspect-ratio but fall back to min-height */
  aspect-ratio: 4 / 3;
  min-height:140px;
}
.gallery .frontpagepic img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover; /* crop to fill the grid tile */
}
.blogitem{ padding-bottom:18px }
.blogitem .blogitemdate{ font-size:11px; color:#666 }
.blogitem .blogitemheading{ font-size:20px; margin:6px 0 }

.blogitem .blogitemtext{ font-size:16px; color:#333 }