/*
Theme Name: Power Cranes
Theme URI: https://www.powercranes.co/
Author: Power Cranes
Author URI: https://www.powercranes.co/
Description: Custom theme for Power Cranes s.a.r.l — Lebanon's tower crane & industrial elevator specialist. Fully responsive, SEO-ready, with a working contact form delivered over wp_mail() (compatible with Fluent SMTP).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: power-cranes
*/

/* ============================== BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Archivo', sans-serif;
  background: #F2F1EE;
  color: #141413;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

/* ============================== KEYFRAMES ============================== */
@keyframes pc-sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.6deg); } }
@keyframes pc-hook { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes pc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pc-partners-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pc-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes pc-scrolldot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }

/* ============================== NAV ============================== */
.pc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; background: rgba(255,255,255,0.06); }
.pc-progress-bar { height: 100%; background: #FDAA0F; width: 0; transition: width 0.1s linear; }

.pc-nav {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 1000;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(.22,1,.36,1), background 0.3s ease, border-color 0.3s ease;
  background: rgba(18,19,22,0); border-bottom: 1px solid rgba(255,255,255,0);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pc-nav.scrolled { background: rgba(18,19,22,0.86); border-bottom-color: rgba(255,255,255,0.08); }
.pc-nav.nav-hidden { transform: translateY(-130%); }
.pc-nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pc-nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.pc-nav-logo img { height: 30px; display: block; }

.pc-nav-links { display: flex; align-items: center; gap: 4px; }
.pc-nav-links a { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; padding: 10px 16px; transition: color 0.25s ease; }
.pc-nav-links a:hover { color: #FDAA0F; }
.pc-nav-links a .ul { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; background: #FDAA0F; transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(.22,1,.36,1); }
.pc-nav-links a.is-active { color: #FDAA0F; }
.pc-nav-links a.is-active .ul { transform: scaleX(1); }

.pc-nav-right { display: flex; align-items: center; gap: 18px; flex: none; }
.pc-nav-phone { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.66); text-decoration: none; }
.pc-nav-phone:hover { color: #FDAA0F; }
.pc-nav-cta { display: inline-flex; align-items: center; gap: 9px; background: #FDAA0F; color: #141413; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 20px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pc-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(253,170,15,0.35); }

.pc-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: transparent; border: 1px solid rgba(255,255,255,0.22); cursor: pointer; }
.pc-burger span { display: block; height: 2px; background: #fff; transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.2s ease; }
.pc-burger span:first-child { background: #FDAA0F; }
.pc-burger.active span:first-child { transform: translateY(7px) rotate(45deg); }
.pc-burger.active span:nth-child(2) { opacity: 0; }
.pc-burger.active span:last-child { transform: translateY(-7px) rotate(-45deg); }

.pc-menu { position: fixed; inset: 0; z-index: 999; background: #121316; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: flex; flex-direction: column; overflow-y: auto; }
.pc-menu.open { opacity: 1; pointer-events: auto; }
.pc-menu-inner { flex: 1; max-width: 1320px; width: 100%; margin: 0 auto; padding: 110px 40px 40px; display: flex; flex-direction: column; justify-content: center; }
.pc-menu-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #FDAA0F; margin-bottom: 28px; }
.pc-menu a.pc-menu-link { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; transform: translateY(24px); opacity: 0; transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.5s ease, padding-left 0.3s ease; }
.pc-menu.open a.pc-menu-link { transform: translateY(0); opacity: 1; }
.pc-menu a.pc-menu-link:hover { padding-left: 14px; }
.pc-menu-link .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(255,255,255,0.4); width: 36px; }
.pc-menu-link .label { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(34px, 7vw, 64px); letter-spacing: -0.02em; color: #fff; text-transform: uppercase; line-height: 1; }
.pc-menu-meta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 32px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(255,255,255,0.55); }
.pc-menu-meta a { color: rgba(255,255,255,0.55); text-decoration: none; }

@media (max-width: 999px) {
  .pc-nav-links, .pc-nav-phone, .pc-nav-cta { display: none !important; }
  .pc-burger { display: flex; }
  .pc-nav-inner { padding: 0 24px; }
}

/* ====================== RESPONSIVE HELPERS ====================== */
/* sections that carry 56px horizontal padding inline */
@media (max-width: 768px) { .pcx { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 430px) { .pcx { padding-left: 18px !important; padding-right: 18px !important; } }

/* inner max-width wrappers that carry 40px horizontal padding inline */
@media (max-width: 768px) { .pc-inner { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 430px) { .pc-inner { padding-left: 18px !important; padding-right: 18px !important; } }

/* generic inner section hero (about/services/products/projects/contact) */
@media (max-width: 768px) { .pc-hero { padding-top: 128px !important; padding-bottom: 60px !important; } }

/* home split hero */
@media (max-width: 900px) {
  .pc-hero-home { grid-template-columns: 1fr !important; min-height: auto !important; }
  .pc-hero-home .pc-hero-left { padding-top: 120px !important; padding-bottom: 56px !important; }
  .pc-hero-home .pc-hero-media { min-height: 380px !important; order: -1; }
}
@media (max-width: 600px) {
  .pc-hero-home .pc-hero-stats { gap: 26px !important; }
}

/* home services index rows */
@media (max-width: 820px) {
  .pc-svc-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 26px 4px !important; }
  .pc-svc-row:hover { padding-left: 4px !important; padding-right: 4px !important; }
  .pc-svc-arrow { display: none !important; }
}

/* two-up form fields */
@media (max-width: 560px) { .pc-form-2 { grid-template-columns: 1fr !important; } }

/* footer CTA band stacks */
@media (max-width: 720px) { .pc-foot-cta { gap: 24px !important; padding-top: 56px !important; padding-bottom: 56px !important; } }

/* tame oversized scroll cue / labels on small screens */
@media (max-width: 600px) { .pc-scrollcue { display: none !important; } }