/*
Theme Name: Mechflow Engineering
Theme URI: https://mechflow.ae/
Author: Adam Apps
Author URI: https://adamapps.in/
Description: Custom high-performance WordPress theme for Mechflow Engineering Services LLC. Features turnkey pump, valve, gearbox, electric motor overhaul, and own casting foundry capabilities with ACF Pro modular section widgets, Gutenberg blocks, and instant default content.
Version: 1.0.26
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: mechflow
*/

/* ==========================================================================
   Universal Navigation & Menu Reset (Eliminates All Bullet Points)
   ========================================================================== */
#mobile-menu {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 300ms ease-in-out, visibility 0s linear 300ms;
}

#mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 300ms ease-in-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #mobile-menu.is-open {
    transition: none;
  }
}

body.mechflow-mobile-menu-open {
  overflow: hidden;
}

nav ul, nav ol, nav li,
.menu, .menu li,
.sub-menu, .sub-menu li,
ul.menu, ul.menu li,
#primary-menu, #primary-menu li,
.primary-menu, .primary-menu li,
footer ul, footer ol, footer li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

nav li::marker,
.menu li::marker,
.sub-menu li::marker,
ul.menu li::marker,
#primary-menu li::marker,
.primary-menu li::marker,
footer li::marker {
  display: none !important;
  content: '' !important;
}

nav li::before, nav li::after,
.menu li::before, .menu li::after,
.sub-menu li::before, .sub-menu li::after,
footer li::before, footer li::after {
  content: none !important;
}

/* Eliminate any top margin gap above the footer across all viewports */
footer {
  margin-top: 0 !important;
}

/* ==========================================================================
   WordPress Custom Logo Responsive Header Constraint
   ========================================================================== */
.custom-logo-link,
a.custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  max-height: 2.6rem !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.custom-logo,
img.custom-logo,
.custom-logo-link img {
  height: 2.25rem !important;
  max-height: 2.6rem !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  aspect-ratio: 473 / 100 !important;
  display: block !important;
}

@media (min-width: 640px) {
  .custom-logo,
  img.custom-logo,
  .custom-logo-link img {
    height: 2.5rem !important;
  }
}

@media (min-width: 768px) {
  .custom-logo,
  img.custom-logo,
  .custom-logo-link img {
    height: 2.6rem !important;
  }
}

/* Premium visual system. Presentation only; ACF content and section order remain intact. */
:root {
  --mf-ink: oklch(24% 0.052 258);
  --mf-ink-deep: oklch(19% 0.046 258);
  --mf-paper: oklch(98% 0.005 235);
  --mf-mist: oklch(96% 0.009 235);
  --mf-line: oklch(87% 0.015 235);
  --mf-text: oklch(29% 0.031 255);
  --mf-muted: oklch(46% 0.024 250);
  --mf-copper: oklch(52% 0.115 43);
  --mf-copper-hover: oklch(45% 0.11 43);
  --mf-sage: oklch(72% 0.075 145);
}

body {
  background: var(--mf-paper);
  color: var(--mf-text);
  font-family: 'Archivo', Arial, sans-serif;
}

body.bg-surface,
main.bg-surface {
  background-color: var(--mf-paper);
}

.font-body-sm,
.font-body-md,
.font-body-lg,
.font-headline-sm,
.font-headline-md,
.font-headline-lg,
.font-display-hero,
.font-label-caps {
  font-family: 'Archivo', Arial, sans-serif;
}

.font-tech-spec {
  font-family: 'JetBrains Mono', monospace;
}

.bg-secondary-container {
  background-color: var(--mf-copper);
}

.text-secondary,
.text-secondary-container {
  color: var(--mf-copper);
}

.hover\:bg-secondary:hover {
  background-color: var(--mf-copper-hover);
}

.hover\:text-secondary:hover {
  color: var(--mf-copper-hover);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--mf-copper);
  outline-offset: 3px;
}

.mechflow-site-header {
  background: var(--mf-paper);
  border-bottom-color: var(--mf-line);
  box-shadow: 0 8px 28px oklch(19% 0.046 258 / 0.08);
  backdrop-filter: none;
}

.mechflow-topbar {
  background: var(--mf-ink-deep);
  border-bottom-color: oklch(98% 0.005 235 / 0.1);
}

.mechflow-topbar .pulse-beacon,
.mechflow-hero .animate-pulse {
  animation: none;
}

.mechflow-topbar .bg-secondary-container {
  background: oklch(98% 0.005 235 / 0.12);
  border: 1px solid oklch(98% 0.005 235 / 0.18);
}

.mechflow-navbar {
  background: var(--mf-paper);
}

.mechflow-navbar nav a,
.mechflow-navbar nav button {
  transition: color 180ms ease;
}

.mechflow-navbar nav a:hover,
.mechflow-navbar nav button:hover {
  color: var(--mf-copper-hover);
}

.mechflow-navbar #mobile-menu-btn {
  border: 1px solid var(--mf-line);
  border-radius: 7px;
  min-width: 44px;
  min-height: 44px;
}

#mobile-menu {
  background: var(--mf-paper);
}

#mobile-menu nav {
  gap: 0;
}

#mobile-menu nav a {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--mf-line);
  line-height: 1.25;
}

.mechflow-hero {
  background: var(--mf-ink-deep);
}

.mechflow-hero > .absolute.inset-0 > img {
  filter: saturate(0.78) contrast(1.05);
}

.mechflow-hero-wash {
  background: linear-gradient(90deg,
    oklch(19% 0.046 258 / 0.95) 0%,
    oklch(19% 0.046 258 / 0.85) 42%,
    oklch(19% 0.046 258 / 0.38) 100%);
}

.mechflow-hero h1 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: none;
}

.mechflow-hero h1 + p {
  max-width: 62ch;
  line-height: 1.68;
  text-shadow: none;
}

.mechflow-hero .rounded-full.backdrop-blur-md {
  border-radius: 5px;
  border-color: oklch(98% 0.005 235 / 0.24);
  background: oklch(19% 0.046 258 / 0.38);
  backdrop-filter: none;
}

.mechflow-proof-panel {
  background: oklch(19% 0.046 258 / 0.95);
  border: 1px solid oklch(98% 0.005 235 / 0.18);
  border-radius: 8px;
  box-shadow: 0 28px 60px oklch(12% 0.03 258 / 0.26);
  backdrop-filter: none;
}

.mechflow-proof-panel .mt-4 > div {
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid oklch(98% 0.005 235 / 0.14);
  border-radius: 0;
  background: transparent;
}

.mechflow-proof-panel .mt-4 > div:last-child {
  border-bottom: 0;
}

.mechflow-proof-panel a {
  border-radius: 5px;
  min-height: 44px;
}

main section.bg-surface {
  background-color: var(--mf-paper);
}

main section.bg-surface-container-low,
main section.bg-cad-grid {
  background-color: var(--mf-mist);
}

main section h2 {
  max-width: 25ch;
  color: var(--mf-text);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(1.95rem, 3vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.038em;
  font-weight: 700;
  text-wrap: balance;
}

main section h3 {
  letter-spacing: -0.018em;
  line-height: 1.25;
}

main section .font-label-caps {
  letter-spacing: 0.11em;
}

main section .grid > div:is(.bg-surface-container-lowest, .bg-surface) {
  border-color: var(--mf-line);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

main section .grid > div:is(.bg-surface-container-lowest, .bg-surface):hover {
  border-color: oklch(74% 0.024 235);
  box-shadow: 0 12px 28px oklch(19% 0.046 258 / 0.07);
}

main section .grid > div:is(.bg-surface-container-lowest, .bg-surface) img {
  filter: saturate(0.86);
}

main section .grid > div p.font-body-sm {
  font-size: 0.91rem;
  line-height: 1.62;
}

main section .grid > div:is(.bg-surface-container-lowest, .bg-surface):hover img {
  filter: saturate(1);
}

.mechflow-services-grid {
  gap: 0 3rem;
}

@media (min-width: 1024px) {
  .mechflow-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mechflow-services-grid > div.bg-surface-container-lowest {
  padding: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--mf-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mechflow-services-grid > div.bg-surface-container-lowest:hover {
  border-color: var(--mf-line);
  box-shadow: none;
}

.mechflow-services-grid > div > div:first-child > div:first-child {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--mf-line);
  border-radius: 5px;
  background: var(--mf-paper);
  color: var(--mf-ink);
}

.mechflow-services-grid > div > div:first-child > div:first-child .material-symbols-outlined {
  font-size: 1.35rem;
}

.mechflow-services-grid > div > div:last-child {
  margin-top: 1.5rem;
}

.mechflow-pillars-section .grid > div:first-child {
  background: var(--mf-ink);
  border-color: var(--mf-ink);
}

.mechflow-pillars-section .grid > div:first-child :is(h3, p, .font-label-caps) {
  color: var(--mf-paper);
}

.mechflow-pillars-section .grid > div:first-child > div:first-child > div:first-child {
  background: var(--mf-copper);
  color: var(--mf-paper);
}

.mechflow-pillars-section .grid > div:first-child > div:last-child {
  border-color: oklch(98% 0.005 235 / 0.18);
  color: var(--mf-sage);
}

.laser-beam {
  display: none;
}

main :is(a, button).bg-primary,
main :is(a, button).bg-secondary-container {
  min-height: 44px;
  border-radius: 6px;
  box-shadow: none;
}

main :is(input, select, textarea) {
  border-color: var(--mf-line);
  border-radius: 6px;
  min-height: 46px;
  font-family: 'Archivo', Arial, sans-serif;
}

main :is(input, select, textarea):focus {
  border-color: var(--mf-copper);
}

.mechflow-footer {
  background: var(--mf-ink-deep);
}

.mechflow-footer img {
  width: auto;
  padding: 0.65rem;
  border-radius: 5px;
  background: var(--mf-paper);
  box-sizing: content-box;
}

.mechflow-footer .font-label-caps {
  color: var(--mf-sage);
}

.mechflow-footer a:hover {
  color: var(--mf-sage);
}

.mechflow-contact-dock {
  border-color: oklch(98% 0.005 235 / 0.18);
  border-radius: 9px;
  background: var(--mf-ink-deep);
  box-shadow: 0 14px 34px oklch(12% 0.03 258 / 0.24);
  backdrop-filter: none;
}

@media (max-width: 767px) {
  .mechflow-hero {
    min-height: auto;
  }

  .mechflow-hero > .relative {
    padding-block: 4.5rem;
  }

  .mechflow-hero-wash {
    background: linear-gradient(180deg,
      oklch(19% 0.046 258 / 0.88),
      oklch(19% 0.046 258 / 0.82));
  }

  .mechflow-hero h1 {
    font-size: clamp(2.45rem, 9vw, 3.6rem);
  }

  .mechflow-proof-panel {
    padding: 1.35rem;
  }

  .mechflow-contact-dock {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  main section .grid > div:is(.bg-surface-container-lowest, .bg-surface),
  .mechflow-navbar nav a,
  .mechflow-navbar nav button {
    transition: none;
  }
}

/* Custom Desktop & Mobile Range Slider Styling for ISO Calculator */
input[type="range"]#iso-calc-weight,
input[type="range"]#iso-calc-rpm {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  margin: 10px 0;
}

input[type="range"]#iso-calc-weight::-webkit-slider-thumb,
input[type="range"]#iso-calc-rpm::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff6937;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="range"]#iso-calc-weight::-webkit-slider-thumb:hover,
input[type="range"]#iso-calc-rpm::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(255, 105, 55, 0.35);
}

input[type="range"]#iso-calc-weight::-moz-range-thumb,
input[type="range"]#iso-calc-rpm::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff6937;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}