/**
 * EPC Employee Portal — Base Theme
 * Typography, resets, layout primitives
 */

/* ── Reset scoped to portal ── */
body.epc-portal-page .epc-portal__ *,
body.epc-portal-page .epc-portal__ *::before,
body.epc-portal-page .epc-portal__ *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Typography ── */
body.epc-portal-page .epc-portal__ {
  font-family: var(--font-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.epc-portal__display {
  font-size: var(--font-display-size);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
  line-height: 1.1;
  color: var(--text-primary);
}

.epc-portal__h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--font-h1-tracking);
  line-height: 1.2;
  color: var(--text-primary);
}

.epc-portal__h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  letter-spacing: var(--font-h2-tracking);
  line-height: 1.3;
  color: var(--text-primary);
}

.epc-portal__h3 {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: 1.4;
  color: var(--text-primary);
}

.epc-portal__body { font-size: var(--font-body-size); color: var(--text-secondary); }
.epc-portal__small { font-size: var(--font-small-size); color: var(--text-secondary); }
.epc-portal__caption {
  font-size: var(--font-caption-size);
  font-weight: var(--font-caption-weight);
  letter-spacing: var(--font-caption-tracking);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.epc-portal__mono {
  font-family: var(--font-mono);
  font-size: var(--font-small-size);
}

/* ── SR-only ── */
.epc-portal__sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ── Layout shell ── */
.epc-portal__shell {
  display: flex;
  min-height: 100vh;
  background: var(--surface-1);
}

.epc-portal__main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

.epc-portal__content {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-10);
}

/* ── Page title block ── */
.epc-portal__page-header {
  margin-bottom: var(--space-8);
}
.epc-portal__breadcrumb {
  font-size: var(--font-caption-size);
  font-weight: var(--font-caption-weight);
  letter-spacing: var(--font-caption-tracking);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.epc-portal__page-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.epc-portal__page-subtitle {
  font-size: var(--font-body-size);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Grid utilities ── */
.epc-portal__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.epc-portal__grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.epc-portal__grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .epc-portal__content { padding: var(--space-6) var(--space-4); }
  .epc-portal__grid-4 { grid-template-columns: repeat(2, 1fr); }
  .epc-portal__grid-3 { grid-template-columns: repeat(2, 1fr); }
  .epc-portal__display { font-size: 36px; }
}
@media (max-width: 768px) {
  .epc-portal__content { padding: var(--space-4); }
  .epc-portal__grid-2,
  .epc-portal__grid-3,
  .epc-portal__grid-4 { grid-template-columns: 1fr; }
  .epc-portal__display { font-size: 28px; }
}