/* clean.css — dignified, readable typography for the Jih-wen Lin memorial site.
   Replaces Weebly's framework CSS. Solemn serif, generous spacing, restrained
   palette. Also tames leftover Weebly content classes for readability. */

:root {
  --ink: #2b2b2b;
  --muted: #6b6b6b;
  --line: #e2ddd4;
  --bg: #faf8f4;        /* warm off-white, paper-like */
  --accent: #6b5b4b;    /* muted warm brown */
  --accent-dark: #47392c;
  --max: 820px;
  --serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia,
           "Times New Roman", "PMingLiU", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fffdf9;
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px;
  max-width: 1080px;
}
.site-title { text-decoration: none; color: var(--ink); line-height: 1.25; }
.site-title .en { display: block; font-size: 1.15rem; letter-spacing: 0.02em; }
.site-title .zh { display: block; font-size: 0.9rem; color: var(--muted); }

.site-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: flex-end; }
.site-nav a {
  text-decoration: none; color: var(--muted);
  padding: 4px 10px; border-radius: 4px; font-size: 0.92rem;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent-dark); background: #f1ece2; }
.site-nav a.active { color: var(--accent-dark); font-weight: 600; }

.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff;
  font-size: 1.2rem; line-height: 1; padding: 6px 10px; border-radius: 6px;
  cursor: pointer; color: var(--ink);
}

/* ---------- Content ---------- */
.content { padding-top: 40px; padding-bottom: 64px; }

.content h1, .wsite-content-title {
  font-size: 1.8rem; font-weight: 600; line-height: 1.35;
  margin: 0 0 0.8em; color: var(--accent-dark);
  padding-bottom: 0.35em; border-bottom: 1px solid var(--line);
}
.content h2 { font-size: 1.4rem; margin: 1.6em 0 0.6em; color: var(--accent-dark); }
.content h3 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }
.content p, .paragraph { margin: 0 0 1.1em; }
.content a { color: var(--accent-dark); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: #c9bfae; }
.content a:hover { text-decoration-color: var(--accent-dark); }

.content img { max-width: 100%; height: auto; }
.content ul, .content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.content li { margin: 0.25em 0; }
.content blockquote {
  margin: 1.2em 0; padding: 0.4em 1.1em; border-left: 3px solid var(--line);
  color: var(--muted); font-style: italic;
}
.content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* Styled call-to-action buttons carried over from Weebly */
.content .wsite-button {
  display: inline-block; text-decoration: none;
  padding: 8px 18px; border: 1px solid var(--accent);
  border-radius: 5px; color: #fff !important; background: var(--accent);
  margin: 6px 0; font-size: 0.95rem;
}
.content .wsite-button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Neutralize a few Weebly inline-ish artifacts */
.content font { font-family: inherit !important; }
.wsite-spacer { display: none; }
.note { color: var(--muted); font-style: italic; }

/* ---------- Galleries (rebuilt) ---------- */
.g-item, .clean-gallery { margin: 0; }
.content .clean-gallery,
.content .imageGallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin: 1.5em 0; list-style: none; padding: 0;
}
/* When galleries are just a series of figures, flow them in a grid too */
.content .g-item {
  display: flex; flex-direction: column; margin: 0;
}
figure.g-item > .g-link {
  display: block; overflow: hidden; border-radius: 4px;
  border: 1px solid var(--line); background: #fff;
  aspect-ratio: 3 / 2;   /* stable album-style thumbnail box (matches native 3:2 camera photos) */
}
figure.g-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
figure.g-item:hover img { transform: scale(1.04); }
figure.g-item figcaption {
  font-size: 0.82rem; color: var(--muted); margin-top: 6px; line-height: 1.5;
}
/* Reset leftover Weebly gallery wrappers. The per-image column divs still carry
   inline width/float (e.g. width:24.95%) from Weebly's old float layout; left in
   place inside our grid they compound into thin vertical strips. Force every
   wrapper level to block / full-width so each grid cell drives the thumbnail box. */
.content .clean-gallery > div,
.content .clean-gallery > div > div,
.galleryImageHolder, .galleryInnerImageHolder {
  display: block !important; float: none !important;
  width: auto !important; margin: 0 !important;
  padding: 0 !important; position: static !important;
}
.content .clean-gallery > span { display: none !important; }  /* Weebly clearfix span */
.galleryCaptionHolder, .galleryCaptionHolderInnerBg { all: unset; }

/* ---------- Lightbox ---------- */
.lb-overlay {
  position: fixed; inset: 0; background: rgba(20,16,12,0.9);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 24px; cursor: zoom-out;
}
.lb-overlay.open { display: flex; }
.lb-overlay img { max-width: 96vw; max-height: 92vh; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }

/* ---------- Fixes: tame leftover Weebly template artifacts ---------- */
/* Weebly sections carried inline fixed heights (height:593px etc.) that clip
   or leave gaps — let them size to their content. */
.content .wsite-section { height: auto !important; min-height: 0 !important; }

/* Home & Research: drop the near-white section card (inline background-color
   #fcfcfc / #fdfeff) so content sits on the page's warm background — the author
   prefers no white-card feel. Scoped by per-page <body> class so other pages
   (e.g. autobiography, contact, which share #fcfcfc) keep their current look. */
.page-index .content .wsite-section,
.page-research .content .wsite-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep any embed (YouTube / Facebook post / etc.) inside the column. */
.content iframe { max-width: 100%; border: 0; }

/* Responsive 16:9 wrapper for YouTube embeds (Weebly's own RWD CSS was dropped). */
.content .wsite-youtube-container {
  position: relative; width: 100%; max-width: 640px;
  padding-bottom: 56.25%; height: 0; margin: 1.2em auto;
}
.content .wsite-youtube-container iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* Note replacing the removed (non-functional) blog comment form. */
.memorial-note {
  margin: 2.4em 0 0; padding: 16px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.95rem; background: #fffdf9;
}
.memorial-note p { margin: 0; }

/* In-page "Related pages" row on parent pages (Research / Services). */
.subpage-links {
  font-size: 0.92rem; color: var(--muted);
  margin: 0 0 1.8em; padding-bottom: 0.9em;
  border-bottom: 1px solid var(--line);
}
.subpage-links a { color: var(--accent-dark); }

/* Supplementary index of preserved tributes the Weebly listing didn't reach. */
.additional-tributes {
  margin: 2.6em 0 0; padding-top: 1.4em; border-top: 1px solid var(--line);
}
.additional-tributes h2 {
  font-size: 1.15rem; color: var(--accent-dark); margin: 0 0 0.35em;
  border: 0; padding: 0;
}
.additional-tributes .note { margin: 0 0 0.7em; }
.additional-tributes ul { padding-left: 1.3em; margin: 0; }
.additional-tributes li { margin: 0.35em 0; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); background: #fffdf9;
  padding: 28px 0; text-align: center; color: var(--muted); font-size: 0.9rem;
}
.site-footer a { color: var(--accent-dark); }
.muted { color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fffdf9; border-bottom: 1px solid var(--line);
    padding: 8px 16px 14px;
  }
  .site-header { position: relative; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 8px; border-bottom: 1px solid #f0ebe1; text-align: left; }
  .content h1, .wsite-content-title { font-size: 1.5rem; }

  /* Weebly multi-column layouts are <table>-based; stack them on phones so
     narrow columns (e.g. a book cover in an 18% cell) aren't squished. */
  .content .wsite-multicol-table,
  .content .wsite-multicol-tbody,
  .content .wsite-multicol-tr { display: block; width: 100%; }
  .content .wsite-multicol-col {
    display: block !important; width: 100% !important;
    padding: 0 0 1em !important;
  }
}