/*
Theme Name: Connect & Grid (v3)
Theme URI: https://connectandgrid.co.uk
Author: Connect & Grid
Description: Vibrant, clean, bold theme with synchronized gradient styling and improved mobile logo scaling.
Version: 3.2.0
Text Domain: connectandgrid
*/

/* === Brand Palette === */
:root{
  --blue:#0080FF;
  --magenta:#B040FF;
  --orange:#FF4F1E;
  --navy:#0B0E18;
  --white:#FFFFFF;
  --muted:#475569;
}

/* === Global === */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--navy);background:var(--white);line-height:1.6}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 16px}

/* === Header === */
header.site-header{position:sticky;top:0;background:var(--white);border-bottom:1px solid #e5e7eb;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}

/* FORCE header logo small */
header img.custom-logo,
header .custom-logo,
header .custom-logo-link img,
header .site-logo img,
header .site-branding img,
.site-header .logo img{
  height:48px !important;
  max-height:48px !important;
  width:auto !important;
  display:block;
}

/* === Hero === */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,var(--blue) 0%,var(--magenta) 100%);
  color:var(--white);
  padding:72px 0 48px;
  border-bottom:1px solid #e5e7eb;
  text-align:center;
}

/* Hero logo — desktop + mobile */
.hero .logo img{
  width:340px !important;
  height:auto !important;
  display:block;
  margin:0 auto;
  object-fit:contain;
  max-width:80vw;
  transition: all .3s ease;
}
@media (max-width:900px){
  .hero .logo img{ width:170px !important; max-width:70vw; }
}

/* Hero text */
.hero p.sub{font-size:18px;color:var(--white);margin:0 0 16px;line-height:1.6}

/* === Buttons === */
.btn-row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;text-decoration:none}
.btn.primary{background:var(--orange);color:var(--white);border-color:var(--orange)}
.btn.success{background:#16B368;color:#fff;border-color:#16B368}
.btn:hover{opacity:.9}

/* === Sections === */
.section{padding:52px 0}
.strip{background:var(--white);color:var(--navy);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}

/* === Cards === */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{border:1px solid #e5e7eb;border-radius:16px;padding:20px;background:var(--white);box-shadow:0 8px 24px rgba(2,12,27,.06)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* === Footer === */
footer.site-footer{padding:28px 0;border-top:1px solid #e5e7eb;margin-top:40px;color:#475569;font-size:14px;text-align:center}

/* === Fluent Forms: keep text readable on light card === */
.form-wrap, .form-wrap *{color:#0B0E18}
.form-wrap label{color:#0B0E18;font-weight:600}
.form-wrap .ff-el-input--content input,
.form-wrap .ff-el-input--content textarea{
  background:#FFFFFF;color:#0B0E18;border:1px solid #E2E8F0;border-radius:10px;padding:.75rem;font-size:16px
}
.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:#64748B}
.form-wrap .ff-el-required-indicator{color:#ef4444}
.form-wrap .ff-btn-submit{background:var(--orange);color:#fff;border:0;border-radius:12px;font-weight:700;padding:12px 18px}
.form-wrap .ff-btn-submit:hover{opacity:.9}

/* === Animated Gradient + Enhanced Shimmer (hero + contact, synced) === */
.hero::before,
.section.strip::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,#0080FF 0%,#00B0FF 20%,#A020F0 45%,#B040FF 70%,#0080FF 100%);
  background-size:400% 400%;
  animation:cngGradientShift 12s ease-in-out infinite;
  opacity:.3;pointer-events:none
}
.hero::after,
.section.strip::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(70deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 85%,rgba(255,255,255,.4) 100%);
  background-size:300% 300%;
  animation:shimmerSweep 9s linear infinite;
  mix-blend-mode:screen;opacity:.28;pointer-events:none
}
.hero > *, .section.strip > *{position:relative;z-index:2}

/* Contact section specifics */
.section.strip{position:relative;border:none;color:#fff;overflow:hidden}
.section.strip h2, .section.strip p{color:#fff}
.section.strip .form-wrap{background:#fff;color:#0B0E18;border-radius:16px;box-shadow:0 8px 24px rgba(2,12,27,.1);border:none;padding:20px}

/* Hover energy pulse */
@media (hover:hover) and (pointer:fine){
  .hero:hover::before, .section.strip:hover::before{opacity:.35;animation-duration:10s}
  .hero:hover::after,  .section.strip:hover::after {opacity:.35;animation-duration:7s}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.section.strip::before,.section.strip::after{animation:none;opacity:.12}
}

/* Keyframes */
@keyframes cngGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmerSweep{0%{background-position:-150% -50%}50%{background-position:150% 150%}100%{background-position:-150% -50%}}