/* =============================================================
 * Utilities Bunker — AWG Current Capacity (Ampacity) (v2.1)
 * File: /assets/css/modules/resources/electronics/awg-current-capacity.v2.1.css
 * Purpose:
 *  - Resource page styling aligned with UB v2.1
 *  - Keeps v1 readability feel, but inside UB-CERT layout
 *  - Mobile-first, clean tables, strong hierarchy
 *  - Does NOT modify ub-toolkit.v2.1.css
 * ============================================================= */

/* ==============================
   Local page tokens
============================== */
:root{
  --awg-gap: 14px;
  --awg-radius: 16px;
}

/* ==============================
   Header polish
============================== */
.ub-card-subtitle{
  max-width: 75ch;
}

/* ==============================
   Soft info blocks
============================== */
.ub-soft{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--awg-radius);
  padding: 12px;
  font-size: var(--ub-fs-1);
  line-height: 1.45;
}

/* ==============================
   Chip row (quick picks)
============================== */
.ub-chipline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ub-chipline .ub-chip{
  font-weight: 900;
  font-size: var(--ub-fs-1);
}

/* ==============================
   Tables (resource style)
============================== */
.ub-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ub-fs-1);
  background: var(--ub-surface-1);
}

.ub-table th,
.ub-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--ub-border);
  text-align: left;
  vertical-align: middle;
}

.ub-table th{
  background: var(--ub-surface-2);
  font-weight: 950;
  font-size: var(--ub-fs-1);
  letter-spacing: .01em;
}

.ub-table tr:last-child td{
  border-bottom: none;
}

/* Zebra striping for readability */
.ub-table tbody tr:nth-child(even){
  background: rgba(0,0,0,0.015);
}

html.ub-theme-dark .ub-table tbody tr:nth-child(even){
  background: rgba(255,255,255,0.03);
}

/* Horizontal scroll wrapper (already applied inline in PHP) */
.ub-card > div[style*="overflow:auto"]{
  border-radius: var(--awg-radius);
}

/* ==============================
   Section headings
============================== */
.ub-card h3{
  font-size: var(--ub-fs-2);
  font-weight: 900;
}

/* ==============================
   Inline notes
============================== */
.ub-inline-note{
  font-size: var(--ub-fs-0);
  color: var(--ub-muted);
  line-height: 1.45;
}

/* ==============================
   Copy / Share message box
============================== */
#shareMsg{
  margin-top: 12px;
}

/* ==============================
   FAQ spacing refinement
============================== */
.ub-card[aria-label="FAQ"] h3{
  margin-top: 14px;
}

/* ==============================
   Rail polish
============================== */
.ub-rail .ub-card{
  padding: 14px;
}

/* ==============================
   Responsive tweaks
============================== */
@media (max-width: 768px){
  .ub-table th,
  .ub-table td{
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media (max-width: 480px){
  .ub-chipline{
    gap: 8px;
  }

  .ub-chipline .ub-chip{
    font-size: 12px;
    padding: 8px 12px;
  }
}