/* Mobile Mechanic Muscle - Custom Styles (Growth Theme Compatible) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {
  --primary-color: #30beb4;
  --primary-hover: #30beb4;
  --primary-active: #80ffff;
  --secondary-color: #f5f5f5;
  --accent-bg: #fffffb;
  --body-bg: #ffffff;
  --text-dark: #2b394b;
  --text-light: #666666;
  --border-color: #eeeeee;
  --font-primary:
    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   Centered header fix for managed pages.
   module_website-header.min.css sets display:flex on .header__menu-wrapper
   and display:block on .header__logo-image, which prevents the parent's
   text-align:center from centering them. Home page has additional CSS
   from template_main.min.css that overrides this; managed pages don't
   load that file, so we replicate the centering behavior here.
   ============================================================ */
.header__container--centered .header__menu-wrapper {
  justify-content: center;
}
.header__container--centered .header__logo-image {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Growth Theme — header settings replication for managed pages.
   Managed pages don't emit HubSpot's theme-generated inline <style>
   blocks for the menu submenu, so we replicate them here.
   Source: HubSpot-rendered CSS on the home page (unmanaged).
   ============================================================ */

/* Menu items — top level links */
.header__menu-link {
  font-family: Poppins, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  font-size: 17px;
  text-transform: none;
}

.header__menu-item--depth-1 > .header__menu-link:not(.button) { color: #2B394B; }
.header__menu-item--depth-1 > .header__menu-link:hover,
.header__menu-item--depth-1 > .header__menu-link:focus { color: #000000; }
.header__menu-item--depth-1 > .header__menu-link:active { color: #505050; }
.header__menu-item--depth-1 > .header__menu-link--active-link:not(.button) { color: #000000; }
.header__menu-item--depth-1 .header__menu-child-toggle svg { fill: #2B394B; }

/* Submenu dropdowns — white background, dark text (the main fix) */
.header__menu-submenu {
  background-color: #ffffff;
  border-color: #EEEEEE;
}
.header__menu-submenu .header__menu-link:not(.button) { color: #2B394B; }
.header__menu-submenu .header__menu-item {
  background-color: #ffffff;
}
.header__menu-submenu .header__menu-item:hover,
.header__menu-submenu .header__menu-item:focus {
  background-color: #f5f8fa;
}
.header__menu-submenu .header__menu-link:hover,
.header__menu-submenu .header__menu-link:focus {
  color: #000000;
  background-color: #f5f8fa;
}
.header__menu-submenu .header__menu-link:active {
  background-color: #f5f8fa;
}

/* ============================================================
   Button reset (replaces .no-button from template_main.min.css)
   Fixes header dropdown chevron buttons rendering as default
   browser gray boxes.
   ============================================================ */
.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  padding: 0;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-transform: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Header dropdown chevron toggle — ensure no browser default styling */
.header__menu-child-toggle,
.header__menu-child-toggle:hover,
.header__menu-child-toggle:focus,
.header__menu-child-toggle:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.header__menu-child-toggle svg {
  fill: currentColor;
}

/* ============================================================
   Hamburger (mobile menu toggle) — proper tap target.
   Without this, the SVG icon is only 30x30 with zero padding,
   so clicks on the edges miss the button entirely. iOS HIG
   recommends 44x44 minimum for reliable touch.
   ============================================================ */
.header__menu-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 8px !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.header__menu-toggle--show {
  display: flex !important;
}
.header__menu-toggle svg {
  flex-shrink: 0;
  pointer-events: none; /* clicks on the SVG still count as clicks on the button */
}

/* Utility Classes */
.show-for-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Scroll anchor offset for fixed header */
:target {
  scroll-margin-top: 250px;
}

[id] {
  scroll-margin-top: 250px;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-dark);
  font-size: 17px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
}

h1 {
  font-size: 40px;
}
h2 {
  font-size: 32px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 16px;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header__skip {
  position: absolute;
  left: -9999px;
}

.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header__bottom {
  padding: 15px 0;
}

.header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo-col {
  flex: 0 0 auto;
}

.header__logo-image {
  display: block;
  max-width: 120px;
  height: auto;
}

/* Mobile Menu Styles */
.header__menu--mobile {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 400px;
  height: 100vh;
  padding: 60px 20px 20px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.header__menu--mobile.is-open {
  right: 0;
}

.header__menu--mobile .header__menu-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header__menu--mobile .header__menu-item {
  border-bottom: 1px solid var(--border-color);
}

.header__menu--mobile .header__menu-link {
  display: block;
  padding: 15px 0;
  color: var(--text-dark);
  text-decoration: none;
}

.header__menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

@media (min-width: 768px) {
  .header__menu-container--mobile,
  .header__menu--mobile {
    display: none;
  }
}
  height: auto;
}

.header__menu-col {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.header__button-col {
  flex: 0 0 auto;
  margin-left: 20px;
}

.header__menu--desktop {
  display: block;
}

.header__menu-wrapper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
}

.header__menu-item {
  display: inline-block;
}

.header__menu-link {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  padding: 10px 0;
  transition: color 0.3s;
}

.header__menu-link:hover {
  color: var(--primary-color);
}

@media (max-width: 767px) {
  .header__menu--desktop {
    display: none;
  }
}

/* Hero Section */
.hero-section {
  background: var(--body-bg);
  padding: 80px 0;
  text-align: center;
}

.hero-text h1 {
  font-size: 48px;
  margin-bottom: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-subhead {
  font-size: 20px;
  margin-bottom: 30px;
  color: var(--text-light);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Buttons */
.button,
.cta-button {
  display: inline-block;
  background: var(--primary-color);
  color: white !important;
  padding: 10px 20px;
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  transition: all 0.3s;
  border: 1px solid var(--primary-color);
}

.button:hover,
.cta-button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: white !important;
}

.button:active,
.cta-button:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
  color: white !important;
}

.cta-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.cta-secondary:hover {
  background: var(--primary-color);
  color: white;
}

/* Content Sections */
.content-section {
  padding: 80px 0;
}

.content-section-alt {
  background: var(--accent-bg);
}

.content-section h2 {
  font-size: 42px;
  margin-bottom: 16px;
  color: var(--text-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.content-section h3 {
  font-size: 24px;
  margin: 30px 0 15px;
  color: var(--text-dark);
  font-weight: 700;
  text-transform: uppercase;
}

.content-section p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* Service Grid / Offer Cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.offer-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card {
  border: 1px solid var(--border-color);
}

.card--light {
  background: white;
}

.offer-card__image-wrapper {
  margin-bottom: 20px;
}

.offer-card__image {
  width: 100%;
  height: auto;
  display: block;
}

.offer-card__content {
  flex: 1 1 auto;
  margin-bottom: 20px;
}

.offer-card__content h3 {
  color: var(--text-dark);
  margin-bottom: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.offer-card__content p {
  color: var(--text-light);
  line-height: 1.6;
}

.offer-card__button-wrapper {
  flex: 0 0 auto;
}

/* Lists */
.checklist {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.checklist li {
  padding: 12px 0 12px 35px;
  position: relative;
  font-size: 18px;
  color: var(--text-dark);
}

.checklist li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
  font-size: 20px;
}

.process-list {
  counter-reset: process;
  list-style: none;
  padding: 0;
}

.process-list li {
  counter-increment: process;
  padding: 20px 0 20px 60px;
  position: relative;
  font-size: 18px;
  border-left: 2px solid var(--border-color);
  margin-left: 20px;
}

.process-list li:before {
  content: counter(process);
  position: absolute;
  left: -20px;
  top: 15px;
  background: var(--primary-color);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* CTA Section */
.cta-section {
  background: var(--primary-color);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.cta-section h2 {
  color: white;
  font-size: 36px;
  margin-bottom: 20px;
}

.cta-section .cta-button {
  background: white;
  color: var(--primary-color);
}

/* Footer */
.site-footer {
  background: var(--text-dark);
  color: white;
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h3,
.footer-col h4 {
  color: white;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 32px;
  }

  .hero-subhead {
    font-size: 18px;
  }

  .main-nav {
    flex-direction: column;
    gap: 15px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .content-section {
    padding: 40px 0;
  }
}