/* ============================================================
   Benton County Historical Society — benton.css
   Updated 2026 — New branding with original site compatibility
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }

BODY {
  background-color: #f5f0e4;
  color: #2c2a25;
  font-size: 16px;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  margin: 0;
  padding: 0;
}

A:link    { text-decoration: none; color: #3a5c3a; }
A:visited { text-decoration: none; color: #5a7c5a; }
A:hover   { text-decoration: underline; color: #2c2a25; background-color: transparent; }
A:active  { text-decoration: none; color: #2c2a25; }

P  { font-size: 16px; line-height: 1.75; font-weight: bold; margin-bottom: 8px; }
H1 { font-size: 26px; color: #3a5c3a; font-weight: bold; margin: 8px 0 4px; }
H2 { font-size: 20px; color: #3a5c3a; margin: 6px 0 4px; }
H3 { font-size: 16px; color: #2c2a25; margin: 4px 0 4px; padding-left: 0; padding-bottom: 6px; }
H4 { font-size: 14px; margin: 4px 0; }
H5 { font-size: 13px; margin-bottom: 4px; }
H6 { font-weight: normal; font-style: italic; font-size: 13px; margin: 8px 0; }

IMG { border: 0; max-width: 100%; }
SUP { line-height: 0; }

TABLE  { border-collapse: collapse; }
TH     { padding: 6px 12px 6px 8px; font-weight: bold; text-align: left; background-color: #4a6b4a; color: #e8e0cc; }
TD     { vertical-align: top; padding: 4px 8px; }

DIV { margin: 0; padding: 0; }

/* ── Site Header ──────────────────────────────────────────── */
.site-top-bar {
  height: 5px;
  background-color: #c9a84c;
}

.site-header {
  background-color: #f5f0e4;
  text-align: center;
  padding: 24px 16px 18px;
  border-bottom: 1px solid #d4c8a0;
}

.site-header img.site-logo {
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.site-header .org-name {
  font-size: 24px;
  font-weight: bold;
  color: #3a5c3a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: Georgia, serif;
  margin: 0 0 4px;
}

.site-header .org-tagline {
  font-size: 14px;
  color: #2c2a25;
  margin: 0 0 3px;
}

.site-header .org-location {
  font-size: 14px;
  color: #8b6914;
  font-style: italic;
  font-weight: bold;
  margin: 0;
}

/* ── Navigation Bar ───────────────────────────────────────── */
.site-nav {
  background-color: #4a6b4a;
  text-align: center;
  padding: 0;
}

.site-nav table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-collapse: collapse;
}

.site-nav td {
  text-align: center;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.navButton {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.03em;
  color: #e8e0cc !important;
  background-color: transparent;
  border: none;
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: none;
}

.navButton:hover,
.navButton:focus {
  background-color: #c9a84c !important;
  color: #2c2a25 !important;
  text-decoration: none !important;
}

/* ── Page Content Area ────────────────────────────────────── */
#midpage {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  font-size: 16px;
  background-color: #f5f0e4;
  padding: 16px;
}

#datapage {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  font-size: 13px;
  background-color: #f5f0e4;
  padding: 16px;
}

#header {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background-color: #f5f0e4;
}

/* ── Data Tables ──────────────────────────────────────────── */
TABLE.infolist {
  margin: 8px auto;
  background-color: #fffdf5;
  border: 1px solid #d4c8a0;
  width: 100%;
  max-width: 900px;
}

TABLE.infolist TH {
  background-color: #4a6b4a;
  color: #e8e0cc;
  font-size: 12px;
  padding: 6px 10px;
}

TABLE.infolist TH A {
  text-decoration: none;
  color: #e8e0cc;
}

TABLE.infolist TD {
  font-size: 12px;
  padding: 5px 10px;
  border-bottom: 1px solid #ede6d8;
}

TABLE.infolist TR:nth-child(even) TD {
  background-color: #f9f4ea;
}

TABLE.infolist TR:hover TD {
  background-color: #f0e8d0;
}

/* Results tables from search scripts */
table#midpage {
  background-color: #fffdf5;
  border: 1px solid #d4c8a0;
}

table#midpage th {
  background-color: #4a6b4a;
  color: #e8e0cc;
  font-size: 12px;
  padding: 6px 10px;
}

table#midpage td {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #ede6d8;
}

/* ── Search Result Inline Tables ─────────────────────────── */
td[style*='border:1px solid tan'],
td[style*='border: 1px solid tan'] {
  border-color: #c9a84c !important;
  font-size: 12px;
  padding: 4px 8px;
}

/* ── Utility Classes ──────────────────────────────────────── */
.centered  { text-align: center; }
.leftwrap  { float: left;  margin: 2px 10px 2px 2px; }
.rightwrap { float: right; margin: 2px 2px 2px 10px; }
.fullclear { clear: both; }
.banner    { font-size: 13px; color: #e8e0cc; }
.nav       { font-size: 14px; font-weight: bold; margin-bottom: 4px; }

/* ── Nav Link Variants ────────────────────────────────────── */
.navlink A:link    { text-decoration: underline; color: #3a5c3a; }
.navlink A:visited { text-decoration: underline; color: #3a5c3a; }
.navlink A:hover   { text-decoration: underline; color: #2c2a25; }
.navlink A:active  { text-decoration: underline; color: #2c2a25; }

.navButton A:link    { color: #e8e0cc; }
.navButton A:visited { color: #e8e0cc; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background-color: #3a5c3a;
  color: #c9a84c;
  text-align: center;
  padding: 16px;
  margin-top: 32px;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

.site-footer p {
  color: #e8e0cc;
  font-size: 12px;
  margin: 4px 0 0;
}

#footer {
  background-color: #3a5c3a;
  color: #c9a84c;
  padding: 16px;
  margin: 24px 0 0;
  clear: both;
  text-align: center;
  font-size: 12px;
}

#copyright {
  color: #e8e0cc;
  font-size: 11px;
  margin: 4px 0 0;
}

/* ── Popup / Tooltip (keep original behavior) ─────────────── */
a span { display: none; }

a:hover span {
  position: absolute;
  display: block;
  top: 245px;
  left: 700px;
  width: 300px;
  background: #fffdf5;
  border: 1px solid #c9a84c;
}

.popup a span { display: none; }
.popup a:hover { background-color: #f5f0e4; }
.popup a:hover span {
  position: absolute;
  display: block;
  top: 15px;
  left: 10px;
  width: 360px;
  background: #f5f0e4;
  border: 1px solid #c9a84c;
}

/* ── Photo / Gallery ──────────────────────────────────────── */
.portrait {
  text-align: center;
  margin: 5px 20px 5px 5px;
  padding: 3px;
  border: 2px solid #c9a84c;
}

.snapshot {
  float: right;
  margin: 5px 20px 5px 5px;
  padding: 3px;
  border: 1px solid #c9a84c;
}

.thumbnail {
  margin: 0 2em;
}

#gallery .thumbnail {
  float: left;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 1em;
}

/* ── Content box ──────────────────────────────────────────── */
.content_box {
  float: right;
  margin: 2px;
  padding: 4px 10px 4px 4px;
  color: #2c2a25;
  font-size: 14px;
}

/* ── DataStyles compatibility (search result pages) ──────── */
.datatable tr td {
  font-size: 12px;
  border: 1px solid #c9a84c;
  padding: 4px 8px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 16px 12px 12px; }
  .site-header img.site-logo { max-width: 160px; }
  .site-header .org-name { font-size: 16px; letter-spacing: 0.02em; }
  .site-header .org-tagline { font-size: 12px; }
  .site-header .org-location { font-size: 12px; }
  #midpage, #datapage, #header { padding: 10px; }
  .site-nav table { width: 100%; }
  .site-nav td { display: inline-block; }
  .navButton { padding: 7px 8px; font-size: 12px; }
  img { max-width: 100%; height: auto; }
  table { width: 100% !important; }
}

@media (max-width: 480px) {
  .site-header img.site-logo { max-width: 120px; }
  .site-header .org-name { font-size: 14px; }
  .site-nav td { display: inline-block; }
  .navButton { padding: 6px 6px; font-size: 11px; }
}

.site-nav table {
  width: 100%;
  table-layout: fixed;
}

/* ============================================================
   BCHS NEW HEADER STYLES  (auto-appended by deploy_header.py)
   ============================================================ */

.side-panel { position:fixed;top:0;bottom:0;width:20%;z-index:1;background-size:cover;background-position:center;pointer-events:none; }
.side-panel-left { left:0;background-image:url('/images/panel_left.jpg');background-position:right center !important;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0) 100%);filter:sepia(0.3) brightness(0.85); }
.side-panel-right { right:0;background-image:url('/images/panel_right.jpg');-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to left,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0) 100%);filter:sepia(0.3) brightness(0.85); }
.page-wrap { margin:0 0.5%;position:relative;z-index:10; }
.top-bar { display:none; }
.banner { position:relative;width:100%;height:460px;background:#3d5a35;overflow:visible; }
.banner::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#4a6741 0%,#3d5a35 45%,#2d4228 100%); }
.bl { position:absolute;top:0;left:0;width:44%;height:100%;background:url('/images/panel_house.jpg') 100% center/cover no-repeat;opacity:0.62;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0) 100%);z-index:1; }
.br { position:absolute;top:0;right:0;width:44%;height:100%;background:url('/images/panel_church.jpg') 30% center/cover no-repeat;opacity:0.62;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0) 100%);z-index:1; }
.wash { position:absolute;inset:0;background:rgba(20,60,120,0.15);z-index:2;pointer-events:none; }
.center { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;gap:0;padding:8px 0 8px; }
.frame { position:relative;background:transparent;padding-bottom:0; }
.frame img { display:block;height:360px;width:auto;mix-blend-mode:multiply; }
.ribbon-stack { display:flex;flex-direction:column;align-items:center;gap:0;margin-top:-20px; }
.ribbon-top { display:flex;align-items:center;gap:8px;background:#4a2e08;border:1.5px solid #c9a84c;border-bottom:none;padding:5px 28px;font-family:Georgia,serif;font-size:12px;letter-spacing:0.18em;color:#d4b060;text-transform:uppercase;white-space:nowrap; }
.pip { width:5px;height:5px;border-radius:50%;background:#c9a84c;flex-shrink:0;display:inline-block; }
.ribbon { position:relative;background:#3a2006;color:#f5e090;font-family:'Times New Roman',Georgia,serif;font-size:17px;font-weight:bold;letter-spacing:0.13em;text-transform:uppercase;padding:11px 58px;border-left:2px solid #c9a84c;border-right:2px solid #c9a84c;text-shadow:0 1px 3px rgba(0,0,0,0.7);white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,0.5); }
.ribbon .inner { position:absolute;inset:3px 8px;border-top:1px solid rgba(201,168,76,0.45);border-bottom:1px solid rgba(201,168,76,0.45);pointer-events:none; }
.ribbon::before { content:'';position:absolute;left:-22px;top:-3px;bottom:-3px;width:22px;background:#3a2006;clip-path:polygon(100% 0,100% 100%,0 50%);border-top:2px solid #c9a84c;border-bottom:2px solid #c9a84c; }
.ribbon::after { content:'';position:absolute;right:-22px;top:-3px;bottom:-3px;width:22px;background:#3a2006;clip-path:polygon(0 0,0 100%,100% 50%);border-top:2px solid #c9a84c;border-bottom:2px solid #c9a84c; }
.ribbon-bottom { display:flex;align-items:center;gap:6px;background:#4a2e08;border:1.5px solid #c9a84c;border-top:none;padding:5px 32px;color:#c9a84c;font-size:17px;white-space:nowrap;letter-spacing:5px; }
.site-nav-new { background:#4a5c28;display:flex;justify-content:center;border-top:2px solid #c9a84c;border-bottom:2px solid #6b4f10;position:sticky;top:0;z-index:20; }
.site-nav-new a { color:#e8e0cc;font-size:15px;font-weight:400;padding:11px 20px;text-decoration:none;border-right:1px solid rgba(255,255,255,0.12);display:block;font-family:'Cinzel',Georgia,serif;letter-spacing:0.08em;text-transform:uppercase; }
.site-nav-new a:hover { background:#c9a84c;color:#2c1a00; }

/* ============================================================
   BCHS MOBILE STYLES  — append to bottom of benton.css
   ============================================================ */

@media (max-width: 768px) {

  /* Hide side panels on mobile — too narrow to be useful */
  .side-panel-left,
  .side-panel-right {
    display: none;
  }

  /* Remove side margins so content fills the screen */
  .page-wrap {
    margin: 0;
  }

  /* Shrink the banner height */
  .banner {
    min-height: 320px;
  }

  /* Scale down the logo */
  .frame img {
    height: 200px;
  }

  /* Allow ribbon text to wrap and shrink */
  .ribbon {
    font-size: 12px;
    padding: 8px 32px;
    white-space: normal;
    text-align: center;
  }
  .ribbon::before,
  .ribbon::after {
    display: none;
  }

  .ribbon-top {
    font-size: 9px;
    padding: 4px 14px;
    white-space: normal;
    text-align: center;
  }

  .ribbon-bottom {
    font-size: 13px;
    padding: 4px 16px;
    letter-spacing: 3px;
  }

  .ribbon-stack {
    margin-top: 48px;
    width: 90%;
  }

  /* Nav: allow wrapping and smaller text */
  .site-nav-new {
    flex-wrap: wrap;
    position: static; /* unstick on mobile to save screen space */
  }
  .site-nav-new a {
    font-size: 11px;
    padding: 8px 10px;
    letter-spacing: 0.04em;
  }

}

/* Restore centered body text from original site layout */
body { text-align: center; }
.page-wrap { text-align: center; }


/* ── Homepage two-column layout ── */
@media (max-width: 700px) {
  #midpage div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Homepage mobile responsive ── */
@media (max-width: 768px) {
  /* Stack the two-column homepage grid */
  #midpage div[style*="grid-template-columns:70%"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Stack the right column boxes */
  #midpage div[style*="flex-direction:column"] {
    gap: 14px !important;
  }
  /* Welcome strip smaller text on mobile */
  #midpage p[style*="font-size:20px"] {
    font-size: 16px !important;
  }
  /* Reduce midpage padding */
  #midpage {
    padding: 12px 8px !important;
  }
  /* Nav wrapping on mobile */
  .site-nav-new {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav-new a {
    font-size: 11px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .site-nav-new a {
    font-size: 10px;
    padding: 6px 8px;
  }
  .page-wrap {
    margin: 0 1% !important;
  }
}