/*
 * Components CSS — footer, forms, compatibility/capture page components,
 * article layout, pagination, and utility classes.
 */

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.st-footer { background: var(--st-gray-800); color: rgba(255,255,255,0.85); }

.st-footer__enquiry {
  background: var(--st-blue-900);
  padding-block: var(--st-space-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.st-footer__enquiry-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-5);
  flex-wrap: wrap;
}
.st-footer__enquiry-heading {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--st-white);
  margin-bottom: 4px;
}
.st-footer__enquiry-sub { font-size: 0.875rem; color: var(--st-blue-300); }

.st-footer__main { padding-block: var(--st-space-8); }
.st-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--st-space-7);
  align-items: start;
}
@media (max-width: 1100px) {
  .st-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .st-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .st-footer__grid { grid-template-columns: 1fr; }
}

.st-footer__logo img { margin-bottom: var(--st-space-3); }
.st-footer__tagline {
  font-family: var(--st-font-tagline);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: var(--st-blue-300);
  text-transform: uppercase;
  margin-bottom: var(--st-space-3);
}
.st-footer__positioning { font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: var(--st-space-4); }
.st-footer__email { font-size: 0.875rem; color: var(--st-blue-300); }
.st-footer__email:hover { color: var(--st-white); }

.st-footer__col-heading {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--st-space-4);
}
.st-footer__links { display: flex; flex-direction: column; gap: var(--st-space-2); }
.st-footer__links a {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--st-transition);
}
.st-footer__links a:hover { color: var(--st-white); text-decoration: none; }

/* Four-entity group strip */
.st-footer__group-strip {
  background: var(--st-blue-900);
  padding-block: var(--st-space-5);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.st-footer__group-inner {
  display: flex;
  align-items: center;
  gap: var(--st-space-6);
  flex-wrap: wrap;
}
.st-footer__group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-blue-300);
}
.st-footer__group-brands {
  display: flex;
  gap: var(--st-space-4);
  flex-wrap: wrap;
}
.st-footer__brand {
  display: flex;
  flex-direction: column;
  padding: var(--st-space-3) var(--st-space-4);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--st-white);
  text-decoration: none;
  transition: background var(--st-transition);
}
.st-footer__brand:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.st-footer__brand--sorbitech { background: rgba(74,134,232,0.2); border-color: var(--st-blue-500); }
.st-footer__brand strong { font-size: 0.9375rem; font-weight: 600; }
.st-footer__brand span  { font-size: 0.75rem; color: var(--st-blue-300); }

/* Legal strip */
.st-footer__legal {
  background: rgba(0,0,0,0.2);
  padding-block: var(--st-space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.st-footer__legal .st-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--st-space-3); }
.st-footer__copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.45); }
.st-footer__legal-links { display: flex; gap: var(--st-space-4); }
.st-footer__legal-links a { font-size: 0.8125rem; color: rgba(255,255,255,0.45); text-decoration: none; }
.st-footer__legal-links a:hover { color: rgba(255,255,255,0.75); }

/* ── Contact form ────────────────────────────────────────────────────────────── */
.st-form { max-width: 640px; }
.st-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--st-space-4);
}
@media (max-width: 560px) { .st-form__row--2col { grid-template-columns: 1fr; } }

.st-form__field { margin-bottom: var(--st-space-4); }
.st-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--st-gray-800);
  margin-bottom: var(--st-space-2);
}
.st-form__label span[aria-hidden] { color: var(--st-error); margin-left: 2px; }
.st-form__input,
.st-form__textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--st-font-sans);
  font-size: 1rem;
  color: var(--st-gray-800);
  background: var(--st-white);
  border: 2px solid var(--st-gray-300);
  border-radius: 0;
  transition: border-color var(--st-transition);
  outline: none;
}
.st-form__input:focus,
.st-form__textarea:focus { border-color: var(--st-blue-500); }
.st-form__textarea { min-height: 140px; resize: vertical; }
.st-form__honeypot { position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-form__submit { margin-top: var(--st-space-4); }
.st-form__status {
  margin-top: var(--st-space-4);
  padding: var(--st-space-3) var(--st-space-4);
  font-size: 0.9375rem;
  border-left: 4px solid;
}
.st-form__status--success { border-color: #2E7D32; background: #F1F8F1; color: #1B5E20; }
.st-form__status--error   { border-color: var(--st-error); background: #FFF5F5; color: var(--st-error); }

/* ── Article layout ──────────────────────────────────────────────────────────── */
.st-article__header { background: var(--st-off-white); border-bottom: 3px solid var(--st-blue-500); padding-block: var(--st-space-7); }
.st-article__title  { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.st-article__meta   { font-size: 0.875rem; color: var(--st-gray-600); margin-top: var(--st-space-3); }
.st-article__hero   { padding-block: var(--st-space-5) 0; }
.st-article__hero img { width: 100%; max-height: 420px; object-fit: cover; }
.st-article__body   { padding-block: var(--st-space-7); }

/* ── Capture / funnel page ───────────────────────────────────────────────────── */
.st-main--funnel .st-section--compat { padding-block: var(--st-space-7); }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.st-pagination,
.st-posts-navigation,
.nav-links {
  display: flex;
  justify-content: center;
  gap: var(--st-space-2);
  margin-top: var(--st-space-7);
  flex-wrap: wrap;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--st-gray-300);
  font-size: 0.9375rem;
  color: var(--st-gray-800);
  text-decoration: none;
  transition: background var(--st-transition), border-color var(--st-transition);
}
.page-numbers:hover     { background: var(--st-blue-50); border-color: var(--st-blue-500); }
.page-numbers.current   { background: var(--st-blue-500); border-color: var(--st-blue-500); color: var(--st-white); font-weight: 600; }

/* ── WP admin meta table styling ─────────────────────────────────────────────── */
.sbc-meta-table th { vertical-align: top; padding-top: 12px !important; }

/* ── Responsive footer ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .st-footer__enquiry-inner { flex-direction: column; align-items: flex-start; }
  .st-footer__group-inner   { flex-direction: column; align-items: flex-start; }
  .st-footer__group-brands  { flex-direction: column; }
  .st-footer__legal .st-container { flex-direction: column; }
}