/* ── Auto Pro Suspension Plugin Styles ── */
:root {
  --aps-red: #e00d0d;
  --aps-dark-red: #9b0a0a;
  --aps-white: #ffffff;
  --aps-off-white: #f0f0f0;
  --aps-dark: #0a0a0a;
  --aps-mid: #1a1a1a;
  --aps-steel: #2a2a2a;
  --aps-grey: #888888;
  --aps-page-bg: #3a3d42;
}

/* Reset scoped to plugin */
.aps-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.aps-wrap { font-family: 'Barlow', sans-serif; color: var(--aps-white); background: var(--aps-page-bg); overflow-x: hidden; }

/* NAV */
.aps-nav {
  position: sticky; top: 0; z-index: 999;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--aps-red);
  padding: 0 4%;
  display: flex; align-items: center; justify-content: space-between;
  height: 110px;
}
.aps-nav-logo img { height: 100px; width: auto; display: block; }
.aps-nav-links { display: flex; gap: 2rem; list-style: none; }
.aps-nav-links a { color: var(--aps-off-white); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; transition: color 0.2s; }
.aps-nav-links a:hover { color: var(--aps-red) !important; }
.aps-nav-cta { background: var(--aps-red); color: var(--aps-white) !important; padding: 7px 16px; border-radius: 3px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background 0.2s; }
.aps-nav-cta:hover { background: var(--aps-dark-red) !important; }
.aps-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 8px; background: var(--aps-red); border: none; width: 40px; height: 40px; border-radius: 4px; }
.aps-burger span { display: block; width: 24px; height: 2px; background: var(--aps-white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.aps-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aps-burger.open span:nth-child(2) { opacity: 0; }
.aps-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.aps-mobile-menu { display: none; flex-direction: column; background: rgba(10,10,10,0.98); border-bottom: 2px solid var(--aps-red); padding: 12px 0; }
.aps-mobile-menu.open { display: flex; }
.aps-mobile-menu a { color: var(--aps-off-white); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; padding: 14px 6%; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.2s; }
.aps-mobile-menu a:hover { color: var(--aps-red) !important; }

/* HERO — full-bleed breakout via transform.
   background-size: 100% auto shows the image at full natural width on all
   screen sizes — no zooming in, no sides cropping. Hero height follows the
   image proportions + padding, keeping it consistent on desktop and mobile. */
.aps-hero {
  /* Desktop: contain = whole car image fits without any cropping, like mobile view.
     Background colour fills the sides. Hero height = image natural height at 70% width. */
  background: var(--aps-page-bg) url('../images/hero-bg.jpg') center center / contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  padding: 4vw 5%;
  min-height: 56vw;
  position: relative; overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.aps-hero::after { display:none; }
.aps-hero-stripe { display:none; }

.aps-hero-content { max-width: 700px; position:relative; z-index:2; text-align: center; }
.aps-hero-badge { display:inline-block; background:var(--aps-red); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; padding:5px 14px; margin-bottom:20px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%); }
/* Hero title — styled to match the logo: silver AUTO, red PRO, banner SUSPENSION */
.aps-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 10vw, 9rem);
  line-height: 1.05;
  letter-spacing: 3px;
  font-weight: 900;
  white-space: nowrap;
  font-style: italic;
}
/* "AUTO" — silver/metallic gradient matching the logo lettering */
.aps-hero-auto {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #a8b4bf 45%, #e8edf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.7));
}
/* "PRO" — red matching the logo */
.aps-hero-pro {
  color: var(--aps-red);
  text-shadow: 2px 3px 6px rgba(0,0,0,0.8);
}
/* "SUSPENSION" — same silver metallic gradient as AUTO, no block background */
.aps-hero-suspension {
  display: inline-block;
  font-size: 0.68em;
  letter-spacing: 7px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #a8b4bf 45%, #e8edf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.7));
  margin-top: 8px;
  font-style: italic;
}
.aps-hero-sub { font-family:'Barlow Condensed',sans-serif; font-size:clamp(1rem,2.5vw,1.35rem); font-weight:700; letter-spacing:2px; color:#ffffff; text-transform:uppercase; margin:16px 0 32px; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8); }
.aps-hero-sub span { color:#ffffff; }

.aps-btns { display:flex; gap:16px; flex-wrap:wrap; }
.aps-btn-primary { background:var(--aps-red); color:var(--aps-white) !important; padding:14px 32px; text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:2px; text-transform:uppercase; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%); transition:background 0.2s,transform 0.2s; display:inline-block; }
.aps-btn-primary:hover { background:var(--aps-dark-red) !important; transform:translateY(-2px); }
.aps-btn-outline { border:2px solid var(--aps-white); color:var(--aps-white) !important; padding:13px 30px; text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:2px; text-transform:uppercase; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%); transition:border-color 0.2s,color 0.2s,transform 0.2s; display:inline-block; }
.aps-btn-outline:hover { border-color:var(--aps-red) !important; color:var(--aps-red) !important; transform:translateY(-2px); }

.aps-hero-stats { display:flex; gap:40px; margin-top:60px; }
.aps-stat-num { font-family:'Bebas Neue',sans-serif; font-size:2.8rem; line-height:1; color:var(--aps-red); }
.aps-stat-label { font-family:'Barlow Condensed',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--aps-grey); }

/* SECTION COMMON */
.aps-section { padding: 80px 5%; position: relative; }
.aps-section-header { text-align:center; margin-bottom:50px; }
.aps-section-tag { display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.75rem; letter-spacing:4px; text-transform:uppercase; color:var(--aps-red); margin-bottom:12px; }
.aps-section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:2px; line-height:1; color:var(--aps-white); }
.aps-section-title span { color:var(--aps-red); }
.aps-section-divider { width:60px; height:3px; background:var(--aps-red); margin:20px auto 0; }

.aps-services { background: var(--aps-page-bg); }
.aps-services::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--aps-red),transparent); }
.aps-services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px; }
.aps-service-card { background:var(--aps-mid); position:relative; overflow:hidden; transition:transform 0.3s; border-left:3px solid transparent; }
.aps-service-card:hover { transform:translateY(-4px); border-left-color:var(--aps-red); }
.aps-service-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--aps-red); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.aps-service-card:hover::after { transform:scaleX(1); }
.aps-service-img-wrap { overflow:hidden; height:170px; }
.aps-service-img { width:100%; height:170px; object-fit:cover; display:block; filter:grayscale(20%); transition:filter 0.3s,transform 0.4s; }
.aps-service-card:hover .aps-service-img { filter:grayscale(0%); transform:scale(1.05); }
.aps-service-body { padding:22px 24px; }
.aps-service-name { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.25rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; color:var(--aps-white); }
.aps-service-desc { font-size:0.88rem; color:var(--aps-grey); line-height:1.6; }

/* WHY */
.aps-why { background: var(--aps-page-bg); }
/* Stacked layout: heading centred at top, cards in 2x2 grid below */
.aps-why-inner { display:flex; flex-direction:column; gap:40px; }
.aps-why-text .aps-section-header { text-align:center; }
.aps-why-text .aps-section-divider { margin-left:auto; margin-right:auto; }
.aps-why-subhead {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  letter-spacing:1px; text-transform:uppercase;
  color:var(--aps-off-white);
  margin:10px 0 0;
  text-align:center;
}
.aps-why-subhead span { color:var(--aps-red); }
.aps-tagline { font-size:1rem; color:var(--aps-off-white); line-height:1.7; margin:20px auto 24px; max-width:680px; text-align:center; }
.aps-pillars { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.aps-pillar { background:rgba(224,13,13,0.15); border:1px solid var(--aps-red); padding:10px 18px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:2px; text-transform:uppercase; color:var(--aps-red); clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,8px 100%); }
.aps-why-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aps-why-card { background:rgba(10,10,10,0.6); border-left:3px solid var(--aps-red); padding:18px 22px; display:flex; align-items:flex-start; gap:14px; }
.aps-why-card-icon { font-size:1.6rem; flex-shrink:0; }
.aps-why-card-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; color:var(--aps-white); }
.aps-why-card-text { font-size:0.85rem; color:var(--aps-grey); line-height:1.5; }

/* GALLERY */
.aps-gallery { background:var(--aps-dark); }
.aps-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:40px; }
.aps-gallery-item { aspect-ratio:1; background:var(--aps-steel); overflow:hidden; position:relative; }
.aps-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; filter:grayscale(20%); }
.aps-gallery-item:hover img { transform:scale(1.08); filter:grayscale(0%); }
.aps-gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(224,13,13,0.6),transparent); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:14px; }
.aps-gallery-item:hover .aps-gallery-overlay { opacity:1; }
.aps-gallery-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; color:var(--aps-white); }
.aps-gallery-item.aps-large { grid-column:span 2; grid-row:span 2; }

/* CONTACT */
.aps-contact { background: var(--aps-page-bg); }
.aps-contact::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--aps-red),transparent); }
.aps-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:50px; align-items:start; }
.aps-contact-info h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:2px; text-transform:uppercase; color:var(--aps-red); margin-bottom:20px; }
.aps-contact-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.aps-contact-icon { width:40px; height:40px; background:var(--aps-red); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; clip-path:polygon(10% 0,100% 0,90% 100%,0 100%); }
.aps-contact-text { font-size:0.92rem; line-height:1.6; color:var(--aps-off-white); }
.aps-contact-text strong { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:0.75rem; color:var(--aps-grey); margin-bottom:2px; }
.aps-contact-text a { color:var(--aps-white); text-decoration:none; transition:color 0.2s; }
.aps-contact-text a:hover { color:var(--aps-red) !important; }

.aps-persons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.aps-person-card { background:var(--aps-steel); border-top:3px solid var(--aps-red); padding:18px; text-align:center; }
.aps-person-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; color:var(--aps-white); }
.aps-person-role { font-size:0.75rem; color:var(--aps-grey); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.aps-person-number { color:var(--aps-red); font-weight:700; font-size:0.95rem; text-decoration:none; }

.aps-map-wrap { border:2px solid var(--aps-steel); overflow:hidden; }
.aps-map-wrap iframe { width:100%; height:380px; border:none; display:block; }
.aps-map-caption { background:var(--aps-steel); padding:12px 16px; font-family:'Barlow Condensed',sans-serif; font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--aps-grey); }
.aps-map-caption span { color:var(--aps-red); }

/* FOOTER */
.aps-footer { background:var(--aps-page-bg); border-top:2px solid var(--aps-red); padding:36px 5%; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.aps-footer-logo { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:3px; color:var(--aps-white); }
.aps-footer-logo span { color:var(--aps-red); }
.aps-footer-tag { font-family:'Barlow Condensed',sans-serif; font-size:0.78rem; letter-spacing:3px; text-transform:uppercase; color:var(--aps-grey); }
.aps-footer-div { width:40px; height:2px; background:var(--aps-red); }
.aps-footer-copy { font-size:0.78rem; color:var(--aps-grey); }

/* RESPONSIVE — single consolidated block */
@media (max-width: 768px) {
  /* Override any padding/margin the WordPress theme adds to its content wrapper on mobile.
     This is the main cause of side gaps on mobile — the theme's content container. */
  .aps-wrap {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Nav */
  .aps-nav { height: 80px; }
  .aps-nav-logo img { height: 68px; }
  .aps-nav-links { display: none; }
  .aps-nav-cta { display: none; }
  .aps-burger { display: flex; }

  /* Hero — 100% auto scales the image to full width with no horizontal cropping.
     The sides of the suspension will no longer be cut off on portrait screens. */
  .aps-hero {
    padding: 80px 4% 50px;
    min-height: auto;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background-size: 100% auto;
    background-position: center top;
  }

  /* Layouts */
  .aps-wrap { overflow-x: hidden; }
  .aps-section { padding-left: 4%; padding-right: 4%; }
  .aps-why-inner { gap: 24px; }
  .aps-why-cards { grid-template-columns: 1fr; }
  .aps-contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .aps-services-grid { grid-template-columns: 1fr; }
  .aps-gallery-grid { grid-template-columns: repeat(2,1fr); }
  .aps-gallery-item.aps-large { grid-column: span 1; grid-row: span 1; }
  .aps-hero-stats { gap: 20px; }

  /* Pills */
  .aps-pillars { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .aps-pillar { padding: 8px 10px; font-size: 0.75rem; letter-spacing: 1px; flex: 1; text-align: center; }
}