/* relayspec-schema.css — RSX-scoped styles for NEW product descriptions only */

/* Layout: Product Information + Resources side-by-side */
.rsx-info-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.rsx-info { flex: 2; min-width: 280px; }
.rsx-resources { flex: 1; min-width: 220px; padding: 0; }

/* Section titles (blue bar) */
.rsx-section-title {
  background-color: #367698;
  color: #fff;
  font-size: 1.25rem; /* ~20px */
  font-weight: 700;
  padding: 4px 8px;
  margin: 0;
  line-height: 1.3;
}

/* Tables */
.rsx-table { width: 100%; border-collapse: collapse; }
.rsx-table th, .rsx-table td {
  border: 1px solid #999;          /* medium gray border */
  padding: 10px;                   /* comfy body row padding */
  vertical-align: top;
  text-align: left;
}
/* Compact header row (e.g., Specifications) */
.rsx-table thead th {
  background: #cccccc;
  padding: 6px 8px;                /* slightly less than body rows */
  line-height: 1.2;
  text-align: left;
}
/* Zebra striping: odd rows light blue */
.rsx-table tbody tr:nth-child(odd) { background: #edf5ff; }

/* Resources table: same layout, but always white (no striping) */
.rsx-table-resources tr,
.rsx-table-resources tbody tr:nth-child(odd) { background: #fff !important; }

/* Links in tables */
.rsx-table a { color: #367698; text-decoration: none; }
.rsx-table a:hover { color: red; font-weight: 700; text-decoration: none; }

/* Mobile tweaks */
@media (max-width: 768px){
  .rsx-table { font-size: 14px; }
  .rsx-table th, .rsx-table td { padding: 8px; }
}

/* ------------------------------------------------------------------ */
/* OPT-IN VARIANTS (use alongside base classes; safe for existing UI) */
/* ------------------------------------------------------------------ */

/* Top-aligned two-column block (add class="rsx-info-resources rsx-align-top") */
.rsx-info-resources.rsx-align-top { align-items: flex-start; }
.rsx-info-resources.rsx-align-top .rsx-info h1 { margin-top: 0; }
.rsx-info-resources.rsx-align-top .rsx-resources { align-self: flex-start; }

/* Compact key/value table for right column meta panel */
.rsx-table-kv { font-size: 14px; }
.rsx-table-kv th, .rsx-table-kv td { padding: 8px 10px; }
.rsx-table-kv tbody tr:nth-child(odd) { background: #fff !important; }

@media (max-width: 768px){
  .rsx-table-kv { font-size: 13px; }
}

/* Opt-in zebra just for the right meta table (add rsx-zebra class) */
.rsx-table-kv.rsx-zebra tbody tr:nth-child(odd) {
  background: #edf5ff !important; /* overrides .rsx-table-resources white */
}

/* Space below the right-column meta table block */
.rsx-resources.rsx-meta {
  margin-bottom: 16px;   /* tweak to 20px if you prefer */
}
@media (max-width: 768px){
  .rsx-resources.rsx-meta { margin-bottom: 12px; }
}