/* =========================================================
   ROOT / THEME VARIABLES
   ========================================================= */

:root{
  --font-body: Arial, "Monotype Corsiva", Helvetica, sans-serif;
  --font-heading: "Monotype Corsiva", Arial, Helvetica, sans-serif;

  --bg-page: #dce6ec;
  --bg-paper: #ffffff;

  --panel-bg: #eef4f7;
  --panel-note-bg: #d6e3ea;
  --panel-submit-bg: #f5f9fb;

  --text: #222;
  --link: #1d5f8a;

  --brand-red: #1f4e6b;
  --header-bg: #c9dbe5;
  --header-border: #4f7a94;

  --border: #d0d0d0;
  --shadow: 0 0 10px rgba(0,0,0,.25);

  --radius: 6px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
}


/* =========================================================
   BASE
   ========================================================= */

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-page);
  color:var(--text);
}

.page{
  max-width:1200px;
  margin:1.5rem auto;
  padding:1rem 1.25rem;
  background:var(--bg-paper);
  box-shadow:var(--shadow);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-title,
.site-subtitle{
  font-family:var(--font-heading);
}

.site-header{
  background:var(--header-bg);
  border-top:3px solid var(--header-border);
  border-bottom:3px solid var(--header-border);
  padding:1rem 0;
  text-align:center;
}

.header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:nowrap;
}

.header-col{
  width:160px;
  text-align:center;
  flex-shrink:0;
}

.header-col img{
  display:block;
  margin:0 auto .4rem;
}

.header-center{
  flex:1;
  min-width:300px;
}

.site-title{
  font-size:3rem;
  font-weight:bold;
  color:var(--brand-red);
  margin:.5rem 0 .25rem;
}

.site-subtitle,
.coord-info,
.updated-line{
  font-size:2rem;
  margin:.2rem 0;
}


/* =========================================================
   PANELS
   ========================================================= */

/* Base panel */

.panel{
  margin:1.25rem 0;
  padding:1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel-bg);
}


/* Panel variants */

.panel.note{
  background:var(--panel-note-bg);
  border:1px dashed var(--border);
}

.panel.submit{
  background:var(--panel-submit-bg);
  border-left:4px solid #c9b89e;
}


/* =========================================================
   PANEL LISTS
   ========================================================= */

.panel ul{
  margin:0;
  padding-left:1.2rem;
}

.panel > ul > li{
  margin-bottom:.5rem;
}


/* =========================================================
   CEMETERY INDEX PANELS
   ========================================================= */

.panel.cemetery{
  padding:.4rem .6rem;
  margin:.5rem 0;
  background:#ecffe6;
}

.panel.cemetery h2{
  margin:0 0 .3rem 0;
  padding:0;
  border:none;
  font-size:1rem;
}

.panel.cemetery ul{
  margin:0;
  padding-left:1rem;
  columns:2;
  column-gap:2rem;
}

.panel.cemetery li{
  margin:0;
  line-height:1.2;
  break-inside:avoid;
}


/* =========================================================
   MULTI-COLUMN LISTS
   ========================================================= */

.panel.column-list ul{
  columns:3;
  column-gap:2rem;
}

.panel.column-list li{
  break-inside:avoid;
  margin:0;
  line-height:1.35;
}

.panel.column-list.four ul{
  columns:4;
}


/* =========================================================
   LAYOUT HELPERS
   ========================================================= */

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.center{
  text-align:center;
}

.loc-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-top{
  margin:.15rem 0 0;
  font-size:.95rem;
  text-align:center;
  opacity:.6;
}

.back-top a{
  text-decoration:none;
}

.back-top a:hover{
  opacity:1;
}


/* =========================================================
   SMALL HELPERS
   ========================================================= */

.external-link{
  text-align:right;
  font-size:.75rem;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4{
  margin:0 0 .5rem 0;
  font-weight:bold;
}

h2{
  font-size:1.15rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--border);
  color:#2b5570;
}

h3{
  font-size:1rem;
  color:#444;
}


/* =========================================================
   LINKS
   ========================================================= */

a{
  color:var(--link);
  text-decoration:underline;
}

a:hover{
  text-decoration:underline;
}


/* =========================================================
   NAVIGATION LISTS
   ========================================================= */

.nav-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
}

.nav-grid li{
  width:45%;
}


/* Jump-to-area navigation */

.jump-nav{
  columns:3;
  column-gap:2rem;
  margin-top:.5rem;
}

.jump-nav a{
  display:block;
  margin:0 0 .35rem 0;
  text-decoration:underline;
}

.jump-nav a:hover{
  background:#f2f2f2;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box{
  text-align:center;
  background:#e0e0e0;
  padding:.75rem;
  border-radius:4px;
  display:inline-block;
}


/* =========================================================
   TABLE WRAPPER

   Use:

   <div class="table-wrap">
     <table class="data-table compact">
       ...
     </table>
   </div>

   This allows large tables to scroll without changing
   the table itself to display:block.
   ========================================================= */

.table-wrap{
  width:100%;
  max-height:70vh;
  overflow:auto;
  margin-top:1.25rem;
}


/* =========================================================
   TABLES
   ========================================================= */

.data-table{
  width:100%;
  border-collapse:collapse;
  line-height:1.6;
}


/* Table header */

.data-table th{
  background:#f2f2f2;
  border:1px solid #bbb;
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}


/* Sticky header works when table is inside .table-wrap */

.data-table thead th{
  position:sticky;
  top:0;
  background:#f2f2f2;
  z-index:5;
}


/* Table cells */

.data-table td{
  border:1px solid #ddd;
  padding:10px 12px;
  vertical-align:top;
}


/* Default:
   Keep short fields such as names, dates and numbers
   on one line.
*/

.data-table th,
.data-table td{
  white-space:nowrap;
}


/* =========================================================
   WRAPPING TABLE COLUMNS

   Fourth and fifth columns are commonly long-text fields
   on cemetery and genealogy tables.

   Pages requiring different behavior can override these
   rules with an additional class.
   ========================================================= */

.data-table td:nth-child(4),
.data-table td:nth-child(5){
  white-space:normal;
}


/* =========================================================
   COMPACT TABLES
   ========================================================= */

.data-table.compact th,
.data-table.compact td{
  padding:8px;
}


/* =========================================================
   OPTIONAL TABLE ALIGNMENT CLASSES

   Use these instead of centering columns on every table
   throughout the site.

   Example:

   <table class="data-table compact center-cols-2-4">

   ========================================================= */

.data-table.center-cols-2-4 td:nth-child(2),
.data-table.center-cols-2-4 td:nth-child(3),
.data-table.center-cols-2-4 td:nth-child(4){
  text-align:center;
}


/* Center an entire table if needed */

.data-table.center-all th,
.data-table.center-all td{
  text-align:center;
}


/* =========================================================
   OPTIONAL TABLE WITH FULL WRAPPING

   Useful for tables containing long descriptions or
   transcriptions.

   Example:

   <table class="data-table wrap">
   ========================================================= */

.data-table.wrap th,
.data-table.wrap td{
  white-space:normal;
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.img-overlay{
  position:fixed;
  inset:0;
  background:var(--bg-paper);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.img-overlay.active{
  display:flex;
}


/* Stage containing zoomable image */

.img-stage{
  position:relative;
  width:90vw;
  height:90vh;
  background:var(--bg-paper);
  overflow:hidden;
}


/* Zoomable / pannable image */

.img-stage img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  cursor:grab;
  max-width:none;
  max-height:none;
}


/* =========================================================
   IMAGE ZOOM CONTROLS
   ========================================================= */

.zoom-controls{
  position:absolute;
  bottom:.5rem;
  right:.5rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  z-index:10;
}

.zoom-controls button{
  width:2rem;
  height:2rem;
  font-size:1.2rem;
  border:1px solid #666;
  background:#f8f8f8;
  cursor:pointer;
  opacity:.9;
}


/* =========================================================
   IMAGE CLOSE BUTTON
   ========================================================= */

.img-close{
  position:fixed;
  top:1rem;
  right:1rem;
  width:2.25rem;
  height:2.25rem;
  line-height:2.25rem;
  text-align:center;
  font-size:1.8rem;
  background:rgba(0,0,0,.6);
  border:1px solid #fff;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  z-index:10001;
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.img-caption{
  margin-top:.5rem;
  font-size:.9rem;
  color:#333;
  background:#f2f2f2;
  padding:.5rem .75rem;
  border-radius:4px;
}


/* =========================================================
   IMAGE REFERENCE LINKS
   ========================================================= */

a.img-ref{
  cursor:pointer;
  text-decoration:none;
}

a.img-ref::after{
  content:" 📷";
  font-size:.85em;
  color:#444;
}


/* =========================================================
   STATIC CEMETERY / RECORD IMAGE
   ========================================================= */

figure.cemetery-plate{
  margin:.5rem auto 1rem;
  text-align:center;
}

figure.cemetery-plate img{
  max-width:60%;
  height:auto;
}

figure.cemetery-plate figcaption{
  font-size:.85rem;
  color:#444;
  margin-top:.25rem;
}

/* =========================================================
   FAMILY PHOTOGRAPHS

   Use:

   <div class="photo-grid">
     <figure class="family-photo"> ... </figure>
     <figure class="family-photo"> ... </figure>
   </div>

   Change the two sizes below to resize every family photo
   on the site.
   ========================================================= */

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
  align-items:start;
}

figure.family-photo{
  margin:0;
  text-align:center;
}

figure.family-photo img{
  max-width:100%;
  max-height:200px;
  height:auto;
}

figure.family-photo figcaption{
  font-size:.85rem;
  color:#444;
  margin-top:.25rem;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  text-align:center;
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
  font-size:.8rem;
  color:#555;
}

.footer-awards{
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
}


/* =========================================================
   OPTIONAL PANEL BACKGROUND IMAGE VARIANTS

   These are disabled.

   Uncomment ONE version if you want to experiment.
   ========================================================= */


/* ---------------------------------------------------------
   1. IMAGE ONLY
   --------------------------------------------------------- */

/*
.panel{
  background:url("your-image.jpg") center/cover no-repeat;
}
*/


/* ---------------------------------------------------------
   2. IMAGE WITH SOFT WHITE OVERLAY
   --------------------------------------------------------- */

/*
.panel{
  background:
    linear-gradient(
      rgba(255,255,255,.85),
      rgba(255,255,255,.85)
    ),
    url("your-image.jpg") center/cover no-repeat;
}
*/


/* ---------------------------------------------------------
   3. IMAGE BLENDED WITH PANEL COLOR
   --------------------------------------------------------- */

/*
.panel{
  background:
    var(--panel-bg)
    url("your-image.jpg")
    center/cover no-repeat;

  background-blend-mode:multiply;
}
*/


/* ---------------------------------------------------------
   4. TILED TEXTURE
   --------------------------------------------------------- */

/*
.panel{
  background:
    var(--panel-bg)
    url("your-image.jpg")
    repeat;

  background-size:auto;
}
*/


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

  .page{
    margin:0;
    padding:.75rem;
  }

  .header-top{
    flex-wrap:wrap;
    justify-content:center;
  }

  .header-col{
    width:140px;
  }

  .header-center{
    min-width:100%;
  }

  .site-title{
    font-size:2rem;
  }

  .site-subtitle,
  .coord-info,
  .updated-line{
    font-size:1.25rem;
  }

  .nav-grid li{
    width:100%;
  }

  .jump-nav{
    columns:1;
  }

  .two-col{
    grid-template-columns:1fr;
  }

  .panel.column-list ul{
    columns:1;
  }

  .panel.column-list.four ul{
    columns:1;
  }

  .panel.cemetery ul{
    columns:1;
  }

  .loc-line{
    flex-direction:column;
    align-items:flex-start;
  }

  figure.cemetery-plate img{
    max-width:100%;
  }

}