/* ============================================================
   DOBIG Brand Design System — CSS Variables & Base Styles
   Spec: DOBIG Brand Guidelines v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Source+Sans+3:wght@400;600&family=JetBrains+Mono:wght@400&display=swap');

/* ── Override dark theme from dobig-theme.css ── */
body {
  background-color: #FFFFFF !important;
  color: #3D4F5F !important;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1A2332 !important;
}

p {
  color: #3D4F5F !important;
}

/* ── CSS Variables ── */
:root {
  /* Primary Brand */
  --brand-orange: #F08A00;
  --brand-gray: #9B9B9B;
  --copper: #C67A2E;
  --copper-light: #F5E6D0;

  /* Aquarius Blue */
  --blue: #2B5EA7;
  --blue-dark: #1E4478;
  --blue-light: #E8F0FA;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-snow: #F7F8FA;
  --bg-cloud: #EEF1F5;

  /* Text */
  --text-heading: #1A2332;
  --text-body: #3D4F5F;
  --text-secondary: #6B7D8D;
  --text-muted: #94A3B3;

  /* States */
  --success: #2D8A4E;
  --warning: #D4960A;
  --error: #C0392B;
  --info: #5BA4D9;

  /* Borders */
  --border: #C0C8D4;
  --border-light: rgba(26, 35, 50, 0.1);

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(26, 35, 50, 0.06);
  --shadow-hover: 0 4px 16px rgba(43, 94, 167, 0.12);
  --shadow-btn: 0 2px 8px rgba(240, 138, 0, 0.25);

  /* Spacing */
  --max-width: 1200px;
  --section-pad-v: 80px;
  --section-pad-h: 48px;
  --card-gap: 24px;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Radius */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-white);
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Blue Accent Strip (top of viewport) ── */
.brand-accent-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--brand-orange) 100%);
  z-index: 9999;
}

/* ── Typography ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: 1.2;
}

h1 {
  font-size: 42px;
  font-weight: 700;
}

h2 {
  font-size: 32px;
  font-weight: 600;
}

h3 {
  font-size: 24px;
  font-weight: 600;
}

h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.4;
}

p {
  max-width: 720px;
  margin-bottom: 24px;
  color: var(--text-body);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand-orange);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: var(--bg-cloud);
  padding: 1rem;
  border-radius: var(--radius-card);
  overflow-x: auto;
}

small,
.caption {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Orange accent line under H2 ── */
.section-heading-line {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--brand-orange);
  margin: 12px 0 0;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.in-view .section-heading-line {
  width: 100px;
}

/* ── Layout containers ── */
.db-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-pad-h);
}

@media (max-width: 767px) {
  .db-container {
    padding: 0 20px;
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }
}

.db-section {
  padding: var(--section-pad-v) 0;
}

.db-section--white {
  background: var(--bg-white);
}

.db-section--snow {
  background: var(--bg-snow);
}

.db-section--blue {
  background: var(--blue);
}

.db-section--blue-dark {
  background: var(--blue-dark);
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-orange);
  color: #fff;
  border: 2px solid var(--brand-orange);
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-btn);
  line-height: 1;
}

.btn-primary:hover {
  background: var(--copper);
  border-color: var(--copper);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.btn-primary:active {
  background: #A56820;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--brand-gray);
  border-color: var(--brand-gray);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}

.btn-secondary:hover {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}

.btn-secondary:active {
  background: var(--blue-dark);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}

.btn-ghost:hover {
  background: #fff;
  color: var(--blue);
  text-decoration: none;
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  border: 2px solid #25D366;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
}

.btn-wa:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

/* ── Cards ── */
.db-card {
  background: var(--bg-cloud);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s, border-left 0.3s, transform 0.3s;
  border-left: 4px solid transparent;
}

.db-card:hover {
  box-shadow: var(--shadow-hover);
  border-left-color: var(--brand-orange);
  transform: translateY(-3px);
}

.db-card--featured {
  background: var(--copper-light);
  border-left: 4px solid var(--copper);
}

.db-card-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-orange);
  font-size: 22px;
  margin-bottom: 16px;
}

.db-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.db-card p {
  font-size: 16px;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ── Badge/pill ── */
.db-badge {
  display: inline-block;
  background: var(--blue-light);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.db-badge--orange {
  background: rgba(240, 138, 0, 0.1);
  color: var(--brand-orange);
}

.db-badge--copper {
  background: var(--copper-light);
  color: var(--copper);
}

/* ── Form elements ── */
.db-input,
.db-textarea,
.db-select {
  width: 100%;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.db-input::placeholder,
.db-textarea::placeholder {
  color: var(--text-muted);
}

.db-input:focus,
.db-textarea:focus,
.db-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.15);
}

.db-input.error {
  border-color: var(--error);
}

.db-error-msg {
  color: var(--error);
  font-size: 14px;
  margin-top: 4px;
}

.db-textarea {
  resize: vertical;
  min-height: 120px;
}

.db-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
  display: block;
}

/* ── Section header utility ── */
.db-section-header {
  margin-bottom: 48px;
}

.db-section-header h2 {
  margin-bottom: 4px;
}

.db-section-header p {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 600px;
  margin-top: 16px;
  margin-bottom: 0;
}

.db-section-header.center {
  text-align: center;
}

.db-section-header.center p {
  margin-left: auto;
  margin-right: auto;
}

.db-section-header.center .section-heading-line {
  margin: 12px auto 0;
}

/* ── Grid helpers ── */
.db-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

.db-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--card-gap);
}

@media (max-width: 1023px) {
  .db-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {

  .db-grid-3,
  .db-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-orange);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
  font-family: var(--font-heading);
  font-weight: 600;
}

.skip-link:focus {
  top: 4px;
}

/* ── Scroll-in animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.in-view {
  opacity: 1;
  transform: none;
}

/* ── Responsive type ── */
@media (max-width: 767px) {
  :root {
    --section-pad-v: 48px;
  }
}

/* ══════════════════════════════════════════
   OVERRIDE OLD DARK COMPONENT CSS
   These rules neutralise the legacy dark-theme
   component stylesheets injected by Drupal's
   asset pipeline (hero.css, services.css, etc.)
   ══════════════════════════════════════════ */

/* Legacy section backgrounds → light */
.dobig-hero,
.dobig-hero-full,
.dobig-hero-section,
.dobig-section,
.dobig-services,
.dobig-partners,
.dobig-ai-features,
.dobig-stats {
  background: var(--bg-white) !important;
  color: var(--text-body) !important;
}

/* Legacy card backgrounds → cloud */
.dobig-service-card,
.dobig-ai-card,
.dobig-partner-card,
.dobig-stat-card,
.service-card,
.feature-card {
  background: var(--bg-cloud) !important;
  border-color: var(--border-light) !important;
  color: var(--text-body) !important;
}

/* Legacy nav/header → brand blue */
.dobig-header-old,
.dobig-nav-old {
  background: var(--blue) !important;
}

/* Legacy footer → brand blue-dark */
.dobig-footer {
  background: var(--blue-dark) !important;
}

/* Legacy heading colours on dark */
.dobig-hero h1,
.dobig-hero h2,
.dobig-hero-headline,
.dobig-section h2,
.dobig-service-card h3,
.section-heading,
.card-title {
  color: var(--text-heading) !important;
  font-family: var(--font-heading) !important;
}

/* Legacy body text */
.dobig-hero p,
.dobig-section p,
.dobig-service-card p,
.dobig-hero-subheadline,
.dobig-hero-subtitle {
  color: var(--text-body) !important;
  font-family: var(--font-body) !important;
}

/* Tailwind dark utility overrides */
.bg-gray-900,
.bg-gray-800,
.bg-black {
  background-color: var(--bg-white) !important;
}

.text-white {
  color: var(--text-heading) !important;
}

.text-gray-400 {
  color: var(--text-secondary) !important;
}

/* Page hero section — branded dark-blue background image */
.page-hero {
  background:
    url('/themes/custom/dobig_theme/images/hero-bg.svg') center center / cover no-repeat !important;
  color: #fff !important;
}

.page-hero h1,
.page-hero .hero-inner h1,
.page-hero h1 span {
  color: #fff !important;
}

.page-hero h1 span.orange,
.page-hero .hero-inner h1 span {
  color: var(--brand-orange) !important;
}

.page-hero .sub,
.page-hero .hero-inner .sub,
.page-hero p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.page-hero .badge {
  background: rgba(240, 138, 0, 0.2) !important;
  color: var(--brand-orange) !important;
}

/* Section alternating */
.section-alt {
  background: var(--bg-snow) !important;
}

/* Blog/card dark backgrounds */
.blog-card,
.featured-article,
.service-card,
.card-img .bg-infra,
.card-img .bg-cloud,
.card-img .bg-software,
.card-img .bg-trends,
.card-img .bg-howto {
  background: var(--bg-cloud) !important;
  border-color: var(--border-light) !important;
}

.blog-card h3,
.featured-body h2 {
  color: var(--text-heading) !important;
}

.blog-card p,
.featured-body p {
  color: var(--text-secondary) !important;
}

.meta-item,
.card-footer .meta {
  color: var(--text-muted) !important;
}

/* Contact / form dark panels */
.contact-card,
.info-card,
.wa-card {
  background: var(--bg-cloud) !important;
  color: var(--text-body) !important;
}

/* CTA bands that were dark — keep orange band as-is */
.cta-band {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--copper) 100%) !important;
}

.cta-band h2,
.cta-band p {
  color: #fff !important;
}

/* Newsletter band */
.newsletter-band {
  background: var(--bg-snow) !important;
  border-color: var(--border-light) !important;
}

.newsletter-inner h2 {
  color: var(--text-heading) !important;
}

.newsletter-inner p {
  color: var(--text-secondary) !important;
}

.subscribe-form input {
  background: var(--bg-white) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}

/* Filter bar buttons */
.filter-btn {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--brand-orange) !important;
  color: var(--brand-orange) !important;
}

.filter-btn.active {
  background: var(--brand-orange) !important;
  color: #fff !important;
}

/* Category pill colours on light bg */
.cat-infra {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}

.cat-cloud {
  background: rgba(91, 164, 217, 0.15) !important;
  color: #3a7fbf !important;
}

.cat-software {
  background: rgba(45, 138, 78, 0.12) !important;
  color: #2D8A4E !important;
}

.cat-trends {
  background: rgba(240, 138, 0, 0.12) !important;
  color: var(--brand-orange) !important;
}

.cat-howto {
  background: rgba(212, 150, 10, 0.12) !important;
  color: var(--warning) !important;
}

/* Coming-soon notice, delivery toggle */
.delivery-toggle .toggle-btn {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.toggle-btn.active {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}

/* Quick links (contact page) */
.quick-link-card {
  background: var(--bg-cloud) !important;
  border-color: var(--border-light) !important;
}

.quick-link-card h3 {
  color: var(--text-heading) !important;
}

.quick-link-card p {
  color: var(--text-secondary) !important;
}

/* About page stats */
.stat-block {
  color: var(--text-heading) !important;
}

.stat-block .stat-num {
  color: var(--brand-orange) !important;
}

/* Why-strip on services hub */
.why-strip {
  background: var(--blue-light) !important;
  border-color: rgba(43, 94, 167, 0.2) !important;
}

.why-item h4 {
  color: var(--text-heading) !important;
}

.why-item p {
  color: var(--text-secondary) !important;
}

/* Dark text that came through as white via bulk replace */
[style*="color: var(--text-heading)"] {
  color: var(--text-heading) !important;
}