/* ----------------------------------------------------------------------
   Appaza — "dynamic / editable" shim.

   The homepage section patterns were rewritten from a single frozen Custom
   HTML block into native Gutenberg blocks (Group / Heading / Paragraph /
   List / Details) so every line of copy is editable in the Site Editor.

   Native blocks emit core inline formats (<em> for italic, <strong> for
   bold) and wrapper classes (.wp-block-group, .wp-block-heading). This file
   maps those back onto the original design language and neutralises the
   block-gap margins Gutenberg injects, so the rendered result is identical
   to the original static markup.
   --------------------------------------------------------------------- */

/* --- Neutralise Gutenberg flow block-gap inside our sections ----------
   Kept at zero specificity (:where) and loaded after the block layout
   styles, so it cancels Gutenberg's injected margin-block-start without
   ever beating the design's own class-based margins.                     */
:where(.appaza-dyn.is-layout-flow) > *,
:where(.appaza-dyn) :where(.is-layout-flow) > * {
  margin-block-start: 0;
}

/* --- Italic emphasis  ( <em> === old <span class="ital"> ) ------------- */
.h1 em,
.sec-h em { font-style: italic; color: var(--ink-soft); }
.solutions .sec-h em,
.work .sec-h em { color: #9d9b94; }
.contact h2 em { font-style: italic; color: #9d9b94; }

/* --- Hero lime "accent" underline  ( <strong> === old .accent ) -------- */
/* Painted as a background gradient rather than a z-index:-1 pseudo, which
   the original used — the block-wrapped hero introduces stacking contexts
   that hid the negative-z bar. A background sits behind the text reliably. */
.h1 strong {
  font-weight: inherit;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0.78em;
  background-size: 100% 0.16em;
}

/* --- Founder portrait: real photo fills the box, gradient keeps the
       signature legible over it --------------------------------------- */
.founder-portrait .founder-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; z-index: 0; display: block;
}
.founder-portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,8,.78) 0%, rgba(10,10,8,.25) 34%, rgba(10,10,8,0) 58%);
}
.founder-portrait .badge { z-index: 2; }

/* --- Process: small decorative italic inside a step title ------------- */
.proc-row .pt em {
  font-family: "Instrument Serif", serif; font-style: italic;
  color: var(--mute); font-size: 18px;
}

/* --- Testimonial accent emphasis inside a quote ----------------------- */
.tt-card blockquote em { font-family: inherit; font-style: italic; }
.tt-card.tt-dark blockquote em { color: var(--accent); }

/* --- FAQ ( core/details === old <details class="qa"> ) ---------------- */
.faq-head .faq-intro { color: var(--ink-soft); font-size: 16px; line-height: 1.55; max-width: 42ch; }
details.qa { margin: 0; }
details.qa .ans { margin: 0; }
/* recreate the round "+" toggle the old .pl span provided.
   Only for summaries that DON'T already carry a literal .pl span (the
   service-page FAQ patterns still emit one — without this guard both the
   .pl and this pseudo render, giving two toggle circles). */
details.qa > summary:not(:has(.pl))::after {
  content: "+"; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  flex-shrink: 0; font-size: 18px; font-weight: 300; transition: .3s;
}
details.qa[open] > summary:not(:has(.pl))::after { background: var(--ink); color: #fff; transform: rotate(45deg); }
details.qa > summary::-webkit-details-marker { display: none; }

/* --- Contact ---------------------------------------------------------- */
#contact { padding: 60px 0 80px; }
.contact .mono { color: #9d9b94; margin-bottom: 18px; }
.contact-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.contact-bookcall { border-color: rgba(255,255,255,.2); color: #F1ECE3; }
.contact-side .row p { margin: 0; }

/* --- Founder ---------------------------------------------------------- */
#about { padding-top: 40px; }
.founder-actions { display: flex; gap: 14px; margin-top: 32px; }

/* --- Testimonials: card colour variants ( old inline styles ) --------- */
.tt-dark { background: var(--ink); color: #F1ECE3; border-color: #1a1a18; }
.tt-dark .name { color: #fff; }
.tt-dark .role { color: #9d9b94; }
.tt-dark blockquote { color: #fff; }
.tt-dark .body { color: #9d9b94; }
.tt-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tt-accent .body { color: #0a0f00; }
.tt-accent .stars .s { color: #0a0f00; }
/* strip core/quote default border + padding so it matches the design */
.tt-card blockquote.wp-block-quote { margin: 0; padding: 0; border: 0; }
.tt-card blockquote.wp-block-quote p { margin: 0; }

/* --- Solutions: per-card accent colour ( old inline --cc ) ------------ */
.sol-grid > .sol:nth-child(1)  { --cc: var(--c-indigo); }
.sol-grid > .sol:nth-child(2)  { --cc: var(--c-green); }
.sol-grid > .sol:nth-child(3)  { --cc: var(--c-violet); }
.sol-grid > .sol:nth-child(4)  { --cc: var(--c-pink); }
.sol-grid > .sol:nth-child(5)  { --cc: var(--c-cyan); }
.sol-grid > .sol:nth-child(6)  { --cc: var(--c-blue); }
.sol-grid > .sol:nth-child(7)  { --cc: var(--c-orange); }
.sol-grid > .sol:nth-child(8)  { --cc: var(--c-amber); }
.sol-grid > .sol:nth-child(9)  { --cc: var(--c-teal); }
.sol-grid > .sol:nth-child(10) { --cc: var(--c-red); }
.sol-grid > .sol:nth-child(11) { --cc: var(--c-blue); }
.sol-grid > .sol:nth-child(12) { --cc: var(--c-red); }
.sol-grid > .sol:nth-child(13) { --cc: var(--c-indigo); }
.sol-grid > .sol:nth-child(14) { --cc: var(--c-amber); }
.sol-grid > .sol:nth-child(15) { --cc: var(--c-pink); }
.sol-grid > .sol:nth-child(16) { --cc: var(--c-cyan); }

/* =======================================================================
   SOLUTIONS = QUERY LOOP over the "solution" custom post type
   (post-template renders <ul class="sol-grid"><li class="wp-block-post">)
   ======================================================================= */
.sol-query { position: relative; z-index: 2; }
ul.sol-grid { list-style: none; padding: 0; margin: 0; counter-reset: sol; }
.sol-grid > li.wp-block-post { display: flex; counter-increment: sol; }
.sol-grid > li.wp-block-post > .sol { width: 100%; }
/* card number, generated automatically from position */
.sol-grid > li > .sol::after {
  content: counter(sol, decimal-leading-zero);
  position: absolute; top: 18px; right: 20px;
  font-family: "Geist Mono", monospace; font-size: 11px; color: #5c5a53;
}
/* per-position accent colour (li is the counted child now) */
.sol-grid > li:nth-child(1)  .sol { --cc: var(--c-indigo); }
.sol-grid > li:nth-child(2)  .sol { --cc: var(--c-green); }
.sol-grid > li:nth-child(3)  .sol { --cc: var(--c-violet); }
.sol-grid > li:nth-child(4)  .sol { --cc: var(--c-pink); }
.sol-grid > li:nth-child(5)  .sol { --cc: var(--c-cyan); }
.sol-grid > li:nth-child(6)  .sol { --cc: var(--c-blue); }
.sol-grid > li:nth-child(7)  .sol { --cc: var(--c-orange); }
.sol-grid > li:nth-child(8)  .sol { --cc: var(--c-amber); }
.sol-grid > li:nth-child(9)  .sol { --cc: var(--c-teal); }
.sol-grid > li:nth-child(10) .sol { --cc: var(--c-red); }
.sol-grid > li:nth-child(11) .sol { --cc: var(--c-blue); }
.sol-grid > li:nth-child(12) .sol { --cc: var(--c-red); }
.sol-grid > li:nth-child(13) .sol { --cc: var(--c-indigo); }
.sol-grid > li:nth-child(14) .sol { --cc: var(--c-amber); }
.sol-grid > li:nth-child(15) .sol { --cc: var(--c-pink); }
.sol-grid > li:nth-child(16) .sol { --cc: var(--c-cyan); }
/* featured image as the card icon */
.sol figure.s-ico { margin: 0; overflow: hidden; }
.sol .s-ico img {
  width: 23px; height: 23px; object-fit: contain;
  filter: invert(.92);            /* near-white on the dark card */
  transition: filter .35s;
}
.sol:hover .s-ico img { filter: none; }  /* dark icon on the accent bg */
/* title + excerpt mapped to old h4 / .s-meta */
.sol .wp-block-post-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 14px 0 4px; line-height: 1.2; }
.sol .wp-block-post-title a { color: inherit; text-decoration: none; }
.sol .wp-block-post-excerpt.s-meta p { margin: 0; }
.sol-empty { color: #9d9b94; }

/* =======================================================================
   SOLUTION SINGLE PAGE  (templates/single-solution.html)
   ======================================================================= */
.sol-hero { border-bottom: 1px solid var(--line); }
.sol-hero .crumb { gap: 8px; }
.sol-hero .crumb p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.sol-hero .crumb .crumb-current {
  margin: 0; font-family: "Geist Mono", monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  font-weight: 400; line-height: inherit;
}
/* badge: featured-image icon + excerpt meta inside the .s-cat pill.
   The .wrap uses constrained layout (auto margins + max-width on children),
   which stretched the flex badge full-width and centered the narrow title.
   Force the badge to hug its content and keep the hero left-aligned. */
.sol-hero .s-cat { gap: 9px; display: inline-flex; width: auto; max-width: 100%; }
/* full-width box so constrained-layout auto-margins don't center the title */
.sol-hero .wp-block-post-title { max-width: none; text-align: left; }
.sol-hero .crumb, .sol-hero .s-actions { margin-inline: 0; }

/* restored intro (lede + stats) prepended to each solution's content */
.solution-single .sol-intro { padding-top: 44px; }
.solution-single .sol-intro .s-lede { margin-top: 0; }
.solution-single .sol-intro .stats { margin-top: 40px; }
.sol-hero .s-cat figure.ico { margin: 0; width: 18px; height: 18px; }
.sol-hero .s-cat figure.ico img { width: 18px; height: 18px; object-fit: contain; }
.sol-hero .s-cat .badge-meta,
.sol-hero .s-cat .badge-meta p { margin: 0; font-size: 11px; }
.sol-hero .wp-block-post-title { margin-top: 22px; }
.sol-hero .s-actions p { margin: 0; }
/* related solutions strip (dark section reusing the homepage card look) */
.rel-solutions-sec { padding: 90px 0; }
.rel-solutions-sec .sol-head { margin-bottom: 40px; }
.rel-solutions-sec .sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1080px) { .rel-solutions-sec .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rel-solutions-sec .sol-grid { grid-template-columns: 1fr; } }
.rel-solutions .sol-grid > li:nth-child(1) .sol { --cc: var(--c-green); }
.rel-solutions .sol-grid > li:nth-child(2) .sol { --cc: var(--c-pink); }
.rel-solutions .sol-grid > li:nth-child(3) .sol { --cc: var(--c-cyan); }
.rel-solutions .sol-grid > li:nth-child(4) .sol { --cc: var(--c-amber); }

/* =======================================================================
   DYNAMIC HEADER  (parts/header.html → Site Title + Navigation + Button)
   ======================================================================= */
.nav .nav-inner { display: flex; align-items: center; justify-content: space-between; }

/* Brand: core/site-title styled like the old .brand link with its dot */
.nav .brand { margin: 0; font-weight: 600; letter-spacing: -.02em; font-size: 18px; }
.nav .brand a {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.nav .brand a::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
  box-shadow: 0 0 0 3px transparent, 0 0 0 4px var(--ink);
}

/* Navigation block mapped onto the old .nav-links look */
.nav .wp-block-navigation.nav-links { font-size: 14px; color: var(--ink-soft); }
.nav .nav-links ul.wp-block-navigation__container {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 28px;
}
.nav .nav-links .wp-block-navigation-item a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
  position: relative; text-decoration: none; color: inherit;
}
.nav .nav-links .wp-block-navigation-item a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.nav .nav-links .wp-block-navigation-item a:hover::after { transform: scaleX(1); }

/* CTA: core/button restyled as the round pill */
.nav .brand { display: inline-flex; align-items: center; line-height: 0; }
.nav .brand-logo { height: 75px; width: auto; display: block; }
@media (max-width: 640px) { .nav .brand-logo { height: 48px; } }
.nav .nav-cta-wrap { margin: 0; }
.nav .wp-block-button.cta .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; padding: 8px 13px 8px 15px;
  border-radius: 999px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: transform .2s, background .2s;
}
.nav .wp-block-button.cta .wp-block-button__link:hover { background: #000; transform: translateY(-1px); }
.nav .wp-block-button.cta .arrow {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 10px;
}
/* ===================== MOBILE NAV (hamburger, no plugin/JS) ============ */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; }
@media (min-width: 901px) {
  /* desktop: panel is transparent so brand | links | CTA sit in one flex row */
  .nav .nav-panel { display: contents; }
}
@media (max-width: 900px) {
  .nav .nav-inner { position: relative; flex-wrap: wrap; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; cursor: pointer; flex: 0 0 auto;
  }
  .nav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* drop-down panel */
  .nav .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg); border-bottom: 1px solid rgba(17, 17, 16, .1);
    padding: 12px 24px 22px; box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .35);
  }
  .nav-toggle:checked ~ .nav-panel { display: flex; }
  .nav .nav-panel .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
  .nav .nav-panel .nav-links .wp-block-navigation-item a { padding: 11px 2px; font-size: 16px; }
  .nav .nav-panel .nav-links .wp-block-navigation-item a::after { display: none; }
  .nav .nav-panel .nav-cta-wrap { margin: 8px 0 0; }
  .nav .nav-panel .wp-block-button.cta .wp-block-button__link { white-space: nowrap; }
}

/* ===================== SMALL-SCREEN POLISH (≤600px) =================== */
@media (max-width: 600px) {
  .wrap, .blog-loop-wrap { padding-left: 20px; padding-right: 20px; }
  .article.wp-block-post-content { padding-left: 20px; padding-right: 20px; }
  .contact { margin: 0 12px; padding: 52px 22px; }
  /* every remaining multi-column grid → single column */
  .sol-grid,
  .stats,
  .core-grid,
  .svc-grid,
  .feat-grid,
  .work-grid,
  .tt-grid,
  .deliv,
  .foot-top,
  .post-grid > .wp-block-post-template,
  .rel-grid > .wp-block-post-template { grid-template-columns: 1fr !important; }
  /* keep long headings/words inside the screen */
  .h1, .sec-h, h1, h2, h3, .art-head h1 { overflow-wrap: break-word; word-break: break-word; }
  .h1 { font-size: clamp(44px, 13vw, 60px); }
  /* solution/service hero buttons stack */
  .s-actions { flex-direction: column; align-items: flex-start; }
}

/* =======================================================================
   SHOWCASE PAGE  (showcase CPT + appaza/showcase-grid block)
   Same rules as the static template's showcase.html.
   ======================================================================= */
.show-sec { padding: 70px 0 30px; }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
@media (max-width: 1000px) { .apps-grid { grid-template-columns: 1fr; } }
.apps-grid .card .thumb { aspect-ratio: 16/9; }
.apps-grid .card .thumb img, .sites-grid .card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.apps-grid .card .chips, .sites-grid .card .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.apps-grid .card .chips span, .sites-grid .card .chips span { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; border: 1px solid rgba(17,17,16,.14); padding: 5px 8px; border-radius: 999px; color: var(--ink-soft); }
.apps-grid .card .applink, .sites-grid .card .applink { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.apps-grid .card .applink .ar, .sites-grid .card .applink .ar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; transition: .3s; }
.apps-grid .card:hover .applink .ar, .sites-grid .card:hover .applink .ar { transform: rotate(-45deg); }
.soon { font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 5px 9px; border-radius: 6px; }
.clients-sec { margin-top: 80px; }
.sites-sec { padding: 90px 0 0; }
.sites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
@media (max-width: 1000px) { .sites-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .sites-grid { grid-template-columns: 1fr; } }
.sites-grid .card .thumb { aspect-ratio: 16/11; }
.show-cta { display: flex; justify-content: center; padding: 90px 0 110px; }
.show-cta p { margin: 0; }
.work .wcard .w-art { object-fit: cover; }

/* =======================================================================
   CONTACT PAGE  (patterns/contact-page.php + appaza/contact-form block)
   ======================================================================= */
.cpage-body { padding: 70px 0 110px; }
.cpage-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .cpage-grid { grid-template-columns: 1fr; } }
.cpage-side .row { border-bottom: 1px solid var(--line); padding: 18px 0; }
.cpage-side .row p { margin: 0; }
.cpage-side .lbl { font-family: "Geist Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }
.cpage-side .val { font-size: 16px; margin-top: 4px; }
.cpage-side .val a { color: inherit; }

.pform { display: flex; flex-direction: column; gap: 18px; background: var(--card); border: 1px solid rgba(17,17,16,.08); border-radius: var(--radius, 20px); padding: 34px; }
.pform .pf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .pform .pf-row2 { grid-template-columns: 1fr; } }
.pform label { display: flex; flex-direction: column; gap: 8px; }
.pform .lbl { font-family: "Geist Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }
.pform input, .pform select, .pform textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; outline: none; transition: border-color .2s;
}
.pform input:focus, .pform select:focus, .pform textarea:focus { border-color: var(--ink); }
.pform select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111110' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.pform textarea { resize: vertical; min-height: 140px; }
.pform .pf-submit { border: 0; cursor: pointer; align-self: flex-start; font: inherit; font-weight: 500; }
.pform-ok {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 18px;
  font-size: 15px; font-weight: 500;
}
.pform-err {
  background: #fde8e2; color: #7a2310; border: 1px solid #f5b9a6;
  border-radius: 12px; padding: 16px 20px; margin-bottom: 18px;
  font-size: 15px; font-weight: 500;
}
/* honeypot field — visually hidden but reachable by bots */
.pform .ap-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* =======================================================================
   FOOTER — professional · clean · responsive  (parts/footer.html)
   ======================================================================= */
footer.site { padding: 84px 32px 36px; max-width: var(--maxw); margin: 0 auto; }

/* top: brand + 3 link columns */
.foot-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 56px 40px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(17, 17, 16, .12);
}

/* brand block */
.foot-brand { max-width: 380px; }
.foot-brand .foot-logo { height: 46px; width: auto; display: block; margin: 0 0 18px; }
.foot-brand .b { margin: 0 0 16px; }
.foot-brand .b a {
  font-family: "Instrument Serif", serif; font-size: clamp(44px, 5vw, 58px);
  line-height: .9; letter-spacing: -.03em; color: var(--ink); text-decoration: none;
}
.foot-brand .wp-block-site-tagline {
  color: var(--ink-soft); font-size: 14px; line-height: 1.65; max-width: 36ch; margin: 0;
}

/* social row — force a horizontal row of circular icon buttons */
.foot-social.wp-block-social-links {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: 10px; margin: 26px 0 0; padding: 0; list-style: none;
}
.foot-social .wp-block-social-link {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; line-height: 0;
  margin: 0 !important; padding: 0 !important; background: transparent;
  transition: background .2s, color .2s, transform .2s;
}
.foot-social .wp-block-social-link a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border: 0; background: transparent;
  color: var(--ink); padding: 0 !important; margin: 0;
}
/* force monochrome ink icons (WP's logos-only style tints them per brand) */
.foot-social .wp-block-social-link svg { width: 17px; height: 17px; display: block; }
.foot-social .wp-block-social-link svg,
.foot-social .wp-block-social-link svg path { fill: var(--ink); color: var(--ink); }
.foot-social .wp-block-social-link:hover { background: var(--ink); transform: translateY(-2px); }
.foot-social .wp-block-social-link:hover svg,
.foot-social .wp-block-social-link:hover svg path { fill: #fff; color: #fff; }

/* link columns */
.foot-col .wp-block-heading {
  font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mute); margin: 0 0 18px;
}
.foot-col ul.wp-block-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.foot-col ul.wp-block-list li { margin: 0; }
.foot-col ul.wp-block-list a {
  font-size: 14.5px; color: var(--ink-soft); text-decoration: none; transition: color .2s;
}
.foot-col ul.wp-block-list a:hover { color: var(--ink); }

/* bottom bar */
.foot-bot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; padding-top: 26px; font-size: 13px; color: var(--mute);
}
.foot-bot p { margin: 0; }
.foot-bot .legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-bot .legal p a { color: var(--mute); text-decoration: none; transition: color .2s; }
.foot-bot .legal p a:hover { color: var(--ink); }

/* responsive */
@media (max-width: 960px) {
  footer.site { padding: 64px 28px 32px; }
  .foot-top { grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
  .foot-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 600px) {
  footer.site { padding: 56px 22px 30px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 380px) {
  .foot-top { grid-template-columns: 1fr; }
}