/* Elektro Zobl Custom Styles - Based on original design */

:root {
  --elektro-orange: #ec7b10;
  --elektro-dark-blue: #1a3446;
  --elektro-light-gray: #f8f9fa;
  --elektro-medium-gray: #6c757d;
  --elektro-white: #ffffff;
}

/* Force Inter font across all elements */
body,
html,
* {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Typography - Inter font family matching original design guidelines */
body,
button,
input,
select,
textarea,
.btn,
p,
div,
span,
li,
a,
.lead {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6em;
}

/* Heading Scale - matching original site */
h1,
.h1 {
  font-size: 2.5rem; /* 40px */
  font-weight: 400;
  color: var(--elektro-dark-blue);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

h2,
.h2 {
  font-size: 2rem; /* 32px */
  font-weight: 300;
  color: var(--elektro-dark-blue);
  line-height: 1.2;
  margin-bottom: 1.25rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

h3,
.h3 {
  font-size: 1.7142rem; /* 24px */
  font-weight: 500;
  color: var(--elektro-dark-blue);
  line-height: 1.3;
  margin-bottom: 1rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

h4,
.h4 {
  font-size: 1.7857rem; /* 25px */
  font-weight: 400;
  color: var(--elektro-dark-blue);
  line-height: 1.3;
  margin-bottom: 1rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

h5,
.h5 {
  font-size: 1.5714rem; /* 22px */
  font-weight: 400;
  color: var(--elektro-dark-blue);
  line-height: 1.3;
  margin-bottom: 0.875rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

h6,
.h6 {
  font-size: 1.2857rem; /* 18px */
  font-weight: 400;
  color: var(--elektro-dark-blue);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Lead text styling */
.lead {
  font-size: 1.125rem; /* 16px */
  font-weight: 300;
  line-height: 1.6;
  color: var(--elektro-medium-gray);
}

/* Override Bootstrap primary color with Elektro Zobl orange - using proper specificity */
:root {
  --bs-primary: #ec7b10;
  --bs-primary-rgb: 236, 123, 16;
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.btn-primary {
  background-color: var(--elektro-orange);
  border-color: var(--elektro-orange);
  color: var(--elektro-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #d96a0e;
  border-color: #d96a0e;
  color: var(--elektro-white);
}

.btn-outline-primary {
  color: var(--elektro-orange);
  border-color: var(--elektro-orange);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--elektro-orange);
  border-color: var(--elektro-orange);
  color: var(--elektro-white);
}

.text-primary {
  color: var(--elektro-orange);
}

.bg-primary {
  background-color: var(--elektro-orange);
}

/* Navigation styling */
.navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.navbar-nav .nav-link {
  font-size: 16px;
  font-weight: 300;
  color: var(--elektro-dark-blue);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

a.navbar-brand {
  color: var(--elektro-dark-blue);
  font-weight: 500;
  font-size: 18px;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

a.navbar-brand:hover {
  color: var(--elektro-orange);
}

a.nav-link:hover {
  color: var(--elektro-orange);
}

/* Active/current page navbar styling */
a.nav-link.active,
a.nav-link[aria-current="page"] {
  color: var(--elektro-orange) !important;
}

a.nav-link.active:hover,
a.nav-link[aria-current="page"]:hover {
  color: var(--elektro-orange);
}

/* Contact section with light gray background */
.contact-section {
  background-color: var(--elektro-light-gray);
  padding: 3rem 0;
}

.contact-info {
  background-color: var(--elektro-light-gray);
  padding: 2rem;
  border-radius: 8px;
}

/* Career/Jobs page styling */
.career-btn,
.jobs-btn {
  background-color: var(--elektro-orange);
  border-color: var(--elektro-orange);
  color: var(--elektro-white);
}

.career-btn:hover,
.jobs-btn:hover {
  background-color: #d96a0e;
  border-color: #d96a0e;
  color: var(--elektro-white);
}

.job-tile {
  background-color: var(--elektro-light-gray);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
}

/* References grid - simple, no categories */
.references-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.reference-item {
  background-color: var(--elektro-white);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.reference-item:hover {
  transform: translateY(-3px);
}

/* Icon sizing */
.fa-3x {
  font-size: 3rem;
}

/* Icons should be orange, not blue */
.fa-bolt,
.fa-phone,
.fa-envelope,
.text-warning {
  color: var(--elektro-orange);
}

/* Remove any unwanted blue colors */
.text-info {
  color: var(--elektro-medium-gray);
}

.bg-info {
  background-color: var(--elektro-light-gray);
}

/* Ensure buttons are consistently orange */
.btn-success {
  background-color: var(--elektro-orange);
  border-color: var(--elektro-orange);
}

.btn-success:hover {
  background-color: #d96a0e;
  border-color: #d96a0e;
}

/* Hero section styling */
.hero-section {
  background: linear-gradient(135deg, var(--elektro-light-gray) 0%, var(--elektro-white) 100%);
  padding: 4rem 0;
}

.hero-title {
  color: var(--elektro-dark-blue);
  font-weight: bold;
}

.hero-subtitle {
  color: var(--elektro-medium-gray);
}

/* Logo in navbar */
.navbar-logo {
  height: 50px;
  width: auto;
  max-width: 200px;
}

/* Page titles with uppercase styling and light weight */
.page-title {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
  color: var(--elektro-orange);
}

/* Consistent page heading spacing */
.page-header {
  margin-bottom: 1rem !important;
}

.section-header {
  margin-bottom: 2rem !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Responsive typography scaling */
  body {
    font-size: 13px;
  }

  h1,
  .h1 {
    font-size: 2.5rem; /* 35px */
  }

  h2,
  .h2 {
    font-size: 2rem; /* 28px */
  }

  h3,
  .h3 {
    font-size: 1.5rem; /* 21px */
  }

  h4,
  .h4 {
    font-size: 1.375rem; /* 19px */
  }

  h5,
  .h5 {
    font-size: 1.25rem; /* 18px */
  }

  h6,
  .h6 {
    font-size: 1.125rem; /* 16px */
  }

  .references-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .contact-section {
    padding: 2rem 0;
  }

  .navbar-logo {
    height: 32px;
    max-width: 120px;
  }
}