/* ========= Base + fluid sizing ========= */
:root{
  --maxw: 1000px;             /* your original max width */
  --gap: 1rem;
  --fs-body: clamp(14px, 1.6vw, 16px);   /* fluid body size */
  --fs-h: clamp(20px, 3vw, 28px);        /* fluid section headings */
}

html, body { margin:0; }
body{
  font-family:'Open Sans', sans-serif;
  background-color:#f7f9fc;
  color:#1a1a1a;
  padding:0 20px;
  max-width:var(--maxw);
  margin:auto;
  font-size:var(--fs-body);
  line-height:1.5;
}

/* ========= Lists ========= */
ul{ list-style-type:square; padding-left:20px; }
.nodec{ list-style-type:none; padding-left:0; }

/* ========= Header block ========= */
#doc_head{
  background:#f0f5ff;              /* lighter than #e6f0ff */
  padding:20px;
  text-align:center;
  border-bottom:2px solid #0059b3;
  border-radius:4px;
  margin:20px 0 40px;
}

/* Avoid layout shift on hover: change color/underline, not font-size */
a:hover{ background-color:grey; text-decoration:underline; }

/* ========= Headings ========= */
h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
  color:#0059b3;
  margin:0 0 .25rem 0;
}
div > h2{
  margin-top:40px;
  border-bottom:1px solid #ccc;
  padding-bottom:5px;
  font-size:var(--fs-h);
}

/* ========= Layout: mobile-first single column ========= */
.wrap{ display:grid; grid-template-columns:1fr; gap:var(--gap); }

/* Optional sidebar/content areas if you’re using them */
.sidebar{ order:2; }
.content{ order:1; }

/* ========= Enhance at wider screens ========= */
@media (min-width: 900px){
  .wrap{ grid-template-columns: 1fr 2fr; align-items:start; }
  .sidebar{ order:1; position:sticky; top:1rem; }
  .content{ order:2; }
}

/* ========= Print styles ========= */
@media print{
  body{ color:#000; background:#fff; padding:0; max-width:none; }
  #doc_head{ border:none; background:#fff; text-align:left; padding:0 0 .25in 0; }
  a{ color:inherit; text-decoration:none; }
  /* Prevent page breaks chopping sections awkwardly */
  section{ break-inside:avoid; }
  @page{ margin:0.5in; }  /* tidy PDF margins */
}
.verify-btn {
  display: inline-block;
  padding: 4px 10px;
  margin-left: 8px;
  font-size: 0.9em;
  color: white;
  background-color: #0073e6;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.verify-btn:hover {
  background-color: #005bb5;
}
.category {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.5rem;
}
.post-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0;
}
body {
  background: linear-gradient(to bottom, #f9f9f9, #ffffff);
}
.post-card {
  background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.post-card h2 {
  margin-top: 0;
  /* color: #333; */
}

.post-card p {
  line-height: 1.6;
  color: #555;
}

.post-card figure {
  margin: 20px 0;
  text-align: center;
}

.post-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.post-card figcaption {
  font-size: 0.9em;
  color: #777;
  margin-top: 8px;
}