body {
      margin: 0;
      font-family: Georgia, serif;
      line-height: 1.6;
      background-color: #fffaf0;
      color: #2b2b2b;
      display: flex;
    }
    header {
      background: url('https://emalta.com/heritage/maltamemorialairmentopa.jpg') no-repeat center/cover;
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 100%;
    }
    header h1 {
      font-size: 2em;
      background-color: rgba(0,0,0,0.5);
      padding: 0.5em 1em;
      border-radius: 12px;
      color: #fff;
      text-align: center;
    }
nav {
  width: 250px;
  background-color: #f4e1c1;
  padding: 20px;
  box-sizing: border-box;
  position: sticky;
  top: 20px; /* slight spacing if desired */
}
    nav h3 {
      margin-top: 0;
    }
    nav ul {
      list-style: none;
      padding: 0;
    }
    nav ul li {
      margin-bottom: 10px;
    }
    nav ul li a {
      text-decoration: none;
      color: #2b2b2b;
    }
    main {
      max-width: 900px;
      padding: 20px;
      flex-grow: 1;
    }
    figure {
      margin: 20px 0;
      text-align: center;
    }
    figure img {
      max-width: 100%;
      border-radius: 8px;
    }
    figure figcaption {
      font-style: italic;
      color: #555;
    }
    
    a:hover {
    color: #007bff !important; /* Blue */
    transition: color 0.3s ease !important;
}

@media (max-width: 768px) {
  /* mobile-specific styles: single column, larger touch targets, smaller images, etc. */
}


/* === GOOGLE CSE MOBILE FIX === */

.search-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

/* Force search box to stay inside screen */
.gcse-search,
.gsc-control-cse,
.gsc-search-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Input field scaling */
.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus {
  height: 42px !important;
  font-size: 16px !important;  /* Prevents iOS zoom */
}

/* Search button scaling */
.gsc-search-button,
.gsc-search-button-v2 {
  height: 42px !important;
  width: auto !important;
}

/* Remove Google padding that breaks mobile */
.gsc-control-cse {
  padding: 0 !important;
}

@media (max-width: 768px) {
  .gsc-search-box {
    display: flex !important;
    width: 100% !important;
  }

  .gsc-input {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .gsc-search-button {
    flex-shrink: 0 !important;
  }
}

/* ===== DESKTOP SEARCH WIDTH CONTROL ===== */
@media (min-width: 1024px) {
  .search-wrapper {
    max-width: 420px;   /* ✅ ideal desktop width */
  }

  .gcse-search,
  .gsc-control-cse,
  .gsc-search-box {
    max-width: 420px !important;
  }
}
/* ===== DESKTOP SEARCH HEIGHT REDUCTION ===== */
@media (min-width: 1024px) {
  .gsc-input,
  .gsc-input-box,
  .gsc-input-box-hover,
  .gsc-input-box-focus {
    height: 30px !important;
    font-size: 14px !important;
  }

  .gsc-search-button,
  .gsc-search-button-v2 {
    height: 30px !important;
  }
}

/* ===== AUTO MATCH SEARCH HEIGHT TO NAV BAR ===== */
@media (min-width: 1024px) {
  .navbar,
  .nav,
  nav {
    --nav-height: 36px;  /* ✅ change this if needed */
  }

  .gsc-input,
  .gsc-input-box,
  .gsc-input-box-hover,
  .gsc-input-box-focus,
  .gsc-search-button,
  .gsc-search-button-v2 {
    height: var(--nav-height) !important;
  }
}


        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            cursor: pointer;
            user-select: none;
        }
        th:hover {
            background-color: #ddd;
        }
        
        .research-box {
    background:#f8f8f8;
    border:1px solid #d8d8d8;
    border-left:5px solid #8b7355;
    padding:18px;
    margin:30px 0;
    border-radius:4px;
}

.research-box h3 {
    margin-top:0;
    margin-bottom:15px;
}

.research-box ul {
    margin:10px 0 15px 20px;
}

.research-box li {
    margin-bottom:6px;
}

.research-box p {
    margin-bottom:12px;
    line-height:1.6;
}

/* ---------- Information Tables ---------- */

.info-table,
.timeline-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.98rem;
}

.info-table th,
.info-table td,
.timeline-table th,
.timeline-table td {
    border: 1px solid #dcdcdc;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.info-table th,
.timeline-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.info-table th {
    width: 32%;
}

/* Zebra rows */

.info-table tr:nth-child(even),
.timeline-table tr:nth-child(even) {
    background: #fafafa;
}

/* ---------- Intro Box ---------- */

.intro {
    background: #f8fafc;
    border-left: 5px solid #005a87;
    padding: 25px;
    margin-bottom: 45px;
    border-radius: 6px;
}

/* ---------- Research Status ---------- */

.research-status {
    background: #f9fcff;
    border: 1px solid #dbe7f0;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 45px;
}

/* ---------- Research Note ---------- */

.research-note {
    background: #fffdf5;
    border-left: 5px solid #d4a017;
    padding: 25px;
    border-radius: 6px;
}

/* ---------- Utility Boxes ---------- */

.fact-box {
    background: #f8fafc;
    border: 1px solid #e1e5e8;
    border-radius: 6px;
    padding: 20px;
    margin: 25px 0;
}

.warning-box {
    background: #fff7e6;
    border-left: 5px solid #d4a017;
    padding: 20px;
    border-radius: 6px;
    margin: 25px 0;
}

/* ---------- Citation ---------- */

blockquote {
    margin: 25px 0;
    padding: 20px;
    background: #fafafa;
    border-left: 5px solid #005a87;
    font-style: italic;
}