/* ==========================================================================
   Hunter Office Technology – Brand Layer
   Dark blue theme
   ========================================================================== */

:root {
  --color-primary: #003f72;
  --color-primary-dark: #002d54;
  --color-primary-light: #e6eef5;
  --color-secondary: #003f72;
  --color-accent: #eef2f7;
  --color-sale: #dd3629;
  --color-new: #33661c;

  --color-header-bg: #ffffff;
  --color-header-text: #003f72;
  --color-topbar-bg: #003f72;
  --color-topbar-text: #ffffff;
  --color-footer-bg: #003f72;
  --color-footer-text: #ffffff;
  --color-body-text: #393939;
}

/* Header adjustments – light header for tech site */
.site-header {
  border-bottom: 3px solid var(--color-primary);
}
.site-header .header-actions a {
  color: var(--color-secondary);
}
.site-header .header-search .btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* Primary nav bar */
.main-nav {
  background-color: var(--color-primary);
}

/* Hero – blue gradient */
.hero-carousel .carousel-item {
  background-color: #002d54;
}
.hero-carousel .carousel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,63,114,0.7), rgba(0,45,84,0.85));
}

/* Service cards – blue icon */
.service-card .service-icon {
  color: var(--color-primary);
}
.service-card {
  border-bottom: 3px solid transparent;
}
.service-card:hover {
  border-bottom-color: var(--color-primary);
}

/* Pricing table */
.pricing-table th {
  background-color: var(--color-primary);
}

/* FAQ accordion accent */
.faq-section .accordion-button:not(.collapsed) {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ===== HOT Section rhythm =====
   Match the standard design-system rhythm used in the static mockup:
   every full-width section uses --space-section (4rem) top & bottom. */
.hot-section {
  padding: var(--space-section) 0;
}

/* The rich-text intro on the homepage is just a paragraph, so it keeps
   the accent background but uses slightly tighter padding. */
.hot-section--intro {
  padding: 2.5rem 0;
  background: var(--color-accent);
}

/* Bootstrap's bg-light utility is nearly white and provides almost no contrast
   against adjacent white sections on HOT pages. Replace it with a stronger
   accent shade that actually reads as a different section. */
body .hot-section.bg-light,
body .content-section.bg-light {
  background-color: var(--color-accent) !important;
}

/* If two sections that both use the HOT accent background end up adjacent
   (e.g. service-area immediately followed by a bg-light local-services block),
   flip the second to white so the page has clear alternating stripes. */
.hot-service-area + .hot-section.bg-light,
.hot-section.bg-light + .hot-service-area,
.hot-section--intro + .hot-section.bg-light {
  background-color: #ffffff !important;
}

/* Blog/news block rendered after the FAQ on the homepage — both are
   `content-section` with a white background. Shade the second one. */
.content-section.faq-section + .content-section {
  background-color: var(--color-accent);
}

/* ===== Features / Delivery banner ===== */
.delivery-banner {
  background: linear-gradient(135deg, #002d54 0%, #003f72 100%);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.delivery-banner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1.5rem;
  color: #ffffff;
  border-right: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s ease;
}
.delivery-banner-item:last-child {
  border-right: none;
}
@media (max-width: 767.98px) {
  .delivery-banner-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 1.5rem 1rem;
  }
  .delivery-banner-item:last-child,
  .delivery-banner-item:nth-child(even) {
    border-right: none;
  }
}

.delivery-banner-item--linked {
  text-decoration: none;
}
.delivery-banner-item--linked:hover {
  color: #ffffff;
}
.delivery-banner-item--linked:hover .delivery-banner-icon-wrap {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.delivery-banner-item--linked:hover .delivery-banner-icon-wrap .bi {
  color: var(--color-primary, #003f72);
}

.delivery-banner-icon-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.delivery-banner-icon-wrap .bi {
  font-size: 2.25rem;
  color: #ffffff;
  transition: color 0.2s ease;
}

.delivery-banner-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.delivery-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0;
  line-height: 1.4;
}

/* ===== Service Area block ===== */
.hot-service-area {
  background: var(--color-accent, #f8f9fa);
}

.service-area-region {
  background: #ffffff;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 0.75rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.service-area-region:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.service-area-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light, #e6eef5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}
.service-area-icon-wrap .bi {
  font-size: 1.5rem;
  color: var(--color-primary, #003f72);
}

.service-area-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-body-text, #393939);
}

.service-area-detail {
  font-size: 0.85rem;
  color: var(--color-muted, #6c757d);
  margin-top: 0.25rem;
}

/* ===== Printer cards (HOT-specific) ===== */
.printer-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.printer-card:hover {
  box-shadow: var(--shadow-md);
}
.printer-card .printer-img {
  background: var(--color-accent);
  padding: 2rem;
  text-align: center;
}
.printer-card .printer-img img {
  max-height: 220px;
  object-fit: contain;
}
.printer-card .printer-body {
  padding: 1.5rem;
}
.printer-type-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.cost-box {
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cost-box .cost-label {
  font-size: 0.75rem;
  color: var(--color-muted);
}
.cost-box .cost-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Service tiles hover effect */
.card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

/* Rich text content on homepage */
.rich-text-content p:last-child {
  margin-bottom: 0;
}