/*
Theme Name:   Hello Biz Child
Theme URI:    https://staging.teresaburleypcsvc.com/
Description:  Child theme for Hello Biz — Computer Upgrades & Custom PC Cases
Author:       Teresa Pegram's Computer Services
Author URI:   https://staging.teresaburleypcsvc.com/
Template:     hello-biz
Version:      1.0.0
Text Domain:  hello-biz-child
*/

/* ============ 1. DESIGN TOKENS ============ */
:root {
  --tbp-burgundy:      #980000;
  --tbp-burgundy-dark: #6e0000;
  --tbp-peach:         #FFB673;
  --tbp-gold:          #D4A017;
  --tbp-beige:         #F5F0E6;
  --tbp-beige-soft:    #EFE6D7;
  --tbp-ink:           #1a1a1a;
  --tbp-ink-muted:     #5a5a5a;
  --tbp-light:         #ffffff;
  --tbp-light-alt:     #f5f5f5;

  --tbp-font-head:  "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tbp-font-body:  "Roboto", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tbp-font-prose: "Open Sans", "Roboto", system-ui, sans-serif;

  --tbp-fs-h1: clamp(2.25rem, 2.5vw + 1rem,    3.5rem);
  --tbp-fs-h2: clamp(1.75rem, 1.8vw + 0.9rem,  2.75rem);
  --tbp-fs-h3: clamp(1.25rem, 1vw + 0.75rem,   1.75rem);
  --tbp-fs-h4: clamp(1.125rem,0.6vw + 0.8rem,  1.375rem);
  --tbp-fs-body: clamp(0.95rem, 0.5vw + 0.9rem, 1.125rem);
  --tbp-fs-small:   0.875rem;
  --tbp-fs-eyebrow: 0.8125rem;

  --tbp-lh-head:  1.18;
  --tbp-lh-body:  1.6;
  --tbp-lh-prose: 1.75;

  --tbp-radius: 8px;
  --tbp-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* ============ 2. BASE ============ */
html { font-size: 100%; }

body {
  font-family: var(--tbp-font-body);
  font-size: var(--tbp-fs-body);
  line-height: var(--tbp-lh-body);
  color: var(--tbp-ink);
  background-color: var(--tbp-beige);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern","liga";
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--tbp-font-head);
  color: var(--tbp-ink);
  line-height: var(--tbp-lh-head);
  margin: 0 0 .5em;
}
h1 { font-size: var(--tbp-fs-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--tbp-fs-h2); font-weight: 600; }
h3 { font-size: var(--tbp-fs-h3); font-weight: 600; }
h4 { font-size: var(--tbp-fs-h4); font-weight: 600; }

p { margin: 0 0 1em; font-family: var(--tbp-font-body); }
.long-p, .entry-content p, .prose p {
  font-family: var(--tbp-font-prose);
  line-height: var(--tbp-lh-prose);
}

a { color: var(--tbp-burgundy); text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--tbp-burgundy-dark); }
:focus-visible { outline: 2px solid var(--tbp-gold); outline-offset: 2px; }

img, svg { max-width: 100%; height: auto; }

/* ============ 3. COMPONENTS ============ */
.tbp-eyebrow, .tbp-badge {
  font-family: var(--tbp-font-head);
  font-weight: 600;
  font-size: var(--tbp-fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tbp-burgundy);
}

.tbp-card {
  background: var(--tbp-light);
  border: 1px solid var(--tbp-beige-soft);
  border-radius: var(--tbp-radius);
  box-shadow: var(--tbp-shadow);
  padding: 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tbp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.tbp-card__title { font-family: var(--tbp-font-head); font-size: var(--tbp-fs-h4); margin: 0 0 .35rem; }
.tbp-card__price { color: var(--tbp-burgundy); font-weight: 700; font-size: 1.125rem; }

.tbp-affiliate-badge {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tbp-light);
  background: var(--tbp-burgundy);
  padding: 3px 9px;
  border-radius: 999px;
}

.tbp-services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tbp-event {
  border-left: 4px solid var(--tbp-burgundy);
  padding: .75rem 1rem;
  background: var(--tbp-beige-soft);
  border-radius: 0 var(--tbp-radius) var(--tbp-radius) 0;
}

.tbp-btn {
  display: inline-block;
  font-family: var(--tbp-font-head);
  font-weight: 600;
  background: var(--tbp-burgundy);
  color: var(--tbp-light) !important;
  padding: .7rem 1.25rem;
  border-radius: var(--tbp-radius);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.tbp-btn:hover, .tbp-btn:focus-visible {
  background: var(--tbp-burgundy-dark);
  transform: translateY(-1px);
}
.tbp-btn--ghost {
  background: transparent;
  color: var(--tbp-burgundy) !important;
  border: 2px solid var(--tbp-burgundy);
}
.tbp-btn--ghost:hover { background: var(--tbp-burgundy); color: var(--tbp-light) !important; }

.tbp-accent-strip {
  background: linear-gradient(90deg, var(--tbp-burgundy) 0%, var(--tbp-gold) 60%, var(--tbp-peach) 100%);
  height: 4px;
  border-radius: 2px;
}