*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{ font-family: Helvetica, Arial, sans-serif; line-height:1.5; color:#111; background:#f7f7f9; }
.container{ max-width:1100px; margin:0 auto; margin-top: 40px; padding:0 18px; }

.cards{ display:grid; gap:16px; grid-template-columns:1fr; margin:18px auto; }
.card{ background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.05); }
.card img{ display:block; width:100%; height:auto; }
.card h3{ margin:12px 14px 8px; }
.card h3{ color: rgba(0, 0, 0, 0.7); }
.card p{ margin:0 14px 14px; color:#444; }

.card a,
.card a:visited { text-decoration: none; }
/* .card a:hover,
.card a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; } */



@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); } }

.site-footer{ color:#666; font-size:.9rem; text-align:center; padding:28px 0; }

/* .site-footer {
  color: #666;
  font-size: .9rem;
  text-align: center;
  padding: 28px 0;
  background-color: #ffffff; /* or whatever your footer colour is */
}

.site-footer .footer-inner {
  display: inline-block;       /* so the white box hugs the text */
  background-color: #fff;      /* white background behind the text */
  padding: 0.4rem 0.8rem;      /* tweak to taste */
  border-radius: 4px;          /* optional: rounded corners */
} */


/* Q&A dropdown styling */
details > summary {
  color: rgba(0,0,0,0.8); /* 80% grey for question text */
}
details > summary::marker {
  color: var(--turq-1, #004f57); /* deep turquoise arrow */
}
/* Safari/WebKit marker */
details > summary::-webkit-details-marker {
  color: var(--turq-1, #004f57);
}