/* ============================================
   TOOLSSIFY  -  Static Page Styles
   About, Contact, Privacy, Terms, etc.
   ============================================ */

.static-page {
  padding: var(--space-12) 0 var(--space-20);
}

.static-page-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.static-page-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.static-page-header p {
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto;
}

/* Decorative page artwork must remain secondary to the page title. The
   illustration SVGs do not define an intrinsic display size, so constrain the
   shared wrapper instead of relying on each individual SVG. */
.static-page-header--with-art {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.static-page-heading {
  min-width: 0;
}

.static-page-art {
  width: 144px;
  height: 108px;
  margin: var(--space-6) auto 0;
  overflow: hidden;
}

.static-page-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Prose content */
.prose {
  max-width: 768px;
  margin: 0 auto;
}

.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

.prose ul, .prose ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose li {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.prose a {
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--color-primary-700);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary-300);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--space-10) 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.prose th, .prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
}

.prose th {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--color-gray-50);
}

.prose td {
  color: var(--text-secondary);
}

/* Contact form */
.contact-form {
  display: grid;
  gap: var(--space-5);
  max-width: 680px;
  margin: var(--space-6) 0 var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--color-gray-25);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.contact-form .form-group {
  margin: 0;
}

.form-optional,
.form-help {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}

.form-help {
  margin: var(--space-2) 0 0 !important;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.contact-consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: 0 0 17px;
  accent-color: var(--color-primary-600);
}

.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.contact-form-status {
  margin: 0 !important;
  min-height: 1.5em;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.contact-form-status.is-success { color: var(--color-success-600, #19704c); }
.contact-form-status.is-error { color: var(--color-error-500); }

.contact-form button[disabled] {
  cursor: wait;
  opacity: 0.7;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-8);
}

.content-card,
.page-notice {
  padding: var(--space-6);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--color-gray-25);
}

.content-card h3,
.page-notice h2 {
  margin-top: 0;
}

.content-card p,
.page-notice p {
  margin-bottom: 0;
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-10);
}

.blog-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
}

.blog-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}

.blog-card-topic {
  color: var(--color-primary-700);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0;
  font-size: var(--text-xl);
}

.blog-card h3 a {
  color: var(--text-primary);
  text-decoration: none;
}

.blog-card h3 a:hover { color: var(--text-brand); }
.blog-card p { margin: 0; color: var(--text-secondary); }
.blog-card time { color: var(--text-tertiary); font-size: var(--text-xs); }

.article-page .static-page-header {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.article-summary {
  padding: var(--space-5);
  border-left: 4px solid var(--color-primary-500);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-primary-50);
}

.article-tool-cta {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--color-primary-50), #fff);
}

.article-tool-cta h2,
.article-tool-cta h3 { margin-top: 0; }

.article-tool-cta p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .content-card-grid { grid-template-columns: 1fr; }
  .blog-card-grid { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }

  .static-page-art {
    width: 108px;
    height: 81px;
    margin-top: var(--space-4);
  }
}

/* Category listing page */
.category-page {
  padding: var(--space-8) 0 var(--space-20);
}

.category-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.category-page-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.category-page-icon svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 768px) {
  .static-page-header h1 {
    font-size: var(--text-3xl);
  }
}
/* Server-rendered category links give visitors and search crawlers useful
   content before the interactive category controller replaces this block. */
.category-server-tools {
  margin-top: var(--space-8);
}

.category-server-tools h2 {
  margin-bottom: var(--space-5);
  font-size: var(--text-2xl);
}

.category-server-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
}

.category-server-tool-grid a {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.category-server-tool-grid a:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-sm);
}

.category-server-tool-grid span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}