/* ============================================================================
   WILDNET PATTERNS
   Design system taken directly from the source build (css/styles.css tokens
   + the Poppins/Inter pair loaded in index.html).

   Loaded on the front end AND in the block editor, so Gutenberg previews match
   the published page.
   ============================================================================ */

:root{
  /* Brand — Wildnet orange on deep navy */
  --wt-brand:      #FAAA18;   /* --brand      */
  --wt-brand-dk:   #e2960b;   /* --brand-dark */
  --wt-brand-soft: #fff4e0;   /* --brand-soft */
  --wt-brand-tint: #fff9f0;   /* --brand-tint */

  /* Ink & text */
  --wt-ink:        #0e1b3a;   /* --ink   — headings, deep navy */
  --wt-body:       #4a5568;   /* --body  — body copy           */
  --wt-muted:      #7a8699;   /* --muted                       */

  /* Surfaces */
  --wt-line:       #e9edf3;   /* --line    */
  --wt-surface:    #ffffff;   /* --bg      */
  --wt-tint:       #f7f9fc;   /* --bg-alt  */

  /* Scale */
  --wt-radius:     16px;      /* --radius */
  --wt-maxw:       1180px;    /* --maxw   */
  --wt-gap:        24px;
  --wt-section-y:  clamp(56px, 6vw, 96px);

  /* Type — Poppins for display, Inter for body */
  --wt-font-display:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wt-font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Typography: Poppins on every heading, Inter on every body string. */
.wt-hero__title,
.wt-section__title,
.wt-card__title,
.wt-quote__co,
.wt-visnode__name,
.wt-person__name,
.wt-badge__name,
.wt-post__title,
.wt-stat__num,
.wt-audit__form-title,
.wt-faq__item summary{
  font-family:var(--wt-font-display);
}

.wt-section,
.wt-hero,
.wt-eyebrow,
.wt-hero__lede,
.wt-section__lede,
.wt-card__body,
.wt-quote__body,
.wt-visnode__desc,
.wt-person__role,
.wt-post__excerpt,
.wt-svc__list,
.wt-audit__list,
.wt-aiviz__note{
  font-family:var(--wt-font-body);
}

/* ---------- shared section furniture ---------- */
.wt-section{ padding-block:var(--wt-section-y); }

.wt-eyebrow{
  margin:0 auto 12px;
  text-align:center;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wt-brand);
}
.wt-eyebrow--left{ text-align:left; margin-inline:0; }

.wt-section__title{
  margin:0 auto 14px;
  max-width:24ch;
  font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--wt-ink);
}
.wt-section__title--left{ margin-inline:0; text-align:left; max-width:18ch; }

.wt-section__lede{
  margin:0 auto 44px;
  max-width:62ch;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--wt-body);
}

/* ---------- HERO / BANNER ---------- */
.wt-hero{
  position:relative;
  padding-block:clamp(64px, 7vw, 112px);
  text-align:center;
  background:
    radial-gradient(62% 72% at 50% 0%,
      color-mix(in srgb, var(--wt-brand) 9%, transparent) 0%,
      transparent 70%),
    var(--wt-surface);
}
.wt-hero__title{
  margin:0 auto 20px;
  max-width:20ch;
  font-size:clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:800;
  color:var(--wt-ink);
}
.wt-hero__title em{ font-style:normal; color:var(--wt-brand); }

.wt-hero__lede{
  margin:0 auto 32px;
  max-width:64ch;
  font-size:1.125rem;
  line-height:1.65;
  color:var(--wt-body);
}
.wt-hero__ctas{ justify-content:center; margin-bottom:56px; }

.wt-hero__stats{
  gap:var(--wt-gap);
  padding-top:40px;
  border-top:1px solid var(--wt-line);
}
.wt-stat{ text-align:center; }
.wt-stat__num{
  margin:0 0 4px;
  font-size:clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--wt-ink);
}
.wt-stat__label{ margin:0; font-size:.8125rem; line-height:1.4; color:var(--wt-muted); }

/* ---------- BUTTONS (scoped: the theme's other buttons are untouched) ---------- */
.wt-btn--solid .wp-block-button__link{
  background:var(--wt-brand);
  color:#fff;
  border:1.5px solid var(--wt-brand);
  border-radius:10px;
  padding:14px 26px;
  font-weight:600;
}
.wt-btn--solid .wp-block-button__link:hover{
  background:var(--wt-brand-dk);
  border-color:var(--wt-brand-dk);
  color:#fff;
}
.wt-btn--ghost .wp-block-button__link{
  background:transparent;
  color:var(--wt-ink);
  border:1.5px solid var(--wt-line);
  border-radius:10px;
  padding:14px 26px;
  font-weight:600;
}
.wt-btn--ghost .wp-block-button__link:hover{
  border-color:var(--wt-brand);
  color:var(--wt-brand);
  background:var(--wt-tint);
}

/* ---------- CARD SURFACES ---------- */
.wt-cards{ gap:var(--wt-gap); }

.wt-card, .wt-quote, .wt-svc, .wt-ind, .wt-step, .wt-badge{
  padding:26px;
  border:1px solid var(--wt-line);
  border-radius:var(--wt-radius);
  background:var(--wt-surface);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.wt-card:hover, .wt-quote:hover, .wt-svc:hover, .wt-ind:hover, .wt-step:hover{
  border-color:var(--wt-brand);
  box-shadow:0 14px 36px rgba(16,24,42,.08);
  transform:translateY(-3px);
}
.wt-card__ico{
  margin:0 0 14px;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--wt-tint);
  font-size:22px;
}
.wt-card__title, .wt-quote__co{
  margin:0 0 8px;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--wt-ink);
}
.wt-card__body{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--wt-muted); }

/* ---------- SERVICES ---------- */
.wt-svc{ display:flex; flex-direction:column; }
.wt-svc__list{
  margin:16px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--wt-line);
  list-style:none;
}
.wt-svc__list li{
  padding:6px 0 6px 18px;
  position:relative;
  font-size:.875rem;
  color:var(--wt-body);
}
.wt-svc__list li::before{
  content:"\203A";
  position:absolute; left:0;
  color:var(--wt-brand);
  font-weight:700;
}
.wt-svc__link{ margin:18px 0 0; }
.wt-svc__link a{
  font-size:.875rem;
  font-weight:700;
  color:var(--wt-brand);
  text-decoration:none;
}
.wt-svc__link a:hover{ text-decoration:underline; }

/* ---------- FRAMEWORK STEPS ---------- */
.wt-step__num{
  margin:0 0 12px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--wt-brand);
}

/* ---------- TESTIMONIALS ---------- */
.wt-quote__tag{
  margin:0 0 10px;
  display:inline-block;
  padding:4px 10px;
  border-radius:100px;
  background:var(--wt-tint);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--wt-brand);
}
.wt-quote__body{ margin:0 0 18px; font-size:.9375rem; line-height:1.7; color:var(--wt-muted); }
.wt-quote__body::before{ content:"\201C"; }
.wt-quote__body::after{ content:"\201D"; }
.wt-quote__who{
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--wt-line);
  font-size:.875rem;
  line-height:1.5;
  color:var(--wt-body);
}
.wt-quote__who strong{ color:var(--wt-ink); }

/* ---------- TEAM ---------- */
.wt-person{ text-align:center; }
.wt-person__img{ margin:0 0 14px; }
.wt-person__img img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--wt-radius);
}
.wt-person__name{ margin:0 0 4px; font-size:1rem; font-weight:700; color:var(--wt-ink); }
.wt-person__role{ margin:0; font-size:.8125rem; line-height:1.45; color:var(--wt-muted); }

/* ---------- CLIENT LOGOS ---------- */
.wt-clients{ background:var(--wt-tint); }
.wt-logos.wp-block-gallery{ align-items:center; }
.wt-logos .wp-block-image img{
  max-height:44px;
  width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .18s, opacity .18s;
}
.wt-logos .wp-block-image:hover img{ filter:none; opacity:1; }

/* ============================================================================
   WIN VISIBILITY BEYOND GOOGLE
   Matches the source design: logo nodes separated by literal arrows.
   Logos sit greyscale and resolve to full colour on hover; the arrows carry a
   slow left-to-right shimmer so the row reads as a pathway, not a static list.
   Pure CSS — no JS, so it works inside a plain block pattern.
   ============================================================================ */
.wt-aiviz{ background:var(--wt-tint); }

.wt-visrow{
  gap:8px;
  align-items:stretch;
  margin-top:8px;
}

.wt-visnode{
  flex:1 1 0;
  min-width:0;
  padding:26px 16px;
  text-align:center;
  border:1px solid var(--wt-line);
  border-radius:var(--wt-radius);
  background:var(--wt-surface);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.wt-visnode:hover{
  border-color:var(--wt-brand);
  box-shadow:0 14px 34px rgba(250,170,24,.20);
  transform:translateY(-4px);
}

.wt-visnode__img.wp-block-image{
  margin:0 auto 14px;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--wt-brand-tint);
}
.wt-visnode__img.wp-block-image img{
  width:30px; height:30px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.55;
  transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}
.wt-visnode:hover .wt-visnode__img.wp-block-image img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.12);
}

.wt-visnode__name{
  margin:0 0 6px;
  font-size:.9375rem;
  font-weight:700;
  color:var(--wt-ink);
}
.wt-visnode__desc{
  margin:0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--wt-body);
}

/* the arrows between nodes — shimmer left to right along the pathway */
.wt-visarrow{
  flex:0 0 auto;
  align-self:center;
  margin:0;
  padding:0 2px;
  font-size:1.25rem;
  line-height:1;
  color:var(--wt-line);
  animation:wt-arrow 3.2s ease-in-out infinite;
}
.wt-visrow > .wt-visarrow:nth-of-type(1){ animation-delay:0s; }
.wt-visrow > .wt-visarrow:nth-of-type(2){ animation-delay:.35s; }
.wt-visrow > .wt-visarrow:nth-of-type(3){ animation-delay:.7s; }
.wt-visrow > .wt-visarrow:nth-of-type(4){ animation-delay:1.05s; }

@keyframes wt-arrow{
  0%,55%,100%{ color:var(--wt-line);  transform:translateX(0); }
  20%        { color:var(--wt-brand); transform:translateX(3px); }
}

.wt-aiviz__note{
  margin:44px auto 0;
  max-width:64ch;
  padding:18px 26px;
  border:1px solid var(--wt-line);
  border-radius:100px;
  background:var(--wt-surface);
  font-size:.9375rem;
  color:var(--wt-body);
}
.wt-aiviz__note em{ font-style:normal; font-weight:700; color:var(--wt-brand); }

@media (max-width:900px){
  .wt-visrow{ flex-wrap:wrap !important; gap:16px; }
  .wt-visarrow{ display:none; }          /* arrows are meaningless once wrapped */
  .wt-visnode{ flex:1 1 40%; }
}
@media (max-width:520px){
  .wt-visnode{ flex:1 1 100%; }
  .wt-aiviz__note{ border-radius:var(--wt-radius); }
}
@media (prefers-reduced-motion:reduce){
  .wt-visarrow{ animation:none; }
  .wt-visnode:hover{ transform:none; }
}

/* ---------- AWARDS ---------- */
.wt-badges{ gap:12px; }
.wt-badge{ padding:20px 14px; text-align:center; }
.wt-badge__name{ margin:0 0 2px; font-size:.9375rem; font-weight:800; color:var(--wt-ink); }
.wt-badge__tier{ margin:0; font-size:.75rem; color:var(--wt-muted); }

/* ---------- BLOG (core/query) ---------- */
.wt-blog__grid{ gap:var(--wt-gap); }
.wt-blog__grid > li{
  padding:0 0 24px;
  border:1px solid var(--wt-line);
  border-radius:var(--wt-radius);
  overflow:hidden;
  background:var(--wt-surface);
  transition:border-color .16s, box-shadow .16s;
}
.wt-blog__grid > li:hover{
  border-color:var(--wt-brand);
  box-shadow:0 14px 36px rgba(16,24,42,.08);
}
.wt-post__img{ margin:0 0 16px; }
.wt-post__img img{ width:100%; object-fit:cover; }
.wt-post__cat,
.wt-post__title,
.wt-post__excerpt,
.wt-post__date{ padding-inline:22px; }
.wt-post__cat{
  margin:0 0 8px;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--wt-brand);
}
.wt-post__cat a{ color:inherit; text-decoration:none; }
.wt-post__title{ margin:0 0 10px; font-size:1.0625rem; line-height:1.35; font-weight:700; }
.wt-post__title a{ color:var(--wt-ink); text-decoration:none; }
.wt-post__title a:hover{ color:var(--wt-brand); }
.wt-post__excerpt{ margin:0 0 12px; font-size:.9375rem; line-height:1.6; color:var(--wt-muted); }
.wt-post__date{ margin:0; font-size:.8125rem; color:var(--wt-muted); }
.wt-blog__cta{ justify-content:center; margin-top:40px; }

/* ---------- FAQ (core/details) ---------- */
.wt-faq__list{ max-width:820px; margin-inline:auto; }
.wt-faq__item{
  padding:20px 22px;
  border:1px solid var(--wt-line);
  border-radius:var(--wt-radius);
  background:var(--wt-surface);
  transition:border-color .16s;
}
.wt-faq__item + .wt-faq__item{ margin-top:12px; }
.wt-faq__item[open]{ border-color:var(--wt-brand); }
.wt-faq__item summary{
  font-size:1rem;
  font-weight:600;
  color:var(--wt-ink);
  cursor:pointer;
  list-style:none;
}
.wt-faq__item summary::-webkit-details-marker{ display:none; }
.wt-faq__item summary::after{
  content:"+";
  float:right;
  font-size:1.25rem;
  line-height:1;
  color:var(--wt-brand);
}
.wt-faq__item[open] summary::after{ content:"\2212"; }
.wt-faq__item p{ margin:14px 0 0; font-size:.9375rem; line-height:1.7; color:var(--wt-muted); }

/* ---------- AUDIT CTA ---------- */
.wt-audit{
  background:linear-gradient(160deg, var(--wt-ink) 0%, #16294f 100%);
  color:#fff;
  border-radius:var(--wt-radius);
  padding-inline:clamp(24px, 4vw, 56px);
}
.wt-audit .wt-eyebrow{ color:var(--wt-brand); }
.wt-audit .wt-section__title{ color:#fff; }
.wt-audit__cols{ gap:44px; align-items:center; }
.wt-audit__list{ margin:0; padding:0; list-style:none; }
.wt-audit__list li{
  padding:12px 0 12px 26px;
  position:relative;
  font-size:.9375rem;
  line-height:1.6;
  color:#B8C6DC;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.wt-audit__list li::before{
  content:"\2192";
  position:absolute; left:0;
  color:var(--wt-brand);
}
.wt-audit__list li strong{ color:#fff; }

.wt-audit__form{
  padding:28px;
  border-radius:var(--wt-radius);
  background:var(--wt-surface);
}
.wt-audit__form-title{ margin:0 0 6px; font-size:1.25rem; font-weight:700; color:var(--wt-ink); }
.wt-audit__form-lede{ margin:0 0 20px; font-size:.9375rem; color:var(--wt-muted); }
.wt-audit__privacy{ margin:16px 0 0; font-size:.8125rem; color:var(--wt-muted); }

/* Style a Contact Form 7 form dropped into that column to match the card. */
.wt-audit__form .wpcf7 input:not([type=submit]),
.wt-audit__form .wpcf7 textarea,
.wt-audit__form .wpcf7 select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--wt-line);
  border-radius:9px;
  font-size:.9375rem;
}
.wt-audit__form .wpcf7 input[type=submit]{
  width:100%;
  padding:14px;
  border:0;
  border-radius:9px;
  background:var(--wt-brand);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.wt-audit__form .wpcf7 input[type=submit]:hover{ background:var(--wt-brand-dk); }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .wt-hero__stats,
  .wt-inds .wt-cards,
  .wt-team .wt-cards{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .wt-badges{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width:781px){
  .wt-cards,
  .wt-hero__stats,
  .wt-badges,
  .wt-blog__grid,
  .wt-inds .wt-cards,
  .wt-team .wt-cards{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .wt-audit__cols{ gap:28px; }
}
@media (max-width:520px){
  .wt-cards,
  .wt-badges,
  .wt-blog__grid,
  .wt-inds .wt-cards,
  .wt-team .wt-cards{ grid-template-columns:minmax(0,1fr) !important; }
  .wt-hero__stats{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .wt-hero__ctas{ flex-direction:column; }
  .wt-hero__ctas .wp-block-button{ width:100%; }
  .wt-hero__ctas .wp-block-button__link{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .wt-card, .wt-quote, .wt-svc, .wt-ind, .wt-step{ transition:none; }
  .wt-card:hover, .wt-quote:hover, .wt-svc:hover,
  .wt-ind:hover, .wt-step:hover{ transform:none; }
}