/* =========================================================
   garywillock.co.uk — personal design layer
   Family DNA (Magma Cloud / NeuraSec): Bootstrap 5 base,
   token-driven, card/chip/eyebrow patterns, button lift.
   Own identity: light neutral theme + indigo accent.
   Loaded AFTER style.css to override the DevFolio template.
   ========================================================= */

:root {
  --gw-ink:       #0f1a26;
  --gw-muted:     #5b6b7a;
  --gw-bg:        #f7f9fb;
  --gw-surface:   #ffffff;
  --gw-border:    rgba(15, 22, 32, 0.08);
  --gw-accent:    #3b50b5;
  --gw-accent-2:  #5468d4;
  --gw-accent-ink:#2c3d8f;
  --gw-tint:      rgba(59, 80, 181, 0.08);
  --gw-tint-2:    rgba(59, 80, 181, 0.16);
  --gw-dark:      #0e1620;
  --gw-dark-2:    #16202e;
  --gw-shadow:    0 22px 50px -28px rgba(15, 22, 32, 0.28);
  --gw-radius:    16px;
  --heading-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body-font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base overrides ---------- */
body {
  font-family: var(--body-font);
  color: var(--gw-ink);
  background: var(--gw-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--gw-ink);
  letter-spacing: -0.015em;
}
a { color: var(--gw-accent); }
a:hover { color: var(--gw-accent-ink); }
section { scroll-margin-top: 90px; }
#contact { scroll-margin-top: 90px; }
img { max-width: 100%; }

/* ---------- Header / nav (restyle DevFolio shell) ---------- */
#header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gw-border);
  box-shadow: none;
  padding: 16px 0;
}
#header .logo a { color: var(--gw-ink); font-weight: 800; letter-spacing: -0.02em; }
#header .logo a:hover { color: var(--gw-accent); }
.navbar a, .navbar a:focus {
  color: var(--gw-ink);
  font-weight: 500;
}
.navbar a:hover, .navbar .active, .navbar li:hover > a { color: var(--gw-accent); }
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active { color: var(--gw-accent); }

/* ---------- Buttons ---------- */
.btn-gw {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gw-accent);
  color: #fff;
  border: 1px solid var(--gw-accent);
  border-radius: 10px;
  padding: .7rem 1.4rem;
  font-weight: 600;
  transition: all .2s ease;
}
.btn-gw:hover, .btn-gw:focus {
  background: var(--gw-accent-ink);
  border-color: var(--gw-accent-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(59, 80, 181, 0.6);
}
.btn-gw-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff;
  color: var(--gw-ink);
  border: 1px solid rgba(15, 22, 32, 0.18);
  border-radius: 10px;
  padding: .7rem 1.4rem;
  font-weight: 600;
  transition: all .2s ease;
}
.btn-gw-outline:hover {
  background: #f3f5f9;
  color: var(--gw-ink);
  border-color: var(--gw-accent);
  transform: translateY(-2px);
}

/* ---------- Eyebrow pill + section heads ---------- */
.gw-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem;
  background: var(--gw-tint);
  color: var(--gw-accent);
  border-radius: 999px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: 0.02em;
}
.gw-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gw-accent); display: inline-block; }
.gw-section { padding: 5rem 0; }
.gw-h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; }
.gw-lead { color: var(--gw-muted); font-size: 1.05rem; max-width: 42rem; }

/* ---------- Hero ---------- */
.gw-hero {
  position: relative;
  padding: 8.5rem 0 5rem;
  background:
    radial-gradient(1100px 600px at 90% 0%, var(--gw-tint-2) 0%, transparent 55%),
    radial-gradient(900px 500px at 0% 10%, rgba(59,80,181,0.06) 0%, transparent 55%),
    var(--gw-bg);
  overflow: hidden;
}
.gw-hero .gw-h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 1rem 0 .5rem;
}
.gw-hero .gw-positioning {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gw-accent);
  margin-bottom: 1rem;
}
.gw-hero .gw-intro { color: var(--gw-muted); font-size: 1.05rem; max-width: 36rem; }
.gw-portrait {
  border-radius: 20px;
  box-shadow: var(--gw-shadow);
  width: 100%;
  object-fit: cover;
}
.gw-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.gw-facts span {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 500; color: var(--gw-ink);
}
.gw-facts i { color: var(--gw-accent); }

.gw-hero .gw-availability {
  font-size: 1rem;
  color: var(--gw-ink);
  background: var(--gw-tint);
  border-left: 3px solid var(--gw-accent);
  border-radius: 0 8px 8px 0;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  max-width: 34rem;
}

/* ---------- Brand family cards ---------- */
.gw-family-card { display: block; text-decoration: none; }
.gw-family-card h3 { color: var(--gw-ink); }
.gw-family-card:hover h3 { color: var(--gw-accent); }
.gw-family-card .gw-out {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--gw-accent); font-weight: 600; font-size: .9rem; margin-top: .75rem;
}
.gw-family-card .gw-out i { transition: transform .2s ease; }
.gw-family-card:hover .gw-out i { transform: translateX(4px); }

/* ---------- Credential badges ---------- */
.gw-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.gw-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,22,32,.04);
}
.gw-badge i { color: var(--gw-accent); }

/* ---------- Generic card ---------- */
.gw-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 1.85rem;
  height: 100%;
  transition: all .25s ease;
  box-shadow: 0 1px 2px rgba(15,22,32,.03);
}
.gw-card:hover {
  border-color: var(--gw-accent);
  box-shadow: var(--gw-shadow);
  transform: translateY(-4px);
}
.gw-ico {
  width: 52px; height: 52px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gw-tint);
  color: var(--gw-accent);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: all .25s ease;
}
.gw-card:hover .gw-ico { background: var(--gw-accent); color: #fff; }
.gw-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; }
.gw-card p { color: var(--gw-muted); margin-bottom: 0; }

/* ---------- Competency groups (skill bars replacement) ---------- */
.gw-comp h4 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.gw-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.gw-chip {
  display: inline-flex; align-items: center;
  padding: .35rem .8rem;
  font-size: .82rem; font-weight: 600;
  border-radius: 999px;
  background: var(--gw-tint);
  color: var(--gw-accent-ink);
  border: 1px solid transparent;
}

/* ---------- About panel ---------- */
.gw-about-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  box-shadow: var(--gw-shadow);
  padding: 2.25rem;
}
.gw-meta p { margin-bottom: .5rem; }
.gw-meta .k { font-weight: 700; color: var(--gw-ink); }
.gw-meta .v { color: var(--gw-muted); }

/* ---------- Stats band (dark) ---------- */
.gw-stats {
  background:
    radial-gradient(800px 400px at 50% 0%, var(--gw-dark-2) 0%, transparent 60%),
    var(--gw-dark);
  color: #fff;
  padding: 4.5rem 0;
}
.gw-stat { text-align: center; padding: 1rem; }
.gw-stat .gw-stat-ico {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--gw-accent-2);
  font-size: 1.6rem; margin-bottom: 1rem;
}
.gw-stat .gw-num { font-size: 2.6rem; font-weight: 900; line-height: 1; color: #fff; }
.gw-stat .gw-stat-label { color: rgba(255,255,255,0.65); font-size: .92rem; margin-top: .5rem; display: block; }

/* ---------- Work history cards ---------- */
.gw-work-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 1.5rem;
  height: 100%;
  display: flex; flex-direction: column;
  transition: all .25s ease;
  box-shadow: 0 1px 2px rgba(15,22,32,.03);
}
.gw-work-card:hover { border-color: var(--gw-accent); box-shadow: var(--gw-shadow); transform: translateY(-4px); }
.gw-work-logo {
  height: 56px; width: auto; max-width: 160px;
  object-fit: contain; margin-bottom: 1rem;
}
.gw-work-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.gw-work-role { color: var(--gw-muted); font-size: .92rem; margin-bottom: .35rem; }
.gw-work-date {
  display: inline-block; font-size: .78rem; font-weight: 600;
  color: var(--gw-accent); background: var(--gw-tint);
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: 1rem;
}
.gw-work-link {
  margin-top: auto; font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.gw-work-link i { transition: transform .2s ease; }
.gw-work-card:hover .gw-work-link i { transform: translateX(4px); }

/* ---------- Reference cards (carousel replacement) ---------- */
.gw-ref-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 1.75rem;
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(15,22,32,.03);
  transition: all .25s ease;
}
.gw-ref-card:hover { box-shadow: var(--gw-shadow); transform: translateY(-3px); }
.gw-ref-quote-mark { color: var(--gw-accent); font-size: 1.6rem; line-height: 1; opacity: .5; }
.gw-ref-quote { color: var(--gw-ink); font-size: .95rem; line-height: 1.6; margin: .5rem 0 1.25rem; }
.gw-ref-person { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.gw-ref-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gw-ref-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.gw-ref-title { color: var(--gw-muted); font-size: .82rem; }

/* ---------- Footer ---------- */
footer {
  background: var(--gw-dark);
  color: rgba(255,255,255,0.72);
  padding: 3.5rem 0 2.5rem;
}
footer .copyright { color: #fff; font-weight: 600; }
footer a { color: var(--gw-accent-2); }
footer a:hover { color: #fff; }
footer .gw-family-link { color: #fff; font-weight: 600; }
.gw-foot-contact span { display: inline-flex; align-items: center; gap: .5rem; }
.gw-foot-contact i { color: var(--gw-accent-2); }
.socials .ico-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.socials .ico-circle:hover { background: var(--gw-accent); }

/* ---------- Role-page (portfolio-details) restyle ---------- */
.hero-single { padding: 8rem 0 3.5rem; }
.hero-single .overlay-mf { background-color: var(--gw-dark); opacity: 0.85; }
.hero-single .hero-title { color: #fff; font-weight: 800; }
.hero-single .breadcrumb-item { color: rgba(255, 255, 255, 0.8); }
.portfolio-details .post-box {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  box-shadow: var(--gw-shadow);
  padding: 2.25rem;
}
.portfolio-details .post-thumb img { max-height: 90px; width: auto; object-fit: contain; }
.portfolio-details .article-title { font-weight: 800; margin-top: 1rem; }
.portfolio-details .blockquote {
  border-left: 3px solid var(--gw-accent);
  padding-left: 1rem; color: var(--gw-muted);
}
.portfolio-details .article-content li { list-style: none; margin: .4rem 0; }
.portfolio-details .article-content li i { color: var(--gw-accent); margin-right: .5rem; }
.button {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--gw-accent); color: #fff;
  border-radius: 10px; padding: .65rem 1.3rem; font-weight: 600;
}
.button:hover { background: var(--gw-accent-ink); color: #fff; box-shadow: 0 10px 24px -10px rgba(59,80,181,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .gw-hero { padding-top: 7rem; text-align: center; }
  .gw-hero .gw-facts, .gw-hero .gw-badges, .gw-hero .gw-cta-row { justify-content: center; }
  .gw-portrait { max-width: 340px; margin: 2rem auto 0; display: block; }
}
@media (max-width: 575px) {
  .gw-section { padding: 3.5rem 0; }
  .gw-stat .gw-num { font-size: 2.1rem; }
}