/* ==========================================================================
   S.N. PILE GROUP — custom.css
   Tailwind overrides enforcing the industrial-orange corporate identity.
   ========================================================================== */

:root {
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --steel-800: #1f2937;
  --steel-900: #111827;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Prompt', 'Sarabun', sans-serif;
}

::selection {
  background-color: var(--brand-500);
  color: #ffffff;
}

/* Subtle industrial top accent bar */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c2d12, var(--brand-500), #7c2d12);
  z-index: 60;
}

/* Modal entrance animation */
#quote-modal:not(.hidden) .relative {
  animation: modal-in 0.2s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Line clamp fallback (supported natively by Tailwind 3.3+) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* QR code hover zoom */
.qr-zoom {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: zoom-in;
}
.qr-zoom:hover {
  transform: scale(2.2);
  z-index: 40;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* Footer Facebook follow link */
.footer-facebook {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #94a3b8; /* slate-400 — matches footer menu links */
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-facebook-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: #1877F2;
}
.footer-facebook:hover {
  color: #ffffff;
  transform: translateY(-2px);
}
.footer-facebook:hover .footer-facebook-icon {
  color: #ffffff;
}

/* ==========================================================================
   Engineering theme accents (blueprint grid, dot matrix, cards, buttons)
   ========================================================================== */

/* --- Blueprint grid overlay (hero) -------------------------------------- */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
}

/* --- Dot matrix (light section background) ------------------------------- */
.dot-matrix {
  background-image: radial-gradient(rgba(100, 116, 139, 0.20) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* --- Accent line under headings ------------------------------------------ */
.accent-line {
  position: relative;
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500) 60%, rgba(249, 115, 22, 0.25));
}
.accent-line::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand-600);
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
}

/* --- Lift cards (hover: raise + orange bottom accent + shadow) ----------- */
.lift-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}
.lift-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lift-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-300);
  box-shadow: 0 22px 44px -14px rgba(234, 88, 12, 0.40);
}
.lift-card:hover::after {
  transform: scaleX(1);
}

/* --- Quote button (shine sweep) ------------------------------------------ */
.btn-quote {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.btn-quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  z-index: -1;
}
.btn-quote:hover {
  transform: translateY(-2px);
  background-color: var(--brand-700);
  box-shadow: 0 14px 30px -8px rgba(234, 88, 12, 0.70);
}
.btn-quote:hover::before {
  left: 130%;
}

/* --- Quote button (light variant: background/color swap) ----------------- */
.btn-quote-light {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.btn-quote-light:hover {
  transform: translateY(-2px);
  background-color: var(--brand-700);
  color: #ffffff;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}

/* --- Reduced motion: keep AOS content visible and disable animation ------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}