/* ============================================================
   Shared site footer - single source of truth, loaded on EVERY page.
   Everything is scoped under .kn-footer so these rules override any
   legacy footer CSS (index inline, site-chrome.css, case-page.css,
   about/blog inline) purely by specificity - no need to strip the old
   rules. Colours and fonts fall back to hardcoded brand values so the
   footer renders identically whether or not the host page defines the
   design tokens.
   Keep the footer MARKUP in sync across all pages (canonical block).
   ============================================================ */
.kn-footer{
  background:var(--ink,#14100D);color:var(--cream,#F2F1EB);
  padding:80px 0 40px;position:relative;overflow:hidden;
  font-family:var(--font-text,system-ui,'Helvetica Neue',sans-serif);
}
.kn-footer *{box-sizing:border-box}
.kn-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--terra,#A02F06),transparent);
}
.kn-footer .footer-inner{max-width:1500px;margin:0 auto;padding:0 40px}

/* Top: 2 link columns + brand (brand last in DOM = leftmost in RTL,
   so the menus sit on the right and the newsletter on the left) */
.kn-footer .footer-top{
  display:grid;grid-template-columns:auto auto 1fr;
  column-gap:clamp(40px,4vw,72px);row-gap:32px;padding-bottom:64px;
  border-bottom:1px solid rgba(242,241,235,0.1);align-items:start;
}
.kn-footer .footer-brand{max-width:440px}
.kn-footer .footer-brand .wm{display:flex;flex-direction:row-reverse;align-items:center;gap:16px;margin-bottom:22px}
.kn-footer .footer-brand .wm-symbol{height:46px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.95}
.kn-footer .footer-brand .wm-text{height:40px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.95}
.kn-footer .footer-brand p{margin:0;color:rgba(242,241,235,0.55);font-size:14px;max-width:360px;line-height:1.7}

/* Newsletter sign-up (captured via Netlify Forms) */
.kn-footer .footer-news{margin:0;max-width:380px}
.kn-footer .footer-news-label{display:block;font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(242,241,235,0.85);margin:0 0 14px}
.kn-footer .footer-news-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kn-footer .footer-news-note{margin:16px 0 0;font-size:12px;line-height:1.5;color:rgba(242,241,235,0.5)}
.kn-footer .footer-news-row{display:flex;align-items:stretch;border:1px solid rgba(242,241,235,0.22);border-radius:100px;overflow:hidden;background:rgba(242,241,235,0.04);transition:border-color 0.2s}
.kn-footer .footer-news-row:focus-within{border-color:rgba(165,207,249,0.6)}
.kn-footer .footer-news input[type=email]{flex:1;min-width:0;background:transparent;border:none;color:var(--cream,#F2F1EB);padding:13px 20px;font-family:inherit;font-size:14px;outline:none}
.kn-footer .footer-news input[type=email]::placeholder{color:rgba(242,241,235,0.4)}
.kn-footer .footer-news button{background:var(--terra,#A02F06);color:var(--cream,#F2F1EB);border:none;padding:13px 24px;font-family:var(--font-display,system-ui,sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:12px;cursor:pointer;white-space:nowrap;transition:background 0.2s,color 0.2s}
.kn-footer .footer-news button:hover{background:var(--sky,#A5CFF9);color:var(--ink,#14100D)}

/* Link columns, right-aligned (RTL site) */
.kn-footer .footer-col{text-align:right}
.kn-footer .footer-col h4{font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(242,241,235,0.42);margin:0 0 22px;font-weight:600}
.kn-footer .footer-col a{display:block;color:rgba(242,241,235,0.62);text-decoration:none;font-size:14px;padding:5px 0;margin:0;transition:color 0.25s,transform 0.2s}
.kn-footer .footer-col a:hover{color:var(--cream,#F2F1EB);transform:translateX(-3px)}
.kn-footer .footer-col a.footer-social-link{display:flex;align-items:center;justify-content:flex-start;gap:9px}
.kn-footer .footer-social-link svg{width:16px;height:16px;flex-shrink:0;display:block}

/* Bottom bar + copyright note */
.kn-footer .footer-bottom{padding-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:11px;letter-spacing:0.06em;color:rgba(242,241,235,0.4);text-transform:uppercase}
.kn-footer .footer-bottom-right{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.kn-footer .footer-legal-note{margin:18px 0 0;max-width:680px;font-size:11px;line-height:1.55;color:rgba(242,241,235,0.32)}

@media (max-width:900px){
  .kn-footer{padding:64px 0 28px}
  .kn-footer .footer-inner{padding:0 24px}
  .kn-footer .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .kn-footer .footer-brand{grid-column:1/3;max-width:none}
  .kn-footer .footer-news-col{grid-column:1/3}
}
@media (max-width:600px){
  /* Three link menus side by side, brand spanning the full width above.
     Every item is explicitly placed (with .kn-footer specificity) so stale
     per-page inline footer CSS can't collide items into the same cell. */
  .kn-footer .footer-top{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:30px}
  .kn-footer .footer-col.agency{grid-column:1;grid-row:1;text-align:right}
  .kn-footer .footer-col.legal{grid-column:2;grid-row:1;text-align:right}
  .kn-footer .footer-news-col{grid-column:1/3;grid-row:2}
  .kn-footer .footer-brand{grid-column:1/3;grid-row:3;max-width:none;text-align:left}
  .kn-footer .footer-col h4{margin-bottom:16px}
  .kn-footer .footer-col a{font-size:13px;padding:7px 0}
  .kn-footer .footer-col a.footer-social-link{gap:7px}
  .kn-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  /* Brand block reads left-to-right (English mission + Latin address), so on
     phones it keeps its own alignment while the Hebrew menus stay right. */
  .kn-footer .footer-brand{text-align:left}
  .kn-footer .footer-brand p{max-width:none}
  .kn-footer .footer-maps{align-items:flex-start}
  .kn-footer .footer-social-row{justify-content:flex-start;flex-wrap:wrap}
  /* Full-width newsletter slot; the button must not squeeze the input. */
  .kn-footer .footer-news{max-width:none}
  .kn-footer .footer-news input[type=email]{padding:13px 16px;font-size:15px}
  .kn-footer .footer-news button{padding:13px 18px}
  .kn-footer .footer-legal-note{max-width:none}
}

/* Anchor the brand + newsletter block to the footer's left edge. On the RTL
   page the 1fr brand column's content otherwise hugs its right side and
   clusters toward the menus, leaving the left half of the footer empty. */
@media (min-width:601px){
  .kn-footer .footer-brand{justify-self:left;text-align:left}
  .kn-footer .footer-brand .wm{justify-content:flex-start}
}

/* Social icons: one compact row under the newsletter (replaces the old
   "connect" link column). */
.kn-footer .footer-social-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:22px}
.kn-footer .footer-social-row a{color:rgba(242,241,235,0.55);display:block;transition:color 0.25s,transform 0.2s}
.kn-footer .footer-social-row a:hover{color:var(--sky,#A5CFF9);transform:translateY(-2px)}
.kn-footer .footer-social-row svg{width:19px;height:19px;display:block}

/* iOS Safari runs its own data detectors over the address line and wraps the
   postcode (and sometimes the whole street) in a synthetic <a>, rendering it
   as blue underlined tappable text mid-sentence. The format-detection meta
   asks it not to; this makes the address read as plain text even when it does
   it anyway. These attributes are only ever set by iOS, never by our markup. */
.kn-footer a[x-apple-data-detectors],
.kn-footer a[href^="tel:"]:not([data-tel]),
.kn-footer .footer-address a{
  color:inherit !important;text-decoration:none !important;
  font:inherit !important;pointer-events:none;
}

/* Address + navigation-app links in the brand block (De Club pattern) */
.kn-footer .footer-address{margin:16px 0 0 !important;font-size:13px;color:rgba(242,241,235,0.5)}
.kn-footer .footer-maps{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-top:14px}
.kn-footer .footer-maps a{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:9px;width:fit-content;font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:11px;letter-spacing:0.05em;color:rgba(242,241,235,0.5);text-decoration:none;transition:color 0.25s}
.kn-footer .footer-maps a:hover{color:var(--sky,#A5CFF9)}
.kn-footer .footer-maps svg{width:15px;height:15px;flex-shrink:0}

/* Placement: menus on the right (row 1), newsletter under them (row 2),
   brand block spanning both rows on the left. Desktop only — this block used
   to be unscoped and, sitting after the media queries, its source order beat
   the mobile layout and forced the brand into a phantom 3rd column. */
@media (min-width:601px){
  .kn-footer .footer-col.agency{grid-column:1;grid-row:1}
  .kn-footer .footer-col.legal{grid-column:2;grid-row:1}
  .kn-footer .footer-news-col{grid-column:1/3;grid-row:2;margin-top:8px}
  .kn-footer .footer-brand{grid-column:3;grid-row:1/3}
}