/* ===================================================================
   BUFFALO PAYROLL — INNER PAGE STYLES (service, sector, area, guide pages)
   Builds on tokens.css / base.css / style.css
   =================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-deep);
  color: #fff;
  padding-block: clamp(var(--space-16), 9vw, var(--space-24)) clamp(var(--space-12), 6vw, var(--space-20));
}
.page-hero .hero-media img { object-position: center 30%; }
.page-hero .hero-overlay {
  background: linear-gradient(100deg, rgba(10, 12, 34, 0.92) 0%, rgba(10, 12, 34, 0.78) 55%, rgba(10, 12, 34, 0.55) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-inner { max-width: 48rem; }
.page-hero .eyebrow { color: #f0b7ef; margin-top: var(--space-5); }
.page-hero .eyebrow::before { background: #f0b7ef; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1rem + 2.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: var(--space-3);
  text-wrap: balance;
}
.page-hero-sub {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}
.page-hero .hero-actions { margin-top: var(--space-8); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li + li::before { content: '/'; opacity: 0.5; }
.breadcrumbs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; }

/* ---------- Content layout ---------- */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-10), 5vw, var(--space-16));
}
@media (min-width: 960px) {
  .content-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

/* ---------- Prose ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-top: var(--space-12);
  line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  margin-top: var(--space-8);
}
.prose p, .prose li { color: var(--color-text-muted); line-height: 1.75; }
.prose strong { color: var(--color-text); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul li { list-style: disc; margin-top: var(--space-2); }
.prose ol li { list-style: decimal; margin-top: var(--space-2); }
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
}
[data-theme='dark'] .prose a { color: #a9b9ff; }
.prose a:hover { color: var(--color-accent); }
.prose .note {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-2);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose .note p { margin: 0; }
.prose .byline { font-size: var(--text-sm); color: var(--color-text-faint); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-top: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.prose th { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.prose td { color: var(--color-text-muted); }
.prose tr:last-child td { border-bottom: 0; }

/* ---------- Check list ---------- */
.check-list { list-style: none !important; padding-left: 0 !important; display: grid; gap: var(--space-3); }
.check-list li { list-style: none !important; display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 !important; }
.check-list li::before {
  content: '';
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* ---------- Sidebar ---------- */
.sidebar { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .sidebar { position: sticky; top: 6rem; } }
.side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.side-card h2, .side-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.side-card p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.side-card .btn { width: 100%; margin-top: var(--space-5); }
.side-card .side-phone { display: block; margin-top: var(--space-3); text-align: center; font-weight: 600; font-size: var(--text-sm); color: var(--color-text); text-decoration: none; }
.side-card--accent { background: linear-gradient(150deg, var(--color-primary-deep), #2a1450); color: #fff; border-color: transparent; }
.side-card--accent p { color: rgba(255, 255, 255, 0.78); }
.side-card--accent .side-phone { color: #fff; }
.side-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-3); }
.side-price small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; opacity: 0.75; }
.side-links { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.side-links a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.side-links a:hover { color: var(--color-primary); text-decoration: underline; }
[data-theme='dark'] .side-links a:hover { color: #a9b9ff; }

/* ---------- Link cards ---------- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.link-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.link-card .link-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.link-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.25; }
.link-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.link-card .link-more { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
[data-theme='dark'] .link-card .link-more { color: #a9b9ff; }

.section--tint { background: var(--color-surface-2); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }

/* ---------- Inner CTA band ---------- */
.cta-band {
  background: linear-gradient(130deg, var(--color-primary-deep), #2a1450 60%, #4a1856);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 860px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.15; }
.cta-band p { color: rgba(255, 255, 255, 0.8); margin-top: var(--space-3); max-width: 55ch; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }

/* Nav: current page */
.nav a[aria-current='page'] { color: var(--color-primary); }
[data-theme='dark'] .nav a[aria-current='page'] { color: #f0b7ef; }

/* Footer extra columns wrap nicely */
.footer-top--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)) !important; }
.footer-address { font-style: normal; color: inherit; opacity: 0.8; font-size: var(--text-sm); margin-top: var(--space-3); line-height: 1.6; }

/* Header: switch to the menu button below 1100px (longer nav on multi-page site) */
@media (max-width: 1100px) {
  .nav { position: fixed; inset: 64px 0 0 0; background: var(--color-bg); padding: var(--space-8) var(--space-6); transform: translateX(100%); transition: transform var(--transition-interactive); z-index: 99; }
  .nav.is-open { transform: translateX(0); }
  .nav ul { flex-direction: column; align-items: stretch; gap: var(--space-2); background: none; border: none; padding: 0; }
  .nav a { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
  .nav-toggle { display: flex; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .header-actions { padding-left: 0; border-left: none; }
}

/* ---------- Employer cost calculator ---------- */
.ecc { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); }
.ecc-form .form-field input, .ecc-form .form-field select { width: 100%; }
.ecc-checks { border: 0; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-3); }
.ecc-checks legend { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; margin-bottom: var(--space-3); }
.ecc-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); cursor: pointer; line-height: 1.45; }
.ecc-check input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: none; accent-color: var(--color-accent); }
.ecc-check--sub { margin-left: 1.85rem; color: var(--color-text-muted); }
.ecc-results { margin-top: var(--space-6); }
.ecc-total { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: linear-gradient(150deg, var(--color-primary-deep), #2a1450); color: #fff; }
.ecc-total-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.ecc-total-figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ecc-total-figure small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,0.75); }
.ecc-total-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.82); }
.prose .ecc-table td { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text); }
.prose .ecc-table th[scope="row"] { background: transparent; font-weight: 500; color: var(--color-text-muted); }
.prose .ecc-table tfoot th, .prose .ecc-table tfoot th[scope="row"], .prose .ecc-table tfoot td { font-weight: 700; color: var(--color-text); background: var(--color-surface-2); border-bottom: 0; }
.ecc-warn, .ecc-note { margin-top: var(--space-4); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.ecc-warn { border-left: 3px solid var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-text); }
.ecc-note { color: var(--color-text-muted); padding-left: 0; }
.ecc-cta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ecc-cta p { margin: 0; flex: 1 1 18rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.ecc-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .ecc { padding: var(--space-4); }
  .ecc-form .form-grid { grid-template-columns: 1fr; gap: 0; }
  .ecc-total { padding: var(--space-4); }
  .prose .ecc-table th, .prose .ecc-table td { padding: var(--space-2) var(--space-3); }
  .prose .ecc-table td { white-space: normal; }
}

/* Answer-first summary box (AI search / featured snippets) */
.prose .answer-box {
  border: 1px solid var(--color-border, rgba(255,255,255,.14));
  border-left: 4px solid var(--color-primary, #b87bd6);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--color-surface-2, rgba(255,255,255,.04));
  margin-bottom: var(--space-6, 1.5rem);
}
.prose .answer-box > * + * { margin-top: var(--space-2, .5rem); }
.prose .answer-box p { color: var(--color-text); margin: 0; }
.prose .answer-box p + p { margin-top: var(--space-2, .5rem); }
.prose .answer-box .answer-label {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-primary, #b87bd6);
}
.prose .answer-box .answer-updated { font-size: .85rem; color: var(--color-text-muted); }

/* ---------- Payroll News ---------- */
.prose ol.news-list, .prose .news-list { list-style: none; padding: 0; padding-inline-start: 0; margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.prose .news-list li { margin: 0; }
.prose .news-item a {
  display: grid; gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.prose .news-item a:hover { border-color: var(--color-primary); transform: translateY(-2px); color: var(--color-text); }
.prose .news-meta { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.prose .news-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; }
.prose .news-desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.prose .news-disclaimer { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text-faint); }
.prose .news-list > li::marker { content: none; }
.prose .news-list > li { padding-left: 0; }
.prose .news-list > li::before { content: none; display: none; }
.prose ol.news-list li { list-style: none; margin-top: 0; }