/* ═══════════════════════════════════════════════════════════════════════
   Yotta Information Systems — style.css
   Design system tokens (CSS custom properties) and custom components.
   Bootstrap 5 base CSS is in assets/css/bootstrap.min.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Design System Tokens (UX-DR2, UX-DR15) ────────────────────────── */
:root {
  /* Bootstrap CSS custom property overrides */
  --bs-primary:          #d6452d;
  --bs-primary-rgb:      214, 69, 45;   /* needed for rgba() utilities in Bootstrap */
  --bs-body-color:       #1f2933;
  --bs-secondary-color:  #4b5563;
  --bs-light:            #f8f9fb;
  --bs-body-bg:          #ffffff;
  --bs-border-color:     #e5e7eb;

  /* Custom brand tokens */
  --warm:          #fdf6f4;
  --muted:         #4b5563;  /* WCAG AA: 7.2:1+ on all bg colours — NOT #6b7280 */
  --border:        #e5e7eb;
  --dark:          #1f2933;
  --color-success: #16a34a;
  --color-error:   #dc2626;

  /* Spacing scale (UX-DR15) */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  100px;
}

/* ─── Typography (UX-DR1) ───────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}

h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.1rem; }

/* ─── Button Hierarchy (UX-DR17, NFR18) ─────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                  #d6452d;
  --bs-btn-border-color:        #d6452d;
  --bs-btn-color:               #ffffff;
  --bs-btn-hover-bg:            #c03d27;
  --bs-btn-hover-border-color:  #c03d27;
  --bs-btn-hover-color:         #ffffff;
  --bs-btn-active-bg:           #b03622;
  --bs-btn-active-border-color: #b03622;
  --bs-btn-focus-shadow-rgb:    214, 69, 45;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(214,69,45,0.25);
}

.btn-outline-primary {
  --bs-btn-color:        #d6452d;
  --bs-btn-border-color: #d6452d;
  --bs-btn-hover-bg:     #d6452d;
  --bs-btn-hover-color:  #ffffff;
  --bs-btn-active-bg:    #c03d27;
  border-width: 2px;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
}

.btn-link {
  color: var(--bs-primary);
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Card CTA arrow animation (UX-DR18) */
.card-cta .bi-arrow-right-short {
  display: inline-block;
  transition: transform 0.15s ease;
}

.card-cta:hover .bi-arrow-right-short {
  transform: translateX(3px);
}

/* ─── Skip Link (WCAG 2.1 AA — UX-DR19) ─────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 8px 16px;
  background: var(--bs-primary);
  color: #ffffff;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ─── POPIA Consent Banner (UX-DR7, FR23, FR24, FR26) ───────────────── */
.popia-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #ffffff;
  border-top: 1px solid var(--border);
  padding: 16px 24px;
}

.popia-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}

.popia-banner__text {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  flex: 1 1 auto;
}

.popia-banner__link {
  color: var(--bs-primary);
}

.popia-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile: stack vertically */
@media (max-width: 575.98px) {
  .popia-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .popia-banner__actions {
    width: 100%;
  }
  .popia-banner__actions .btn {
    flex: 1;
    text-align: center;
  }
}

/* ─── Navbar (UX-DR11, UX-DR19) ─────────────────────────────────────── */
.navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Active nav link — brand red colour on active page */
.navbar .nav-link.active {
  color: var(--bs-primary) !important;
  font-weight: 600;
}

/* 44×44px minimum tap targets for mobile nav links (WCAG 2.1 AA, UX-DR19) */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ─── Hero Band (UX-DR12, UX-DR4, UX-DR5) ──────────────────────────────── */
.hero-band {
  background: var(--warm);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}

@media (min-width: 992px) {
  .hero-band {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }
}

/* ─── Stats Credibility Box (UX-DR5) ────────────────────────────────────── */
.stats-box {
  background: var(--bs-light);
  border-radius: 16px;
  padding: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark);
}

.stat-descriptor {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ─── Trust Pills Row (UX-DR4) ──────────────────────────────────────────── */
.trust-pills-section {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
  background: var(--bs-body-bg);
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bs-body-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.875rem;
  color: var(--dark);
  white-space: nowrap;
}

/* ─── Service Cards Grid (UX-DR21, UX-DR13) ─────────────────────────────── */
.service-cards-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.service-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: box-shadow 0.15s ease;
}

.service-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.badge-most-enquired {
  display: inline-block;
  background: rgba(214, 69, 45, 0.1);
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ─── Site Footer (UX-DR20) ──────────────────────────────────────────────── */
.site-footer {
  background: var(--bs-light);
  border-top: 1px solid var(--border);
  padding: var(--space-md) 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* ─── Service Pages (UX-DR3, UX-DR12) ──────────────────────────────────── */

/* Service tag pill — identifies the service type in the hero band */
/* Same visual style as .badge-most-enquired but semantically distinct */
.service-tag-pill {
  display: inline-block;
  background: rgba(214, 69, 45, 0.1);
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* CTA band — placeholder section at bottom of service pages (Epic 3 only) */
/* Replaced by the Enquiry Form Card in Epic 4 */
.service-cta-band {
  background: var(--warm);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* ─── Enquiry Form Card (UX-DR6, Epic 4) ───────────────────────────────── */
/* Primary conversion component — wraps the enquiry form with card styling.  */
/* Used by accounting.php (4.3), software.php (4.4), contact.php (4.5).      */
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Form success state — replaces .form-card via JS replaceWith() after submission (UX-DR8) */
/* Must visually match .form-card so the swap is seamless; Bootstrap p-4/text-center applied in JS */
.form-success {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ─── Print Styles (UX-DR16, NFR25) ─────────────────────────────────── */
@media print {
  .navbar,
  footer,
  .popia-banner,
  button[type="submit"] { display: none !important; }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  body {
    color: #000;
    background: #fff;
  }
}

/* ─── Prose Content Pages (UX-DR12 — About, Privacy, Contact layout) ── */
/* Single-column, max-width 720px, centred. Reused by about.php,          */
/* privacy.php (story 4-1), and contact.php (story 4-5).                  */
.page-prose {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Error Pages (UX-DR14 — 404, 500 layout) ────────────────────────── */
/* Single centred card, max-width 560px, margin-top 80px (both error pages) */
.error-page-card {
  max-width: 560px;
  margin: 80px auto 0;
}