/* Site footer (patterns/footer.php) — ports src/components/Footer.tsx. Loaded on every page.
 * The footer is all core blocks (+ xq/canvas-background); these rules give the
 * blocks the React look. Selectors are scoped under .xq-footer so they beat
 * WP's zero/low-specificity flow-layout, block-style and link defaults. */

/* Flow-layout reset: WP adds margin-block-start:24px to every non-first child. */
.xq-footer .wp-block-group, .xq-footer p, .xq-footer ul, .xq-footer li { margin: 0; }
.xq-footer a { text-decoration: none; }

.xq-footer { background: var(--wp--preset--color--bg-surface); border-top: 1px solid var(--wp--preset--color--border); }

/* ── Canvas band: canvas host + two fade overlays (::before/::after) + caption ── */
.xq-footer .xq-footer-band { position: relative; height: 220px; overflow: hidden; border-bottom: 1px solid var(--wp--preset--color--border); }
.xq-footer-band .xq-footer-network { position: absolute; inset: 0; margin: 0; }
.xq-footer-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xq-footer-band::before, .xq-footer-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.xq-footer-band::before { background: linear-gradient(to right, var(--wp--preset--color--bg-surface) 0%, transparent 12%, transparent 88%, var(--wp--preset--color--bg-surface) 100%); }
.xq-footer-band::after { background: linear-gradient(to bottom, var(--wp--preset--color--bg-surface) 0%, transparent 30%, transparent 70%, var(--wp--preset--color--bg-surface) 100%); }
.xq-footer .xq-footer-band-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; text-align: center; padding: 0 16px; }
.xq-footer .xq-footer-band-tagline { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--text-1); }
.xq-footer .xq-footer-band-subtext { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--text-2); letter-spacing: 0.1em; }

/* ── Container + top grid (brand 200px + five equal columns) ── */
.xq-footer .xq-footer-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.xq-footer .xq-footer-top { display: grid; grid-template-columns: 200px repeat(5, 1fr); gap: 40px; padding: 48px 0 56px; border-bottom: 1px solid var(--wp--preset--color--border); }

/* Brand */
.xq-footer .xq-footer-logo { margin-bottom: 16px; }
a.xq-footer-logo { text-decoration: none; display: flex; width: fit-content; align-items: center; gap: 9px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--ui); font-weight: 700; color: var(--wp--preset--color--text-0); letter-spacing: -0.02em; line-height: 1.6; }
a.xq-footer-logo:hover { color: var(--wp--preset--color--text-0); }
.xq-footer-logo img { height: 24px; width: auto; display: block; }
.xq-footer .xq-footer-tagline { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2); line-height: 1.6; margin-bottom: 18px; }

/* Social icons: core/social-links (logos-only) restyled as React's 28px
 * bordered boxes with 14px glyphs. The five services the footer uses draw
 * Footer.tsx's own paths (mask on ::before) instead of WP's icon set, whose
 * LinkedIn/Facebook glyphs are boxed/circled variants; any other service an
 * editor adds falls back to WP's SVG at the same 14px. */
.xq-footer .xq-footer-socials { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; font-size: 14px; }
.xq-footer-socials .wp-social-link { display: block; border-radius: 6px; background: none; transform: none; transition: none; }
.xq-footer-socials .wp-social-link:hover { transform: none; }
.xq-footer-socials.is-style-logos-only .wp-social-link a.wp-block-social-link-anchor { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text-2); transition: color 0.15s, border-color 0.15s; }
.xq-footer-socials.is-style-logos-only .wp-social-link a.wp-block-social-link-anchor:hover { color: var(--wp--preset--color--text-0); border-color: var(--wp--preset--color--border-mid); }
.xq-footer-socials .wp-social-link svg { width: 14px; height: 14px; }
.xq-footer-socials :is(.wp-social-link-linkedin, .wp-social-link-twitter, .wp-social-link-facebook, .wp-social-link-youtube, .wp-social-link-github) svg { display: none; }
.xq-footer-socials :is(.wp-social-link-linkedin, .wp-social-link-twitter, .wp-social-link-facebook, .wp-social-link-youtube, .wp-social-link-github) a::before {
	content: ""; width: 14px; height: 14px; background: currentColor;
	-webkit-mask: var(--xq-social-icon) center / contain no-repeat; mask: var(--xq-social-icon) center / contain no-repeat;
}
.xq-footer-socials .wp-social-link-linkedin { --xq-social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.64h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.6c0-1.34-.02-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96V21h-4V9z%22/%3E%3C/svg%3E"); }
.xq-footer-socials .wp-social-link-twitter { --xq-social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M22 5.9c-.7.32-1.46.53-2.25.63a3.93 3.93 0 0 0 1.72-2.17c-.76.45-1.6.78-2.5.96A3.9 3.9 0 0 0 12.1 8.9c0 .31.03.6.1.89A11.07 11.07 0 0 1 4.05 5.1a3.9 3.9 0 0 0-.53 1.96c0 1.35.69 2.54 1.73 3.24a3.87 3.87 0 0 1-1.77-.49v.05c0 1.89 1.34 3.46 3.13 3.82-.33.09-.67.14-1.03.14-.25 0-.5-.02-.74-.07a3.92 3.92 0 0 0 3.66 2.72A7.86 7.86 0 0 1 2.5 18.4a11.05 11.05 0 0 0 6 1.76c7.2 0 11.15-6 11.15-11.2l-.01-.51c.77-.55 1.43-1.24 1.96-2.03-.7.32-1.46.53-2.25.62.8-.48 1.42-1.25 1.71-2.15z%22/%3E%3C/svg%3E"); }
.xq-footer-socials .wp-social-link-facebook { --xq-social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13.5 21v-7.5H16l.4-2.9h-2.9V8.7c0-.85.24-1.43 1.46-1.43h1.56V4.7c-.27-.04-1.2-.12-2.27-.12-2.25 0-3.79 1.37-3.79 3.89v2.17H8v2.9h2.46V21h3.04z%22/%3E%3C/svg%3E"); }
.xq-footer-socials .wp-social-link-youtube { --xq-social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21.6 7.2s-.21-1.5-.86-2.16c-.82-.87-1.74-.87-2.16-.92C15.6 4 12 4 12 4h-.01s-3.6 0-6.58.12c-.42.05-1.34.05-2.16.92-.65.66-.86 2.16-.86 2.16S2.18 9 2.18 10.8v1.68c0 1.8.2 3.6.2 3.6s.21 1.5.86 2.16c.82.87 1.9.84 2.38.93 1.72.17 7.38.22 7.38.22s3.6-.01 6.58-.13c.42-.06 1.34-.06 2.16-.93.65-.66.86-2.16.86-2.16s.2-1.8.2-3.6V10.8c0-1.8-.2-3.6-.2-3.6zM9.98 14.7V8.9l5.4 2.91-5.4 2.9z%22/%3E%3C/svg%3E"); }
.xq-footer-socials .wp-social-link-github { --xq-social-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.15-1.11-1.46-1.11-1.46-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z%22/%3E%3C/svg%3E"); }

/* Link columns */
.xq-footer .xq-footer-col-heading { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--text-2); margin-bottom: 16px; }
.xq-footer .xq-footer-links { padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.xq-footer-links a { display: block; width: fit-content; color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); padding: 4px 0; line-height: 1.6; transition: color 0.15s; }
.xq-footer-links a:hover { color: var(--wp--preset--color--text-0); }

/* ── Bottom bar: copyright · compliance badges · status ── */
.xq-footer .xq-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; flex-wrap: wrap; gap: 16px; }
.xq-footer .xq-footer-copy { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2); }
.xq-footer .xq-footer-copyline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.xq-footer .xq-footer-copyline > * { margin: 0; }
.xq-footer .xq-footer-legal::before { content: '·'; margin-right: 6px; }
.xq-footer .xq-footer-legal a { color: inherit; text-decoration: none; }
.xq-footer .xq-footer-legal a:hover, .xq-footer .xq-footer-legal a:focus-visible { color: var(--wp--preset--color--text-0); text-decoration: underline; }
.xq-footer .xq-footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.xq-footer .xq-footer-badges .is-style-badge { color: var(--wp--preset--color--text-3); font-size: var(--wp--preset--font-size--micro); padding: 3px 8px; }
.xq-footer .xq-footer-status { display: flex; align-items: center; gap: 7px; font-size: var(--wp--preset--font-size--meta); font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--text-2); letter-spacing: 0.05em; }
.xq-footer-status::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--wp--preset--color--green); animation: xq-pulse-dot 2.5s ease-in-out infinite; }

/* React keeps the 6-column footer at every width; it needs ~830px, so below
 * 1024 the brand takes its own row over three link columns, and phones get two. */
@media (max-width: 1023px) {
  .xq-footer .xq-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .xq-footer .xq-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .xq-footer .xq-footer-top { grid-template-columns: 1fr 1fr; } }