/* Baycon Electric Website Styles */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/*
  Colour variables for the light theme are defined in :root.  The dark theme
  overrides these values via the .dark-theme class on the body element.
*/
:root {
  /*
    Colour palette and assets for the light theme.  These values define
    the base colours and backgrounds when no `.dark-theme` class is
    present on the body element.  The hero background image is set
    via a CSS variable so it can be overridden for the dark theme.
  */
  --primary-color: #0056b3;            /* deep blue accent reminiscent of electricity */
  --secondary-color: #f5f8fc;          /* very light neutral background */
  --accent-color: #009ee0;             /* vibrant electric blue for highlights */
  --text-color: #1f2937;               /* dark grey text for good contrast */
  --light-text: #4b5563;               /* muted text for secondary information */
  --hero-overlay: rgba(255, 255, 255, 0.35); /* light overlay on hero for readability */
  --hero-text-color: #0f172a;          /* dark text on light hero */
  /* Default hero background image set to van storm scene for light theme */
  --hero-background-image: url('assets/van_storm.png');
  --card-bg: #ffffff;                  /* card background in light mode */
  --card-border: #e5e7eb;              /* subtle border for cards */
  --input-bg: #ffffff;                 /* input fields background */
  --input-border: #cbd5e1;             /* input border colour */
  --footer-bg: #022c60;                /* footer background */
  --footer-text: #ffffff;              /* footer text colour */
  --border-radius: 6px;
  --transition-speed: 0.3s;

  /* Base colours for chat widgets */
  --primary-bg: var(--card-bg);
  --secondary-bg: var(--secondary-color);
  --border-color: var(--card-border);

  /*
    Derived colours for interactive elements such as button hovers.  These
    values provide a slightly darker shade of the accent colour for
    consistent hover feedback across both themes.  They can be
    overridden in the dark theme below.
  */
  --accent-hover: #0080b7;
}

/* Dark theme variables.  When the body element has the class .dark-theme,
   these values override the defaults above.  Colours are inspired by the
   provided hero image with warm orange accents on a deep blue/black base. */
body.dark-theme {
  /*
    Overrides for the dark theme.  Warm orange accents and a deep
    navy/black palette tie in with the provided logo.  A dark hero
    background image is used, and card/input colours are adjusted for
    readability.  The hero overlay is more opaque to ensure text stands
    out against the busy background.
  */
  --primary-color: #0d2538;              /* dark navy for headers */
  --secondary-color: #0a1726;            /* very dark background */
  --accent-color: #e98200;               /* warm amber/orange accent */
  --text-color: #e2e8f0;                 /* light grey text */
  --light-text: #7f9eb2;                /* muted blue-grey for secondary text */
  --hero-overlay: rgba(0, 0, 0, 0.8);    /* dark overlay for hero */
  --hero-text-color: #fefefe;            /* white text on dark hero */
  /* Override hero background image for dark theme to use same van storm scene */
  --hero-background-image: url('assets/van_storm.png');
  --card-bg: #112e42;                    /* card background in dark mode */
  --card-border: #1e3a5f;                /* subtle border for cards */
  /* Adjust input backgrounds and borders in dark theme for better contrast. */
  /* Further lighten input fields in dark mode for better contrast */
  --input-bg: #244c7a;                   /* medium-dark blue background for inputs */
  --input-border: #336699;               /* lighter blue border to delineate inputs */
  --footer-bg: #011a36;                  /* footer background */
  --footer-text: #cbd5e1;                /* footer text colour */

  /* Chat backgrounds for dark mode */
  --primary-bg: var(--card-bg);
  --secondary-bg: var(--secondary-color);
  --border-color: var(--card-border);

  /* Dark theme hover colour for accent elements */
  --accent-hover: #c76f00;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background-color: var(--secondary-color);
  line-height: 1.6;
}

header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
}

/* Logo container inside header.  Aligns logo image and optional text horizontally. */
header .logo {
  display: flex;
  align-items: center;
}

header .logo img {
  height: 50px;
  width: auto;
  margin-right: 10px;
  border-radius: 50%;
}

nav {
  display: flex;
  gap: 20px;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-speed);
}

nav a:hover {
  color: var(--accent-color);
}

/* Theme toggle radio buttons container inside header */
.theme-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 20px;
  color: white;
}

.theme-toggle label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.theme-toggle input[type="radio"] {
  margin-right: 4px;
}

/* Hero section uses an image background derived from hero.jpg.  The overlay
   colour and text colour adapt to the current theme via CSS variables. */
.hero {
  /* Use the hero image defined in CSS variables for each theme */
  background-image: var(--hero-background-image);
  background-size: cover;
  background-position: center;
  color: var(--hero-text-color);
  padding: 100px 20px;
  text-align: left;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--hero-overlay);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: auto;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-speed);
  font-weight: 500;
}

.btn:hover {
  background-color: var(--accent-hover);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.service-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  flex: 1;
  min-width: 250px;
  transition: transform var(--transition-speed);
  color: var(--text-color);
}

/* Calculator sections on the calculators page */
.calc-section {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: var(--text-color);
}

.calc-section h3 {
  margin-top: 0;
  color: var(--accent-color);
}

.calc-section .result {
  margin-top: 10px;
  font-weight: 500;
  color: var(--accent-color);
}

/* Icon wrapper used in service cards and calculator sections.  The wrapper adds
   spacing below icons and sets consistent sizing.  Icons inherit the accent
   colour via currentColor so they adapt to light and dark themes. */
.icon-wrapper {
  margin-bottom: 12px;
}
.icon-wrapper svg {
  width: 36px;
  height: 36px;
  display: block;
  color: var(--accent-color);
}

/* Internal tools sections (time clock and job tracker) */
.tool-section {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: var(--text-color);
}

.tool-section h3 {
  margin-top: 0;
  color: var(--accent-color);
}

.tool-section table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tool-section th, .tool-section td {
  border: 1px solid var(--card-border);
  padding: 6px 8px;
}

.tool-section th {
  background-color: var(--primary-color);
  color: var(--footer-text);
}

.tool-section tr:nth-child(even) td {
  background-color: var(--secondary-color);
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card h3 {
  margin-top: 0;
  /* Use the accent colour for card headings so they stand out in both themes */
  color: var(--accent-color);
}

.cta-section {
  background-color: var(--primary-color);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.cta-section h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.cta-section p {
  margin-bottom: 20px;
}

form.lead-form {
  max-width: 600px;
  margin: 20px auto;
  display: grid;
  gap: 15px;
}

form.lead-form input, form.lead-form textarea, form.lead-form select {
  padding: 10px;
  border-radius: var(--border-radius);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  font-size: 1rem;
}

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 30px 20px;
  text-align: center;
}

footer p {
  margin: 5px 0;
  font-size: 0.9rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .hero h2 {
    font-size: 2rem;
  }
  .services {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }
  header > div:last-child {
    align-items: stretch !important;
    flex-direction: column;
    width: 100%;
  }
  header .logo {
    margin-bottom: 8px;
  }
  nav {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
    width: 100%;
  }
  nav a {
    align-items: center;
    background: rgba(255,255,255,0.08);
    border-radius: var(--border-radius);
    display: flex;
    min-height: 42px;
    padding: 6px 10px;
  }
  .theme-toggle {
    margin-left: 0;
    margin-top: 10px;
  }
  .container {
    width: 92%;
    padding: 24px 0;
  }
  .hero {
    padding: 60px 15px;
    text-align: center;
  }
  .hero-content {
    max-width: none;
    margin: 0;
  }
  .calc-section,
  .tool-section {
    margin-bottom: 20px;
    padding: 18px;
  }
  .btn {
    min-height: 48px;
    padding: 12px 18px;
  }
  form.lead-form {
    max-width: 100%;
    grid-template-columns: 1fr;
  }
  form.lead-form input,
  form.lead-form textarea,
  form.lead-form select {
    width: 100%;
  }
}

/*
  Generic form control styling.  Apply unified backgrounds, borders and
  colours to all input, select and textarea elements except radio and
  checkbox types.  This ensures form controls adapt to the current
  theme automatically.  Specific form classes can override these
  defaults if necessary.
*/
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  padding: 10px;
  border-radius: var(--border-radius);
  font-size: 1rem;
  box-sizing: border-box;
}